/* creation date: Tue, 04 Nov 2025 14:02:47 GMT
concat references:
https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ftravelski-main.css%3F252010
https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ftravelski-design.css%3F252010
https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ficons.css%3F252010
https%3A%2F%2Fcms.travelfactory.fr%2Ffrontend%2Fassets%2Fstyles%2Fheader.css%3F252010
*/
/*! https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ftravelski-main.css%3F252010 */
/* 
------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('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/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('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/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;
    }
}
/***************************/
/*! https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ftravelski-design.css%3F252010 */
/*
 * Travelski Design System
 *
 * This stylesheet restores the original Travelski colours, fonts and icons
 * that were removed when splitting the monolithic CSS.  Load this file
 * after travelski-main.css when you want the page to appear with
 * Travelski’s authentic look and feel.
 */

/* ------------------------------------------ */
/*  Root variables                            */
/*
 * The palette below matches the original Travelski design.  Colours are
 * defined as CSS custom properties so that they can be referenced by
 * the utility classes that follow.  Fonts are defined via two
 * variables to align with the naming used by yoonly-design.css.
 */
:root {
    /* Primary palette */
    --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 (TravelSki 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;

    /* Declination Yellow (used for highlights) */
    --yellow-50: #fff9e5;
    --yellow-100: #fff2cc;
    --yellow-200: #ffe599;
    --yellow-300: #ffdd66;
    --yellow-400: #ffd133;
    --yellow-500: #ffcc00;
    --yellow-550: #ffbe1d;
    --yellow-600: #e6b800;
    --yellow-700: #cc9900;
    --yellow-800: #b38000;
    --yellow-900: #995c00;
    --yellow-dark: #804000;
    --yellow-encahnced: #ff871d3d;

    /* Font families */
    --font-title: 'Cy';
    --font-body: 'Roboto';

    /* Font weights */
    --font-weight-default: 400;

    /* Border radius */
    --border-radius-default: 8px;
    --border-radius-secondary: 12px;
    --border-radius-button: 81px;
    --border-radius-button-secondary: 44px;
    --border-radius-search-bar: 56px;
    --border-radius-card: 10px;
    --border-radius-card-secondary: 16px;

}

/* ------------------------------------------ */
/*  Colour utilities                          */
/*
 * Utility classes provide quick access to the palette.  Class names
 * mirror those used in the original TravelSki stylesheet.
 */
/* Primary colours */
.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); }

/* Blue declination */
.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); }

/* Green declination */
.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); }

/* Orange declination */
.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); }

/* Grey declination */
.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); }

/* Yellow declination */
.bg-yellow-50   { background-color: var(--yellow-50); }
.text-yellow-50 { color:            var(--yellow-50); }
.bg-yellow-100  { background-color: var(--yellow-100); }
.text-yellow-100{ color:            var(--yellow-100); }
.bg-yellow-200  { background-color: var(--yellow-200); }
.text-yellow-200{ color:            var(--yellow-200); }
.bg-yellow-300  { background-color: var(--yellow-300); }
.text-yellow-300{ color:            var(--yellow-300); }
.bg-yellow-400  { background-color: var(--yellow-400); }
.text-yellow-400{ color:            var(--yellow-400); }
.bg-yellow-500  { background-color: var(--yellow-500); }
.text-yellow-500{ color:            var(--yellow-500); }
.bg-yellow-600  { background-color: var(--yellow-600); }
.text-yellow-600{ color:            var(--yellow-600); }
.bg-yellow-700  { background-color: var(--yellow-700); }
.text-yellow-700{ color:            var(--yellow-700); }
.bg-yellow-800  { background-color: var(--yellow-800); }
.text-yellow-800{ color:            var(--yellow-800); }
.bg-yellow-900  { background-color: var(--yellow-900); }
.text-yellow-900{ color:            var(--yellow-900); }
.bg-yellow-dark { background-color: var(--yellow-dark); }
.text-yellow-dark{ color:           var(--yellow-dark); }

/* ------------------------------------------ */
/*  Typography                                */
/*
 * The original Travelski hierarchy: headlines use the custom “Cy” font
 * while all body copy uses Roboto.  Sizes and weights mirror the
 * definitions in the monolithic stylesheet.
 */
