/**
* 2007-2025 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2025 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/


.tv-cms-chatbox-container.tv-cms-chatbox-position-bottom_left {
    bottom: 0;
    position: fixed;
    margin: 1em;
    left: 0;
    z-index: 9999;
}

.tv-cms-chatbox-container.tv-cms-chatbox-position-bottom_right {
    bottom: 0;
    position: fixed;
    margin: 1em;
    right: 0;
    z-index: 9999;
}

.tv-cms-chatbox-container.tv-cms-chatbox-position-top_left {
    top: 0;
    position: fixed;
    margin: 1em;
    left: 0;
    z-index: 9999;
}

.tv-cms-chatbox-container.tv-cms-chatbox-position-top_right {
    top: 0;
    position: fixed;
    margin: 1em;
    right: 0;
    z-index: 9999;
}

.tv-cms-chat-message {
    background-color: rgb(253, 251, 251);
    height: 200px;
    width: 300px;
}

.tv-cms-message {
    height: 150px !important;
    width: 300px !important;
}

.tv-cms-chatbox-container.tv-cms-chatbox-position-left {
    right: auto;
    left: 0;
}

.tv-cms-widgets-container {
    max-width: 400px;
    margin-top: 20px;
}

.tv-cms-chatbox-opener {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    color: #f0f0f0;
    margin: 25px auto 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    cursor: pointer;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    position: relative;
    background: #04AA6D;
}

/* pulse wave */
.tv-cms-chatbox-opener:before {
    content: "";
    position: absolute;
    width: 170%;
    height: 170%;
    -webkit-animation: pulsate1 1500ms ease-out infinite;
    animation: pulsate1 1500ms ease-out infinite;
    opacity: 1;
    border-radius: 50%;
    top: -33%;
    left: -33%;
    z-index: -1;
    background: rgb(177 167 167 / 48%);
}

@-webkit-keyframes pulsate1 {
    0% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;

    }
}

@keyframes pulsate1 {
    0% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1);
        opacity: 0;
    }
}

.tvcms-close-icon-lg {
    width: 35px;
    height: 28px;
    vertical-align: middle;
    display: inline-block;
    background: url(../img/download.ico) no-repeat;
}

.tv-cms-chatbox-opener>i {
    font-size: 2em;
    line-height: 55px;
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #ffffff;
}

.tv-cms-chatbox-positions-bottom_right {
    position: fixed;
    right: 20px;
    bottom: 96px;
    width: 400px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: left;
    border-radius: 10px;
    -webkit-animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
}

.tv-cms-chatbox-positions-bottom_left {
    position: fixed;
    bottom: 89px;
    width: 400px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: left;
    border-radius: 10px;
    -webkit-animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
}

.tv-cms-chatbox-positions-top_left {
    position: fixed;
    top: 120px;
    width: 400px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: left;
    border-radius: 10px;
    -webkit-animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
}

.tv-cms-chatbox-positions-top_right {
    position: fixed;
    right: 20px;
    top: 120px;
    width: 400px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: left;
    border-radius: 10px;
    -webkit-animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomOut .2s cubic-bezier(.42, 0, .58, 1);
}

.tv-cms-chatbox.tv-cms-chatbox-is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}

.tv-cms-chatbox-position-left .tv-cms-chatbox {
    right: auto;
    left: 20px;
}

.tv-cms-chatbox-header {
    font-size: 13px;
    font-weight: 500;
    color: #f3f3f3;
    background: #04AA6D;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 16px;
}

.tv-cms-chatbox-header-title {
    font-size: calc(17px + (19 - 17) * ((100vw - 280px) / (1920 - 280)));
    margin-left: 20px;
    margin-right: 20px;
}

.tv-cms-chatbox-header-subtitle {
    font-size: calc(12px + (14 - 12) * ((100vw - 280px) / (1920 - 280)));
    line-height: 1.2em;
    padding-top: 8px;
    padding: 10px 20px;
}

.tv-cms-chatbox-header .span {
    float: right;
}

