@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html,
body {
	margin: auto;
	font-family: 'Lato';
	font-size: 14px;
}

footer {
	margin-top: 20px;
	font-size: 13px;
}

a {
	text-decoration: none;
}

.tophr {
	margin-left: 15px;
	margin-top: 5px !important;
	opacity: .70;
	color: #9b9999;
}
.custom-tooltip {
	--bs-tooltip-bg: var(--bs-primary);
}

.form-control::placeholder{
    opacity: 0.6 !important;
	font-size:9.5pt !important;
	font-style: italic;
}
.form-control::-moz-placeholder {
    opacity: 0.6 !important;
	font-size:9.5pt !important;
	font-style: italic;
}
.text-secondary-gv{
	--bs-text-opacity: 0.6;
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
	font-size:9.5pt !important;
}
/* Overflow */
/*
.list-group-flush>.list-group-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/

/* Timer */
.timer {
	position: absolute;
	font-size: 14px;
	letter-spacing: 1.2;
	display: none;
}

.timer-content {
	display: flex;
	align-items: center;
}

.timer-content>span {
	padding-left: 8px;
}

.timer-content>label {
	padding-left: 5px;
}

/* Cursor */
a, li.list-group-item > div > div > label > span , li.list-group-item > div  > i, li.list-group-item > div > div > label > div > label, li.list-group-item > div  > label > div > div > span , table.SelectTimeTable > tbody > tr > td , .calendar_arrow_padding > i{
    cursor: pointer !important;
}

/* Add to Calendar Button */
add-to-calendar-button.atcb-light {
    --btn-background:var(--bs-primary);
    --btn-background-hover:var(--bs-primary);
	--btn-border:var(--bs-primary);
	--btn-text: var(--btn-text-col);
	--font:'Lato';
	--bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
}

/* Button */
button,
a.btn {
	border-radius: 3px !important;
	text-transform: uppercase;
	font-size: 14px !important;
	font-weight: 600 !important;
}
a > label {
	text-decoration: underline !important;
}

.btn-landing {
	padding: 25px 85px;
}

.ValidationError {
	color: red !important;
	text-transform: none !important;
	font-weight: 500 !important;
}

/* Content */
.label-i10 {
	font-size: 14px;
	font-style: italic;
}

.MainTitle {
	font-size: 24px;
	font-style: italic;
}

.timeout-icon {
	font-size: 75px;
}

.list-group {
	font-size: 13px;
}

.avatar {
	box-sizing: border-box;
	max-height:75px !important;
	border:2px solid var(--bs-primary);
	border-radius: 50%;
	display: inline-flex;
	position: relative;
	text-align: center;
	vertical-align: middle;
}

.avatar.avatar-lg .avatar-content,
.avatar.avatar-lg img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.avatar img {
	border-radius: 50%;
}

.card-header-border {
	border-bottom: none;
}

.credit-card-dot {
	font-size: 2.5rem !important;
}

h6.fw-bold.px-4 {
	line-height: inherit;
}

/* MakeAppontment */
.font-success {
	font-size: 35px;
}

.table>:not(caption)>*>* {
	padding: 0.3rem 0.5rem !important;
}

/* Calendar */
.CalSelable {
	cursor: pointer;
	background-color: transparent !important;
}
.CalSel{
	width: 40px;
    height: 40px;
    text-align: center;
    margin: auto;
}
.CalClosed {
	background-color: transparent !important;
	color: #dad5d5 !important;
}

.TimePeriodTitle {
	font-size: 15px;
	font-style: italic;
}

.calendar_arrow_padding {
	padding: 5px !important;
}
.homeIcon {
	z-index: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.modal {
	background-color: #00000033;
}

.modal-dialog {
	max-width: 250px;
	margin: auto;
}


.label-span{
    display: block;
}

.card {
     --bs-card-spacer-y: 0.5rem;
     --bs-card-spacer-x: 0px;
	 --bs-card-border-radius: 0px;
}
.app-date{
	background-color : var(--bs-secondary-bg);
}
.btn-xs{
	font-size: 7.5pt !important;
	padding: 0.175rem;
}
.card-header{
	background-color: var(--bs-body-bg);
	border-bottom: 0px;
}

.tr-heading{
	background-color: #FAFAFA;
}

.accordion{
	--bs-accordion-border-radius: 0 !important;
	--bs-accordion-btn-padding-x: 0.8rem;
	--bs-accordion-btn-padding-y: 0.7rem;
	--bs-accordion-btn-focus-border-color: transparent;
}
.accordion-button, .accordion-button:not(.collapsed){
	background-color: transparent;
	box-shadow: none;
}
.accordion-header .table>:not(caption)>*>*{
	padding: 0px !important;
}

.accordion-button::after{
	display: none !important;
}
.accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.accordion-header .row{
	--bs-gutter-x: 0 !important;
}
.bg-secondary-light{
	background-color: var(--bs-secondary-bg);
}


/* Animated Icons */
@-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@-ms-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px
   
    }

    100% {
        stroke-dashoffset: 960px;
      
    }
}