.title-0 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 900;
    font-size: 64px;
    line-height: 76px;
    font-feature-settings: "calt" 0;
}
.title-1 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 44px;
    font-feature-settings: "calt" 0;
}
.title-2 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 36px;
    font-feature-settings: "calt" 0;
}
.title-3 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    font-feature-settings: "calt" 0;
}
.title-4 {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    font-feature-settings: "calt" 0;
}
.price-title {
color: var(--primary-green);
    font-weight: 600 !important;
    font-size: 24px;
    line-height: 30px !important;
}
.heading {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.body-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption,
.caption-fix {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 14px;
    line-height: 18px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.caption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.subcaption-strong {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-default {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: 'pnum' on, 'lnum' on;
}
.buttons-small {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.buttons-large {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 18px;
    line-height: 20px;
}

/* Links */
.link-default {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-decoration-line: underline;
    color: var(--primary-blue);
    font-feature-settings: "calt" 0;
}
.link-small {
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    font-feature-settings: "calt" 0;
    color: var(--primary-blue);
}
.link-default:hover,
.link-small:hover {
    color: var(--blue-dark);
}

/* ------------------------------------------ */
/*  Alert and feedback colours                */
.alert {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-feature-settings: 'pnum' on, 'lnum' on;
    border-radius: var(--border-radius-default);
    padding: 12px;
}
.success {
    color: var(--primary-green);
    background-color: var(--green-100);
}
.error {
    color: var(--primary-orange);
    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: var(--primary-blue);
    background-color: var(--blue-100);
    padding: 12px;
}
.grey {
    color: var(--grey-700);
    background-color: var(--grey-100);
    padding: 12px;
}

/* ------------------------------------------ */
/*  Buttons                                   */
.button-primary {
    border: none;
    border-radius: var(--border-radius-button);
    padding: 15px 20px;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    flex: none;
    order: 0;
    flex-grow: 0;
    text-decoration: none;
}
.primary-normal {
    color: var(--primary-white);
    background-color: var(--primary-blue);
}
.primary-hover {
    color: var(--primary-white);
    background-color: var(--blue-dark);
    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: var(--grey-200);
    box-shadow: none;
    pointer-events: none;
}
.button-primary:hover {
    color: var(--primary-white);
    background-color: var(--blue-dark);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.button-primary:disabled {
    color: var(--grey-500);
    background-color: var(--grey-200);
    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: var(--border-radius-button-secondary);
    padding: 15px 20px;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--font-weight-defaul);
    line-length: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: 'pnum' on, 'lnum' on;
    text-decoration: none;
    background: transparent;
}
.secondary-normal {
    color: var(--primary-blue);
    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: var(--grey-200);
    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: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* Secondary small button */
.button-secondary-small {
    border-radius: var(--border-radius-button-secondary);
    border: 1px solid var(--blue-dark);
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    background: transparent;
    color: var(--primary-blue);
    width: 128px;
    height: 34px;
    white-space: nowrap;
    box-sizing: border-box;
}
.button-secondary-small:hover {
    color: var(--blue-dark);
    border: 1px solid var(--blue-400);
}
.button-secondary-small:active {
    color: var(--blue-dark);
    background-color: var(--blue-500);
    border: 1px solid var(--primary-blue);
}
.button-secondary-small:disabled {
    color: var(--grey-600);
    background-color: var(--grey-200);
    border: 1px solid var(--grey-500);
}

/* ------------------------------------------ */
/*  Outline states                            */
.outline-default {
    border: 1px solid var(--grey-300);
}
.outline-hover {
    border: 1px solid var(--grey-300);
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.1);
}
.outline-selected {
    border: 2px solid var(--primary-blue);
    box-shadow: 0px 0px 0px 4px rgba(0, 66, 184, 0.2);
}

/* ------------------------------------------ */
/*  Form feedback                             */
.subcaption-default { color: var(--grey-500); }
.subcaption-disabled{ color: var(--grey-400); }
.subcaption-error  { color: var(--primary-orange); }
.label-text-default{ color: var(--grey-600); }
.label-text-disabled{ color: var(--grey-300); pointer-events: none; }
.label-active {
    top: -25px;
    font-weight: var(--font-weight-defaul);
    font-size: 12px;
    line-height: 14px;
    background-color: var(--primary-white);
    padding: 0.5rem 0.4rem;
    transform: translate(-10px);
}
.label-active-default{ color: var(--blue-800); }
.label-active-error  { color: var(--primary-orange); }
.text-default { color: var(--grey-600); }
.border-default { border: 1px solid var(--grey-300); }

/* ------------------------------------------ */
/*  Icons                                     */
/*
 * Inline SVGs replicate the chevron icon used throughout the Travelski
 * components.  The stroke colours match the primary blue and its
 * darkest shade for hover.
 */
.tf-chevron-right:after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%230042B8'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
    width: 7px;
    height: 11px;
    display: inline-block;
    color: var(--primary-blue);
    position: absolute;
    right: 20px;
    margin-top: 3px;
}
.tf-chevron-right:hover:after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D'7'%20height%3D'11'%20viewBox%3D'0%200%207%2011'%20fill%3D'none'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.16675%201.06738L5.16675%205.06738L1.16675%209.06738'%20stroke%3D'%230A1F8E'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
}
/*! https%3A%2F%2Fcms.travelfactory.fr%2Flab-design-system%2Fstyles%2Ficons.css%3F252010 */
/* STARS */
.star-icon-full {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/star-full.svg');
    width: 15px; 
    height: 16px;
    background-repeat: no-repeat;

}

.star-icon-half {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/star-half.svg');
    width: 15px; 
    height: 16px;
    background-repeat: no-repeat;

}

/* SKISSIM */
.skissim-icon {
    min-width: 100px;
    background-repeat: no-repeat;
    height:29px;
}

.skissim-icon.classic {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/skissim-classic.svg');
}

.skissim-icon.premium {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/skissim-premium.svg');
}

.skissim-icon.select {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/skissim-select.svg');
}

.skissim-icon.choice {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/skissim-choice.svg');
}

/* SERVICES */
.service-icon {
    width: 20px;
    height: 20px;
}

.service-icon.accommodation {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/accommodation.svg');
}
.service-icon.equipment {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/equipment.svg');
}
.service-icon.skipass {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/skipass.svg');
}
.service-icon.train {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/train.svg');
}
.service-icon.transfer {
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/transfer.svg');
}
/* PLUS */

.plus-icon {
    width: 20px;
    height: 20px;
    background-image: url('https://www.nl.travelski.com/fstrz/r/s/cms.travelfactory.fr/lab-design-system/assets/svg/plus.svg');
    background-repeat: no-repeat;
    background-position: center;
}
/*! https%3A%2F%2Fcms.travelfactory.fr%2Ffrontend%2Fassets%2Fstyles%2Fheader.css%3F252010 */
body {
    /* CHANGE THIS WHEN ADDED THE FOOTER WITH THE HEADER TOGETHER.. CHECK */
    /* overflow: hidden; */
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}


/* TO AVOID HEADER DEPENDENCY TO BOOTSTRAP */
img, svg {vertical-align: middle;}
.tf-mt-0 {margin-top: 0!important}
.tf-m-0 {margin: 0!important}
.tf-mb-1 {margin-bottom: .25rem!important}
.tf-ms-1 {margin-left: .25rem!important}
.tf-pe-1 {padding-right: .25rem!important}


/* BANNER */
#header-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#005F32 ;
    color: #FFFFFF;
    /* position: absolute; */
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 10;
    position: relative;
}

.header-banner-text a:hover {
    color: white !important;
}

.header-banner-text {
    display: flex;
    align-items:center;
}
#header-cross-banner {
    position: absolute;
    right: 20px;
    cursor: pointer;
    /* top: 18px; */
}
.header-cross {
    display: none;
}
.header-banner-text A {
    text-decoration: none;
    color: inherit;
}
/* /BANNER */


