/* ---- Design System ---- */
@charset "UTF-8";

:root {

    --color-white: #FFFFFF;
    --color-gray-1: #F0F0F0;
    --color-gray-3: #CCCCCC;
    --color-gray-2: #D3DEE2;
    --color-gray-6: #97AAB1;
    --color-gray-5: dimgray;
    --color-gray-4: #5D5C5CFF;
    --color-glass: #d3dee230;
    --secondary-blue-color: #0066CC;
    --primary-blue-color: #003366;
    --color-black-1: #252525;

    --accent-color: #00FFAB;
    --logo-color: #019f8e;

    --error-color: #cf0000;
    --success-color: green;
    --warning-color: #FFE500;
    --info-color: #3498DB;

    --font-Roboto: 'Roboto', sans-serif;
    --font-Montserrat: 'Montserrat', sans-serif;
    --font-Futura: 'Futura', "Trebuchet MS", Arial, sans-serif;
    --font-Segoe: "Segoe UI", sans-serif;
    --font-Lato: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    --font-sans-fallback: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    --font-mono-fallback: "Roboto Mono",Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;
    /*--font-space-grotesk: Space Grotesk,var(--font-sans);*/

    --font-10: 0.75rem;
    --font-12: 0.85rem;
    --font-13: 0.9rem;
    --font-14: 0.95rem;
    --font-16: 1.0rem;
    --font-20: 1.25rem;
    --font-24: 1.5rem;
    --font-32: 2rem;

    --spacing-03: 0.1875rem;
    --spacing-04: 0.6rem;
    --spacing-05: 0.7rem;
    --spacing-075: 0.75rem;
    --spacing-08: 0.8rem;
    --spacing-085: 0.85rem;
    --spacing-09: 0.9rem;
    --spacing-10: 1rem;
    --spacing-15: 1.5rem;
    --spacing-20: 2rem;

    --px-5: 0.313rem;
    --px-10: 0.625rem;
    --px-15: 0.938rem;
    --px-20: 1.25rem;
    --px-24: 1.5rem;
    --px-30: 1.875rem;

    --bold-font: bold;
    --bold-font-700: 700;
    --bold-font-500: 500;

    --border-gray-thin: #d0d0d0 thin solid;

    --blur: blur(0.5rem);
    --remove: none;
    --custom-border: thin #CCC solid;

    --button-h-1: 1.875rem;
    --button-w-1: 5rem;

    --skeleton-animation: skeleton-loading 1s ease-in-out infinite;
    --skeleton-radius: 10px;
}
.c_font-sans{font-family: var(--font-sans-fallback);}
.c_font-mono{font-family: var(--font-mono-fallback);}
.c_font-grotesk{font-family: var(--font-space-grotesk);}

/* ---- Elements ---- */
*, :after, :before {
    box-sizing: border-box;
}
body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p{ margin: 0;}
h2, h3, h5 { margin-top: 0; margin-bottom: 0;}
code{
    font-family: monospace;
    font-size: 87.5%;
    color: #919191;
    word-break: break-word;
    border-radius: 2px;
    padding-right: 4px;
    margin: 0 10px 10px 0;
}
.c_code_1{
    font-family: monospace;
    font-size: 87.5%;
    color: #919191;
    word-break: break-word;
    border-radius: 3px;
    padding: 4px 5px;
    margin: 0 5px 10px 5px;
    background-color: var(--color-gray-1);
}



/* ---- Font Colors ---- */
.c_color-white {color: var(--color-white);}
.c_color-gray-1 {color: var(--color-gray-1);}
.c_color-gray-2 {color: var(--color-gray-2);}
.c_color-gray-3 {color: var(--color-gray-3);}
.c_color-gray-6 {color: var(--color-gray-6);}
.c_color-gray-5 {color: var(--color-gray-5);}
.c_color-gray-4 {color: var(--color-gray-4);}
.c_color-blue-2{color: var(--secondary-blue-color);}
.c_color-blue-secondary{color: var(--secondary-blue-color);}
.c_color-blue-1{color: var(--primary-blue-color);}
.c_color-blue-primary{color: var(--primary-blue-color);}
.c_color-black-1 {color: var(--color-black-1);}
.c_accent-color-yw {color: var(--accent-color) }
.c_logo-color-yw {color: var(--logo-color) }

/* ---- Background Colors ---- */
.c_white-background{background: var(--color-white);}
.c_gray-1-background{background: var(--color-gray-1);}
.c_gray-2-background{background: var(--color-gray-2);}
.c_gray-3-background{background: var(--color-gray-3);}
.c_gray-4-background{background: var(--color-gray-4);}
.c_gray-5-background{background: var(--color-gray-5);}
.c_gray-6-background{background: var(--color-gray-6);}
.c_primary-background{background: var(--primary-blue-color);}


