/* 
------INDEX---------

1. COLORS
1.1. Colors Primary
1.2. Colors Declination


*/

/* ----------------- */
/* ------VARS------- */
/* ----------------- */

:root {

    /* COLORS */

    /* Primary */
    --primary-blue : #0042B8;
    --primary-green : #005F32;
    --primary-orange : #FE6100;
    --primary-black : #000000;
    --primary-white : #FFFFFF;
    --primary-yellow : #FFB23E;
    
    /* Declination Blue */


    --blue-50 : #F2F6FB;
    --blue-100 : #EEF2FA;
    --blue-200 : #D3DEF2;
    --blue-300 : #B9C9EA;
    --blue-400 : #9FB6E2;
    --blue-500 : #85A2DB;
    --blue-600 : #6B8ED3;
    --blue-700 : #517ACB;
    --blue-800 : #3766C3;
    --blue-900 : #1E53BC;
    --blue-dark : #0A1F8E;

      /* Declination Green */

    --green-50 : #F2F7F5;
    --green-100 : #E5EFEB;
    --green-200 : #CCDFD6;
    --green-300 : #B3CFC2;
    --green-400 : #99BFAD;
    --green-500 : #80AF98;
    --green-600 : #669F84;
    --green-700 : #4D8F70;
    --green-800 : #337F5B;
    --green-900 : #1A6F47;
    --green-dark : #004628;

    /* Declination Orange */

    --orange-50 : #FFF7F2;
    --orange-100 : #FFEFE5;
    --orange-200 : #FFDFCC;
    --orange-300 : #FFD0B3;
    --orange-400 : #FFC099;
    --orange-500 : #FFB080;
    --orange-600 : #FEA066;
    --orange-700 : #FE904D;
    --orange-800 : #FE8133;
    --orange-900 : #FE711A;
    --orange-dark : #FF4100;

    /* Declination Grey */

    --grey-50 : #F8F9FA;
    --grey-100 : #F1F3F5;
    --grey-200 : #E9ECEF;
    --grey-300 : #DEE2E6;
    --grey-400 : #CED4DA;
    --grey-500 : #ADB5BD;
    --grey-600 : #868E96;
    --grey-700 : #585F66;
    --grey-800 : #1D2329;
    --grey-900 : #0D141B;
    --grey-dark : #000000;

    /* FONTS */

    --font-cy :   font-family: 'Cy'; ;
    --font-roboto :  font-family: 'Roboto';   ; 
}






/* ---------------- */
/* -----COLORS----- */
/* ---------------- */





/* ----PRIMARY---- */



.bg-primary-blue {
    background-color: var(--primary-blue);   
}
.text-primary-blue {
    color: var(--primary-blue);   
}

.bg-primary-green {
    background-color: var(--primary-green);
}
.text-primary-green {
    color: var(--primary-green);
}

.bg-primary-orange {
    background-color: var(--primary-orange);
}
.text-primary-orange {
    color: var(--primary-orange);
}

.bg-primary-black {
    background-color: var(--primary-black);
}
.text-primary-black {
    color: var(--primary-black);
}

.bg-primary-white {
    background-color: var(--primary-white);
}
.text-primary-white {
    color: var(--primary-white);
}

.bg-primary-yellow {
    background-color: var(--primary-yellow);
}
.text-primary-yellow {
    color: var(--primary-yellow);
}

/* It was like this before */

/* .yellow {
    background-color: #FFB23E;
} */


/* ----DECLINATION---- */

/* .declination-blue--50 {
    background-color: var(--blue-50);
} */
.bg-blue-50 {
    background-color: var(--blue-50);
}

.text-blue-50 {
    color: var(--blue-50);
}

.bg-blue-100 {
    background-color: var(--blue-100);
}
.text-blue-100 {
    color: var(--blue-100);
}

.bg-blue-200 {
    background-color: var(--blue-200);
}
.text-blue-200 {
    color: var(--blue-200);
}

.bg-blue-300 {
    background-color: var(--blue-300);
}
.text-blue-300 {
    color: var(--blue-300);
}

.bg-blue-400 {
    background-color: var(--blue-400);
}
.text-blue-400 {
    color: var(--blue-400);
}

.bg-blue-500 {
    background-color: var(--blue-500);
}
.text-blue-500 {
    color: var(--blue-500);
}

.bg-blue-600 {
    background-color: var(--blue-600);
}
.text-blue-600 {
    color: var(--blue-600);
}

.bg-blue-700 {
    background-color: var(--blue-700);
}
.text-blue-700 {
    color: var(--blue-700);
}

.bg-blue-800 {
    background-color: var(--blue-800);
}
.text-blue-800 {
    color: var(--blue-800);
}

.bg-blue-900 {
    background-color: var(--blue-900);
}
.text-blue-900 {
    color: var(--blue-900);
}