/* topbar */

.header-topbar {
    /* position: absolute; */
    top: 50px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--primary-blue);
    z-index: 7777;
}

.header-topbar-sticky{
    position: sticky;
    top: 0;
    width: 100%;
}


.header-topbar-main {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    
}

.travelski-logo {
    width: 169px;
    height: 36px;
}

.header-logo-svg {
    width: 169px;
    height: 36px;
}

#header-hamburger-menu {
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-logo {
    width: 169px;
}
.header-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-customer-main {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.header-customer-icons {
    height: 25px;
}
.header-customer-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.header-customer-wrapper > .header-desktop-customer-info {
    display: flex;
    flex-direction: column;
}

.header-customer-wrapper > .header-desktop-customer-info > span {
    color: #FFFFFF;
}



/* POP UP FOR CUSTOMER CALL */
.header-popup-customer {
    background-color: #FFFFFF;
    position: fixed;
    z-index: 9999;
    top: 0;
    padding: 1rem;
    border-bottom: 1px solid grey;
    display: none;
    height: 300vh;
    /* backdrop-filter: blur(2px); */
    /* filter: none; */
}
.header-popup-customer.header-show-customer-popup {
    display: block;
}
.header-popup-cta {
    margin-top: 2rem;
}
.header-backdrop.active-popup {
    background: rgba(13, 20, 27, 0.76);
    height: 100vh;
    width: 100%;
    backdrop-filter: blur(2px);
    position: fixed;
    z-index: 1000;   
}
.header-popup-title-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}
.header-popup-contact-wrapper {
    display: flex;
    gap: 1rem;
}