.tv-cms-chatbox-header img {
    width: 50px;
    margin: -15px 20px 10px 20px;
    background: #04AA6D;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}

.tv-cms-chatbox-header .agent {
    font-size: 12px;
    font-weight: 300;
}

.tv-cms-chatbox-header .online {
    opacity: 0.4;
    font-size: 11px;
    font-weight: 300;
}

.tv-cms-chatbox-body {
    background: #fff;
    width: 100%;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    padding: 20px;
}

.tv-cms-chatbox-is-active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.tv-cms-chatbox-is-float {
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

.tv-cms-chatbox-account,
.tv-cms-widget-account {
    padding: 10px;
    background: #f4f4f4;
    border-radius: 10px;
    position: relative;
    top: 0;
    margin-bottom: 10px;
    border-left: 4px solid #797979;
}

.tv-cms-chatbox-account.tvactive {
    border-left: 4px solid #04AA6D;
}

.tv-cms-chatbox-account.tvdeactive {
    opacity: 0.7;
}

.tv-cms-widget-account {
    /*background: #eaeaea;*/
    background: #ffffff;
    border-top: 1px dotted #04AA6D;
    border-right: 1px dotted #04AA6D;
    border-bottom: 1px dotted #04AA6D;
}

.tv-cms-chatbox-account:hover,
.tv-cms-widget-account:hover {
    opacity: 0.8;
}

.tv-cms-chatbox-account>a,
.tv-cms-widget-account>a {
    display: block;
    text-decoration: none;
}

.tv-cms-chatbox-account>a:focus,
.tv-cms-chatbox-account>a:active,
.tv-cms-widget-account>a:focus,
.tv-cms-widget-account>a:active {
    text-decoration: none;
}

.tv-cms-account-avatar,
.tv-cms-widget-account-avatar {
    width: 50px;
    float: left;
}

.tv-cms-account-avatar img,
.tv-cms-widget-account-avatar img {
    max-width: 100%;
    border-radius: 100%;
}

.tv-cms-account-details,
.tv-cms-widget-account-details {
    padding-top: 5px;
    float: left;
    max-width: calc(90% - 135px);
    margin-left: 30px;
}

.tv-cms-account-name,
.tv-cms-widget-account-name {
    font-size: 14px;
    line-height: 1.4em;
    color: #545050;
}

.tv-cms-account-title,
.tv-cms-widget-account-title {
    font-size: 11px;
    line-height: 1.4em;
    color: #757575;
}

.tv-cms-account-status,
.tv-cms-widget-account-status {
    float: right;
    margin-top: 12px;
    background: #20ab54;
    color: #fff;
    font-size: 0;
    padding: 0px 6px;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 17px 0;
}

.tv-cms-account-status.tv-cms-account-offline,
.tv-cms-widget-account-status.tv-cms-widget-account-offline {
    background: #797979;
}

.tv-cms-account-offline-text,
.tv-cms-widget-account-offline-text {
    font-size: 12px;
    line-height: 1.4em;
    color: #773636;
    padding-top: 10px;
}

.tv-cms-chatbox-icon {
    background-image: url(../img/producttab-logo-white.png);
    display: block;
    width: 52%;
    height: 52%;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.tv-cms-chatbox-icon-close {
    background-image: url(../img/close.png);
    width: 35%;
    height: 35%;
}

.tv-cms-widget-button-text {
    font-size: 14px;
    padding-top: 5px;
    color: #04AA6D;
    font-weight: bold;
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@media only screen and (max-width: 480px) {
    .tv-cms-chatbox {
        width: 350px;
    }

    .tv-cms-chatbox-body {
        padding: 10px;
    }
}

@media only screen and (max-width: 400px) {
    .tv-cms-chatbox {
        max-width: calc(100% - 40px);
    }

    .tv-cms-chatbox-account,
    .tv-cms-widget-account {
        padding: 8px;
    }
}

.open-button {
    background-color: #04AA6D;
    color: white;
    font-size: 14px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
}

.open-button svg {
    vertical-align: bottom;
    margin-right: 5px;
}

.open-button span+svg {
    margin: 0 0 0 4px;
}

button:focus {
    outline: none;
}

/* The popup chat - hidden by default */
.chat-popup {
    bottom: 0;
    right: 15px;
    z-index: 9;
}

/* input {
    display: block !important;
} */

.chat-popup {
    position: fixed;
    right: 0px;
    left: 0px;
    margin: auto;
    top: 0px;
    bottom: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.chat-popup .form-container {
    position: relative;
    height: max-content;
    max-width: 500px;
    margin: 15px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    -webkit-transition: all .3s ease-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-align: left;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-radius: 10px;
    z-index: 2;
}

.chat-popup.show {
    opacity: 1;
    visibility: visible;
}

.chat-popup.show .form-container {
    opacity: 1;
    visibility: visible;
    -webkit-animation: zoomIn .3s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .3s cubic-bezier(.42, 0, .58, 1);
}

.chat-popup.close {
    opacity: 0;
    visibility: hidden;
}

.chat-popup.close .form-container {
    opacity: 0;
    visibility: hidden;
    -webkit-animation: zoomOut .3s cubic-bezier(.42, 0, .58, 1);
    animation: zoomOut .3s cubic-bezier(.42, 0, .58, 1);
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}


@-webkit-keyframes zoomOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
}

.form-container {
    padding: 19px;
    background-color: white;
}

/* Full-width textarea */
.form-container .textbox {
    width: 100%;
    padding: 10px;
    margin: 2px 0 20px 0;
    border: none;
    background: #f1f1f1;
    border-radius: 3px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn.send {
    background-color: #04AA6D;
    color: white;
    padding: 13px 15px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.open-button:after,
.form-container .btn.send:after {
    position: absolute;
    content: "";
    width: 50px;
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
    bottom: 0%;
    left: -196%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.20);
}

.open-button:hover:after,
.form-container .btn.send:hover:after {
    left: 300%;
    -webkit-transition: all 1.5s ease 0.1s;
    -o-transition: all 1.5s ease 0.1s;
    transition: all 1.5s ease 0.1s;
}

.form-container .btn.send svg {
    margin-left: 6px;
    display: block;
    fill: #fff;
}

.form-container .cancel {
    position: absolute;
    /* left: 0; */
    top: -9%;
    right: -7%;
    width: 40px;
    height: 40px;
    background-color: #f1f1f1;
    border: 2px solid #b7b7b7;
    border-radius: 100%;
    margin: 0;
    padding: 0;
}

label.tv_title {
    margin-bottom: 0;
}

.form-container .cancel svg {
    vertical-align: middle;
    transition: all 200ms ease-in-out;

}

.form-container .cancel svg path:nth-child(2) {
    fill: #000;

}

.form-container .cancel:hover svg {
    transform: rotate(180deg);
}

.form-container #tvcust_name {
    margin: 2px 0 5px 0;
}

.error-feedback {
    display: none;
    color: #ff9a52;
    font-size: 14px;
}

.form-container hr {
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}

input:focus-visible {
    outline: none;
}

.form-container input:focus {
    background-color: #ddd;
}

button:focus {
    outline: none !important;
}

#wrapper {
    position: relative;
}

@media (max-width:575px) {
    .form-container .cancel {
        top: -5%;
        right: -4%;
    }

    .tv-cms-chatbox-opener {
        width: 55px;
        height: 55px;
    }

    .tv-cms-chatbox-positions-top_left {
        bottom: 370px;
    }
}

@media (max-width:375px) {
    .open-button {
        font-size: 13px;
        padding: 10px 13px;
    }

    .open-button svg:first-child {
        margin-right: 3px;
        width: 21px;
        height: 21px;
    }

    .open-button span+svg {
        margin: 0 0 0 3px;
        height: 23px;
        width: 23px;
    }
}


#notification {
    display: none;
    padding: 10px 20px;
    border-radius: 5px;
    position: fixed;
    top: 43px;
    right: 20px;
    z-index: 9999;
}

.error-message {
    color: #721c24;
    border: 1px solid transparent;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

.success-message {
    color: #155724;
    border: 1px solid transparent;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

input[type="time"],
.delivery_dates {
    /* Your custom styles */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Additional styles for specific browsers */
    /* For Chrome, Safari, and Opera */
    -webkit-appearance: none;
    /* For Firefox */
    appearance: none;
}

.delivery_dates,
#delivery_time_from,
#delivery_time_to {
    border: 1px solid #ccc;
}

.delivery_label {
    text-align: center;
    /* Center aligns the text */
    font-weight: bold;
    /* Makes the text bold */
}

.delivery_time_set,
.delivery_date_set {
    display: flex;
    gap: 15px;
    justify-content: left;
    margin-top: 21px;
    align-items: center;
}

.delivery_time_set {
    margin-bottom: 20px
}

.center-container.row {
    margin-inline: 0;
    margin-top: 20px;
}

#hook-display-before-carrier .center-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.delivery_date_input {
    display: flex;
    align-items: center;
    /*    gap: 15px;*/
    /* margin-top: 15px; */
}

.delivery_date_input label {
    margin: 0;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    padding: 0px 10px;
    line-height: 38px;
    border-radius: 4px 0 0 4px;
    border-inline-end: 0;
}

.delivery_date_input label+input {
    /* border-top-left-radius: 0;
    border-bottom-left-radius: 0; */
    height: 40px;
    max-width: 190px;
}

.delivery_date_record .center-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.delivery_date_record .delivery_date_input {
    margin-top: 0
}

.hidden {
    display: none;
}

.continue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#hook-display-before-carrier {
    margin-bottom: 15px;
}

.delivery_title:has(#date_chages_code),
.delivery_title:has(input#myCheckbox) {
    display: flex;
    align-items: center;
    gap: 10px;
}

.delivery_title h3:has(+ input#myCheckbox, + .md-checkbox) {
    margin-bottom: 0;
}

.md-checkbox {
    position: relative;
    margin: initial;
    text-align: left;
}

.md-checkbox label {
    padding-left: 28px;
    margin-bottom: 0;
}

.md-checkbox [type=checkbox] {
    display: none !important;
    outline: 0;
}

.md-checkbox .md-checkbox-control {
    cursor: pointer;
}

.md-checkbox .md-checkbox-control::after,
.md-checkbox .md-checkbox-control::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.md-checkbox .md-checkbox-control::before {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: #fff;
    border: 2px solid #b3c7cd;
    border-radius: 2px;
    -webkit-transition: background .3s;
    transition: background .3s;
}

.md-checkbox .indeterminate+.md-checkbox-control::before,
.md-checkbox [type=checkbox]:checked+.md-checkbox-control::before {
    background: #25b9d7;
    border: 0;
}

.md-checkbox .indeterminate+.md-checkbox-control::after,
.md-checkbox [type=checkbox]:checked+.md-checkbox-control::after {
    top: 4.5px;
    left: 3px;
    width: 14px;
    height: 7px;
    border: 2px solid #fff;
    border-top-style: none;
    border-right-style: none;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.delivery_form_data:has(button) {
    text-align: center;
}

.delivery_form_data button {
    margin-top: 20px;
}

div#ui-datepicker-div {
    width: 18%;
    box-shadow: 0 0 13px rgb(80 80 80 / 18%);
    border: none;
}

.bootstrap input.required::before {
    position: relative;
    font-size: 14px;
    line-height: 12px;
    color: red;
    content: "*";
}

div#message {
    display: none;
}

#notification {
    display: none;
    padding: 10px 20px;
    border-radius: 5px;
    position: fixed;
    top: 43px;
    right: 20px;
    z-index: 9999;
}

