.modalNotification {
    background-color: rgba(153, 163, 164, 0.5) !important;
}

.modal-dialogNotification {
    max-width: unset !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.modal-dialog-centeredNotification::before {
    height: 100%
}

.modal-contentNotification {
    color: #064c78;
    overflow-x: hidden;
    overflow-y: unset !important;
    max-height: 80vh;
    height: auto;
    max-width: 60vw;
    overflow-y: auto;
    border-radius: 3vh !important;
}

.modal-headerNotification {
    position: sticky;
    top: 0;
    overflow-y: unset !important;
    padding: 1vh !important;
}

.modal-headerNotification button {
    position: absolute;
    right: 3%;
    width: 3vw !important;
    height: 3vw !important;
    padding: 0 !important;
    font-size: 2vw !important
}

.title-visuNotification {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    margin: 0 auto !important;
    width: 100%;
    font-size: 2vw !important;
    font-weight: bold;
    text-align: center;
}

.modal-bodyNotification {
    overflow-y: auto;
}

.txt-modalNotification {
    margin: 0 auto;
    text-align: center;
    height: auto;
    width: 100%;
}

.txt-modalNotification form {
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
    justify-content: space-evenly;
}

.sectionModalNotification {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.sectionModalNotification h4 {
    width: 100%;
    padding: 0.5vh 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #064c78;
    font-size: 3vh;
    font-weight: bold;
    margin-bottom: 2vh !important;
    margin-top: 1vh !important;
    border-radius: 2vh;
}

.rowFormModal {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 5vh;
    height: auto !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 1vh !important;
}

.rowLabelModal, .rowInputModal, .rowTwoInputModal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 35%;
    height: 75%;
    font-size: 2.5vh;
}

.invalid-feedback {
    margin-top : 0!important
}

/* .selectModal {
    height: 100%!important;
} */

.rowLabelModal {
    margin-right: 3vh;
    font-weight: bold;
}

.rowTwoInputModal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: center;
    width: 45%;
}

.date_animModal, .heure_animModal {
    /* padding: 0; */
    margin: 0;
    border-radius: 0.5vh;
    border: 0.2vh solid #89AABF;
    height: 100%;
    color: #064c78;
    width: 55%;
    text-align: center;
}

.heure_animModal {
    width: 40%;
}

.rowTinyModal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: auto;
    width: 100%;
}

.rowInputModal {
    width: 45%;
    justify-content: flex-start !important;
}

.rowInputModal input::placeholder, .rowInputModal input, .rowInputModal select:focus {
    text-align: center;
    color: #89AABF;
}

.rowInputModal input {
    border-color: #064c78;
    width: 100%!important;
}

.rowInputModal input, .rowInputModal input:focus {
    color: #064c78;
    box-shadow: unset;
    /* outline: none; */
}

.rowInputModal input:empty {
    border-color: #89AABF !important;
}

.rowInputModal select {
    padding: 0 0;
    margin: auto auto;
    border-color: #89AABF !important;
    text-align: center;
    text-align-last: center;
    color: #064c78;
}

.rowInputModal select option:not(:first-of-type), .rowInputModal select:focus {
    color: #064c78 !important;
}

.rowInputModal select option:first-of-type {
    color: #89AABF !important;
}

.rowInputModal select:default {
    color: #89AABF !important;
}

.rowLabelModal label span {
    font-weight: bold;
    color: red;
}

.containsImgModal, .contentRolesModal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 30vh;
    margin-bottom: 1vh;
}

.contentRolesModal {
    height: auto !important;
    margin-bottom: unset;
}

.actionsImgModal, .LstEtaModal {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    width: 35%;
    margin-right: 3vh;
}

.buttonsImgModal {
    display: flex;
    flex-direction: row;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 25%;
    width: 100%;
}

.selectImgModal, .retireImgModal {
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 1vw;
    text-align: center;
    border-radius: 1vh;
    font-weight: bold;
    border: none;
    background-color: #064c78;
}

.selectImgModal:disabled, .retireImgModal:disabled {
    background-color: #89AABF;
}

.visuImgModal, .LstRolesModal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    height: 100%;
    width: 45%;
    border-radius: 2vh;
    background-color: #fff;
    border: 0.2vh #89AABF solid;
    color: #064c78;
}

.LstRolesModal {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    border: unset;
}

.LstEtaModal, .LstRolesModal {
    justify-content: flex-start;
}

.previImgModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 90%;
    max-width: 90 !important;
    height: 77.5%;
    border-radius: 2vh;
    background-color: #fff;
}

.imgPreviModal {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: 1.5vh;
}

.modal-footerNotification {
    padding: 1vh 0 !important;
}

.actionsFooterModalNotification {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

#ConfirmNotificationModal, #AnnuleNotificationModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 5vh;
    font-weight: bold;
}

.scrollbarModal::-webkit-scrollbar {
    width: 1vw;
}

.scrollbarModal::-webkit-scrollbar-thumb {
    border-radius: 0 0 0 0;
    background-color: #064c78;
}

.scrollbarModal::-webkit-scrollbar-track {
    border-radius: 0 0 0 0;
    background-color: #89AABF;
}

