body.be-splash-screen { background-color: #FFF; }
body { color: #999; font-family: 'Varela Round', sans-serif;  background: #f5f5f5; }
a { text-decoration: underline !important; }
.sload { position: absolute; top:0; left:0; right:0; bottom:0; width:100%; -moz-opacity: 0.6; opacity: 0.6; background-color:#FFF; background-image: url(../images/loading-ajax.gif); background-repeat: no-repeat; background-position: 50% 50%; z-index: 20; }
.slottime { font-size: 22px; font-weight: 100; }
@keyframes glow {
	0% { background-color: rgba(179, 255, 232, 0); }
	50% { background-color: rgba(179, 255, 232, 1.0); }
	100% { background-color: rgba(179, 255, 232, 0); }
}

.glow-effect { animation: glow 1s ease-in-out; }

.text-page { width: 650px; margin: 0 auto; }
.text-page > div {  }
.text-page h4 { text-align: center; font-size: 22px; margin-bottom: 20px; }

.form-control { box-shadow: none; border-color: #ddd; }
.login-form { width: 350px; margin: 0 auto; padding: 30px 0; }
.login-form form { color: #434343; border-radius: 1px; margin-bottom: 15px; background: #fff; border: 1px solid #f3f3f3; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px; }
.login-form h4 { text-align: center; font-size: 22px; margin-bottom: 20px; }

.text-page .avatar { background-color: transparent; width: 40%; margin: 30px auto; }
.login-form .avatar { background-color: transparent; width: 80%; margin: 30px auto; }
.text-page .avatar img,
.login-form .avatar img { max-width: 100%; border: 0; }

.text-page .logoheading
.login-form .logoheading { text-align: center; }

.login-form .form-group { margin-bottom: 20px; }
.login-form .form-control, .login-form .btn { min-height: 40px; border-radius: 2px; transition: all 0.5s; }

.text-page .close,
.login-form .close { position: absolute; top: 15px; right: 15px; }

.login-form .checkbox-inline { float: left; }
.login-form input[type="checkbox"] { margin-top: 2px; }
.login-form .forgot-link { float: right; }

.text-page .small,
.login-form .small { font-size: 13px; }

.text-page a.btn-primary,
.text-page a.btn-danger,
.text-page a.btn-default,
.text-page a.btn-success,
.login-form a.btn-primary,
.login-form a.btn-danger,
.login-form a.btn-default,
.login-form a.btn-success { color: #FFF; }
.login-form a.btn { line-height: 40px; }

.text-page a,
.login-form a { color: #4aba70; }

.text-page .btn:hover,
.text-page .btn:focus,
.login-form .btn:hover,
.login-form .btn:focus { background: #42ae68; }

.text-page .btn,
.login-form .btn { background: #4aba70; border: none; line-height: normal; }

.form-control:focus { border-color: #4aba70; }
.card-header .tools .icon { font-size: 2rem; }

/* clndr */
.clndrdrop .be-connections .footer a { background-color: #fafafa; font-size: 1rem; color: #8a8a8a; text-align: center; padding: 10px 0; border-top: 1px solid #ebebeb; display: block; outline: none; }
.clndrdrop .be-connections .footer a:hover { background-color: #e1e1e1; color: #FFF; }
.dashcal-button { cursor: pointer; }
.clndr-table { width: 100%; }
.clndr-table tr td,
.clndr-table tr th { border: 0; padding: 10px 0; text-align: center; }
.clndr-table tr td.event a { background-color: #bee1ef; border-radius: 50%; }
.clndr-table tr td.event a small { position: absolute; left: 0; top: 14px; width: 100%; z-index: 999; font-size: 65%; }
.clndr-table tr td.day a { display: inline-block; padding: 0; text-align: center; text-decoration: none; color: #737373; width: 38px; height: 38px; line-height: 38px; font-size: 16px; cursor: pointer; position: relative; }
.clndr-table tr td.day span { display: inline-block; padding: 0; text-align: center; text-decoration: none; color: #737373; width: 38px; height: 38px; line-height: 38px; font-size: 16px; position: relative; }
.clndr-table tr td.day.past a,
.clndr-table tr td.day.next-month a { color:#CCC; }
.clndr-table tr td.day.past.event a,
.clndr-table tr td.day.next-month.event a { color:#000; }
.clndr-table tr td.day a:hover,
.clndr-table tr td.day a:active { position: relative; background-color: #8799cc; border-radius: 50%; color:#FFF; }
.clndr-table tr td.day.next-month span.day-contents,
.clndr-table tr td.day.last-month span.day-contents { color:#FFF; }
.clndr-table tr td.today a { position: relative; background-color: #e9b118; border-radius: 50%; color:#FFF; text-decoration: none !important; }
.clndr-table tr td.today a.day-contents { text-decoration: none !important; }
.clndr-controls { border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 5px; margin-bottom: 20px; position: relative; }
.clndr-control-button { height: 1.8em; position: absolute; top: -5px; width: 1.8em; color: #404040; font-size: 1.923rem; }
.clndr-control-button-left { left: 8px; }
.clndr-control-button-right { right: 2px; }
.clndr-month-year { cursor: default; line-height: 24px; margin: 0 2.3em; text-align: center; font-weight: 300; font-size: 1.385rem; }
/* clndr */

#calpicker { display: none; }
/* miniclndr */
.miniclndr { width: 250px; }
.miniclndr-table { width: 100%; }
.miniclndr-table tr td,
.miniclndr-table tr th { border: 0; padding: 6px 0; text-align: center; }
.miniclndr-table tr td.event a { background-color: #92c3d6; border-radius: 50%; color:#FFFFFF !important; }
.miniclndr-table tr td.day a { display: inline-block; padding: 0; text-align: center; text-decoration: none; color: #333333; width: 24px; height: 24px; line-height: 24px; font-size: 13px; cursor: pointer; }
.miniclndr-table tr td.day a.warning { background-color: #FFCCCC; }
.miniclndr-table tr td.day span { display: inline-block; padding: 0; text-align: center; text-decoration: none; color: #333333; width: 24px; height: 24px; line-height: 24px; font-size: 13px; }
.miniclndr-table tr td.day.past span,
.miniclndr-table tr td.day.adjacent-month span{ color: #cbcbcb; }
.miniclndr-table tr td.day.past a,
.miniclndr-table tr td.day.next-month a { color:#CCC; }
.miniclndr-table tr td.day a:hover,
.miniclndr-table tr td.day a:active { position: relative; background-color: #8799cc; border-radius: 50%; color:#FFFFFF !important; }
.miniclndr-table tr td.day.past.event a,
.miniclndr-table tr td.day.next-month.event a { color:#FFFFFF !important; }
.miniclndr-table tr td.today a { position: relative; background-color: #277a99; border-radius: 50%; color:#FFF; }
.miniclndr .clndr-controls { border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 5px; margin-bottom: 12px; position: relative; }
.miniclndr .clndr-control-button { height: 1.4em; position: absolute; top: 0px; width: 1.4em; color: #404040; font-size: 1.6rem; }
.miniclndr .clndr-control-button-left { left: 6px; }
.miniclndr .clndr-control-button-right { right: 1px; }
.miniclndr .clndr-month-year { cursor: default; line-height: 20px; margin: 0 2.0em; text-align: center; font-weight: 300; font-size: 1.1rem; }
/* .miniclndr */

/* appointment styles */
.block { background-color: #EEEEEE; padding: 0; position: relative; min-height: 60px; }
.block-header { margin-right: 6px; margin-left: 6px; padding: 3px 0px; }
.block-header .card-subtitle { color: #000; }
.card { position: relative; }
@media (max-width: 767px) { /* Adjusts for mobile devices */
    .sticky-card {
        position: sticky;
        top: 0; /* Adjust this value based on your header's height or other elements */
        z-index: 1000; /* To ensure it stays on top of other content */
        background: white;
    }
}
.block-top { background-color:#FFF; margin: 0; text-align: right; padding: 10px 10px 0; min-height: 2px; }

.patslot { min-height: 40px; position: relative; line-height: 14px; margin: 0px 0px 2px; padding: 10px; border: 0px; font-size: 1rem; }

.apptslot { background: transparent; min-height: 60px; line-height: 14px; margin-bottom: 4px; padding: 10px 10px 0 8px; border-radius: 0px; box-sizing: border-box; border-color: transparent; position: relative; }
.apptslot:hover { background: #e7e6e6 !important; color: #333; }
.apptslot.apptslot-taken { background-color:#e7e6e6; }
.apptslot.apptslot-open { text-align: left; background-color: #D6E6FF !important; border-left: 2px solid rgb(56, 85, 133) !important; color: rgb(56, 85, 133) !important; }
.apptslot.apptslot-open:hover { background-color: #b3d0ff !important; }
.apptslot.apptslot-yours { background-color: #fffcd6 !important; border-left: 2px solid #d2ae13 !important; color: #d2ae13 !important; }
.apptslot.apptslot-yours:hover { background-color: #fef8ab !important; color: #333 !important; }

.apptslot .appslot-icons,
.patslot .appslot-icons { }
.card .list-group-item.list-group-item-sm { padding:10px 12px !important; }
.appslot-icons > .divreserve,
.appslot-icons > .divcancel { background-color: transparent; color:#333; }
.appslot-icons > .divnotcancel { background-color: transparent; color:#333; }
.appslot-icons .btnreserve,
.appslot-icons .btncancel,
.appslot-icons .btnconfirm,
.appslot-icons .btnescape,
.appslot-icons .btnmake { position: relative; z-index: 22; }
.appslot-icons span.unavail { padding-top: 8px; color: #b4b4b4; display: inline-block; }

.apptslot .icon,
.block-top .icon,
.card-header .tools .icon { display: inline-block; font-size: 1.6rem; line-height: 25px; vertical-align: middle; cursor: pointer; min-width: 1.3rem; text-align: center; color:#333333; }
.apptslot .icon, .block-top .icon, .card-header .tools .icon

.apptslot .icon { margin-left: 0px; }
.apptslot-chckd .appslot-icons .icon.checkappt { color: #e9b118 !important }
.apptslot > .opensq > .icon { transform: rotate(-90deg); }
.card-body.card-blocks { padding: 8px 0; }
/* /appointment styles */

/* payment styles */
.card-input { position: relative; }
.card-icon { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #6c757d; }
.card-input input { padding-right: 40px; }

.event-display { margin-bottom: 30px; border-radius: 2px; background-color: #FFFFFF; }
.event-display-bg { position: relative; background-position: center; background-size: cover; min-height: 180px; overflow: hidden; }
.event-display-bg-lg { position: relative; background-position: center; background-size: cover; min-height: 325px; overflow: hidden; }
.event-display-bottom { position: relative; padding: 11px 20px; }
.event-display-avatar { position: absolute; left: 50%; transform: translate(-50%, 0); top: -80px; border-radius: 50%; background-color: #FFFFFF; }
.event-display-avatar-lg { position: absolute; left:30px; width:110px; height: 110px; top: -80px; border-radius: 50%; background-color: #FFFFFF; }
.event-display-clinic { position: absolute; left:155px;  top: -70px; color:#FFF; }
.event-display-avatar img { width: 110px; height: 110px; border-radius: 50%; border: 3px solid #FFFFFF; }
.event-card { margin: 0 75px 20px 75px;  }
@media (max-width: 767px) { /* Adjusts for mobile devices */
    .event-card { margin: 0 6px 6px 6px }
}