@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");

:root {
    /* Site Properties */
    --background-color: #f5f5f5;
    --main-color: #1a2b4e;
    --alternate-color: #1A1B4F;
    --alternate-color-2: #E88223;
    --alternate-color-3: #BE6A1C;
    --main-text-color: #000;
    --soft-text-color: #444;
    --soft-text-color-2: #666;
    --soft-text-color-3: #888;
    --soft-text-color-4: #aaa;
    --column-gap: 10px;
    --main-gap: 20px;
    --section-gap: 40px;
    --main-transition: 0.2s;
    --main-transition-2: 0.3s;
    --box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    --box-shadow-2: 0px 1px 10px rgba(0, 0, 0, 0.3);
    --border-radius: 4px;
    --small-border-radius: 2px;
    --border-color: rgba(0, 0, 0, 0.1);
    --light-border-color: rgba(255, 255, 255, 0.15);
    --transparent-color: rgba(0, 0, 0, 0.04);
    --transparent-color-2: rgba(0, 0, 0, 0.08);
    --light-transparent-color: rgba(255, 255, 255, 0.05);
    --light-transparent-color-2: rgba(255, 255, 255, 0.1);

    /* Font Properties */
    --font-size: 14px;
    --mobile-font-size: 13px;
    --line-height: 1.4em;
    --letter-spacing: 0.4px;
    --font-family: "Poppins", sans-serif;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* Form Elements */
    --input-color: #000;
    --input-padding: 0 10px;
    --input-height: 40px;
    --input-border: solid 1px rgba(0, 0, 0, 0.05);
    --placeholder-color: #888;
    --textarea-padding: 10px;
    --button-color: #E88223;
    --button-hover-color: #BE6A1C;
    --button-text-color: #fff;
    --button-padding: 0 15px;
    --button-height: 40px;
    --button-border: none;
}

body {
    margin: 0;
    padding: 0;
    background: var(--background-color);
    font-family: var(--font-family);
}

html {
    font-size: var(--font-size);
    font-weight: var(--font-regular);
    color: #000;
}

* {
    text-decoration: none !important;
    outline: none !important;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

b,
strong {
    font-weight: var(--font-medium);
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

::placeholder {
    color: var(--placeholder-color);
}

.nice-select {
    clear: unset;
    float: unset;
    position: relative;
}

.nice-select:after {
    content: "\F0140";
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Material Design Icons";
    transition: none !important;
    position: absolute;
    top: 0;
    right: 0;
    transform: none !important;
    padding: var(--input-padding);
    height: 100%;
    border: none;
    margin: 0;
    width: unset;
}

.nice-select.open:after {
    transform: none !important;
}

.nice-select .list {
    margin: 0;
    width: 100%;
    border-radius: 2px;
    border: solid 1px var(--border-color);
    box-shadow: var(--box-shadow);
    transform: none !important;
    transition: unset !important;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    border-radius: var(--border-radius);
}

.nice-select .list.with-search {
    margin-top: 40px;
}

.nice-select .list.with-search {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.nice-select .nice-select-search-box {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: solid 1px var(--border-color);
    box-shadow: var(--box-shadow);
    border-bottom: none;
}

.nice-select .nice-select-search-box input {
    border-radius: var(--small-border-radius);
}

.nselect-wide ~ .nice-select .list,
.nselect-wide ~ .nice-select .nice-select-search-box {
    min-width: 210px;
}

.nselect-wide ~ .nice-select .list > .option {
    white-space: wrap;
}

.nice-select .option {
    padding: 10px;
    min-height: unset;
    white-space: normal;
    font-size: 0.8rem;
    line-height: unset;
    border-bottom: solid 1px var(--border-color);
    transition: var(--main-transition) ease 0s;
}

.nice-select .option.focus,
.nice-select .option.selected.focus,
.nice-select .option:hover {
    background: var(--transparent-color-2);
}

.nice-select .option.selected {
    font-weight: var(--font-medium);
    background: var(--transparent-color-2);
}

.panel-text {
    font-size: 1rem;
    color: var(--soft-text-color);
    margin-bottom: -10px;
    font-weight: var(--font-regular);
}

.panel-text img,
.panel-text iframe,
.panel-text video,
.panel-text table {
    max-width: 100%;
}

.panel-text iframe,
.panel-text table {
    width: 100%;
}

.panel-text h1,
.panel-text h2,
.panel-text h3,
.panel-text h4,
.panel-text h5,
.panel-text h6 {
    display: block;
    margin-bottom: 10px;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.panel-text h1 {
    font-size: 1.6em;
}

.panel-text h2 {
    font-size: 1.5em;
}

.panel-text h3 {
    font-size: 1.4em;
}

.panel-text h4 {
    font-size: 1.3em;
}

.panel-text h5 {
    font-size: 1.2em;
}

.panel-text h6 {
    font-size: 1em;
}

.panel-text p {
    display: block;
    margin-bottom: 10px;
}

.panel-text b {
    font-weight: 600;
}

.panel-text ul {
    list-style: circle;
    display: block;
    padding-left: 20px;
}

.panel-text ul li {
    margin-bottom: 5px;
    position: relative;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    min-width: unset !important;
    margin: 0;
    border-radius: 0;
    border: none;
    background: #fff;
    box-shadow: none;
    padding: 0;
}

.row {
    margin-left: calc(var(--column-gap) * -1);
    margin-right: calc(var(--column-gap) * -1);
}

.row > [class*="col-"],
.container,
.container-fluid {
    padding-left: var(--column-gap);
    padding-right: var(--column-gap);
}

.smt {
    margin-top: var(--section-gap) !important;
}

.smr {
    margin-right: var(--section-gap) !important;
}

.smb {
    margin-bottom: var(--section-gap) !important;
}

.sml {
    margin-left: var(--section-gap) !important;
}

.dmt {
    margin-top: var(--main-gap) !important;
}

.dmr {
    margin-right: var(--main-gap) !important;
}

.dmb {
    margin-bottom: var(--main-gap) !important;
}

.dml {
    margin-left: var(--main-gap) !important;
}

.dmth {
    margin-top: calc(var(--main-gap) / 2) !important;
}

.dmrh {
    margin-right: calc(var(--main-gap) / 2) !important;
}

.dmbh {
    margin-bottom: calc(var(--main-gap) / 2) !important;
}

.dmlh {
    margin-left: calc(var(--main-gap) / 2) !important;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 1012;
    pointer-events: none;
    overflow: hidden;
}

.mobile-nav > .mobile-nav-content {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 99;
}

.mobile-nav > .mobile-nav-content > .mobile-nav-inner {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: calc(100% - var(--section-gap) * 4);
    background: #f5f5f5;
    box-shadow: var(--box-shadow);
    pointer-events: all;
    border-radius: calc(var(--border-radius) * 2) calc(var(--border-radius) * 2)
        0 0;
    overflow: hidden;
}

.mobile-nav > .mobile-nav-content > .mobile-nav-inner > .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    height: 70px;
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 10;
}

.mobile-nav > .mobile-nav-content > .mobile-nav-inner > .top > .title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.mobile-nav > .mobile-nav-content > .mobile-nav-inner > .content {
    display: block;
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 70px);
}

.mobile-nav > .mobile-nav-content > .mobile-nav-inner > .content > .link-part {
    display: block;
    padding: 10px;
    background: #fff;
    border-radius: var(--small-border-radius);
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part:not(:last-child) {
    margin-bottom: 10px;
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: #fff;
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a
    > .left,
.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a
    > .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a
    .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    background: var(--transparent-color);
    color: var(--main-color);
    margin-right: 5px;
    font-size: 1.2rem;
    border-radius: calc(var(--small-border-radius) / 2);
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a
    .title {
    display: block;
    font-size: 1.1rem;
    color: var(--main-text-color);
    font-weight: var(--font-medium);
}

.mobile-nav
    > .mobile-nav-content
    > .mobile-nav-inner
    > .content
    > .link-part
    > a
    .desc {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color) !important;
    text-decoration: underline !important;
}

.nav-close {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--main-text-color) !important;
    font-size: 2rem;
}

.mobile-nav.active {
    pointer-events: all;
}

.mobile-nav.active > .mobile-nav-content > .mobile-nav-inner {
    bottom: 0;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1010;
    pointer-events: none;
    opacity: 0;
}

.mobile-nav-overlay.active {
    opacity: 1;
}

.mobile-menu-links > .item > a {
    position: relative;
    display: block;
    font-size: 1rem;
    color: var(--main-text-color) !important;
    font-weight: var(--font-medium);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: solid 1px var(--border-color);
}

.mobile-menu-links > .item > .inner-menu {
    display: none;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
    background: var(--transparent-color-2);
    margin-top: -10px;
    margin-bottom: 10px;
}

.mobile-menu-links > .item.active > .inner-menu {
    display: flex;
}

.mobile-menu-links > .item > .inner-menu > a {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color) !important;
}

.mobile-menu-links > .item > .inner-menu > a:not(:last-child) {
    margin-bottom: 5px;
}

.mobile-menu-links > .item > a > i {
    position: absolute;
    top: 0;
    right: 0;
}

.mobile-menu-links > .item.active > a > i:before {
    content: "\F0140";
}

.main-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: var(--button-border);
    background: var(--button-color);
    padding: var(--button-padding);
    height: var(--button-height);
    border-radius: var(--small-border-radius);
    overflow: hidden;
    white-space: nowrap;
}

.main-btn[disabled] {
    opacity: 0.5;
}

.main-btn.small {
    height: calc(var(--button-height) / 1.4);
}

.main-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: var(--button-hover-color);
    transition: var(--main-transition) ease 0s;
}

.main-btn:not([disabled]):hover:before {
    left: 0;
}

.main-btn > span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
    color: var(--button-text-color);
    font-weight: var(--font-medium);
    white-space: nowrap;
    transition: var(--main-transition) ease 0s;
}

.main-btn.small > span {
    font-size: 0.8rem;
    text-transform: unset;
}

.main-btn > span > i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    height: 24px;
    font-size: 1.2rem;
    border-radius: var(--small-border-radius);
    background: var(--transparent-color-2);
}

.main-btn.small > span > i {
    font-size: 1rem;
    min-width: 20px;
    height: 20px;
}

.main-btn.no-icon-style > span > i {
    background: none;
    height: unset;
    width: unset;
    min-width: unset;
    border-radius: unset;
    display: block;
}