.error-message {
    color: #721c24;
    border: 1px solid transparent;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

.success-message {
    color: #155724;
    border: 1px solid transparent;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

/*product page design start*/
.carrier_selector_inner {
    text-align: left;
    margin-bottom: 1.5rem;
}

.add_form_control {
    background: #fff;
    color: unset;
    width: fit-content;
    border: 1px solid;
}

.carrier_selection_wrapper {
    max-width: 600px;
    margin: 2rem auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

/* Form Section */
.scheduler-form {
    margin-bottom: 1.5rem;
}

.product-variants-item label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: start;
    font-size: 15px;
    letter-spacing: .5px;
}

.product-variants-item select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #f9f9f9;
}

/* Delivery Details */
#delivery-details {
    margin-top: 1rem;
}

.delivery-rule {
    /*margin-bottom: 1rem;*/
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fdfdfd;
    transition: all 0.3s ease;
}

/* Blocks */
/*#pp_DateBlock_3,
#pp_TimeBlock_3 {
    margin-bottom: 1rem;
}*/

#pp_TimeBlock_3 label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: .5px;
    text-align: start;
    color: #030303;
    font-size: 14px;
}

.date-range {
    color: #ff5f6d;
    font-size: 0.95rem;
    font-weight: 600;
}

#pp_deliveryTime_3 p {
        background-color: #e9e5e5;
    padding: 7px 10px;
    /*margin: 0.3rem 0;*/
    border-radius: 4px;
    text-align: center;
    color: #333;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
}