.bg-blue-dark {
    background-color: var(--blue-dark);
}
.text-blue-dark {
    color: var(--blue-dark);
}



/* ----Declination Green---- */
.bg-green-50 {
    background-color: var(--green-50);
}
.text-green-50 {
    color: var(--green-50);
}

.bg-green-100 {
    background-color:var(--green-100) ;
}
.text-green-100 {
    color:var(--green-100) ;
}

.bg-green-200 {
    background-color: var(--green-200);
}
.text-green-200 {
    color: var(--green-200);
}

.bg-green-300 {
    background-color: var(--green-300);
}
.text-green-300 {
    color: var(--green-300);
}
.bg-green-400 {
    background-color: var(--green-400);
}
.text-green-400 {
    color: var(--green-400);
}

.bg-green-500 {
    background-color: var(--green-500);
}
.text-green-500 {
    color: var(--green-500);
}

.bg-green-600 {
    background-color: var(--green-600);
}
.text-green-600 {
    color: var(--green-600);
}

.bg-green-700 {
    background-color:var(--green-700);
}
.text-green-700 {
    color:var(--green-700);
}

.bg-green-800 {
    background-color: var(--green-800);
}
.text-green-800 {
    color: var(--green-800);
}

.bg-green-900 {
    background-color: var(--green-900);
}
.text-green-900 {
    color: var(--green-900);
}

.bg-green-dark {
    background-color: var(--green-dark);
}
.text-green-dark {
    color: var(--green-dark);
}

/* ----Declination Orange---- */

.bg-orange-50 {
    background-color:var(--orange-50);
}
.text-orange-50 {
    color:var(--orange-50);
}

.bg-orange-100 {
    background-color:var(--orange-100) ;
}
.text-orange-100 {
    color:var(--orange-100) ;
}

.bg-orange-200 {
    background-color: var(--orange-200) ;
}
.text-orange-200 {
    color: var(--orange-200) ;
}

.bg-orange-300 {
    background-color: var(--orange-300);
}
.text-orange-300 {
    color: var(--orange-300);
}

.bg-orange-400 {
    background-color: var(--orange-400) ;
}
.text-orange-400 {
    color: var(--orange-400) ;
}

.bg-orange-500 {
    background-color: var(--orange-500)  ;
}
.text-orange-500 {
    color: var(--orange-500)  ;
}

.bg-orange-600 {
    background-color: var(--orange-600) ;
}
.text-orange-600 {
    color: var(--orange-600) ;
}

.bg-orange-700 {
    background-color:var(--orange-700) ;
}
.text-orange-700 {
    color:var(--orange-700) ;
}

.bg-orange-800 {
    background-color: var(--orange-800) ;
}
.text-orange-800 {
    color: var(--orange-800) ;
}

.bg-orange-900 {
    background-color: var(--orange-900) ;
}
.text-orange-900 {
    color: var(--orange-900) ;
}

.bg-orange-dark {
    background-color: var(--orange-dark);
}
.text-orange-dark {
    color: var(--orange-dark);
}


/* Declination Grey */

.bg-grey-50 {
    background-color: var(--grey-50);
}
.text-grey-50 {
    color: var(--grey-50);
}

.bg-grey-100 {
    background-color: var(--grey-100) ;
}
.text-grey-100 {
    color: var(--grey-100) ;
}

.bg-grey-200 {
    background-color: var(--grey-200);
}
.text-grey-200 {
    color: var(--grey-200);
}

.bg-grey-300 {
    background-color: var(--grey-300);
}
.text-grey-300 {
    color: var(--grey-300);
}

.bg-grey-400 {
    background-color: var(--grey-400);
}
.text-grey-400 {
    color: var(--grey-400);
}

.bg-grey-500 {
    background-color: var(--grey-500);
}
.text-grey-500 {
    color: var(--grey-500);
}

.bg-grey-600 {
    background-color: var(--grey-600) ;
}
.text-grey-600 {
    color: var(--grey-600) ;
}

.bg-grey-700 {
    background-color: var(--grey-700) ;
}
.text-grey-700 {
    color: var(--grey-700) ;
}

.bg-grey-800 {
    background-color: var(--grey-800) ;
}
.text-grey-800 {
    color: var(--grey-800) ;
}

.bg-grey-900 {
    background-color: var(--grey-900);
}
.text-grey-900 {
    color: var(--grey-900);
}

.bg-grey-dark {
    background-color: var(--grey-dark);
}
.text-grey-dark {
    color: var(--grey-dark);
}



/* ---------------------- */
/* ------TYPOGRAPHY------ */
/* ----------------------- */


.title-0 {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 900;
    font-size: 64px;
    line-height: 76px;
    
}
.title-1 {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 44px;
}
.title-2 {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 36px;
}
.title-3 {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
}
.title-4 {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}