.main-btn.line {
    background: none;
    border: solid 1px var(--button-color);
}

.main-btn.line > span {
    color: var(--button-color) !important;
}

.main-btn.line:before {
    background: var(--button-color);
}

.main-btn.line:not([disabled]):hover > span {
    color: var(--button-text-color) !important;
}

.main-btn.soft {
    background: none;
    border: solid 1px var(--border-color);
    transition: var(--main-transition) ease 0s;
}

.main-btn.soft > span {
    color: var(--main-text-color) !important;
}

.main-btn.soft:before {
    background: var(--transparent-color);
}

.main-btn.soft:not([disabled]):hover {
    border-color: var(--main-color);
}

.main-btn.soft.p-border {
    border-color: orange;
}

.main-btn.soft.p-border:not([disabled]):hover {
    border-color: darkorange;
}

.main-btn.full-width {
    display: flex;
    width: 100%;
}

.main-btn.full-height {
    height: 100%;
}

.main-btn.no-radius {
    border-radius: 0;
}

.main-nav-top {
    display: block;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1001;
    background: #fff;
    padding: calc(var(--main-gap)/2) 0;
    border-bottom: solid 1px var(--transparent-color);
}

.main-nav {
    display: block;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1010;
    padding: 5px 0;
    background: var(--main-color);
    box-shadow: var(--box-shadow);
}

.main-nav.fixed {
    position: fixed;
}

.site-logo {
    display: block;
}

.site-logo img {
    width: 200px;
}

.main-nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-nav-flex > .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.main-nav-flex > .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.main-nav-flex > .right > .part {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav-button {
    display: block;
    text-align: left;
    padding: 5px 10px;
    background: var(--transparent-color-2);
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
    white-space: nowrap;
}

.nav-button:hover {
    background: var(--transparent-color);
}

.nav-button > span {
    display: block;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.nav-button > span > i {
    margin-right: 2px;
    font-style: normal;
}

.nav-system-button {
    display: block;
    padding: 2px 12px;
    background: transparent;
    border: solid 1px var(--light-border-color);
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
}

.nav-system-button:not(:last-child) {
    margin-right: 5px;
}

.nav-system-button:hover {
    background: var(--light-transparent-color-2);
}

.nav-system-button.alternate {
    background: #fff;
    /* border: solid 1px var(--border-color); */
}

.nav-system-button.alternate:hover {
    background: #eee;
}

.nav-system-button.alternate.active {
    background: var(--alternate-color-2);
}

.nav-system-button.alternate.active > span {
    color: #fff !important;
}

.nav-system-button.colored {
    background: var(--button-color);
    border: solid 1px var(--light-transparent-color-2);
}

.nav-system-button.colored:hover {
    background: var(--button-hover-color);
}

.nav-system-button > span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: #fff !important;
}

.nav-system-button.alternate > span {
    color: var(--main-color) !important;
}

.nav-system-button > span > i {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1.2rem;
    margin-right: 4px;
}

.showcase {
    display: block;
    position: relative;
    padding: calc(var(--section-gap) * 4) 0;
}

.showcase > .showcase-inner {
    position: relative;
    z-index: 20;
}

.showcase > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.showcase:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(28, 48, 42, 0.4) 50%,
        rgba(28, 48, 42, 0.8) 100%
    );
    z-index: 4;
}

.main-search-form-content {
    display: block;
    padding: 20px;
    background: #fff;
    border-radius: calc(var(--border-radius) * 2);
    box-shadow: var(--box-shadow);
}

.main-search-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-top: -5px;
    border-bottom: solid 1px var(--transparent-color-2);
}

.main-search-tabs > a {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    margin: 0 5px;
    padding: 5px 10px;
    border-bottom: solid 2px transparent;
    color: var(--soft-text-color-3);
    font-size: 1rem;
    font-weight: var(--font-medium);
}

.main-search-tabs > a > i {
    margin-right: 5px;
}

.main-search-tabs > a.active {
    border-bottom: solid 2px var(--main-color);
    color: var(--main-color) !important;
}

.main-search-pane:not(.active) {
    display: none;
}

.main-search-form-group > .row {
    margin-left: -2px;
    margin-right: -2px;
    margin-top: -2px;
    margin-bottom: -2px;
}

.main-search-form-group > .row > [class*="col-"] {
    padding: 2px;
}

.showcase-icon {
    display: block;
    font-size: 5rem;
    color: #fff;
    margin-bottom: -20px;
}

.showcase-title {
    display: block;
    font-size: 3rem;
    color: #fff;
    font-weight: var(--font-bold);
    margin-bottom: 20px;
}

.showcase-caption {
    display: block;
    font-size: 1.4rem;
    color: #fff;
    font-weight: var(--font-medium);
    margin-bottom: 20px;
}

.showcase-title ~ .showcase-caption {
    margin-top: -10px;
}

.sform-group {
    display: block;
    width: 100%;
    position: relative;
}

.sform-group > input,
.sform-group > .nselect {
    display: block;
    width: 100%;
    position: relative;
    height: 50px;
    color: var(--input-color);
    font-weight: var(--font-regular);
    padding: 0 10px;
    padding-top: 18px;
    border: none;
    font-size: 1rem;
    border: solid 1px transparent;
    border-radius: var(--border-radius);
    transition: var(--main-transition) ease 0s;
    background: var(--transparent-color);
}

.sform-group > .nselect {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sform-group > input.error-label,
.sform-group > .nselect.error-label {
    border-color: red;
}

.sform-group.icon > input,
.sform-group.icon > .nselect,
.sform-group.icon > label {
    padding-left: 30px;
}

.sform-group.icon > i {
    position: absolute;
    top: 5px;
    left: 0;
    width: 25px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-right: solid 1px var(--border-color);
    color: var(--main-color);
    pointer-events: none;
}

.sform-group > input::placeholder {
    color: var(--soft-text-color);
}

.sform-group > label {
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    padding-left: 10px;
    z-index: 10;
    font-size: 0.9rem;
    color: var(--soft-text-color-2);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.smain-btn {
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius);
}

.smain-btn > span > i {
    background: none;
    width: unset;
    height: unset;
    font-size: 1.6rem;
}

.custom-link-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--box-shadow);
    margin-top: calc(var(--main-gap) / 2);
    margin-bottom: calc(var(--main-gap) / 2);
}

.custom-link-box > .img {
    display: block;
    min-width: 75px;
    width: 75px;
    height: 75px;
    position: relative;
    margin-right: 10px;
}

.custom-link-box > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-link-box > i {
    display: block;
    font-size: 1.6rem;
    min-width: 25px;
    color: var(--soft-text-color);
}

.custom-link-box > .content {
    display: block;
    width: calc(100% - 110px);
}

.custom-link-box > .content > .inner {
    display: block;
    width: 100%;
    overflow: hidden;
}

.custom-link-box > .content > .inner > .title {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.2rem;
    color: var(--main-text-color);
    font-weight: var(--font-medium);
    margin-bottom: 4px;
}

.custom-link-box:hover > .content > .inner > .title {
    text-decoration: underline !important;
}

.custom-link-box > .content > .inner > .caption {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1rem;
    color: var(--soft-text-color);
}

.white-section {
    display: block;
    padding: var(--section-gap) 0;
    background: #fff;
}

.gray-section {
    display: block;
    padding: var(--section-gap) 0;
    background: #eee;
}

.main-title {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
}

.main-title.small {
    font-size: 1.2rem;
}

.main-title.light {
    color: #fff;
}

.main-caption {
    display: block;
    font-size: 1.1rem;
    color: var(--soft-text-color);
    margin: 0;
}

.main-caption.light {
    color: #fff;
}

.main-smal-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color);
    margin: 0;
}

.title-side-img {
    display: block;
    min-width: 50px;
    width: 50px;
    height: 50px;
    position: relative;
}

.title-side-img:not(:last-child) {
    margin-right: 10px;
}

.title-side-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deal-item {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: var(--main-gap);
}

.deal-item > .img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3 / 4 * 100%);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    box-shadow: var(--box-shadow);
}

.deal-item > .img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 30%,
        rgba(28, 48, 42, 0.4) 50%,
        rgba(28, 48, 42, 0.6) 100%
    );
    z-index: 4;
    transition: var(--main-transition-2) ease 0s;
}

.deal-item:hover > .img:before {
    opacity: 0.5;
}

.deal-item > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: var(--main-transition-2) ease 0s;
}

.deal-item:hover > .img > img {
    transform: scale(1.1);
}

.deal-item > .img > .location {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
    color: #fff;
    font-size: 1rem;
}

.deal-item > .img > .location > i {
    display: block;
    margin-right: 2px;
}

.deal-item > .content {
    display: block;
}

.deal-item > .content > .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1.3rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    margin-bottom: 5px;
}

.deal-item:hover > .content > .title {
    text-decoration: underline !important;
}

.deal-item > .content > .line {
    display: block;
    margin-bottom: 5px;
}

.deal-item > .content > .line > .hotel {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    margin-bottom: 5px;
}

.deal-item > .content > .line > .stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.deal-item > .content > .line > .stars > i {
    display: block;
    font-size: 0.9rem;
    color: orange;
}

.deal-item > .content > .line > .stars > i:not(:last-child) {
    margin-right: 2px;
}

.deal-item > .content > .detail {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    color: var(--main-text-color);
    margin-bottom: 0;
}

.deal-item > .content > .price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.deal-item > .content > .price > small {
    display: block;
    font-weight: var(--font-regular);
    font-size: 0.8rem;
    color: var(--soft-text-color-3);
}

.region-item {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 16 * 100%);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--main-gap);
}

.region-item > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 2;
    transition: var(--main-transition-2) ease 0s;
}

.region-item:hover > img {
    transform: scale(1.1);
}

.region-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 4;
    transition: var(--main-transition-2) ease 0s;
    transition: var(--main-transition-2) ease 0s;
}

.region-item:hover:before {
    opacity: 0.5;
}

.region-item > .location {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    color: #fff;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
}

.region-item > .price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    color: #fff;
    font-size: 0.9rem;
    font-weight: var(--font-bold);
    padding: 5px 10px;
    background: var(--main-color);
    border-radius: var(--small-border-radius);
}

