@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "sansation";
    src: url("sansation/Sansation_Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

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

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

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

.fs-24 {
    font-size: 24px !important;
}

.fs-48 {
    font-size: 48px !important;
}

.unset-min-height {
    min-height: unset !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "sansation";
}

.hidden {
    display: none;
}

.btn-primary {
    background: #1B1BAF;
}

.btn-outline-primary {
    border-color: #1B1BAF;
    color: #1B1BAF;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    color: #131637;
    background: #E8E8F7;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.btn {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    letter-spacing: 0.08px;
    padding: 12px 20px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    justify-content: center;
}

.btn i {
    padding-right: 8px;
}

.custom-secondary {
    color: #363955;
    border: 1px solid #8F909E;
}

.title {
    font-weight: 700;
    font-size: 36px;
    color: #1B1BAF;
}

.title-info {
    font-size: 18px;
    letter-spacing: 0.18px;
    font-weight: 400;
    line-height: 150%;
}

.forgot {
    color: #04CBFE;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-overflow: ellipsis;
    text-decoration: none;
}

.bottom-login {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.bg-register-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #F1F1F3;
    background-image: url('../img/multi_step_bg_white_gradient_2x.webp');
    background-repeat: repeat-x;
    background-position: center;
    background-size: cover;
    background-size: 100%;
    background-color: #fff;
    gap: 70px;
    position: relative;
    /* Ensures positioning works */
}

.step-register {
    flex-grow: 1;
    font-size: 20px;
    font-weight: 600;
    color: #363955;
    text-align: center;
    position: relative;
    /* Ensures z-index works */
    z-index: 2;
    /* Ensures text is above the line */
    background: #FFF;
    /* Optional: Creates a white background behind the text */
    padding: 5px 10px;
}

.step-register.active {
    color: #1B1BAF;
}

.step-register.active path {
    fill: #1B1BAF;
}

.register-line {
    height: 2px;
    width: 100%;
    background: #363955;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    /* Ensures it's behind the text */
}

.card-custom {
    border-radius: 12px;
    border: 1px solid #F1F1F3;
    background: #FFF;
}

.card-meeting-table {
    display: flex;
    padding: 16px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.notice {
    color: #0C0C4F;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #E8E8F7;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.notice span {
    font-weight: 400;
}

.group-custom label {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 8px;
    color: #131637;
}

.group-custom {
    margin-bottom: 8px;
}

.form-custom {
    padding: 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    outline: none !important;
    box-shadow: none !important;
}

.term {
    padding-bottom: 3vh;
}

.reg-footer {
    padding: 16px 24px;
    gap: 16px;
}

.reg-footer button,
.reg-footer a.btn {
    padding: 12px 50px;
}

.web-footer {
    opacity: 0.8;
    color: #2A2C8E;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.empty {
    padding: 24px 0px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    text-align: center;
}

.bigblack {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: #131637;
}

.info-empty {
    color: #53556D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.5px;
}

.btn-outline-primary {
    color: #1B1BAF;
    outline-color: #1B1BAF;
    border-color: #1B1BAF;
}

.btn-next {
    background-image: url('../img/btn_patter.png');
    background-color: #1B1BAF;
    background-position: -1.05px -70.075px;
    background-size: 169.906% 351.846%;
    background-repeat: no-repeat;
    background-blend-mode: multiply, normal;
}

.subttl {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
    letter-spacing: 0.13px;
    color: #66687D;
}

.ttl {
    color: #131637;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.2px;
}

.ttl span {
    color: #66687D;
}

.addons {
    min-height: 200px;
    border-radius: 12px;
    border: 1px solid var(--Neutral-neutral-4, #F1F1F3);
    background: #FFF;
    padding: 15px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
}

.text-addons {
    padding: 16px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.13px;
}

.addons-price {
    color: var(--Blue-Dark, #2A2C8E);
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.2px;
}

.img-addons {
    border-radius: 0 8px 8px 0;
}

.img-box {
    border-radius: 12px;
}

.btn-increment {
    width: 50px;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.increment {
    border-radius: 8px;
    border: 1px solid var(--Neutral-neutral-7, #8F909E);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-increment:hover {
    background: #E8E8F7;
}

.table-box {
    display: flex;
    width: 68px;
    height: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 8px;
    border: 0.75px solid var(--Neutral-neutral-6, #C4C5CD);
    background: var(--Neutral-neutral-3, #F6F6F7);

}

.table-container {
    padding: 12px;
    gap: 12px;
    flex-direction: column-reverse;
    max-height: 380px;
    gap: 16px;
    align-content: stretch;
    cursor: pointer;
}

.seat-icon {
    gap: 6px;
}

.table-box {
    cursor: pointer;
}

.table-box.selected {
    background-color: #d1e7dd;
    /* Hijau muda */
    border-color: #0f5132;
    color: #0f5132;
}

.table-box.booked {
    background-color: #f8d7da;
    /* Merah muda untuk booked */
    cursor: not-allowed;
}


/*summary*/
.img-addons img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.addons-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.card-table {
    width: 40px;
    height: 40px;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--Blue-kv-blue-kv-6, #1B1BAF);
    backdrop-filter: blur(8px);
    color: #ffff;
}

.card-summary {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 12px;
    border: 1px solid #00000012;
    box-shadow: 0px 80px 22px 0px rgba(0, 0, 0, 0.01), 0px 51px 21px 0px rgba(0, 0, 0, 0.02), 0px 29px 17px 0px rgba(0, 0, 0, 0.03), 0px 13px 13px 0px rgba(0, 0, 0, 0.04), 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
}

.summary-text {
    width: 100%;
    left: 0;
    top: 0;
    padding: 16px;
    margin-top: 10px;
}

.line {
    width: 100%;
    height: 2px;
    background: #F1F1F3;
    margin-top: 20px;
    margin-bottom: 20px;
}

.title-summary {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.summary-red {
    background: #EC1C24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 0px 0px 12px 12px;
    position: relative;
}

.absolute-line {
    height: 20px;
    margin: 0 10px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==");
    background-size: 4px 2px;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
}

.absolute-line:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 5px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 100%;
    pointer-events: none;
}

.absolute-line:before {
    left: -10px;
}

.absolute-line:after {
    transform: translate(-50%, -50%) rotate(225deg);
    right: -40px;
}

.summary-footer {
    width: 100%;
    bottom: 0;
    left: 0;
    height: auto;
    display: flex;
    padding: 16px;
}

.summary-footer .text {
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #fff;
}

.summary-footer img {
    margin-left: -10px;
}

.select2-container--default .select2-selection--single {
    height: calc(2.50rem + 10px) !important;
    /* Match form-control height */
    border: 1px solid #ced4da;
    /* Match Bootstrap border */
    border-radius: 0.375rem;
    /* Match Bootstrap rounded corners */
    padding: 0.375rem 0.75rem;
    /* Match form-control padding */
    font-size: 1rem;
    /* Bootstrap default font size */
}

/* Adjust focus state */
.select2-container--default .select2-selection--single:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    /* Bootstrap focus effect */
}

.select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
    right: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    top: 2px !important;
}

.select2-container--default .select2-selection--single {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* Remove default Select2 arrow and match Bootstrap's */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.option-radio {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #C4C5CD;
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    cursor: pointer;
    font-weight: 400;
}

.radio-vs {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #C4C5CD;
}

.option-radio.checked {
    border-color: #0c5460;
}

.option-radio.checked .radio-vs {
    border-color: #0c5460;
    background: #0c5460;
}

.table-secondary th {
    background: rgba(27, 27, 175, 0.12) !important;
}

.dashes {
    border: 1px dashed #DCDCE1;
}

.card-radio {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.btn-warning-badge {
    border-radius: 4px;
    border: 1px solid var(--Red-kv-red-kv-2, #FAC9CA);
    background: var(--Red-kv-red-kv-1, #FDE8E9);
    display: flex;
    height: 22px;
    padding: 2px 6px;
    align-items: center;
    color: var(--Red-kv-red-kv-8, #A8141A);
}

.package-title {
    font-family: sansation;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.2px;
}

.package-description {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
}

.package-price {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%
}

.package-price span {
    font-weight: 400;
}

.card-radio,
.form-check,
.form-check-label {
    cursor: pointer;
}

.card-radio.active {
    border-color: #1B1BAF;
}

.table-participants tr {
    border-bottom: 1px dashed #DCDCE1;
    font-size: 14px;
}

.delete-info {
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.2px;
}

.tnc {
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    letter-spacing: 0.5px;
}

.fs-sansation p,
.fs-sansation li {
    font-family: "sansation" !important;
}

.history {
    padding: 24px;
}

.p-history {
    position: relative;
    display: flex;
}

.label {
    padding: 6px 12px;
    font-size: 18px;
    letter-spacing: 0.18px;
    border-radius: 6px;
    line-height: 150%;
    /* 27px */
}

.label svg {
    margin-top: -3px;
}

.small-text {
    font-size: 13px;
    letter-spacing: 0.13px;
    font-weight: 400;
}

.label-danger {
    border-radius: 6px;
    border: 1px solid var(--Red-kv-red-kv-2, #FAC9CA);
    background: var(--Red-kv-red-kv-1, #FDE8E9);
    color: #A8141A;
    font-weight: 700;
}

.label-expired {
    border-radius: 6px;
    background: var(--Neutral-neutral-4, #F1F1F3);
    color: var(--Neutral-neutral-8, #66687D);
    font-weight: 700;

}

.btn-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.label-success {
    background: #038543;
    color: #fff;
    font-weight: 700;
}

.order-time {
    padding: 4px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: #A8141A;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 19.5px */
    letter-spacing: 0.13px;
    color: #fff;
}

.number-info {
    width: 32px;
    height: 32px;
    display: flex;
    /* Enable Flexbox */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    border-radius: 8px;
    border: 1px solid #8F909E;
    backdrop-filter: blur(8px);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.history-text {
    letter-spacing: 0.2px;
}

.card-history-footer {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.card-history-footer a {
    font-weight: 700;
    color: #1B1BAF;
    text-decoration: none;
}

#npwpBox {
    display: none;
}

.box_size {
    background: #E8E8F7;
    border-radius: 100px;
    padding: 2px;
    display: flex
}

.size_toggle {
    padding: 3px 10px;
    background: #E8E8F7;
    color: #131637;
    border-radius: 999px;
    cursor: pointer;
}

.size_toggle.active {
    background: #1B1BAF;
    color: #fff;
}

.tb-comparison th {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.2px;
    color: #1B1BAF;
    padding: 16px 24px 16px 0px;
}

.tb-comparison td {
    padding: 16px 24px 16px 0px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #131637;
}

.paid-text {
    color: #66687D;
    letter-spacing: 0.13px;
    font-size: 13px;
}

.card-meeting-table {
    display: flex;
    padding: 16px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/*dashboard*/
.nav-gradient {
    background: linear-gradient(253deg, #272497 9.93%, #000A3D 93.28%);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 20px;
}

.nav-gradient a {
    color: #fff;
}

.info-dashbard {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: #C4C5CD;
}

.get-in {
    padding: 6px 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.07px;
    text-transform: uppercase;
}

.img-profile {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
}

.img-profile img {
    width: 100%;
    /* Make image fill the container */
    height: 100%;
    /* Make image fill the container */
    object-fit: cover;
    /* Ensures the image fits properly without distortion */
    border-radius: 100%;
}

.px-custom {
    padding-left: 2%;
    padding-right: 2%;
}

.menu-list {
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    border-radius: 20px;
    border: 1px solid #ECEFFE;
    background: #F8F9FF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
    /* Ensure smooth text transition */
    transition: color 0.3s ease-in-out;
}

.menu-list::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #272497 0%, #000833 100%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 20px;

    /* Send background behind text */
    z-index: 0;
}

/* Smooth gradient effect on hover */
.menu-list:hover::before {
    opacity: 1;
}

/* Ensuring child elements (text, icons) stay above the gradient */
.menu-list * {
    position: relative;
    z-index: 1;
}

/* Change text color on hover */
.menu-list:hover .title {
    color: #fff;
}

.menu-list:hover .title-info {
    color: #fff !important;
}

.menu-list:hover .span-text {
    color: #fff !important;
    transition: unset !important;
}

.menu-list a {
    text-decoration: none;
}

.icon-menu {
    width: 50px;
    /* Set fixed width */
    height: 50px;
    /* Set fixed height */
    border-radius: 50%;
    /* Makes it a circle */
    background-color: #E8E8F7;
    /* Optional: Set background color */
    display: flex;
    /* Center the icon */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: Add shadow */
}

.dm-custom a.dropdown-item {
    color: #131637;
    font-size: 13px;
    font-family: "sansation";
    cursor: pointer;
}

.dm-custom {
    border-color: transparent !important;
}

.btn-eyes {
    padding: 12px 8px 12px 12px;
    font-size: 16px;
    border: 1px solid #dee2e6;
}

@media only screen and (max-width: 1000px) {
    .btn-next {
        margin-top: 14px;
        width: 100%;
    }

    .bg-register-header {
        gap: 20px;
        background-color: #fff;
    }

    .bg-register-header svg {
        width: 20px;
        height: 20px;
    }

    .bg-register-header .step-register {
        font-size: 16px;
    }

    .reg-footer {
        display: block !important;
        text-align: center !important;
    }

    .subttl,
    .ttl {
        text-align: center !important;
    }

    .ttl {
        padding-bottom: 20px;
    }
}

@media only screen and (max-width: 1025px) {
    .summary-text .line {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .summary-text .d-flex {
        display: block !important;
        text-align: center !important;
    }

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

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

    .summary-footer {
        padding: 6px !important;
    }
}

.min-1441 {
    display: none;
}

@media (min-width: 1441px) {
    .min-1441 {
        display: block;
    }

    .max-1440 {
        display: none;
    }
}

@media (max-width: 1440px) {
    .min-1441 {
        display: none;
    }

    .max-1440 {
        display: block;
    }
}

@media (max-width: 1000px) {

    .tb-comparison th:first-child,
    .tb-comparison td:first-child {
        width: 250px;
        display: block;
        /* Bantu CSS menerapkan ukuran */
    }

    .tb-comparison th {
        white-space: nowrap;
    }

    .tb-comparison td {
        vertical-align: middle;
    }

    .gap-md-ver-3 a.op {
        margin-bottom: 20px;
    }
}

@media (min-width: 576px) and (max-width: 900px) {
    .col-sm-3 {
        width: 48%;
    }
}



@media (max-width: 530px) {
    .d-flex.bg-register-header {
        flex-direction: column;
        align-items: stretch;
        /* Ensures full width for content */
        text-align: center;
        gap: 5px;
        background: #fff;
    }

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

    .step-register {
        width: 100%;
        /* Ensures each step takes full width */
        margin-bottom: 10px;
        /* Adds spacing between steps */
    }

    .register-line {
        display: none;
        /* Hide the line in small screens if not needed */
    }

    .table-size td {
        font-size: 12px;
        white-space: nowrap;
    }

    .package-price {
        font-size: 24px;
    }
}

.sm-show {
    display: none;
}

@media (max-width: 1440px) {
    .summary-text .line {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .sm-show {
        display: block;
        text-align: right;
    }

    .sm-hide {
        display: none;
    }
}

/*custom*/
widget {
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}

widget[type=ticket] {
    width: 255px;
}

widget[type=ticket] .top {
    padding: 16px;
}

widget[type=ticket] .top,
widget[type=ticket] .bottom,
widget[type=ticket] .rip {
    background-color: #fff;
}

widget[type=ticket] .top {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}

widget[type=ticket] .top .deetz {
    padding-bottom: 10px !important;
}

widget[type=ticket] .bottom {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding: 16px;
    background-color: #EC1C24;
    background-image: url("../img/bg-p.webp");
    background-size: 75%;
    background-repeat: repeat;
}

widget[type=ticket] .rip {
    height: 20px;
    margin: 0 10px;
    background-image: url("../img/divider.png");
    background-size: 100% 3px;
    background-repeat: repeat-x;
    background-position: center;
    position: relative;
    box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
}

widget[type=ticket] .rip:before,
widget[type=ticket] .rip:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 5px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 100%;
    pointer-events: none;
}

widget[type=ticket] .rip:before {
    left: -10px;
    border-right-color: #EC1C24;
}

widget[type=ticket] .rip:after {
    transform: translate(-50%, -50%) rotate(225deg);
    right: -40px;
    border-top-color: #EC1C24;
}

ticket *,
::after,
::before {
    box-sizing: unset !important;
}

.img-f {
    max-width: 53px;
}

.rip-tbh {
    height: 12px;
    position: absolute;
    bottom: -2px;
    left: 10px;
    width: calc(100% - 20px);
    background-image: url("../img/bg-p.webp");
    background-repeat: repeat-x;
    background-size: 75%;
    background-color: #EC1C24;
}


/* mymeeting */
.btn-batic {
    padding: 9.5px, 24px, 9.5px, 24px;
    border-radius: 4px;
    gap: 10px;
    background: #383BBC;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
    color: #FFFFFF;
}

.btn-batic-lg {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    align-items: center;
    color: #FFFFFF;
    /* background: linear-gradient(253.08deg, #FF53A0 -14.81%, #F555AA -10.81%, #D75AC9 3.16%, #BF5FE1 17.83%, #AE62F2 33.33%, #A463FC 50.22%, #A164FF 71.09%); */
    background: linear-gradient(253.08deg, #2a2c8e -14.81%, #3033af -10.81%, #3536b2 3.16%, #21228f 17.83%, #2a2c8e 33.33%, #2a2c8e 50.22%, #2a2c8e 71.09%);
    box-shadow: 0px 8px 32px rgba(45, 41, 41, 0.08);
    border-radius: 100px;
}

.btn-batic-lg:hover {
    color: #fff;
}

.purple {
    color: #2a2c8e;
}

.inter {
    font-family: Inter;
}

.form-control-custom2 {
    height: 44px;
    background: #F3F2F5;
    border: 0.952381px solid #E9EBED;
    border-radius: 30.4762px;
    padding: 0px 20px;
}

.btn-batic2 {
    width: 130px;
    background: linear-gradient(253.08deg, #2a2c8e -14.81%, #3033af -10.81%, #3536b2 3.16%, #21228f 17.83%, #2a2c8e 33.33%, #2a2c8e 50.22%, #2a2c8e 71.09%);
    box-shadow: 0px 8px 32px rgba(45, 41, 41, 0.08);
    border-radius: 100px;
    color: #FFFFFF;

}

.btn-purple-gradient {
    background: linear-gradient(253.08deg, rgba(255, 83, 160, 0.2) -14.81%, rgba(245, 85, 170, 0.2) -10.81%, rgba(215, 90, 201, 0.2) 3.16%, rgba(191, 95, 225, 0.2) 17.83%, rgba(174, 98, 242, 0.2) 33.33%, rgba(164, 99, 252, 0.2) 50.22%, rgba(161, 100, 255, 0.2) 71.09%);
    border-radius: 100px;
}