.heading {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    /* identical to box height, or 120% */

    font-feature-settings: 'pnum' on, 'lnum' on;

}

.body {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    font-feature-settings: 'pnum' on, 'lnum' on;
}

.body-strong {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    font-feature-settings: 'pnum' on, 'lnum' on;
}

.caption {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */

    font-feature-settings: 'pnum' on, 'lnum' on;
}

.caption-strong {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */

    font-feature-settings: 'pnum' on, 'lnum' on;
}

.subcaption {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */

    font-feature-settings: 'pnum' on, 'lnum' on;
}

.subcaption-strong {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */

    font-feature-settings: 'pnum' on, 'lnum' on;

}

.buttons-default {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: 'pnum' on, 'lnum' on;

}

.buttons-small {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.buttons-large {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
}


.link-default {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    /* identical to box height, or 112% */

    text-decoration-line: underline;
    font-feature-settings: 'pnum' on, 'lnum' on;
    color: #0042B8;

}

.link-small {
    font-family: 'Cy';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    /* identical to box height, or 114% */

    text-decoration-line: underline;
    font-feature-settings: 'pnum' on, 'lnum' on;
    color: #0042B8;
}


/* ----------------- */
/* -----SHADOWS----- */
/* ----------------- */

.shadow-1 {
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

}

.shadow-2 {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
}

.shadow-3 {
    box-shadow: 0px 1px 8px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
}

.shadow-4 {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}


/* ---------------- */
/* -----ALERTS----- */
/* ---------------- */

.alert {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    /* identical to box height, or 150% */

    font-feature-settings: 'pnum' on, 'lnum' on;
    border-radius: 8px;
    padding: 12px;

}
.success {
    color: #005F32;
    background-color: var(--green-100);
}


.error {
    color: #FE6100;
    background-color: var(--orange-100);

}

.info-blue {
    color: var(--blue-800);
    background-color: var(--blue-100);
}

.info-grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
}

.blue {
    color:  #0042B8;
    background-color: var(--blue-100);
    padding: 12px;

}

.grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
    padding: 12px;

}


/* ---------------- */
/* -----BUTTONS----- */
/* ---------------- */
/* Chek about it. .button.small*/

.small {
    width: 152px;
    height: 54px;
    font-size: 16px;
 }
 
 .large {
    /* width: 201px; */
    height: 64px;
    font-size: 18px;
 
 }
  


/* ----Primary Buttons---- */

.button-primary {
    
     border: none;
     border-radius: 81px;
     padding: 15px 20px;
 
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     
     line-height: 20px;
     /* identical to box height, or 125% */
 
     display: flex;
     align-items: center;
     justify-content: center;
     font-feature-settings: 'pnum' on, 'lnum' on;
 
     /* Inside auto layout */
 
     flex: none;
     order: 0;
     flex-grow: 0;
     text-decoration: none;

}

.primary-normal {

    color: #FFFFFF;
    background-color: #0042B8;
} 

.primary-hover {
    color: #FFFFFF;
    background-color: var(--blue-dark);
    /* Shadow 4 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.primary-onclick {
    color: var(--blue-700);
    background-color: var(--blue-dark);
}

.primary-disabled {
    color:  var(--grey-500); ;
    background-color: #E9ECEF;
    box-shadow: none;
    pointer-events: none;
}

.button-primary:hover {
    color: #FFFFFF;
    background-color: var(--blue-dark);
    /* Shadow 4 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.button-primary:disabled {
    color:  var(--grey-500); ;
    background-color: #E9ECEF;
    box-shadow: none;
    pointer-events: none;
}

.button-primary:active {
    color: var(--blue-700);
    background-color: var(--blue-dark);
}

/* Secondary buttons */


.button-secondary {
    
    border: none;
    border-radius: 44px;
    padding: 15px 20px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    
    line-height: 20px;
    /* identical to box height, or 125% */
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;    
    text-decoration: none;
    /* Addedd when doing th homepage hero section component */
    background: transparent;
}

.secondary-normal {

   color: #0042B8;
   /* Commented out when doing homepage hero section component */
   /* background-color: #FFFFFF; */
   border: 1px solid var(--blue-dark);
} 

.secondary-hover {
    color: var(--blue-dark);
    background-color: var(--blue-200);
    border: 1px solid var(--blue-dark);
    
}

.secondary-onclick {
   color: var(--blue-dark);
   background-color: var(--blue-500);
   border: 1px solid var(--blue-dark);
}

.secondary-disabled {
    color: var(--grey-500);
    background-color: #E9ECEF;
    border: 1px solid var(--grey-500);
    pointer-events: none;
}

.button-secondary:hover {
    color: var(--blue-dark);
    background-color: var(--blue-200);
    border: 1px solid var(--blue-dark);
}

.button-secondary:active {
    color: var(--blue-dark);
    background-color: var(--blue-500);
    border: 1px solid var(--blue-dark);
}

.button-secondary:disabled {
    color: var(--grey-500);
    background-color: #E9ECEF;
    border: 1px solid var(--grey-500);
}


/* Primary anchor */








/* ---------------- */
/* -----OUTLINE----- */
/* ---------------- */



/* CHECK???????????? */
.outline-default {
    border: 1px solid var(--grey-300);
}

.outline-hover {
    border: 1px solid var(--grey-300);
    /* hover */
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.1);
}

