@import "variables";

.contact-tab {
    .contact-info-section {
        .card {
            background-color: transparent;
            border: $border;

            .tag {
                position: absolute;
                top: -20px;
                right: 20px;
                width: 40px;
                height: 40px;
                border-radius: 5px;
                background-image: $primary;
                @media (max-width: 460px) {
                    top: -17px;
                    right: 20px;
                    width: 35px;
                    height: 35px;
                }
            }

            .card-img-top {
                min-width: 60px;
                width: 60px;
                height: 60px;
                background-color: $blue-200;

                i {
                    background-image: $primary;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;

                    &:before {
                        font-size: 25px;
                    }
                }
            }

            &:hover {
                i {
                    background-image: $primary;
                    -webkit-text-fill-color: $white;
                }
            }

            .card-body {
                h5,
                a {
                    background-image: $primary;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
}

.contact-section {
    .map {
        width: 100%;
        height: 306px;
        border-radius: 5px;

        iframe {
            border-radius: 5px;
        }
    }
}


input[type="date"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f073";
    background-image: $primary;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
}

/* change color of symbol on hover */


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

/* adjust clear button */
input[type="date"]::-webkit-clear-button {
    z-index: 1;
}

input[type="time"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="time"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f017";
    background-image: $primary;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
}

/* change color of symbol on hover */


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="time"]::-webkit-inner-spin-button {
    z-index: 1;
}

/* adjust clear button */
input[type="time"]::-webkit-clear-button {
    z-index: 1;
}

.bussinesss-hours-section {
    .hours {

        border-radius: 5px;
        background-color: $blue-200;
        border: $border;
    }
}


.qr-code-section {
    .image-box {
        width: 240px;
    }

    .image {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        margin: 0 auto;

        img {
            border-radius: 50%;

        }
    }

    .qr-code {
        max-width: 205px;
        // width: 80%;
        height: 132px;
        border: $border;
        border-radius: 5px;
        background-color: transparent !important;
        @media (max-width: 575px) {
            //max-width: 140px;
            //width: 100%;
            //height: 140px;
        }

    }

    .fa-qrcode {
        width: 200px;
        height: 200px;
        color: $blue-200;
        padding: 25px;
        @media (max-width: 575px) {
            width: 140px;
            height: 140px;
        }

        &:before {
            font-size: 175px;
            @media (max-width: 575px) {
                font-size: 130px;
            }
        }
    }

}

.make-appointment-section {
    .form-control {
        padding: 10px !important;
    }
}

.appoint-input {
    background-color: #222739 !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.make-appointment-section .form-control {
    padding: 15px !important;
}

.form-control:focus {
    box-shadow: none;
}

.make-appointment-section {
    .modal-body {
        .modal-dialog {
            .modal-content {
                box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
                border: none;
                border-radius: 0.475rem;
                outline: 0;

                .modal-header {
                    .btn-close {
                        padding: 0.5rem 0.5rem !important;
                        margin: -0.5rem -0.5rem -0.5rem auto !important;
                    }

                    .modal-title {
                        margin-bottom: 0 !important;
                        line-height: 1.5 !important;
                    }
                }
            }
        }

        .form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-clip: padding-box;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.313rem;
            color: #6c757d;
            display: block;
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.5;
            padding: 0.688rem 0.938rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            width: 100%;

            ::placeholder {
                font-size: 18px !important;
            }
        }

    }
}

.select2-container--default {
    .select2-selection--single {
        .select2-selection__rendered {
            width: 321px !important;
            line-height: 43px !important;
            font-size: 14px !important;
            padding-inline: 18px !important;
        }
    }
}

.select2-container--default {
    .select2-selection--single {
        height: 46px !important;
    }
}

.select2-container--default {
    .select2-selection--single {
        .select2-selection__arrow {
            height: 31px !important;
            top: 9px !important;
            right: 4px !important;
            width: 34px !important
        }
    }
}

.select2-container--default {
    .select2-search--dropdown {
        .select2-search__field {
            height: 46px !important;
            line-height: 43px !important;
            font-size: 14px !important;
            padding-inline: 18px !important;
        }
    }
}

.select2-results__option--selectable {
    height: 46px !important;
    line-height: 43px !important;
    font-size: 14px !important;
    padding-inline: 18px !important;
}