:root {
    --spacing-4: 0.25rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-96: 6rem;
    --color-white: #fff;
    --color-black: #000;
    --color-primary-5: #241E3D;
    --color-primary-20: #302A47;
    --color-primary-30: #413A5C;
    --color-primary-40: #685B97;
    --color-primary-50: #7466A8;
    --color-primary-55: #7A6DA7;
    --color-primary-60: #8578B2;
    --color-primary-70: #B1A8D3;
    --color-primary-80: #C5BEDE;
    --color-primary-90: #D7D3E8;
    --color-secondary-0: var(--color-black);
    --color-secondary-40: #1A1726;
    --color-secondary-50: #34323D;
    --color-secondary-60: #54535B;
    --color-secondary-70: #86848E;
    --color-secondary-80: #B4B2BB;
    --color-secondary-90: #DAD9DE;
    --color-secondary-95: #EFEEF3;
    --color-tertiary-30: #F5E400;
    --color-tertiary-40: #FFED00;
    --color-tertiary-50: #FFF466;
    --color-tertiary-60: #FFF9A6;
    --color-quaternary-30: #D8CEBC;
    --color-quaternary-40: #F0E6D4;
    --color-quaternary-50: #F4F1EB;
    --font-family-primary: 'COCOGOOSE', sans-serif;
    --font-family-primary-normal: 'Cocogoose Pro', sans-serif;
    --font-family-primary-light: 'Cocogoose Pro Light', sans-serif;
    --font-family-primary-semilight: 'Cocogoose Pro Semilight', sans-serif;
    --font-family-primary-bold: 'Cocogoose Pro Darkmode', sans-serif;
    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-20: 1.25rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-42: 2.625rem;
    --font-size-54: 3.375rem;
    --line-heights-12: 0.75rem;
    --line-heights-14: 0.875rem;
    --line-heights-16: 1rem;
    --line-heights-18: 1.125rem;
    --line-heights-20: 1.25rem;
    --line-heights-24: 1.5rem;
    --line-heights-32: 2rem;
    --line-heights-36: 2.25rem;
    --line-heights-52: 3.250rem;
    --line-heights-64: 4rem;
    --letter-spacing-s: -0.010rem;
    --letter-spacing-l: -0.020rem;
    --link-s: var(--font-size-12);
    --link-l: var(--font-size-14);
    --body-s: var(--font-size-12);
    --body-m: var(--font-size-14);
    --body-l: var(--font-size-16);
    --label-s: var(--font-size-12);
    --label-l: var(--font-size-14);
    --label-xl: var(--font-size-16);
    --label-xxl: var(--font-size-20);
    --heading-6: var(--font-size-16);
    --heading-5: var(--font-size-20);
    --heading-4: var(--font-size-28);
    --heading-3: var(--font-size-32);
    --heading-2: var(--font-size-42);
    --heading-1: var(--font-size-54);
    --font-link-s: var(--font-size-12)/var(--line-heights-12) var(--font-family-primary-light);
    --font-link-l: var(--font-size-14)/var(--line-heights-18) var(--font-family-primary-light);
    --font-body-s-bold: var(--font-size-12)/var(--line-heights-16) var(--font-family-primary-bold);
    --font-body-s-light: var(--font-size-12)/var(--line-heights-16) var(--font-family-primary-light);
    --font-body-m-bold: var(--font-size-14)/var(--line-heights-18) var(--font-family-primary-bold);
    --font-body-m-light: var(--font-size-14)/var(--line-heights-18) var(--font-family-primary-light);
    --font-body-l-bold: var(--font-size-16)/var(--line-heights-24) var(--font-family-primary-bold);
    --font-body-l-light: var(--font-size-16)/var(--line-heights-24) var(--font-family-primary-light);
    --font-label-s-bold: var(--font-size-12)/var(--line-heights-12) var(--font-family-primary-bold);
    --font-label-s-light: var(--font-size-12)/var(--line-heights-12) var(--font-family-primary-light);
    --font-label-l-bold: var(--font-size-14)/var(--line-heights-14) var(--font-family-primary-bold);
    --font-label-l-light: var(--font-size-14)/var(--line-heights-14) var(--font-family-primary-light);
    --font-label-xl-bold: var(--font-size-16)/var(--line-heights-16) var(--font-family-primary-bold);
    --font-label-xl-light: var(--font-size-16)/var(--line-heights-16) var(--font-family-primary-light);
    --font-label-xxl-bold: var(--font-size-20)/var(--line-heights-20) var(--font-family-primary-bold);
    --font-label-xxl-light: var(--font-size-20)/var(--line-heights-20) var(--font-family-primary-light);
    --font-heading-6: var(--font-size-16)/var(--line-heights-20) var(--font-family-primary-semilight);
    --font-heading-5: var(--font-size-20)/var(--line-heights-24) var(--font-family-primary-semilight);
    --font-heading-4: var(--font-size-28)/var(--line-heights-32) var(--font-family-primary-semilight);
    --font-heading-3: var(--font-size-32)/var(--line-heights-36) var(--font-family-primary-semilight);
    --font-heading-2: var(--font-size-42)/var(--line-heights-52) var(--font-family-primary-bold);
    --font-heading-1: var(--font-size-54)/var(--line-heights-64) var(--font-family-primary-bold);
    --border-radius-s: 0.25rem;
    --border-radius-m: 0.5rem;
    --border-radius-l: 0.75rem;
}