/* ---- Font Family (Typography) ---- */
.c_font-Roboto{font-family: var(--font-Roboto);}
.c_font-Montserrat{font-family: var(--font-Montserrat);}
.c_font-Futura{font-family: var(--font-Futura);}
.c_font-Segoe{font-family: var(--font-Segoe);}
.c_font-Lato{font-family: var(--font-Lato);}


/* ---- Font Size ---- */
.c_font-10{font-size: var(--font-10);}
.c_font-12{font-size: var(--font-12);}
.c_font-13{font-size: var(--font-13);}
.c_font-14{font-size: var(--font-14);}
.c_font-16{font-size: var(--font-16);}
.c_font-20{font-size: var(--font-20);}
.c_font-24{font-size: var(--font-24);}


/* ---- Margins ---- */
.c_margin-20{margin-top: var(--spacing-20);}
.c_margin-t10{margin-top: var(--spacing-10);}
.c_margin-b10{margin-bottom: var(--spacing-10);}
.c_margin-r5{margin-right: var(--spacing-05);}
.c_margin-l5{margin-left: var(--spacing-05);}
.c_margin-10x05{margin: var(--spacing-10) var(--spacing-05);}


/* ---- Padding ---- */
.c_padding-3{padding: var(--spacing-03);}
.c_padding-4{padding: var(--spacing-04);}
.c_padding-5{padding: var(--spacing-05);}
.c_padding-10{padding: var(--spacing-10);}
.c_padding-bottom-5{padding-bottom: var(--spacing-05);}
.c_padding-bottom-10{padding-bottom: var(--spacing-10);}
.c_padding-top-10{padding-top: var(--spacing-10);}


/* ---- Styles ---- */
.c_bold{font-weight: var(--bold-font);}
.c_bold-500{font-weight: var(--bold-font-500);}
.c_bold-700{font-weight: var(--bold-font-700);}
.c_capitalize{text-transform: capitalize;}
.c_align_right{text-align: right;}
.c_align_left{text-align: left;}
.c_align_center{text-align: center;}

/* ---- Borders ---- */
.c_border-thin-gray{border: var(--border-gray-thin);}


/* ---- Links ---- */
/* --- Blues (Primary) --- */
a.c_color-blue-1 {text-decoration: none;} /*  For links inline with <a> tags Does not need color */
a.c_color-blue-1:hover{font-weight: bold;}
a.c_color-blue-1:active, a.c_color-blue-1:focus {font-weight: bold;}
.c_color-blue-1 a { /* For links inside <a> tags does needs color */
    color: var(--primary-blue-color);
    text-decoration: none;
}
.c_color-blue-1 a:hover {font-weight: bold;}
.c_color-blue-1 a:active, .c_color-blue-1 a:focus {font-weight: bold;}

/* --- Blues (Secondary) --- */
a.c_color-blue-2 {text-decoration: none;}
a.c_color-blue-2:hover{ font-weight: bold;}

/* --- Grays 4--- */
a.c_color-gray-4 {text-decoration: none;}
a.c_color-gray-4:hover {font-weight: bold;}
a.c_color-gray-4 a:active, .c_color-gray-4 a:focus {font-weight: bold;}
.c_color-gray-4 a { text-decoration: none;}
.c_color-gray-4 a:focus {font-weight: bold;}

/* --- Grays 6--- */
a.c_color-gray-6 {text-decoration: none;}
a.c_color-gray-6 a:active, .c_color-gray-6 a:focus {font-weight: bold;}
.c_color-gray-6 a { text-decoration: none;}
.c_color-gray-6 a:focus {font-weight: bold;}


a.c_color-gray-5 {text-decoration: none;}
.c_color-gray-5 a { text-decoration: none;}
.c_color-gray-5 a:focus {font-weight: bold;}

a.c_color-gray-3 {text-decoration: none;}
.c_color-gray-3 a { text-decoration: none;}
.c_color-gray-3 a:focus {font-weight: bold;}

/* --- Hover-- */
a.c_color-gray-3:hover {font-weight: bold;}