.region-item > .price > small {
    display: block;
    font-weight: var(--font-regular);
    font-size: 0.9rem;
}

.region-item > .price > small {
    display: block;
    font-weight: var(--font-regular);
    font-size: 0.9rem;
}

.badge-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: var(--main-gap);
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.badge-item > .img {
    display: block;
    position: relative;
    min-width: 75px;
    width: 75px;
    height: 75px;
    margin-right: 10px;
}

.badge-item > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.badge-item > .content {
    display: block;
    width: calc(100% - 60px);
}

.badge-item > .content > .title {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.2rem;
    color: var(--main-text-color);
    font-weight: var(--font-medium);
    margin-bottom: 4px;
}

.badge-item > .content > .caption {
    display: block;
    font-size: 1rem;
    color: var(--soft-text-color);
}

.blog-item {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: var(--main-gap);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    background: #fff;
}

.blog-item > .img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 16 * 100%);
}

.blog-item > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--main-transition-2) ease 0s;
}

.blog-item > .img:hover > img {
    transform: scale(1.1);
}

.blog-item > .content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
}

.blog-item > .content > .ctg {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color-2) !important;
    margin-bottom: 5px;
}

.blog-item > .content > .ctg:hover {
    text-decoration: underline !important;
}

.blog-item > .content > .title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color) !important;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.blog-item > .content > .title > a {
    color: var(--main-text-color) !important;
}

.blog-item > .content > .title > a:hover {
    text-decoration: underline !important;
}

.blog-item > .content > .tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -5px;
}

.blog-item > .content > .tags > a {
    display: block;
    padding: 2px 8px;
    border: solid 1px var(--border-color);
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
    font-size: 0.8rem;
    color: var(--soft-text-color-2) !important;
    transition: var(--main-transition) ease 0s;
}

.blog-item > .content > .tags > a:hover {
    background: var(--transparent-color);
    color: var(--main-text-color) !important;
}

.blog-item > .content > .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    margin-bottom: 10px;
}

.blog-item > .content > .link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    width: 100%;
}

.blog-item > .content > .link > a {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    color: var(--main-color) !important;
    font-weight: var(--font-medium);
}

.blog-item > .content > .link > a > i {
    display: block;
    margin-left: 2px;
}

.blog-item > .content > .link > a:hover > span {
    text-decoration: underline !important;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    color: var(--main-text-color);
    margin-bottom: 2px;
}

.form-group > span.error-label,
.cbox-group > span.error-label {
    display: block;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: red;
    margin-top: 2px;
}

.form-group {
    display: block;
    width: 100%;
    position: relative;
    margin: 0;
}

.form-group-row {
    margin-left: -2.5px;
    margin-right: -2.5px;
}

.form-group-row > [class*="col-"] {
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.form-group .ctxt {
    display: block;
    text-align: right;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color-3);
}

.form-group > input,
.form-group > textarea,
.form-group > .nice-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: var(--input-height);
    color: var(--input-color);
    padding: var(--input-padding);
    border: none;
    font-size: 0.9rem;
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
    background: var(--transparent-color);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
}

.form-group > input.error-label,
.form-group > textarea.error-label,
.form-group > select.error-label ~ .nice-select {
    border: solid 1px red;
}

.form-group > .nice-select:hover {
    background: var(--transparent-color);
}

.form-group > .nice-select > span {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 15px;
}

.form-group > textarea {
    height: unset;
    padding: var(--textarea-padding);
    resize: none;
}

footer {
    display: block;
    padding: var(--section-gap) 0;
    background: #e5e5e5;
}

.ftr-title {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin-bottom: 10px;
}

.ftr-social {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: calc(var(--main-gap) - 10px);
}

.ftr-social > a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--transparent-color);
    font-size: 1.1rem;
    color: var(--soft-text-color-2) !important;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: var(--main-transition) ease 0s;
}

.ftr-social > a:hover {
    background: var(--transparent-color-2);
    color: var(--main-text-color) !important;
}

.ftr-links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: var(--main-gap);
}

.ftr-links > a {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color) !important;
}

.ftr-links > a:not(:last-child) {
    margin-bottom: 10px;
}

.ftr-links > a:hover {
    text-decoration: underline !important;
}

.ftr-logo {
    display: block;
    margin-bottom: var(--main-gap);
}

.ftr-logo img {
    width: 180px;
}

.ftr-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: var(--main-gap);
    border-top: solid 1px var(--transparent-color-2);
}

.ftr-bottom > .copyright {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color);
    margin-bottom: 10px;
}

.ftr-bottom > .developer {
    display: block;
    margin-bottom: 10px;
}

.ftr-bottom > .developer > img {
    width: 80px;
}

.page-slider-container {
    display: block;
    position: relative;
    width: 100%;
}

.page-slider-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: calc(100% + 20px);
    top: 50%;
    left: -10px;
    transform: translate(0, -50%);
    z-index: 10;
    pointer-events: none;
}

.page-slider-buttons > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    color: #fff;
    background: var(--alternate-color-2);
    border-radius: var(--border-radius);
    pointer-events: all;
    cursor: pointer;
    transition: var(--main-transition) ease 0s;
}

.page-slider-buttons > div:hover {
    background: var(--alternate-color-3);
}

.live-search-content {
    display: block;
    position: relative;
}

.live-search-content > .live-result {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    box-shadow: var(--box-shadow);
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    z-index: 1000;
}

.live-search-content > .live-result > .item {
    display: block;
    cursor: pointer;
}

.live-search-content > .live-result > .item:not(:last-child) {
    margin-bottom: 5px;
}

.live-direction-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    border-radius: var(--small-border-radius);
    border: solid 1px var(--transparent-color);
    background: #fff;
    transition: var(--main-transition) ease 0s;
}

.live-direction-item:hover {
    background: #eee;
}

.live-direction-item > i {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--transparent-color);
    font-size: 1.4rem;
    color: var(--soft-text-color-2);
    min-width: 40px;
    height: 40px;
    border-radius: var(--small-border-radius);
    margin-right: 10px;
    transition: var(--main-transition) ease 0s;
}

.live-direction-item:hover > i {
    background: #fff;
    color: var(--main-color);
}

.live-direction-item > div > .region {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.live-direction-item > div > .country {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-3);
}

.main-custom-links-content {
    display: block;
    padding: 20px 25px;
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
    padding-bottom: 10px;
}

.mcl-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
}

.mcl-box > .mcl-toggle {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    color: var(--main-color) !important;
    margin-bottom: 5px;
}

.mcl-box > .mcl-toggle.active > i:before {
    content: "\F0143";
}

.mcl-box > .mcl-list {
    display: none;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.mcl-box > .mcl-list.active {
    display: flex;
}

.mcl-box > .mcl-list > a {
    display: block;
    font-size: 1rem;
    color: var(--main-color) !important;
}

.mcl-box > .mcl-list > a:not(:last-child) {
    margin-bottom: 2px;
}

.mcl-box > .mcl-list > a:hover {
    text-decoration: underline !important;
}

.daterangepicker {
    font-family: var(--font-family);
    margin: 0;
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    z-index: 1000 !important;
}

.daterangepicker.opensright:before,
.daterangepicker.opensright:after {
    display: none;
    content: none;
}

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    min-width: 40px;
    width: 40px;
    height: 40px;
    font-size: 0.9rem !important;
    border-radius: var(--border-radius);
}

.daterangepicker .calendar-table th > .nice-select {
    display: inline-block;
    width: calc(50% - 12px);
    height: 30px;
    line-height: 30px;
    margin: 0 2px;
}

.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
    padding: 0;
}

.daterangepicker .drp-calendar {
    max-width: unset;
}

.daterangepicker td,
.daterangepicker td.active {
    color: var(--main-text-color) !important;
    background: none;
}

.daterangepicker td.disabled {
    color: var(--soft-text-color-4) !important;
}

.daterangepicker td.available {
    position: relative;
}

.daterangepicker td.available:hover {
    background: none;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.in-range,
.daterangepicker td.in-range:hover {
    background: var(--transparent-color-2);
}

.daterangepicker td.in-range {
    border-radius: 0;
}

.daterangepicker td.start-date {
    border-radius: 100px 0 0 100px;
    background: var(--alternate-color-2) !important;
    color: #fff !important;
}

.daterangepicker td.end-date {
    border-radius: 0 100px 100px 0;
    background: var(--alternate-color-2) !important;
    color: #fff !important;
}

.daterangepicker td.start-date.end-date {
    border-radius: 100px;
}

.daterangepicker td:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 1px rgba(0,0,0,0.4);
    pointer-events: none;
    opacity: 0;
}

.daterangepicker td.available:hover:after {
    opacity: 1;
}

.person-select {
    display: block;
    position: relative;
}
.person-select-toggle {
    cursor: pointer;
}
.person-select-box {
    display: none;
    position: absolute;
    min-width: 300px;
    width: 100%;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: var(--box-shadow);
    z-index: 100;
    border-radius: var(--border-radius);
    padding: 20px;
    border: solid 1px var(--border-color);
}

.person-select-box .row {
    margin-left: -5px;
    margin-right: -5px;
}

.person-select-box .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.person-select-title {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    border-bottom: solid 1px var(--transparent-color-2);
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.person-room-box {
    display: none;
}
.person-room-box.active {
    display: block;
}

.inpage-search-content {
    display: block;
    padding: 5px 0;
    background: #fff;
    border-bottom: solid 1px var(--border-color);
}

.hotel-result-item {
    display: block;
    margin-bottom: var(--main-gap);
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--main-transition) ease 0s;
}

.hotel-result-item:hover {
    box-shadow: var(--box-shadow-2);
}

.hotel-result-item > .row {
    margin: 0;
}

.hotel-result-item > .row > [class*="col-"] {
    padding: 0;
}

.hotel-result-item .hri-img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3.1 / 4 * 100%);
    border-radius: var(--border-radius);
    border: solid 1px rgba(0,0,0,0.1);
}

.hotel-result-item .hri-img > .discount {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    background: orange;
    padding: 5px 10px;
    color: #fff;
    z-index: 10;
    border-radius: var(--small-border-radius);
    font-size: 0.9rem;
    font-weight: var(--font-medium);
}

.hotel-result-item .hri-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--main-transition-2) ease 0s;
}

.hotel-result-item a.hri-img:hover > img {
    transform: scale(1.1);
}