/*#pp_deliveryTime_3 p:hover {
    background-color: #e9e5e5;
    color: #fff;
    cursor: pointer;
}*/

#carrier_selector h2 {
    color: #030303;
    display: inline-block;
    /*background-size: 400% 100%;*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    font-size: 24px !important;
    margin-bottom: 22px;
    animation: gradientMove 3s linear infinite;
    /* Continuous animation */
    font-family: math;
    font-size: 27px;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

.title_section {
    text-align: center;
}

/*custom select */
/* Dropdown Wrapper */
.custom-dropdown {
    position: relative;
    /*  display: block;
    width: 100%;*/
}

/* Custom Select start */
.custom-select {
    appearance: none;
    /* Removes default browser styling */
    -webkit-appearance: none;
    /* Safari support */
    -moz-appearance: none;
    /* Firefox support */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover & Focus State */
.custom-select:hover,
.custom-select:focus {
        border-color: #b7a9a9;
    box-shadow: 0 0 13px rgb(80 80 80 / 18%);
    outline: none;
}

.custom-dropdown::after {
    content: '\276F';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
    font-size: 15px;
    color: #666;
    font-weight: 600;
}

/* Option Styles (Optional: For older browsers where select cannot be styled) */
.custom-select option {
    padding: 0.5rem;
    font-size: 1rem;
}


/*custom select end */
#pp_DateBlock_3 .label {
    font-weight: 600;
    letter-spacing: .5px;
    color: #030303;
    font-size: 14px;
}