/* ---- Buttons ---- */
/* ---- Blue ---- */
button.c_button-blue{
    cursor: pointer;
    color: var(--color-white); /* Text color  = white */
    background-color: var(--primary-blue-color); /* Background color = blue */
    border: var(--primary-blue-color) solid thin; /* Border color = blue */
    min-width: var(--button-w-1);
    min-height: var(--button-h-1);
    border-radius: var(--spacing-03);
    font-family: var(--font-Futura);
    font-size: var(--font-13);
    text-align: center;
    vertical-align: middle;
}
/* ---- White ---- */
button.c_button-white{
    cursor: pointer;
    color: var(--primary-blue-color); /* Text color = darkgray */
    background-color: var(--color-white); /* Background color = white */
    border: var(--color-gray-3) solid thin; /* Border color = lightgray */
    min-width: var(--button-w-1);
    min-height: var(--button-h-1);
    border-radius: var(--spacing-03);
    font-family: var(--font-Futura);
    font-size: var(--font-13);
    text-align: center;
    vertical-align: middle;
}
/* ---- Generic ---- */
button.c_button-generic {
    cursor: pointer;
    background-color: var(--color-white); /* Background color = white */
    border: var(--color-gray-3) solid thin; /* Border color = lightgray */
    min-width: var(--button-w-1);
    min-height: var(--button-h-1);
    padding: var(--px-5) var(--px-10);
    margin-bottom: var(--px-5);
    margin-top: var(--px-10);
    border-radius: var(--spacing-03);
    font-family: var(--font-Futura);
    font-size: var(--font-13);
    text-align: center;
    vertical-align: middle;
    /*font-weight: bold;*/
}
/* ---- Account Buttons ---- */
button.c_button-accent, input[type="submit"].c_button-accent,
button.c_button-logo, input[type="submit"].c_button-logo,
button.c_button-account-generic, input[type="submit"].c_button-account-generic {
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: var(--spacing-03);
    font-family: var(--font-Futura);
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    /*display: block;*/
    width: 100%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none;
}


/* ---- Account Accent ---- */
button.c_button-accent, input[type="submit"].c_button-accent {
    color: var(--color-white);
    background-color: var(--accent-color); /* Background color = white */
    border: var(--accent-color) solid thin; /* Border color = lightgray */
}
/* ---- Account Logo ---- */
button.c_button-logo, input[type="submit"].c_button-logo {
    color: var(--color-white);
    background-color: var(--logo-color); /* Background color = white */
    border: var(--logo-color) solid thin; /* Border color = lightgray */
}
/* ---- Account Generic ---- */
button.c_button-account-generic, input[type="submit"].c_button-account-generic {
    color: var(--color-gray-4);
    background-color: var(--color-white); /* Background color = white */
    border: var(--color-gray-3) solid thin; /* Border color = lightgray */
}
button.smaller-button{
    width: auto;
    font-size: var(--font-13);
}

/* ---- Active ---- */
button.c_button-blue a {}
button.c_button-white a , button.c_button-generic a{}

/* ---- Hover ---- */
button.c_button-blue:hover {
    background-color: var(--secondary-blue-color); /* Background color = white */
    border: var(--secondary-blue-color) solid thin; /* Border color = blue */
}
button.c_button-white:hover , button.c_button-generic:hover {
    border: var(--color-gray-4) solid thin !important;
}
button.c_button-account-generic:hover, input[type="submit"].c_button-account-generic:hover {
    border: var(--color-gray-4) solid thin;
}
button.c_button-accent:hover, input[type="submit"].c_button-accent:hover {
    color: var(--color-white);
    background-color: var(--logo-color);
    border: var(--logo-color) solid thin;
}
button.c_button-logo:hover, input[type="submit"].c_button-logo:hover {
    color: var(--color-gray-4);
    background-color: var(--color-white);
    border: var(--color-gray-4) solid thin;
}


