/*TOOLTIP*/
/* Tooltip container */
.newTooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltipPassage {
    display: block;
    text-align: center;
}

/* Tooltip text */
.newTooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

    /* Tooltip arrow */
    .newTooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

/* Show the tooltip text when you mouse over the tooltip container */
.newTooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*ANIMATIONS*/

@keyframes eLiAnimation {
    from {
        margin-left: 0em;
    }

    to {
        margin-left: 0.5em;
    }
}

/*BUTTONS*/
/*
    Button sample:
    <button class="eBtn eBtn-primary">
        <span class="material-icons">icon_name</span>
        <span>TEXT</span>
    </button>
*/


.eBtn-right {
    margin-right: 0 !important;
    margin-left: auto !important;
    display: block !important;
}

.eBtn {
    text-align: center;
    font-size: small;
    border: 0px;
    border-radius: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 3px;
    outline: none;
    vertical-align: middle;
    cursor: pointer;
}

    /*.eBtn:hover {
        transform: scale(1.1,1.1);
        transition-duration: 0.1s;
        animation: ease-in-out;
    }

    .eBtn:active {
        transform: scale(0.9,0.9);
        transition-duration: 0.1s;
    }*/

    .eBtn span:not(.material-icons) {
        vertical-align: middle;
        margin: 0px !important;
    }

.eBtn-primary {
    background-color: #2875D7;
    color: white;
}

    .eBtn-primary:hover {
        background-color: #0C5EC8;
    }

    .eBtn-primary:active {
        background-color: #0C5EC8;
    }

.eBtn-secondary {
    background-color: #C7CFD9;
    color: black;
}

    .eBtn-secondary:hover {
        background-color: #AFB7C2;
        color: white;
    }

    .eBtn-secondary:active {
        background-color: #AFB7C2;
    }

.eBtn-info {
    background-color: #02D7FF;
    color: white;
}

    .eBtn-info:hover {
        background-color: #5EE0F8;
        color: white;
    }

    .eBtn-info:active {
        background-color: #5EE0F8;
    }

.eBtn-create {
    background-color: var(--main-orange-color);
    color: white;
}

    .eBtn-create:hover {
        background-color: var(--secondary-orange-color);
        color: white;
    }

    .eBtn-create:active {
        background-color: var(--secondary-orange-color);
        color: white;
    }

.eBtn-delete {
    background-color: #FF000D;
    color: white;
}

    .eBtn-delete:hover {
        background-color: #D8000B;
        color: white;
    }

    .eBtn-delete:active {
        background-color: #D8000B;
        color: white;
    }

.eBtn-warning {
    background-color: #FFAE32;
    color: white;
}

    .eBtn-warning:hover {
        background-color: #C77800;
        color: white;
    }

.eBtn-waring:active {
    background-color: #C77800;
    color: white;
}
/*INPUT TEXT*/
.editable {
    font-weight: bold;
    border-color: transparent;
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #FFFEE1;
    margin: 5px;
    transition: all 0.4s ease;
    outline: 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

    .editable:focus {
        background: var(--yellow-focus);
        font-family: 'Montserrat-Bold';
    }

.eInputText {
    border: 1px inset;
    border-radius: 5px;
    padding: 3px;
    margin: 5px;
}
/*.eInputText:focus {
        box-shadow: 0 0 10px rgba(81, 203, 238, 1);
        border: 1px solid rgba(81, 203, 238, 1);
        transform: scale(1.1,1.1);
        transition-duration: 0.1s;
        outline: none;
    }*/
/*LIST MENU*/
.eLiBtn {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    border-bottom: 1px solid black;
    cursor: pointer;
    list-style-type: none;
}

    .eLiBtn:hover {
        transform: scale(1.1,1.1);
        transform: translateX(10);
        transition-duration: 0.1s;
        animation-name: eLiAnimation;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        animation: ease-in-out;
        white-space: nowrap;
        border-bottom: none;
    }

    .eLiBtn:before {
        content: url(/Images/fleche-menu.png)
    }
/*Radio button*/
/*
    Sample:
    <label class="eRadioBtn">
        One
        <input type="radio" name="radio">
        <span class="checkmark"></span>
    </label>
*/
/* The container */
.eRadioBtn {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    /* Hide the browser's default radio button */
    .eRadioBtn input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: url('/Content/design-system/images/radio-empty.svg');
    background-position: center center;
    background-size: 100% 100%;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.eRadioBtn:hover input ~ .checkmark {
    box-shadow: var(--third-shadow);
}
/* When the radio button is checked, add a blue background */
.eRadioBtn input:checked ~ .checkmark {
    background: url('/Content/design-system/images/radio-checked.svg');
    background-position: center center;
    background-size: 100% 100%;
}
    /*Checkbox*/
    /*Sample*/
/*
    <label class="eCheckbox eCheckbox-checkbox">
            First checkbox
            <input type="checkbox" checked="checked" />
            <div class="eCheckbox_indicator"></div>
    </label>
*/
.eCheckbox {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    cursor: pointer;
}

    .eCheckbox input {
        display: none;
    }

    .eCheckbox::before {
        content: "";
        display: block;
        height: 1.5rem;
        aspect-ratio: 1/1;
        background: url('/Content/design-system/images/checkbox-empty.svg');
        background-position: center center;
        background-size: cover;
        border: 0px solid #000000;
    }

.eCheckbox_indicator {
}

.eCheckbox:has(input:checked)::before {
    background: url('/Content/design-system/images/checkbox-checked.svg');
    background-position: center center;
    background-size: cover;
}

.eCheckbox:has(input:not([disabled]):checked)::before,
.eCheckbox:has(input:checked:focus)::before {
    background: url('/Content/design-system/images/checkbox-checked.svg');
    background-position: center center;
    background-size: cover;
}

.eCheckbox:has(input:not([disabled])):hover::before,
.eCheckbox:hover input:not([disabled]):checked ~ ::before {
    opacity: 0.8;
}

.eCheckbox:has(input:disabled)::before {
    background: url('/Content/design-system/images/checkbox-empty-disabled.svg');
    background-position: center center;
    background-size: cover;
    opacity: 0.6;
    pointer-events: none;
}

.eCheckbox:has(input[disabled]:checked)::before {
    background: url('/Content/design-system/images/checkbox-checked-disabled.svg');
    background-position: center center;
    background-size: cover;
}
/*SWITCH SLIDER*/
/*
    <label class="switch">
        <input type="checkbox" id="switchDossier">
        <span class="slider round"></span>
    </label>
*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 16.5px;
}
/* Hide default HTML checkbox */
.switch input {
        display: none;
    }
/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition-property: color;
    transition-duration: 3s;
    transition-timing-function: ease-in;
    transition-delay: 0.3s;
} .slider:before {
        position: absolute;
        content: "";
        height: 14.5px;
        width: 14.5px;
        left: 1px;
        bottom: 1px;
        background-color: white;
        transition-duration: .4s;
    } input:checked + .slider {
    background-color: #5abb4f;
} input:focus + .slider {
    box-shadow: 0 0 1px #5abb4f;
} input:checked + .slider:before {
    -webkit-transform: translateX(18.5px);
    -ms-transform: translateX(18.5px);
    transform: translateX(18.5px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 13.5px;
} .slider.round:before {
        border-radius: 50%;
    }
/* SEARCH BAR */
.searchbar {
    background-image: url('../Images/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    /*width: 100%;*/ /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
} .whoMadeItIcon {
    cursor: pointer;
}