.hotel-result-item .hri-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
    height: 100%;
}

.hotel-result-item .hri-content > .inner {
    width: 100%;
    overflow: hidden;
}

.hotel-result-item .hri-content > .inner > .location {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    color: var(--alternate-color) !important;
}

.hotel-result-item .hri-content > .inner > .title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    font-size: 1.3rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin-bottom: 5px;
}

.hotel-result-item .hri-content > .inner > .title > a {
    color: var(--main-text-color) !important;
}

.hotel-result-item .hri-content > .inner > .title > a:hover {
    text-decoration: underline !important;
}

.hotel-result-item .hri-content > .inner > .rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.hotel-result-item .hri-content > .inner > .rating > .stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hotel-result-item .hri-content > .inner > .rating > .stars > i {
    display: block;
    font-size: 0.9rem;
    color: orange;
}

.hotel-result-item
    .hri-content
    > .inner
    > .rating
    > .stars
    > i:not(:last-child) {
    margin-right: 2px;
}

.hotel-result-item .hri-content > .inner > .rating > .score {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 5px;
    padding-left: 5px;
    border-left: solid 1px var(--border-color);
}

.hotel-result-item .hri-content > .inner > .rating > .score > .number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 20px;
    background: orange;
    border-radius: var(--small-border-radius);
    font-size: 0.8rem;
    color: #fff;
    font-weight: var(--font-medium);
}

.hotel-result-item .hri-content > .inner > .rating > .score > .text {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-2);
    margin-left: 5px;
}

.hotel-result-item .hri-content > .inner > .definition {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-2);
    margin-bottom: 0;
}

.hotel-result-item .hri-content > .inner > .definition > b {
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.hotel-result-item .hri-content > .inner > .board {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: red;
}

.hotel-result-item .hri-content > .inner > .line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8rem;
    color: var(--soft-text-color);
    font-weight: var(--font-medium);
    margin-top: 5px;
    padding-top: 5px;
    border-top: solid 1px var(--border-color);
}

.hotel-result-item .hri-content > .inner > .line > i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    margin-right: 5px;
    min-width: 30px;
    height: 30px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
}

.hotel-result-item .hri-content > .inner > .line > i.n-icon {
    color: red;
}

.hotel-result-item .hri-content > .inner > .line > i.p-icon {
    color: green;
}

.hotel-result-item .hri-content > .inner > .dates {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.hotel-result-item .hri-content > .inner > .dates > i {
    display: block;
    font-size: 1.2rem;
    color: var(--main-color);
    margin-right: 2px;
}

.hotel-result-item .hri-content > .inner > .dates > span {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: var(--main-color);
}

.hotel-result-item .hri-content > .inner > .viewers {
    display: block;
    font-size: 0.8rem;
    color: var(--main-text-color);
}

.hotel-result-item .hri-side {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
    height: 100%;
    padding: 20px;
    border-left: solid 1px var(--border-color);
}

.hotel-result-item .hri-side > .inner > .guests {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-2);
    margin-bottom: 10px;
}

.hotel-result-item .hri-side > .inner > .old-price {
    display: block;
    font-size: 0.9rem;
    color: var(--main-text-color);
    text-decoration: line-through !important;
    margin-bottom: -5px;
}

.hotel-result-item .hri-side > .inner > .price {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.hotel-result-item .hri-side > .inner > .price > small {
    font-size: 0.8rem;
    color: var(--soft-text-color-2);
}

.hotel-result-item .hri-side > .inner > .info {
    display: block;
    font-size: 0.8rem;
    color: var(--main-text-color);
    margin-bottom: 10px;
}

.hotel-result-item .hri-side > .inner > .info > b {
    font-weight: var(--font-bold);
}

.hotel-result-item .hri-mobile-side {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 5px;
}

.hotel-result-item .hri-mobile-side > .inner > .old-price {
    display: block;
    font-size: 0.9rem;
    color: var(--main-text-color);
    text-decoration: line-through !important;
    margin-bottom: -5px;
}

.hotel-result-item .hri-mobile-side > .inner > .price {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.hotel-result-item .hri-mobile-side > .inner > .price > small {
    font-size: 0.8rem;
    color: var(--soft-text-color-2);
}

.show-map-box {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 21 * 100%);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--main-gap);
}

.show-map-box > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.show-map-box > .button {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #fff;
    border: solid 1px var(--border-color);
    padding: 10px 15px;
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
}

.show-map-box > .button > span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: var(--font-medium);
    color: var(--soft-text-color);
    transition: var(--main-transition) ease 0s;
}

.show-map-box:hover > .button {
    border-color: var(--main-color);
}

.show-map-box:hover > .button > span {
    color: var(--main-color);
}

.side-filter-part {
    margin-bottom: var(--main-gap);
}

.sfp-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 1.2rem;
    color: var(--main-text-color);
    margin-bottom: 0;
    cursor: pointer;
    user-select: none !important;
}

.sfp-box {
    display: none;
    padding: 20px;
    background: #fff;
    border-radius: var(--border-radius);
    margin-top: 10px;
}

.side-filter-part.active .sfp-box {
    display: block;
}

.side-filter-part.active .sfp-title > i:before {
    content: "\F0140";
}

.sfp-cbox {
    display: block;
    position: relative;
}

.sfp-cbox:not(:last-child) {
    margin-bottom: 10px;
}

.sfp-cbox.caption:not(:last-child) {
    margin-bottom: 15px;
}

.sfp-cbox > input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.sfp-cbox > label {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    user-select: none !important;
    cursor: pointer;
}

.sfp-cbox > label > .title {
    display: block;
    font-size: 1rem;
    color: var(--main-text-color);
    margin-right: 5px;
}

.sfp-cbox > label > .title > small {
    display: block;
    position: absolute;
    bottom: -5px;
    left: 10px;
    transform: translate(0, 50%);
    font-size: 0.8rem;
    color: var(--soft-text-color-2);
}

.sfp-cbox > label > .stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sfp-cbox > label > .stars > small {
    font-size: 0.8rem;
    color: var(--soft-text-color);
}

.sfp-cbox > label > .stars > i {
    display: block;
    color: orange;
    font-size: 1rem;
}

.sfp-cbox > label > .stars > i:not(:last-child) {
    margin-right: 2px;
}

.sfp-cbox > label > .side {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 4px;
}

.sfp-cbox > label > .side > .count {
    display: block;
    font-size: 1rem;
    color: var(--soft-text-color-3);
    margin-right: 4px;
}

.sfp-cbox > label > .side > .icon {
    display: block;
    min-width: 18px;
    width: 18px;
    height: 18px;
    border: solid 2px var(--border-color);
    border-radius: var(--small-border-radius);
    position: relative;
    transition: var(--main-transition) ease 0s;
}

.sfp-cbox > label:hover > .side > .icon {
    border-color: var(--alternate-color);
}

.sfp-cbox > label > .side > .icon:before {
    content: "\F012C";
    font-family: "Material Design Icons";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 0;
    font-size: 1.2rem;
}

.sfp-cbox > input:checked ~ label > .side > .icon {
    border-color: var(--alternate-color);
    background: var(--alternate-color);
}

.sfp-cbox > input:checked ~ label > .side > .icon:before {
    opacity: 1;
}

.page-title {
    display: block;
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
}

.hotel-page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--main-gap);
}

.hotel-page-top > .left,
.hotel-page-top > .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hotel-page-top .stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 10px;
    padding-right: 10px;
    border-right: solid 1px var(--border-color);
}

.hotel-page-top .stars > i {
    display: block;
    font-size: 1rem;
    color: orange;
}

.hotel-page-top .stars > i:not(:last-child) {
    margin-right: 2px;
}

.hotel-page-top .location {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    color: var(--alternate-color) !important;
}

.hotel-page-top .location > i {
    margin-right: 4px;
}

.hotel-page-top .location:hover > span {
    text-decoration: underline !important;
}

.hotel-page-images {
    display: block;
    position: relative;
}

.hotel-page-images .row {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
    margin-bottom: -5px;
}

.hotel-page-images .row > [class*="col-"] {
    padding: 5px;
}

.hotel-page-images > .rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 15px;
    left: 10px;
    border-radius: var(--small-border-radius);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--box-shadow);
    padding: 10px;
    z-index: 10;
}

.hotel-page-images > .rating > .score {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px 10px;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: #fff;
    background: orange;
    border-radius: var(--small-border-radius);
    margin-right: 5px;
}

.hotel-page-images > .rating > .text {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.hpi-img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3 / 4 * 100%);
    border-radius: var(--border-radius);
    border: solid 1px var(--border-color);
}

.hpi-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--main-transition-2) ease 0s;
}

.hpi-img:hover > img {
    transform: scale(1.1);
    opacity: 0.8;
}

.hpi-img > .card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 48, 42, 0.6);
}

.hpi-img > .card > i {
    display: block;
    font-size: 1.4rem;
    color: #fff;
}

.hpi-img > .card > .title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: #fff;
}

.hpi-img > .card > .count {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-regular);
    color: #fff;
}

.hotel-page-tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hotel-page-tags > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    font-size: 0.9rem;
    color: var(--soft-text-color);
    margin-right: 10px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.hotel-page-tags > span > i {
    margin-right: 4px;
}

.inpage-title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
}

.hotel-page-facilities {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
}

.page-box .hotel-page-facilities {
    columns: 3;
}

.hotel-page-facilities > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.hotel-page-facilities > li > i {
    display: block;
    font-size: 1rem;
    color: var(--main-color);
    margin-right: 4px;
}

.page-box .hotel-page-facilities > li > i {
    font-size: 1.2rem;
}

.hotel-page-facilities > li > span {
    display: block;
    font-size: 1rem;
    color: var(--main-text-color);
}

.hotel-page-facilities > li > span > a {
    color: var(--alternate-color) !important;
}

.hotel-page-facilities > li > span > a:hover {
    text-decoration: underline !important;
}

.hotel-page-book-details {
    display: block;
}

.hotel-page-book-details > .row {
    margin-left: -5px;
    margin-right: -5px;
}

.hotel-page-book-details > .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.hotel-page-book-details .box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 15px;
    background: var(--transparent-color);
    margin-bottom: 10px;
    border-radius: var(--small-border-radius);
}

.hotel-page-book-details .box > .title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.hotel-page-book-details .box > .desc {
    display: block;
    font-size: 1rem;
    color: var(--soft-text-color);
}