.header-popup-contact-wrapper > h4 {
    margin: 0;
}

.header-popup-text  {
    padding-left: .5rem;
    padding-top: .8rem;
}
/* /POP UP FOR CUSTOMER CALL */




.header-desktop-customer-info > * {
    display: none;
}

.header-user-account > button {
    border: 1px solid #9FB6E2;
}

.header-user-account-btn {
    padding: 10px 20px;
    display: none;
}

a.header-user-account-link {
    text-decoration: none;
}

.header-desktop-icon {
    margin-right: .5rem;
}

.header-info-bubble {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    box-shadow: 0px 1px 8px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
    border-radius: 30px;
    left: 0px;
    width: 279px;
    height: 56px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    display: none;
    transition: .3s ;
}

.header-bubble-text {
    color: #000000;
    padding: 10px 25px;
    transition: .3s ;
}



/* ---------------------------------- */
/* --------------NAVBAR------------- */
/* ---------------------------------- */


body { 
    font-family: sans-serif;
  }
  
  #header-sidebar {
    /* border: 1px solid blue; */
    height: 100vh;
    width: 0;
    position: fixed;
    /* top: 110px; */
    left: 0;
    transition: .3s;
    /* overflow-x: hidden; */
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    
    white-space: nowrap;
    background-color: #FFFFFF;
    z-index: 9999;
  }
  
  .header-navbar-main  ul:nth-child(1) {
    margin-top: 1rem;
  }

  #header-sidebar>UL {
    margin: 0;
    padding: 0;
  }
  
  #header-sidebar > ul > li {
    list-style-type: none;
  }
  
  #header-sidebar.header-showSidebar {
    width: 100vw;
    /* width: 97vw; */
    margin: 0 auto;
    padding: 0 15px;
    /* width: 250px; */
  }

  .no-scroll {
    overflow: hidden !important;
    /* height: 100vh;  */
  }
  
  .header-content {
    height: 250px;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s;
    background-color: #ffffff;
    padding: 0;
  
    overflow: hidden;
  }
  
  /* cHANGE THIS LATER */
  /* .dropdown-desktop > li {
    padding: 0 8px 0 32px;
    list-style-type: none;
  } */
/*   
  .content.showSubmenu {
    width: 100vw;
    height: 100vh;
    z-index: 9999;
  } */
  
  .header-back-btn {
    cursor: pointer;
    font-weight: bold;
  }
  


  /* ------------TAKEN FROM THE PREVIOUS---------- */

  .header-link  {
    cursor: pointer;
    position:relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    border-bottom: 1px solid #DEE2E6;
    /* transition: .5s; */
    overflow-x: hidden;
    padding: 0 1rem;
     /* display: block; */
    
}
.header-link:hover{
    color: var(--primary-blue)!important;
}

