@charset "utf-8";
:root{
    --view-height: calc((var(--vh, 1vh) * 100));

    --logo-width: 250px;
    --logo-height: 35px;
    
    --logo-width-vert: 102px;
    --logo-height-vert: 56px;
    
    --primary-base: #004CAE;
    --primary-darken1: #295199;
    --primary-darken2: #20426F;
    --primary-darken3: #1B3961;
    --primary-darken4: #003060;
    --primary-lighten3: #CEE3FF;
    --primary-lighten4: #D4E3F3;
    --primary-lighten5: #F0F7FF;
    
    --secondary-base: #72B4C0;
    --secondary-darken1: #1BA3AF;
    --secondary-darken2: #157277;
    --secondary-lighten4: #DBF3F4;
    --secondary-lighten5: #EEF4FF;

    --deepIndigo-base: #34206F;
    --deepIndigo-darken1: #1A103B;

    --skyCyan-base: #26A9D3;
    --skyCyan-darken1: #1D86A8;

    --purple-base: #71038D;
    --purple-lighten5: #EDE5FF;

    --green-base: #004C39;
    --green-lighten4: #D5FDD7;
    --green-lighten5: #EEFFEF;

    --orange-base: #F16033;
    --orange-lighten5: #FFF6F0;

    --yellow-base: #FFAC06;

    --lightGreen-base: #00C896;

    --sky-base: #00B0E9;

    --pink-base: #F31A69;

    --danger-base: #FF4E4E;
    --danger-lighten5: #FFE8E8;

    --warning-base: #EFE73B;

    --success-base: #009A24;

    --info-base: #256EF4; 

    --grey-lighten5: #F8F8F8;
    --grey-lighten4: #EBEBEB;
    --grey-lighten3: #D9D9D9;
    --grey-lighten2: #939393;
    --grey-lighten1: #777;
    --grey-base: #555; 
    --grey-darken1: #444;
    --grey-darken2: #333;
    --grey-darken3: #222;
    --grey-darken4: #111111;

    --border-color: var(--grey-lighten4);
    --border-color-dark: var(--grey-lighten3);

    --container: 1440px;
    --container-gutter: 20px;;

    --transition: 0.3s ease-in-out;

    /* Header */    
    --header-head: 0;
    --header-body: 104px;
    --header-height: var(--header-body);

    /* Input */
    --input-height: 54px;
    --input-border-radius: 8px;
    --input-padding: 20px;

    --control-icon-size: 18px; 
    --control-label-font-size: 16px; 
    --control-label-color: var(--grey-darken4); 
    --control-gap: 15px;

}
@media screen and (max-width: 1439px){
    :root{
        --header-body: 92px;

        --logo-width: 218px;
        --logo-height: 32px;
    }
}
@media screen and (max-width: 1200px){
    :root{
        --header-body: 64px;

        --logo-width: 178px;
        --logo-height: 26px;
    }
}
@media screen and (max-width: 767px){
    :root{
        --logo-width-vert: 88px;
        --logo-height-vert: 48px;

        --input-height: 44px;
        --input-padding: 16px;
    }
}