﻿:root {
    --desktop-h2-font-family: "Proxima Nova", Helvetica;
    --desktop-h2-font-weight: 700;
    --desktop-h2-font-size: 52px;
    --desktop-h2-letter-spacing: 0px;
    --desktop-h2-line-height: 114.99999761581421%;
    --desktop-h2-font-style: normal;
    --desktop-body-text-4-font-family: "Proxima Nova", Helvetica;
    --desktop-body-text-4-font-weight: 400;
    --desktop-body-text-4-font-size: 14px;
    --desktop-body-text-4-letter-spacing: -0.05000000074505806px;
    --desktop-body-text-4-line-height: 20px;
    --desktop-body-text-4-font-style: normal;
    --desktop-h4-font-family: "Proxima Nova", Helvetica;
    --desktop-h4-font-weight: 700;
    --desktop-h4-font-size: 18px;
    --desktop-h4-letter-spacing: 0px;
    --desktop-h4-line-height: 100%;
    --desktop-h4-font-style: normal;
    --shadow-1: 0px 4px 8px -2px rgba(24, 24, 28, 0.1), 0px 2px 4px -2px rgba(24, 24, 28, 0.06);
    --colors-additional-colors-background-background-white: rgba(250, 251, 252, 1);
    --colors-style-guide-colors-dark-blue-100: rgba(8, 31, 44, 1);
    --colors-additional-colors-brand-flash-white: rgba(250, 251, 252, 1);
    --colors-additional-colors-secondary-cool-grey: rgba(139, 144, 167, 1);
}

body {
    margin: 0px;
    background-color: #F3F3F3;
    font-family: "Proxima Nova", Helvetica;
    letter-spacing: 0.10em;
}

table {
    width: 100%;
    border-spacing: 0px;
}

th, td {
    
}

h1 {
    font-family: var(--desktop-h2-font-family);
    font-weight: var(--desktop-h2-font-weight);
    color: var(--colors-style-guide-colors-dark-blue-100);
    font-size: 2.4em;
    text-align: center;
    letter-spacing: var(--desktop-h2-letter-spacing);
    line-height: var(--desktop-h2-line-height);
    font-style: var(--desktop-h2-font-style);
}

h2 {
    position: relative;
    align-self: stretch;
    margin-top: -1.00px;
    font-family: var(--desktop-h2-font-family);
    font-weight: var(--desktop-h2-font-weight);
    color: var(--colors-style-guide-colors-dark-blue-100);
    font-size: 2.3em;
    text-align: center;
    letter-spacing: var(--desktop-h2-letter-spacing);
    line-height: var(--desktop-h2-line-height);
    font-style: var(--desktop-h2-font-style);
}

h3 {
    position: relative;
    align-self: stretch;
    font-family: var(--desktop-h4-font-family);
    font-weight: var(--desktop-h4-font-weight);
    color: var(--colors-style-guide-colors-dark-blue-100);
    font-size: 1.1em;
    text-align: center;
    letter-spacing: var(--desktop-h4-letter-spacing);
    line-height: var(--desktop-h4-line-height);
    font-style: var(--desktop-h4-font-style);
}

h4 {
    position: relative;
    align-self: stretch;
    font-family: var(--desktop-h4-font-family);
    font-weight: var(--desktop-h4-font-weight);
    color: var(--colors-style-guide-colors-dark-blue-100);
    font-size: 1.2em;
    text-align: left;
    letter-spacing: var(--desktop-h4-letter-spacing);
    line-height: var(--desktop-h4-line-height);
    font-style: var(--desktop-h4-font-style);
}

p {
    line-height: 1.4em;
    letter-spacing: 0.10em;
}

ul {
    
}

li {
    margin-top: 0.6em;
    line-height: 1.3em;
}

a, a:active, a:visited {
    color: #0000EE;
}

a:hover {
    color: #0000EE;
}

.masterpage_bg {
}

.masterpage_cph_bg {
    width: 100%;
    text-align: left;
}