/* ---- Animations ---- */
@keyframes skeleton-loading {
    0% {background-color: #f6f7f8;}
    50% {background-color: #e4e4e2;}
    100% {background-color: #f6f7f8;}
}
p.c_skeleton-loader {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    width: 75%;
    height: 1rem;
}
p.c_skeleton-loader-50 {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    width: 50%;
    margin: 5px 0;
}
p.c_skeleton-loader-100 {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    width: 100%;
    height: 1rem;
}
p.c_skeleton-loader-button {
    animation: var(--skeleton-animation);
    border-radius: 10px;
    height: 2rem;
    width: 6rem;
}
p.c_skeleton-loader-image {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    height: 4rem;
    width: 8rem;
}
p.c_skeleton-loader-link {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    width: 75%;
    margin: 5px 0;
}
p.c_skeleton-loader-link-2 {
    animation: var(--skeleton-animation);
    border-radius: var(--skeleton-radius);
    width: 50%;
    margin: 5px 0;
    height: 1.5rem;
}
p.c_skeleton-loader-boxes {
    animation: var(--skeleton-animation);
    /*border-radius: var(--skeleton-radius);*/
    width:2.188rem;
    height:1.875rem;
}
@keyframes carousel-loading {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
.carousel {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    height: 20px;
}

.item {
    width: 4px;
    height: 4px;
    margin: 0 5px;
    border-radius: 4px;
    background-color: #e0e0e0;
    animation: carousel-loading 1.5s infinite ease-in-out;
}


/* ---- Effects ---- */
.none {
    display: none !important;
}
.show {
    display: block;
}
.c_backdrop-blur{
    backdrop-filter: var(--blur);
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
.c_gradient-banner{
    background: linear-gradient(180deg, rgb(204 204 204 / 0%) 0%, rgb(103 103 103 / 73%) 67.71%)
}


/* ---- Collapsing ---- */
.content-container {
    text-overflow: ellipsis;
    white-space:  pre-line;
    overflow: auto;
    /*max-height: 700px;*/
    transition: max-height 0.3s ease-in-out;
    /*border: gray thin solid;*/
}
.content-container.expanded {max-height: 1000px;}
.toggle-btn {
    display: block;
    margin-top: 1rem;
}

/* ---- SVG ---- */
.c_svg-image img {
    /* margin-right: 15px; */
    transition: transform 0.3s ease-in-out;
}
.c_svg-image:hover img {
    cursor: pointer;
    /*transform: scale(1.2);*/
    /*filter: drop-shadow(2px 4px 6px black);*/
}

/* ---- Accounts ---- */
.c_user_login, .hr-text{
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}
.c_header_title{
    font-family: 'Source Sans Pro', sans-serif;
}
#i_formLogin.form label, i_formLogin.form i_formLogin.label {
    display: block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
#i_formLogin .c_user_login label {
    margin-bottom:5px;
    display: inline;
}
#i_formLogin p:has(input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    margin-top: -5px;
}
#i_formLogin p:has(input[type="checkbox"]:checked ) {
    accent-color: var(--logo-color);
}
.c_accounts-forget-password{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}
.c_accounts-terms-policies{
    display: flex;
    justify-content: space-between;
    font-size: medium;
    margin-top: 20px;
}
.c_accounts-icons{
    display: flex;
    justify-content: center;
    font-size: x-large;
    margin-bottom: 15px;
    gap: 10px;
}
.c_hr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.hr-line {
    flex-grow: 1;
    border: none;
    border-top: thin solid var(--color-gray-3);
}
.hr-text {
    padding: 0 10px;
    color: var(--color-gray-3);
    font-size: 16px;
    /*color: var(--color-gray-6);*/
}
.icon__3F7K {
    width: 30px;
    height: 30px;
}
.icon__1Md2 {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
}
.c_form > p, .s_form > p, .l_form > p{
    margin: 0 0 1em;
    line-height: 1.4285em;
}

/* --- Link Hover --- */
.c_account_hook > a.c_color-gray-6:hover {text-decoration: underline; color: var(--color-gray-6);}
.c_account_hook > a.c_color-gray-5:hover {text-decoration: underline; color: var(--color-gray-5);}
.c_account_hook > a.c_color-gray-3:hover {font-weight: bold; color: var(--accent-color);}



/* ---- Nav  --- */
.c_nav_panel{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    row-gap: 1rem;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
}
.c_nav_panel > div{
    display: flex;
}
.c_nav_panal_menu_logo{
    gap: 1rem;
}
.c_menu_icon_svg {
    transition: transform 0.3s ease-in-out;
}
.c_menu_icon_svg:hover{
    cursor: pointer;
    transform: scale(1.2);
}
.c_nav_panal_profile_menu_user{
    cursor: pointer;
}
.c_nav_panal_profile_menu_user:hover{
    color: var(--color-gray-6);
}
.c_dropdown_menu{
    z-index: 1;
}
.c_dropdown_menu:has(#rightMenu){
    justify-content: flex-end;
    display: flex;
}
.c_dropdown_menu:has(#leftMenu){
    justify-content: flex-start;
    display: flex;
}
.justify-flex-end {
    justify-content: flex-end;
    display: flex;
}
.c_my-sidebar, .menu-dropdown {
    min-height: 40vh;
    max-height: 80vh;
    min-width: 260px;
    max-width: 70vw;
    position: absolute !important;
    overflow: auto;
    background-color: var(--color-white);
    border-radius: 2px;
    z-index: 2;
    /*border: thin #eee solid;*/
    /*box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);*/
    padding-bottom: 30px;
    background-color: #FDFDFD;
}
.c_my-sidebar_content, .menu-dropdown-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 20px;
    gap: 0.4rem;
}
#profileMenu.c_my-sidebar, .right-shadow{
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}
#mainMenu.c_my-sidebar, .left-shadow{
    box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}
#rightMenu.c_my-sidebar, .right-shadow{
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}
#leftMenu.c_my-sidebar, .left-shadow{
    box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, 0.05);
}
/* --- Confirmation Messages --- */
.c_conformation-msg-centered {
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    margin: 0 0;
    clear: both;
    overflow: hidden;
    text-transform: initial;
}


@media only screen and (max-width:46.25rem) {
    .c_my-sidebar, .menu-dropdown {
        height: 70vh;
        width: 50vw;
    }
}