/* ----------------------------------------------------------------------------
 * Chroniky
 *
 * @package     Chroniky
 * @author      Malik LAMKADAM <malik.lamkadam@outlook.fr>
 * @copyright   Copyright (c) 2026, Malik LAMKADAM
 * @license     Proprietary
 * @link        https://www.chroniky.fr
 * @since       v1.5.0
 * ---------------------------------------------------------------------------- */
root
{
    display: block;
}

html
{
    height: 100%;
    background-color: #f5f5f5;
    overscroll-behavior: none;
}

body
{
    height: 100%;
    background-color: #f5f5f5;
    overscroll-behavior: none;
}

#loading
{
    position: fixed;
    z-index: 999999;
    overflow-x: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading:not(.transparent)
{
    background: rgba(255, 255, 255, 0.4 );
}

#loading:after
{
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 50%;
    background-color: var(--ui-color);
    transition: width .3s ease;
    z-index: 1000;
    animation: mceloading 1.1s linear infinite
}

@keyframes mceloading
{
    0%
    {
        margin-left: -30%
    }

    100%
    {
        margin-left: 100%
    }
}

.inner_loading
{
    display: flex;
    align-items: center;
    justify-content: center;
}



#wizard-frame-1[selector=service]
{
    margin-top: 107px;
}

@media (max-width: 576px)
{
    #wizard-frame-1[selector=service]
    {
        margin-top: 111px;
    }
}



#main
{
    min-height: 100%;
    background-color: #f9f9f9;
    position: static !important;
}

/* PUBLIC LAYOUT
 ------------------------------------------------------------------------------ */
.public-layout
{
    min-height: 480px;
    padding: 0;
    margin: 0 auto;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: rgba(138, 195, 255, 0.12) 0 1px 5px 0;
}

.public-layout #header
{
    overflow: auto;
    height: 66px;
    padding: 5px;
    display: flex;
    overflow: visible !important;
    gap: 8px;
    position: fixed !important;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9998;
    padding-right: calc(5px + 100% - (var(--viewportWidth)));
    justify-content: space-between;
    box-shadow: #000 -2px -13px 20px;
    background: #fff;
}

.public-layout #header-title
{
    font-size: 24px;
    font-weight: lighter;
    text-align: left;
    float: left;
    margin: 0;
    line-height: 54px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    color: var(--ui-color);
}

.public-layout #header-title > a
{
    display: inline-flex;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
}

.public-layout #header-title > span
{
    text-overflow: ellipsis;
    overflow: hidden;
}

.public-layout #header-title > a > #header-logo
{
    max-height: 56px;
    display: inline-block;
    float: left;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 0;
    margin-bottom: 0;
}

.public-layout #header-title > a.fulllogo > #header-logo
{
    height: 28px;
    margin-top: 5px;
}


@media(max-width:575px)
{
    .public-layout #header-title > a.fulllogo
    {
        width: 35px;
        overflow: hidden;
        margin-right: 7px;
    }

    .public-layout #header-title > a.fulllogo > #header-logo
    {
        height: 40px;
    }
}

.public-layout #login-button,
.public-layout #workspaces-button
{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    letter-spacing: normal;
    font-weight: 500;
}

.public-layout #login-button > span,
.public-layout #workspaces-button > span
{
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    color: var(--ui-color);
}


.public-layout #user-button
{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    user-select: none;
    cursor: default;
}

.public-layout #user-button > div.user_info
{
    color: var(--ui-color);
}

.public-layout #user-button > div.user_info > div:nth-child(1)
{
    text-align: right;
    line-height: 1.2;
    font-size: 17px;
}

.public-layout #user-button > div.user_info > div:nth-child(2)
{
    font-size: 12px;
    font-weight: lighter;
    text-align: right;
    line-height: 1;
    color: #767676;
}

.public-layout #user-button .nav-link
{
    block-size: 35px;
    inline-size: 35px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ui-color);
}

.public-layout #user-button .nav-link svg
{
    margin-right: 0 !important;
}

.public-layout #user-button .dropdown-toggle::after
{
    display: none;
}

.public-layout .frame-container
{
    height: auto;
    padding: 15px 0;
    position: relative;
}

.public-layout .frame-container > .back
{
    position: absolute;
    top: 20px;
    left: 0;
    cursor: pointer;
    font-size: 24px;
    color: var(--ui-color);
}

.public-layout .frame-container > .back:hover
{
    color: #535454;
}

.public-layout .frame-container .frame-title
{
    font-weight: lighter;
    text-align: center;
    margin-bottom: 30px;
    color: #666;
    height: 60px;
}

.public-layout .frame-container .frame-content
{
    float: none;
}

.public-layout .command-buttons
{
    float: none;
    margin: 15px auto;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -1px 0 0 #e5e5e5;
    padding: 15px;
    gap: 16px;
    flex-direction: flex;
    max-width: 800px;
    margin: auto !important;
    touch-action: none;
    height: 72px;
    height: calc(72px + (100dvh - 100svh)/2);
}