@font-face {
    font-family: COCOGOOSE;
    src: url("https://www.sembo.se/media/16073876/cocogoose-pro-text-regular.otf") format("opentype");
}

@font-face {
    font-family: 'Cocogoose Pro Darkmode';
    src: url('../fonts/Cocogoose/CocogoosePro-Darkmode.woff2') format('woff2'),
    url('../fonts/Cocogoose/CocogoosePro-Darkmode.woff') format('woff'),
    url('../fonts/Cocogoose/CocogoosePro-Darkmode.svg#CocogoosePro-Darkmode') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cocogoose Pro Semilight';
    src: url('../fonts/Cocogoose/CocogoosePro-Semilight.woff2') format('woff2'),
    url('../fonts/Cocogoose/CocogoosePro-Semilight.woff') format('woff'),
    url('../fonts/Cocogoose/CocogoosePro-Semilight.svg#CocogoosePro-Semilight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cocogoose Pro Light';
    src: url('../fonts/Cocogoose/CocogoosePro-Light.woff2') format('woff2'),
    url('../fonts/Cocogoose/CocogoosePro-Light.woff') format('woff'),
    url('../fonts/Cocogoose/CocogoosePro-Light.svg#CocogoosePro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cocogoose Pro';
    src: url('../fonts/Cocogoose/CocogoosePro-Regular.woff2') format('woff2'),
    url('../fonts/Cocogoose/CocogoosePro-Regular.woff') format('woff'),
    url('../fonts/Cocogoose/CocogoosePro-Regular.svg#CocogoosePro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/** ====================================
BASE
======================================**/

body, body.responsive-page,
p {
    font: var(--font-body-l-light);
}

a {
    font: var(--font-link-l);
}

h1 {
    font: var(--font-heading-1) !important;
}

h2 {
    font: var(--font-heading-2) !important;
}

h3 {
    font: var(--font-heading-3) !important;
}

h4 {
    font: var(--font-heading-4) !important;
}

h5 {
    font: var(--font-heading-5) !important;
}

h6 {
    font: var(--font-heading-6) !important;
}

body, p, a, h1, h2, h3, h4, h5, h6 {
    color: var(--color-secondary-0);
}

body {
    background: var(--color-white) !important;
}

img {
    border-radius: var(--border-radius-l);
    display: inline-flex;
}

p {
    padding-bottom: 0;
}

.TestMode.DebugMode .stratum-body,
.stratum-body .sembo-2011 {
    background-image: none;
    background-color: none;
}

.TestMode.DebugMode .stratum-body,
.sembo-2011 {
    background-color: #f4f1eb !important;
    padding-bottom: 0;
}

.page-body > .ticker {
    height: 0;
}

.loading-container--content .spinner:before,
.loading-container--content .spinner:after {
    border-top-color: var(--color-primary-40);
    background-image: -webkit-radial-gradient(10% 100%, circle, var(--color-primary-40), var(--color-white)) !important;
}

a:link, a:visited {
    color: var(--color-black);
}

/** ====================================
Header
======================================**/
#brand .logo {
    width: 123px;
    height: 32px;
}

#brand.dtf .logo {
    width: 122px;
    height: 38px;
}

#brand.dtf {
    top: 35px;
}

#brand {
    top: 36px;
}

@media screen and (max-width: 960px) {
    #brand.dtf {
        top: 0;
    }

    #brand {
        top: 0;
    }
}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 959px) {
    #brand {
        width: 36%;
        height: 89%;
        margin-left: var(--spacing-16) !important;
    }
}

#toogleProfile {
    display: none;
}

.login-information{
    background-color: transparent !important;
    border: none !important;
}

@media screen and (max-width: 959px) {
    .login-information{
        background-color: var(--color-primary-40) !important;
    }
}

