﻿.panel-custom > .panel-heading {
    font-weight: var(--bold);
    margin-bottom: 2rem;
    color: var(--secondary-color);
    font-size: 2.4rem;
}
.ui-datepicker-title select{
    min-width:10rem !important;
    width:unset;
}
.gender__field {
    flex-flow: wrap !important;
}
    .gender__field .checkbox label {
        padding-right: 1rem !important;
        padding-left: 2rem !important;
        line-height: 2.4rem !important;
    }
.form__field--full textarea{
    width:100%;
}
#ageValidationMsg,
#bsnValidationMsg {
    flex-direction: row;
}
    #ageValidationMsg span:first-child,
    #bsnValidationMsg span:first-child {
        margin-right: 1rem;
    }
.has-error {
    /*background-color: var( --error-color)*/
}
button.disabled {
    pointer-events: none;
}
.error {
    color: var( --error-color);
}
label.error {
    font-size: 1.6rem;
    font-weight: var(--regular);
    margin-top: 1rem;
}
p.error {
    font-weight: var(--regular);
}
p.warning {
    color: var(--warning-color);
    font-weight: var(--regular);
}
.date-picker .calendar{
    max-height:0px;
}
.date-picker {
    overflow: initial !important;
    max-height: unset !important;
}
    .date-picker.open .calendar {
        max-height: unset;
    }

.form__field.buttons {
    flex-direction: row;
    gap: 1rem;
    flex:auto;
}
.newappointmentlink {
    text-align: center;
    margin-top: 2rem
}
.appointmentLinkText {
    cursor: pointer;
    text-decoration: underline;
}
#divbtnPrint {
    text-align: center;
    margin-top: 2rem
}
#ageErrorMsg,
.locationerror,
.validateAge
#ageValidationMsg span:first-child,
#bsnValidationMsg span:first-child,
.un-authorized-info {
    color: var( --error-color);
}
#SecondAppointmentDiv{
    margin-top:2rem;
}

span.anchor-link {
    color: blue;
    text-decoration-line: underline;
}
.checkbox--disabled label {
    pointer-events:none;
}
input.error, textarea.error, select.error,
.has-error input {
    border-color: var( --error-color);
    border-width: 0.2rem;
}
.services__heading {
    flex-direction: column;
    align-items: flex-start;
}
.date-picker .ui-state-default:not(.ui-state-active) {
    color: var(--primary-color);
    font-weight:600;
}
.table tbody tr td {
    flex: 0 0 100%;
}
@media screen and (max-width: 500px) {
    input[type="search"], #labelforsearch {
        width: 100%;
    }
}
@media screen and (max-width: 380px) {
    .table tbody tr td {
        max-width: calc(100% - 10rem);
    }
}
@media screen and (max-width: 400px) {
    .table tbody tr td {
        max-width: calc(100% - 7rem);
    }
}
@media screen and (max-width: 430px) {
    .table tbody tr td {
        max-width: calc(100% - 5rem);
    }
}
@media screen and (max-width: 450px) {
    .table tbody tr td {
        max-width: calc(100% - 3rem);
    }
}
@media screen and (max-width: 470px) {
    .table tbody tr td {
        max-width: calc(100% - 1rem);
    }
}
@media (max-width:767px) {
    .form__field.buttons {
        flex-direction: column;
        gap:0.5rem;
    }
}
.hide{
    display:none !important;
}
.right {
    text-align: right !important;
}
.center {
    text-align: center !important;
}
.visible {
    visibility: visible !important;
}
.pointernone{
    pointer-events:none !important;
}
.flexdisplay{
    display:flex !important;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display:none;
}
input[type="search"]::-ms-clear {
    display: none;
}
.appointmentdetails:not(.hide) + .page-footer {
    margin-top: 2rem;
}

/* landline code dropdown*/
@media (max-width: 850px) {
    .form__field .numberwithcode {
        width: 100%;
    }
        .form__field .numberwithcode .number {
            margin-top:1.5rem;
        }
}
    @media (min-width: 850px) {
        .form__field .numberwithcode {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            width: 100%;
        }

            .form__field .numberwithcode .code,
            .form__field .numberwithcode .number {
                display: flex;
                flex-direction: column;
            }

            .form__field .numberwithcode .code {
                width: 25%;
            }

            .form__field .numberwithcode .number {
                width: calc(75% - 1rem)
            }
        .dropdown-content {
            margin-top: 7.6rem;
        }
    }


    .dropdown-content {
        position: absolute;
        max-height: 20rem;
        overflow-y: auto;
        border: 0.1rem solid var(--gray-color-darker);
        border-radius: 1rem;
        display: none;
        z-index: 1000 !important;
        background-color: var(--primary-text-color);  
    }

        .dropdown-content div {
            padding: 1rem;
            cursor: pointer;
            display: flex;
        }

            .dropdown-content div span:last-child {
                float: right;
                margin-left: auto;
            }
            .dropdown-content div span:first-child {
                margin-right: 1rem;
                float: left;
                margin-left: initial;
            }

            .dropdown-content div:hover {
                background-color: var(--secondary-color);
                color: var(--secondary-text-color)
            }

    .show {
        display: block !important;
    }
@media (max-width: 600px) {
    .dropdown-content {
        max-width: calc(100% - 4rem);
    }
}

@media (max-width: 700px) {
    .dropdown-content {
        max-width: calc(100% - 6rem);
    }
}

@media (min-width: 701px) {
    .dropdown-content {
        max-width: calc(50% - 4rem)
    }
}
.landcode,
.land {
    z-index: 98;
    position: relative;
    width: 100%;
    height: auto;
    max-height: 4.5rem;
    background: white;
    overflow: hidden;
    transition: all 0.3s 0s ease-in-out;
}
    .landcode::before,
    .land::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        height: 4.3rem;
        background: #FFF;
        border-radius: 1rem;
    }

    .landcode::after,
    .land::after {
        content: "\EA09";
        z-index: 2;
        position: absolute;
        top: 2rem;
        right: .5rem;
        font-size: 0.7rem;
        color: var(--primary-color);
    }

.disable {
    pointer-events: none;
    background-color: var(--btn-disabled-background);
}
.not_allowed{
    cursor:not-allowed;
}