.header-desktop-dropdown-item {
    position:relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    height: 74px;
    border-bottom: 1px solid #DEE2E6;
    /* transition: .5s; */
    /* overflow-x: hidden; */
    padding-left: 1rem;

}
.header-dropdown-star {
    position: relative;
    top: -2px;
    width: 20px;
    height: 20px;
}

.header-content .link {
    justify-content: flex-start;
    gap: .5rem;
}

.header-list-item {
    list-style-type: none;
    /* transition: .5s ease-in-out; */
    /* padding-left: 1rem; */
   
    /* margin-left:  1rem; */
}

.header-arrow-small-desktop {
    display: none;
}

.header-arrow-back-container {
    margin-top: 2rem;
    margin-bottom: 1rem;
    /* border: 1px solid red; */
}

.header-arrow-back {
    transform: translateY(-3px);
}

.header-black-arrow-svg {
    --svg: url('data:image/svg+xml;utf8,<svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.399772 17.0528C-0.133257 16.459 -0.133257 15.4999 0.399772 14.9061L5.70273 8.99904L0.399772 3.09196C-0.133258 2.49821 -0.133258 1.53907 0.399772 0.945314C0.932801 0.351562 1.79385 0.351562 2.32688 0.945314L8.60023 7.93333C9.13326 8.52708 9.13326 9.48622 8.60023 10.08L2.32688 17.068C1.80752 17.6465 0.932802 17.6465 0.399772 17.0528Z" fill="%230D141B"/></svg>');
    width: 9px;
    height: 18px;
    -webkit-mask: var(--svg);    
    mask: var(--svg);
    background-color: var(--grey-900);
}


.header-black-arrow {
    transform: translateX(-20px);
}
.header-link-blue{
    color: var(--primary-black)!important;
}
svg.header-link-blue  {
    stroke: var(--primary-black)!important;
}

.header-dropdown-desktop {
    height: 250px;
    width: 0;
    position: absolute;
    top:0;
    left: -400px;
    transition: 1.0s;
    overflow: hidden;
    position: absolute;
    background: #FFFFFF;
    z-index: 0;
}


.header-dropdown-desktop > * {
    padding: 0 15px;
}

.header-dropdown-desktop.header-showSubmenu {
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    /* Added at the end. */
    left: 0;
    top: 0;
    flex-direction: column;
    transition: 0.5s;
    padding-left: 0;
  }
  


