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

1. COLORS
1.1. Colors Primary
1.2. Colors Declination


*/

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







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





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









/* It was like this before */

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


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

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














/* ----Declination Green---- */










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













/* Declination Grey */













/* ----Declination Yellow---- */













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




















/* ----------------- */
/* -----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----- */
/* ---------------- */









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

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


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









/* Secondary buttons */










/* Secondary Small Button */






/* Primary anchor */








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



/* CHECK???????????? */





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



/* .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: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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;
}

.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------ */
/* --------------- ------*/


    



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

    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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;
}

/* 
.input:focus-within {
    border: 1px solid var(--primary-blue)
} */

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









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

    width: 100%;

    /* body/default */

    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    background-color: #FFFFFF;
    padding: 0 .4rem;
    transform: translate(-10px);
   
} */







.border-onclick {
    border: 1px solid var(--primary-blue)

}


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

}




/* ----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: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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: var(--border-radius-default);
    border: 1px solid #FE6100;
} 

.phone-onclick {
    
    border: 1px solid var(--primary-blue);

    /* 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: var(--border-radius-default);
    transition: .3s;


}

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

}

.dropdown-onclick {
    border: 1px solid var(--primary-blue);
wn-b    color: var(--primary-blue);

} */

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

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

.dropdown-text-active {
    color: var(--primary-blue);
} 



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


.dropdown-border-click {
    border: 1px solid var(--primary-blue);
}

/* .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: var(--border-radius-default);

    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: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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: var(--primary-blue);
}

.dropdown-list-checkbox {
    accent-color: var(--primary-blue);
    border-radius: 3px;
    width: 18px;
    height: 18px;
    
    border: 1px solid var(--primary-blue);

}



.dropdown-list-checkbox:checked + .dropdown-list-item {
    font-family: var(--font-body);
    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: var(--primary-blue);
}

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

    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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: var(--primary-blue);
}



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

}


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


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

.tab {

    margin: 0;

    /* Body/default */
    width: 119px;
    height: 30px;
    border: none;
    border-radius: var(--border-radius-button-secondary);
    background-color: #FFFFFF ;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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: var(--primary-blue);
    border-radius: var(--border-radius-button-secondary);
}
.tab-hover, .tab:hover {
    color: var(--blue-700);
    background: var(--blue-200);
    border-radius: var(--border-radius-button-secondary);
  
}

.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: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    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 var(--primary-blue);
    color: var(--primary-blue);
}

.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: radial-gradient(circle, var(--primary-blue) 0%, var(--primary-blue) 40%, transparent 40%, transparent 100%);
}
.ts-form-check-input:checked[type=radio]:hover, .fakehover:checked[type=radio] {
    background-image: radial-gradient(circle, var(--blue-dark) 0%, var(--blue-dark) 40%, transparent 40%, transparent 100%);
}
.ts-form-check-input:disabled[type=radio] {
    background-image: radial-gradient(circle, var(--grey-400) 0%, var(--grey-400) 40%, transparent 40%, transparent 100%);
}

.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-black,
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-black { background-color: var(--primary-black);}
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-black::before,
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-black::after,
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-black::before,
button.ts-plus-black::after,
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;
}

.price-loader {
    background-image: url('/lab-design-system/assets/gifs/price-loader.gif');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

/***************************/
/* ADDED BY FG */
.inline-link p {
    margin: 0;
}


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


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

.tf-card {
    border-radius: var(--border-radius-card);
    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;
    }
}
/***************************/