.outline-selected {
    border: 2px solid #0042B8;
    /* selected */
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.2);
}



/* ---------------- */
/* -----INPUTS----- */
/* ---------------- */

.text-inputs {
    width: 320px;
    height: 56px;
}


/* .phone-number-container {
    border: 2px dashed #9747FF;
    border-radius: 5px;
    padding: 1rem;
}
 */


.frame {
    width: 434px;
    height: 56px;
    padding: 0;
    display: flex;
}

.country {
    
    width: 115px;
    /* height: 56px; */
    border: 1px solid var(--grey-300);
    border-radius: 8px 0px 0px 8px;
    padding: 16px;
    appearance: none;
    

    /* To add later the arrow */
    /* background-image: url() ;
    background-repeat: no-repeat;
    background-position: calc(100% - 3) center ;
    background-size: 10px ; */

}


.phone-input {
    width: 320px;
    /* height: 56px; */
    height: 100%;
    border: 1px solid var(--grey-300);
    border-radius: 0px 8px 8px 0px;
    padding: 16px;
}

.phone-input::placeholder {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    display: flex;
    align-items: center;
    font-feature-settings: 'pnum' on, 'lnum' on;

    /* Grey/Grey 600 */

color: var(--grey-600);
}

.supporting-text {
    padding: 4px 12px 0px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
}

.default {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    display: flex;
    align-items: center;
    text-align: right;
    font-feature-settings: 'pnum' on, 'lnum' on;

    /* White & Black/Black */

    color: #0A0A0A;
}

.side-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 2.5rem;
    align-self: center;
}

.side-dropdown {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 4rem;
    align-self: flex-start;

}

.side-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    margin-top: 6rem;
    align-self: flex-start;

}


.input-container {
    position: relative;
 
}



/* Dropdown */

.normal {
    width: 320px;
    height: 56px;
}

.item-container {
    padding: 8px 12px;
    gap: 10px;

    width: 320px;
    height: 40px;

    /* White */

    background: #FFFFFF;

}


.gap {
    gap: 2rem;
}



/* @media only screen and (max-width:1200px) {
    section {
        margin-left: 25rem !important;
    }
 } */





/* 

1. Input text
2.  


*/

/* --------------------- */
/* -----HELPER TEXT------ */
/* --------------- ------*/


.caption {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */

    font-feature-settings: 'pnum' on, 'lnum' on;
    /* display: none; */
}
    
.subcaption-default {
        color: var(--grey-500);

}

.subcaption-disabled {
    color: var(--grey-400);
    
}

.subcaption-error {
   color: #FE6100;
}

.input {
    /* width: 320px; */
    height: 56px; 
    /* padding: 16px; */
    position: relative;
    border-radius: 8px;
    cursor: text;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    display: flex;
    align-items: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    transition: all .3s;

    background-color: #FFFFFF;
 
}

.input-disable {
    border: 1px solid #E9ECEF;
}

.label-text-disabled {
    color: #DEE2E6;;
    pointer-events: none;
}
/* 
.input:focus-within {
    border: 1px solid #0042B8
} */

.label-text {
    /* width: 258px; */
    /* height: 24px; */
    width: 95px;
    position: relative;
    left: -140px;
    transition: all .3s;
    z-index: 3;
}

.label-text-default {
    color: #868E96;

}

.label-active {

    
    top: -25px;
   

    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    background-color: #FFFFFF;
    padding: .5rem .4rem;
    transform: translate(-10px);

}

.label-active-default {
    color: #3766C3;
}

.label-active-error {
    color: #FE6100;
}





.input-text {
    /* width: 258px;
    height: 24px; */

    width: 100%;

    /* body/default */

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    border: none;
    padding-left: .8rem;
  
}

.input-text::placeholder {
    /* color: #ADB5BD; */
    opacity: 0;
    /* padding-left: .8rem; */
}

.input-text:focus {
    outline: none;
}
.input-text:focus::placeholder {
    opacity: 1;
}

/* .input-text:focus + .label-text {
    color: #3766C3;
    top: -22px;

    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    background-color: #FFFFFF;
    padding: 0 .4rem;
    transform: translate(-10px);
   
} */