.scrollbarX::-webkit-scrollbar {
    height: 1.5vh !important;
}

.scrollbarX::-webkit-scrollbar-track {
    border-radius: 0 0 0 0;
    background-color: #89aabf;
    width: 100%;
}

.scrollbarX::-webkit-scrollbar-thumb {
    border-radius: 0 0 1.5vh 1.5vh;
    background-color: #064c78;
    /* border: .5vw solid #89AABF */
}


[type="checkbox"]:not(.CheckPres, .CheckPreIns, .CheckPresence, .cocheSuppr, #AllPreIns, .CheckRefus, .ActUse, .cocheEta, .cocheEtaAll, #check_attest, #rememberCheck, #Periodique, .checkDays) {
    position: absolute;
    left: -9999px;
}

.CloTable {
    width: 100%;
    border-collapse: collapse;
    border-radius: 2vh !important;
}

.CloTable thead {
    min-height: 5vh !important;
    background-color: #064c78;
    color: white;
    font-weight: bold;
    border-radius: 2vh 2vh 0 0 !important;
}

.CloTable thead tr {
    min-height: 5vh !important;
    background-color: #064c78!important;
    border-radius: 2vh 2vh 0 0 !important;
    height: 100% !important;
}

.CloTable tr:nth-child(even) {
    background-color: #f2f2f2;
}

.CloTable tbody tr:hover {
    background-color: #ddd;
}

/* .PreTable tbody {
    border: 0.5vh solid #064c78;
    box-sizing: content-box!important;
    border-radius: 0 0 2vh 2vh;
} */

.CloTable th {
    font-size: 2.4vh;
    height: 100%;
    min-height: 5vh !important;
}

/* #comGen {
    margin-top: 10px;
    margin-left: 50px;
    width: 500px;
    height: 100px;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
    border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
    border-image: none;
    border-radius: 6px 6px 6px 6px;
    border-style: none solid solid none;
    border-width: medium 1px 1px medium;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
    color: #555555;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    line-height: 1.4em;
    padding: 5px 8px;
    transition: background-color 0.2s ease 0s;
  }


  #comGen:focus {
      background: none repeat scroll 0 0 #FFFFFF;
      outline-width: 0;
  } */

.CloTable tbody tr {
    min-height: 3.5vh !important;
}

.CheckPres, .CheckPreIns, .CheckPresence {
    width: 3vh !important;
    height: 3vh !important;
}

.ParticipantPossibility {
    min-height: 3.5vh !important;
}

.TdPreIns, .TdPres {
    min-height: 3.5vh !important;
    padding: 1.5vh 0 !important;
}

.DivTdPresIns, .DivTdPres {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.RowCom{
    min-height: 4vh!important;
}

.CellCom {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: auto!important;
    min-height: 3.5vh!important;
    padding: 1vh 0 !important;
    width: 100%;
    border-bottom: 0.2vh solid #064c78;
}

.CloTable td {
    font-size: 2vh;
}

.paraCom, #RecapActNotification {
    color: #064c78;
    font-size: 2.5vh;
    margin-bottom: 2vh !important;
}

.heightKeeper {
    width: 1px;
    margin-right: -1px;
}

.comNotModifiable {
    width: 100%;
    min-height: 3vh!important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#comGen, .comIndi {

    overflow: hidden;
    flex-grow: 1;
    resize: none;
    min-height: 5vh !important;
    color: #064c78;
    border-color: #064c78!important;
    padding: 1vh!important;
    border-radius: 2vh!important;
    text-align: center!important;
}

.ActionComIndi {
    width: 20%;
    height: 100%!important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* border: 0.2vh solid red; */
}

.DeleteIndividualCom, .ValideIndividualCom, .AddIndivicualCom, .AddIndivicualComDisabled {
    /* height: 3vw;
    width: 3vw; */
    align-self: center;
    height: 3.5vh!important;
    width: auto;
    border: none;
    background-color: transparent;
    outline: none;
    margin: 0 auto;
    cursor: pointer;
}

.DeleteIndividualCom {
    /* background-color: red;
    border-radius: 2vh 0 0 2vh; */
    background-image: url(/img/Suppr.svg);
}

.ValideIndividualCom {
    background-color: #3aaa35;
    border-radius: 0 2vh 2vh 0;
    background-image: url(/img/Validation_2.svg);
}

.comIndi:focus {
    outline: unset!important;
}

.comIndi {
    border: unset!important;
    border-radius: unset!important;
    background-color: transparent!important;
    /* padding: 0!important; */
}

#comGen:focus {
    outline: #064c78;
}

#comGen::placeholder, .comIndi::placeholder {
    color: #89AABF;
}


@media screen and (max-aspect-ratio: 13/9) {

    .modal-dialog-centered {
        width: 100% !important
    }

    .modal-content {
        max-width: 90vw;
        width: 100% !important;
        overflow-y: auto;
    }

    .modal-header button {
        width: 7vw !important;
        height: 7vw !important;
        font-size: 4vw !important
    }

    .title-visu {
        font-size: 4vw !important;
    }
}