body {
    display: flex;
    flex-direction: column;
}

a[role=button] {
    cursor: pointer;
}
a {
    text-decoration: inherit;
    color: black;
}
a:not(.e-list-text):not(.alert):hover {
    background-color: #f8f9fa;
}
h1 {
    font-family: "Harabara Mais";
    font-size: calc(1.25rem + .9vw);
    margin: 0px;
}
h2 {
    font-size: calc(.9rem + .9vw);
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #1D388B;
    margin: 0 !important;
}
h2 a {
    white-space: nowrap;
}
h2 .pathSeparator {
    font-size: 18px;
    color: #696969;
    margin: 0px 10px;
}
h3 {
    font-size: calc(1rem + .3vw);
    display: flex;
    align-items: center;
    font-weight: 500;
}
h4 {
    font-size: calc(.75rem + .3vw);
}
.small, .small input.e-input, .small textarea.e-input, .small .e-input-group, .small .e-input-group.e-control-wrapper {
    font-size: .85rem;
}
.small .dropdown-item {
    font-size: var(--bs-body-font-size);
}
.small input[type=text], .small input[type=email], .small input[type=number], .small input[type=date], .small input[type=password], .small select, .small textarea {
    padding: 2px 5px;
}
input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], select, textarea { /* Syncfusion */
    padding: 2px 10px;
    border-radius: .3rem;
    border: 1px solid #DBDBDB;
}
.colorPreview {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}
/* Syncfusion */
.e-input-group.e-control-wrapper, .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-radius: .3rem;
    border: 1px solid #DBDBDB;
    box-shadow: none;
}
.e-ddl.e-input-group.e-control-wrapper .e-input, .e-treeview .e-list-text, .e-control {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
}
/* Fin Syncfusion */
select {
    padding-top: 4px;
    padding-bottom: 4px;
}
input[type=number] {
    width: 5rem;
}
input[type=date] {
    width: 130px;
    padding-right: 5px;
}
input[type=checkbox]:enabled, input[type=radio]:enabled {
    cursor: pointer;
}
input[type=checkbox] + label, input[type=radio] + label {
    padding-left: 5px;
    color: #696969;
}
input[type=checkbox]:enabled + label, input[type=radio]:enabled + label {
    cursor: pointer;
}
input[type=checkbox]:checked + label, input[type=radio]:checked + label {
    color: #1D388B;
    font-weight: 500;
}

select {
    color: #1D388B;
}

.btnWithIcon.btnWithIconDisabled {
    color: gray;
}
.fileInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
}
.fileInfo .tableau td:not(:first-child) {
    white-space: normal;
}
.btnWithIcon .material-icons-round, .btn .material-icons-round {
    font-size: 22px;
}

.text-orange, a.text-orange:hover {
    color: #E07D0A;
}
.texteBleu, .texteBleu span {
    color: #1D388B;
}
.colorGray, .colorGray.dropdown-item.disabled {
    color: #696969;
}
.noData {
    font-style: italic;
    color: #696969;
}

.splitter_panel {
    flex-grow: 1;
    display: flex;
}
.splitter_panel .vsplitter {
    background-color: #DBDBDB;
    width: 5px;
}
.left_panel {
    width: 300px;
    background-color: #F2F4F8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.right_panel {
    left: 300px; /* Pour le chargement */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items:center;
    position: relative;
    overflow: hidden;
    padding: 1rem;
    background-color: #d5e7ed;
    transition: padding .35s ease;
}
.scrollContainer {
    flex-basis: 0;
    flex-grow: 1;
    overflow: auto;
}
.filters {
    position: sticky;
    left: 0px;
    top: 0px;
    padding: 1rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    z-index: 2;
    background-color: white;
    /*border-bottom: 3px solid #00ABBD;*/
    /*border-bottom: 3px solid #1D388B;*/
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 4px;
    border-bottom: 1px solid rgba(60, 60, 60, .25);
    transition: top .35s ease;
}
.filters > div:first-child {
    margin-bottom: .5rem;
}
.filters > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .5rem;
}
.filters > div > div {
    display: flex;
    column-gap: .5rem;
    row-gap: .25rem;
}
.filters .checkbox {
    display: inline-block;
    white-space: nowrap;
}
.filters input[type=text], .filters input[type=number] {
    width: 200px;
}
.filters .btnWithIcon.btnClear {
    position: absolute;
    top: 2px;
    right: .75rem;
    padding: 0px;
}
.filters .btnWithIcon.btnSearch {
    padding-top: 1px;
    padding-bottom: 1px;
}
.filter {
    color: #1D388B;
    font-weight: 500;
}
.filter.filledFilter {
    background-color: lightgoldenrodyellow;
}
/*input[type=text].numberFilter {
    width: 150px;
}*/
.filesCount {
    font-style: italic;
    color: #749517;
    white-space: nowrap;
}
.resultsContainer {
    padding: 1rem;
}