.text-default {
    color: var(--grey-600);
}

.border-default {
    border: 1px solid var(--grey-300);

}

.text-activated {
    color: #0D141B;
}


.text-onclick {
    color: var(--grey-500);
}

.border-onclick {
    border: 1px solid #0042B8

}

.text-disabled, .phone-country-disable {
    color: var(--grey-300);
    
}

.border-disabled {
    border: 1px solid #E9ECEF;
    pointer-events: none;

}

.text-disabled:disabled {
    color: var(--grey-300);
}

.text-error {
    color: var(--grey-400);
    border: 1px solid #FE6100;
}


/* ----Phone------ */

.phone-wrapper {
   position: relative;
}

.phone-input-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    width: 434px;
    height: 56px;
}

.phone-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
    padding: 16px;
    gap: 10px;

    width: 115px;
    height: 56px;

    /* grey/grey-300 */


    border-radius: 8px 0px 0px 8px;

}

.select-country-list {
    border: 1px solid #DEE2E6;
    background-color: #FFFFFF;
    border-radius: 0 0 8px 8px;
    width: fit-content;
    /* padding: .4rem 1.2rem; */
    transform: translate(3px);
    margin-top: .1rem;

    position: absolute;
    z-index: 2;


    display: none;

    
}

.country-wrapper {
    /* border: 1px solid red; */
    background-color: #FFFFFF;
    transition: .3s;

}

.country {
    padding: .1rem .6rem;
    margin: 0;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.country-wrapper:hover {
    background-color:  #EEF2FA;
    cursor: pointer;
}

.phone-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;

    width: 320px;
    height: 56px;

    /* grey/grey-300 */

    border: 1px solid #DEE2E6;
    border-radius: 0px 8px 8px 0px;

}

.phone-default {
    border: 1px solid #DEE2E6;
}

.phone-disabled {
    border: 1px solid #E9ECEF;
    color: #DEE2E6;
    pointer-events: none;
    cursor: not-allowed;
}

.phone-input:focus {
    outline: none;
}


.phone-activated {
    color: #0D141B;
   
}

.phone-error {
    border-radius: 8px;
    border: 1px solid #FE6100;
} 

.phone-onclick {
    
    border: 1px solid #0042B8;

    /* box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.1); */
    border-radius: 0px 8px 8px 0px;
}

/* --------DROPDOWN------ */

.dropdown {
    padding: 16px;
    width: 320px;
    height: 56px;
    position: relative;
    border-radius: 8px;
    transition: .3s;


}

/* .dropdown-hover {
    border: 1px solid var(--blue-400);
    color: #0042B8;

}

.dropdown-onclick {
    border: 1px solid #0042B8;
wn-b    color: #0042B8;

} */

.dropdown-text-disabled {
    color: var(--grey-300);
}

.dropdown-text-normal {
    color: #000000;
}

.dropdown-text-active {
    color: #0042B8;
} 



.dropdown-border-normal {
    border: 1px solid var(--grey-300);
    transition: .3s;
}


.dropdown-border-click {
    border: 1px solid #0042B8;
}

/* .dropdown-border-hover {
    border: 1px solid #9FB6E2;
} */

.dropdown-border-disabled {
    border: 1px solid #E9ECEF;
    pointer-events: none;
    
}

/* --------DROPDOWN MENU------ */
.dropdown-menu-container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* padding: 4px 0px; */
    /* gap: 4px; */


    width: 320px;
    height: 136px;

    /* White */

    background: #FFFFFF;
    /* Shadow 4 */

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;

    position: absolute;
    z-index: 2;

}

.dropdown-hide {
    display: none;
}


.dropdown-show {
    display: block;
}

.multiselect-hide {
    display: none;
}
.multiselect-show {
    display: block;
}

.label-wrapper {
    width: 100%;
}

.dropdown-component-wrapper, .dropdown-check-wrapper {
    position: relative;
}

/* #dropdown-links {
    display: none;

} */

.hide-helper-check {
    display: no;
}

.dropdown-menu-onclick, .dropdown-menu-select, .dropdown-menu-multiselect {

    background-color: var(--blue-100);

}
.dropdown-list-container {
    width: 100%;
   
    
}

.dropdown-list, .multiselect-list {
   

    padding: 8px 12px;
    /* width: 320px; */
    height: 40px;
    background: #FFFFFF;
    /* list-style-type: none; */
    /* border: 1px solid red; */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    

}

.dropdown-list:hover {
    background-color:  #EEF2FA;
    cursor: pointer;
}


