﻿.swal-text {
    width: 90%;
    text-align: center;
}

.vertical-center {
    align-content: center;
    align-items: center;
}

.attraction-header {
    font-size: var(--h3) !important;
}

.itinerary-header {
    font-size: var(--h3) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.app-header {
    font-size: var(--h4) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.blog-header {
    font-size: var(--h4) !important;
    font-weight: 500 !important;
}

.top-attraction-header {
    font-size: var(--h5) !important;
    font-weight: 500 !important;
}

.feature-header {
    font-size: var(--h5) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.blog-header {
    font-size: var(--h1) !important;
    font-weight: 500 !important;
}

.announcement p,
.announcement a {
    text-align: center;
}

.max-w-\[150px\] {
    max-width: 150px
}

.mb-\[--range-2\] {
    margin-bottom: var(--range-2)
}

.\[text-shadow\:4px_4px_0_var\(--black-300\)\] {
    text-shadow: 4px 4px 0 var(--black-300)
}

.bg-\[--whatsapp\] {
    background-color: var(--whatsapp)
}

.bg-\[--black-100\] {
    background-color: var(--black-100)
}

.hover\:bg-\[--black-100\]:hover {
    background-color: var(--black-100)
}

.bg-\[--white-50\] {
    background-color: var(--white-50)
}

.bg-\[--white-400\] {
    background-color: var(--white-400)
}

.bg-\[--theme-3-300\] {
    background-color: var(--theme-3-300)
}

.border-\[--theme-2-500\] {
    border-color: var(--theme-2-500)
}

.ml-\[50px\] {
    margin-left: 50px;
}

.text-\[color\:var\(--theme-3-800\)\] {
    color: var(--theme-3-800)
}

.\[--icon-color\:var\(--theme-4-400\)\] {
    --icon-color: var(--theme-4-400)
}

.\[--text-color\:var\(--theme-4-400\)\] {
    --text-color: var(--theme-4-400)
}

.bg-\[--theme-5-50\] {
    background-color: var(--theme-5-50)
}

.\[--bg-color\:var\(--theme-5-50\)\] {
    --bg-color: var(--theme-5-50)
}

.\[--bg-color\:var\(--theme-5-100\)\] {
    --bg-color: var(--theme-5-100)
}

.\[--bg-hover-color\:var\(--theme-5-100\)\] {
    --bg-hover-color: var(--theme-5-100)
}

.\[--icon-color\:var\(--theme-5-500\)\] {
    --icon-color: var(--theme-5-500)
}

.\[--text-color\:var\(--theme-5-500\)\] {
    --text-color: var(--theme-5-500)
}

.d-none {
    display: none;
}

.icon-tour-invoice {
    margin-left: 5px;
    width: 15px;
}

.payment-waiting .my-loading svg {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 10px;
}

.payment-waiting .my-loading svg {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

.mt-\[--range-5\] {
    margin-top: var(--range-5)
}

:is(.text-editor table) th,
:is(.text-editor table) td {
    padding: 10px !important;
    font-size: 16px !important;
}

:is(.text-editor table) tr:first-child .table-title {
    color: var(--white);
    font-size: var(--h3) !important;
    text-align: center !important;
    border-bottom: none !important;
    background: var(--theme-1-500);
}

.bg-\[--theme-2-300\] {
    background-color: var(--theme-2-300);
}

.payment-icon {
    height: 25px;
}


.p-\[40px\] {
    padding: 40px;
}


@media only screen and (max-width: 600px) {
    table.standart {
        display: block;
        overflow-x: scroll;
    }

    .xs-p-\[20px\] {
        padding: 20px;
    }
}

@media (max-width: 768px) {

    .sm\:text-\[length\:16px\] {
        font-size: 16px !important;
    }

    .sm\:h-\[16px\] {
        height: 16px !important;
    }
}

.bg-\[--perplexity\] {
    background-color: var(--perplexity)
}

.bg-\[--claude\] {
    background-color: var(--claude)
}

.bg-\[--gemini\] {
    background-color: var(--gemini)
}