.premenu a {
    color: var(--color-black) !important;
}

.stratum-header .page-header {
    margin: 0 auto;
    padding: 5px 10px;
    position: relative;
    min-width: 0;
    max-width: 1389px;
}

/** ====================================
Navigation
======================================**/

#primary-navigation a,
#primary-navigation .drop-down li ul li a, #primary-navigation .drop-down li ul li a:link, #primary-navigation .drop-down li ul li a:visited {
    font: var(--font-link-l);
}

.drop-down-label-text,
.premenu a,
.expandable-article-container a:link, a:visited {
    font: var(--font-body-m-bold);
}

/** ====================================
Search area
======================================**/
.flight-page .three-nine .primary {
    background: var(--color-quaternary-40) !important;
}
.flight-page .horizontal-flight-search-engine {
    background: var(--color-quaternary-40) !important;
}
.flight-page .hotel-search-engine .options-group label span,
.flight-page .horizontal-flight-search-engine .search-form .show-hide-advanced-search-toggle,
.flight-page .horizontal-flight-search-engine .search-form fieldset sub {
    color: var(--color-black);
}
input[type='reset'], input[type='submit'], .button {
    background-image: none !important;
}
.search-button {
    background-color: var(--color-primary-40) !important;
    border-radius: var(--border-radius-l) !important;
    color: var(--color-white) !important;
    border: none !important;
}
.search-button:hover {
    background-color: var(--color-primary-30) !important;
}

.horizontal-search-engine .search-form input, .pax-group .pax-text,
.pax-selector select {
    border-radius: var(--border-radius-l) !important;
}

.horizontal-search-engine .searchControlContainer > ul,
.top-content .horizontal-search-engine .searchControlContainer li label {
    background-color: var(--color-quaternary-50) !important;
    color: var(--color-black) !important;
}
.top-content .horizontal-search-engine .searchControlContainer input:checked + label,
.horizontal-search-engine .searchContainer {
    background-color: var(--color-quaternary-40) !important;
}
.search-engine-article-container .horizontal-search-engine .searchControlContainer > ul,
.search-engine-article-container .horizontal-search-engine,
.search-engine-article-container  {
    background-color: var(--color-quaternary-50) !important;
}

.horizontal-search-engine .search-form label > span,
.horizontal-search-engine .pax-group > legend,
.horizontal-search-engine .search-form .show-hide-advanced-search-toggle,
.horizontal-search-engine .search-form-accommodation-ferry .accommodation-destination legend {
    color: var(--color-black) !important;
}
.top-content .horizontal-search-engine .search-form .search-button:hover {
    background-color: var(--color-primary-40) !important;
    -webkit-animation: unset;
}
.article-miscellaneous .location-information-links {
    background-color: var(--color-white) !important;
}
.search-engine-article-container.search-engine-article-container__citypage .horizontal-search-engine,
.horizontal-search-engine .searchContainer {
    max-width: 100%;
    width: 100%;
    padding-bottom: 0;
}
.accommodationSearchContainer {
    padding-bottom: var(--spacing-32);
    margin-top: 0 !important;
}
fieldset label sub {
    color: var(--color-black);
}
.expandable-article-toggler .show-less-button {
    background-color: var(--color-tertiary-30) !important;
    color: var(--color-black);
}

.horizontal-search-engine {
    max-width: none !important;
}

@media screen and (min-width: 961px) {
    .horizontal-search-engine .searchContainer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0;
    }
    .flightSearchContainer .search-form,
    .flightAndAccommodationContainer .search-form,
    .accommodationAndTransportationSearchContainer .search-form,
    .ferrySearchContainer .search-form{
        width: 100%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    body.responsive-2015 .ImageControl {
        margin-top: -2px !important;
    }

    .searchControlContainer ul,
    .horizontal-search-engine .searchControlContainer > ul {
        margin-top: 10px;
    }
}
.breadcrumbs a {
    color: var(--color-black);
}

.search-engine-wide-border,
.hotel-search-engine .search-form-accommodation {
    background: var(--color-quaternary-40);
}

@media screen and (max-width: 960px){
    body.responsive-2015 .hotel-search-engine .searchHeader {
        background-color: var(--color-quaternary-40);
    }

    body.responsive-2015 .hotel-search-engine .search-overview p,
    body.responsive-2015 .hotel-search-engine .search-overview .search-text,
    body.responsive-2015 .hotel-search-engine .search-overview span {
        color: var(--color-black);
    }

    body.responsive-2015 .button,
    body.responsive-page .page-header #primary-navigation.expanded .toggle-mobile-menu-button {
        background-color: var(--color-primary-40);
    }

    body.responsive-2015 .hotel-search-engine.visible #searchText,
    body.responsive-2015 .hotel-search-engine.visible .searchHeader h2 {
        font: var(--font-heading-5) !important;
    }
}