.dropdown-list-item, .multiselect-list-item {
    margin: 0;
    text-decoration: none;
    width: 100%;
    height: 100%;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

/* .dropdown-list-item:hover {
    background-color:  #EEF2FA;
    border: 1px solid red;
    cursor: pointer;
} */

.dropdown-list-item:active {
    color: #0042B8;
}

.dropdown-list-checkbox {
    accent-color: #0042B8;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    
    border: 1px solid #0042B8;

}



.dropdown-list-checkbox:checked + .dropdown-list-item {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    display: flex;
    align-items: center;
    font-feature-settings: 'pnum' on, 'lnum' on;

    /* blue */

    color: #0042B8;
}

.label {
    position: absolute;
    top: -6px;
    left: 10px;
    padding: 0 .5rem;
    background-color: #FFFFFf;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height, or 117% */

    font-feature-settings: 'pnum' on, 'lnum' on;

}

.label-blue {
    color: var(--blue-800);
   

}

.label-error {
    color: #FE6100;
}

.label-grey {
    color: var(--grey-600);

}

.label-hover, .label-onclick {
    color: #0042B8;
}



.label-disabled {
    color: var(--grey-400);
    /* font-weight: 400; */

}


.dropdown-item-disabled {
    color: var(--grey-300);
}


/* ----------------- */
/* -------TABS------ */
/* ----------------- */

.tab {

    margin: 0;

    /* Body/default */
    width: 119px;
    height: 30px;
    border: none;
    border-radius: 42px;
    background-color: #FFFFFF ;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    /* color: #0D141B; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    transition: .3s;

   

}

.tab-normal {

     /* Grey/Grey 900 */
     color: #0D141B;

}

.tab-selected {
    color: #FFFFFF;
    padding: 3px 15px;


    /* width: 119px;
    height: 30px; */

/* blue */

    background: #0042B8;
    border-radius: 42px;
}
.tab-hover, .tab:hover {
    color: var(--blue-700);
    background: var(--blue-200);
    border-radius: 42px;
  
}

.tab-onclick, .tab:active {
    color: var(--blue-700);
  

    /* Blue/Blue 500 */

    background: var(--blue-500);
    border-radius: 33px;
}

.tab-disabled {
    color: var(--grey-400);
    background-color: #FFFFFF;
    pointer-events: none;
}


/* ----Steps---- */

.step-mobile {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    gap: 10px;

   
    width: 44px;
    height: 54px;
    

    /* white */

    background: #FFFFFF;
    /* green */

   
    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.3);


}

.step-validated-mobile {

    border-bottom: 2px solid #005F32;
}

.step-disabled-mobile {
    border-bottom: 2px solid var(--grey-400);
}


.step-desktop {

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    border: none;
    /* identical to box height, or 129% */
    
    font-feature-settings: 'pnum' on, 'lnum' on;
    
    

    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    padding: 25px 20px;
    gap: 10px;

  
    width: 360px;
    height: 74px;
    

    /* white */

    background: #FFFFFF;
    

    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.3);
}

.step-validated-desktop {
    
    border-bottom: 2px solid #005F32;
    color: #005F32;
}

.step-selected-desktop {
    border-bottom: 2px solid #0042B8;
    color: #0042B8;
}

.step-disabled-desktop {
    border-bottom: 2px solid var(--grey-400);
    color: var(--grey-700);
}



/* --------------------------- */
/* ------SELECT CONTROLS------- */
/* ----------------------------*/

.bullet-success { 
    --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>');
    width: 16px;
    height: 16px;
    -webkit-mask: var(--svg);    
    mask: var(--svg);
    background-color: var(--primary-green);
    display: inline-block;
    vertical-align: middle;
 }

 .bullet-error {
    border-radius: 50%;
    padding: 0.5em;
    position: relative;
    border: 0;
    width: 16px; 
    height: 16px;
    background-color: var(--primary-orange);
    display: inline-block;
    vertical-align: middle;
 }
 
.bullet-error::before {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 7px;
    top: 4px;
    bottom: 4px;
    transform: rotate(45deg);
    background-color: var(--primary-white);
}

.bullet-error::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: var(--primary-white);
    height: 2px;
    top: 7px;
    left: 4px;
    right: 4px;
    transform: rotate(45deg);
}


.ts-form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    vertical-align: top;
    background-color: var(--primary-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1.5px solid var(--primary-blue);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.fakehover{
    border: 1.5px solid var(--blue-dark);
}

.ts-form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.ts-form-check-input[type=radio] {
    border-radius: 50%;
}

.ts-form-check-input:active {
    filter: brightness(90%);
}

.ts-form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ts-form-check-input:checked[type=radio] {
    background-color: var(--primary-white);
    border-color: var(--primary-blue);
}
.ts-form-check-input:checked[type=checkbox] {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}


.ts-form-check-input:hover,
.fakehover, .fakehover:checked,
.fakehover {
    background-color: var(--primary-white);
    border-color: var(--blue-dark);
}

.ts-form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.ts-form-check-input:checked[type=checkbox]:hover, .fakehover:checked[type=checkbox]{
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}


.ts-form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%230042B8'/%3e%3c/svg%3e");
}
.ts-form-check-input:checked[type=radio]:hover, .fakehover:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%230A1F8E'/%3e%3c/svg%3e");
}
.ts-form-check-input:disabled[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%23CED4DA'/%3e%3c/svg%3e");
}