.hotel-page-rooms {
    display: block;
    background: #fff;
    border: solid 1px var(--border-color);
    overflow: hidden;
    border-radius: var(--border-radius);
}

.hotel-page-room {
    display: block;
    background: #fff;
}

.hotel-page-room:not(:last-child) {
    border-bottom: solid 1px var(--border-color);
}

.hotel-page-room > .row {
    margin: 0;
}

.hotel-page-room > .row > [class*="col-"] {
    padding: 0;
}

.hpr-side {
    display: block;
    padding: 20px;
    height: 100%;
}

.hpr-side > .img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 21 * 100%);
    border-radius: var(--small-border-radius);
    margin-bottom: 0;
}

.hpr-side > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--main-transition-2) ease 0s;
}

.hpr-side > .img:hover > img {
    transform: scale(1.1);
}

.hpr-side > .img > .img-count {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: var(--small-border-radius);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9rem;
    padding: 4px 8px;
}

.hpr-side > .title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    margin-bottom: 5px;
    text-transform: capitalize;
}

.hpr-side > .room-guests {
    display: block;
    font-size: 0.9rem;
    color: var(--main-text-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--border-color);
}

.hpr-side > .room-guests:last-child {
    border-bottom: none;
}

.hpr-content {
    display: block;
    padding: 20px 0;
    height: 100%;
}

.hpr-content > .inner {
    display: block;
    padding: 0 20px;
    height: 100%;
    border-left: solid 1px var(--border-color);
    border-right: solid 1px var(--border-color);
}

.hpr-content > .inner > .small-title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    margin-bottom: 5px;
}

.hpr-content > .inner > .desc-box {
    display: block;
    margin-bottom: 10px;
}

.hpr-content > .inner > .desc-box > .line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    color: var(--soft-text-color);
}

.hpr-content > .inner > .desc-box > .line > i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    margin-right: 5px;
    min-width: 30px;
    height: 30px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
}

.hpr-content > .inner > .desc-box > .line > i.n-icon {
    color: red;
}
.hpr-content > .inner > .desc-box > .line > i.p-icon {
    color: green;
}

.hpr-side > .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
    height: 100%;
}

.hpr-side > .inner > .top,
.hpr-side > .inner > .bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    width: 100%;
}

.hpr-side > .inner .discount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hpr-side > .inner .discount > .d-price {
    display: block;
    font-size: 1rem;
    color: var(--soft-text-color-3);
    font-weight: var(--font-medium);
    text-decoration: line-through !important;
}

.hpr-side > .inner .discount > .percent {
    display: block;
    padding: 2px 6px;
    background: orange;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: #fff;
    border-radius: var(--small-border-radius);
    margin-left: 5px;
}

.hpr-side > .inner .t-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.hpr-side > .inner .desc {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color);
}

.hpr-side > .inner .nights {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: var(--main-color);
    margin-bottom: 10px;
}

.hpr-side > .inner .nights > i {
    display: block;
    font-size: 1.2rem;
    color: var(--main-color);
    margin-right: 2px;
}

.page-box {
    display: block;
    padding: 20px;
    background: #fff;
    border-radius: var(--border-radius);
}

.page-box.bordered {
    border: solid 1px var(--border-color);
}

.page-box-inner {
    display: block;
    padding: 20px;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
}

.page-box-title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    margin: 0;
}

.page-box-title.small {
    font-size: 1rem;
}

.divider-line {
    display: block;
    width: 100%;
    border-bottom: solid 1px var(--border-color);
}

.sfp-form-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.sfp-form-group > .input-box {
    display: block;
    position: relative;
    width: 100%;
}

.sfp-form-group > .input-box > input {
    display: block;
    width: 100%;
    height: var(--input-height);
    color: var(--input-color);
    padding: var(--input-padding);
    border: solid 2px var(--border-color);
    font-size: 0.9rem;
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
    background: #fff;
}

.sfp-form-group > .input-box > .clear-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: darkred;
    width: calc(var(--input-height) - 10px);
    height: calc(var(--input-height) - 10px);
    font-size: 1.2rem;
    transition: var(--main-transition) ease 0s;
    border-radius: calc(var(--small-border-radius) / 2);
    background: var(--transparent-color);
}

.sfp-form-group > .input-box > .clear-icon:hover {
    background: var(--transparent-color-2);
}

.sfp-form-group > .input-box > .clear-icon ~ input {
    padding-right: calc(var(--input-height));
}

.sfp-form-group > .main-btn {
    min-width: var(--input-height);
    width: var(--input-height);
}

.steps-bar {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: calc(var(--main-gap) + 20px);
}

.steps-bar > .step {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
    position: relative;
}

.steps-bar > .step > .number {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    min-width: 30px;
    height: 30px;
    background: #ddd;
    color: var(--soft-text-color-4);
    font-size: 0.9rem;
    font-weight: var(--font-bold);
    margin-bottom: 10px;
}

.steps-bar > .step > .title {
    display: block;
    position: absolute;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1rem;
    color: var(--soft-text-color-4);
}

.steps-bar > .bar {
    display: block;
    min-width: 200px;
    height: 2px;
    background: #ddd;
    margin: 0 15px;
    margin-top: 14px;
}

.steps-bar > .bar.active {
    background: var(--main-color);
}

.steps-bar > .step.check > .number {
    background: var(--main-color);
    color: #fff;
}

.steps-bar > .step.check > .title {
    color: var(--main-text-color);
}

.steps-bar > .step.active > .number {
    background: var(--main-color);
    color: #fff;
    outline: solid 5px var(--transparent-color-2) !important;
}

.steps-bar > .step.active > .title {
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.checkout-hotel-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkout-hotel-box > .img {
    display: block;
    min-width: 100px;
    width: 100px;
    margin-right: 10px;
}

.checkout-hotel-box > .img > div {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3 / 4 * 100%);
    border-radius: var(--small-border-radius);
}

.checkout-hotel-box > .img > div > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-hotel-box > .content > .rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.checkout-hotel-box > .content > .rating > .stars {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkout-hotel-box > .content > .rating > .stars > i {
    display: block;
    font-size: 0.9rem;
    color: orange;
}

.checkout-hotel-box > .content > .rating > .stars > i:not(:last-child) {
    margin-right: 2px;
}

.checkout-hotel-box > .content > .rating > .score {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 5px;
    padding-left: 5px;
    border-left: solid 1px var(--border-color);
}

.checkout-hotel-box > .content > .rating > .score > .number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 20px;
    background: orange;
    border-radius: var(--small-border-radius);
    font-size: 0.8rem;
    color: #fff;
    font-weight: var(--font-medium);
}

.checkout-hotel-box > .content > .rating > .score > .text {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-2);
    margin-left: 2px;
}

.checkout-hotel-box > .content > .location {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-3);
    margin-bottom: 0;
}

.checkout-hotel-box > .content > .title {
    display: block;
    font-size: 1.2rem;
    color: var(--main-text-color);
    font-weight: var(--font-bold);
    margin-bottom: 5px;
}

.checkout-hotel-desc {
    display: block;
}

.checkout-hotel-desc > .small-title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    margin-bottom: 0px;
}

.checkout-hotel-desc > .desc-box {
    display: block;
}

.checkout-hotel-desc > .desc-box > .line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    color: var(--soft-text-color);
}

.checkout-hotel-desc > .desc-box > .line:not(:last-child) {
    margin-bottom: 5px;
}

.checkout-hotel-desc > .desc-box > .line > i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    margin-right: 5px;
    min-width: 34px;
    height: 34px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    color: var(--main-color);
}

.checkout-hotel-desc > .desc-box > .line > i.n-icon {
    color: red;
}
.checkout-hotel-desc > .desc-box > .line > i.p-icon {
    color: green;
}

.checkout-pricing {
    display: block;
    padding: 10px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
}

.checkout-pricing > .line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.checkout-pricing > .line:not(:last-child) {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: dotted 1px var(--border-color);
}

.checkout-pricing > .line > span {
    display: block;
    font-size: 0.9rem;
    color: var(--main-text-color);
}

.checkout-pricing > .line > span.price {
    font-weight: var(--font-bold);
    text-align: right;
}

.checkout-pricing > .line > span.price > small {
    display: block;
    text-decoration: line-through !important;
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
}

.checkout-total > span {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.checkout-total > span.price {
    display: block;
    font-weight: var(--font-bold);
}

.checkout-hotel-plan {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.checkout-hotel-plan > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    width: 100%;
}

.checkout-hotel-plan > span > i {
    display: block;
    margin-right: 4px;
    color: var(--soft-text-color-4);
    width: 16px;
    text-align: center;
    font-size: 1.1rem;
}

.account-log-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

.account-log-section > img {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.account-log-section > .account-log-section-inner {
    display: block;
    width: 100%;
    position: relative;
    z-index: 10;
    padding: 30px 20px;
}

.account-log-section:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.8) 0,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(28, 48, 42, 0.4) 50%,
        rgba(28, 48, 42, 0.8) 100%
    );
    z-index: 4;
}

.account-log-box {
    display: block;
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 40px;
}

.account-log-box > .logo {
    display: block;
    margin-bottom: var(--main-gap);
    text-align: center;
}

.account-log-box > .logo img {
    width: 200px;
}

.account-log-box > .title {
    display: block;
    font-size: 1.4rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
}

.alb-desc {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color-3);
}

.alb-desc.smaller {
    font-size: 0.8rem;
}

.alb-desc.small {
    font-size: 0.7rem;
}

.alb-desc > a {
    font-weight: var(--font-medium);
    color: var(--main-color) !important;
}

.alb-desc > a:hover {
    text-decoration: underline !important;
}

.cbox-group {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.cbox-group > input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.cbox-group > label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    user-select: none !important;
    cursor: pointer;
}

.cbox-group > label > span.icon {
    display: block;
    min-width: 18px;
    height: 18px;
    background: var(--transparent-color);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    margin-right: 5px;
    position: relative;
    transition: var(--main-transition) ease 0s;
}

.cbox-group > label:hover > span.icon,
.cbox-group > input:checked ~ label > span.icon {
    border-color: var(--main-color);
}

.cbox-group > input.error-label ~ label > span.icon {
    border-color: red;
}