/** ====================================
FILTER AREA
======================================**/
.flight-page .flight-information{
    background-color: var(--color-quaternary-40) !important;
}
.flight-information .control-group .control_indicator {
    background-color: var(--color-primary-40) !important;
}
.vue-slider-component .vue-slider-process {
    background-color: var(--color-primary-40) !important;
}
body.responsive-2015 .search-filter-toggle {
    border-radius: var(--border-radius-l);
    background-color: var(--color-primary-40);
}

@media screen and (max-width: 960px) {
    body.responsive-2015 .clear-all-filters.visible,
    body.responsive-2015 .clear-all-filters.visible .filter-section .search-filter-toggle,
    body.responsive-2015 .clear-filters-link {
        background-color: var(--color-primary-40);
    }
}

/** ====================================
MAIN AREA
======================================**/

.article .image-gallery {
    background-color: var(--color-primary-40) !important;
}
.expandable-article-toggler,
.expandable-article-toggler .show-more-button {
    background-color: var(--color-tertiary-30) !important;
    color: var(--color-black) !important;
}
ul.sub-article-items .sub-article-box .read-more-button {
    background-color: var(--color-primary-40) !important;
    border-radius: var(--border-radius-l);
}
.sub-article-box .button {
    background-color: var(--color-primary-40);
}
.all-hotels li a{
    color: var(--color-black);
}
ul.all-regions {
    background-color: var(--color-white) !important;
}
.all-regions li a {
    background-color: var(--color-tertiary-30);
    color: var(--color-black);
}
.all-regions li ul a {
    background-color: transparent !important;
}

.flight-hotel-search-progress a p {
    color: var(--color-black);
}

.toggle-link {
    color: var(--color-white);
}

#flight .totPriceItinerary,
.flexible-ticket-presentation__totalPriceValue {
    color: var(--color-black);
}

.flight-itinerary-container .itinerary-toggler {
    background-color: var(--color-primary-40);
}

#cheapest-flights-by-type td.price {
    color: var(--color-black);
}

/** ====================================
FORM
======================================**/

input[type='reset'], input[type='submit'], .button {
    font: var(--font-label-xl-bold);
    background-color: var(--color-primary-55);
    border-radius: var(--border-radius-l) !important;
    text-transform: capitalize !important;
    padding: var(--spacing-8);
}

input[type='reset'], input[type='submit'], .button:hover {
    font: var(--font-label-xl-bold);
    border-color: var(--color-primary-50);
    background-color: var(--color-primary-50);
}

.hotel-search-engine .paxText,
.hotel-search-engine input[type=text] {
    border-radius: var(--border-radius-l);
}

input.hotel-result-sort-container__sortItem:checked + label {
    background-color: var(--color-primary-55);
    color: var(--color-white);
}

input.hotel-result-sort-container__sortItem + label {
    color: var(--color-black);
}

@media screen and (max-width: 960px) {
    body.responsive-2015 .hotel-search-engine .search-form-accommodation,
    body.responsive-2015 .hotel-search-engine.visible .searchHeader {
        background-color: var(--color-quaternary-40);
    }

    input[type='button'],
    body.responsive-2015 input[type='button'] {
        font: var(--font-label-xl-bold);
        background-color: var(--color-primary-55);
        border-radius: var(--border-radius-l) !important;
        padding: var(--spacing-16);
    }
}


/** ====================================
SECTIONS
======================================**/

.expandable-article-container a:link, a:visited {
    font: var(--font-link-l);
    color: var(--color-black);
}

.responsive-pusher .responsive-pusher-headline,
ul.all-cities a,
ul.all-cities a:link,
ul.all-cities a:visited,
.tax-and-discount-text a:link,
.tax-and-discount-text a:visited,
.back-to-search-result-text,
.location a {
    color: var(--color-black);
}

ul.all-regions,
ul.all-cities,
ul.sub-article-items {
    background-color: var(--color-white);
}

.hotel-search-page .main {
    background-color: var(--color-quaternary-50);
}

.addon-product-header {
    background-color: var(--color-primary-40);
    border: 0;
    width: 100%;
    border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
}

.flight-product-container {
    width: 99%;
    border: 1px solid var(--color-white);
    border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
}

#flight .addon-product-header .button {
    margin: 2px;
}

.flightSegmentHeader {
    background-color: var(--color-quaternary-40);
    border-radius: var(--border-radius-l);
}

