/*Font faces*/

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/*Error success message manage */
@keyframes fadeOutCollapse {
    0%, 50% {
        opacity: 1;
        max-height: 50px; /* Adjust based on your content's actual height */
        visibility: visible;
    }
    100% {
        opacity: 0;
        max-height: 0;
        visibility: hidden; /* Ensures it won't display or take up space */
        padding: 0;
        margin: 0;
    }
}

.fade-out-collapse {
    animation: fadeOutCollapse 7s ease-in-out 1;
    animation-fill-mode: forwards; /* Keep the end state after the animation completes */
}

/* CSS for modal visibility and transitions */
.modal {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Animate modal dialog */
.modal-dialog {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* natural easing */
}

.modal:target .modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-footer {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.2s;
}

.modal:target .modal-footer {
    opacity: 1;
    transform: translateY(0);
}


/*!* Initial visibility *!*/
/*.card-section {*/
/*    display: none;*/
/*    transition: transform 0.8s ease-in-out;*/
/*    transform-style: preserve-3d;*/
/*}*/

/*!* Default visibility for the front section *!*/
/*#cardFront {*/
/*    display: block; !* Front is visible by default *!*/
/*}*/

/*!* Toggle visibility based on the checkbox *!*/
/*#cardSwitch:checked ~ .relative #cardBack {*/
/*    display: block;*/

/*}*/

/*#cardSwitch:checked ~ .relative #cardFront {*/
/*    display: none;*/
/*}*/

/*#cardSwitch:checked + label > span:last-child {*/
/*    transform: translateX(5rem); !* Slide the toggle to indicate active state *!*/
/*    background-color: #7388be; !* Change the background color when active *!*/
/*    transition: transform 0.3s, background-color 0.3s; !* Smooth transition for transform and color *!*/
/*}*/


/*login button*/


/*themecolorchange*/
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    cursor: pointer;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/*SIDEBAR CSS*/

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #20262c;
    transition: 0.5s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 8px -4px 0 0 #ececd9, -4px 1px 4px 0 #dadada;
    background-color: #e8e8e8;
    transition: 0.5s;
}

.switch a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes tilt {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

input:checked + .slider {
    background-color: #de7454;
}

.input:focus + .slider {
    box-shadow: 0 0 1px #183153;
}

input:checked + .slider:before {
    transform: translateX(100%);
    box-shadow: inset 15px -4px 0 15px #efdf2b, 0 0 10px 0 #efdf2b;
}


/*on - off toggle*/
.toggle-knob {
    transition: transform 0.3s;
}

.toggle-background {
    transition: background-color 0.3s;
}


/*SUCCESS OR ERROR MESSAGE CLASSES*/
@keyframes shrink {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        max-height: 1000px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    99% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    100% {
        display: none;
    }
}

@keyframes collapseWrapper {
    0% {
        max-height: 100px;
        padding-top: 0;
        padding-bottom: 0;
    }
    100% {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.animate-fade-out {
    animation: fadeOut 1.3s ease-in-out 4s forwards;
}

.animate-wrapper-collapse {
    animation: collapseWrapper 1.3s ease-in-out 4s forwards;
}

.decoration {
    position: absolute;
    content: "";
    height: 2px;
    width: 2px;
    border-radius: 50%;
    right: 20%;
    top: 15%;
    background: #e5f041e6;
    backdrop-filter: blur(10px);
    transition: all 0.5s;
    box-shadow: -7px 10px 0 #e5f041e6, 8px 15px 0 #e5f041e6, -17px 1px 0 #e5f041e6,
    -20px 10px 0 #e5f041e6, -7px 23px 0 #e5f041e6, -15px 25px 0 #e5f041e6;
    pointer-events: none;
}

input:checked ~ .decoration {
    transform: translateX(-20px);
    width: 10px;
    height: 10px;
    background: white;
    box-shadow: -12px 0 0 white, -6px 0 0 1.6px white, 5px 15px 0 1px white,
    1px 17px 0 white, 10px 17px 0 white;
}

details > summary {
    list-style: none; /* Remove default list icon */
}

details > summary::-webkit-details-marker {
    display: none; /* Remove default arrow for Chrome and Safari */
}

details > summary .rotate-0 {
    transition: transform 0.2s ease-in-out;
}

details[open] > summary .rotate-0 {
    transform: rotate(180deg); /* Rotates the arrow 180 degrees when details is open */
}

/*!* Standard scrollbar settings for Firefox *!*/
/** {*/
/*    scrollbar-width: thin;*/
/*    scrollbar-color: #b83280 #f8f9fa; !* Thumb and track colors *!*/
/*}*/

/*!* Custom scrollbar for Chrome, Edge, and Safari *!*/
/**::-webkit-scrollbar {*/
/*    width: 12px; !* Consistent width for stability *!*/
/*}*/

/**::-webkit-scrollbar-track {*/
/*    background: lightpink; !* Very light grey for the track *!*/
/*    border-radius: 10px; !* Rounded corners for a modern look *!*/
/*}*/

/**::-webkit-scrollbar-thumb {*/
/*    background-color: #b83280; !* Bright blue for the thumb *!*/
/*    border-radius: 10px;*/
/*    border: 4px solid pink; !* Light grey border to match the track *!*/
/*}*/

/**::-webkit-scrollbar-thumb:hover {*/
/*    background-color: #b83280; !* Darker blue on hover for feedback *!*/
/*}*/

#toggleSidebarMobile:checked ~ #sidebar {
    display: flex;
}

#toggleSidebarMobile:checked ~ nav label #toggleSidebarMobileHamburger {
    display: none;
}

#toggleSidebarMobile:checked ~ nav label #toggleSidebarMobileClose {
    display: block;
}