.ts-form-check-input:disabled,
.ts-form-check-input:checked:disabled  {
    pointer-events: none;
    filter: none;
    opacity: 1;
    border-color: var(--grey-400);
}
.ts-form-check-input:disabled[type=checkbox],
.ts-form-check-input:checked:disabled[type=checkbox] {
    background-color: var(--grey-400);
}

.ts-form-check-input[disabled]~.form-check-label,
.ts-form-check-input:disabled~.form-check-label {
    opacity: 0.5;
}

/* toggle (switch)*/
.ts-form-switch .ts-form-check-input {
    width: 42px;
    height: 24px;
    background-color: var(--blue-400);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
    border-color: var(--grey-400);
}
.ts-form-switch .ts-form-check-input:checked,
.ts-form-switch .ts-form-check-input:checked:hover,
.ts-form-switch .fakehover:checked,
.ts-form-switch .fakehover:checked:hover {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.ts-form-switch .ts-form-check-input:checked:hover,
.ts-form-switch .fakehover:checked,
.ts-form-switch .fakehover:checked:hover {
    background-color: var(--blue-dark);
}
.ts-form-switch .ts-form-check-input:disabled,
.ts-form-switch .ts-form-check-input:checked:disabled  {
    pointer-events: none;
    filter: none;
    opacity: 1;
    border-color: var(--grey-400);
}
/* /toggle (switch)*/

/* /input checkbox/radio/toggle (switch) */






/* Cross/Plus/Minus/Arrow */ 
/* CROSS */
button.ts-x-black,
button.ts-x-blue {
    border-radius: 50%;
    padding: 0.5em;
    position: relative;
    border: 0;
    width: 32px; 
    height: 32px;
}
button.ts-x-black { color: var(--grey-200);}
button.ts-x-blue { color: var(--blue-100);}
button.ts-x-lg { width: 40px; height: 40px;}
button.ts-x-sm { width: 24px; height: 24px;}

button.ts-x-black::before,
button.ts-x-blue::before {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 15px;
    top: 8px;
    bottom: 8px;
    transform: rotate(45deg);
}

button.ts-x-black::after,
button.ts-x-blue::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: var(--grey-800);
    height: 2px;
    top: 15px;
    left: 8px;
    right: 8px;
    transform: rotate(45deg);
}
button.ts-x-black::before,
button.ts-x-black::after { background-color: var(--grey-800);}

button.ts-x-blue::before,
button.ts-x-blue::after { background-color: var(--primary-blue);}

button.ts-x-lg::after { top: 19px; left: 10px; right: 10px;}
button.ts-x-sm::after { top: 11px;  left: 6px; right: 6px;}
button.ts-x-lg::before { left: 19px; top: 10px; bottom: 10px;}
button.ts-x-sm::before { left: 11px; top: 6px; bottom: 6px;}
/* /CROSS */

/* PLUS */
button.ts-plus-blue,
button.ts-plus-grey {
    border-radius: 50%;
    padding: 0.5em;
    position: relative;
    border: 0;
    width: 24px; 
    height: 24px;
}
button.ts-plus-blue { background-color: var(--primary-blue);}
button.ts-plus-grey { background-color: var(--grey-400);}
button.ts-plus-lg { width: 34px; height: 34px;}

button.ts-plus-blue::before,
button.ts-plus-grey::before {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 11px;
    top: 6px;
    bottom: 6px;
}

button.ts-plus-blue::after,
button.ts-plus-grey::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: var(--grey-800);
    height: 2px;
    top: 11px;
    left: 6px;
    right: 6px;
}

button.ts-plus-blue::before,
button.ts-plus-blue::after,
button.ts-plus-grey::before,
button.ts-plus-grey::after { background-color: var(--primary-white);}

button.ts-plus-lg::after { top: 16px; left: 8px; right: 8px;}
button.ts-plus-lg::before { left: 16px; top: 8px; bottom: 8px;}
/* /PLUS */



/* MINUS */
button.ts-minus-blue,
button.ts-minus-grey {
    border-radius: 50%;
    padding: 0.5em;
    position: relative;
    border: 0;
    width: 24px; 
    height: 24px;
}
button.ts-minus-blue { background-color: var(--primary-blue);}
button.ts-minus-grey { background-color: var(--grey-400);}
button.ts-minus-lg { width: 34px; height: 34px;}