@media only screen and (min-width: 576px) {

    #header-sidebar ul > li {
        position: relative;
    }
    
    #header-banner {
        height: 36px;
    }
    
    /* #header-cross-banner {
        top: 12px;
    } */

    .header-topbar {
        top: 36px;
    }
    .header-topbar-sticky{
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1030 ;
    }

    .header-logo-svg {
        width: 229px;
        height: 50px;
    }

    .header-navbar-main  ul:nth-child(1) {
        margin-top: 0;
      }


    .header-dropdown-desktop {
        position: absolute;
        padding: 0;
        left: inherit;
        transform: translateY(100%);
        width: fit-content;
        height: fit-content;
        top: unset;
        /* border: 1px solid red; */
        
        display: flex;
        flex-direction: column;
        padding: 4px 0 ;
        bottom: -5px;
        /* top: 80px; */
        /* padding-right: 1.5rem; */
        /* gap: .5rem; */
        
        /* white */
        margin: 0;
        
        background: #FFFFFF;
        border-radius: 8px;
        
        filter: drop-shadow(0px 1px 8px rgba(16, 24, 40, 0.1)) drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
        /* top: 120px; */
        display: none;
        z-index: 100000;
    }

    .header-dropdown-desktop li:nth-child(1) {
        display: none;
    }

    .header-dropdown-star {
        position: relative;
        top: -1px;
        width: 15px;
        height: 14px;
    }

    #header-hamburger-menu {
        display: none;
    }

 
    #header-sidebar{
      
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        top: 100px;
        height:54px ;
        width: 100%;
        box-shadow: 0px 1px 8px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
        position: static;
        background-color:#FFFFFF;


    }

    #header-sidebar.header-showSidebar {
        width: 90vw;
        /* margin: 0 auto; */
        /* width: 250px; */
      }

    /* #sidebar ul {
        display: flex;
    } */

    .header-navbar-main > ul {
        margin: 0;
    }

    .header-list-item {
        /* padding: 15px 0; */
        display: flex;
        justify-content: center;
        height: 100%;
        padding: 0;
    }
    .header-menu-bar {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 0;
    }

    .header-menu-bar > .header-list-item .header-link {
        border: none;
    }

    .header-black-arrow,
    .header-black-arrow-svg {
        display: none;
    }

    .header-link-blue{
        color: var(--primary-blue)!important;
    }
    svg.header-link-blue  {
        stroke: var(--primary-blue)!important;
    }
    

    .header-link {
        height: 50px;
        color: var(--grey-800);
        overflow: visible;
        border: none;
        padding-left: 0;
    }

    .header-logo {
        width: 229px;
        height: 50px;
    }

    .travelski-logo {
        width: 229px;
        height: 50px;
    }


    .header-arrow-small-desktop {
        display: block;
        transform: translateX(5px);
    }

    svg.header-arrow-small-desktop {
        stroke: var(--primary-black); 
    }

    svg.header-arrow-small-desktop:hover {
        stroke: var(--primary-blue)!important;
    }

    .header-desktop-customer-info > * {
        display: flex;
    }
    
    .header-account-icon {
        display: none;
    }

    .header-user-account-btn {
        display: flex;
    }


    .header-customer-service {
        pointer-events: none;
    }


     .header-customer-wrapper:hover > .header-info-bubble, .header-customer-wrapper:hover > .header-info-bubble .header-bubble-text {
        display: flex;
     }



     /* --------Menu dropdown desktop-------- */

/* .header-dropdown-desktop {
    position: absolute;
    padding: 0;
    transform: translateY(58px);
   
    
    display: flex;
    flex-direction: column;
    padding: 4px 0 ;
  
    
    background: #FFFFFF;
    border-radius: 8px;
    
    filter: drop-shadow(0px 1px 8px rgba(16, 24, 40, 0.1)) drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
   
    display: none;
} */
.header-dropdown-desktop > * {
    padding: 0;
}

.header-desktop-dropdown-list {
    list-style-type: none;
    padding: 8px 1.5rem 8px 12px;
    /* padding: 8px 12px; */
}

.header-desktop-dropdown-list:hover {
    background: #EEF2FA;
}

.header-desktop-dropdown-item {
    text-decoration: none;
    color: #000000;
    border: none;
    padding: 0;
    height: fit-content;
}

.header-list-item:hover  {
    color: var(--primary-blue);
    margin-top: 2px;
    border-bottom: 3px solid var(--primary-blue);
}

.header-list-item:hover > .header-link {
    color: var(--primary-blue);
    
}

.header-list-item:hover  .header-link .header-black-arrow-container  .header-arrow-small-desktop {
    fill: var(--primary-blue);
}

.header-link:hover .header-arrow-small-desktop {
    stroke: var(--primary-blue)!important;
}


.header-active-item {
    color: var(--primary-blue);
    margin-top: 2px;
    border-bottom: 3px solid var(--primary-blue);
}

.header-list-item:hover .header-link,
.header-active-item .header-link {
    height: 47px;
}



.header-show-desktop-dropdown {
    display: block;
}






.header-topbar-main {
    
    height: 80px;
    /* width: 1140px; */
    max-width: 1140px;
    margin: 0 auto;
}




    

}

.header-topbar-sticky > #header-banner {
    /* position: absolute; */
    top: -100%;
}

@media (max-width: 768px) {
    #header-sidebar {
        overflow-x: hidden;
    }

    #header-banner {
        justify-content: start;
    }
}

@media (max-width: 575px) {
    .header-user-account-btn.button-primary {
      display: none !important;
    }
  }