.header, .header_left, .header_right {
    vertical-align: middle;
    height: 60px;
    background-color: var(--colors-additional-colors-brand-flash-white);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--colors-additional-colors-secondary-cool-grey);
}

.footer {
    height: 30px;
    background-color: #F3F3F3;
    padding: 10px;
}

.header_left, .header_right {
    text-align: left;
    padding-left:50px;
}

.header_saperator {
    height: 80px;
    vertical-align: bottom;
}

.header_saperator_authpage {
    height: 30px;
}

.logo {
    width: 92px;
    height: 30px;
}

.my_virtual_reports_logo {
    width: 191px;
    height: 20px;
    margin-top: -6.00px;
    margin-bottom: -6.00px;
}

.left_panel, .right_panel {
    width: 290px;
}

.container {
    width: 49%;
    text-align: center;
    vertical-align: top;
    background-color: var(--colors-additional-colors-brand-flash-white);
    border-radius: 8px 0px 0px 8px;
    box-shadow: var(--shadow-1);
    padding: 20px;
}

    .container a {
        text-decoration: none;
    }

    .content_saperator {
    }

.container_auth_page {
    width: 49%;
    text-align: left;
    vertical-align: top;
    background-color: #ffffff;
    /*background-color: var(--colors-additional-colors-brand-flash-white);*/
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    padding: 20px;
}

    .container_auth_page a {
        text-decoration: none;
    }

.center_button {
    align-items: center;
    justify-content: center;
    width: 90%;
    /*background-color: var(--colors-additional-colors-background-background-white);*/
    border-radius: 16px;
    box-shadow: var(--shadow-1);
}

.text_wrapper {
    align-self: stretch;
    font-family: var(--desktop-body-text-4-font-family);
    font-weight: var(--desktop-body-text-4-font-weight);
    color: var(--colors-style-guide-colors-dark-blue-100);
    font-size: var(--desktop-body-text-4-font-size);
    text-align: center;
    letter-spacing: var(--desktop-body-text-4-letter-spacing);
    line-height: var(--desktop-body-text-4-line-height);
    font-style: var(--desktop-body-text-4-font-style);
}

.caption_label{
    text-align: left;
    font-family: var(--desktop-input-label-2-font-family);
    font-weight: var(--desktop-input-label-2-font-weight);
    color: var( --colors-additional-colors-text-boarders-lines-soft-shadows-primary-dark-2 );
    font-size: var(--desktop-input-label-2-font-size);
    letter-spacing: var(--desktop-input-label-2-letter-spacing);
    line-height: var(--desktop-input-label-2-line-height);
    white-space: nowrap;
    font-style: var(--desktop-input-label-2-font-style);
    padding: 30px 0px 5px 0px;
}

.caption_label_right_aligned {
    font-size: 1.0em;
    font-weight: bold;
    text-align: right;
    padding: 16px 10px;
    width: 25%;
}

.caption_label_right_aligned_std_height {
    font-size: 1.0em;
    font-weight: bold;
    text-align: right;
    padding: 5px;
}

.caption_label_right_aligned_for_textbox {
    font-size: 1.0em;
    font-weight: bold;
    padding: 9px;
    text-align: right;
}

.caption_label_half_width_for_textbox {
    font-size: 1.0em;
    font-weight: bold;
    padding: 9px;
    text-align: right;
    width: 29%;
}

.caption_label_left_aligned_std_height {
    font-size: 1.0em;
    font-weight: bold;
    text-align: left;
    padding: 7px 5px 7px 0px;
    vertical-align: middle;
}

.textbox {
    width: 99%;
    height: 30px;
}

.textbox_std_width {
    width: 350px;
    height: 30px;
}

.textbox_custom_width {
    height: 27px;
}

.dropdown {
    height: 30px;
    min-width: 100px;
}

.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between box and text */
    padding: 5px 0;
}

.checkbox_grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.checkbox_grid {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between box and text */
    padding: 0px 0;
}