.public-layout .command-buttons .btn
{
    min-width: 120px;
    margin-right: 10px;
}

.public-layout .command-buttons .btn:last-child
{
    margin-right: 0;
}

.public-layout .command-buttons:after
{
    content: '';
    position: fixed;
    background-color: #fff;
    bottom: 0;
    position: fixed;
    left: 0;
    width: calc((100% - 800px) / 2);
    box-shadow: 0 -1px 0 0 #e5e5e5;
    padding: 0px;
    height: 72px;
}

.public-layout .command-buttons:before
{
    content: '';
    position: fixed;
    background-color: #fff;
    bottom: 0;
    position: fixed;
    right: 0;
    width: calc((100% - 800px) / 2);
    box-shadow: 0 -1px 0 0 #e5e5e5;
    padding: 0px;
    height: 72px;
}



.public-layout .command-buttons > div
{
    min-inline-size: 0;
}

.public-layout .command-buttons > div > p:first-child
{
    margin: 0;
    margin-block: 0;
    font: 600 15px/20px var(--bs-font-sans-serif);
    text-align: left;
    color: var(--ui-color);
}

.public-layout .command-buttons > div > p:last-child
{
    margin: 0;
    margin-block: 0;
    font: 400 15px/20px var(--bs-font-sans-serif);
    color: #767676;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
    white-space: nowrap;
    text-align: left;
}

.public-layout #header-title .display-selected-service,
.public-layout #header-title .display-selected-provider
{
    color: var(--ui-color);
    border-right-color: var(--ui-color) !important;
    filter: brightness(35%);
}

.popover .popover-title
{
    text-align: center;
}

.popover .popover-content #language-list .language
{
    margin: 15px 0;
}

@media (min-width: 768px)
{
    .wrapper
    {
        min-height: 100vh;
    }
}
/* BOOK SUCCESS & MESSAGE
------------------------------------------------------------------------- */
#message-frame,
#success-frame
{
    background: var(--bs-body-bg);
    text-align: center;
    height: auto;
    border: none;
    padding: 35px;
}

#message-frame .alert,
#success-frame .alert
{
    margin-top: 20px;
}

#message-frame #message-icon,
#success-frame #success-icon
{
    margin-top: 20px;
    margin-right: 20px;
    width: 64px;
    display: block;
    margin: auto;
    float: none !important;
}

#success-frame .btn
{
    margin-bottom: 10px;
    width: 80%;
    max-width: 300px;
}

@media (min-width: 768px)
{
    #message-frame,
    #success-frame
    {
        height: 100%;
    }
}
/* CANCEL APPOINTMENT
------------------------------------------------------------------------- */
.booking-header-bar
{
    padding: 15px 0;
    margin: 0;
    background: #f3f2e7;
    border-bottom: 1px solid #e4e1c9;
    text-align: center;
}

.ui-dialog .ui-dialog-title
{
    font-size: 1.2em;
}

@media (min-width: 768px)
{
    .booking-header-bar
    {
        padding: 15px 0;
        margin: 0;
        background: #f3f2e7;
        border-bottom: 1px solid #e4e1c9;
        text-align: left;
    }
}

div#bank-cards
{
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0 rgba(20, 20, 20, 0.0784313725), 0 4px 20px 0 rgba(20, 20, 20, 0.1215686275);
    padding: 24px;
    flex: 0.5 1 300px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

div#bank-cards > div
{
    min-height: 55px;
    display: flex;
    flex-direction: row;
    user-select: none;
    cursor: pointer;
    border-radius: 16pX;
}

div#bank-cards > div:hover
{
    background-color: #f0f0f0
}

div#bank-cards > div > div:nth-child(1)
{
    width: 55px;
    align-items: center;
    display: flex;
    justify-content: center;
}

div#bank-cards > div > div:nth-child(2)
{
    flex: 1;
    align-items: center;
    display: flex;
}

div#bank-cards > div.add_bank_card > div:nth-child(1)
{
    font-size: 20px;
}

div#bank-cards > div.add_bank_card > div:nth-child(2)
{
    font-weight: 500;
}

div.selected_bank_card
{
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0 rgba(20, 20, 20, 0.0784313725), 0 4px 20px 0 rgba(20, 20, 20, 0.1215686275);
    padding: 24px;
    flex: 0.5 1 300px;
    width: 100%;
    min-height: 55px;
    display: flex;
    flex-direction: row;
    user-select: none;
    border-radius: 16pX;
}

div.selected_bank_card > div:nth-child(1)
{
    width: 55px;
    align-items: center;
    display: flex;
    justify-content: center;
}

div.selected_bank_card > div:nth-child(2)
{
    flex: 1;
    align-items: center;
    display: flex;
}