.cbox-group > label > span.icon:before {
    content: "\F012C";
    font-family: "Material Design Icons";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    opacity: 0;
    font-size: 1.2rem;
}

.cbox-group > input:checked ~ label > span.icon:before {
    opacity: 1;
}

.cbox-group > label > span.text {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
}

.cbox-group > label > span.text > a {
    font-weight: var(--font-medium);
    color: var(--main-color) !important;
}

.cbox-group > label > span.text > a:hover {
    text-decoration: underline !important;
}

.account-dropdown {
    display: block;
    position: relative;
}

.account-dropdown > .nav-system-button {
    background: var(--alternate-color-2);
    outline: solid 2px var(--border-color) !important;
    max-width: 200px;
}

.account-dropdown > .nav-system-button > span > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-dropdown > .nav-system-button:hover {
    background: var(--alternate-color-3);
}

.account-dropdown > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: unset !important;
    transform: none !important;
    margin: 0 !important;
    background: #fff;
    border-radius: var(--small-border-radius);
    padding: 10px;
    box-shadow: var(--box-shadow);
    border: solid 1px var(--border-color);
}

.account-dropdown > .dropdown-menu > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
    font-size: 0.9rem;
    background: var(--transparent-color);
    border-radius: calc(var(--small-border-radius) / 2);
    color: var(--soft-text-color) !important;
    transition: var(--main-transition) ease 0s;
}

.account-dropdown > .dropdown-menu > a > i {
    display: block;
    min-width: 14px;
    width: 14px;
    text-align: center;
}

.account-dropdown > .dropdown-menu > a:not(:last-child) {
    margin-bottom: 5px;
}

.account-dropdown > .dropdown-menu > a:hover {
    background: var(--transparent-color-2);
}

.account-side-menu {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
}

.account-side-menu > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 15px;
    background: var(--transparent-color);
    width: 100%;
    border-radius: calc(var(--small-border-radius) / 2);
    transition: var(--main-transition) ease 0s;
}

.account-side-menu > a:not(:last-child) {
    margin-bottom: 5px;
}

.account-side-menu > a > span {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color);
}

.account-side-menu > a > i {
    display: block;
    font-size: 1.3rem;
    color: var(--main-color);
}

.account-side-menu > a:hover {
    background: var(--transparent-color-2);
}

.account-side-menu > a.active {
    background: var(--main-color);
}

.account-side-menu > a.active > * {
    color: #fff;
}

.acc-page-profile-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    background: var(--transparent-color);
    margin-bottom: var(--main-gap);
    border-radius: var(--small-border-radius);
}

.acc-page-profile-box > .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 60px;
    height: 60px;
    border: solid 5px #fff;
    box-shadow: var(--box-shadow);
    border-radius: 50%;
    background: var(--alternate-color);
    margin-right: 10px;
}

.acc-page-profile-box > .icon > i {
    display: block;
    font-size: 2rem;
    color: #fff;
}

.acc-page-profile-box > .content {
    display: block;
    width: 100%;
    overflow: hidden;
}

.acc-page-profile-box > .content > .title {
    display: block;
    font-size: 1rem;
    color: var(--main-text-color);
    font-weight: var(--font-bold);
}

.acc-page-profile-box > .content > .email {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-info-bar {
    display: block;
    padding: 5px;
}

.main-info-bar.danger {
    background: #ff3548;
}
.main-info-bar.success {
    background: #01c851;
}
.main-info-bar.warning {
    background: #ffbb34;
}

.main-info-bar .inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.main-info-bar .inner > i {
    display: block;
    font-size: 1.2rem;
    color: #fff;
    min-width: 16px;
    width: 16px;
    text-align: center;
    margin-right: 5px;
}

.main-info-bar .inner > span {
    display: block;
    font-size: 0.9rem;
    color: #fff;
}

.main-info-bar .inner > span > a {
    color: #fff !important;
    text-decoration: underline !important;
}

.main-info-bar .inner > span > a:hover {
    text-decoration: none !important;
}

.account-reservations-area > .hotel-result-item {
    border-radius: var(--small-border-radius);
}

.account-reservations-area > .hotel-result-item .hri-img {
    border-radius: var(--small-border-radius);
}

.account-reservations-area > .hotel-result-item:hover {
    box-shadow: var(--box-shadow);
}

.account-reservations-area > .hotel-result-item:last-child {
    margin: 0;
}

.account-reservations-area > .hotel-result-item .hri-content > .inner > .title {
    font-size: 1rem;
}

.bcrumb {
    background: #eee;
    border-top: solid 1px var(--transparent-color);
    border-bottom: solid 1px var(--transparent-color);
    padding: 5px 0;
}

.bcrumb .links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.bcrumb .links > a {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color-3);
}

.bcrumb .links > a:hover {
    text-decoration: underline !important;
}

.bcrumb .links > i {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color-3);
}

.bcrumb .links > a:last-child {
    color: var(--main-text-color);
    font-weight: var(--font-medium);
}

.collapsed-text-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.collapsed-text-content.active {
    display: block;
}

.collapsed-text-content > .panel-text {
    margin-bottom: 0;
}

.collapsed-text-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    border-top: solid 1px var(--border-color);
    margin-top: 5px;
    padding-top: 5px;
}

.collapsed-text-toggle > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--main-color) !important;
}

.collapsed-text-toggle > a:hover > span {
    text-decoration: underline !important;
}

.collapsed-text-toggle > a > span:nth-child(2),
.collapsed-text-toggle > a.active > span:nth-child(1) {
    display: none;
}

.collapsed-text-toggle > a.active > span:nth-child(2) {
    display: block;
}

.blog-page-showcase {
    display: block;
    padding: var(--section-gap) 0;
    background: #fff;
    position: relative;
}

.blog-page-showcase > .img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
    background-repeat: repeat;
    background-size: 25vw;
    opacity: 0.1;
}

.blog-page-showcase-inner {
    position: relative;
    display: block;
    z-index: 10;
}

.related-blog-category {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    border-radius: var(--border-radius);
    background: var(--transparent-color);
    border: solid 1px var(--border-color);
    transition: var(--main-transition) ease 0s;
}

.related-blog-category > i {
    display: block;
    font-size: 2rem;
    color: var(--main-color);
    margin-bottom: 5px;
}

.related-blog-category > span {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.related-blog-category:hover {
    background: var(--transparent-color-2);
    border-color: var(--main-color);
}

.related-blogs-section {
    display: block;
    position: relative;
}

.related-blogs-section > .row {
    margin-left: -5px;
    margin-right: -5px;
}

.related-blogs-section > .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.rbs-item {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 16 * 100%);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 10px;
}

.rbs-item.wide {
    padding-top: calc(9 / 32 * 100% - 2.5px);
}

.rbs-item > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 2;
    transition: var(--main-transition-2) ease 0s;
}

.rbs-item:hover > img {
    transform: scale(1.1);
}

.rbs-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 4;
    transition: var(--main-transition-2) ease 0s;
    transition: var(--main-transition-2) ease 0s;
}

.rbs-item:hover:before {
    opacity: 0.5;
}

.rbs-item > .title {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    color: #fff;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    margin: 0;
    width: calc(100% - 40px);
}

.blog-page-info {
    display: block;
    padding-top: 5px;
    background: #fff;
    border-bottom: solid 1px var(--transparent-color);
}

.blog-page-info .items {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.blog-page-info .items > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--soft-text-color);
}

.blog-page-info .items > div > i {
    display: block;
    margin-right: 2px;
    color: var(--main-color);
}

.blog-page-info .items > div > span > a {
    color: var(--main-color) !important;
    text-decoration: underline !important;
}

.blog-page-info .items > div > span > a:hover {
    text-decoration: none !important;
}

.blog-page-tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -5px;
}

.blog-page-tags > a {
    display: block;
    padding: 2px 8px;
    border: solid 1px var(--border-color);
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
    font-size: 0.8rem;
    color: var(--soft-text-color-2) !important;
    transition: var(--main-transition) ease 0s;
}

.blog-page-tags > a:hover {
    background: var(--transparent-color);
    color: var(--main-text-color) !important;
}

.offer-page-img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(100%);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.offer-page-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-side-details {
    display: block;
}

.offer-side-details > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.offer-side-details > div:not(:last-child) {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: dotted 1px var(--border-color);
}

.offer-side-details > div > .title {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    margin-right: 5px;
}

.offer-side-details > div > .desc {
    display: block;
    font-size: 0.9rem;
    color: var(--main-text-color);
    font-weight: var(--font-medium);
}

.offer-side-details > div > .desc > small {
    font-size: 0.8rem;
    color: var(--soft-text-color);
    font-weight: var(--font-regular);
}

.faq-item {
    margin-bottom: calc(var(--main-gap) / 2);
    border-radius: 0;
}

.faq-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px #ddd;
    padding: 15px 20px;
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
}

.faq-item-header:hover {
    background: #f5f5f5;
}

.faq-item-header > .title {
    display: block;
    font-size: 1.1rem;
    margin: 0;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.faq-item-header > i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    background: var(--alternate-color);
    font-size: 1.2rem;
    color: #fff;
    margin-left: 10px;
    border-radius: var(--small-border-radius);
}

.faq-item-header[aria-expanded="true"] {
    border-color: var(--main-color);
}

.faq-item-header[aria-expanded="true"] > i:before {
    content: "\F0143";
}

.faq-item-body p {
    display: block;
    margin: 0;
    padding: 10px 20px;
    font-size: 1rem;
    text-align: justify;
    color: var(--main-text-color);
}

.contact-page-box {
    display: block;
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: var(--border-radius);
    margin-bottom: var(--main-gap);
}

.contact-page-box > .top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    margin-bottom: 10px;
}

.contact-page-box > .top > i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    background: var(--main-color);
    color: #fff;
    outline: solid 2px var(--transparent-color-2) !important;
    border-radius: var(--small-border-radius);
    margin-right: 10px;
}

.contact-page-box > .top > span {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.contact-page-box > .content {
    display: block;
    padding: 10px;
    border-radius: var(--small-border-radius);
    border: solid 1px var(--transparent-color);
}

.contact-page-box > .content > span {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
}

.contact-page-box > .content > span:not(:last-child) {
    margin-bottom: 5px;
}

.contact-page-box > .content > span > a {
    color: var(--main-color) !important;
}

.contact-page-box > .content > span > a:hover {
    text-decoration: underline !important;
}

.modal-content {
    border-radius: var(--border-radius) !important;
}

.page-modal-content {
    padding: 20px;
    background: #fff;
    border-radius: var(--border-radius) !important;
}

.pmc-title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
}