.navbar {
    background-color: #252a3f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: calc(2.25rem + 2vw);
    /*padding: calc(.25rem + .45vw);*/
    padding: 0 .5rem;
}
.navbar a:not(.dropdown-item), .navigation a, .detailsTitle button, .modal-header button {
    color: white !important;
}
.navbar a:not(.dropdown-item):hover, .navbar button:hover, .navbar a, .navigation button:hover, .navigation a, button.btnWithIcon.btnClose:hover, .detailsTitle button:hover {
    background-color: transparent;
}
.toggleView {
    margin-right: 1rem;
    display: flex;
}
.toggleView .btnWithIcon {
    color: #696969;
    padding: 0px;
}
.toggleView .btnWithIcon:not(.btnWithIconSecondary) {
    color: #E07D0A;
    cursor: inherit;
}
.toggleView .material-icons-round, #dropdownAccount .material-icons-round {
    font-size: calc(1.625rem + .9vw);
}
.navigation {
    background-color: #252a3f;
    display: flex;
    padding: .25rem .5rem;
}

/*.purchaseLicence {
    text-align: center;
    border-bottom: 1px solid #d9d9d9;
}*/

.treeView {
    background-color: white;
    flex-grow: 1;
    overflow: auto;
}
.e-treeview > .e-ul {
    overflow: visible;
    /*padding-left: 5px;*/
}
/*.e-treeview .e-text-content {
    padding: 1px 0px 1px 25px;
}*/
.e-treeview .e-fullrow {
    height: 40px;
}
/*.e-treeview .e-list-item {
    margin-top: 2px;
}*/
.e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
    color: #1D388B;
}
.e-treeview .e-list-item.e-active {
    font-weight: inherit;
}
.e-treeview .e-list-item.e-active > .e-fullrow {
/*    background-color: inherit;
    border: none;*/
    background-color: rgba(155, 213, 239, .7) !important;
    border: 1px solid rgba(6, 150, 215, .5) !important;
}
.e-treeview .e-list-item.e-active > .e-text-content, .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
/*    background-color: #132663;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: white;*/
/*    background-color: rgba(155, 213, 239, .7);
    border: 1px solid rgba(6, 150, 215, .5);*/
}
/*.e-treeview .e-list-item.e-active > .e-text-content .e-list-text, .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text
    , .e-treeview .e-list-item.e-active>.e-text-content .e-icons, .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icons {
    color: white !important;
}*/
.treeViewFooter {
    /*background-color: #f8f9fa;*/
    text-align: center;
    padding: .5rem;
    border-top: 1px solid #DBDBDB;
}

.rectangle {
    max-width: 100%;
    background-color: white;
    /*padding: 20px;*/
    border-radius: .3rem;
    box-shadow: 0px 6px 8px #0000000F;
}

