@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

:root {
    /*Info*/
    --info-01: #E9F9FF;
    --info-07-main: #119BCF;
    --info-08: #0078A6;
    --info-10: #003D55;
    /*Primary*/
    --primary-10-main: #063E6D;
    /*Accent*/
    --accent-02: #FFD6C1;
    --accent-05-main: #FF8242;
    --accent-08: #993F11;
    --accent-10: #772D07;
    /*Neutral*/
    --neutral-01: #F4F4F4;
    --neutral-03: #CCCCCC;
    --neutral-05: #B7B7B7;
    --neutral-08: #666666;
    --neutral-10-main: #3D3D3D;
    /*Danger*/
    --danger-01: #FFECEE;
    --danger-05-main: #EF4056;
    --danger-08: #89101F;
    /*Success*/
    --success-01: #ECFFF4;
    --success-06-main: #2ECC71;
}

@font-face {
    font-family: Vazirmatn;
    src: url('Fonts/Vazirmatn-VariableFont_wght.ttf');
}

div.tabpanel:host {
    font-variation-settings: unset !important;
}

html {
    overflow-x: hidden;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    height: 100%;
}

body {
    --body-font: Vazirmatn;
    --type-ramp-base-font-size: 16px;
    --type-ramp-base-line-height: normal;
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    background-color: var(--neutral-01);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

a {
    text-decoration: none;
}

.fluent-nav-text {
    width: fit-content !important;
}

.fluent-calendar .day::before {
    border-top-right-radius: 0;
}

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}

.body-content {
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-height: calc(100vh - 120px) !important;
}

.prk-st-info-07-main-color {
    color: var(--info-07-main) !important;
}

.prk-st-info-07-main-bg-color {
    background-color: var(--info-07-main) !important;
}

.prk-st-primary-10-main-color {
    color: var(--primary-10-main) !important;
}

.prk-st-accent-08-color {
    color: var(--accent-08) !important;
}

.prk-st-neutral-01-color {
    color: var(--neutral-01) !important;
}

.prk-st-neutral-01-bg-color {
    background-color: var(--neutral-01) !important;
}

.prk-st-neutral-08-color {
    color: var(--neutral-08) !important;
}

.prk-st-danger-05-main-color {
    color: var(--danger-05-main) !important;
}

.prk-st-danger-05-main-bg-color {
    background-color: var(--danger-05-main) !important;
}

.prk-st-danger-08-color {
    color: var(--danger-08) !important;
}

.prk-st-danger-01-bg-color {
    background-color: var(--danger-01) !important;
}

.prk-st-success-01-bg-color {
    background-color: var(--success-01) !important;
}

.prk-st-success-07-main-color {
    color: var(--info-07-main) !important;
}