.pmc-close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    min-width: 30px;
    height: 30px;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    color: var(--soft-text-color) !important;
    transition: var(--main-transition) ease 0s;
}

.pmc-close:hover {
    background: var(--transparent-color);
    border-color: var(--transparent-color-2);
    color: var(--main-text-color) !important;
}

.modal-nation-row {
    margin-left: -2.5px;
    margin-right: -2.5px;
}

.modal-nation-row > [class*="col-"] {
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.modal-nation-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color) !important;
    transition: var(--main-transition) ease 0s;
}

.modal-nation-item > i {
    display: block;
    min-width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
}

.modal-nation-item:hover {
    background: var(--transparent-color-2);
}

.modal-currency-row {
    margin-left: -2.5px;
    margin-right: -2.5px;
}

.modal-currency-row > [class*="col-"] {
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.modal-currency-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color) !important;
    transition: var(--main-transition) ease 0s;
}

.modal-currency-item > .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
    border: solid 1px var(--border-color);
    background: var(--light-transparent-color);
    font-size: 1rem;
    font-weight: var(--font-bold);
}

.modal-currency-item:hover {
    background: var(--transparent-color-2);
}

.modal-lang-row {
    margin-left: -2.5px;
    margin-right: -2.5px;
}

.modal-lang-row > [class*="col-"] {
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.modal-lang-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color) !important;
    transition: var(--main-transition) ease 0s;
}

.modal-lang-item > i {
    display: block;
    min-width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
}

.modal-lang-item:hover {
    background: var(--transparent-color-2);
}

.mobile-part {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav-open {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    font-size: 1.4rem;
    color: #fff !important;
    background: var(--main-color);
    border: none;
    border-radius: var(--small-border-radius);
}

.mobile-part-button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    font-size: 1.4rem;
    color: #fff !important;
    background: var(--main-color);
    border: none;
    border-radius: var(--small-border-radius);
}

.mobile-part-button.colored {
    background: var(--alternate-color-2);
    outline: solid 2px var(--light-transparent-color) !important;
}

.mobile-account-title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: solid 1px var(--border-color);
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.loader-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2000;
}

.loader-content,
.loader-content > * {
    user-select: none !important;
}

.loader-content.active {
    transition: var(--main-transition) ease 0s;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.loader-box {
    display: none;
}

.loader-box.active {
    display: block;
}

.loader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.loader-img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 200px;
    width: 300px;
    max-width: 100%;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.loader-img > .img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(100px);
}

.loader-img > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loader-img > .loader-progress {
    height: 2px;
    width: 100%;
    background: #ddd;
    position: relative;
    overflow: hidden;
}
.loader-img > .loader-progress:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--main-color);
    animation-name: loader-progress;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes loader-progress {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.loader-img > .content {
    display: block;
    padding: 20px;
}

.loader-img > .content > .title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.loader-img > .content > .desc {
    display: block;
    font-size: 1rem;
    color: var(--soft-text-color-2);
}

.loader-icon > .icon {
    display: block;
    width: 100px;
    position: relative;
    overflow: hidden;
    padding-top: calc(100px);
}

.loader-icon > .icon > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.msg-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    padding: 5px;
}

.msg-box > i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 32px;
    font-size: 1.4rem;
    background: var(--transparent-color);
    border-radius: calc(var(--small-border-radius) / 2);
    margin-right: 5px;
}

.msg-box > i.info {
    color: #33b5e7;
}

.msg-box > i.danger {
    color: #ff3548;
}

.msg-box > i.success {
    color: #01c851;
}

.msg-box > i.warning {
    color: #ffbb34;
}

.msg-box > span {
    display: block;
    font-size: 1rem;
    color: var(--main-text-color);
}

.msg-box.small > span {
    font-size: 0.9rem;
}

.hotel-rooms-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hotel-rooms-loader > img {
    width: 40px;
}

.search-map-frame {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(720/1280*100%);
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
}

.search-map-frame > * {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    padding: 5px 10px;
    background: #fff;
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    border-radius: var(--border-radius);
}

.list-top-bar > .left,
.list-top-bar > .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.list-top-bar .total-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: var(--main-text-color);
    padding: var(--input-padding);
    height: var(--input-height);
    border-radius: var(--small-border-radius);
    border: solid 1px var(--border-color);
    margin: 5px 0;
}

.list-top-bar .total-text > b {
    margin-left: 5px;
}

.list-top-bar .form-group {
    margin: 5px 0;
    min-width: 180px;
}

.hotel-balloon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hotel-balloon > .img {
    display: block;
    min-width: 100px;
    width: 100px;
    position: relative;
    overflow: hidden;
    padding-top: calc(3/4*100px);
}

.hotel-balloon > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-balloon > .content {
    display: block;
    padding: 10px;
}

.hotel-balloon > .content > span {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-regular);
    color: var(--main-text-color) !important;
}

.hotel-balloon > .content > span:last-child {
    font-weight: var(--font-bold);
    margin-top: 5px;
}

.payment-cbox > label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding);
    border-radius: var(--small-border-radius);
    background: var(--transparent-color);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
}

.payment-cbox > label > .img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.payment-cbox > label > .img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.payment-cbox > label > .text {
    width: 100%;
    text-align: center;
    font-weight: var(--font-medium);
}

.flight-result-item {
    display: block;
    margin-bottom: var(--main-gap);
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--main-transition) ease 0s;
}

.flight-result-item > .top,
.flight-result-item > .bottom {
    position: relative;
}

.flight-result-item > .top > .fri-detail-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 20px;
    font-size: 1.2rem;
    color: #fff !important;
    background: var(--button-color);
    border-radius: var(--small-border-radius);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    transition: var(--main-transition) ease 0s;
}

.flight-result-item > .top > .fri-detail-toggle:hover {
    background: var(--button-hover-color);
}

.flight-result-item:hover {
    box-shadow: var(--box-shadow-2);
}

.flight-result-item > .top > .row {
    margin: 0;
}

.flight-result-item > .top > .row > [class*="col-"] {
    padding: 0;
}

.flight-result-item .fri-img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3.1 / 4 * 100%);
    border-right: solid 1px rgba(0,0,0,0.1);
}

.flight-result-item .fri-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.flight-result-item .fri-desc {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
    height: 100%;
}

.flight-result-item .fri-desc > .title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    margin-bottom: 5px;
    color: var(--main-text-color);
}

.flight-result-item .fri-desc > .title > span {
    color: green;
}

.flight-result-item .fri-desc > .provider {
    display: block;
    background: orange;
    padding: 5px 10px;
    border-radius: var(--small-border-radius);
    font-weight: var(--font-medium);
    color: #fff;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.flight-result-item .fri-desc > .hours {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    white-space: nowrap;
}

.flight-result-item .fri-desc > .date {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color);
    white-space: nowrap;
}

.flight-result-item .fri-route {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    height: 100%;
    border-left: solid 1px var(--border-color);
    border-right: solid 1px var(--border-color);
}

.flight-result-item .fri-route > .time {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--main-color);
}

.flight-result-item .fri-route > .stops {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color-2);
    margin-bottom: 5px;
}

.flight-result-item .fri-route > .stops > b {
    color: green;
}

.flight-result-item .fri-route > .route-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.flight-result-item .fri-route > .route-line > .departure,
.flight-result-item .fri-route > .route-line > .arrival {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    min-width: 100px;
}

.flight-result-item .fri-route > .route-line > .arrival {
    text-align: right;
}

.flight-result-item .fri-route > .route-line > .line {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: var(--soft-text-color-3);
    margin: 0 5px;
    font-size: 1.2rem;
    width: 100%;
}

.flight-result-item .fri-route > .route-line > .line:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    width: 100%;
    border-bottom: dashed 2px var(--border-color);
}

.flight-result-item .fri-side {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
    height: 100%;
}

.flight-result-item .fri-side > .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    width: 100%;
}

.flight-result-item .fri-side > .inner > .right {
    text-align: right;
}

.flight-result-item .fri-side .line {
    display: block;
    font-size: 0.8rem;
    color: var(--soft-text-color-2);
}

.flight-result-item .tooltip-area {
    display: block;
    position: relative;
}

.flight-result-item .tooltip-line {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
    cursor: pointer;
}

.flight-result-item .tooltip-line > i {
    font-size: 1rem;
}

.flight-result-item .tooltip-content {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 5px;
    font-size: 0.8rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -100%);
    transition: var(--main-transition) ease 0s;
    min-width: 150px;
}

.flight-result-item .tooltip-line:hover ~ .tooltip-content {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.flight-result-item .tooltip-content > span {
    display: block;
}

.flight-result-item .tooltip-content > span.tt-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flight-result-item .tooltip-content > span.tt-title > i {
    font-size: 1rem;
}

.flight-result-item .tooltip-content > span.tt-title:not(:first-child) {
    margin-top: 2.5px;
    padding-top: 2.5px;
    border-top: solid 1px rgba(255,255,255,0.5);
}

.flight-result-item .fri-side .price {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
}

.flight-result-item .fri-side .info {
    display: block;
    font-size: 0.8rem;
    color: var(--main-text-color);
}

.flight-radio {
    width: 100%;
}

.flight-radio > label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: var(--input-padding);
    height: var(--input-height);
    border: solid 1px var(--button-color);
    border-radius: var(--small-border-radius);
}

.flight-radio > label > span.icon {
    width: calc(var(--input-height) - 20px);
    height: calc(var(--input-height) - 20px);
}

.flight-radio > label > span.text {
    color: var(--main-color) !important;
    font-weight: var(--font-medium);
}

.flight-list-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
}

.flight-list-loader > img {
    width: 40px;
}

.flight-result-item > .bottom {
    display: block;
    border-top: solid 1px var(--border-color);
}

.flight-result-item .fri-segments {
    display: block;
    padding: 10px;
    padding-bottom: 5px;
}

.flight-result-item .fri-segments > .layover {
    display: block;
    font-size: 0.8rem;
    padding: 5px 10px;
    margin-bottom: 5px;
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    color: var(--soft-text-color-3);
    font-weight: var(--font-medium);
}