.grille {
    white-space: nowrap;
    background-color: white;
}
.grille th, .grille td {
    padding: 2px 10px;
}
.grille td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 500px;
    height: 40px;
}
.grille th {
    font-size: 14px;
    font-weight: normal;
    background-color: white;
    color: #696969;
}
.grille thead th {
    height: 45px;
    position: sticky;
    top: -.25px;
    z-index: 1;
    transition: top .35s ease;
}
.grille:not(.grilleCompare) tr:nth-child(odd) {
    background-color: #f8f9fa;
}
.grille:not(.grilleCompare) td:first-child {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
}
.grille:not(.grilleCompare) td:last-child {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
}
.grille:not(.grilleCompare) tbody tr:hover:not(.selectedFile), .grille:not(.grilleCompare) tbody tr:hover:not(.selectedFile) .colorGray {
    color: #0056b3;
}
.grille.clickableGrille tbody tr:hover {
    cursor: pointer;
}
.grille.grilleFiles td:first-child {
    padding-left: 20px; /* Pour le .selectedRowIndicator */
}
.grilleCompare {
    margin-left: 35px;
}
.grille.grilleCompare thead th:not(:first-child) {
    background-color: #252a3f;
    border-left: 1px solid #93959f;
}
.grille.grilleCompare > tbody tr th, .grille.grilleCompare > tbody tr td:nth-child(odd) {
    background-color: #f8f9fa;
}
.grilleCompare thead th {
    color: white;
    font-weight: 500;
}

.listContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}
.listContainer > a {
    background-color: #f8f9fa;
    border: 3px solid #f8f9fa;
    border-radius: .3rem;
    padding: .5rem;
    min-width: 170px;
    max-width: 220px;
    display: flex;
    align-items: flex-start;
}
.listContainer > a.folder {
    max-width: 170px;
    display: flex;
    flex-direction: column;
}
.listContainer > a:not(.folder) > div {
    margin-left: .5rem;
}
.listContainer .listImage {
    max-width: 100px;
    max-height: 100px;
}
.listContainer .fileIcon {
    margin-bottom: 5px;
}
.listContainer * {
    word-break: break-word;
}
.listContainer .boardDate {
    font-size: .8rem;
}
.listContainer .noFilesFound {
    width: 100%;
    text-align: center;
    padding-top: 30px;
}

tr.selectedFile, tr.selectedFile .colorGray, .listContainer > a.selectedFile h4 {
    color: #E07D0A;
    font-weight: 600;
    position: relative;
}
tr.lastUploadedFile, .listContainer > a.lastUploadedFile {
    background-color: #d1e7dd !important;
    color: #0f5132;
}
.selectedRowIndicator {
    display: none;
    position: absolute;
    z-index: 1;
    top: 5%;
    height: 90%;
    left: 0px;
    width: 6px;
    border-radius: 3px;
    background-color: #E07D0A;
}
.selectedRowIndicator.selectedFile {
    display: inherit;
}
.listContainer > a.selectedFile {
    border: 3px solid #E07D0A;
}