button.ts-minus-blue::after,
button.ts-minus-grey::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: var(--grey-800);
    height: 2px;
    top: 11px;
    left: 6px;
    right: 6px;
}

button.ts-minus-blue::before,
button.ts-minus-blue::after,
button.ts-minus-grey::before,
button.ts-minus-grey::after { background-color: var(--primary-white);}

button.ts-minus-lg::after { top: 16px; left: 8px; right: 8px;}
button.ts-minus-lg::before { left: 16px; top: 8px; bottom: 8px;}
/* /MINUS */





/* ARROW */
button.ts-arrow-left,
button.ts-arrow-right {
    border-radius: 50%;
    padding: 0.5em;
    position: relative;
    border: 0;
    width: 40px; 
    height: 40px;
    border: 2px solid var(--primary-blue);
}
button.ts-arrow-left,
button.ts-arrow-right { background-color: var(--primary-white);}
button.ts-arrow-left::before {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 16px;
    top: calc(50% - 4px);
    bottom: 10px;
    background-color: var(--primary-blue);
    transform: translateY(-50%) rotate(45deg);
}
button.ts-arrow-left::after {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 16px;
    bottom: calc(50% - 4px);
    top: 10px;
    background-color: var(--primary-blue);
    transform: translateY(50%) rotate(-45deg);
}

button.ts-arrow-right::before {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 16px;
    top: calc(50% - 4px);
    bottom: 10px;
    background-color: var(--primary-blue);
    transform: translateY(-50%) rotate(-45deg);
}
button.ts-arrow-right::after {
    content: " ";
    position: absolute;
    display: block;
    width: 2px;
    left: 16px;
    bottom: calc(50% - 4px);
    top: 10px;
    background-color: var(--primary-blue);
    transform: translateY(50%) rotate(45deg);
}

button.ts-arrow-left:disabled,
button.ts-arrow-left:disabled,
button.ts-arrow-right:disabled,
button.ts-minus-blue:disabled,
button.ts-minus-blue:disabled,
button.ts-arrow-left:disabled::before,
button.ts-arrow-left:disabled::after,
button.ts-arrow-right:disabled::before,
button.ts-minus-blue:disabled::before,
button.ts-minus-blue:disabled::after,
button.ts-arrow-right:disabled::after
button.ts-arrow-left:disabled,
button.ts-arrow-right:disabled,
button.ts-plus-blue:disabled
{
	border: 2px solid var(--grey-400);
}


button.ts-arrow-left:disabled,
button.ts-arrow-left:disabled,
button.ts-arrow-right:disabled,
button.ts-minus-blue:disabled,
button.ts-minus-blue:disabled ,
button.ts-plus-blue:disabled
{

	background-color:  var(--grey-400);
}

button.ts-arrow-left:disabled::before,
button.ts-arrow-left:disabled::after,
button.ts-arrow-right:disabled::before,
button.ts-minus-blue:disabled::before,
button.ts-minus-blue:disabled::after,
button.ts-arrow-right:disabled::after,
button.ts-plus-blue:disabled::after
button.ts-plus-blue:disabled::before
{
	background-color: var(--primary-white);
}


/* LOADER */

.loader {
    background-image: url('/lab-design-system/assets/gifs/loader.gif');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(13, 20, 27, 0.65);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10000;
}

/***************************/
/* ADDED BY FG */
.inline-link p {
    margin: 0;
}
.tf-chevron-right:after {
    content: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16675 1.06738L5.16675 5.06738L1.16675 9.06738' stroke='%230042B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 7px;
    height: 11px;
    display: inline-block;
    color: var(--primary-blue);
    position: absolute;
    right: 20px;
    margin-top: 3px;
}


.tf-full-width {
    width: 100%;
}
img.tf-full-width-image {
    width: 100%;
    z-index: 0;
}


.tf-page-wrapper {
    margin: auto;
}

.tf-card {
    border-radius: 10px;
    margin-bottom: 1.75rem;
    flex: 0 0 auto;
    height: 100%;
}

.tf-card > .card-footer {
    background: transparent;
    border-top: 0px;
    margin: 0;
    padding: 0 2rem .5rem 0;
}
.tf-card-img {
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

@media only screen and (min-width: 576px) {
    .tf-page-wrapper {
        max-width: 1140px;    
    }
    .tf-card {
        width: 360px !important;
        max-width: none;
        margin: 0;
    }
    .tf-card-img {
        height: 318px;
        object-fit: fill;
    }
}

.main {
    margin: 0 auto;
}
div.fixmargin {
    height: 60px;
}
@media only screen and (min-width: 576px) {

    div.fixmargin {
        width: 100%;
        height: 134px;
    }
}
/***************************/