html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1;
}
@media (max-width: 768px) {
    .content-wrap {
        margin-bottom: 20px;
    }
}

body {
    font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
}
.text-red {color:#e10b13!important;}
.text-blue {color:#4bc2f1!important;}
.text-green {color:#8dc045!important;}
.text-purple {color:#9a4996!important;}
.text-orange {color:#fcc04a!important;}
.bg-red {background-color:#e10b13!important;}
.bg-blue {background-color:#4bc2f1!important;}
.bg-green {background-color:#8dc045!important;}
.bg-purple {background-color:#9a4996!important;}
.bg-orange {background-color:#fcc04a!important;}
.form-check-input {
    background-color: transparent;
}
.form-check-label {
    color:black;
    margin-left: 1.25rem; /* Ensure some spacing between the checkbox and label */
}
.checkbox-red:checked {
    background-color: #e10b13;
    border-color: #e10b13;
    color: #ffffff;
}
.checkbox-red:checked::before {
    color: #ffffff; /* Ensure the checkmark is white */
}
.checkbox-blue:checked {
    background-color: #4bc2f1;
    border-color: #4bc2f1;
    color: #ffffff;
}
.checkbox-blue:checked::before {
    color: #ffffff; /* Ensure the checkmark is white */
}
.checkbox-green:checked {
    background-color: #8dc045;
    border-color: #8dc045;
    color: #ffffff;
}
.checkbox-green:checked::before {
    color: #ffffff; /* Ensure the checkmark is white */
}
.checkbox-purple:checked {
    background-color: #9a4996;
    border-color: #9a4996;
    color: #ffffff;
}
.checkbox-purple:checked::before {
    color: #ffffff; /* Ensure the checkmark is white */
}
.checkbox-orange:checked {
    background-color: #fcc04a;
    border-color: #fcc04a;
    color: #ffffff;
}
.checkbox-orange:checked::before {
    color: #ffffff; /* Ensure the checkmark is white */
}
/* Recommended icon sizes */
span.size-20 {
    font-size: 20px;
    font-variation-settings: 'OPSZ' 20;
}
span.size-24 {
    font-size: 24px;
    font-variation-settings: 'OPSZ' 24;
}
span.size-40 {
    font-size: 40px;
    font-variation-settings: 'OPSZ' 40;
}
span.size-48 {
    font-size: 48px;
    font-variation-settings: 'OPSZ' 48;
}
#navbarNavDropdown img {
    width: 20px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
}
#totalSizeAlert {
    /*border:1px solid #aaa;*/
}

.dropzone {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    min-height: 311px;
    background:#FFFFFF;
    border:1px solid #aaa;
    border-radius: 5px;
    border-top-left-radius: 0px!important;
}

.dropzone .dz-message {
    text-align: center;
    margin: 0;
}
.dz-folder-tab {
    /*background-color: #FBBC19;*/
    background-color: #e30613;
    padding: 5px 15px;
    border-top-left-radius: 5px;
    /* Pas de border-top-right-radius pour permettre l'effet biseauté */
    width: auto; /* La largeur s'adapte au contenu */
    color: white;
    text-align: center;
    font-weight: bold;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Ombre pour effet de profondeur */
    /* Ajustement de clip-path pour biseauter à droite avec la partie large en bas */
    clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}


.dropzone .dz-message {
    color: #000000;
    text-align: center;
}

.dropzone .dz-message .material-symbols-outlined {
    color: #FFFFFF; /* Icône blanche */
    font-size: 40px; /* Taille de l'icône */
}

.dropzone .dz-message h3 {
    color: #FFFFFF; /* Texte blanc pour plus de contraste */
    margin: 10px 0;
}

.dropzone .dz-message span {
    color: #FFFDD0; /* Couleur légère pour le texte secondaire */
}


/*********/
.btn.btn-dark:hover,.btn.btn-dark:hover:not(.btn-active) {
    background-color: #333!important;
    border-color: #333!important;
}
.btn.btn-light:hover,.btn.btn-light:hover:not(.btn-active) {
    background-color: #f7f7f7!important;
    border-color: #f7f7f7!important;
}
.btn.btn-primary {
    background-color: #e30613!important;
    border-color: #e30613!important;
}
.btn.btn-primary:hover, .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .show > .btn.btn-primary {
    background-color: #e30613 !important;
    border-color: #e30613 !important;
}
.text-white {color:#fff!important;}
.bg-verified {
    background-color: #e6f5e6 !important;
    border: 1px solid #52d65f !important;
    border-radius: 5px !important;
}
.bg-not-verified {
    background-color: rgba(227, 6, 19, 0.1) !important;
    border: 1px solid #e30613 !important;
    border-radius: 5px !important;
}
.welcome-message {
    background-color: #f7f7f7; ;
}
.welcome-message h1 {
    color: #2a2a2a; font-size: 24px;font-weight:lighter;
}

.footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-logo, .footer-links, .footer-copy {
    flex: 1;
    min-width: 200px;
}
.versionnumber {font-size:10px;}
.welcome-message p,.result-message p {color: #555; font-size: 16px; line-height: 1.6; margin-bottom: 10px;}
.welcome-message p a,.result-message p a {color: #e30613; text-decoration: underline;}
.result-message {
    margin-bottom: 20px; padding: 20px; border-radius: 8px; background-color: #f7f7f7; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.result-message-title {
    display: flex; align-items: center; padding-left:0;margin-bottom: 15px;
}
.result-message-title h1 {
    color: #2a2a2a; font-size: 24px;margin: 0;
}
#nfphr {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #e0e0e0;
    text-align: center;
    cursor:pointer;
}
.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li a {
     color: white!important;
     text-decoration: none!important;
     transition: text-decoration 0.3s!important;
 }

.footer-links ul li a:hover, .footer-links ul li a:focus {
    text-decoration: underline!important;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-logo, .footer-links, .footer-copy {
        width: 100%;
        margin-bottom: 20px;
    }
}
.dropzone .dz-preview .dz-progress {
    height: 4px;
    background: #ddd;
}
.hidden {
    display: none;
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #555;
    color: #fff;
    font-size: 1em;
}
body.swal2-height-auto {
    height: 100% !important;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    width: 100%;
    padding: 7px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.form-textarea{
    height: 103px;
}


/************ TAGIFY ************/
.tagify__tag {
    display: flex;
    align-items: center;
    padding: 2px!important;
    border-radius: 4px!important;
    background-color: #e9ecef;
    border: 1px solid #aaa;
    margin-right: 0.5rem;
}
.tagify__tag .tagify__tag__removeBtn {
    order: -1; /* Move the remove button to the start of the flex container */
    margin-right: 0.5rem; /* Add space between the remove button and the text */
    background: transparent;
    border: none;
    cursor: pointer;
}
.tagify .tagify__tag .tagify__tag__removeBtn {
    content: '' !important;
    mask-image: none!important;
    -webkit-mask-image: none!important;
}
.tagify__tag__removeBtn::before {
    /*display: none!important;*/
    color: aqua!important;
    transition: none!important;
}
.tagify .tagify__tag .tagify__tag__removeBtn {
    content: '' !important;
    /*margin-left:4px;*/
    font-size: 16px!important;
    font-weight: bold;
    color: rgb(153, 153, 153)!important;
    font-family: "Montserrat", sans-serif;
    transition: none!important;
    background: transparent!important;
    padding:8px;
    margin-right:4px;
}
.tagify .tagify__tag .tagify__tag__removeBtn::after {display:block!important;}
.tagify__tag img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.5rem;
}
.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag .tagify__tag-text {
    font-size: 13px;
}
.tagify__tag > div {
    margin:0;
    padding-left:0;
}
/*********************************/

/************ SELECT2 ************/
.select2-container--default .select2-results__option {
    padding: 6px 10px;
}
.select2-container--default .select2-selection--single {
    height: 33px;
    line-height: 33px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 33px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border:0px!important;
    font-size:16px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 2px 5px 2px 18px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent;
    color: #333;
}
.select2-container .select2-selection--single .select2-selection__clear {
    font-size: 1.4em;
    color: #666;
    padding-top: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: #666 transparent transparent transparent;
 }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #666 transparent;
}
/*********************************/
.nav-link {
    display: flex;
    align-items: center;
}

.material-symbols-outlined {
    margin-right: 8px;
}
.togglePassword {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.divtotpinputs {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.totp-input {
    box-shadow: none;
    border: 1px solid #50576330;
    text-align: center;
    width: 60px;
    height: 60px;
    font-size: 1.5em;
}

.form-options {
    text-align: center;
    margin-top: 20px;
}

.form-options a {
    display: inline;
    margin: 0 10px;
    color: #e30613;
    text-decoration: none;
}

.form-options a:hover {
    text-decoration: underline!important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/********************* TABS ***********************/
.tabs {margin:0;padding:0;}
.tabs .content {
    /* Ajoutez ici les styles de votre contenu */
}
.tabs nav {
    position: relative;
    z-index: 1;
    display: flex;
}
.tabs nav > a {
    position: relative;
    display: flex;
    align-items: center; /* Centrer verticalement le contenu */
    padding: 1em 2em;
    color: #fff;
    text-decoration: none;
    /*margin: 0 -0.3em 0 -0.2em;*/
    margin: 0 0 0 -2px;
}
.tabs nav > a::before {
    border: 0.2em solid #fff;
}
.tabs nav a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-bottom: none;
    border-radius: 0.4em 0.4em 0 0;
    background: #34495E;
    /*transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg);*/
    transform: scale(1.15, 1.4) perspective(14px) rotateX(5deg);
}
.tabs nav a.active {
    z-index: 2;
}
.tabs nav a.active::before {
    background-color: #e10b13;
    margin-bottom: -0.08em;
}

.tab-left nav {
    /*padding-left: 0.3em;*/
}
.tab-left nav a::before {
    transform-origin: bottom left;
}


/**************** widgets ****************/
.main-section{
    /*margin:0 auto;*/
    text-align: center;
    /*padding: 0px 5px;*/
}
.dashbord{
    /*width:32%;*/
    /*display: inline-block;*/
    background-color:#34495E;
    color:#fff;
    margin-top: 26px;
}
.icon-section i{
    font-size: 30px;
    padding:10px;
    border:1px solid #fff;
    border-radius:50%;
    margin-top:-25px;
    margin-bottom: 10px;
    /*background-color:#34495E;*/
}
.icon-section p{
    margin:0px;
    font-size: 20px;
    padding-bottom: 10px;
}
.detail-section{
    background-color: #2F4254;
    padding: 5px 0px;
}
.dashbord .detail-section:hover{
    background-color: #5a5a5a;
    cursor: pointer;
}
.detail-section a{
    color:#fff;
    text-decoration: none;
}
/* Style général pour les champs */
input, textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Style pour les champs en mode readonly */
input[readonly], textarea[readonly] {
    background-color: #f5f5f5; /* Fond gris clair pour indiquer que c'est readonly */
    color: #999; /* Texte gris pour indiquer que c'est non modifiable */
    border: 1px solid #ddd; /* Bordure légèrement plus claire */
    cursor: not-allowed; /* Curseur interdit pour indiquer que l'utilisateur ne peut pas modifier */
}

/* Optionnel : pour désactiver les effets de focus sur les champs readonly */
input[readonly]:focus, textarea[readonly]:focus {
    box-shadow: none;
    border-color: #ddd;
}

.userDropdownUl .dropdown-item {
    display: flex;
    align-items: center;
}

.userDropdownUl .dropdown-item span.material-symbols-outlined {
    font-size: 20px;
    margin-right: 10px;
}

#navtabsfoldertype a{display:none;}

.input-wrapper {
    position: relative;
}

.loading-icon {
    position: absolute;
    top: 10px;
    right: 0.75rem;
    transform: translateY(-50%);
    display: none; /* Masquer par défaut */
}

.form-control.is-loading ~ .loading-icon {
    color: #555;
    font-size: 1.4em;
    display: inline-block; /* Afficher lorsque l'input a la classe is-loading */
}

.result-message {
    margin-bottom: 20px; padding: 20px; border-radius: 8px; background-color: #f7f7f7; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.result-message-title {
    display: flex; align-items: center; padding-left:0;margin-bottom: 15px;
}
.result-message-title h1 {
    color: #2a2a2a; font-size: 24px;margin: 0;
}