* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-family: Poppins, sans-serif;
}

:root {
    --fsblue: #172d58;
    --fsyellow: #fbb716;
    --menulink: rgb(26,46,76);
    --menulinkhover: rgb(0, 123, 255);
    --red: rgb(220, 53, 69);
    --green: rgb(40, 167, 69);
    --blue: rgb(0, 123, 255);
    --orange: rgb(255, 105, 0);
    --yellow: rgb(255, 193, 7);
    --purple: rgb(115, 0, 165);
    --magenta: #dc1467;
    --black: rgb(0,0,0);
    --lightgray: rgb(150, 150, 150);
    --gray: rgb(26,46,76);
}


body {
    background-color: #FFFFFF;
}

.page {
    min-width: 1250px;
    width: 100%;
}

.content {
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: stretch;
}

.row-center {
    justify-content: center !important;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-25 {
    margin-top: 25px !important;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-25 {
    margin-bottom: 25px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

.font-size-big {
    font-size: 20px !important;
}

.font-size-small {
    font-size: 12px !important;
}

.font-size-tiny {
    font-size: 10px !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-extrabold {
    font-weight: 800 !important;
}

.text-align-left {
    text-align: left !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

.text-align-left-mobile-center {
    text-align: left;
}

.text-align-right-mobile-center {
    text-align: right !important;
}

.color-black {
    color: #000000 !important;
}

.color-red {
    color: var(--red) !important;
}

.color-green {
    color: var(--green) !important;
}

.color-blue {
    color: var(--blue) !important;
}

.color-fsblue {
    color: var(--fsblue) !important;
}

.color-orange {
    color: var(--orange) !important;
}

.color-yellow {
    color: var(--yellow) !important;
}

.color-purple {
    color: var(--purple) !important;
}

.color-lightgray {
    color: var(--lightgray) !important;
}

.color-gray {
    color: var(--gray) !important;
}

.color-magenta {
    color: var(--magenta) !important;
}

.color-white {
    color: #ffffff !important;
}

.bg-color-black {
    background-color: #000000 !important;
}

.bg-color-red {
    background-color: var(--red) !important;
}

.bg-color-green {
    background-color: var(--green) !important;
}

.bg-color-blue {
    background-color: var(--blue) !important;
}

.bg-color-orange {
    background-color: var(--orange) !important;
}

.bg-color-yellow {
    background-color: var(--yellow) !important;
}

.bg-color-purple {
    background-color: var(--purple) !important;
}

.bg-color-gray {
    background-color: var(--gray) !important;
}

.bg-color-lightgray {
    background-color: rgb(245,245,245) !important;
}

.bg-color-magenta {
    background-color: var(--magenta) !important;
}

p {
    color: var(--gray);
    font-size: 14px;
}

ul {
    color: var(--gray);
    font-size: 14px;
    margin-left: 10px;
}

.link {
    text-decoration: none;
    color: var(--blue);
    cursor: pointer;
    user-select: none;
}

    .link:hover {
        color: #000000;
    }

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-clear {
    clear: both;
}

nav {
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
}

.menu {
    height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
}

    .menu a.logo {
        flex: 0 0 auto;
        text-decoration: none;
    }

        .menu a.logo img {
            height: 36px;
            width: auto;
            margin-right: 30px;
        }

    .menu .menu-list {
        flex: 1;
        height: 36px;
    }

    .menu .menu-mobile {
        flex: 1;
        height: 36px;
        text-align: right;
        display: none;
    }


    .menu .menu-close {
        display: inline-block;
        display: none;
    }

    .menu .menu-link {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        line-height: 36px;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--menulink);
        padding-right: 4px;
        padding-left: 4px;
        user-select: none;
        transition: color linear 0.2s;
    }

        .menu .menu-link:hover {
            color: var(--menulinkhover);
        }

    .menu .menu-link-text {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        line-height: 36px;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--menulink);
        padding-right: 4px;
        padding-left: 4px;
        transition-property: color;
        transition: color linear 0.2s;
    }

        .menu .menu-link-text img {
            display: inline-block;
            height: 24px;
            width: 24px;
            vertical-align: middle;
            margin-right: 4px;
            user-select: none;
        }

    .menu .menu-button {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        line-height: 36px;
        text-decoration: none;
        text-transform: uppercase;
        background-color: #ffffff;
        border: 2px solid var(--fsblue);
        color: var(--fsblue);
        padding-right: 12px;
        padding-left: 12px;
        border-radius: 6px;
        margin-left: 12px;
        transition: background-color linear 0.2s;
    }

        .menu .menu-button:hover {
            background-color: var(--fsyellow);
            color: var(--fsblue);
        }

    .menu .menu-icon {
        display: inline-block;
        width: 36px;
        height: 36px;
        font-size: 21px;
        vertical-align: middle;
        background-color: rgb(249,249,249);
        border: 1px solid rgb(240,240,240);
        margin-left: 2px;
        border-radius: 18px;
        text-align: center;
        padding: 0;
    }

        .menu .menu-icon img {
            display: inline-block;
            height: 24px;
            width: 24px;
            vertical-align: middle;
        }

    .menu .seperator {
        display: inline-block;
        font-weight: 300;
        color: #ececec;
        margin-left: 4px;
        margin-right: 4px;
        user-select: none;
    }

    .menu .menu-right {
        float: right;
    }

.hero {
    background-color: #FFFFFF;
    background-size: cover;
}

    .hero.hero-padding {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero.hero-border {
        border: 1px solid rgb(240,240,240);
    }

    .hero .hero-text {
        font-size: 15px;
    }


h1 {
    font-weight: 600;
    font-size: 22px;
    color: #000000;
    color: var(--gray);
    vertical-align: middle;
}

h2 {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--gray);
    vertical-align: middle;
}

.card {
    background-color: #FFFFFF;
    border: 1px solid rgb(220,220,220);
    height: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 15px;
}

.card-shadow {
    box-shadow: 0px 0px 10px 2px rgba(0,0,0, 0.1);
    border: 1px solid rgb(230,230,230);
}

.card-title {
    margin-bottom: 15px;
}

    .card-title h1, .card-title h2 {
        float: left;
        user-select: none;
        font-size: 15px;
    }

    .card-title i {
        display: inline-block;
        margin-right: 4px;
    }

    .card-title .card-title-menu {
        float: right;
        overflow: auto;
    }

    .card-title::after {
        content: " ";
        display: block;
        clear: both;
    }

    .card-title .card-title-menu a {
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
        margin-left: 10px;
        font-size: 12px;
        user-select: none;
        color: var(--blue);
    }

        .card-title .card-title-menu a:hover {
            color: var(--magenta);
        }


.button {
    display: inline-block;
    font-weight: 600;
    padding: 10px;
    min-width: 110px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid rgb(210,210,210);
    color: rgb(70,70,70);
    text-decoration: none;
    margin-right: 2px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
}

    .button i {
        margin-right: 5px;
    }

    .button img {
        display: inline-block;
        vertical-align: middle;
        height: 16px;
        width: 16px;
    }

    .button:disabled {
        cursor: not-allowed;
        background-color: rgb(240,240,240);
        border: 1px solid rgb(230,230,230);
        color: rgb(200,200,200);
    }

.button-loader {
    cursor: default;
}

.button-red:enabled:hover,
.button-green:enabled:hover,
.button-blue:enabled:hover,
.button-orange:enabled:hover,
.button-yellow:enabled:hover,
.button-magenta:enabled:hover,
a.button-red:hover,
a.button-green:hover,
a.button-blue:hover,
a.button-orange:hover,
a.button-yellow:hover,
a.button-magenta:hover {
    filter: brightness(120%);
}

.button:enabled:active,
a.button:active {
    filter: brightness(90%);
}

.button-input {
    font-size: 14px !important;
    line-height: 14px;
    height: 36px !important;
    border-radius: 6px !important;
}

.button-green {
    background-color: var(--green);
    border: 1px solid var(--green);
    color: #FFFFFF;
}

.button-red {
    background-color: var(--red);
    border: 1px solid var(--red);
    color: #FFFFFF;
}

.button-blue {
    background-color: var(--blue);
    border: 1px solid var(--blue);
    color: #FFFFFF;
}

.button-navy {
    background-color: var(--fsblue);
    border: 1px solid var(--fsblue);
    color: #FFFFFF;
}

.button-orange {
    background-color: var(--orange);
    border: 1px solid var(--orange);
    color: #FFFFFF;
}

.button-yellow {
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
    color: var(--gray);
}

.button-magenta {
    background-color: var(--magenta);
    border: 1px solid var(--magenta);
    color: #FFFFFF;
}

.icon-button {
    background-color: #ffffff;
    border: 1px solid rgb(220,220,220);
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 4px;
    text-decoration: none;
    text-align: center;
}

    .icon-button i {
        font-size: 20px;
        color: var(--gray);
    }

    .icon-button img {
        width: 24px;
        height: 24px;
    }

    .icon-button p {
        text-align: center;
        font-size: 9px;
        min-width: 50px;
    }

    .icon-button:hover {
        background-color: rgb(255, 250, 226);
        border: 1px solid rgb(200,200,200);
    }

.key-value {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid rgb(220,220,220);
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

    .key-value a {
        text-decoration: none;
    }

    .key-value:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }

    .key-value p:first-child {
        font-size: 12px;
        color: var(--gray);
    }

    .key-value p:last-child {
        font-size: 14px;
        font-weight: 600;
        color: var(--black);
    }


.tag {
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
    color: #FFFFFF;
    display: inline-block;
}

.tag-red {
    background-color: var(--red);
}

.tag-green {
    background-color: var(--green);
}

.tag-blue {
    background-color: var(--blue);
}

.tag-orange {
    background-color: var(--orange);
}

.tag-yellow {
    background-color: var(--yellow);
}

.tag-gray {
    background-color: var(--gray);
}

.tag-purple {
    background-color: var(--purple);
}

.tag-magenta {
    background-color: var(--magenta);
}

.tag-white {
    background-color: #ffffff;
    border: 1px solid var(--lightgray);
    color: var(--darkgray);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

    .table-wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #ffffff;
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background-color: rgb(220,220,220);
    }

.table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .table a {
        cursor: pointer;
        text-decoration: none;
        user-select: none;
        color: var(--blue);
    }

        .table a:hover {
            color: var(--magenta);
        }

    .table img {
        height: 16px;
        width: 16px;
        display: inline-block;
        vertical-align: middle;
    }

    .table th, .table td {
        padding: 6px;
        border-bottom: 1px solid rgb(240,240,240);
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 12px;
        color: var(--gray);
    }

    .table th {
        font-weight: 600;
    }

    .table input[type=text],
    .table input[type=number] {
        font-size: 11px;
        padding: 0;
        width: 100%;
    }

.table-grid th, .table-grid td {
    border: 1px solid rgb(240,240,240);
}

.table-hover tr:not(:first-child):hover {
    background-color: rgb(245,245,255);
}

.table-stripes {
}

    .table-stripes tr:nth-child(2n+2) {
        background-color: rgb(245,245,245);
    }

.table .row-highlight {
    background-color: rgb(255, 255, 220);
}

.pagination {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .pagination a {
        display: inline-block;
        font-size: 12px;
        font-weight: 500;
        padding: 4px;
        padding-left: 6px;
        padding-right: 6px;
        background-color: rgb(245,245,245);
        border: 1px solid rgb(220,220,220);
        margin: 1px;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
        border-radius: 4px;
    }

        .pagination a:hover {
            background-color: rgb(230,230,230);
        }

        .pagination a:active {
            background-color: rgb(200,200,200);
        }

.alert {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
    border-radius: 6px;
    background-color: rgb(209,236,241);
    color: rgb(0,64,134);
    border: 2px solid rgb(190,229,235);
}

    .alert i {
        margin-right: 5px;
    }

    .alert a {
        color: inherit;
        text-decoration: underline;
        cursor: pointer;
    }

        .alert a.alert-action {
            float: right;
        }

    .alert::after {
        content: " ";
        display: block;
        clear: both;
    }

.alert-red {
    background-color: rgb(248,215,218);
    color: rgb(114,28,36);
    border: 2px solid rgb(245,198,203);
}

.alert-green {
    background-color: rgb(212,237,218);
    color: rgb(21,87,36);
    border: 2px solid rgb(195,230,203);
}

.alert-yellow {
    background-color: rgb(255,243,205);
    color: rgb(133,100,4);
    border: 2px solid rgb(255,238,186);
}

.alert-gray {
    background-color: rgb(226,227,229);
    color: rgb(56,61,65);
    border: 2px solid rgb(214,216,219);
}

.link-bar {
    display: block;
    text-decoration: none;
    user-select: none;
    padding: 6px;
    padding-left: 8px;
    border-bottom: 1px solid rgb(240,240,240);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
}

    .link-bar i {
        margin-right: 6px;
    }

    .link-bar:hover {
        background-color: rgb(245,245,245);
    }

    .link-bar:last-child {
        border-bottom: none;
    }

input[type=file] {
    width: 100%;
    overflow: hidden;
}

.input-label {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 3px;
    user-select: none;
    text-align: left;
}

    .input-label i {
        margin-right: 5px;
    }

div.input,
input.input,
select.input {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    border: 2px solid rgb(200,200,200);
    height: 36px;
    padding-left: 6px;
    padding-right: 6px;
    letter-spacing: 0.5px;
    border-radius: 6px;
}

select.input {
    cursor: pointer;
}

.input-bg {
    background-size: 18px 18px;
    background-position-y: center;
    background-position-x: 5px;
    padding-left: 28px !important;
    background-repeat: no-repeat;
}

input.input:disabled,
select.input:disabled {
    cursor: not-allowed;
    background-color: rgb(245,245,250);
}

input.input:read-only {
    background-color: rgb(249,249,249);
}

input.input:focus,
select.input:focus,
textarea.input:focus {
    border: 2px solid var(--yellow);
}

.input.input-error, .input.input-error:focus {
    border: 2px solid var(--red);
}

.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea {
    resize: none;
    width: 100%;
    font-size: 12px;
    border: 2px solid rgb(200,200,200);
    padding: 10px;
    line-height: 18px;
    min-height: 100px;
    border-radius: 6px;
}

    textarea:focus {
        border: 2px solid var(--yellow);
    }

input[type=checkbox],
input[type=radio] {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgb(150,150,150);
    height: 15px;
    width: 15px;
    margin-right: 2px;
    border-radius: 0;
    cursor: pointer;
    vertical-align: middle;
}

label {
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray);
}

    label:last-child {
        margin-right: 0;
    }

.full-width {
    width: 100%;
    display: block;
}

img.aspect-ratio-16-9 {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

img.aspect-ratio-4-3 {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

img.aspect-ratio-1-1 {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
}

.dialog {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.9);
    display: none;
}


.dialog-box {
    display: block;
    position: fixed;
    width: 600px;
    background-color: #FFFFFF;
    top: 10vh;
    left: calc(50vw - 300px);
    box-shadow: 0px 0px 10px 2px rgba(100,100,100,0.1);
    border: 1px solid rgb(220,220,220);
    border-radius: 6px;
    padding: 15px;
}

.dialog-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
}

.dialog-body::-webkit-scrollbar-thumb {
    background-color: rgb(220,220,220);
}

.dialog-box-tiny {
    width: 250px;
    left: calc(50vw - 125px);
    text-align: center;
}

.dialog-box-small {
    width: 320px;
    left: calc(50vw - 160px);
}

.dialog-box-big {
    width: 1000px;
    left: calc(50vw - 500px);
}

.dialog-body {
    max-height: 70vh;
    overflow-y: auto;
}

.captcha {
    width: 100%;
    height: 64px;
    overflow: hidden;
    margin-top: 5px;
    border: 2px solid rgb(200,200,200);
    border-radius: 6px;
    background-color: rgb(249,249,249);
}

    .captcha div {
        width: 200px;
        overflow-x: hidden;
        position: relative;
        top: -1px;
        left: -1px;
    }


.uppercase {
    text-transform: uppercase !important;
}

.popup {
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid rgb(170,170,170);
    border-radius: 20px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 12000;
    background-color: rgba(0,0,0,0.7);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
    color: #ffffff;
    font-size: 12px;
    user-select: none;
    display: none;
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    z-index: 10000 !important;
}

    .ui-autocomplete li:not(:last-child) {
        border-bottom: 1px solid rgb(200,200,200);
    }

.ui-autocomplete-loading {
    background-image: url('/images/core/loader-bar.gif');
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position-x: right;
    background-position-y: center;
}

canvas {
    display: block;
    width: 100%;
    height: auto;
}

hr {
    border-bottom: 1px solid rgb(240,240,240);
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

pre {
    width: 100%;
    overflow-x: auto;
    font-size: 11px;
    font-family: 'Source Code Pro', monospace !important;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1) inset;
    padding: 20px;
    border-radius: 6px;
}

    pre::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #ffffff;
    }

    pre::-webkit-scrollbar-thumb {
        background-color: rgb(220,220,220);
    }


.booking {
    width: 100%;
}

    .booking .booking-engine {
        background-color: #ffffff;
        padding: 25px;
        border: 1px solid rgb(230,230,230);
        border-radius: 12px;
    }

    .booking .booking-menu {
        text-align: left;
        border-bottom: 1px solid rgb(230,230,230);
        margin-bottom: 15px;
    }

        .booking .booking-menu a {
            display: inline-block;
            padding: 10px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            user-select: none;
            color: #000000;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            background-color: rgb(245,245,245);
        }

            .booking .booking-menu a:hover, .booking .booking-menu a.active {
                background-color: var(--fsblue);
                color: #ffffff;
            }

.option-link {
    color: var(--fsblue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-right: 2px;
    border: 1px solid var(--fsblue);
    padding-right: 8px;
    padding-left: 8px;
    border-radius: 10px;
    user-select: none;
}

    .option-link.active {
        background-color: var(--fsblue);
        color: #ffffff;
    }

.product {
    background-color: #FFFFFF;
    border: 1px solid rgb(230,230,230);
    height: 100%;
    border-radius: 6px;
    position: relative;
    padding: 0;
}

    .product:hover {
        border: 1px solid rgb(200,200,200);
    }

        .product:hover img {
            filter: brightness(80%);
        }

    .product a {
        text-decoration: none;
    }

    .product img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
    }

    .product .product-tag {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        color: var(--purple);
        font-size: 11px;
        font-weight: 500;
    }

    .product .product-title {
        font-weight: 600;
        color: var(--gray);
        font-size: 14px;
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 5px;
    }

    .product .product-text {
        font-size: 11px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
        color: var(--gray);
    }

    .product .product-price {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        font-size: 12px;
        font-weight: 500;
        color: var(--gray);
        border-top: 1px solid rgb(230,230,230);
        padding-top: 12px;
        margin-top: 5px;
    }

        .product .product-price span {
            font-weight: 600;
            color: var(--green);
            font-size: 14px;
        }

.page-text {
    padding: 10px;
}

    .page-text h3 {
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .page-text p {
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .page-text a {
        color: var(--blue);
    }

footer {
    margin-top: 50px;
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: rgb(245,245,245);
    border-top: 1px solid rgb(220,220,220);
}

.social-links {
    padding-top: 5px;
}

    .social-links a {
        color: var(--gray);
        display: inline-block;
        font-size: 18px;
        height: 34px;
        width: 34px;
        margin-left: 4px;
        background-color: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50%;
        padding: 3px;
        text-align: center;
        vertical-align: middle;
    }

        .social-links a:hover {
            background-color: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
        }

.footer-links-container {
    text-align: right;
    vertical-align: top;
}

.footer-links {
    vertical-align: top;
    display: inline-block;
    margin-left: 60px;
    text-align: center;
    user-select: none;
}

    .footer-links p {
        color: rgb(160,160,160);
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .footer-links a {
        display: block;
        color: var(--gray);
        font-size: 13px;
        text-decoration: none;
        margin-bottom: 4px;
    }

        .footer-links a:hover {
            text-decoration: underline;
        }

.breadcrumb{
    font-size: 11px;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--gray);
}

.breadcrumb li::after {
    content: '\203A';
    margin-left: 5px;
    margin-right: 5px;
}

.breadcrumb li:last-child::after {
    content: '';
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb li {
    display: inline-block;
}

.article {
}

    .article h1 {
        font-weight: 600;
        margin-bottom: 5px;
    }

    .article h2 {
        margin-bottom: 20px;
    }

    .article p {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 26px;
    }

    .article img {
        width: 100%;
        display: block;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .article ul, .article ol {
        padding-left: 20px;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 28px;
        color: var(--gray);
    }

        .article ul li, .article ol li {
            padding-left: 6px;
        }

    .article table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
    }

        .article table th, .article table td {
            text-align: left;
            border: 1px solid rgb(230,230,230);
            font-size: 14px;
            padding: 6px;
            color: var(--gray);
            white-space: nowrap;
        }

        .article table th {
            font-weight: 600;
            background-color: rgb(249,249,249);
        }

    .article .alert {
        margin-bottom: 20px;
    }

    .article .tag {
        user-select: none;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .article a {
        color: var(--blue);
    }

        .article a:hover {
            color: var(--green);
        }

.wa-button {
    position: fixed;
    left: calc(100vw - 150px);
    top: calc(100vh - 110px);
    z-index: 2000;
    text-align: center;
    opacity: 0.5;
    transition: opacity linear 0.3s;
}

    .wa-button:hover {
        opacity: 1;
    }

    .wa-button img {
        width: 48px;
        height: 48px;
    }

    .wa-button p {
        background-color: #ffffff;
        display: inline-block;
        font-size: 11px;
        padding: 2px;
        padding-left: 6px;
        padding-right: 6px;
        border-radius: 6px;
        font-weight: 500;
        box-shadow: 0 0 5px 1px rgba(31,31,31,0.2);
    }