/* Display Headers */
.prk-st-display-header-1 {
    font-size: 3.5rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-display-header-2 {
    font-size: 3rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-display-header-3 {
    font-size: 2.5rem;
    line-height: normal;
    font-weight: bold;
}

/* Headers */

.prk-st-header-1 {
    margin: 0;
    font-size: 1.6rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-header-2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-header-3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-header-4 {
    margin: 0;
    font-size: 1.2rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-header-5 {
    margin: 0;
    font-size: 1.1rem;
    line-height: normal;
    font-weight: bold;
}

.prk-st-header-6 {
    margin: 0;
    font-size: 1rem;
    line-height: normal;
    font-weight: bold;
}

/*Font Color */
.prk-st-font-color-blue {
    color: var(--info-07-main);
}

.prk-st-font-color-red {
    color: var(--danger-05-main);
}
/* Paragraphs */

.prk-st-paragraph-1 {
    font-size: 1.2rem;
    line-height: normal;
    font-weight: normal;
}

.prk-st-paragraph-2 {
    font-size: 1.1rem;
    line-height: normal;
    font-weight: normal;
}

.prk-st-paragraph-3 {
    font-size: 0.9rem;
    line-height: normal;
    font-weight: normal;
}

/* Captions */
.prk-st-captions-1 {
    font-size: 0.8rem !important;
    line-height: normal !important;
    font-weight: normal !important;
}

.prk-st-captions-2 {
    font-size: 0.8rem !important;
    line-height: normal !important;
    font-weight: lighter !important;
}

/* Paddings And Gaps */

.prk-st-gap-40 {
    gap: 40px;
}

.prk-st-padding-4 {
    padding: 4px;
}

.prk-st-padding-8 {
    padding: 8px;
}

.prk-st-padding-16 {
    padding: 16px;
}

.prk-st-padding-bottom-4 {
    padding-bottom: 4px;
}

.prk-st-padding-bottom-8 {
    padding-bottom: 8px;
}

.prk-st-padding-bottom-16 {
    padding-bottom: 16px;
}

.prk-st-round {
    border-radius: 100% !important;
}

.prk-st-responsive-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Justifys */
.prk-st-vertical-start {
    display: flex;
    align-items: self-start;
}

.prk-st-vertical-center {
    display: flex;
    align-items: center;
}

.prk-st-vertical-end {
    display: flex;
    align-items: self-end;
}

.prk-st-horizontal-start {
    display: flex;
    justify-content: start;
}

.prk-st-horizontal-center {
    display: flex;
    justify-content: center;
}

.prk-st-horizontal-end {
    display: flex;
    justify-content: end;
}

.prk-st-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Borders */
.prk-st-border {
    border: 1px solid var(--neutral-03);
}

.prk-st-border-top {
    border-top: 1px solid var(--neutral-03);
}

.prk-st-border-bottom {
    border-bottom: 1px solid var(--neutral-03);
}

.prk-st-border-right {
    border-right: 1px solid var(--neutral-03);
}

.prk-st-border-left {
    border-left: 1px solid var(--neutral-03);
}

.prk-st-border-bottom-dashed {
    border-bottom: 1px dashed var(--neutral-03);
}

.prk-st-border-dashed {
    border: 1px dashed var(--neutral-03);
}

.prk-st-border-right-dashed {
    border-right: 1px dashed var(--neutral-03);
}

.prk-st-radius-16 {
    border-radius: 16px;
}

.prk-st-radius-8 {
    border-radius: 8px;
}

.prk-st-radius-4 {
    border-radius: 4px;
}

.prk-st-radius-2 {
    border-radius: 2px;
}


/* Common */
.prk-st-avtive-link {
    border-bottom: 2px solid var(--accent-05-main);
    color: var(--accent-05-main)
}

.prk-st-text-decoration {
    text-decoration: line-through;
    text-decoration-color: var(--danger-05-main);
}

.prk-st-rooms-divider {
    width: 100%;
    color: var(--neutral-05);
}

.prk-st-filter {
    background-color: white;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 8px 24px 0px;
}

.prk-st-crossed {
    color: var(--danger-05-main);
    text-decoration: line-through;
}

.prk-st-range-picker input.control {
    cursor: pointer !important;
}

.mapp-container .item-set {
    display: none !important;
}

.prk-st-slider-container {
    width: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.prk-st-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.prk-st-slide {
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.prk-st-slide.prk-st-slider-active {
    opacity: 1;
    position: relative;
}

.prk-st-slide img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--neutral-03);
}

.navigation-arrows {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:100;
}

.prk-st-navigation-dots {
    text-align: center;
    position: absolute;
    bottom: 8px;
    width: 100%;
}

    .prk-st-navigation-dots .prk-st-dot {
        height: 12px;
        width: 12px;
        margin: 0 6px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .prk-st-navigation-dots .prk-st-dot.prk-st-slider-active {
            background-color: #555;
        }

.prk-st-cursor {
    cursor: pointer;
}
/* Layout */
.prk-st-header {
    background-color: white !important;
    border-bottom: 1px solid var(--neutral-03);
    height: 80px;
    padding: 8px 0;
}

.prk-st-card-with-shadow {
    background-color: white;
    border-radius: 16px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 8px 24px 0px;
}

    .prk-st-card-with-shadow .prk-st-card {
        border-radius: 8px;
    }

        .prk-st-card-with-shadow .prk-st-card .prk-st-card {
            border-radius: 4px;
        }

            .prk-st-card-with-shadow .prk-st-card .prk-st-card .prk-st-card {
                border-radius: 2px;
            }

.prk-st-card {
    background-color: white;
    border: 1px solid var(--neutral-03);
    border-radius: 16px;
}

    .prk-st-card .prk-st-card {
        border-radius: 8px;
    }

        .prk-st-card .prk-st-card .prk-st-card {
            border-radius: 4px;
        }

            .prk-st-card .prk-st-card .prk-st-card .prk-st-card {
                border-radius: 2px;
            }

.prk-st-footer {
    background-color: white;
    border-top: 1px solid var(--neutral-03);
}

    .prk-st-footer .prk-st-header-2 {
        color: var(--primary-10-main);
    }

.prk-st-text-center {
    text-align: center;
}

.prk-st-first-footer {
    padding: 80px 32px !important;
}

.prk-st-second-footer {
    background-color: var(--info-07-main);
    color: var(--neutral-01);
}

    .prk-st-second-footer a {
        color: var(--neutral-01);
    }

    .prk-st-second-footer .prk-st-avtive-link {
        border: none;
        color: var(--neutral-01)
    }

/* Online Reservation - Common */

.prk-st-cover {
    background-color: rgba(0, 0, 0, 50%);
    width: calc(100% - 16px);
    height: calc(100% - 24px);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    margin: 8px;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    color: var(--neutral-01);
}

.prk-st-carousel-container {
    width: 100%;
    overflow: hidden;
}

.prk-st-carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.prk-st-button {
    background-color: var(--info-07-main);
    color: var(--neutral-01);
    border-radius: 4px;
    padding: 4px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: .3s;
}

    .prk-st-button:hover {
        background-color: var(--info-08);
        color: var(--neutral-01);
    }

    .prk-st-button svg {
        fill: var(--neutral-01) !important;
    }

.prk-st-outline-button {
    color: var(--neutral-10-main);
    border: 1px solid var(--neutral-03);
    border-radius: 4px;
    padding: 4px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: .3s;
}

    .prk-st-outline-button:hover {
        color: var(--neutral-10-main);
    }

    .prk-st-outline-button svg {
        fill: var(--neutral-10) !important;
    }

.prk-lc-filter-button {
    display: flex;
    justify-content: space-around;
    align-items: self-end;
}

.prk-st-carousel-slide {
    flex: 0 0 100%;
}

/* Online Reservation - Residential/Rooms/Room */
.prk-st-room-gallery {
    position: relative;
}

    .prk-st-room-gallery .prk-st-right-button {
        position: absolute !important;
        right: 16px;
        top: 120px;
    }

    .prk-st-room-gallery .prk-st-left-button {
        position: absolute !important;
        left: 16px;
        top: 120px;
    }

    .prk-st-room-gallery img {
        width: 100%;
        object-fit: contain;
        border-radius: 4px;
    }

/* Online Reservation - Residential/Cart */
.prk-st-cart-room {
    border: 1px solid var(--neutral-03);
    border-radius: 4px;
}

    .prk-st-cart-room .prk-st-cart-room-title {
        border-bottom: 1px solid var(--neutral-03);
        background-color: var(--info-01);
        padding: 8px;
        color: var(--primary-10-main);
        border-radius: 4px 4px 0 0;
    }

    .prk-st-cart-room .prk-st-cart-room-body {
        padding: 8px;
    }


/* Online Reservation - FAndB/Cart */
.prk-st-cart-order-item {
    border-radius: 4px;
    background-color: var(--info-01);
    padding: 8px;
}

    .prk-st-cart-order-item .prk-st-cart-.prk-st-cart-order-item-body {
        padding: 8px;
    }


/* Online Reservation - FAndB/Table */
.prk-st-cart-title {
    padding: 16px 16px 8px 16px;
    width: 100%;
    color: var(--accent-08)
}

.prk-st-cart-body {
    padding: 0 16px 16px 16px;
    overflow-y: auto;
}

.prk-st-cart-amount {
    padding: 0 16px 16px 16px;
    width: 100%;
}

.prk-st-cart-payable-amount {
    padding: 0 16px 16px 16px;
    color: var(--accent-10);
    width: 100%;
}

.prk-st-cart-footer {
    padding: 0 16px 16px 16px;
}

.prk-st-fixed-cart-footer {
    padding: 16px;
    border-radius: 0;
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;
    min-height: 80px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 8px 24px 0px;
}

.prk-st-table {
    background-color: white;
    border: 1px solid var(--neutral-03);
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
    width: 100%;
    height: 150px;
    padding: 8px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.prk-st-fixed-tab {
    position: fixed;
    border-radius: 0;
    z-index: 100;
    top: 0;
    right: 0;
    min-height: 80px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 8px 24px 0px;
}

.prk-st-table-selected {
    cursor: pointer;
    background-color: var(--accent-02);
}

.prk-st-table-reserved {
    cursor: not-allowed;
    background-color: var(--accent-05-main);
}

.prk-st-checkout-main-title {
    color: var(--info-10);
}

.prk-st-guest-info-payment-info {
    color: var(--neutral-08);
}

.prk-st-checkout-title {
    padding: 16px;
    width: 100%;
    border-bottom: 1px solid var(--neutral-03);
    color: var(--info-10)
}

.prk-st-checkout-footer {
    padding: 16px;
    width: 100%;
    border-top: 1px solid var(--neutral-03);
}

.prk-lc-ul-list {
    display: flex;
}

.prk-st-ul-list {
    gap: 1.8vw;
}

.st-prk-room1-filter {
    display: flex;
    width: 70vw;
}


.prk-st-content-filter {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.prk-st-fullwidth {
    width: 100%;
}

.prk-st-fullheight {
    height: 100%;
}

.prk-st-container {
    width: 100% !important;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto !important;
    margin-left: auto !important;
}
/* Online Reservation - Rooms*/
.prk-st-hotel-menu {
    background-color: white;
}

.prk-st-room-user-span {
    color: var(--neutral-10-main);
    font-size: 16px
}

.prk-st-hint-design {
    font-size: 14px;
    color: var(--neutral-08);
}

.prk-st-room-filter-font {
    font-size: 16px;
    color: var(--neutral-10-main);
    font-weight: bold
}

.prk-st-user-div {
    color: var(--primary-10-main);
    font-size: 24px;
    font-weight: bold;
}

.prk-st-rooms-info {
    color: var(--info-10);
    font-size: 20px;
    font-weight: bold
}

.prk-st-rooms-info-number {
    color: var(--info-10);
    font-size: 16px;
    font-weight: bold
}

.prk-st-info-font {
    color: var(--neutral-10-main);
    font-size: 14px
}

.prk-st-info-header {
    background-color: var(--info-01);
}

.prk-st-checkout {
    background-color: white;
    border: 1px solid var(--neutral-03);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.prk-st-final-checkout-font {
    font-size: 14px;
    font-weight: bold;
}

.prk-lc-checkout {
    display: flex;
    align-items: center;
    width: 100%;
}

.prk-st-guest-info-room-info {
    background-color: var(--info-01);
    border: 1px solid var(--neutral-03);
}

.prk-st-guest-info-room-amount {
    background-color: var(--info-01);
    border: 1px solid var(--neutral-03);
}

.pk-st-map-link {
    position: relative;
    display: flex;
}

    .pk-st-map-link img {
        width: 100%;
    }

    .pk-st-map-link div {
        position: absolute;
        right: 16px;
        width: calc(100% - 32px);
        bottom: 16px;
        background-color: #f4f4f4b3;
        text-align: center;
    }

/* Online Reservation - Ticket */
.prk-st-option {
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: .4s;
}

.prk-st-sub-options {
    border-radius: 4px 0 4px 4px;
    transition: .4s;
}

.prk-st-triangle-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid;
}

.prk-st-line-through {
    text-decoration: line-through;
}

/*GUEST INFO*/
.prk-st-guest-info-delete {
    background-color: var(--danger-01);
    cursor: pointer;
}

.prk-st-delete-icon {
    overflow: hidden
}


/* Profile */

.prk-st-profile-card {
    border-radius: 4px;
    background-image: url(/Images/Patterns/MagicPattern.design.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 4px 8px 2px rgba(65, 74, 83, 0.1);
}

.prk-st-profile-upload {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: white;
    transition: .6s;
    padding-top: 2px;
}


    .prk-st-profile-upload:hover {
        opacity: 1;
    }

.prk-st-decorative-text {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}

    .prk-st-decorative-text::before, .prk-st-decorative-text::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid var(--neutral-03);
        margin: 0 8px;
    }

.prk-st-profile-icon {
    border-radius: 100%;
    background-color: var(--neutral-01);
    border: 1px solid var(--neutral-03);
    width: 80px;
    height: 80px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .prk-st-profile-icon svg {
        fill: var(--neutral-03) !important;
    }


@media (min-width: 576px) {
    .prk-st-container {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .prk-st-container {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .prk-st-container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .prk-st-container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .prk-st-container {
        max-width: 1320px !important;
    }
}

@media only screen and (max-width: 600px) {
    body {
        overflow-x: hidden;
    }
}