html {
  --template-color: #303c4e;
  --template-colorAlt: #29b4b4;
  --erreur: #960d0d;
  --msg-1: #303c4e;
  --msg-2: #dd6300;
  --msg-3: #960d0d;
}

.msg {
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  max-width: 25vw;
}

.msg1 {
  background-color: var(--msg-1);
  color: white;
}

.msg2 {
  background-color: var(--msg-2);
  color: white;
}

.msg3 {
  background-color: var(--msg-3);
  color: white;
}

.hide {
  display: none;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.ttf);
}

.material-icons,
.material-symbols-outlined {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

body {
  min-height: 100vh;
  min-width: 100vw;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif, Verdana, Geneva, Tahoma;
  font-size: 10pt;
  color: var(--template-color);
}

.bColorT {
  background-color: var(--template-color);
  color: white;
}

.bColorN {
  background-color: white;
  color: var(--template-color);
}


.fullHeight,
.fh {
  min-height: 100vh;
}

.fullWidth,
.fw {
  max-width: 100vw;
}

.flexWrap {
  display: flex;
  flex-wrap: wrap;
}

.flexRow {
  display: flex;
  flex-direction: row;
}

.flexCol {
  display: flex;
  flex-direction: column;
}

.flexStart {
  align-items: flex-start;
}

.flexCenter,
.fc {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
}

.inlineflex {
  display: inline-flex;
}

.flexVerticalCenter,
.fcv {
  align-items: center;
}

.flexHorizontalCenter,
.fch {
  text-align: center;
}

.flexGrow,
.fg {
  flex-grow: 1;
}

.flexChildEquals {
  flex-grow: 1;
  flex-basis: 0;
}

.flexBasis {
  flex-basis: 100%;
}

.flex {
  flex: 1 1 0;
}

.flexEnd {
  display: flex;
  align-items: flex-end;
}

.flexEndContent {
  display: flex;
  align-items: flex-end;
  justify-content: end;
}

.flexSelf {
  align-self: flex-end;
}

.flexSelfCenter {
  align-self: center;
}

.flexJustifyEnd {
  justify-content: end;
}

.flexJustifyStart {
  justify-content: start;
}

.logoImg {
  max-height: 8vh;
  height: 10em;
  min-height: 50px;
}

.itemForm {
  margin: 7px;
}

.bt {
  color: white;
  background-color: var(--template-color);
  border-radius: 25px;
  padding: 10px 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  font-weight: bold;
  cursor: pointer;
  border: 0;
}

.bt:hover {
  background-color: var(--template-colorAlt);
}

.btlight {
  color: white;
  background-color: var(--template-color);
  border-radius: 25px;
  padding: 5px 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  font-weight: bold;
  cursor: pointer;
  border: 0;
  margin: 3px;
  font-size: 1.2em;
}

.btlight:hover {
  background-color: var(--template-colorAlt);
}

.erreurLogin {
  color: var(--erreur);
}

.maincontent {
  height: calc(100vh - max(50px, 5vh));
  /* overflow: auto; */
  max-height: calc(100vh - max(50px, 5vh));
  padding: 20px;
}

.title {
  font-size: larger;
  font-weight: bold;
}

.tableSpaceBorder {
  border-collapse: separate;
  border-spacing: 0 2px;
  width: 100%;
}


.tableSpaceBorder td {
  vertical-align: middle;
  text-align: center;
}

.tableSpaceBorder th {
  vertical-align: middle;
}

.tableSpaceBorder tbody tr {
  border: 1px solid var(--template-color);
  margin: 20px;
  padding: 5px;
  cursor: default;
}

.tableSpaceBorder tbody tr:hover {
  background-color: aliceblue;
}

.tableSpaceBorder tbody tr:nth-child(odd) {
  background-color: #e7e7e7;
}

.tableSpaceBorder tr td {
  border-top: 1px solid var(--template-color);
  border-bottom: 1px solid var(--template-color);
  padding: 3px;
  max-width: 50vw;
}

.tableSpaceBorder tr td:first-child {
  border-left: 1px solid var(--template-color);
}

.tableSpaceBorder tr td:last-child {
  border-right: 1px solid var(--template-color);
}


.tableSpaceBorder2 {
  border-collapse: separate;
  border-spacing: 0 2px;
  width: 100%;
}

.tableSpaceBorder2 td {
  vertical-align: middle;
  text-align: center;
}

.tableSpaceBorder2 tbody tr {
  border: 1px solid var(--template-color);
  margin: 20px;
  padding: 5px;
  cursor: default;
}

.tableSpaceBorder2 tr td {
  border-top: 1px solid var(--template-color);
  border-bottom: 1px solid var(--template-color);
  padding: 3px;
  max-width: 50vw;
}

.tableSpaceBorder2 tr td:first-child {
  border-left: 1px solid var(--template-color);
}

.tableSpaceBorder2 tr td:last-child {
  border-right: 1px solid var(--template-color);
}

.trColor {
  font-weight: bold;
  background-color: #e7e7e7;
}

.gridTab {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 0.1fr 0.1fr;
  width: 100%;
  align-items: center;
}

.tblComptes {
  width: 100%;
  border-collapse: collapse;
}

.tblComptes td {
  vertical-align: middle;
  text-align: center;
}

.tblComptes th {
  vertical-align: middle;
}

.tblComptes tbody tr {
  border: 1px solid var(--template-color);
  margin: 20px;
  padding: 5px;
  cursor: default;
}

.tblComptes tbody tr:hover {
  background-color: aliceblue;
}

.tblComptes tbody tr.separator {
  height: 10px;
  border: none;
}

.tdBt {
  width: 2vw;
  min-width: 35px;
}


/****************************
            MenuUI
****************************/

.menuLeft {
  width: 11vw;
  min-width: 145px;
  height: calc(100vh - max(5vh, 50px));
}

.menuItem {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: var(--template-color);
  color: white;
  cursor: pointer;
  padding: 15px;
  font-weight: 600;
  font-size: larger;
  border-top: 1px solid white;
}

.menuItemLast {
  border-bottom: 1px solid white;
}

.menuItem:hover {
  background-color: var(--template-colorAlt);
}

.menuItemSel {
  background-color: var(--template-colorAlt);
}

/****************************
            BandeauUI
****************************/
.bandeau {
  background-color: var(--template-color);
  color: white;
  height: 5vh;
  min-height: 50px;
  font-weight: bold;
}

.closeBT {
  cursor: pointer;
  border: 1px solid white;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
}

.closeBT:hover {
  background-color: var(--template-colorAlt);
}

/****************************
            Login
****************************/
.popupCenterLogin {
  box-shadow: rgba(255, 255, 255, 0.2) 0px 7px 29px 0px;
  border-radius: 25px;
}

/****************************
            Popup
****************************/
.popupCenterDiv {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.popupCenter {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 5px;
}

.titlePopup {
  padding: 3px;
  background-color: var(--template-color);
  color: white;
  border-radius: 5px 5px 0px 0px;
}

.contentPopup {
  min-height: 6vh;
  padding: 20px;
}

.btPopup {
  padding: 20px;
}

.popupMessages {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: right;
  text-align: center;
  justify-content: bottom;
}

/***
User
**/

.formTitle {
  flex-basis: 175px;
}

.formInput,
.formInput input {
  width: 200px;

}

.formInput select {
  width: 208px;

}


table.sortable tbody tr:nth-child(odd) {
  background-color: #e7e7e7;
}

table.sortable tbody tr:nth-child(odd):hover {
  background-color: #e5f4ff;
}

/* Focus and hover styling */

table.sortable tbody tr:hover {
  background-color: #e5f4ff;
}

table.sortable th {
  cursor: pointer;
}

/******************************
*       Données
******************************/
.dropDiv {
  border: solid 1px var(--template-color);
  border-radius: 25px;
  padding: 20px;
  margin: 10px 0px;
}

.thLeft {
  text-align: left;
}

/******************************
*       Projets
******************************/
.divCheckCompteProjet {
  cursor: pointer;
}

.dateTileset {
  font-style: italic;
  font-size: smaller;

}

.titleTileset {
  font-weight: bold;
}

/******************************
*       Commentaires
******************************/
.vignetteCom{
  max-width: 100px;
  width: 100px;
  height: 100%;
  max-height: 100px;
  object-fit: cover;
  object-position: center;
}

.divCom{
  margin-top:5px;
  border:1px solid var(--template-color);
  cursor:  pointer;
}

.divCom:hover{
  background-color: #e5f4ff;
}
.commentProjet{
  margin-top: 5px;
  background-color: var(--template-color);
  color: white;
  font-weight: bold;
  padding: 3px;
  cursor:  pointer;
}

.commText{
  display: -webkit-box;
  max-width: 250px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popupCommentaire{
  position:absolute;
  right:10px;
  top:10px;
  width: 350px;
  max-height: calc(100vh - 130px);
  min-height:300px;
  overflow: hidden;
  background-color: white;
  color: var(--template-color);
  border-radius: 5px 5px 0px 0px;
}
.popupImg{
  width: 350px;
  max-height: 300px;
}
.pointer{
  cursor: pointer;
}
.padding5{
  padding:5px;
}