.hotel-search-filters {
    border-radius: var(--border-radius-l);
    margin-bottom: var(--spacing-8);
}

.flightDepartureTime, .luggage-segment .flightDepartureTime {
    color: var(--color-primary-40);
}

.hotel-search .selected-hotel-top .header a,
.sembo-2011 .search-engine-result-item .hotel-information .header .heading {
    vertical-align: baseline;
}

.full-hotel-details-panel {
    background-color: var(--color-quaternary-50);
}

/** ====================================
TEASERS
======================================**/

.sembo-rating .sembo-sun {
    background-image: url(../images/rating-star.svg);
}

.full-hotel-details-panel .sembo-rating .sembo-sun {
    background-image: url(../images/rating-star.svg);
    background-repeat: no-repeat;
    background-size: 23px 23px;
}

.hotel-search-filters .sun-rating-filter-scale .sun-rating-filter-selected {
    background-image: url(../images/rating-star-30.svg);
}

.sembo-rating .sembo-plus {
    background-image: url(../images/rating-star-half.svg);
}

.search-results-grid .sembo-rating .sembo-plus {
    width: 20px;
    height: 17px;
    background-size: 10px 17px;
}

.sub-article-box .read-more-button {
    border-radius: var(--border-radius-l);
}

.sub-article-box .opening-paragraph {
    height: 5rem;
}

ul.sub-article-items li, ul.sub-article-items > li,
.search-engine-result-hotels ul.sub-article-items li {
    height: 27rem;
}

ul.sub-article-items .sub-article-box .sub-article-content {
    height: 13rem;
}

.search-results-grid .search-result.landscape .quick-view-price-container__button a {
    background-color: var(--color-primary-40);
    border-radius: var(--border-radius-l);
    color: var(--color-white);
}

.search-results-grid .from-price {
    color: var(--color-black);
}

.inline-hotel-details .selected-hotel-top {
    min-height: 100%;
}

.price-breakdown-price.total {
    padding: var(--spacing-8) 0;
    color: var(--color-black);
}

.price-breakdown .price-breakdown-price:nth-child(odd),
.price-breakdown .price-breakdown-price:nth-child(even) {
    background-color: transparent;
    border-bottom: 1px solid var(--color-quaternary-40);
}

.price-breakdown .price-breakdown-price:last-child {
    border-bottom: 0;
}

.full-hotel-details-panel .check-in-info {
    background-color: var(--color-primary-40);
    color: var(--color-white);
    padding: var(--spacing-8);

    width: -webkit-fill-available;
}

.full-hotel-details-panel .hotel-stay-header,
#staysTopElement {
    width: 100%;
}

body.responsive-2015 .hotel-stays .Solution {
    border-radius: var(--border-radius-l);
}

.map-calendar-share-container {
    background-color: var(--color-white);
}

.button-text-wrapper {
    border: 1px solid var(--color-primary-40);
    color: var(--color-black);
}

.hotel-details-container .hotel-details-toggler,
.icon-wrapper {
    background-color: var(--color-primary-40);
}

.hotel-information-link {
    color: var(--color-black);
}

@media (max-width: 767px) and (orientation: portrait) {
    .search-results-grid .sembo-rating .sembo-sun {
        background-image: url(../images/rating-star.svg);
    }
}

/** ====================================
ERRORS
======================================**/

body.responsive-2015 .error-panel-text .button {
    padding: var(--spacing-16);
    background-color: var(--color-primary-40);
}

/** ====================================
Footer
======================================**/

#footer-canvas,
.post-footer {
    background: #b1a8d3 !important;
}

#footer {
    background: var(--color-primary-70);
}

div#footer {
    color: var(--color-secondary-0);
}

#footer a, #footer p, .post-footer p {
    color: var(--color-secondary-0);
}

.post-footer .links a, .post-footer p a {
    color: var(--color-secondary-0);
}

.post-footer .links a:hover,
.post-footer a:hover {
    color: var(--color-white);
}

#footer .footer-link-list-container .last-col {
    border: none;
    border-left: 0;
}

#footer .footer-link-list-container .link-list {
    border-left: 0;
}

#footer .footer-link-list-container .first-col {
    border: none;
}

.copyright-text p {
    color: var(--color-primary-60);
}

.responsive-pusher-headline h2 {
    font: var(--font-heading-3) !important;
    color: var(--color-black) !important;
}

@media screen and (min-width: 1200px) {
    #footer .footer-link-list-container .link-list .heading {
        font: var(--font-body-l-bold);
    }
}

#footer .footer-link-list-container .link-list .heading {
    border-bottom: 0;
}