/* Body */
.custom-body {
    touch-action: pan-y;
    overflow-x: hidden;
    margin-bottom: 60px;
}


/* Checkbox */
.upsizeCheckBox {
    height: 30%;
    width: 30%;
}


/* Placeholder */
::-webkit-input-placeholder {
    color: #777;
    font-size: small;
}

::placeholder {
    color: #777;
    font-size: small;
}


/* Alignment */
.centerDiv {
    align-items: center;
}


/* Bootstrap Overrides */
.text-primary {
    color: #780000 !important;
}

.btn-primary {
    background-color: #ed1c24 !important;
    border-color: #ed1c24 !important;
}

.font-weight-bold {
    font-weight: 600;
}


/* Appointment Form */
#NewAppointmentForm {
    width: 100%;
}


/* Country dropdown */
.countryCodeDropDown {
    background: lightgrey;
    pointer-events: none;
}


/* HTML */
html {
    font-size: 12px;
    font-family: 'Noto Sans';
    position: relative;
    min-height: 100%;
}


/* Desktop */
@media only screen and (min-width: 800px) {
    #NewAppointmentForm {
        width: 60%;
    }
}


@media (min-width: 768px) {

    html {
        font-size: 16px;
        font-family: 'Noto Sans';
    }

    input {
        border: none !important;
        width: 100%;
        border-bottom: 1px solid black !important;
        border-radius: 0px !important;
    }

    span {
        border-top: none !important;
        border-right: none !important;
        border-left: none !important;
        border-image: initial !important;
        border-radius: 0px !important;
    }


    #SaveAppointment {
        background: linear-gradient(135deg, #e200bc, 35%, #ff0000);
    }

        #SaveAppointment:hover {
            background: linear-gradient(135deg, #e200bc, 50%, #ff0000);
        }


    .hidden {
        display: none;
    }
}


/* Syncfusion dropdown */
.e-input-group-icon.e-ddl-icon.e-search-icon {
    background-color: lightgrey !important;
}


/* Language dropdown */
#languageDrop span {
    background-color: transparent !important;
    border-bottom-width: 0px !important;
    color: white;
}

#languageDrop input {
    background-color: transparent;
    border-bottom-width: 0px !important;
    color: white;
}

#languageDrop {
    background-color: transparent;
    border-bottom-width: 0px !important;
}

#LanguageCode {
    background-color: transparent;
    border-bottom-width: 0px;
}


#SelectLanguage {
    position: fixed;
    width: 100px;
    left: calc(95% - 88px);
    top: 0px;
}


.language-container {
    margin-top: 0.5vw;
    float: right;
    margin-bottom: 0.5vw;
}


.language-dropdown {
    min-width: 68px;
    width: 68px;
}


#SelectLanguage .e-input-group,
#SelectLanguage .e-input-group.e-control-wrapper {
    border: 0px black;
    margin-right: 0.5vw;
}


/* Masked textbox */
.maskedtextboxcustom .e-input-group,
.maskedtextboxcustom .e-input-group.e-control-wrapper,
.maskedtextboxcustom input {
    border: 0px solid !important;
    border-width: 0px !important;
    border-bottom: 0px solid !important;
}


/* PVI Card input */
.digit-group input {
    width: 30px;
    text-align: center;
    color: black;
    border-bottom: 0px solid black !important;
    border: 1px solid black !important;
}


.digit-group .splitter {
    color: black;
}


/* Google Recaptcha */
#googleReCaptchaDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Appointment title */
.appointment-title-container {
    /*padding-top: 63px;*/
}

.appointment-title {
    font-size: 150%;
    font-weight: 600;
}

.notice-text {
    border: none;
    text-align: center;
}


/* Syncfusion templates */
.branch-template {
    position: relative;
    left: 4px;
}

.service-template {
    position: relative;
    left: 1vw;
    top: 4px;
}


/* Mobile */
@media (max-width:620px) {

    #SelectLanguage {
        top: 43px !important;
    }

    #languageDrop input,
    #languageDrop span {
        color: black !important;
    }
}

.language-form {
    position: fixed;
    width: 100px;
    left: calc(95% - 88px);
    top: 0;
}

.banner-header {
    background-color: red;
    height: 45px;
}

.full-width {
    width: 100%;
}

.header-logo-container {
    width: 100%;
    text-align: center;
}

.header-logo-img {
    position: relative;
    top: 10px;
    max-width: 433px;
}

.custom-padding {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
}

.textCenter {
    text-align: center !important;
}

/* Body */
.disabled {
    pointer-events: none;
}

.hidden {
    display: none;
}


/* Sticky header */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

#myHeader {
    z-index: 99;
}


/* Preferred customer */
.preferred-checkbox {
    width: 15px;
}

.preferred-label {
    margin-left: 1%;
}


/* Branch address */
.branch-address {
    height: 10%;
}


/* Google reCAPTCHA */
.recaptcha-container {
    margin: auto;
}

.book-button-container {
    padding-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}


/* Language selector */
.language-container {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    float: right;
}

.language-dropdown {
    min-width: 68px;
    width: 68px;
}


/* Syncfusion templates */
.branch-template {
    position: relative;
    left: 4px;
}

.service-template {
    position: relative;
    left: 1vw;
    top: 4px;
}

.flex-direction-custom {
    display: block;
    flex-direction: column;
    margin-top: 1.25rem;
    align-items: center;
}

.flex-column-custom {
	display: flex !important;
	flex-direction: column !important;
    margin-top: 1.25rem;
    align-items: center;
}

.text-danger-custom {
    color: rgb(219, 0, 17);
}

.container.custom-padding {
    padding-top: 3.95rem !important; 
}

.container:has(#CancelAppointmentForm) {
	/*padding-top: 3rem !important;*/
}

.container:has(#CancelAppointmentForm) > .form-row {
	display: flex !important;
	justify-content: center !important;
	/*padding-top: 3rem !important;*/
}

body:has(#CancelAppointmentForm) header {
	display: block !important;
	width: 100% !important;
	height: 45px !important;	
}

body:has(#CancelAppointmentForm) #myHeader {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 45px !important;
	z-index: 9999 !important;
	background-color: red !important;	
}

body:has(#CancelAppointmentForm) #myHeader .full-width {
	width: 100% !important;
	height: 45px !important;	
}

body:has(#CancelAppointmentForm) #myHeader .header-logo-container {
	width: 100% !important;
	height: 45px !important;	
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body:has(#CancelAppointmentForm) #myHeader .header-logo-img {
	position: static !important;
	display: block !important;
	/*height: 35px !important;	
	width: auto !important;
	max-width: 200px !important;*/
	margin: 0 auto !important;
}