@-ms-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    100% {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px 
    }

    100% {
        stroke-dashoffset: 960px
    }
}

@keyframes colored-circle { 
    0% {
        opacity:0
    }

    100% {
        opacity:100
    }
}

.inlinesvg .svg svg {
	display: inline
}

.icon--order-success svg polyline {
	-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
	animation: checkmark 0.25s ease-in-out 0.7s backwards
}

.icon--order-success svg circle {
	-webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
	animation: checkmark-circle 0.6s ease-in-out backwards;
}

.icon--order-success svg circle#colored {
	-webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
	animation: colored-circle 0.6s ease-in-out 0.7s backwards;
}
.agree-chk-required{
	border-color: red;
}
.agree-lbl-required{
	color: red;
}

.olb-product::before {
	content: "";
	height: 20px;
	width: 20px;
	background-size: 20px 20px;
	background-image: url(./img/product.svg);
	background-repeat: no-repeat;
}
.accordion-item {
	border: 0px;
}
/* Only Desktop Css */
@media (min-width:700px) {

	html,
	body {
		max-width: 1200px !important;
		/*max-height: 946px !important;*/
		overflow: hidden;
	}


	/* Extra Test Style Start 
	https://codepen.io/megkadams/pen/apJvrp
	*/
	#contentWrapper {
		display: flex;
		width: 100%;
		flex-direction: row;
		height: 100%;
		min-height: 100vh;
	}
	#appContentWrapper {
		display: block;
		width: calc(100% - 280px);
		flex: 1;
		height: 100%;
		min-height: 100vh;
		position: absolute;
		top: 0;
		right: 280px;
		bottom: 0;
		left: 0;
	}
	/*.sidebar{
		position: fixed;
		right: 0;
	}*/
	/* Extra Test Style End */

	.header-fix-top {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1020;
	}

	.footer-fix-bottom {
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		z-index: 1020;
	}

	.DeskHide {
		display: none;
	}


	.ServiceAnim > .collapsing, .ServiceAnim > .collapse.show {
		/* Only for Service Page */
		max-width: 25vh;
	}

	/*
	.sidebar{
		width: 280px !important;
	} */

	/* NEW STYLE START */
	.content-size {
		height: calc(946px - 240px);
		overflow-y: auto;
	}

	.register-size {
		height: calc(946px - 240px);
		overflow-y: auto;
	}

	.refund-page-size, .landing-page-size, .recover-password-page-size, .login-page-size , .register-page-size{
		overflow-y: auto;
		padding-bottom: 180px !important;
	}

	.service-list-size {
		height: calc(100vh - 240px);
		overflow-y: auto;
	}

	.time-list-size {
		height: calc(100vh - 240px);
		overflow-y: auto;
	}

	.payment-list-size {
		overflow-y: auto;
	}

	.payment-page-size{
		height: calc(100vh - 240px);
	}

	.payment-page-size > form{
		max-height: 100% !important;
	}

	/*.SelectTimeTable{
		width: 30vh !important;
	}*/

	.HistoryTable > thead,
	.HistoryTable > tbody tr {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	.HistoryTable > thead {
		width: calc(100% - 1em);
	}

	
	.HistoryTable > tfoot{
		/* Only for PurchaseSuccess Screen */
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	.PaymentHistory {
		display: block;
		height: calc(100vh - 375px) !important;
		overflow-y: auto !important;
	}

	.accordion  {
		display: block;
		height: calc(100vh - 275px) !important;
		overflow-y: auto !important;
	}

	.right_arrow {
		width: 99.5% !important;
		height: 30px;
		position: relative;
		padding-top: 5px;
		text-align: center;
		z-index:-1;
	}

	.right_arrow:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 30px;
	}

	.right_arrow:before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		width: 0;
		height: 30px;
	}


	/* NEW STYLE END */

	.list-size {
		height: calc(100vh - 240px);
		overflow-y: auto;
	}

	.tandc-size {
		/*max-width: calc(100vh - 50px) !important;*/
		/*max-width: calc(100vh) !important;*/
		height: calc(100vh - 400px);
		overflow-y: auto;
	}
	.tandcGV-size {
		/*max-width: calc(100vh - 50px) !important;*/
		/*max-width: calc(100vh) !important;*/
		height: calc(100vh - 240px);
		overflow-y: auto;
	}

	.appointment-size {
		height: calc(100vh - 205px);
		overflow-y: auto;
	}

	.purchase-gv-size {
		height: calc(100vh - 225px);
		overflow-y: auto;
	}

	.main-padding-service{
		padding-right: 1rem!important;
    	padding-left: 1rem!important;
	}

	.service-heading {
		margin-bottom: 0.5rem!important;
	}
	.service-list-padding{
		padding-right: 0.25rem!important;
		padding-left: 0.25rem!important;
	}

	.select-time-left-part{
		padding-left: 0!important;
		padding-right: 0.25rem!important;
	}
	.select-time-right-part{
		padding-left: .25rem!important;
		padding-right: .45rem!important;
	}

	.d-padding-3{
		padding-right: 1rem!important;
    	padding-left: 1rem!important;
	}
	.d-padding-5{
		padding-right: 3rem!important;
		padding-left: 3rem!important;
	}

	.d-margin-y-5{
		margin-top: 3rem!important;
		margin-bottom: 3rem!important;
	}

	.d-white{
		--bs-bg-opacity: 1;
    	background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important;
	}
	.d-border{
		border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
	}

	.label-span{
		width: 185px !important;
	}
	.list-group-item{
		padding: var(--bs-list-group-item-padding-y) 0;
	}
	
	.service-list-padding .bi-info-circle::before{
		cursor: pointer;
	}
}

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

	html,
	body {
		max-width: 100%;
		max-height: 100%
	}
	.row{
		--bs-gutter-x : 0 !important;	
	}

	.header-fix-top {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}

	.footer-fix-bottom {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
	}

	.MobHide {
		display: none;
	}

	.btn-landing {
		padding: 10px 5px 10px 5px;
	}

	.sidebar {
		display: none !important;
	}

	/* NEW STYLE START */
	.content-size {
		height: calc(100vh - 80px);
		overflow-y: auto;
		margin-top: 80px !important;
	}

	.register-size {
		height: auto;
		overflow-y: auto;
		margin-top: 100px !important;
		margin-bottom: 180px !important;
		padding-bottom: 45px;
	}

	.service-page-size , .time-page-size {
		margin-top: 80px !important;
		margin-bottom: 180px !important;
		/*margin-bottom: 340px !important;*/
	}

	.time-page-size{
		padding-bottom: 140px !important;
	}
	.service-list-size {
		height: auto;
	}

	.time-list-size {
		height: auto;
	}

	.agreement-page-size {
		margin-top: 80px !important;
		padding-bottom: 310px !important;
	}

	.payment-page-size {
		padding-bottom: 170px !important;		
		padding: 1rem;
	}
	
	.appointment-size {
		padding-bottom: 240px !important;		
		padding: 1rem;
	}

	.history-size {
		margin-top: 80px !important;
		padding-bottom: 220px !important;
	}

	.refund-page-size{
		margin-top: 80px !important;
		padding-bottom: 220px !important;
	}
	.refund-size{
		height: auto;
    	overflow-y: auto;
	}


	
	.right_arrow {
		text-align: start;
		padding: 10px;
	}

	.mobile-top-margin{
		margin-top:90px !important;
	}
	
	.purchase-gv-page-size {
		margin-top: 80px !important;
		padding-bottom: 200px !important;
	}

	/* NEW STYLE END */
	.list-group {
		font-size: 14px;
	}
	.list-size {
		height: calc(100vh - 270px);
		overflow-y: auto;
		/* padding-top: 280px;
		padding-bottom: 20px;*/
	}
	
	.service-list-padding .form-check-input[type=radio] {
		width: 20px;
		height: 20px;
	}
	
	.service-list-padding .bi-info-circle {
		font-size: 1.5rem !important;
		cursor: pointer;
	}

	.tandc-size {
		height: calc(100vh - 440px);
		overflow-y: auto;
		margin-bottom: 10px;
	}

	.tandcGV-size {
		height: calc(100vh - 370px);
		overflow-y: auto;
		margin-bottom: 10px;
	}

	.pageTitle {
		font-size: 18px;
	}

	.NoBorder {
		border-width: 0px !important;
	}

	.service-heading {
		padding: 0.2rem 1rem !important;
	}

	.select-time-left-part, .select-time-right-part{
		padding: 0 !important;
	}

	.select-time-part-margin{
		margin-right: 1rem!important;
		margin-left: 1rem!important;
	}

	.mobile-shadow{
		box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb),.15)!important;
		margin-bottom: 1rem !important;
	}

	.type-order{
		display: inline-flex;
	}
	.type-a {
		order: 1;
	}
	
	.type-b {
		order: 2;
	}
	
	.mob-border{
		border-color: var(--bs-primary) !important;
	    border: 2px solid;
	}
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
	
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
	
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
	
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

 }