.button_main, .button_main_allcaps, .button_main_full_width, .button_second, .button_plain, .button_popup, .button_popup_second {
    height: 50px;
    border-radius: 30px;
    text-transform: uppercase;
    min-width: 250px;
    letter-spacing: 2.5px;
    font-weight: bolder;
    margin-top: 20px;
    margin-bottom: 25px;
}

.button_main_full_width {
    border: 0px;
    background-color: #e40046;
    color: #ffffff;
    width: 100%;
    text-transform: uppercase;
}

    .button_main_full_width:hover {
        background-color: #CA013F;
    }

.button_main {
    border: 0px;
    background-color: #e40046;
    color: #ffffff;
    text-transform: uppercase;
}

    .button_main:hover {
        background-color: #CA013F;
    }

.button_popup {
    border: 0px;
    background-color: #e40046;
    color: #ffffff;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0px;
    height: 45px;
}

    .button_popup:hover {
        background-color: #CA013F;
    }

.button_popup_second {
    background-color: #ffffff;
    color: #e40046;
    border: 1px solid #e40046;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0px;
    height: 45px;
}

.button_main_allcaps {
    border: 0px;
    background-color: #e40046;
    color: #ffffff;
    padding: 0px 25px;
    text-transform: uppercase;
}

    .button_main_allcaps:hover {
        background-color: #CA013F;
    }

.button_second {
    background-color: #ffffff;
    color: #e40046;
    border: 1px solid #e40046;
    text-transform: uppercase;
}

.button_plain {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    min-width: 195px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase;
    height: 42px;
}

.button_plain:hover {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    min-width: 195px;
}

.error {
    padding: 15px 0px 0px 0px;
    color: #ff0000;
    line-height: 25px;
}

.current_merch_info {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-1);
}

    .current_merch_info table td {
        padding: 5px 0px;
    }

.uc_title {
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    text-transform: uppercase;
    word-spacing: 8px;
}

uc_caption_label {
    font-weight: bold;
}

.page_title1, .page_title2, .page_title3, .page_title2_with_background {
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    text-transform: capitalize;
    word-spacing: 1px;
    padding-bottom: 35px;
}

.page_title2 {
    font-size: 1.3em;
}

.page_title3 {
    font-size: 1.1em;
}

.page_title2_with_background {
    font-size: 1.3em;
    padding: 10px;
    background-color: #F8F9FA;
    border: 1px solid #ADB5BD;
    border-radius: 10px;
    margin-top: 35px;
    margin-bottom: 10px;
    text-align: center;
}

.popup_container {
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}

.export_data {
    text-transform: uppercase;
    background-color: #E40046;
    color: #ffffff;
    font-weight: bold;
    vertical-align: middle;
    padding: 10px 0px;
}

#calendarContainer {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    display: none;
}

.calendar {
    z-index: 1000;
}

.success_block, .error_block, .error_block_for_webpage {
    border-radius: 15px;
    padding: 10px 15px;
}

.success_block {
    margin-top: 15px;
    border: 1px solid #002c05;
    color: #002c05;
    background-color: #a7ff9d;
}

.error_block, .error_block_for_webpage {
    margin-top: 15px;
    border: 1px solid #ff0000;
    color: #000000;
    background-color: #fccbcb;
}

.error_block_for_webpage {
    margin: 15px 0px;
    background-color: #f7d5d5;
    border-radius: 9px;
}

.search_window_bg {
    background-color: #F8F9FA;
    border: 1px solid #ADB5BD;
    border-radius: 10px;
    padding: 18px 5px;
    margin-top: -12px;
}

.content_page_block {
    margin-bottom: 25px;
    border: 1px solid #b6b6b6;
    border-radius: 15px;
    padding: 15px;
    text-align: left;
}

.popup_warning {
    padding: 12px 0px;
    width: 100%;
    color: #0F57EF;
    border: 1px solid #0F57EF;
    border-radius: 7px;
    margin: 20px 0px;
    background-color: #F8F9FA;
}