@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
html, body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #FCFDFE;
}

* {
  box-sizing: border-box;
  outline: 0;
}
*:before, *:after {
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

.regLogin {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
}
@media (min-width: 1366px) {
  .regLogin {
    flex-wrap: nowrap;
  }
}
.regLogin .form {
  float: left;
  width: 50%;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.regLogin .form .logo {
  height: 70px;
}
.regLogin .form .logo a {
  display: inline-block;
}
.regLogin .form form {
  justify-content: center;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 94px);
}
.regLogin .form form > .title {
  display: block;
  line-height: 48px;
  font-size: 32px;
  font-weight: 600;
  color: #13123B;
  text-align: center;
  margin-bottom: 16px;
}
.regLogin .form form .desc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  margin: 0 auto 28px;
  text-align: center;
  width: 360px;
}
.regLogin .form form .errorMsg {
  background-color: rgba(242, 161, 143, 0.3);
  border-radius: 8px;
  border-left: 5px solid #E70000;
  padding: 8px 16px 8px 32px;
  font-size: 16px;
  line-height: 24px;
  color: #13123B;
  width: 360px;
  margin: 0 auto 28px;
  background-image: url("../images/errorIcon.png");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left 8px center;
  font-weight: 600;
}
.regLogin .form form .progress {
  text-align: center;
  margin-bottom: 32px;
}
.regLogin .form form .progress li {
  display: inline-block;
  width: 160px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  padding-top: 56px;
  position: relative;
  color: #A1A1A1;
}
.regLogin .form form .progress li:before {
  z-index: 1;
  height: 2px;
  width: 50%;
  content: "";
  position: absolute;
  right: 0;
  top: 21px;
  background-color: #C5C4ED;
}
.regLogin .form form .progress li:after {
  height: 44px;
  width: 44px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  content: "";
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/step3Img.png");
  z-index: 2;
}
.regLogin .form form .progress li:nth-child(2):before {
  width: 100%;
}
.regLogin .form form .progress li:last-child:before {
  right: auto;
  left: 0;
}
.regLogin .form form .progress li.active {
  color: #22206B;
}
.regLogin .form form .progress li.active:after {
  background-image: url("../images/step1Img.png");
  background-size: 44px;
}
.regLogin .form form .progress li.done {
  color: #22206B;
}
.regLogin .form form .progress li.done:after {
  background-image: url("../images/step2Img.png");
}
.regLogin .form form .chooseTypeRadio {
  width: 360px;
  margin: 0 auto 24px;
}
.regLogin .form form .chooseTypeRadio li {
  margin-top: 24px;
}
.regLogin .form form .chooseTypeRadio li:first-child {
  margin-top: 0;
}
.regLogin .form form .chooseTypeRadio li label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #13123B;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
}
.regLogin .form form .chooseTypeRadio li label:before {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  left: 0;
  top: 4px;
  border: 1px solid #D4E3FF;
  content: "";
  position: absolute;
  transition: border 200ms linear;
}
.regLogin .form form .chooseTypeRadio li input[type=radio]:checked + label:before {
  border-width: 5px;
  border-color: #22206B;
}
.regLogin .form form .radio {
  width: 360px;
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: nowrap;
}
.regLogin .form form .radio li {
  width: 33.3333333333%;
}
.regLogin .form form .radio li label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #13123B;
  position: relative;
  padding-left: 24px;
}
.regLogin .form form .radio li label:before {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  left: 0;
  top: 4px;
  border: 1px solid #D4E3FF;
  content: "";
  position: absolute;
}
.regLogin .form form .fields {
  width: 360px;
  margin: 0 auto;
}
.regLogin .form form .fields li {
  margin-bottom: 20px;
  position: relative;
}
.regLogin .form form .fields li .title {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #13123B;
  display: block;
  margin-bottom: 6px;
}
.regLogin .form form .fields li input[type=text], .regLogin .form form .fields li input[type=email], .regLogin .form form .fields li input[type=password], .regLogin .form form .fields li input[type=date], .regLogin .form form .fields li input[type=file], .regLogin .form form .fields li select {
  padding: 10px 14px;
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #13123B;
  width: 100%;
  height: 44px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: inherit;
  background: none;
}
.regLogin .form form .fields li select {
  appearance: none;
  background-image: url("../images/selectBoxArrow.png");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.regLogin .form form .fields li i {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  display: block;
  margin-top: 6px;
  font-style: normal;
}
.regLogin .form form .fields li input[type=password] + .reveal {
  display: block;
  height: 16px;
  width: 16px;
  cursor: pointer;
  right: 14px;
  bottom: 12px;
  background-image: url("../images/eye.png");
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
  position: absolute;
}
.regLogin .form form .fields li.upload:before {
  position: absolute;
  content: "Upload";
  height: 44px;
  line-height: 24px;
  padding: 10px 18px 10px 46px;
  border-left: 1px solid #D0D5DD;
  display: inline-block;
  right: 0;
  top: 30px;
  background-image: url("../images/uploadIcon.png");
  background-position: left 18px center;
  background-repeat: no-repeat;
  background-size: 20px;
}
.regLogin .form form .fields li input[type=file] {
  position: relative;
}
.regLogin .form form .fields li input[type=file]::file-selector-button {
  display: none;
}
.regLogin .form form .fields li ul.col2 li {
  width: calc((100% - 8px) / 2);
  float: left;
}
.regLogin .form form .fields li ul.col2 li:nth-child(2) {
  margin-left: 8px;
}
.regLogin .form form .fields li.mobileNum select, .regLogin .form form .fields li.mobileNum input[type=text] {
  float: left;
}
.regLogin .form form .fields li.mobileNum select {
  width: 70px;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  z-index: 1;
  background-position: right center;
}
.regLogin .form form .fields li.mobileNum input[type=text] {
  width: calc(100% - 70px);
  border-radius: 0 8px 8px 0;
  border-left: 0;
  z-index: 2;
}
.regLogin .form form .checkList {
  width: 360px;
  margin: 0 auto;
}
.regLogin .form form .checkList li {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
  background-image: url("../images/checkListIcon.png");
  margin-bottom: 12px;
}
.regLogin .form form .agreement {
  width: 360px;
  margin: 0 auto;
}
.regLogin .form form .agreement label {
  font-size: 14px;
  line-height: 24px;
  color: #3B3B3B;
  display: block;
  cursor: pointer;
  padding-left: 24px;
  position: relative;
  margin-bottom: 24px;
  font-weight: 500;
}
.regLogin .form form .agreement label:before {
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 4px;
  left: 0;
  top: 4px;
  content: "";
  border: 1px solid #E0E0E8;
  transition: border 200ms linear;
}
.regLogin .form form .agreement input[type=checkbox]:checked + label:before {
  border-width: 5px;
  border-color: #22206B;
}
.regLogin .form form .agreement.remember label {
  float: left;
}
.regLogin .form form .agreement.remember a {
  float: right;
  font-size: 14px;
  line-height: 24px;
  color: #22206B;
  font-weight: 600;
}
.regLogin .form form button {
  height: 44px;
  border: 0;
  width: 360px;
  margin: 0 auto 24px;
  display: block;
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background-color: #22206B;
  transition: all 200ms linear;
  font-family: inherit;
}
.regLogin .form form button.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #ecebf9;
}
.regLogin .form form .haveAccount {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  text-align: center;
  margin: 0 0 32px;
}
.regLogin .form form .haveAccount a {
  color: #22206B;
  font-weight: 600;
}
.regLogin .form form .back {
  margin-bottom: 48px;
}
.regLogin .form form .back > span {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  color: #22206B;
  font-weight: 600;
  position: relative;
  left: 50%;
  padding-left: 32px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left center;
  transform: translateX(-50%);
  cursor: pointer;
  background-image: url("../images/backArrow.png");
}
.regLogin .form form .back.noArrow > span {
  padding-left: 0;
  background: none;
}
.regLogin .form form .uploadPicture {
  padding: 48px 0;
}
.regLogin .form form .uploadPicture label {
  display: block;
  width: 260px;
  height: 260px;
  position: relative;
  margin: 0 auto;
  border-radius: 130px;
  cursor: pointer;
  background-color: #C5C4ED;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
  background-image: url("../images/uploadPictureIcon.png");
  overflow: hidden;
}
.regLogin .form form .uploadPicture label img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.regLogin .form .copyHelp {
  font-size: 14px;
  font-weight: 500;
  color: #6E6E6E;
  line-height: 24px;
  height: 24px;
}
.regLogin .form .copyHelp a {
  float: right;
  color: #6E6E6E;
  padding-left: 24px;
  background-size: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/contactIcon.png");
  background-position: left center;
}
.regLogin .banner {
  float: right;
  width: 50%;
  background-image: url("../images/regLoginImg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 32px;
  position: relative;
}
.regLogin .banner .text {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  padding: 24px 20px;
  color: #FFF;
}
.regLogin .banner .text p {
  margin: 0 0 32px;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}
.regLogin .banner .text .name {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  display: block;
  margin-bottom: 5px;
}
.regLogin .banner .text i {
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
}
.regLogin.forgotPassword .form form {
  padding-top: 80px;
  position: relative;
}
.regLogin.forgotPassword .form form:before {
  border: 1px solid #E0E0E8;
  border-radius: 12px;
  height: 56px;
  width: 56px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  content: "";
  background-position: center;
  background-size: 28px;
  background-repeat: no-repeat;
  background-image: url("../images/forgotPassIcon.png");
}
.regLogin.forgotPassword.newPass .form form:before {
  background-image: url("../images/setNewPassIcon.png");
}
.regLogin.forgotPassword.reset .form form:before {
  background-image: url("../images/passResetIcon.png");
}

.popup {
  background-color: rgba(23, 0, 93, 0.24);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
}
.popup .box {
  background-color: #FCFDFE;
  border-radius: 16px;
  border: 1px solid #D8D8D8;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
  padding: 100px 24px 32px 24px;
  position: relative;
  margin: auto;
}
.popup .box .closePop {
  display: block;
  cursor: pointer;
  height: 36px;
  width: 36px;
  right: 24px;
  top: 32px;
  position: absolute;
  background-image: url("../images/closePopupIcon.png");
  background-size: 36px;
  background-position: center;
  background-repeat: no-repeat;
}
.popup .box > .title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  display: block;
  color: #13123B;
  text-align: center;
  margin-bottom: 28px;
}
.popup .box p, .popup .box .verifyBy {
  text-align: center;
  margin: 0 0 22px;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #8B8B8B;
}
.popup .box p span {
  color: #22206B;
  cursor: pointer;
}
.popup .box .opt {
  margin: 0 auto 44px;
  width: 284px;
}
.popup .box .opt li {
  float: left;
  margin-left: 12px;
}
.popup .box .opt li:first-child {
  margin-left: 0;
}
.popup .box .opt li input[type=text] {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  border: 1px solid #EAECF0;
  text-align: center;
  font-size: 18px;
  color: #13123B;
}
.popup .box .opt li input[type=text]:focus {
  border-color: #22206B;
}
.popup .box .opt.error {
  position: relative;
}
.popup .box .opt.error li input[type=text] {
  border-color: #E70000;
}
.popup .box .opt.error:before {
  content: "Wrong code. Please try again.";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: #E70000;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
}
.popup .box .verifyBy {
  color: #22206B;
  cursor: pointer;
  display: block;
}
.popup .box button {
  height: 44px;
  border: 0;
  width: 360px;
  margin: 0 auto 25px;
  display: block;
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background-color: #22206B;
  transition: all 200ms linear;
  font-family: inherit;
  cursor: pointer;
}
.popup .box button.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #ecebf9;
}
.popup .box.notification .logo {
  width: 173px;
  margin: 0 auto 50px;
  display: block;
}
.popup .box.notification p {
  font-size: 28px;
  line-height: 40px;
  font-weight: 500;
  color: darkBlue;
}
.popup.dialogue {
  background-color: rgba(0, 0, 0, 0.5);
}
.popup.dialogue .box {
  padding: 40px;
  text-align: center;
}
.popup.dialogue .box.textLeft {
  text-align: left;
}
.popup.dialogue .box.textLeft .title {
  text-align: left;
}
.popup.dialogue .box .closePop {
  display: none;
}
.popup.dialogue .box .logo {
  float: right;
  height: 45px;
}
.popup.dialogue .box .logo + .title {
  float: left;
  margin-bottom: 0;
  padding: 6.5px 0;
}
.popup.dialogue .box .title {
  margin-bottom: 12px;
}
.popup.dialogue .box .title + button {
  margin-top: 20px;
}
.popup.dialogue .box p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  margin-bottom: 60px;
}
.popup.dialogue .box .doctorProfile {
  float: left;
  width: 100%;
  padding: 24px 0;
  border-color: #ECEBF9;
  border-style: solid;
  border-width: 1px 0;
  margin-top: 20px;
  margin-bottom: 24px;
}
.popup.dialogue .box .doctorProfile ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 32px;
}
.popup.dialogue .box .doctorProfile ul li {
  text-align: left;
  position: relative;
}
.popup.dialogue .box .doctorProfile ul li:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #D8D8D8;
  left: -16px;
  top: 0;
}
.popup.dialogue .box .doctorProfile ul li:first-child:before {
  display: none;
}
.popup.dialogue .box .doctorProfile ul li span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 8px;
  color: #B7B7B7;
  padding-left: 26px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 20px;
  position: relative;
}
.popup.dialogue .box .doctorProfile ul li span.name {
  font-size: 18px;
  font-weight: 600;
  color: #22206B;
  padding: 0;
}
.popup.dialogue .box .doctorProfile ul li span.bullet:before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #B7B7B7;
  border-radius: 4px;
  left: 6px;
  top: 8px;
}
.popup.dialogue .box .doctorProfile ul li span.generalSurgeryIcon {
  background-image: url("../images/generalSurgeryIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.emailIcon {
  background-image: url("../images/emailIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.patientIcon {
  background-image: url("../images/patientIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.callIcon {
  background-image: url("../images/callIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.IDIcon {
  background-image: url("../images/IDIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.bloodTypeIcon {
  background-image: url("../images/bloodTypeIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.appointmentIDIcon {
  background-image: url("../images/appointmentIDIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.dateIcon {
  background-image: url("../images/dateIcon.png");
}
.popup.dialogue .box .doctorProfile ul li span.timeIcon {
  background-image: url("../images/timeIcon.png");
}
.popup.dialogue .box .doctorProfile ul > li {
  width: calc(100% - 644px);
}
.popup.dialogue .box .doctorProfile ul > li:first-child {
  width: 310px;
}
.popup.dialogue .box .doctorProfile ul > li:last-child {
  width: 270px;
}
.popup.dialogue .box button {
  margin: 0 6px;
  padding: 8px 44px;
  width: auto;
  display: inline-block;
  cursor: pointer;
}
.popup.dialogue .box button.white {
  border: 1px solid #E0E0E8;
  background-color: #FFF;
  color: #22206B;
}
.popup.dialogue .box .prescriptionSection {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 44px;
}
.popup.dialogue .box .prescriptionSection article {
  width: calc(100% - 464px);
  position: relative;
}
.popup.dialogue .box .prescriptionSection article:first-of-type {
  width: 420px;
}
.popup.dialogue .box .prescriptionSection article:first-of-type:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #EAECF0;
  right: -22px;
  top: 0;
}
.popup.dialogue .box .prescriptionSection article .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
  display: block;
  margin-bottom: 16px;
}
.popup.dialogue .box .prescriptionSection article .title.medicine {
  font-size: 16px;
  margin-bottom: 8px;
}
.popup.dialogue .box .prescriptionSection article .title.medicine + textarea {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  height: 75px;
  margin-bottom: 24px;
}
.popup.dialogue .box .prescriptionSection article .title.medicine.preview {
  color: #B7B7B7;
}
.popup.dialogue .box .prescriptionSection article .title.medicine.preview i {
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: #8B8B8B;
}
.popup.dialogue .box .prescriptionSection article .title.medicine.preview ~ p {
  font-size: 14px;
  line-height: 24px;
  color: #A1A1A1;
  text-align: left;
  margin: 0 0 24px;
}
.popup.dialogue .box .prescriptionSection article .title .edit {
  float: right;
  height: 48px;
  width: 48px;
  border-radius: 12px;
  border: 1px solid #D8D8D8;
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
  /*background-image: url("../images/editIconLight.png");*/
  background-image: url("../images/save.png");
  cursor: pointer;
}

.popup.dialogue .box .prescriptionSection article textarea, .popup.dialogue .box .prescriptionSection article .select2 {
  border-radius: 12px;
  border: 1px solid #E3E3E3;
  padding: 16px;
  margin-bottom: 40px;
  width: 100%;
  resize: none;
  height: 100px;
  font-size: 16px;
  line-height: 24px;
  font-family: inherit;
  background-color: #fcfdfe;
}
.popup.dialogue .box .prescriptionSection article .select2 {
  width: calc(100% - 60px);
  height: 52px;
  background-color: #fcfdfe;
  float: left;
  padding: 13px 70px 13px 14px;
  background-image: url("../images/searchIconGray.png");
  background-size: 20px;
  background-position: right 42px center;
  background-repeat: no-repeat;
}
.popup.dialogue .box .prescriptionSection article .select2 .selection {
  display: block;
  height: 24px;
}
.popup.dialogue .box .prescriptionSection article .select2 .selection .select2-selection--single {
  border: 0;
}
.popup.dialogue .box .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__rendered {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.popup.dialogue .box .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__arrow {
  background-image: url("../images/selectBoxArrow.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
  right: 14px;
  top: 13px;
}
.popup.dialogue .box .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.popup.dialogue .box .prescriptionSection article .select2 + button {
  width: 52px;
  float: left;
  padding: 0;
  margin: 0;
  height: 52px;
  border: 1px solid #D8D8D8;
  border-radius: 12px;
  background-color: #fcfdfe;
  color: #22206B;
  font-weight: 400;
  font-size: 36px;
  margin-left: 8px;
}
.popup.dialogue .box .prescriptionSection ~ button {
  float: right;
  background-color: #fcfdfe;
  border: 1px solid #D8D8D8;
  color: #22206B;
  font-weight: 500;
}
.popup.dialogue .box .prescriptionSection ~ button.cancel {
  color: #E70000;
}
.popup.dialogue .box .prescriptionSection ~ button.print {
  padding-left: 62px;
  background-image: url("../images/printIcon.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left 36px center;
}
.popup.dialogue .box .mainForm ul {
  margin: 0 -8px;
}
.popup.dialogue .box .mainForm ul li {
  padding: 0 8px;
  float: left;
  margin-top: 16px;
}
.popup.dialogue .box .mainForm ul li .title {
  display: block;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 6px;
}
.popup.dialogue .box .mainForm ul li select, .popup.dialogue .box .mainForm ul li input[type=date], .popup.dialogue .box .mainForm ul li input[type=text], .popup.dialogue .box .mainForm ul li input[type=time], .popup.dialogue .box .mainForm ul li .select2 {
  width: 100%;
  background-color: #FFF;
  border-radius: 8px;
  border: 1px solid #E0E0E8;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 38px 12px 14px;
  font-family: inherit;
  appearance: none;
  color: #13123B;
  font-weight: 500;
}
.popup.dialogue .box .mainForm ul li select {
  background-size: 16px;
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-image: url("../images/selectBoxArrow.png");
}
.popup.dialogue .box .mainForm ul li .select2 {
  padding: 13px 70px 13px 14px;
  background-image: url("../images/searchIconGray.png");
  background-size: 20px;
  background-position: right 42px center;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
}
.popup.dialogue .box .mainForm ul li .select2 .selection {
  display: block;
  height: 24px;
}
.popup.dialogue .box .mainForm ul li .select2 .selection .select2-selection--single {
  border: 0;
}
.popup.dialogue .box .mainForm ul li .select2 .selection .select2-selection--single .select2-selection__rendered {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.popup.dialogue .box .mainForm ul li .select2 .selection .select2-selection--single .select2-selection__arrow {
  background-image: url("../images/selectBoxArrow.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
  right: 14px;
  top: 13px;
}
.popup.dialogue .box .mainForm ul li .select2 .selection .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.popup.dialogue .box .mainForm ul li .select2 + button {
  width: 52px;
  float: left;
  padding: 0;
  margin: 0;
  height: 52px;
  border: 1px solid #D8D8D8;
  border-radius: 12px;
  background-color: #fcfdfe;
  color: #22206B;
  font-weight: 400;
  font-size: 36px;
  margin-left: 8px;
}
.popup.dialogue .box .mainForm ul.twoCol li {
  width: 50%;
}
.popup.dialogue .box .mainForm ul.twoCol li:nth-child(-n+2) {
  margin-top: 0;
}
.popup.dialogue .box .mainForm ul.threeCol li {
  width: 33.3333333333%;
}
.popup.dialogue .box .mainForm ul.threeCol li:nth-child(-n+3) {
  margin-top: 0;
}
.popup.dialogue .box .mainForm .subTitle {
  font-size: 24px;
  line-height: 32px;
  color: #13123B;
  padding: 24px 0;
  display: block;
  font-weight: 500;
}
.popup.dialogue .box .medOptions {
  padding-top: 24px;
  border-top: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  margin-bottom: 20px;
}
.popup.dialogue .box .medOptions p {
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  text-align: left;
  margin: 0 0 24px 0;
  color: #22206B;
}
.popup.dialogue .box .medOptions .options {
  margin-bottom: 40px;
}
.popup.dialogue .box .medOptions .options .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 16px;
  display: block;
  color: #22206B;
}
.popup.dialogue .box .medOptions .options ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.popup.dialogue .box .medOptions .options ul li input[type=radio] + label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #8B8B8B;
  padding: 12px 16px;
  border-radius: 24px;
  cursor: pointer;
  border: 1px solid #8B8B8B;
}
.popup.dialogue .box .medOptions .options ul li input[type=radio]:checked + label {
  background-color: #ecebf9;
  border-color: transparent;
  color: #22206B;
}
.popup.dialogue .box .medOptions .options select {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #667085;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  font-family: inherit;
  width: 100%;
}
.popup.dialogue .box .instruction {
  padding: 16px;
  border-radius: 16px;
  background-color: #F4F4FA;
  margin-bottom: 40px;
}
.popup.dialogue .box .instruction .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 10px;
  display: block;
  color: #22206B;
}
.popup.dialogue .box .instruction p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #667085;
}
.popup.dialogue .box .instruction input[type=text], .popup.dialogue .box .instruction input[type=date], .popup.dialogue .box .instruction select {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #667085;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  font-family: inherit;
  width: 100%;
}
.popup.availability {
  background-color: rgba(0, 0, 0, 0.5);
}
.popup.availability .box {
  padding: 48px 80px;
}
.popup.availability .box > .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  text-align: left;
}
.popup.availability .box form > ul > li {
  overflow: hidden;
  margin-bottom: 24px;
}
.popup.availability .box form > ul > li:last-child {
  margin-bottom: 0;
}
.popup.availability .box form > ul > li .title {
  float: left;
  width: 135px;
  text-align: right;
  padding: 8px 16px 8px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #2A2A2A;
}
.popup.availability .box form > ul > li .formElementsArea {
  float: left;
  position: relative;
}
.popup.availability .box form > ul > li .formElementsArea:nth-of-type(2) {
  margin-left: 38px;
}
.popup.availability .box form > ul > li .formElementsArea.directional:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  right: calc(100% + 8px);
  background-image: url("../images/nextArrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  top: 8px;
}
.popup.availability .box form > ul > li .formElementsArea input[type=text], .popup.availability .box form > ul > li .formElementsArea select, .popup.availability .box form > ul > li .formElementsArea input[type=date], .popup.availability .box form > ul > li .formElementsArea input[type=time] {
  height: 40px;
  border-radius: 6px;
  background-color: #ECEBF9;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border: 0;
  padding: 8px;
  font-family: inherit;
  margin: 0;
  width: 240px;
}
.popup.availability .box form > ul > li .formElementsArea select {
  width: auto;
  padding-right: 22px;
  background-image: url("../images/selectBoxArrowDark.png");
  background-size: 16px;
  background-position: right 6px center;
  background-repeat: no-repeat;
  appearance: none;
}
.popup.availability .box form > ul > li .formElementsArea .weekDays {
  padding-top: 16px;
}
.popup.availability .box form > ul > li .formElementsArea .weekDays li {
  float: left;
  margin-bottom: 16px;
  height: 32px;
  margin-left: 8px;
}
.popup.availability .box form > ul > li .formElementsArea .weekDays li:first-child {
  margin-left: 0;
}
.popup.availability .box form > ul > li .formElementsArea .weekDays li label {
  display: block;
  height: 32px;
  width: 32px;
  border-radius: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 4px 0;
  color: #B7B7B7;
  cursor: pointer;
}
.popup.availability .box form > ul > li .formElementsArea .weekDays li input[type=checkbox]:checked + label {
  background-color: #22206B;
  color: #FCFDFE;
}
.popup.availability .box form > ul > li button {
  width: auto;
  margin: 0 12px 0 0;
  padding: 8px 40px;
  float: left;
  min-width: 138px;
}
.popup.availability .box form > ul > li button.white {
  border: 1px solid #D8D8D8;
  background-color: #fcfdfe;
  color: #22206B;
}

.videoPop {
  width: 670px;
  height: 400px;
  border-radius: 24px;
  border: 2px solid #A1A1A1;
  background-color: #C5C4ED;
  position: fixed;
  z-index: 2;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.videoPop .profile {
  padding-top: 48px;
  text-align: center;
}
.videoPop .profile .picture {
  display: inline-block;
  height: 104px;
  width: 104px;
  border: 3px solid #ECEBF9;
  border-radius: 52px;
  margin-bottom: 16px;
}
.videoPop .profile .picture img {
  height: 100%;
  width: 100%;
}
.videoPop .profile .name, .videoPop .profile .status {
  display: block;
}
.videoPop .profile .name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #13123B;
  margin-bottom: 4px;
}
.videoPop .profile .status {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
}
.videoPop .videoRec {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.videoPop .videoSend {
  position: absolute;
  right: 24px;
  bottom: 92px;
  width: 226px;
  height: 138px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
}
.videoPop .controls {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  border-radius: 36px;
  background-color: rgba(82, 78, 202, 0.35);
  padding: 10px 34px;
  z-index: 3;
}
.videoPop .controls ul {
  display: flex;
  gap: 54px;
  flex-direction: row;
  flex-wrap: nowrap;
}
.videoPop .controls ul li {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.videoPop .controls ul li.video {
  background-image: url("../images/noVideoIcon.png");
}
.videoPop .controls ul li.video.active {
  background-image: url("../images/videoOn.png");
}
.videoPop .controls ul li.voice {
  background-image: url("../images/noVoiceIcon.png");
}
.videoPop .controls ul li.voice.off {
  background-image: url("../images/micOff.png");
}
.videoPop .controls ul li.record {
  background-image: url("../images/recordIcon.png");
}
.videoPop .controls ul li.record.active {
  background-image: url("../images/activeRecordIcon.png");
}
.videoPop .controls ul li.volume {
  background-image: url("../images/noVolumeIcon.png");
}
.videoPop .controls ul li.volume.active {
  background-image: url("../images/volumeOn.png");
}
.videoPop .controls ul li.endCall {
  background-color: #E70000;
  background-image: url("../images/endCallIcon.png");
}

.container {
  display: flex;
  padding: 16px;
  gap: 16px;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;
  z-index: 1;
}
.container .menuSection {
  width: 300px;
}
.container .menuSection nav {
  background-color: #ECEBF9;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}
.container .menuSection nav .logo {
  margin: 24px 0;
}
.container .menuSection nav ul {
  border-top: 1px solid #E3E3E3;
  padding-top: 54px;
  position: relative;
}
.container .menuSection nav ul:before {
  content: attr(data-menuName);
  top: 16px;
  left: 0;
  position: absolute;
  font-size: 14px;
  line-height: 22px;
  color: #696985;
}
.container .menuSection nav ul:first-of-type {
  border-top: 0;
  padding-top: 38px;
}
.container .menuSection nav ul:first-of-type:before {
  top: 0;
}
.container .menuSection nav ul li {
  margin-bottom: 16px;
}
.container .menuSection nav ul li a {
  display: block;
  padding: 14px 16px 14px 48px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  background-size: 24px;
  background-position: left 16px center;
  background-repeat: no-repeat;
  background-image: url("../images/barIconBlack.png");
  border-radius: 8px;
}
.container .menuSection nav ul li.active a {
  color: #FCFDFE;
  background-image: url("../images/barIconWhite.png");
  background-color: #22206B;
}
.container .menuSection nav .copyR {
  display: block;
  width: 100%;
}
.container .menuSection .profile {
  border-top: 1px solid #D8D8D8;
  padding-top: 24px;
}
.container .menuSection .profile .logout {
  float: right;
  height: 36px;
  width: 36px;
  background-image: url("../images/logoutIcon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  margin-top: 6px;
}
.container .menuSection .profile .img {
  float: left;
  margin: 4px 12px 0 8px;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border: 1px solid #22206B;
}
.container .menuSection .profile .name, .container .menuSection .profile .email {
  float: left;
  width: calc(100% - 96px);
}
.container .menuSection .profile .name {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
}
.container .menuSection .profile .email {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
}
.container .contentArea {
  width: calc(100% - 316px);
  background-color: #ECEBF9;
  border-radius: 16px;
  padding: 24px;
}
.container .contentArea.white {
  background-color: #FFF;
  padding: 0;
}
.container .contentArea .topBar {
  height: 40px;
  margin-bottom: 24px;
}
.container .contentArea .topBar .heading {
  float: left;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #22206B;
}
.container .contentArea .topBar .ctaSection {
  float: right;
}
.container .contentArea .topBar .ctaSection .search, .container .contentArea .topBar .ctaSection .notification {
  float: left;
  height: 40px;
  width: 40px;
  margin-left: 8px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}
.container .contentArea .topBar .ctaSection .search {
  background-image: url("../images/searchIcon.png");
}
.container .contentArea .topBar .ctaSection .notification {
  background-image: url("../images/notificationIcon.png");
}
.container .contentArea .topBar .ctaSection .notification.white {
  background-color: #FFF;
  border-radius: 6px;
  background-size: 20px;
}
.container .contentArea .topBar .ctaSection .profile {
  float: left;
  height: 40px;
  width: 40px;
  margin-left: 16px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.container .contentArea .topBar .ctaSection .profile img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40px;
  width: 40px;
  transform: translate(-50%, -50%);
}
.container .contentArea .topBar .ctaSection .exportArea {
  padding-left: 24px;
  border-left: 1px solid #D8D8D8;
  float: right;
}
.container .contentArea .topBar .ctaSection .exportArea select, .container .contentArea .topBar .ctaSection .exportArea .export {
  float: left;
}
.container .contentArea .topBar .ctaSection .exportArea select {
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  height: 40px;
  padding: 0 38px 0 16px;
  background-color: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #6E6E6E;
  font-family: inherit;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  background-image: url("../images/selectBoxArrow.png");
}
.container .contentArea .topBar .ctaSection .exportArea .export {
  border-radius: 8px;
  background-color: #22206B;
  padding: 0 14px 0 40px;
  font-size: 16px;
  font-weight: 600;
  color: #FCFDFE;
  font-family: inherit;
  border: 0;
  height: 40px;
  background-position: left 14px center;
  background-repeat: no-repeat;
  background-size: 20px;
  background-image: url("../images/ExportIcon.png");
  margin-left: 8px;
}
.container .contentArea .topBar .breadcrumb {
  padding: 5px 0;
  float: left;
}
.container .contentArea .topBar .breadcrumb li {
  float: left;
  height: 30px;
  margin-left: 32px;
  position: relative;
}
.container .contentArea .topBar .breadcrumb li a {
  display: block;
  height: 30px;
  min-width: 30px;
}
.container .contentArea .topBar .breadcrumb li:before {
  position: absolute;
  height: 16px;
  width: 16px;
  content: "";
  background-image: url("../images/breadcrumbArrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  left: -24px;
  top: 7px;
}
.container .contentArea .topBar .breadcrumb li:first-child {
  margin-left: 0;
}
.container .contentArea .topBar .breadcrumb li:first-child:before {
  display: none;
}
.container .contentArea .topBar .breadcrumb li:first-child a {
  background-image: url("../images/homeIcon.png");
  background-size: 28px;
  background-position: center;
  background-repeat: no-repeat;
}
.container .contentArea .topBar .breadcrumb li:nth-child(n+2) a {
  color: #595970;
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  padding: 4px 8px;
  color: #13123B;
}
.container .contentArea .topBar .breadcrumb li:last-child a {
  pointer-events: none;
  background-color: #F9FAFB;
}
.container .contentArea .tiles {
  display: flex;
  height: 160px;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 16px;
}
.container .contentArea .tiles li {
  background-color: #FCFDFE;
  border-radius: 16px;
  padding: 24px;
  width: calc((100% - 32px) / 3);
}
.container .contentArea .tiles li .title {
  display: block;
  line-height: 40px;
  padding-left: 48px;
  font-size: 14px;
  font-weight: 500;
  color: #4D4D4D;
  position: relative;
  margin-bottom: 8px;
}
.container .contentArea .tiles li .title:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
}
.container .contentArea .tiles li .title.revenue:before {
  background-color: #f7ebfa;
  background-image: url("../images/revenueIcon.png");
}
.container .contentArea .tiles li .title.patients:before {
  background-color: #ffe6ef;
  background-image: url("../images/patientsIcon.png");
}
.container .contentArea .tiles li .title.appointments:before {
  background-color: #ecebf9;
  background-image: url("../images/appointmentsIcon.png");
}
.container .contentArea .tiles li .numbers {
  display: block;
  font-size: 20px;
  line-height: 32px;
  color: #22206B;
  font-weight: 500;
  margin-bottom: 8px;
}
.container .contentArea .tiles li .comparison {
  font-size: 14px;
  line-height: 24px;
  color: #8B8B8B;
  display: block;
}
.container .contentArea .tiles li .comparison i {
  font-style: normal;
  display: inline-block;
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px;
}
.container .contentArea .tiles li .comparison i.green {
  color: #5CCB00;
  background-image: url("../images/increaseIcon.png");
}
.container .contentArea .graphs {
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 370px;
  gap: 16px;
}
.container .contentArea .graphs article {
  padding: 24px;
  background-color: #FCFDFE;
  border-radius: 16px;
}
.container .contentArea .graphs article:first-of-type {
  width: calc(60% - 8px);
}
.container .contentArea .graphs article:nth-of-type(2) {
  width: calc(40% - 8px);
}
.container .contentArea .graphs article .title {
  float: left;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
  padding: 8px 0px;
  margin-bottom: 24px;
}
.container .contentArea .graphs article select {
  background-color: transparent;
  border: 1px solid #E3E3E3;
  height: 40px;
  border-radius: 8px;
  float: right;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  padding: 0 40px 0 14px;
  appearance: none;
  color: #6E6E6E;
  background-image: url("../images/selectBoxArrow.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  margin-bottom: 24px;
}
.container .contentArea .appointmentTable {
  border-radius: 16px;
  background-color: #FCFDFE;
}
.container .contentArea .appointmentTable header {
  padding: 16px 24px;
}
.container .contentArea .appointmentTable header .title {
  float: left;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
  padding: 8px 0px;
}
.container .contentArea .appointmentTable header select {
  background-color: transparent;
  border: 1px solid #E3E3E3;
  height: 40px;
  border-radius: 8px;
  float: right;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  padding: 0 40px 0 14px;
  appearance: none;
  color: #6E6E6E;
  background-image: url("../images/selectBoxArrow.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.container .contentArea .appointmentTable .head, .container .contentArea .appointmentTable .head ~ ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
}
.container .contentArea .appointmentTable .head li, .container .contentArea .appointmentTable .head ~ ul li {
  padding: 14px 24px;
  width: 20%;
}
.container .contentArea .appointmentTable .head li {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #22206B;
}
.container .contentArea .appointmentTable .head ~ ul li {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  padding: 24px;
}
.container .contentArea .appointmentTable .head ~ ul li:first-child {
  padding: 12px 24px;
}
.container .contentArea .appointmentTable .head ~ ul li:first-child .img {
  background-color: #E0E0E0;
  height: 32px;
  width: 32px;
  border-radius: 18px;
  float: left;
  margin-top: 8px;
}
.container .contentArea .appointmentTable .head ~ ul li:first-child .name, .container .contentArea .appointmentTable .head ~ ul li:first-child .number {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
  float: left;
  padding-left: 12px;
  width: calc(100% - 44px);
}
.container .contentArea .appointmentTable .head ~ ul li:first-child .number {
  font-weight: 500;
  color: #6E6E6E;
}
.container .contentArea .appointmentTable .head ~ ul li .status {
  display: inline-block;
  height: 20px;
  border-radius: 10px;
  line-height: 16px;
  padding: 2px 8px 2px 22px;
  font-size: 12px;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: left 6px center;
}
.container .contentArea .appointmentTable .head ~ ul li .status.green {
  background-color: #e9fbf2;
  border-color: #5bc900;
  background-image: url("../images/tickGreen.png");
  color: #5CCB00;
}
.container .contentArea .appointmentTable .head ~ ul li .status.orange {
  background-color: #fcf9f6;
  border-color: #fc8700;
  background-image: url("../images/refundOrange.png");
  color: #fc8700;
}
.container .contentArea .appointmentTable .head ~ ul li .status.red {
  background-color: #fbf1f1;
  border-color: #e40000;
  background-image: url("../images/crossRed.png");
  color: #e40000;
}
.container .contentArea .pagination {
  height: 68px;
  padding: 12px 24px 16px 24px;
  position: relative;
}
.container .contentArea .pagination button {
  height: 40px;
  border-radius: 8px;
  background-color: #FCFDFE;
  border: 1px solid #E3E3E3;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: inherit;
  padding: 0 14px 0 42px;
  font-size: 14px;
  font-weight: 500;
  color: #22206B;
  background-size: 20px;
  background-repeat: no-repeat;
}
.container .contentArea .pagination button.previous {
  background-position: left 14px center;
  background-image: url("../images/previousArrow.png");
  float: left;
}
.container .contentArea .pagination button.next {
  padding: 0 42px 0 14px;
  background-position: right 14px center;
  background-image: url("../images/nextArrow.png");
  float: right;
}
.container .contentArea .pagination ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.container .contentArea .pagination ul li {
  float: left;
  margin-left: 2px;
  color: #8B8B8B;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
}
.container .contentArea .pagination ul li span {
  display: block;
  border-radius: 20px;
  width: 40px;
  cursor: pointer;
}
.container .contentArea .pagination ul li.active span {
  background-color: #C5C4ED;
  color: #22206B;
}
.container .contentArea .subSectionTitleFilters {
  margin-bottom: 24px;
}
.container .contentArea .subSectionTitleFilters .makeCall, .container .contentArea .subSectionTitleFilters .videoCall {
  height: 32px;
  width: 32px;
  float: right;
  margin-left: 24px;
  cursor: pointer;
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center;
}
.container .contentArea .subSectionTitleFilters .makeCall {
  background-image: url("../images/makeCallIcon.png");
}
.container .contentArea .subSectionTitleFilters .videoCall {
  background-image: url("../images/videoIcon.png");
}
.container .contentArea .subSectionTitleFilters .title {
  float: left;
  font-size: 32px;
  line-height: 42px;
  color: #22206B;
  font-weight: 600;
  margin-bottom: 24px;
}
.container .contentArea .subSectionTitleFilters .title small {
  font-size: 20px;
  font-weight: 500;
  color: #6E6E6E;
}
.container .contentArea .subSectionTitleFilters .CTAs {
  float: right;
  margin-bottom: 24px;
}
.container .contentArea .subSectionTitleFilters .CTAs select, .container .contentArea .subSectionTitleFilters .CTAs a {
  height: 40px;
  float: left;
  border-radius: 8px;
  margin-left: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 16px 8px 40px;
  background-size: 20px;
  background-position: left 14px center;
  background-repeat: no-repeat;
}
.container .contentArea .subSectionTitleFilters .CTAs a {
  background-color: #22206B;
  color: #FFF;
  background-image: url("../images/plusWhiteIcon.png");
}
.container .contentArea .subSectionTitleFilters .CTAs select {
  border: 1px solid #22206B;
  background-color: #ecebf9;
  color: #22206B;
  background-image: url("../images/sortIcon.png");
  appearance: none;
}
.container .contentArea .subSectionTitleFilters .filters {
  float: left;
  width: 100%;
  height: 56px;
}
.container .contentArea .subSectionTitleFilters .filters form ul {
  float: left;
}
.container .contentArea .subSectionTitleFilters .filters form ul li {
  float: left;
  margin-right: 8px;
}
.container .contentArea .subSectionTitleFilters .filters form ul li select, .container .contentArea .subSectionTitleFilters .filters form ul li input[type=text] {
  height: 56px;
  border-radius: 12px;
  border: 1px solid #E0E0E8;
  background-color: #FFF;
  appearance: none;
  padding: 16px 56px 16px 24px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: #8F8FA6;
  background-image: url("../images/selectBoxArrow.png");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px;
}
.container .contentArea .subSectionTitleFilters .filters form ul li input[type=text] {
  background-image: url("../images/searchIconGray.png");
  color: #00030A;
  font-weight: 600;
}
.container .contentArea .subSectionTitleFilters .filters form ul li .control {
  border-radius: 12px;
  border: 1px solid #E0E0E8;
  background-color: #FCFDFE;
  height: 56px;
  width: 56px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  background-image: url("../images/controlIcon.png");
}
.container .contentArea .subSectionTitleFilters .filters form ul + button {
  height: 56px;
  width: 56px;
  border-radius: 12px;
  border: 1px solid #E0E0E8;
  background-color: #FFF;
  float: left;
  cursor: pointer;
  margin-left: 8px;
  background-image: url("../images/searchIcon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.container .contentArea .subSectionTitleFilters .filters.sorting form {
  float: left;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView {
  float: right;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort {
  float: left;
  position: relative;
  padding: 4px 0;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort > span {
  display: block;
  width: 56px;
  height: 48px;
  border-radius: 16px;
  background-color: #fcfcfd;
  background-image: url("../images/sortIcon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  cursor: pointer;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort ul {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: #FFF;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  box-shadow: 0 11px 11px rgba(115, 115, 115, 0.09);
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort ul li {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  padding: 12px 40px 12px 16px;
  cursor: pointer;
  white-space: nowrap;
  color: #13123B;
  width: 300px;
  border-top: 1px solid #F2F4F7;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort ul li:first-child {
  border-top: 0;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort ul li.active {
  background-image: url("../images/optionTick.png");
  background-size: 16px;
  background-position: right 16px center;
  background-repeat: no-repeat;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .sort:hover ul {
  opacity: 1;
  visibility: visible;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view {
  height: 48px;
  border-radius: 24px;
  background-color: #FFF;
  padding: 6px;
  float: left;
  width: 112px;
  margin: 4px 0 4px 16px;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li {
  width: 48px;
  height: 100%;
  float: left;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li a {
  display: block;
  background-repeat: no-repeat;
  border-radius: 18px;
  background-size: 20px;
  background-position: center;
  cursor: pointer;
  height: 100%;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li:first-child {
  margin-right: 4px;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li:first-child a {
  background-image: url("../images/listViewGray.png");
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li:nth-child(2) a {
  background-image: url("../images/gridViewGray.png");
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li.active a {
  background-color: #ecebf9;
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li.active:first-child a {
  background-image: url("../images/listView.png");
}
.container .contentArea .subSectionTitleFilters .filters.sorting .sortView .view li.active:nth-child(2) a {
  background-image: url("../images/gridView.png");
}
.container .contentArea .consultationTab {
  height: 56px;
  background-color: #FFF;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px;
}
.container .contentArea .consultationTab li {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #D8D8D8;
  width: calc((100% - 30px) / 6);
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
.container .contentArea .consultationTab li.active {
  background-color: #ECEBF9;
  border-radius: 6px;
  color: #13123B;
  font-weight: 600;
}
.container .contentArea .consultationTab.auto li {
  width: auto;
  flex: 1;
}
.container .contentArea .activeCategory {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 24px;
}
.container .contentArea .activeCategory li {
  width: calc((100% - 48px) / 3);
  border-radius: 24px;
  background-color: #FCFDFE;
  padding: 124px 16px 16px 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #22206B;
  text-align: center;
  background-size: 100px;
  background-position: top 16px center;
  background-repeat: no-repeat;
}
.container .contentArea .activeCategory li.smokers {
  background-image: url("../images/smokersImg.png");
}
.container .contentArea .activeCategory li.sleep {
  background-image: url("../images/sleepImg.png");
}
.container .contentArea .activeCategory li.active {
  background-image: url("../images/activeImg.png");
}
.container .contentArea .tabs {
  background-color: rgba(236, 235, 249, 0.2);
  border: 1px solid #B7B7B7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 8px 16px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 8px;
}
.container .contentArea .tabs li {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  padding: 10px 0;
  width: calc((100% - 16px) / 3);
  color: #8B8B8B;
}
.container .contentArea .tabs li.active {
  background-color: #fcfdfe;
  color: #22206B;
  font-weight: 600;
}
.container .contentArea .noAppointments {
  background-color: #FFF;
  border-radius: 24px;
  padding: 206px 24px 24px 24px;
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: #00030A;
  text-align: center;
  background-image: url("../images/appointmentImg.png");
  background-size: 180px 150px;
  background-position: center top 24px;
  background-repeat: no-repeat;
}
.container .contentArea .noAppointments.noBg {
  background-color: transparent;
  background-size: auto 300px;
  padding-top: 320px;
  font-weight: 600;
}
.container .contentArea .noAppointments.noBg.img2 {
  background-image: url("../images/appointmentImg2.png");
}
.container .contentArea .calendar {
  padding: 0 27.5px;
  background-color: #FFF;
  border-radius: 16px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.container .contentArea .calendar > ul {
  padding-left: 48px;
  position: relative;
  height: 72px;
}
.container .contentArea .calendar > ul:before {
  position: absolute;
  content: attr(data-time);
  font-size: 12px;
  line-height: 18px;
  color: #7A7A96;
  right: calc(100% - 48px + 12px);
}
.container .contentArea .calendar > ul > li {
  float: left;
  width: 14.2857142857%;
  height: 100%;
  border-left: 1px solid #e0e0e0;
}
.container .contentArea .calendar > ul > li:first-child {
  border-left: 0;
}
.container .contentArea .calendar > ul > li.today {
  background-color: #f5f5ff !important;
}
.container .contentArea .calendar > ul:first-of-type {
  height: 80px;
}
.container .contentArea .calendar > ul:first-of-type li {
  padding: 16px 8px;
}
.container .contentArea .calendar > ul:first-of-type li .day {
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  color: #7A7A96;
  display: block;
}
.container .contentArea .calendar > ul:first-of-type li .day + span {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  display: block;
  color: #13123B;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li {
  position: relative;
  border-top: 1px solid #e0e0e0;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li:before {
  position: absolute;
  content: "";
  height: 1px;
  left: 0;
  right: 0;
  background-color: #F7F7F7;
  top: 50%;
  z-index: 1;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div {
  border-radius: 4px;
  background-color: rgba(197, 196, 237, 0.6);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(34, 32, 107, 0.6);
  height: 100%;
  position: relative;
  z-index: 2;
  padding: 6px;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div i {
  display: block;
  cursor: pointer;
  height: 16px;
  width: 16px;
  right: 6px;
  top: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/calendarMoreIcon.png");
  background-size: 16px;
  position: absolute;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .time, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .name, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .status {
  font-size: 12px;
  color: #22206B;
  line-height: 16px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .time {
  position: relative;
  padding-right: 16px;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .time:after {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-image: url("../images/calendarUserIcon.png");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #22206B;
  content: "";
  display: inline-block;
  top: 3px;
  right: 0;
  position: absolute;
  display: none;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .name {
  margin-bottom: 0;
  display: block;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div .status {
  font-size: 10px;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.purple {
  border-left-color: rgba(134, 41, 150, 0.6);
  background-color: rgba(247, 235, 250, 0.6);
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.purple i {
  background-image: url("../images/calendarMoreIconPurple.png");
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.purple .time, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.purple .name {
  color: #862996;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.purple .time:after {
  background-color: #77bfb3;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red {
  border-left-color: #E70000;
  background-color: rgba(241, 102, 102, 0.15);
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red i {
  background-image: url("../images/calendarMoreIconRed.png");
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red .time, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red .name, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red .status {
  color: #E70000;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.red .time:after {
  background-color: #f1a086;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink {
  border-left-color: #FD1C70;
  background-color: rgba(253, 28, 112, 0.12);
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink i {
  background-image: url("../images/calendarMoreIconPink.png");
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink .time, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink .name, .container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink .status {
  color: #FD1C70;
}
.container .contentArea .calendar > ul:nth-of-type(n + 2) > li > div.pink .time:after {
  background-color: #de66a1;
}
.container .contentArea .calendar .fc-header-toolbar {
  padding-top: 25px;
}
.container .contentArea .calendar .bubble {
  border-radius: 4px;
  background-color: rgba(197, 196, 237, 0.6);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(34, 32, 107, 0.6);
  height: 100%;
  position: relative;
  z-index: 2;
  padding: 6px;
  width: 100%;
}
.container .contentArea .calendar .bubble i {
  display: block;
  cursor: pointer;
  height: 16px;
  width: 16px;
  right: 6px;
  top: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/calendarMoreIcon.png");
  background-size: 16px;
  position: absolute;
}
.container .contentArea .calendar .bubble .more {
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  background-color: #FFF;
  position: absolute;
  left: calc(100% - 25px);
  bottom: 100%;
  box-shadow: 0 10px 10px rgba(115, 115, 115, 0.09);
  overflow: hidden;
  display: none;
}
.container .contentArea .calendar .bubble .more li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  padding: 10px 16px 10px 40px;
  white-space: nowrap;
  color: #22206B;
  display: block;
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 16px;
}
.container .contentArea .calendar .bubble .more li:first-child a {
  background-image: url("../images/consultationIcon.png");
}
.container .contentArea .calendar .bubble .more li:nth-child(2) a, .container .contentArea .calendar .bubble .more li:nth-child(4) a {
  background-image: url("../images/showIcon.png");
}
.container .contentArea .calendar .bubble .more li:nth-child(3) a {
  background-image: url("../images/addIcon.png");
}
.container .contentArea .calendar .bubble .more li:nth-child(5) a {
  background-image: url("../images/editIcon.png");
}
.container .contentArea .calendar .bubble .more li:nth-child(6) a {
  color: #E70000;
  background-image: url("../images/deleteIcon.png");
  border-top: 1px solid #F5F5F7;
}
.container .contentArea .calendar .bubble .time, .container .contentArea .calendar .bubble .name, .container .contentArea .calendar .bubble .status {
  font-size: 12px;
  color: #22206B;
  line-height: 16px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
}
.container .contentArea .calendar .bubble .time {
  position: relative;
  padding-right: 16px;
}
.container .contentArea .calendar .bubble .time:after {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-image: url("../images/calendarUserIcon.png");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #22206B;
  content: "";
  display: inline-block;
  top: 3px;
  right: 0;
  position: absolute;
  display: none;
}
.container .contentArea .calendar .bubble .name {
  margin-bottom: 0;
  display: block;
}
.container .contentArea .calendar .bubble .status {
  font-size: 10px;
}
.container .contentArea .calendar .bubble.previous {
  border-left-color: rgba(134, 41, 150, 0.6);
  background-color: rgba(247, 235, 250, 0.6);
}
.container .contentArea .calendar .bubble.previous i {
  background-image: url("../images/calendarMoreIconPurple.png");
}
.container .contentArea .calendar .bubble.previous .time, .container .contentArea .calendar .bubble.previous .name {
  color: #862996;
}
.container .contentArea .calendar .bubble.previous .time:after {
  background-color: #77bfb3;
}
.container .contentArea .calendar .bubble.cancelled {
  border-left-color: #E70000;
  background-color: rgba(241, 102, 102, 0.15);
}
.container .contentArea .calendar .bubble.cancelled i {
  background-image: url("../images/calendarMoreIconRed.png");
}
.container .contentArea .calendar .bubble.cancelled .time, .container .contentArea .calendar .bubble.cancelled .name, .container .contentArea .calendar .bubble.cancelled .status {
  color: #E70000;
}
.container .contentArea .calendar .bubble.cancelled .time:after {
  background-color: #f1a086;
}
.container .contentArea .calendar .bubble.upcoming {
  border-left-color: #FD1C70;
  background-color: rgba(253, 28, 112, 0.12);
}
.container .contentArea .calendar .bubble.upcoming i {
  background-image: url("../images/calendarMoreIconPink.png");
}
.container .contentArea .calendar .bubble.upcoming .time, .container .contentArea .calendar .bubble.upcoming .name, .container .contentArea .calendar .bubble.upcoming .status {
  color: #FD1C70;
}
.container .contentArea .calendar .bubble.upcoming .time:after {
  background-color: #de66a1;
}
.container .contentArea .calendarLegends span {
  float: left;
  line-height: 18px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 24px;
  position: relative;
  padding-left: 23px;
}
.container .contentArea .calendarLegends span:first-of-type {
  margin-left: 0;
}
.container .contentArea .calendarLegends span:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  top: 1.5px;
  left: 0;
  border-radius: 50%;
  background-color: #22206B;
}
.container .contentArea .calendarLegends span.purple {
  color: #862996;
}
.container .contentArea .calendarLegends span.purple:before {
  background-color: #862996;
}
.container .contentArea .calendarLegends span.red {
  color: #e70000;
}
.container .contentArea .calendarLegends span.red:before {
  background-color: #e70000;
}
.container .contentArea .calendarLegends span.pink {
  color: #fd1c70;
}
.container .contentArea .calendarLegends span.pink:before {
  background-color: #fd1c70;
}
.container .contentArea .mainForm ul {
  margin: 0 -8px;
}
.container .contentArea .mainForm ul li {
  padding: 0 8px;
  float: left;
  margin-top: 16px;
}
.container .contentArea .mainForm ul li .title {
  display: block;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 6px;
}
.container .contentArea .mainForm ul li select, .container .contentArea .mainForm ul li input[type=date], .container .contentArea .mainForm ul li input[type=text] {
  width: 100%;
  background-color: #FFF;
  border-radius: 8px;
  border: 1px solid #E0E0E8;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 38px 12px 14px;
  font-family: inherit;
  appearance: none;
  color: #13123B;
  font-weight: 500;
}
.container .contentArea .mainForm ul li select {
  background-size: 16px;
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-image: url("../images/selectBoxArrow.png");
}
.container .contentArea .mainForm ul.twoCol li {
  width: 50%;
}
.container .contentArea .mainForm ul.twoCol li:nth-child(-n+2) {
  margin-top: 0;
}
.container .contentArea .mainForm ul.threeCol li {
  width: 33.3333333333%;
}
.container .contentArea .mainForm ul.threeCol li:nth-child(-n+3) {
  margin-top: 0;
}
.container .contentArea .mainForm .subTitle {
  font-size: 24px;
  line-height: 32px;
  color: #13123B;
  padding: 24px 0;
  display: block;
  font-weight: 500;
}
.container .contentArea.bottomButtons {
  padding-bottom: 64px;
  position: relative;
}
.container .contentArea.bottomButtons .formButtons {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  height: 40px;
}
.container .contentArea.bottomButtons .formButtons button {
  float: right;
  height: 40px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 8px 42.5px;
  border: 0;
  background-color: #FFF;
  color: #22206B;
  font-family: inherit;
  margin-left: 12px;
  cursor: pointer;
}
.container .contentArea.bottomButtons .formButtons button.blue {
  background-color: #22206B;
  color: #FFF;
}
.container .contentArea .profile header {
  padding: 200px 32px 0;
  position: relative;
  margin-bottom: 48px;
}
.container .contentArea .profile header .banner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  border-radius: 16px 16px 0 0;
  height: 240px;
  overflow: hidden;
  background: rgb(23, 0, 93);
  background: linear-gradient(77deg, rgb(23, 0, 93) 0%, rgb(182, 168, 228) 46%, rgb(232, 165, 238) 54%, rgb(134, 41, 150) 100%);
  z-index: 1;
}
.container .contentArea .profile header .info {
  position: relative;
  z-index: 2;
}
.container .contentArea .profile header .info .picture {
  float: left;
  height: 168px;
  width: 168px;
  border: 4px solid #FFF;
  border-radius: 84px;
  box-shadow: 0 12px 16px 4px rgba(16, 24, 40, 0.08);
  position: relative;
  margin-right: 24px;
}
.container .contentArea .profile header .info .picture:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  content: "";
  border-radius: 80px;
  border: 1px solid #13123B;
  opacity: 0.08;
  z-index: 2;
}
.container .contentArea .profile header .info .name {
  float: left;
  padding-top: 64px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 600;
  color: #22206B;
  width: calc(100% - 192px);
}
.container .contentArea .profile header .info .name .rating {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #22206B;
  padding-left: 24px;
  background-size: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url("../images/ratingStar.png");
  position: absolute;
  transform: translate(5px, 12px);
}
.container .contentArea .profile header .info .name a {
  float: right;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  font-family: inherit;
  color: #FCFDFE;
  background-color: #22206B;
}
.container .contentArea .profile header .info p {
  font-size: 16px;
  line-height: 24px;
  color: #6E6E6E;
  font-weight: 500;
  float: left;
  padding-top: 4px;
  margin: 0;
  width: calc(100% - 192px);
}
.container .contentArea .profile .detail {
  padding: 0 32px;
}
.container .contentArea .profile .detail .profileSectionTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: #22206B;
  display: block;
  margin-bottom: 24px;
}
.container .contentArea .profile .detail .profileSectionTitle .seeAll {
  float: right;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #22206B;
  margin-top: 6px;
  padding-right: 28px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  background-image: url("../images/seeAllArrow.png");
}
.container .contentArea .profile .detail p {
  font-size: 18px;
  line-height: 150%;
  color: #6E6E6E;
  margin: 0 0 24px;
}
.container .contentArea .profile .detail .bullets {
  margin-bottom: 24px;
}
.container .contentArea .profile .detail .bullets li {
  font-size: 18px;
  line-height: 24px;
  color: #6E6E6E;
  font-weight: 500;
  padding-left: 36px;
  background-image: url("../images/bulletPointGreen.png");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left top;
}
.container .contentArea .profile .detail .moreInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.container .contentArea .profile .detail .moreInfo li {
  width: calc((100% - 24px) / 2);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #B7B7B7;
}
.container .contentArea .profile .detail .contactInfo {
  margin: 0 -16px 24px;
}
.container .contentArea .profile .detail .contactInfo li {
  padding: 0 16px;
  width: 50%;
  margin-top: 32px;
  float: left;
  font-size: 16px;
  line-height: 24px;
  color: #22206B;
  font-weight: 600;
  position: relative;
}
.container .contentArea .profile .detail .contactInfo li:nth-child(-n+2) {
  margin-top: 0;
}
.container .contentArea .profile .detail .contactInfo li .title {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.container .contentArea .profile .detail .contactInfo li .flag {
  float: left;
  width: 35px;
  margin-right: 8px;
  padding: 2px 0;
  height: 24px;
}
.container .contentArea .profile .detail .contactInfo li .flag img {
  width: 35px;
  height: auto;
}
.container .contentArea .profile .detail .contactInfo li .link {
  position: absolute;
  background-image: url("../images/externalLinkIcon.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  transform: translateX(8px);
}
.container .contentArea .profile .detail .reviews {
  margin: 0 -8px 32px;
}
.container .contentArea .profile .detail .reviews li {
  float: left;
  padding: 0 8px;
  margin-top: 16px;
  width: 50%;
}
.container .contentArea .profile .detail .reviews li:nth-child(-n+2) {
  margin-top: 0;
}
.container .contentArea .profile .detail .reviews li article {
  background-color: #ecebf9;
  border-radius: 16px;
  padding: 24px;
}
.container .contentArea .profile .detail .reviews li article .picture {
  height: 64px;
  width: 64px;
  border-radius: 32px;
  float: left;
  margin-right: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.container .contentArea .profile .detail .reviews li article .name {
  float: left;
  width: calc(100% - 80px);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  padding: 4px 0;
}
.container .contentArea .profile .detail .reviews li article .name .rating {
  float: right;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #22206B;
  padding-left: 24px;
  background-size: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url("../images/ratingStar.png");
}
.container .contentArea .profile .detail .reviews li article .name i {
  display: block;
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
  color: #4D4D4D;
  font-weight: 400;
  font-style: normal;
}
.container .contentArea .profile .detail .reviews li article p {
  font-size: 16px;
  line-height: 24px;
  color: #6E6E6E;
  margin: 0;
}
.container .contentArea .profile .detail .timeAvail {
  position: relative;
  margin-bottom: 24px;
}
.container .contentArea .profile .detail .timeAvail > i {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #FCFDFE;
  padding: 10px 16px;
  font-style: normal;
  background-color: #22206B;
  border-radius: 8px;
  cursor: pointer;
}
.container .contentArea .profile .detail .timeAvail > ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 48px;
}
.container .contentArea .profile .detail .timeAvail > ul > li {
  background-color: #ecebf9;
  border-radius: 24px;
  padding: 24px 8px;
  width: calc((100% - 32px) / 3);
}
.container .contentArea .profile .detail .timeAvail > ul > li .dayDate {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #22206B;
  padding: 6px 0;
  text-align: center;
  margin-bottom: 16px;
}
.container .contentArea .profile .detail .timeAvail > ul > li .dayDate span {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}
.container .contentArea .profile .detail .timeAvail > ul > li .dayDate span:nth-of-type(2):before {
  position: absolute;
  width: 1px;
  height: 36px;
  left: 0;
  top: -6px;
  background-color: #D8D8D8;
  content: "";
}
.container .contentArea .profile .detail .timeAvail > ul > li ul {
  padding-top: 16px;
  border-top: 1px solid #E3E3E3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 7px;
}
.container .contentArea .profile .detail .timeAvail > ul > li ul li {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  padding: 8px;
  border-radius: 8px;
  background-color: #FCFDFE;
  width: calc((100% - 68px) / 4);
  text-align: center;
  cursor: pointer;
}
.container .contentArea .profile .detail .timeAvail > ul > li ul li:last-child {
  width: 40px;
  background-image: url("../images/nextArrow2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.container .contentArea .profile .detail .timeAvail > ul > li ul li.active {
  background-color: #22206B;
  color: #FCFDFE;
  font-weight: 600;
}
.container .contentArea .profile .detail .timeAvail .navigate {
  height: 40px;
  text-align: right;
}
.container .contentArea .profile .detail .timeAvail .navigate span {
  display: inline-block;
  margin-left: 14px;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  border: 1px solid #22206B;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/navLeft.png");
  cursor: pointer;
}
.container .contentArea .profile .detail .timeAvail .navigate span.disabled {
  border-color: #b7b7b7;
  background-image: url("../images/navLeftGray.png");
}
.container .contentArea .profile .detail .timeAvail .navigate span.disabled:last-of-type {
  background-image: url("../images/navRightGray.png");
}
.container .contentArea .profile .detail .timeAvail .navigate span:last-of-type {
  background-image: url("../images/navRight.png");
}
.container .contentArea .patientsGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 46px;
}
.container .contentArea .patientsGrid > li {
  border: 1px solid #D8D8D8;
  background-color: #fcfdfe;
  padding: 24px 16px;
  border-radius: 16px;
  width: calc((100% - 32px) / 3);
}
.container .contentArea .patientsGrid > li .name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #13123B;
  padding: 3px 0;
  float: left;
}
.container .contentArea .patientsGrid > li .name i {
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: #A1A1A1;
}
.container .contentArea .patientsGrid > li .category {
  float: right;
  background-color: rgba(253, 58, 131, 0.1);
  border-radius: 7px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #FD1C70;
  padding: 7px 8px 7px 24px;
  position: relative;
}
.container .contentArea .patientsGrid > li .category:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: #FD1C70;
  left: 7px;
  top: 10px;
}
.container .contentArea .patientsGrid > li > ul {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  padding-top: 12px;
}
.container .contentArea .patientsGrid > li > ul > li {
  width: calc((100% - 8px) / 2);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  padding-left: 26px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left center;
}
.container .contentArea .patientsGrid > li > ul > li.call {
  background-image: url("../images/callIcon.png");
}
.container .contentArea .patientsGrid > li > ul > li.doctor {
  background-image: url("../images/doctorIcon.png");
}
.container .contentArea .patientsGrid > li > ul > li.hospital {
  background-image: url("../images/hospitalIcon.png");
}
.container .contentArea .patientsGrid > li > ul > li.shield {
  background-image: url("../images/shieldIcon.png");
}
.container .contentArea .patientsGrid > li > ul > li.date {
  background-image: url("../images/dateIconDark.png");
}
.container .contentArea .patientsGrid > li > ul > li:last-child {
  padding: 4px 0 4px 16px;
  font-size: 10px;
  line-height: 16px;
  color: #22206B;
  position: relative;
}
.container .contentArea .patientsGrid > li > ul > li:last-child i {
  position: absolute;
  left: 3.7px;
  height: 9px;
  width: 9px;
  border-radius: 4.5px;
  background-color: #22206B;
  top: 6.5px;
}
.container .contentArea .patientsGrid > li > ul > li:last-child .menu {
  float: right;
  height: 20px;
  width: 20px;
  cursor: pointer;
  background-image: url("../images/dotsMenuIcon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.container .contentArea .patientsList > ul, .container .contentArea .patientsAppointmentTable > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.container .contentArea .patientsList > ul li, .container .contentArea .patientsAppointmentTable > ul li {
  width: 25%;
}
.container .contentArea .patientsList > ul:first-of-type > li, .container .contentArea .patientsAppointmentTable > ul:first-of-type > li {
  background-color: #F9FAFB;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 16px;
  color: #6E6E6E;
  font-weight: 500;
}
.container .contentArea .patientsList > ul:first-of-type > li:first-child, .container .contentArea .patientsAppointmentTable > ul:first-of-type > li:first-child {
  border-radius: 8px 0 0 0;
}
.container .contentArea .patientsList > ul:first-of-type > li:last-child, .container .contentArea .patientsAppointmentTable > ul:first-of-type > li:last-child {
  border-radius: 0 8px 0 0;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li {
  background-color: #FFF;
  border-top: 1px solid #EAECF0;
  padding: 24px 16px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #13123B;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:first-child, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child {
  padding-left: 48px;
  position: relative;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:first-child input[type=checkbox] + label, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child input[type=checkbox] + label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border-radius: 6px;
  float: left;
  border: 1px solid #B7B7B7;
  transition: border 200ms linear;
  cursor: pointer;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:first-child input[type=checkbox]:checked + label, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child input[type=checkbox]:checked + label {
  border-width: 5px;
  border-color: #22206B;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:first-child .name, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child .name {
  font-weight: 600;
  display: block;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:first-child .number, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child .number {
  color: #8B8B8B;
  display: block;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  display: inline-block;
  padding: 6px 15px 6px 35px;
  border-radius: 7px;
  margin-top: 6px;
  position: relative;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status:before, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status:before {
  position: absolute;
  content: "";
  height: 9px;
  width: 9px;
  border-radius: 50%;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.pink, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.pink {
  background-color: rgba(253, 28, 112, 0.1);
  color: #FD1C70;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.pink:before, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.pink:before {
  background-color: #FD1C70;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.blue, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.blue {
  background-color: rgba(128, 170, 255, 0.1);
  color: #80AAFF;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.blue:before, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.blue:before {
  background-color: #80AAFF;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.orange, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.orange {
  background-color: rgba(255, 136, 0, 0.1);
  color: #FF8800;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li .status.orange:before, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li .status.orange:before {
  background-color: #FF8800;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:last-child .menu, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:last-child .menu {
  float: right;
  height: 20px;
  width: 20px;
  cursor: pointer;
  margin: 2px 0 0 0;
  background-image: url("../images/dotsMenuIcon.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
}
.container .contentArea .patientsList > ul:nth-of-type(n + 2) > li:last-child .more, .container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:last-child .more {
  transform: translate(-100%, -100%);
}
.container .contentArea .patientsList > ul:last-of-type li:first-child, .container .contentArea .patientsAppointmentTable > ul:last-of-type li:first-child {
  border-radius: 0 0 0 8px;
}
.container .contentArea .patientsList > ul:last-of-type li:last-child, .container .contentArea .patientsAppointmentTable > ul:last-of-type li:last-child {
  border-radius: 0 0 8px 0;
}
.container .contentArea .quickFilter {
  text-align: right;
  margin-bottom: 24px;
}
.container .contentArea .quickFilter select {
  width: auto;
  border-radius: 13px;
  border: 1px solid #C2C2C2;
  background-color: transparent;
  padding: 8px 40px 8px 12px;
  height: 40px;
  appearance: none;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #667085;
  font-family: inherit;
  background-image: url("../images/selectBoxArrow.png");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
}
.container .contentArea .tabTables {
  background-color: #FFF;
  border: 1px solid #E0E0E8;
  border-radius: 16px;
  padding: 24px;
}
.container .contentArea .tabTables .consultationTab {
  border: 1px solid #E0E0E8;
}
.container .contentArea .tabTables .consultationTab li {
  width: calc((100% - 24px) / 4);
}
.container .contentArea .patientsAppointmentTable {
  margin-bottom: 24px;
}
.container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li {
  height: 72px;
}
.container .contentArea .patientsAppointmentTable > ul:nth-of-type(n + 2) > li:first-child {
  padding-left: 16px;
}
.container .contentArea .patientsAppointmentTable.downloadReport > ul:nth-of-type(n + 2) > li.download {
  padding: 15px 16px;
}
.container .contentArea .patientsAppointmentTable.downloadReport > ul:nth-of-type(n + 2) > li.download a {
  display: inline-block;
  height: 42px;
  width: 42px;
  background-image: url("../images/downloadIcon.png");
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
}
.container .contentArea .patientsAppointmentTable.downloadReport > ul:nth-of-type(n + 2) > li.fileType {
  padding-left: 70px;
  background-size: 42px;
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-image: url("../images/pdfIcon.png");
}
.container .contentArea .profileBox {
  border-radius: 24px;
  padding: 24px;
  background-color: #FCFDFE;
  margin-bottom: 24px;
}
.container .contentArea .profileBox .picture {
  border-radius: 16px;
  background-color: #F2F6FE;
  height: 116px;
  width: 116px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  float: left;
  margin-right: 16px;
  background-image: url("../images/profileImgIcon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px;
}
.container .contentArea .profileBox .name {
  display: block;
  font-size: 24px;
  line-height: 32px;
  color: #22206B;
  font-weight: 600;
  margin-bottom: 8px;
}
.container .contentArea .profileBox .name i {
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: #A1A1A1;
}
.container .contentArea .profileBox .info {
  display: flex;
  gap: 16px;
  flex-direction: row;
  flex-wrap: wrap;
}
.container .contentArea .profileBox .info li {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  padding-left: 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
  width: calc((100% - 48px) / 4);
}
.container .contentArea .profileBox .info li:first-child {
  background-image: url("../images/maleIcon.png");
}
.container .contentArea .profileBox .info li:nth-child(2) {
  background-image: url("../images/ageIcon.png");
}
.container .contentArea .profileBox .info li:nth-child(3) {
  background-image: url("../images/calendarIcon.png");
}
.container .contentArea .profileBox .info li:nth-child(4) {
  background-image: url("../images/callIcon.png");
}
.container .contentArea .profileBox .info li:nth-child(5) {
  background-image: url("../images/emailIconDark.png");
}
.container .contentArea .profileBox .info li:nth-child(6) {
  background-image: url("../images/appointmentIDIcon.png");
}
.container .contentArea .profileBox .info li:nth-child(7) {
  background-image: url("../images/flagIcon.png");
}
.container .contentArea .profileBox .extraInfo {
  display: flex;
  gap: 12px;
  flex-direction: row;
  flex-wrap: nowrap;
}
.container .contentArea .profileBox .extraInfo li {
  padding: 8px 16px;
  border: 1px dashed #C2C2C2;
  border-radius: 12px;
}
.container .contentArea .profileBox .extraInfo li > span {
  font-size: 24px;
  line-height: 130%;
  color: #22206B;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.container .contentArea .profileBox .extraInfo li > span i {
  color: #8B8B8B;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}
.container .contentArea .profileBox .extraInfo li > i {
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #4D4D4D;
}
.container .contentArea .consultationReport {
  padding: 40px 24px;
  background-color: #fcfdfe;
  border-radius: 24px;
}
.container .contentArea .consultationReport .logo {
  float: right;
  height: 45px;
}
.container .contentArea .consultationReport .title {
  font-size: 24px;
  line-height: 32px;
  color: #22206B;
  font-weight: 600;
  float: left;
}
.container .contentArea .consultationReport .doctorProfile {
  float: left;
  width: 100%;
  padding: 24px 0;
  border-color: #ECEBF9;
  border-style: solid;
  border-width: 1px 0;
  margin-top: 20px;
  margin-bottom: 24px;
}
.container .contentArea .consultationReport .doctorProfile ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 32px;
}
.container .contentArea .consultationReport .doctorProfile ul li {
  text-align: left;
  position: relative;
}
.container .contentArea .consultationReport .doctorProfile ul li:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #D8D8D8;
  left: -16px;
  top: 0;
}
.container .contentArea .consultationReport .doctorProfile ul li:first-child:before {
  display: none;
}
.container .contentArea .consultationReport .doctorProfile ul li span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 8px;
  color: #B7B7B7;
  padding-left: 26px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 20px;
  position: relative;
}
.container .contentArea .consultationReport .doctorProfile ul li span.name {
  font-size: 18px;
  font-weight: 600;
  color: #22206B;
  padding: 0;
}
.container .contentArea .consultationReport .doctorProfile ul li span.bullet:before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #B7B7B7;
  border-radius: 4px;
  left: 6px;
  top: 8px;
}
.container .contentArea .consultationReport .doctorProfile ul li span.generalSurgeryIcon {
  background-image: url("../images/generalSurgeryIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.emailIcon {
  background-image: url("../images/emailIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.patientIcon {
  background-image: url("../images/patientIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.callIcon {
  background-image: url("../images/callIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.IDIcon {
  background-image: url("../images/IDIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.bloodTypeIcon {
  background-image: url("../images/bloodTypeIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.appointmentIDIcon {
  background-image: url("../images/appointmentIDIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.dateIcon {
  background-image: url("../images/dateIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul li span.timeIcon {
  background-image: url("../images/timeIcon.png");
}
.container .contentArea .consultationReport .doctorProfile ul > li {
  width: calc(100% - 644px);
}
.container .contentArea .consultationReport .doctorProfile ul > li:first-child {
  width: 310px;
}
.container .contentArea .consultationReport .doctorProfile ul > li:last-child {
  width: 270px;
}
.container .contentArea .consultationReport button {
  margin: 0 6px;
  padding: 8px 16px;
  width: auto;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #22206B;
  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}
.container .contentArea .consultationReport button.blue {
  border-color: transparent !important;
  background-color: #22206B !important;
  color: #FFF !important;
}
.container .contentArea .consultationReport .prescriptionSection {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 44px;
  float: left;
  width: 100%;
}
.container .contentArea .consultationReport .prescriptionSection article {
  width: calc(100% - 464px);
  position: relative;
  border: 0;
  padding: 0;
}
.container .contentArea .consultationReport .prescriptionSection article:first-of-type {
  width: 420px;
}
.container .contentArea .consultationReport .prescriptionSection article:first-of-type:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #EAECF0;
  right: -22px;
  top: 0;
}
.container .contentArea .consultationReport .prescriptionSection article .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #6E6E6E;
  float: left;
  width: 100%;
  margin-bottom: 16px;
}
.container .contentArea .consultationReport .prescriptionSection article .title.medicine {
  font-size: 16px;
  margin-bottom: 8px;
  float: left;
  width: 100%;
}
.container .contentArea .consultationReport .prescriptionSection article .title.medicine + p {
  float: left;
  width: 100%;
  color: #A1A1A1 !important;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  font-weight: 400;
}
.container .contentArea .consultationReport .prescriptionSection article .title .edit {
  float: right;
  height: 48px;
  width: 48px;
  border-radius: 12px;
  border: 1px solid #D8D8D8;
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
  background-image: url("../images/editIconLight.png");
  cursor: pointer;
}
.container .contentArea .consultationReport .prescriptionSection article .diagnosis {
  border-radius: 12px;
  border: 1px solid #E3E3E3;
  padding: 16px;
  float: left;
  width: 100%;
  margin-bottom: 24px;
}
.container .contentArea .consultationReport .prescriptionSection article .diagnosis .title {
  font-size: 16px;
  line-height: 24px;
  color: #22206B;
  width: 100%;
  margin-bottom: 0;
}
.container .contentArea .consultationReport .prescriptionSection article textarea, .container .contentArea .consultationReport .prescriptionSection article .select2 {
  border-radius: 12px;
  border: 1px solid #E3E3E3;
  padding: 16px;
  margin-bottom: 40px;
  width: 100%;
  resize: none;
  height: 100px;
  font-size: 16px;
  line-height: 24px;
  font-family: inherit;
  background-color: #fcfdfe;
}
.container .contentArea .consultationReport .prescriptionSection article textarea:last-of-type {
  margin-bottom: 0;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 {
  width: calc(100% - 60px);
  height: 52px;
  background-color: #fcfdfe;
  float: left;
  padding: 13px 70px 13px 14px;
  background-image: url("../images/searchIconGray.png");
  background-size: 20px;
  background-position: right 42px center;
  background-repeat: no-repeat;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 .selection {
  display: block;
  height: 24px;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 .selection .select2-selection--single {
  border: 0;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__rendered {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__arrow {
  background-image: url("../images/selectBoxArrow.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
  right: 14px;
  top: 13px;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 .selection .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.container .contentArea .consultationReport .prescriptionSection article .select2 + button {
  width: 52px;
  float: left;
  padding: 0;
  margin: 0;
  height: 52px;
  border: 1px solid #D8D8D8;
  border-radius: 12px;
  background-color: #fcfdfe;
  color: #22206B;
  font-weight: 400;
  font-size: 36px;
  margin-left: 8px;
}
.container .contentArea .consultationReport .prescriptionSection ~ button {
  float: right;
  background-color: #fcfdfe;
  border: 1px solid #D8D8D8;
  color: #22206B;
  font-weight: 500;
}
.container .contentArea .consultationReport .prescriptionSection ~ button.cancel {
  color: #E70000;
}
.container .contentArea .consultationReport .prescriptionSection ~ button.print {
  padding-left: 62px;
  background-image: url("../images/printIcon.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left 36px center;
}
.container .contentArea .generalFormSection {
  margin-bottom: 24px;
}
.container .contentArea .generalFormSection form {
  padding: 24px;
  background-color: #FCFCFD;
  border-radius: 16px;
  border: 1px solid #E0E0E8;
  position: relative;
}
.container .contentArea .generalFormSection form .edit {
  position: absolute;
  right: 24px;
  top: 24px;
  border-radius: 12px;
  height: 48px;
  width: 48px;
  /*background-image: url("../images/editIconLight.png");*/
  background-image: url("../images/save.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  background-color: #FCFCFD;
  border: 1px solid #ECEBF9;
  box-shadow: 0 11px 23px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.container .contentArea .generalFormSection form > .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  color: #13123B;
  display: block;
  margin-bottom: 24px;
}
.container .contentArea .generalFormSection form > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}
.container .contentArea .generalFormSection form > ul > li {
  width: calc((100% - 24px) / 2);
  position: relative;
}
.container .contentArea .generalFormSection form > ul > li i {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: 16px;
  line-height: 24px;
  color: #667085;
  font-weight: 500;
  font-style: normal;
}
.container .contentArea .generalFormSection form > ul > li .title {
  font-size: 14px;
  line-height: 24px;
  color: #344054;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.container .contentArea .generalFormSection form > ul > li input[type=text] {
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background-color: #FFF;
  width: 100%;
  padding: 14px 84px 14px 14px;
  font-size: 16px;
  line-height: 24px;
  color: #667085;
  font-weight: 500;
  font-family: inherit;
}
.container .contentArea .complaintForm article {
  padding: 24px;
  background-color: #FCFCFD;
  border-radius: 16px;
  border: 1px solid #E0E0E8;
  position: relative;
  margin-bottom: 24px;
}
.container .contentArea .complaintForm article > .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  color: #13123B;
  display: block;
  margin-bottom: 24px;
}
.container .contentArea .complaintForm article select, .container .contentArea .complaintForm article input[type=text], .container .contentArea .complaintForm article .select2-container--default {
  border: 1px solid #EAECF0;
  background-color: #FFF;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #667085;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  width: 100%;
  font-family: inherit;
}
.container .contentArea .complaintForm article select + button, .container .contentArea .complaintForm article input[type=text] + button, .container .contentArea .complaintForm article .select2-container--default + button {
  border: 1px solid #EAECF0;
  background-color: #FFF;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  width: 58px;
  height: 58px;
  float: right;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/plusIconBrown.png");
  cursor: pointer;
}
.container .contentArea .complaintForm article .multiSelect select {
  width: calc(100% - 68px);
  float: left;
}
.container .contentArea .complaintForm article .multiSelect .select2-container--default {
  width: calc(100% - 68px) !important;
  display: block;
  float: left;
  height: 58px;
}
.container .contentArea .complaintForm article .multiSelect .select2-container--default .select2-selection--multiple {
  border: 0;
  padding: 0;
  box-shadow: none;
}
.container .contentArea .complaintForm article .multiSelect .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  margin: 0 5px 0 0;
  background-color: #c49dd1;
  color: #FFF;
  padding-left: 0;
}
.container .contentArea .complaintForm article .multiSelect .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  position: relative;
  border-color: #dfcce7;
  margin-right: 5px;
  color: #eddbf2;
}
.container .contentArea .complaintForm article .multiSelect .selectionList {
  border-radius: 12px;
  bordeR: 1px solid #EAECF0;
  padding: 16px;
  background-color: #FFF;
  float: left;
  width: 100%;
  margin-top: 24px;
}
.container .contentArea .complaintForm article .multiSelect .selectionList li {
  font-size: 16px;
  line-height: 24px;
  color: #667085;
  list-style: disc;
  margin-left: 16px;
}
.container .contentArea .complaintForm article .radio {
  display: flex;
  flex-direction: row;
}
.container .contentArea .complaintForm article .radio span {
  width: 33.3333333333%;
}
.container .contentArea .complaintForm article .radio span label {
  font-size: 18px;
  line-height: 24px;
  color: #13123B;
  font-weight: 500;
  display: inline-block;
  position: relative;
  padding-left: 24px;
}
.container .contentArea .complaintForm article .radio span label:before {
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  top: 4px;
  border-radius: 8px;
  border: 1px solid #D4E3FF;
  content: "";
  transition: border 200ms linear;
}
.container .contentArea .complaintForm article .radio span input[type=radio]:checked + label:before {
  border: 4px solid #22206B;
}
.container .contentArea .complaintForm article .radio.custom span label {
  float: left;
  line-height: 58px;
}
.container .contentArea .complaintForm article .radio.custom span label:before {
  top: 20px;
}
.container .contentArea .complaintForm article .checkBox {
  margin-top: 24px;
}
.container .contentArea .complaintForm article .checkBox:first-of-type {
  margin-top: 0;
}
.container .contentArea .complaintForm article .checkBox .title {
  float: left;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #13123B;
  width: 340px;
}
.container .contentArea .complaintForm article .checkBox label {
  float: left;
  padding: 0 53px;
  height: 24px;
  position: relative;
}
.container .contentArea .complaintForm article .checkBox label i {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  display: block;
  background-color: #E5E7EB;
  position: relative;
  transition: background-color 200ms linear;
}
.container .contentArea .complaintForm article .checkBox label i:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: #FFF;
  left: 2px;
  top: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
  background-image: url("../images/checkBoxCross.png");
  transition: left 200ms linear;
}
.container .contentArea .complaintForm article .checkBox label:before, .container .contentArea .complaintForm article .checkBox label:after {
  font-size: 18px;
  line-height: 24px;
  color: #13123B;
  font-weight: 500;
  position: absolute;
  top: 0;
}
.container .contentArea .complaintForm article .checkBox label:before {
  content: "No";
  left: 0;
}
.container .contentArea .complaintForm article .checkBox label:after {
  content: "Yes";
  right: 0;
}
.container .contentArea .complaintForm article .checkBox input[type=checkbox]:checked + label i {
  background-color: #22206B;
}
.container .contentArea .complaintForm article .checkBox input[type=checkbox]:checked + label i:before {
  background-image: url("../images/checkBoxTick.png");
  left: 22px;
}
.container .contentArea .complaintForm article select {
  padding-right: 48px;
  background-image: url("../images/selectBoxArrow.png");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: right 16px center;
  appearance: none;
}
.container .contentArea .complaintForm article p {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  font-weight: 500;
  margin-top: -20px;
}
.container .contentArea .complaintForm article .search {
  padding-top: 24px;
}
.container .contentArea .complaintForm article .search .title {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #344054;
  display: block;
  margin-bottom: 6px;
}
.container .contentArea .complaintForm article .search input[type=text] {
  padding-left: 48px;
  background-position: left 16px center;
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url("../images/searchIconGray.png");
}
.container .contentArea .complaintForm article .search input[type=text] + button {
  height: 58px;
  border-radius: 8px;
  background-color: #22206B;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #FCFDFE;
  padding: 16px;
  width: auto;
}
.container .contentArea .complaintForm article .search + .patientsAppointmentTable {
  padding-top: 24px;
}
.container .contentArea .complaintForm article .search + .patientsAppointmentTable ul li {
  width: 100%;
}
.container .contentArea .complaintForm article .search + .patientsAppointmentTable ul:first-of-type li:only-child {
  border-radius: 8px 8px 0 0;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #EAECF0;
}
.container .contentArea .complaintForm article .search + .patientsAppointmentTable ul:nth-of-type(n + 2) li:only-child {
  border-radius: 0 0 8px 8px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #EAECF0;
}
.container .contentArea .complaintForm article .requestTest {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
}
.container .contentArea .complaintForm article .requestTest li {
  flex: 1;
}
.container .contentArea .complaintForm article .requestTest li:nth-child(2) select {
  width: calc(100% - 82px);
}
.container .contentArea .complaintForm article .tests {
  padding-top: 24px;
  margin-bottom: 24px;
}
.container .contentArea .complaintForm article .tests li {
  border: 1px solid #EAECF0;
  border-radius: 12px;
  padding: 16px;
  background-color: #FFF;
}
.container .contentArea .complaintForm article .tests li .testName, .container .contentArea .complaintForm article .tests li .labName {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #667085;
  margin-bottom: 16px;
  display: block;
}
.container .contentArea .complaintForm article .tests li .labName {
  margin-bottom: 0;
  padding-left: 32px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left center;
}
.container .contentArea .complaintForm article .ctaSection {
  border-top: 1px solid #E0E0E8;
  padding-top: 20px;
  text-align: right;
}
.container .contentArea .complaintForm article .ctaSection button {
  height: 58px;
  border-radius: 8px;
  background-color: #22206B;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #FCFDFE;
  padding: 16px;
  width: auto;
  font-family: inherit;
}
.container .contentArea .settingsTab {
  border: 1px solid #E0E0E8;
  border-radius: 8px;
  background-color: #FFF;
  margin-bottom: 24px;
  padding: 6px;
}
.container .contentArea .settingsTab ul {
  display: flex;
  gap: 8px;
}
.container .contentArea .settingsTab ul li {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.container .contentArea .settingsTab ul li.active {
  background-color: #ecebf9;
  font-weight: 600;
  color: #22206B;
}
.container .contentArea .settingsPanel {
  padding: 24px;
  border-radius: 16px;
  background-color: #FFF;
  border: 1px solid #E0E0E8;
}
.container .contentArea .settingsPanel .content-section {
  display: none;
}
.container .contentArea .settingsPanel .content-section.active {
  display: block;
}
.container .contentArea .settingsPanel .content-section .title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  display: block;
  color: #13123B;
  margin-bottom: 4px;
}
.container .contentArea .settingsPanel .content-section .title + p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #6E6E6E;
  margin: 0 0 20px 0;
}
.container .contentArea .settingsPanel .subSection {
  padding: 20px 0;
  border-bottom: 1px solid #D8D8D8;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 32px;
}
.container .contentArea .settingsPanel .subSection .title {
  width: 280px;
}
.container .contentArea .settingsPanel .subSection .title > span {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #13123B;
  display: block;
}
.container .contentArea .settingsPanel .subSection .title > p {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  margin: 0;
}
.container .contentArea .settingsPanel .subSection .elements {
  position: relative;
  width: calc(100% - 280px - 32px);
}
.container .contentArea .settingsPanel .subSection .elements input[type=text], .container .contentArea .settingsPanel .subSection .elements input[type=email], .container .contentArea .settingsPanel .subSection .elements input[type=password], .container .contentArea .settingsPanel .subSection .elements input[type=time], .container .contentArea .settingsPanel .subSection .elements input[type=file], .container .contentArea .settingsPanel .subSection .elements input[type=date], .container .contentArea .settingsPanel .subSection .elements select {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #1A1A1A;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #E0E0E8;
  font-family: inherit;
  width: 100%;
  max-width: 512px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes {
  width: 512px;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li {
  margin-top: 16px;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li:first-child {
  margin-top: 0;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li label {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #13123B;
  display: inline-block;
  cursor: pointer;
  padding-left: 44px;
  position: relative;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li label:before {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 36px;
  border-radius: 10px;
  background-color: #E0E0E8;
  content: "";
  transition: all 200ms linear;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li label:after {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background-color: #FFF;
  left: 2px;
  top: 4px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
  transition: all 200ms linear;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li input[type=checkbox]:checked + label:before {
  background-color: #22206B;
}
.container .contentArea .settingsPanel .subSection .elements .checkBoxes li input[type=checkbox]:checked + label:after {
  left: 18px;
}
.container .contentArea .settingsPanel .subSection .elements .fullName {
  width: 512px;
  display: flex;
  gap: 16px;
}
.container .contentArea .settingsPanel .subSection .elements .fullName li {
  width: calc((100% - 32px) / 3);
}
.container .contentArea .settingsPanel .subSection .elements .photo {
  float: left;
  height: 64px;
  width: 64px;
  border-radius: 32px;
  border: 1px solid #22206B;
  overflow: hidden;
}
.container .contentArea .settingsPanel .subSection .elements .photo img {
  height: 100%;
  width: 100%;
}
.container .contentArea .settingsPanel .subSection .elements .uploader {
  float: left;
  margin-left: 16px;
  border-radius: 12px;
  border: 2px solid #22206B;
  padding: 68px 24px 16px 24px;
  width: 432px;
  background-image: url("../images/fileUploadIcon.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center top 16px;
}
.container .contentArea .settingsPanel .subSection .elements .uploader span {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  display: block;
  text-align: center;
}
.container .contentArea .settingsPanel .subSection .elements .uploader span strong {
  color: #22206B;
  font-weight: 600;
  font-size: 16px;
}
.container .contentArea .settingsPanel .subSection .elements .uploader p {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #6E6E6E;
  text-align: center;
}
.container .contentArea .settingsPanel .subSection .elements select {
  background-color: transparent;
  appearance: none;
  background-image: url("../images/selectBoxArrow.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 14px center;
}
.container .contentArea .settingsPanel .subSection .elements .checkList {
  width: 512px;
  padding-top: 16px;
}
.container .contentArea .settingsPanel .subSection .elements .checkList li {
  font-size: 14px;
  line-height: 24px;
  color: #6E6E6E;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
  background-image: url("../images/checkListIcon.png");
  margin-bottom: 12px;
}
.container .contentArea .settingsPanel .subSection .elements input[type=file] {
  padding-right: 124px;
}
.container .contentArea .settingsPanel .subSection .elements input[type=file]::file-selector-button {
  display: none;
}
.container .contentArea .settingsPanel .subSection .elements.uploadFile:after {
  position: absolute;
  left: 388px;
  top: 0;
  width: 124px;
  height: 44px;
  pointer-events: none;
  content: "Upload";
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #6E6E6E;
  padding: 10px 18px 10px 46px;
  border-left: 1px solid #D0D5DD;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left 18px center;
  background-image: url("../images/uploadIcon.png");
}
.container .contentArea .settingsPanel .subSection .elements .weekDays {
  padding-top: 16px;
}
.container .contentArea .settingsPanel .subSection .elements .weekDays li {
  float: left;
  margin-bottom: 16px;
  height: 32px;
  margin-left: 8px;
}
.container .contentArea .settingsPanel .subSection .elements .weekDays li:first-child {
  margin-left: 0;
}
.container .contentArea .settingsPanel .subSection .elements .weekDays li label {
  display: block;
  height: 32px;
  width: 32px;
  border-radius: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 4px 0;
  color: #B7B7B7;
  cursor: pointer;
}
.container .contentArea .settingsPanel .subSection .elements .weekDays li input[type=checkbox]:checked + label {
  background-color: #22206B;
  color: #FCFDFE;
}
.container .contentArea .settingsPanel .subSection .elements .formElementsArea {
  float: left;
}
.container .contentArea .settingsPanel .subSection .elements .formElementsArea.directional {
  position: relative;
  margin-left: 38px;
}
.container .contentArea .settingsPanel .subSection .elements .formElementsArea.directional:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  right: calc(100% + 8px);
  background-image: url("../images/nextArrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  top: 11px;
}
.container .contentArea .settingsPanel .subSection .elements .formElementsArea + .plus {
  float: left;
  width: 46px;
  height: 46px;
  background-color: #22206B;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/plusIcon.png");
  margin-top: 0;
}
.container .contentArea .settingsPanel button {
  float: right;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  padding: 10px 16px;
  background-color: #FFF;
  color: #22206B;
  font-family: inherit;
  margin-left: 12px;
  cursor: pointer;
  margin-top: 20px;
  border: 1px solid #E0E0E8;
}
.container .contentArea .settingsPanel button.blue {
  background-color: #22206B;
  color: #FFF;
}
.container .contentArea .settingsPanel button:disabled {
  background-color: #ECEBF9;
  pointer-events: none;
}
.container .contentArea .helpTop {
  border-radius: 24px 24px 0 0;
  background-color: #C5C4ED;
  padding: 17px 32px;
}
.container .contentArea .helpTop .logo {
  float: left;
  height: 48px;
  width: 48px;
  border-radius: 24px;
  border: 1px solid #13123B;
  margin-right: 16px;
  position: relative;
}
.container .contentArea .helpTop .logo img {
  max-height: 36px;
  max-width: 36px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.container .contentArea .helpTop .name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #00030A;
  float: left;
  margin-bottom: 7px;
  width: calc(100% - 64px);
}
.container .contentArea .helpTop .desc {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #3B3B3B;
  float: left;
  width: calc(100% - 64px);
}
.container .contentArea .helpTop + form {
  border-radius: 0 0 24px 24px;
  background-color: #FCFDFE;
  padding: 32px 48px;
}
.container .contentArea .helpTop + form .title {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #00030A;
}
.container .contentArea .helpTop + form select {
  width: calc(100% - 245px);
  font-size: 14px;
  line-height: 24px;
  color: #00030A;
  padding: 8px 44px 8px 10px;
  font-family: inherit;
  border: 1px solid #22206B;
  border-radius: 4px;
  background-color: transparent;
  height: 40px;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-image: url("../images/selectBoxArrow.png");
  background-size: 24px;
  margin-bottom: 32px;
}
.container .contentArea .helpTop + form textarea {
  width: 100%;
  border-radius: 24px;
  border: 1px solid #22206B;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-family: inherit;
  resize: none;
  background-color: transparent;
  height: 340px;
  margin-bottom: 60px;
}
.container .contentArea .helpTop + form .formButtons {
  border-top: 1px solid #E0E0E8;
  padding-top: 20px;
}
.container .contentArea .helpTop + form .formButtons button {
  float: right;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  padding: 10px 16px;
  color: #FFF;
  font-family: inherit;
  margin-left: 12px;
  cursor: pointer;
  margin-top: 20px;
  background-color: #22206B;
  border: 0;
}
.container .contentArea .ticketsList {
  background-color: #FFF;
  border-radius: 16px;
  padding: 24px;
}
.container .contentArea .ticketsList ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 8px 16px;
  gap: 8px;
}
.container .contentArea .ticketsList ul li {
  flex: 1;
}

.more {
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  background-color: #FFF;
  position: fixed;
  box-shadow: 0 10px 10px rgba(115, 115, 115, 0.09);
  overflow: hidden;
  display: none;
  z-index: 2;
  transform: translateY(-100%);
}
.more li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  padding: 10px 16px 10px 40px;
  white-space: nowrap;
  color: #22206B;
  display: block;
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 16px;
}
.more li:first-child a {
  background-image: url("../images/consultationIcon.png");
}
.more li:nth-child(2) a, .more li:nth-child(4) a {
  background-image: url("../images/showIcon.png");
}
.more li:nth-child(3) a {
  background-image: url("../images/addIcon.png");
}
.more li:nth-child(5) a {
  background-image: url("../images/editIcon.png");
}
.more li:nth-child(6) a {
  color: #E70000;
  background-image: url("../images/deleteIcon.png");
  border-top: 1px solid #F5F5F7;
}

/*# sourceMappingURL=custom.css.map */