.details {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100%;
    padding-bottom: .5rem;
    /*overflow: visible;*/ /* Pour toggleDetails */
    background-color: white;
    border-left: 1px solid #DBDBDB;
    z-index: 1000;
    top: 0px;
    right: 0px;
    transition: width .35s ease;
    width: 0px;
}
.details.detailsOpen {
    width: 542px; /* 1 de + que fileInfoContainer pour la bordure, à renseigner pour l'animation */
}
.fileInfoContainer { /* A renseigner pour detailsExpanded */
    width: 541px;
}
.details:not(.detailsExpanded) .viewContainer  {  /* Pour la vue 3D lorsqu'elle est générée pendant l'expand (tester en supprimant les fichiers obj et mtl) */ 
    width: 541px;
    max-width: 100vw;
}
.right_panel:has(.details.detailsOpen) {
    padding-right: calc(542px + 1rem);
}
.details.detailsExpanded {
    width: 100%;
    border-left-style: none;
    flex-direction: row;
    padding-left: 1rem;
}
.details.loadedCanvas {
    flex-direction: column;
}
.fileInfoContainer {
    display: flex;
    flex-direction: column;
    /*align-items: stretch;*/
    position: relative;
    align-self: start;
}
.fileInfoContainer .myPanel {
    padding: 0;
}
.details:not(.detailsExpanded) .fileInfoContainer .myPanel {
    border-radius: 0;
    border-top: 0;
    border-left: 0;
}
.details.detailsExpanded .fileInfoContainer .myPanel {
    margin-top: 1rem;
}
.details.detailsExpanded .detailsTitle {
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
}
.detailsTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #252a3f;
    overflow: hidden;
}
.detailsTitle h3 {
    padding: 10px;
    margin-bottom: 0px;
    color: white;
    white-space: nowrap; /* Sinon le calcul de la hauteur n'est pas bon, ou bien attendre l'ouverture des détails avant de calculer la hauteur ? */
}
.detailsTitle input[type=text] {
    background-color: #252a3f;
    color: white;
}
/*.details .tableau {
    width: 502px;
    max-width: 100%;
}*/
.warehouseImagesPopover {
/*    width: 400px;
    max-width: 100%;*/
    max-width: 400px;
    max-height: 400px;
}
.surferProfile {
    width: 100%;
    max-width: 500px;
}
.surferProfile div {
    width: inherit;
}
.surferProfile select.form-select, .surferProfile input[type=number] {
    width: 170px;
}
.previousNext {
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    display: none;
}
.previousNext .bi {
    font-size: 1.5rem;
}
.details.detailsExpanded .previousNext {
    display: inherit;
}
.details .txtPreview, .details .imagePreview {
    margin-left: 20px;
    margin-right: 20px;
}
.viewContainer {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.material-icons-round.btnSaveThumbnail {
    /*opacity: 0;*/
    /*transition: opacity 1s;*/
    position: absolute;
    font-size: 30px;
    top: .5rem;
    left: .5rem;
}
/*.viewContainer:hover .material-icons-round.btnSaveThumbnail {
    opacity: 1;
}*/
.canvasContainer {
    flex-grow: 1;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}
.details .imagePreview {
    flex-grow: 1;
    align-self: stretch;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.canvasButtonsContainer {
    white-space: nowrap;
    align-self: stretch;
    text-align: center;
}
.canvasButtonsContainer .viewButton:not(.viewButtonDeckProfileRail) {
    margin-left: 40px;
}
.viewButton {
    border: 1px solid #DBDBDB;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 55px;
}
.viewButton.viewButtonSelected, .viewButton:hover {
    background-color: #E07D0A;
}
.viewButtonDeckBottom {
    background-image: url("../Images/ViewDeckBottom.png");
}
.viewButtonDeckBottom:hover, .viewButtonDeckBottom.viewButtonSelected {
    background-image: url("../Images/ViewDeckBottom_White.png");
}
.viewButtonDeckProfileRail {
    background-image: url("../Images/ViewDeckProfileRail.png");
}
.viewButtonDeckProfileRail:hover, .viewButtonDeckProfileRail.viewButtonSelected {
    background-image: url("../Images/ViewDeckProfileRail_White.png");
}
.viewButton3D {
    background-image: url("../Images/View3D.png");
}
.viewButton3D:hover, .viewButton3D.viewButtonSelected {
    background-image: url("../Images/View3D_White.png");
}
.details .txtPreview {
    flex-grow: 1;
    align-self: stretch;
    border-radius: 0px;
}
.details.detailsExpanded .txtPreview, .details.detailsExpanded .imagePreview {
    margin-top: 20px;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.25rem;
    }
    h4 {
        font-size: 1rem;
    }
    .navbar {
        height: 4rem;
        /*padding: .5rem;*/
    }
    .toggleView .material-icons-round, #dropdownAccount .material-icons-round {
        font-size: 2.25rem;
    }
    .folder  {
        display: none !important;
    }
    .listContainer:has(a:not(.folder)) .noFilesFound {
        display: none;
    }
}
@media (max-width: 1199.98px) {
    body, .e-ddl.e-input-group.e-control-wrapper .e-input, .modal-content .grille {
        /*font-size: 14px;*/
    }
    .splitter_panel {
        flex-direction: column;
    }
    .left_panel, .right_panel {
        position: inherit;
        height: unset;
        left: 0px !important;
        width: 100% !important;
    }
    .splitter_panel .vsplitter {
        display: none;
    }
    input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], select, textarea {
        /*padding: 5px;*/
    }
    .treeView {
        display: none;
    }
    .header {
        height: inherit;
        padding-left: 10px;
        padding-right: 10px;
    }
    .right_panel {
        padding: 0;
    }
    .right_panel:has(.details.detailsOpen) {
        padding-right: 542px;
    }
    .rectangle {
        border-radius: 0px;
        padding: 0px;
    }
    .grille td {
        height: 35px;
    }
    .grille {
        white-space: normal;
    }
    .listContainer:has(a) .noFilesFound {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .resultsContainer, .filters {
        padding: .75rem;
    }
    .listContainer {
        gap: .75rem;
    }
    .detailsTitle button:first-child {
        display: none;
    }
    .details {
        padding-bottom: 10px;
    }
    .details.detailsExpanded {
        flex-direction: column;
    }
    .right_panel:has(.details.detailsOpen) {
        padding-right: inherit;
    }
    .details.detailsExpanded .fileInfoContainer {
        align-self: inherit;
    }
    .details.detailsOpen, .fileInfoContainer {
        width: 100%;
    }
/*    .fileInfo {
        padding-left: 10px;
        padding-right: 10px;
    }*/
    .details .txtPreview, .details .imagePreview {
        margin-left: 10px;
        margin-right: 10px;
    }
    .material-icons-round.saveThumbnail {
        display: none; /* Sur mobile il faudrait que margeh soit en pourcentage */
    }
    .viewContainer {
        overflow: visible;
    }
    .canvasContainer, #iframeViewer3D {
        min-height: 400px;
    }
}
@media (max-width: 575.98px) {
    .filters > div > div {
        flex-wrap: wrap;
    }
    .filters input[type=text], .filters input[type=number] {
        width: 150px;
    }
    .listContainer > a {
        padding: .25rem;
    }
    .listContainer > a, .listContainer > a.folder {
        min-width: inherit;
        max-width: inherit;
        width: calc((100vw - 3 * .75rem) / 2);
    }
    .listContainer .boardDate {
        font-size: .75rem;
    }
    .tabContainer .btnWithIcon {
        font-size: .9rem;
    }
}

.fileIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    margin-right: 7px;
}
.fileIcon.fileIconFolder {
    background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.269631 16.0936C0.126239 14.9028 1.05591 13.8545 2.25529 13.8545H37.7447C38.9441 13.8545 39.8738 14.9028 39.7304 16.0936L37.7574 32.4777C37.5154 34.4873 35.8103 35.9994 33.7861 35.9994H6.21389C4.18972 35.9994 2.48458 34.4873 2.24258 32.4777L0.269631 16.0936Z" fill="%23FDDD35"/%3E%3Cpath d="M2.5 8V14.1587H37.5V11.9798C37.5 10.8753 36.6046 9.97984 35.5 9.97984H21.4809C21.0683 9.97984 20.6657 9.85221 20.3285 9.61445L15.7199 6.36538C15.3826 6.12763 14.9801 6 14.5675 6H4.5C3.39543 6 2.5 6.89543 2.5 8Z" fill="%23FAC800"/%3E%3C/svg%3E%0A');
}
.fileIcon.fileIconFolderUp {
    background-image: url("../Images/FolderUp.svg");
    background-size: contain;
}
.fileIcon.fileIconS3dFile {
    background-image: url("../Images/LogoS3d.png");
    background-size: contain;
}
.fileIcon.fileIconS3dFile_Unlocked {
    background-image: url("../Images/LogoS3d_Unlocked.png");
    background-size: contain;
}
.fileIcon.fileIconS3dFile_Locked {
    background-image: url("../Images/LogoS3d_Locked.png");
    background-size: contain;
}
.fileIcon.fileIconS3dFile_Password {
    background-image: url("../Images/LogoS3d_Password.png");
    background-size: contain;
}
.fileIcon.fileIcon3DLayer {
    background-image: url("../Images/Logo3DLayer.png");
    background-size: contain;
}
.fileIcon.fileIconPlugFile {
    background-image: url("../Images/LogoPlug.png");
    background-size: contain;
}
.fileIcon.fileIconBrdFile {
    background-image: url("../Images/LogoS3d_Brd.png");
    background-size: contain;
}
.fileIcon.fileIconSrfFile {
    background-image: url("../Images/LogoS3d_Srf.png");
    background-size: contain;
}
.fileIcon.fileIconTxtFile {
    background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%239A9DA2"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cline x1="11.75" y1="17" x2="23.25" y2="17" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 23.75L30 23.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 31.25L30 31.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
}
.fileIcon.fileIconXmlFile {
    background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%2300B0FF"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cline x1="10.5" y1="15.75" x2="22" y2="15.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 22.5L30 22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 30L30 30" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="2"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
}
.fileIcon.fileIconImageFile {
    background-image: url("../Images/Image.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.listContainer .fileIcon {
    width: 40px;
    height: 40px;
}
.details .fileIcon {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 33px;
    height: 33px;
}

.alert .material-icons-round {
    font-size: 30px;
}
.alert .bi {
    font-size: 24px;
}
.alert {
    padding: 10px 15px;
    /*border-radius: 10px;*/
    display: flex;
    align-items: start;
}
.alert > span + div {
    margin-top: 5px;
}
.mainMessage {
    height: 72px;
    overflow: hidden;
    transition: height .35s ease;
}
.mainMessage.mainMessageCollpased {
    height: 0px;
}
.mainMessage .alert {
    margin: 20px 20px 0px 20px;
}

.txtValid {
    position: absolute;
    z-index: -1;
}

.modal-dialog.modalAdjustWidthToContent {
    justify-content: center;
    max-width: 100%;
}
.modal-dialog.modalAdjustWidthToContent .modal-content {
    width: inherit;
    overflow: auto;
}

/*---------------------------------------------------------- Bootstrap ---------------------------------------------------------*/
.modal-header {
    background-color: #252a3f;
    color: white;
    border-bottom: none;
}
.modal-content {
    /*font-size: 16px;*/
}
.modal-body > div:not(:first-child):not(.alert):not(.e-upload) {
    margin-top: 20px;
}
.modal-body > div.alert {
    margin-bottom: 2rem;
}
.modal-body > div.alert.alert-warning:not(:first-child) {
    margin-top: 2rem;
}
.modal-body > div > label + input {
    margin-left: 30px;
}

#modalVersionHistory .alert.alert-success {
    margin-top: 20px;
    margin-bottom: 0px;
}
#modalVersionHistory .alert.alert-success + div {
    margin-top: 10px;
}
.popover {
    max-width: 520px;
}

/*--------------------------------------------------- Template Visual Studio ---------------------------------------------------*/
/* Mis en commentaires lors de la migration de Blazor Server app (.NET 7) vers Blazor Web App (.NET 8) */
/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid red;
}
.validation-message {
    color: red;
}*/
#components-reconnect-modal, #blazor-error-ui {
    z-index: 1060 !important; /* Pour être au-dessus des modal bootstrap qui sont à 1055 */
}


/*--------------------------------------------------- Print ---------------------------------------------------*/
@media print {
    body {
        -webkit-print-color-adjust: exact !important; /* Marche avec Chrome, pas Firefox ni IE */
        color-adjust: exact !important; /* Marche avec Firefox */
    }
    .printHeader {
        display: none !important;
    }
    .details.print .canvasButtonsContainer {
        display: none;
    }
}
.details.print {
    position: inherit;
    margin-left: auto;
    margin-right: auto;
    border-left-style: none;
    overflow: visible;
}
.details.print .viewContainer {
    overflow: inherit;
}
.details.print .canvasContainer {
    height: inherit;
}