/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Poppins', sans-serif; font-size: 16px;}*/

/*.container {width: 86%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}*/

.alertMess {margin-bottom: 12px; font-size: 14px; font-weight: bold;}
.alertMess.succ, .alertMess.mess1 {color: green;}
.alertMess.err {color: red;}
.alertMess.mess {color: red;}
.alertMess.pro {color: blue;}

.login {display: block; max-width: 400px; width: 98%; margin: 100px auto; padding: 32px; box-shadow: 0 0 8px rgba(0,0,0,.2); border-radius: 20px;}
.login .logo {margin-bottom: 20px; text-align: center;}
.login .logo img {max-width: 280px;}
.login form {margin-bottom: 20px;}
.login .field {display: block; margin-bottom: 12px;}
.login .field label {display: block; margin-bottom: 4px;}
.login .field input[type=text], .login .field input[type=password], .login .field input[type=email] {display: block; width: 100%; height: 40px; border: 1px solid #ccc; padding: 0 8px;}
.login .field input[type=submit] {display: block; width: 100%; height: 40px; background: #454545; color: #fff; border: 0;}
.login .forgot {display: block; font-size: 14px;}

.adminnav {position: fixed; top: 0; left: 0; width: 232px; height: 100%; background: #454545;}
.adminnav .logo {margin: 20px 0; background: #fff; padding: 12px; text-align: center; background: #f3f3f3;}
.adminnav .logo img {max-width: 160px;}
.adminnav nav {display: block;}
.adminnav nav ul {display: block;}
.adminnav nav ul li {display: block; border-bottom: 1px solid rgba(255,255,255,.2);}
.adminnav nav ul li a {display: block; padding: 12px 12px; color: #fff; text-decoration: none; font-size: 14px; transition: all ease-in-out .2s;}
.adminnav nav ul li a:hover {background: #f3f3f3; color: #454545;}

.aMainWrap {padding-left: 232px; width: calc(100% - 232px); height: 100%; overflow: auto;}

.aMainWrap .pageTitle {padding: 12px 20px; border-bottom: 1px solid #f3f3f3;}
.aMainWrap .pageTitle h2 {font-size: 42px; font-weight: 400;}
.aMainWrap .relNav {padding: 12px 20px; display: block; border-bottom: 1px solid #f3f3f3;}
.aMainWrap .relNav ul {display: block;}
.aMainWrap .relNav ul li {display: inline-block; margin-right: 12px;}
.aMainWrap .relNav ul li a {display: block; padding: 4px 10px; background: blue; color: #fff; font-size: 12px; border-radius: 4px; text-decoration: none;}
.aMainWrap .aContent {padding: 20px;}
.aMainWrap .listWrap {display: table; width: 100%; font-size: 14px; margin-bottom: 20px;}
.aMainWrap .listWrap .row {display: table-row;}
.aMainWrap .listWrap .row > span {display: table-cell; padding: 4px 8px; border-bottom: 1px solid #f3f3f3;}
.aMainWrap .listWrap .row.head > span {background: #454545; color: #fff;}
.aMainWrap .listWrap .row .sl {width: 54px;}
.aMainWrap .listWrap .row .actionw {width: 124px;}
.aMainWrap .listWrap .row .actionw a {margin-right: 12px;}

.pagination {display: block; text-align: right;}
.pagination ul {display: block;}
.pagination ul li {display: inline-block; margin-left: 4px;}
.pagination ul li a {display: block; padding: 4px; text-align: center; border: 1px solid #f3f3f3; border-radius: 4px; font-size: 12px; min-width: 24px; text-decoration: none; color: #454545; background: #f3f3f3;}
.pagination ul li.active a, .pagination ul li a:hover {background: #454545; color: #fff;}

.addEditDoctorWrap {display: none; position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; background: rgba(0,0,0,.7);}
.addEditDoctorWrap .addEditDoctor {display: block; width: 96%; max-width: 500px; margin: 100px auto; background: #fff; border-radius: 8px; padding: 32px; position: relative; overflow: hidden;}
.addEditDoctorWrap .addEditDoctor .close {display: block; position: absolute; top: 0; right: 0; cursor: pointer; width: 40px; text-align: center; line-height: 40px; background: #000; color: #fff;}
.addEditDoctorWrap .addEditDoctor .close::before {content: 'X';}
.addEditDoctorWrap .addEditDoctor h2 {font-size: 24px; margin-bottom: 24px; font-weight: 400; padding-bottom: 8px; border-bottom: 1px solid #f3f3f3;}
.addEditDoctorWrap .addEditDoctor h3 {font-size: 20px; margin-bottom: 12px; font-weight: 400;}
.addEditDoctorWrap .addEditDoctor .field {display: block; margin-bottom: 12px;}
.addEditDoctorWrap .addEditDoctor label {display: block; margin-bottom: 4px;}
.addEditDoctorWrap .addEditDoctor .field input[type=text], .addEditDoctorWrap .addEditDoctor .field input[type=password], .addEditDoctorWrap .addEditDoctor .field input[type=email], .addEditDoctorWrap .addEditDoctor .field input[type=number] {display: block; width: 100%; height: 40px; border: 1px solid #ccc; padding: 0 8px;}
.addEditDoctorWrap .addEditDoctor .submit input[type=submit] {display: block; width: 100%; height: 40px; border: 0; padding: 0 8px; background: #454545; color: #fff;}
.addEditDoctorWrap .addEditDoctor .checkbox {margin-bottom: 12px;}
.addEditDoctorWrap .addEditDoctor .checkbox .box {display: inline-block;}
.addEditDoctorWrap .addEditDoctor .checkbox .box input[type=checkbox] {display: none;}
.addEditDoctorWrap .addEditDoctor .checkbox .box input[type=checkbox] ~ label {display: block; padding: 4px 8px; border-radius: 4px; background: #f3f3f3; font-size: 12px;}
.addEditDoctorWrap .addEditDoctor .checkbox .box input[type=checkbox]:checked ~ label {background: #454545; color: #fff;}

.col2 .col {display: inline-block; width: calc(48% - 4px); vertical-align: top;}
.col2 .col:nth-child(2n) {margin-left: 4%;}

.docLists {display: block; width: 100%; margin: 32px auto; font-size: 14px;}
.docLists ul {display: block;}
.docLists ul li {display: block; margin-bottom: 12px; padding: 12px; border: 1px solid #ccc; box-shadow: rgba(0,0,0,.2); border-radius: 12px; transition: all ease-in-out .2s; cursor: pointer;}
.docLists ul li:hover {transform: scale(1.02); box-shadow: 0 0 12px rgba(0,0,0,.2);}
.docLists ul li .pic {display: inline-block; width: calc(160px - 4px); vertical-align: middle;}
.docLists ul li .pic img {width: 100%; border-radius: 8px;}
.docLists ul li .details {display: inline-block; width: calc(100% - 320px - 4px); vertical-align: middle; padding: 0 20px;}
.docLists ul li .details h1 {font-size: 22px; font-weight: 600; margin-bottom: 0;}
.docLists ul li .details span {display: block;}
.docLists ul li .details .speciality {display: block; margin-bottom: 6px;}
.docLists ul li .details .timinig .days {margin-bottom: 6px;}
.docLists ul li .details .timinig ul {display: inline-block;}
.docLists ul li .details .timinig ul li {display: inline-block; margin: 0 4px; padding: 2px 6px; border-radius: 4px; font-size: 12px;}
.docLists ul li .book {display: inline-block; width: calc(160px - 4px); vertical-align: middle; text-align: center;}
.docLists ul li .book a {display: inline-block; padding: 8px 20px; color: #fff; background: #454545; border-radius: 4px; text-decoration: none; font-size: 14px; }
.docLists ul li .book .smqr {display: block;}
.docLists ul li .book .smqr img {width: 100%;}
.docLists ul li .note {display: block; color: red; padding-top: 4px; font-weight: 700; font-size: 14px;}

.appointmentForm {display: block; width: 100%; max-width: 800px; margin: 32px auto; font-size: 14px;}

.docDetails {padding: 20px; border: 1px solid #ccc; border-radius: 12px; margin-bottom: 20px;}
.docDetails .pic {display: inline-block; width: calc(160px - 4px); vertical-align: middle;}
.docDetails .pic img {width: 100%;}
.docDetails .details {display: inline-block; width: calc(100% - 160px - 4px); vertical-align: middle; padding: 0 20px;}
.docDetails .details h1 {font-size: 22px; font-weight: 600; margin-bottom: 12px;}
.docDetails .details span {display: block;}
.docDetails .details .speciality {display: block; margin-bottom: 12px;}
.docDetails .details .timinig .days {margin-bottom: 12px;}
.docDetails .details .timinig ul {display: inline-block;}
.docDetails .details .timinig ul li {display: inline-block; margin: 0 4px; padding: 2px 6px; border-radius: 4px; font-size: 12px;}

.appointmentForm .form {padding: 20px; border: 1px solid #ccc; border-radius: 12px; margin-bottom: 20px;}

.editForm {max-width: 600px; margin: 0 auto; padding: 32px; border: 1px solid #ccc; border-radius: 20px;}
.editForm h2 {font-size: 24px; margin-bottom: 24px; font-weight: 400; padding-bottom: 8px; border-bottom: 1px solid #f3f3f3;}
.editForm h3 {font-size: 20px; margin-bottom: 12px; font-weight: 400;}
.editForm .field {display: block; margin-bottom: 12px;}
.editForm label {display: block; margin-bottom: 4px;}
.editForm .field input[type=text], .editForm .field input[type=password], .editForm .field input[type=email], .editForm .field input[type=number] {display: block; width: 100%; height: 40px; border: 1px solid #ccc; padding: 0 8px;}
.editForm .submit input[type=submit] {display: block; width: 100%; height: 40px; border: 0; padding: 0 8px; background: #454545; color: #fff;}
.editForm .checkbox {margin-bottom: 12px;}
.editForm .checkbox .box {display: inline-block;}
.editForm .checkbox .box input[type=checkbox] {display: none;}
.editForm .checkbox .box input[type=checkbox] ~ label {display: block; padding: 4px 8px; border-radius: 4px; background: #f3f3f3; font-size: 12px;}
.editForm .checkbox .box input[type=checkbox]:checked ~ label {background: #454545; color: #fff;}

.appointmentForm .form h3 {margin-bottom: 20px;}
.appointmentForm .form .field {display: block; margin-bottom: 12px;}
.appointmentForm .form .field input[type=text], .appointmentForm .form .field input[type=password], .appointmentForm .form .field input[type=email], .appointmentForm .form .field input[type=number], .appointmentForm .form .field select {display: block; width: 100%; height: 40px; border: 1px solid #ccc; padding: 0 8px;}
.appointmentForm .form .submit input[type=submit] {display: block; width: 100%; height: 40px; border: 0; padding: 0 8px; background: #454545; color: #fff;}

.appointmentDetails {display: block;}
.appointmentDetails .patientDetails, .appointmentDetails .drDetails {display: inline-block; width: calc(48% - 4px); vertical-align: top; padding: 20px; border: 1px solid #ccc; border-radius: 12px;}
.appointmentDetails .drDetails {margin-left: 4%;}
.appointmentDetails h4 {font-size: 24px; margin-bottom: 24px;}
.appointmentDetails label {font-size: 14px; font-weight: 600;}
.appointmentDetails .field {margin-bottom: 12px;}

.date {background: url(../images/Calender.png) calc(100% - 10px) center no-repeat; background-size: auto 60%;}

.qr {display: block; text-align: center;}
.qr img {max-width: 100%;}

.alert {display: block; position: fixed; top: 80px; right: 32px; color: #fff; font-size: 14px; font-weight: 700px; padding: 8px 20px; border-radius: 4px;}
.alert.succ {background: green;}
.alert.err {background: red;}