.flight-result-item .fri-segments > .item {
    display: block;
    padding: 10px;
    padding-left: 30px;
    background: #fbfbfb;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    position: relative;
    margin-bottom: 5px;
}

.flight-result-item .fri-segments > .item > .arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 15px;
    height: calc(100% - 30px);
    border-left: solid 1px #888;
}

.flight-result-item .fri-segments > .item > .arrow:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 9px;
    height: 9px;
    border-bottom: 1px solid #888;
    border-right: 1px solid #888;
    transform: rotate(45deg);
}

.flight-result-item .fri-segments > .item > .line {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 0.8rem;
    color: var(--soft-text-color);
}

.flight-result-item .fri-segments > .item > .line b {
    color: var(--main-text-color);
}

.flight-result-item .fri-segments > .item > .line:not(:last-child) {
    margin-bottom: 5px;
}

.flight-result-item .fri-segments > .item > .line > .hour,
.flight-result-item .fri-segments > .item > .line > .time {
    display: block;
    min-width: 120px;
    margin-right: 10px;
}

.flight-result-item .fri-offers {
    display: block;
    padding: 10px;
    border-top: solid 1px var(--border-color);
}

.flight-result-item .fri-offers > .item {
    display: block;
    background: #fbfbfb;
    border: solid 1px var(--border-color);
}

.flight-result-item .fri-offers > .item:not(:last-child) {
    margin-bottom: 5px;
}

.flight-result-item .fri-offers > .item > .row {
    margin-left: 0;
    margin-right: 0;
}

.flight-result-item .fri-offers > .item > .row > [class*="col-"] {
    padding: 0;
}

.flight-result-item .fri-offers > .item > .row > [class*="col-"]:not(:last-child) {
    border-right: solid 1px var(--border-color);
}

.flight-result-item .fri-offers > .item .desc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    font-size: 0.8rem;
    color: var(--main-text-color);
    padding: 5px 10px;
}

.flight-result-item .fri-offers > .item .desc.price {
    font-size: 1rem;
}

.flight-result-item .fri-offers .cbox-group {
    height: 100%;
}

.flight-result-item .fri-offers .cbox-group > label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 5px;
    border: solid 1px var(--button-color);
    border-radius: 0px;
}

.flight-result-item .fri-offers .cbox-group > label > span.text {
    color: var(--main-color) !important;
    font-weight: var(--font-medium);
}

.flight-result-item .fri-offers .tooltip-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 5px 10px;
}

.flight-offer-item {
    display: block;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    overflow: hidden;
}

.flight-offer-item > .head {
    display: block;
    padding: 10px 15px;
    border-bottom: solid 1px var(--border-color);
    text-align: center;
}

.flight-offer-item > .head > span {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.flight-offer-item > .content {
    display: block;
    padding: 10px 15px;
    height: 110px;
    overflow-y: auto;
}

.flight-offer-item > .content > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--soft-text-color);
    font-size: 0.9rem;
}

.flight-offer-item > .content > span:not(:last-child) {
    margin-bottom: 5px;
}

.flight-offer-item > .content > span > i {
    display: flex;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--small-border-radius);
    border: solid 1px var(--border-color);
    font-size: 1rem;
    margin-right: 5px;
}

.flight-offer-item > .content > span > i.active {
    border-color: #01c851;
    color: #01c851;
}

.flight-offer-item > .content > span > i.passive {
    border-color: #ff3548;
    color: #ff3548;
}

.flight-offer-item > .bottom {
    display: block;
}

.flight-offer-item > .bottom > .cbox-group > label {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 15px;
    background: #fbfbfb;
    border-top: solid 1px var(--border-color);
}

.flight-offer-item > .bottom > .cbox-group > label > .text {
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.flight-offer-item.active {
    border-color: var(--main-color);
}

.checkout-flight-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkout-flight-box > .img {
    display: block;
    min-width: 90px;
    width: 90px;
    margin-right: 10px;
    background: var(--transparent-color);
    border-radius: var(--small-border-radius);
    padding: 10px;
}

.checkout-flight-box > .img > div {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(1 * 100%);
    border-radius: var(--small-border-radius);
}

.checkout-flight-box > .img > div > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.checkout-flight-box > .content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.checkout-flight-box > .content > .title {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-medium);
    margin-bottom: 5px;
    color: var(--main-text-color);
}

.checkout-flight-box > .content > .title > span {
    color: green;
}

.checkout-flight-box > .content > .provider {
    display: block;
    background: orange;
    padding: 5px 10px;
    border-radius: var(--small-border-radius);
    font-weight: var(--font-medium);
    color: #fff;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.checkout-flight-box > .content > .hours {
    display: block;
    font-size: 0.9rem;
    color: var(--soft-text-color);
    white-space: nowrap;
}

.checkout-flight-box > .content > .date {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    color: var(--soft-text-color);
    white-space: nowrap;
}

.flight-offers-title {
    display: block;
    padding: 5px 10px;
    margin-bottom: var(--main-gap);
    background: var(--main-color);
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    font-size: 1rem;
    color: #fff;
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.flight-direction-title {
    display: block;
    padding: 10px 15px;
    margin-bottom: 0;
    background: var(--main-color);
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-size: 1rem;
    color: #fff;
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.flight-route-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: var(--main-gap);
    background: #fff;
    border: solid 1px var(--main-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 0.9rem;
    color: var(--main-text-color);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.flight-route-bar > .line {
    display: block;
    width: 100%;
    margin: 0 10px;
    border-bottom: dashed 2px var(--border-color);
}

.flight-checkout-segments {
    display: block;
    padding: 0;
    padding-bottom: 5px;
}

.flight-checkout-segments > .layover {
    display: block;
    font-size: 0.8rem;
    padding: 5px 10px;
    margin-bottom: 5px;
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    color: var(--soft-text-color-3);
    font-weight: var(--font-medium);
}

.flight-checkout-segments > .item {
    display: block;
    padding: 10px;
    padding-left: 30px;
    background: #fbfbfb;
    border: solid 1px var(--border-color);
    border-radius: var(--small-border-radius);
    position: relative;
    margin-bottom: 5px;
}

.flight-checkout-segments > .item > .arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 15px;
    height: calc(100% - 30px);
    border-left: solid 1px #888;
}

.flight-checkout-segments > .item > .arrow:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 9px;
    height: 9px;
    border-bottom: 1px solid #888;
    border-right: 1px solid #888;
    transform: rotate(45deg);
}

.flight-checkout-segments > .item > .line {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 0.8rem;
    color: var(--soft-text-color);
}

.flight-checkout-segments > .item > .line b {
    color: var(--main-text-color);
}

.flight-checkout-segments > .item > .line:not(:last-child) {
    margin-bottom: 5px;
}

.flight-checkout-segments > .item > .line > .hour,
.flight-checkout-segments > .item > .line > .time {
    display: block;
    min-width: 120px;
    margin-right: 10px;
}

.flight-checkout-segments > .item > .line > .desc.rules {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.flight-checkout-segments > .item > .line > .desc.rules > .segment-rules-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: var(--font-medium);
    color: var(--main-color) !important;
}

.flight-checkout-segments > .item > .line > .desc.rules > .segment-rules-link:hover {
    text-decoration: underline !important;
}

#f-datelabel > span:last-child {
    display: none;
}

#f-datelabel.multiple > span:last-child {
    display: block;
}

#f-datelabel.multiple > span:first-child {
    display: none;
}

.search-count-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 100px;
    right: 0;
    background: var(--main-color);
    padding: 5px;
    border-radius: 50px 0 0 50px;
    color: #fff;
    z-index: 999;
    font-size: 1rem;
    font-weight: var(--font-medium);
    width: 75px;
}

.search-count-box i {
    font-size: 1.6rem;
    line-height: 0;
}

.account-reservations-area .hotel-result-item .hri-side > .inner > .price {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
}

.cookie-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--main-gap);
    background: #fff;
    z-index: 1000;
    border-top: solid 1px var(--border-color);
    text-align: center;
    box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
}

.cookie-popup .desc {
    display: block;
    font-size: 1rem;
    color: var(--main-text-color);
}

.cookie-popup .desc > a {
    color: var(--main-color) !important;
}

.cookie-popup .desc > a:hover {
    text-decoration: underline !important;
}

.cookie-popup > .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-popup > .bottom > .main-btn {
    margin: 0 5px;
}

.ftr-brands {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.ftr-brands > .item {
    display: block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.ftr-brands > .item img {
    height: 40px;
}

.facility-tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -5px;
}

.facility-tags > a {
    display: block;
    padding: 5px 10px;
    border: solid 1px var(--border-color);
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: calc(var(--small-border-radius) / 2);
    font-size: 0.9rem;
    color: var(--main-text-color) !important;
    transition: var(--main-transition) ease 0s;
    background: #fff;
}

.facility-tags > a:hover {
    background: var(--transparent-color);
    color: var(--main-text-color) !important;
    border-color: var(--main-color);
}

.airline-item {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: var(--main-gap);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    background: #fff;
}

.airline-item > .img {
    display: block;
    position: relative;
    padding: 20px;
    background: #fff;
    border-bottom: solid 1px var(--border-color);
}

.airline-item > .img > .canvas {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(9 / 16 * 100%);
    background: #fff;
    border-radius: var(--small-border-radius);
    transition: var(--main-transition) ease 0s;
}

.airline-item > .img:hover > .canvas {
    transform: scale(1.1);
}

.airline-item > .img > .canvas > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--main-transition-2) ease 0s;
}

.airline-item > .content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
}

.airline-item > .content > .title {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    color: var(--main-text-color) !important;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.airline-item > .content > .title > a {
    color: var(--main-text-color) !important;
}

.airline-item > .content > .title > a:hover {
    text-decoration: underline !important;
}

.notfound-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    padding: var(--section-gap) 0;
}

.notfound-content > .row {
    width: 100%;
}

.notfound-img {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3/4*100%);
}

.notfound-img > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notfound-text {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
}

.notfound-text > .title {
    display: block;
    font-size: 2.6rem;
    font-weight: var(--font-bold);
    color: var(--main-text-color);
    margin: 0;
    width: 100%;
}

.notfound-text > .desc {
    display: block;
    font-size: 1.2rem;
    color: var(--soft-text-color);
    margin: 0;
    width: 100%;
}