div#pp_deliveryTime_3 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}


/*product page design end*/

/*Layout Default start*/
.layout_Default_wrappper .default_default_lable {
    font-size: 16px;
    font-weight: 600;
    color: #030303;
}

input#add_datepicker {
    border-radius: 4px 0 0 4px;
    cursor: pointer;
}

.input-group-addon {
    border-radius: 0 4px 4px 0;
}

.layout_Default_wrappper #add_datepicker:hover,
.layout_Default_wrappper #add_datepicker:focus {
    border-color: #b7a9a9;
    box-shadow: 0 0 13px rgb(80 80 80 / 18%);
    outline: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: #ff5f6d !important;
}

#checkout-delivery-step content {
    padding: 0 10px;
}

/*.ui-state-default, .ui-widget-content .ui-state-default:hover {
    color: #fff !important;
}*/
.ui-state-default,
.ui-widget-content .ui-state-default {
    border-radius: 4px;
}

.ui-datepicker-calendar th span {
    color: #030303;
    font-size: 15px;
    letter-spacing: .5px;
    font-family: sans-serif;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    border-radius: 5px;
}


#add_deliveryTime {
    border-radius: 4px;
}

#add_deliveryTime:hover,
#add_deliveryTime:focus {
    border-color: #b7a9a9;
    box-shadow: 0 0 13px rgb(80 80 80 / 18%);
    outline: none;
}
#add_deliveryTime {
    padding: 6px 10px 7px;
}

/*Layout Default end*/
/*Layout 1 start*/

.layout1_wrapper #TimeBlock {
    padding-inline-end: 0;
}

.layout1_wrapper .ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    box-shadow: 0 0 13px rgb(80 80 80 / 18%);
    border: none;
}

.layout1_wrapper #add_datepicker .ui-widget.ui-widget-content {
    border: none;
    width: 100%;
}
.layout1_calender label {
    font-size: 16px;
    font-weight: 600;
}



.delivery-time-button {
    border-radius: 5px;
    margin-bottom: 10px;
    width: auto;
    color: #030303f5;
    font-size: 14px;
    padding: 9px 14px;
    background-color: #f6f6f6;
    font-weight: 500;
}

.delivery-time-button:hover,
.delivery-time-button:focus {
    background-color: #e9e5e5 !important;
    color: #000000 !important;
}

#time-block {
    font-size: 18px;
    font-weight: 500;
    color: #ff5f6d;
    display: inline-block;
    margin-bottom: 0;
}

#time-block span {
    border: 1px dashed;
    padding: 7px 8px 8px;
    font-weight: 600;
}

#delivery-details h2 {
    font-size: 18px;
    text-transform: capitalize;
    line-height: 1.5;
}

p#date-block {
    color: #ff5f6d;
    font-size: 18px;
    font-weight: 600;
    border: 1px dashed;
    display: inline-block;
    padding: 10px;
}

#TimeBlock label {
    font-size: 16px;
}
div.calendar-container {
    margin-top: 0;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    color: #000000 !important;
}

.ui-widget-content .ui-state-default.ui-state-active {
    background-color: #ff5f6d !important;
    color: #fff !important;
}

