@font-face {
    font-family: "Playfair Display";
    src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-VariableFont_wdth\wght.ttf) format("truetype");
}

.text-playfair {
    font-family: "Playfair Display", serif;
}

.text-roboto {
    font-family: "Roboto", sans-serif;
}

@media (min-width: 768px) {
    .md-container {
        max-width: 991px;
        margin: auto;
    }
}

.tabs::-webkit-scrollbar {
    height: 0px;
}

.custom-checkbox input[type=checkbox] {
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #9d9d9d; /* border color */
    border-radius: 0px;
    cursor: pointer;
    position: relative;
}

    .custom-checkbox input[type=checkbox]:checked {
        background-color: #ffffff;
    }

        .custom-checkbox input[type=checkbox]:checked::after {
            content: ' ';
            color: #737373;
            position: absolute;
            left: -1px;
            top: 1px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-2 w-2" viewBox="0 0 16 20" fill="currentColor" stroke="currentColor" stroke-width="1"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>');
            background-size: 80% 80%;
            background-repeat: no-repeat;
            width: 1.5rem;
            height: 1.5rem
        }

.custom-radiobuttonlist {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

    .custom-radiobuttonlist input[type=radio] {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        --tw-border-opacity: 1;
        border-color: rgb(237 237 237 / var(--tw-border-opacity, 1));
        appearance: none;
        border-radius: 9999px;
        cursor: pointer;
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid #737373;
        margin-right: 5px;
        margin-lefT: 0px;
    }



        .custom-radiobuttonlist input[type=radio]:checked {
            background-color: #737373;
            /* padding: 3px; */
        }

            .custom-radiobuttonlist input[type=radio]:checked::after {
                content: 'a';
                color: #737373;
                position: absolute;
                left: -1px;
                top: 1px;
                width: 1.5rem;
                height: 1.5rem;
                background-color: #fff;
                border-radius: 50%;
                /* float: left; */
                display: none;
            }

    .custom-radiobuttonlist label {
        margin-right: 10px;
        color: rgb(115 115 115 / var(--tw-text-opacity, 1));
    }

.custom-dropdown {
    border: 1px solid #737373;
    width: 100%;
    padding: 30px 10px 10px 10px;
    -webkit-appearance: none;
    /* Safari/Chrome */ -moz-appearance: none; /* Firefox */
    appearance: none;
    background-color: white; /* padding: 0.5rem 2rem 0.5rem 0.75rem; */ /* right padding leaves space for arrow */
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' stroke='%23666' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem bottom 1rem;
    background-size: 1rem;
}

.custom-dropdown-text {
    position: absolute;
    top: 15px;
    left: 28px;
}

@media (max-width: 768px) {
    .custom-radiobuttonlist {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

        .custom-radiobuttonlist label {
            margin-right: 234px;
            display: block;
        }

            .custom-radiobuttonlist label:nth-of-type(4) {
                margin-right: 200px;
            }

            .custom-radiobuttonlist label:nth-of-type(5) {
                margin-right: 200px;
            }

        .custom-radiobuttonlist input[type=radio] {
            margin-right: 10px;
            display: block;
        }
}

#confirmation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #28252a;
    color: #ffffff;
    padding: 20px 40px;
    border-radius: 0px;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
}

    #confirmation.show {
        opacity: 1;
    }