.form-group.time_slots_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.form-group.time_slots_wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    /*justify-content: center;*/
}

#delivery-details {
    text-align: start !important;
}

.layout_title_wrapper {
    text-align: center;
    padding-inline-start: 16px;

}

.layout_title_wrapper {
    text-align: start;
    font-weight: 600 !important;
    text-transform: capitalize !important;
}

/*Layout 1 end*/
/*Layout 2 start*/
.calendar-button {
    border-top: 3px solid #ff5f6d;
}

#calendar-grid .selected {
    background-color: #ff5f6d !important;
    color: white;
    border-color: white;
}

#calendar-grid .calendar-button {
    border-radius: 5px;
    background-color: #f6f6f6;
    font-size: 14px;
    letter-spacing: .4px;
    font-weight: 500;
    max-width: min-content;
}

#calendar-grid::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    /* Height of the scrollbar (for horizontal scroll) */
}


#calendar-grid::-webkit-scrollbar-track {
    background: #f4f4f4 !important;
    /* Background color of the track */
    border-radius: 2px;
    /* Rounded edges for the track */
}


#calendar-grid::-webkit-scrollbar-thumb {
    background-color: #ffc3714d;
    border-radius: 5px;
    /* Rounded edges for the thumb */
    border: 2px solid #ffc3714d;
    /* Border around the thumb */
}

/* Scrollbar Thumb on Hover */
#calendar-grid::-webkit-scrollbar-thumb:hover {
    background: #ffc3714d;
    background-color: #ffc3714d;

}

/* Scrollbar Corner (if present) */
#calendar-grid::-webkit-scrollbar-corner {
    background: #f4f4f4;
    /* Corner background color */
}



.calendar-container {
    display: block !important;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    height: 375px !important;
}

#calendar-grid {
    display: flex;
    margin-bottom: 10px;
    overflow-y: scroll !important;
    max-width: -webkit-fill-available;
    height: 188px !important;
    flex-wrap: wrap;
    /*overflow-y: visible;*/
    overflow-x: visible !important;
}
body#checkout section.checkout-step.-current .step-title.layout_title_wrapper {
    font-size: 18px !important;
    border-bottom: unset;
    padding-bottom: 0;
}

  

/*Layout 2 end*/

@media(max-width: 768px) {
    #carrier_selector h2 {
        font-size: 21px !important;
    }

    #pp_deliveryTime_3 p {
        margin: 0;
    }

    div#pp_deliveryTime_3 {
        gap: 7px;
    }

    div#ui-datepicker-div {
        width: 52%;
        left: 16% !important;
    }

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

    #delivery-details h2 {
        font-size: 17px;
    }

    p#date-block {
        font-size: 15px;
        padding: 5px;
    }

    #time-block span {
        padding: 4px 8px 5px;
    }

    #time-block {
        font-size: 15px;
    }

}

@media(max-width: 575px) {
    div#ui-datepicker-div {
        width: 89%;
        left: 4% !important;
    }

    #add_datepicker .ui-datepicker-inline {
        width: 100%;
        overflow-x: scroll;
    }
    .layout1_wrapper+.col-sm-6 {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }

}

body#checkout section.checkout-step .content {
    padding: 20px 11px !important;
}



@media(min-width: 992px) and (max-width: 1199px) {
    .layout1_wrapper .col-sm-6.layout1_calender {
        width: 58.33333%;
    }

    .layout1_wrapper .col-sm-6.layout1_timedata {
        width: 41.66667%;
    }

    #delivery-details h2 {
        font-size: 15px;
    }

    p#date-block {
        font-size: 14px;
        padding: 6px;
    }

    #time-block span {
        padding: 6px 6px 7px;
    }

    #time-block {
        font-size: 14px;
    }
}

@media(max-width: 767px) {
    .layout1_wrapper {
        display: flex;
        flex-direction: column;
    }

    .layout1_wrapper .layout1_calender {
        width: 100%;
    }

    .layout1_wrapper .layout1_timedata {
        width: 100%;

    }

    #calendar-grid .calendar-button {
        font-size: 13px;
        padding: 8px;
    }
}

@media(max-width: 575px) {
    .calendar-container {
        height: 500px !important;
    }
}

@media(max-width: 400px) {
    .calendar-container {
        height: 518px !important;
    }
}
/* CSS from tvdelivery_date.tpl */
/* Conditional CSS for tv_layout_status eq 1 */
.calendar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

#calendar-grid {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    overflow-x: scroll;
    max-width: -webkit-fill-available;
}

.time-slots {
    display: grid;
    grid-template-columns: auto auto auto;
}

.calendar-button,
.time-slot-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

#calendar-grid::-webkit-scrollbar,
.time-slots::-webkit-scrollbar {
    height: 8px;
}

#calendar-grid::-webkit-scrollbar-track,
.time-slots::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 255);
}

#calendar-grid::-webkit-scrollbar-thumb,
.time-slots::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, 0.4);
    border-radius: 4px;
}

#selected-date {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Conditional CSS for tv_select_layout eq 2 */
#TimeBlock {
    text-align: start;
}
.ui-datepicker-prev,
.ui-datepicker-next {
    display: none;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 44%;
    border: 1px solid #00000014;
    margin-right: 5px;
    margin-left: 5px;
    padding: 4px 0px;
}

/* Conditional CSS for tv_select_layout eq 1 */
.ui-datepicker-prev,
.ui-datepicker-next {
    display: block;
    padding: 17px;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 44%;
    border: 1px solid #00000014;
    margin-right: 5px;
    margin-left: 5px;
    padding: 4px 0px;
}

/* General CSS */
.col_sm_6_width {
    float: left;
    width: 46%;
}

.label {
    font-weight: bold;
}

.ui-datepicker {
    width: fit-content;
}

.input-group-addon {
    padding: .5rem 1.5rem;
    margin-left: -10px;
}

.form-control:focus,
.input-group.focus {
    outline: none !important;
}

.ui-state-default {
    border: 1px solid #c5c5c524;
    background: #ffffff;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 1px solid #00000014;
}

.ui-widget-header {
    background: #f8f9ff;
}

.ui-datepicker td a {
    padding: 2px;
    text-align: center;
    line-height: 22px;
}

.page-order table th {
    font-size: 12px;
    line-height: 22px;
}

#add_deliveryTime {
    width: auto;
}

.date-range {
    margin-bottom: 0rem;
}

.delivery-rule {
    display: none;
}

.no-delivery-available {
    display: none;
}

/* Styles from tvdeliverydate_slots.tpl */
.col_sm_6_width {
    float: left;
    width: 46%;
}

.label {
    font-weight: bold;
}

.input-group-addon {
    padding: .5rem 1.5rem;
    margin-left: -10px;
}

.form-control:focus,
.input-group.focus {
    outline: none !important;
}

.ui-state-default {
    border: 1px solid #c5c5c524;
    background: #ffffff;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 1px solid #00000014;
}

.ui-widget-header {
    background: #f8f9ff;
}

.ui-datepicker td a {
    padding: 2px;
    text-align: center;
    line-height: 22px;
}

.page-order table th {
    font-size: 12px;
    line-height: 22px;
}

#add_deliveryTime {
    width: auto;
}

/* Layout specific styles */
/* Layout 3 */
.layout-3 .time-slots {
    display: grid;
    grid-template-columns: auto auto auto;
}

.layout-3 .calendar-button,
.layout-3 .time-slot-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.layout-3 .calendar-button:focus,
.layout-3 .time-slot-button:focus {
    outline: none;
}

.layout-3 .selected {
    background-color: rgba(47, 181, 210, 255);
    color: white;
    border-color: white;
}

.layout-3 #selected-date {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Layout 2 */
.layout-2 #TimeBlock {
    text-align: start;
}

.layout-2 .ui-datepicker-prev,
.layout-2 .ui-datepicker-next {
    display: none;
}

.layout-2 .ui-datepicker {
    width: fit-content;
}

.layout-2 .ui-datepicker select.ui-datepicker-month,
.layout-2 .ui-datepicker select.ui-datepicker-year {
    width: 44%;
    border: 1px solid #00000014;
    margin-right: 5px;
    margin-left: 5px;
    padding: 4px 0px;
}

/* Layout 1 */
.layout-1 .ui-datepicker-prev,
.layout-1 .ui-datepicker-next {
    display: block;
    padding: 17px;
}

.layout-1 .ui-datepicker {
    width: auto;
}

.layout-1 .ui-datepicker select.ui-datepicker-month,
.layout-1 .ui-datepicker select.ui-datepicker-year {
    width: 44%;
    border: 1px solid #00000014;
    margin-right: 5px;
    margin-left: 5px;
    padding: 4px 0px;
}