/********** Primary Colours ***********/
/********** Secondary Colours ***********/
/********** Shades Colours ***********/
/********** Support Colours ***********/
/********** Colours Palette ***********/
.secondary {
  color: #3E4D9C;
}
.shades-50 {
  color: #808080;
}
.red-support-R500 {
  color: #ED3A02;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
li,
table,
th,
td,
label,
input,
.button,
span {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}
h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}
h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}
h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}
h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}
.subtitle1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}
.subtitle2 {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.body1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
}
.body2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.button1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}
.button2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}
.caption1 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.caption2 {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.custom1 {
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.25px;
}
.overline {
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}
.pdf-subtitle-bold {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
}
.pdf-subtitle-medium {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
}
.pdf-subtitle-semi-bold {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
}
.pdf-subtitle-base {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
}
.pdf-content-semi-bold {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
}
.pdf-content-medium {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 9px;
  font-weight: 400;
  line-height: 10px;
}
.pdf-content-base {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 9px;
  font-weight: 400;
  line-height: 11px;
}
.pdf-subtotal-base {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
}
.pdf-subtotal-bold {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  background-color: #FFFFFF;
  margin: auto;
  box-sizing: border-box;
  font-size: 0;
}
html *,
body *,
html *:before,
body *:before,
html *:after,
body *:after {
  box-sizing: inherit;
}
.globalGrey {
  color: #808080;
}
.btn {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
}
.btn-sm {
  padding: 8px;
}
.btn-secondary-light {
  background: #F0F1F7;
  color: #3E4D9C;
}
.btn-secondary-light:hover {
  background: #F0F1F7;
  color: #3E4D9C;
}
.btn-light-green {
  background: #8BC34A;
}
.btn-shades-05 {
  background: #F5F3F1;
}
.btn-light-orange-2 {
  background: #FEE8CF;
}
.btn-light-orange-3 {
  background: #FCE7E0;
  color: #ED3A02;
}
.btn-squared {
  align-items: center;
  display: inline-flex;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  height: 40px;
  width: 40px;
}
.btn-squared.btn-sm {
  height: 30px;
  width: 30px;
}
.enrolment-badge {
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 4px;
  white-space: nowrap;
}
.enrolment-badge.free_trial {
  background-color: #EBEBEB;
}
.enrolment-badge.trial {
  background-color: #F2EAF6;
  color: #9C27B0;
}
.enrolment-badge.replacement {
  background-color: #ED3A021F;
  color: #ED3A02;
}
#ui-datepicker-div {
  border: 0;
  border-radius: 4px;
  box-shadow: 0px 0px 16px 0px #00000029;
  padding: 16px;
}
#ui-datepicker-div th span {
  color: #B2B2B2;
}
#ui-datepicker-div .ui-widget-header {
  background: transparent;
  border: 0;
}
#ui-datepicker-div .ui-state-default {
  background: transparent;
  border: 0;
  color: #000000;
  text-align: center;
}
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {
  top: 2px;
}
#ui-datepicker-div .ui-datepicker-prev-hover {
  left: 2px;
}
#ui-datepicker-div .ui-state-active {
  background: #F09002;
  border-radius: 40px;
  color: #FFFFFF;
}
#ui-datepicker-div .ui-datepicker-next-hover {
  right: 2px;
}
#ui-datepicker-div .ui-state-disabled .ui-state-default {
  color: #B2B2B2;
}
#ui-datepicker-div .ui-datepicker-next.ui-state-hover,
#ui-datepicker-div .ui-datepicker-prev.ui-state-hover {
  background: transparent;
  border: 0;
}
#ui-datepicker-div .ui-icon {
  pointer-events: none;
}
#ui-datepicker-div .ui-icon-circle-triangle-w {
  background: url('/assets/icons/black_chevron_left.svg') no-repeat center;
}
#ui-datepicker-div .ui-icon-circle-triangle-e {
  background: url('/assets/icons/black_chevron_right.svg') no-repeat center;
}
.btn-primary {
  background-color: #F09002;
  color: #FFFFFF;
}
.btn-primary:not(.disabled):active {
  background-color: #F09002;
  color: #FFFFFF;
}
.btn-primary.btn-ghost {
  background-color: #FFFFFF;
  color: #F09002;
  border: 1px solid #F09002;
}
.btn-primary.btn-ghost:not(.disabled):active {
  background-color: #FFFFFF;
  color: #F09002;
}
.btn-secondary {
  background-color: #3E4D9C;
  color: #FFFFFF;
}
.btn-secondary:not(.disabled):active {
  background-color: #3E4D9C;
  color: #FFFFFF;
}
.btn-secondary.btn-ghost {
  background-color: #FFFFFF;
  color: #3E4D9C;
  border: 1px solid #3E4D9C;
}
.btn-secondary.btn-ghost:not(.disabled):active {
  background-color: #FFFFFF;
  color: #3E4D9C;
}
.btn-tertiary {
  background-color: #EBEBEB;
  color: #4D4D4D;
}
.btn-tertiary:not(.disabled):active {
  background-color: #EBEBEB;
  color: #4D4D4D;
}
form label {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  display: block;
  color: #000000;
  padding-bottom: 8px;
}
form .half {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
form .half:first-child {
  padding-right: 8px;
}
form .half:last-child {
  padding-left: 8px;
}
form input {
  font-size: 14px;
  font-weight: 400;
  display: block;
  color: #000000;
  padding: 10.5px 12px;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  line-height: 19px;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}
form input::-moz-placeholder {
  color: #B2B2B2;
}
form input::placeholder {
  color: #B2B2B2;
}
form input:focus {
  outline: 1px solid #3E4D9C;
  border: 1px solid transparent;
}
form input:disabled {
  background-color: #F5F3F1;
}
form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form input[type="number"] {
  -moz-appearance: textfield;
}
form button {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  display: block;
  padding: 10.5px 12px;
  text-align: center;
  color: #FFFFFF;
  width: 100%;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #3E4D9C;
}
form button:hover {
  background-color: #263584;
  transition: all 0.25s;
}
form button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
form button:focus {
  outline: none;
}
form .spin {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin: 6px;
  border: 2px solid #F09002;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
  border-color: #F09002 #F09002 #F09002 transparent;
}
form textarea {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  padding: 10.5px 12px;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  margin-bottom: 16px;
  width: 100%;
  min-height: 77px;
  resize: none;
}
form textarea::-moz-placeholder {
  color: #B2B2B2;
}
form textarea::placeholder {
  color: #B2B2B2;
}
form textarea:focus {
  outline: 1px solid #3E4D9C;
  border: 1px solid transparent;
}
form .radioBtn {
  display: inline-block;
  vertical-align: middle;
  padding-right: 16px;
}
form .radioBtn input[type="radio"] {
  display: none;
}
form .radioBtn input[type="radio"] + label {
  position: relative;
  padding-left: 38px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  line-height: 24px !important;
}
form .radioBtn label {
  padding-bottom: 0 !important;
}
form .radioBtn input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 2px solid #c2c9d1;
  background: rgba(194, 201, 209, 0.1);
}
form .radioBtn input[type="radio"]:checked + label::before {
  border: 2px solid #4da938;
}
form .radioBtn input[type="radio"] + label:hover:before {
  background: rgba(194, 201, 209, 0.3);
}
form .radioBtn input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease;
}
form .radioBtn input[type="radio"]:not(:checked) + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(0);
  opacity: 0;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.headerWrapper {
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
  position: fixed;
  z-index: 1072;
}
.headerWrapper .headerContainer {
  display: flex;
  padding: 8px 32px;
  width: auto;
}
.headerWrapper .headerContainer .logo {
  flex-grow: 1;
  align-self: center;
}
.headerWrapper .headerContainer .logo a img {
  height: 36px;
}
.headerWrapper .headerContainer .setting {
  align-self: center;
}
.headerWrapper .headerContainer .setting > * {
  display: inline-block;
  vertical-align: middle;
}
.headerWrapper .headerContainer .setting .initialName h3 {
  border-radius: 50%;
  background-color: #FEF6EB;
  color: #F09002;
  padding: 12px 14px;
}
.headerWrapper .headerContainer .setting .dropDownSetting .settingBtn {
  background-color: transparent;
  padding: 0;
}
.headerWrapper .headerContainer .setting .dropDownSetting .settingBtn .userInfo {
  align-self: center;
  text-align: left;
  padding-left: 16px;
  padding-right: 20px;
}
.headerWrapper .headerContainer .setting .dropDownSetting .settingBtn .userInfo h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
}
.headerWrapper .headerContainer .setting .dropDownSetting .settingBtn .userInfo h5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu li {
  padding: 10px 8px;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu li > * {
  display: inline-block;
  vertical-align: middle;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu li img {
  height: 24px;
  margin-right: 12px;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu li p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  padding-right: 60px;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu li:hover {
  cursor: pointer;
}
.headerWrapper .headerContainer .setting .dropDownSetting .dropdown-menu.show {
  margin-top: 17px;
}
.radio-dropdown ul {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  width: 250px;
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  box-shadow: 0px 2.7672565px 2.2138052px 0px rgba(0, 0, 0, 0.07), 0px 6.65010214px 5.32008171px 0px rgba(141, 145, 160, 0.05), 0px 12.52155209px 10.01724148px 0px rgba(141, 145, 160, 0.04), 0px 22.33630943px 17.86904716px 0px rgba(141, 145, 160, 0.04), 0px 41.77761078px 33.42208862px 0px rgba(141, 145, 160, 0.03), 0px 100px 80px 0px rgba(141, 145, 160, 0.02);
}
.radio-dropdown ul li {
  display: flex;
  padding: 4px 0;
}
.radio-dropdown ul li label {
  cursor: pointer;
  width: 100%;
}
.radio-dropdown ul li p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.radio-dropdown ul li input[type="radio"] {
  accent-color: #3E9C5E;
}
.radio-dropdown ul li:hover {
  cursor: pointer;
}
.sidebarWrapper {
  z-index: 1;
  width: 100%;
  max-width: 265px;
  padding: 92px 4px 16px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #EE7A00;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0px 100px 80px rgba(141, 145, 160, 0.0196802), 0px 41.7776px 33.4221px rgba(141, 145, 160, 0.0282725), 0px 22.3363px 17.869px rgba(141, 145, 160, 0.035), 0px 12.5216px 10.0172px rgba(141, 145, 160, 0.0417275), 0px 6.6501px 5.32008px rgba(141, 145, 160, 0.0503198), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
}
.sidebarWrapper .sideMenuList {
  flex-grow: 1;
  list-style: none;
  padding-left: 0;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn {
  width: 100%;
  background-color: transparent;
  border-radius: 4px;
  border: none;
  padding: 8px;
  text-align: left;
  display: flex;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn:focus {
  outline: none;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn:hover {
  cursor: pointer;
  background-color: #F5F3F1;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn:hover .sideMenuBtnWrapper img {
  filter: unset;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn:hover .sideMenuBtnWrapper p {
  color: #4D4D4D;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .sideMenuBtnWrapper {
  flex-grow: 1;
  align-self: center;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .sideMenuBtnWrapper > * {
  display: inline-block;
  vertical-align: middle;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .sideMenuBtnWrapper img {
  height: 24px;
  filter: brightness(0) invert(1);
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .sideMenuBtnWrapper p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #FFFFFF;
  margin: 0 0 0 12px;
  line-height: 24px;
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .downArrow {
  height: 24px;
  align-self: center;
  filter: brightness(0) invert(1);
}
.sidebarWrapper .sideMenuList li .sideMenuBtn .downArrow.flip {
  transform: rotate(-180deg);
}
.sidebarWrapper .sideMenuList li.active {
  background-color: #F0F1F7;
  border-radius: 4px;
}
.sidebarWrapper .sideMenuList li.active .sideMenuBtnWrapper p {
  color: #3E4D9C;
}
.sidebarWrapper .sideMenuList li.active .sideMenuBtnWrapper img {
  filter: invert(33%) sepia(25%) saturate(1436%) hue-rotate(193deg) brightness(65%) contrast(95%);
}
.sidebarWrapper .sideMenuList li .sideSubMenu {
  list-style: none;
  padding-left: 0;
  display: none;
}
.sidebarWrapper .sideMenuList li .sideSubMenu.active {
  display: block;
}
.sidebarWrapper .sideMenuList li .sideSubMenu li {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #FFFFFF;
  padding: 12px 4px 12px 44px;
}
.sidebarWrapper .sideMenuList li .sideSubMenu li:hover {
  cursor: pointer;
  background-color: #F5F3F1;
  border-radius: 4px;
  color: #4D4D4D;
}
.sidebarWrapper .sideMenuList li .sideSubMenu li.active {
  color: #3E4D9C;
  background-color: #F0F1F7;
  border-radius: 4px;
}
.sidebarWrapper .sidebarFooter {
  text-align: right;
  padding: 0 12px;
}
.sidebarWrapper .sidebarFooter:hover {
  cursor: pointer;
}
.sidebarWrapper .sidebarFooter .sidebarOpen {
  background-color: #FEF6EB;
  padding: 8px;
  border-radius: 4px;
  display: inline-block;
}
.sidebarWrapper .sidebarFooter .sidebarOpen img {
  height: 24px;
}
.sidebarWrapper .sidebarFooter .sidebarOpen img.flip {
  transform: rotate(-180deg);
}
.sidebarWrapper.closeSideMenu {
  width: 56px;
}
.sidebarWrapper.closeSideMenu .menuText,
.sidebarWrapper.closeSideMenu .downArrow {
  opacity: 0;
  position: absolute;
}
.sidebarWrapper.closeSideMenu .sideMenuBtnWrapper {
  text-align: center;
}
.sidebarWrapper.closeSideMenu .sideSubMenu.active {
  display: none !important;
}
.sidebarWrapper.closeSideMenu .sideMenuWrapper.activeSubMenu {
  background-color: #FEF6EB;
  border-radius: 4px;
}
.sidebarWrapper.closeSideMenu .sideMenuWrapper.activeSubMenu .sideMenuBtn img {
  filter: invert(45%) sepia(98%) saturate(1730%) hue-rotate(8deg) brightness(100%) contrast(101%);
}
.sidebarWrapper.closeSideMenu .sidebarFooter {
  text-align: center;
  padding: 0;
}
.dropdown {
  display: inline-block;
}
.dropdown .dropdown-toggle {
  background-color: #F5F3F1;
  border-radius: 4px;
  border: none;
  padding: 8px 12px;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  display: flex;
}
.dropdown .dropdown-toggle span {
  flex-grow: 1;
  align-self: center;
  text-align: left;
  white-space: nowrap;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.dropdown .dropdown-toggle img {
  align-self: center;
  height: 20px;
  padding-left: 12px;
}
.dropdown .dropdown-toggle::after {
  display: none;
}
.dropdown .dropdown-toggle:focus {
  outline: none;
}
.dropdown .dropdown-menu {
  padding: 8px 0;
  box-shadow: 0px 100px 80px rgba(141, 145, 160, 0.0196802), 0px 41.7776px 33.4221px rgba(141, 145, 160, 0.0282725), 0px 22.3363px 17.869px rgba(141, 145, 160, 0.035), 0px 12.5216px 10.0172px rgba(141, 145, 160, 0.0417275), 0px 6.6501px 5.32008px rgba(141, 145, 160, 0.0503198), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  background-color: #FFFFFF;
  border: none;
  width: -moz-max-content;
  width: max-content;
}
.dropdown .dropdown-menu .dropdown-content-wrapper {
  max-height: 300px;
  overflow-y: auto;
}
.dropdown .dropdown-menu li {
  padding: 4px 16px;
}
.dropdown .dropdown-menu li:hover {
  cursor: pointer;
  background-color: #F5F3F1;
}
.dropdown .dropdown-menu .dropdown-header {
  border-bottom: 1px solid #EBEBEB;
  padding: 4px 16px;
  text-align: left;
}
.dropdown .dropdown-menu .dropdown-header > * {
  display: inline-block;
  vertical-align: middle;
}
.dropdown .dropdown-menu .dropdown-header img {
  height: 20px;
  margin-right: 12px;
}
.dropdown .dropdown-menu .dropdown-header span {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
}
.dropdown .dropdown-menu .dropdown-footer {
  margin-top: 8px;
  border-top: 1px solid #EBEBEB;
  padding: 8px 0;
  text-align: center;
}
.dropdown .dropdown-menu .dropdown-footer p {
  color: #ED3A02;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.dropdown .dropdown-menu .dropdown-footer p:hover {
  cursor: pointer;
}
.dropdown.show .dropdown-toggle {
  background-color: #EBEBEB;
  border-radius: 4px;
  border: none;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.dropdown.show .dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}
.dropdown.dropDownTime .dropdown-menu {
  padding: 8px;
}
.checkboxWrapper {
  display: block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.checkboxWrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkboxWrapper input[type="checkbox"]:checked ~ .checkmark {
  background-color: #3E9C5E;
  border: none;
}
.checkboxWrapper input[type="checkbox"]:checked ~ .checkmark:after {
  display: block;
}
.checkboxWrapper .checkmark:after {
  left: 5.5px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid #FFFFFF;
  border-width: 0px 2px 2px 0;
  transform: rotate(45deg);
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 9%;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #808080;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.intake {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.intake.black {
  color: #000000;
}
.intake.orange {
  color: #EE7A00;
}
.intake.blue {
  color: #3E4D9C;
}
.colorBox {
  height: 12px;
  width: 12px;
  border-radius: 4px;
}
.searchFilter {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  background-color: #FFFFFF;
  padding: 6.5px;
  display: flex;
  min-width: 250px;
}
.searchFilter input {
  border: none;
  padding: 0;
  flex-grow: 1;
  align-self: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.searchFilter input::-moz-placeholder {
  color: #808080;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.searchFilter input::placeholder {
  color: #808080;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.searchFilter input:focus {
  outline: none;
}
.searchFilter input::-webkit-search-decoration,
.searchFilter input::-webkit-search-cancel-button,
.searchFilter input::-webkit-search-results-button,
.searchFilter input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.searchFilter img {
  height: 24px;
  cursor: pointer;
  align-self: center;
}
.searchFilter .close {
  display: none;
}
nav {
  display: inline-block;
}
nav .breadcrumb {
  border: none;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  background-color: transparent;
}
nav .breadcrumb > li + li:before {
  font-family: "FontAwesome" !important;
  content: "\f054" !important;
  font-weight: 400;
  font-size: 8px;
  padding-right: 15px !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 17px;
}
nav .breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 15px !important;
}
nav .breadcrumb .breadcrumb-item {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  line-height: 20px;
}
nav .breadcrumb .breadcrumb-item a {
  color: #808080;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  line-height: 20px;
}
.modal {
  padding: 0 !important;
  font-size: 0;
  text-align: center;
}
.modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.modal.left.show,
.modal.right.show {
  margin-top: 64px;
  height: 100%;
  z-index: 100;
  transform: translate3d(0%, 0, 0);
}
.modal.left.show .modal-content,
.modal.right.show .modal-content {
  height: 100%;
  overflow-y: auto;
  border-radius: 0;
  border: none;
  border-left: 1px solid #EBEBEB;
}
.modal.left.show .modal-content .modal-header,
.modal.right.show .modal-content .modal-header {
  border-bottom: 0;
  padding: 24px;
}
.modal.left.show .modal-content .modal-header .closeBtn,
.modal.right.show .modal-content .modal-header .closeBtn {
  height: 32px;
}
.modal.left.show .modal-content .modal-header .closeBtn:hover,
.modal.right.show .modal-content .modal-header .closeBtn:hover {
  cursor: pointer;
}
.modal.left.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn,
.modal.right.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn {
  padding: 10px 16px;
  background-color: #F0F1F7;
  border-radius: 8px;
  display: inline-block;
}
.modal.left.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn:hover,
.modal.right.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn:hover {
  cursor: pointer;
}
.modal.left.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn > *,
.modal.right.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn > * {
  display: inline-block;
  vertical-align: middle;
}
.modal.left.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn p,
.modal.right.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn p {
  color: #3E4D9C;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}
.modal.left.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn img,
.modal.right.show .modal-content .modal-header .viewLessonBtnWrapper .viewLessonBtn img {
  height: 24px;
  margin-left: 8px;
}
.modal.left.show .modal-content .modal-body,
.modal.right.show .modal-content .modal-body {
  padding: 0 24px 24px;
}
.modal.left.show .modal-dialog,
.modal.right.show .modal-dialog {
  max-width: none;
  position: fixed;
  width: 50%;
  height: 100%;
}
.modal.left.show .modal-dialog {
  left: 0;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.show.in .modal-dialog {
  left: 0;
}
.modal.left .modal-backdrop {
  background-color: white;
}
.modal.right.show .modal-dialog {
  right: 0;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.show.in .modal-dialog {
  right: 0;
}
.modal.modal-full {
  z-index: 100;
}
.modal.modal-full .modal-dialog {
  margin: 0;
  width: 1400px !important;
  max-width: calc(100% - 30px);
  width: 100%;
}
.modal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.modal .modal-dialog .modal-content {
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: overlay;
}
.modal .modal-dialog .modal-content .modal-header {
  padding: 16px;
  border-bottom: 1px solid #EBEBEB;
}
.modal .modal-dialog .modal-content .modal-body {
  padding: 16px;
}
.modal .modal-dialog .modal-content .modal-body .contentWrapper {
  display: flex;
}
.modal .modal-dialog .modal-content .modal-body .contentWrapper img {
  height: 20px;
  align-self: flex-start;
}
.modal .modal-dialog .modal-content .modal-body .contentWrapper p {
  align-self: flex-start;
  flex-grow: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding-left: 8px;
}
.modal .modal-dialog .modal-content .modal-body .contentWrapper p span {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .contentWrapper p span.role {
  text-transform: lowercase;
  font-weight: 400;
}
.modal .modal-dialog .modal-content .modal-body .accountCreateWrapper img {
  height: 120px;
}
.modal .modal-dialog .modal-content .modal-body .accountCreateWrapper h4 {
  padding: 24px 0;
}
.modal .modal-dialog .modal-content .modal-body .accountCreateWrapper p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .accountCreateWrapper p span {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper {
  padding-bottom: 24px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper {
  padding-bottom: 8px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .labelContainer {
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .labelContainer.green {
  background-color: #4CAF50;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .labelContainer.grey {
  background-color: #607D8B;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .labelContainer.orange {
  background-color: #FF9800;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .labelContainer p {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer {
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
  vertical-align: middle;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer.green {
  background-color: #8BC34A;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer.yellow {
  background-color: #FFC107;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer.blue {
  background-color: #2196F3;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer p {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer p.white {
  color: #FFFFFF;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .lessonLabelContainer p.black {
  color: #000000;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .labelWrapper .desc {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #808080;
  padding-left: 8px;
  display: inline-block;
  vertical-align: middle;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .title {
  padding: 0px 0 16px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .infoContainer > div {
  padding-right: 32px;
  display: inline-block;
  vertical-align: middle;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .infoContainer > div > * {
  display: inline-block;
  vertical-align: middle;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .infoContainer > div img {
  height: 24px;
  margin-right: 16px;
}
.modal .modal-dialog .modal-content .modal-body .infoWrapper .infoContainer > div p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #4D4D4D;
}
.modal .modal-dialog .modal-content .modal-body .remarkWrapper .lineBreak {
  border: 1px solid #EBEBEB;
  width: 100vw;
  border-bottom: 0;
  border-left: 0;
  margin-bottom: 0px;
  margin-left: -24px;
}
.modal .modal-dialog .modal-content .modal-body .remarkWrapper h1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  padding: 24px 0 16px;
}
.modal .modal-dialog .modal-content .modal-body .remarkWrapper .remarkInput input {
  border-radius: 8px;
  border: 1px solid #3E4D9C;
  background-color: #FFFFFF;
  padding: 10px 12px;
  width: 100%;
  min-height: 40px;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .remarkWrapper .remarkInput input.viewOnly {
  pointer-events: none;
  background-color: #F5F3F1;
  border: 1px solid #EBEBEB;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper {
  padding-top: 16px;
  text-align: right;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper button {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  margin: 0;
  background-color: #3E4D9C;
  color: #FFFFFF;
  line-height: 19px;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper button:disabled {
  opacity: 0.5;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper button:first-child {
  margin-right: 8px;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper button:focus {
  outline: none;
}
.modal .modal-dialog .modal-content .modal-body .buttonWrapper button.greyBtn {
  background-color: #EBEBEB;
  color: #4D4D4D;
}
.modal .modal-dialog .modal-content .modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #EBEBEB;
}
.modal .modal-dialog .modal-content .modal-footer button {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  border: none;
  margin: 0;
}
.modal .modal-dialog .modal-content .modal-footer button:disabled {
  opacity: 0.5;
}
.modal .modal-dialog .modal-content .modal-footer button:first-child {
  margin-right: 8px;
}
.modal .modal-dialog .modal-content .modal-footer button:focus {
  outline: none;
}
.modal .modal-dialog .modal-content .modal-footer button.greyBtn {
  background-color: #EBEBEB;
  color: #4D4D4D;
}
.modal .modal-dialog .modal-content .modal-footer button.redBtn {
  background-color: #ED3A02;
  color: #FFFFFF;
}
.modal .modal-dialog .modal-content .modal-footer button.blueBtn {
  background-color: #3E4D9C;
  color: #FFFFFF;
}
.modal .modal-dialog .modal-content .modal-footer button.greenBtn {
  background-color: #3E9C5E;
  color: #FFFFFF;
}
.modeContainer {
  height: 100%;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modeContainer.online {
  background-color: #8BC34A;
}
.modeContainer.online p {
  color: #FFFFFF;
}
.modeContainer.physical {
  background-color: #FFC107;
}
.modeContainer .center {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.modeContainer .room {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.modeContainer p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body {
  text-align: center;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper {
  padding: 0 8px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper img,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper img {
  height: 120px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper h4,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper h4 {
  padding: 24px 0;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper p,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper p span,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-body .accountCreateWrapper p span {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-footer,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-footer {
  border-top: 0;
  padding: 8px 16px 24px;
}
#accountCreatedModal .modal-dialog .modal-content .modal-footer button,
#applicationFormCreatedModal .modal-dialog .modal-content .modal-footer button {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  border: none;
  margin: 0;
  width: 100%;
  background-color: #3E4D9C;
  color: #FFFFFF;
}
#replaceTeacherModal .modal-dialog,
#selectTeacherModal .modal-dialog {
  min-width: 800px;
}
#replaceTeacherModal .modal-body,
#selectTeacherModal .modal-body {
  padding: 0;
}
#replaceTeacherModal .seachTeacherWrapper,
#selectTeacherModal .seachTeacherWrapper {
  display: flex;
  padding: 16px;
}
#replaceTeacherModal .seachTeacherWrapper .searchFilter,
#selectTeacherModal .seachTeacherWrapper .searchFilter {
  flex-grow: 1;
  align-self: center;
}
#replaceTeacherModal .seachTeacherWrapper .searchFilter .search,
#selectTeacherModal .seachTeacherWrapper .searchFilter .search {
  margin-right: 8px;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn {
  background-color: #009688;
  border-radius: 8px;
  border: none;
  padding: 5px 16px;
  margin-left: 16px;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement:focus,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement:focus,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn:focus,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn:focus {
  outline: none;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement > *,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement > *,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn > *,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn > * {
  display: inline-block;
  vertical-align: middle;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement img,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement img,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn img,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn img {
  height: 24px;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement p,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement p,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn p,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn p {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  color: #FFFFFF;
  padding-left: 4px;
}
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherReplacement:disabled,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherReplacement:disabled,
#replaceTeacherModal .seachTeacherWrapper .suggestTeacherBtn:disabled,
#selectTeacherModal .seachTeacherWrapper .suggestTeacherBtn:disabled {
  opacity: 0.5;
}
#replaceTeacherModal .teacherListWrapper,
#selectTeacherModal .teacherListWrapper {
  max-height: 415px;
  overflow-y: auto;
}
#replaceTeacherModal .teacherListWrapper .teacherList,
#selectTeacherModal .teacherListWrapper .teacherList {
  margin: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
}
#replaceTeacherModal .teacherListWrapper .teacherList:hover,
#selectTeacherModal .teacherListWrapper .teacherList:hover {
  cursor: pointer;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherGrade,
#selectTeacherModal .teacherListWrapper .teacherList .teacherGrade {
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  margin-right: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 38px;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherGrade.red,
#selectTeacherModal .teacherListWrapper .teacherList .teacherGrade.red {
  background-color: #FFF2ED;
  color: #FF5722;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherGrade.yellow,
#selectTeacherModal .teacherListWrapper .teacherList .teacherGrade.yellow {
  background-color: #FFFAEB;
  color: #FFC107;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherGrade.green,
#selectTeacherModal .teacherListWrapper .teacherList .teacherGrade.green {
  background-color: #F1F9F1;
  color: #4CAF50;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherGrade.na,
#selectTeacherModal .teacherListWrapper .teacherList .teacherGrade.na {
  background-color: #EBEBEB;
  color: #808080;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherInfo,
#selectTeacherModal .teacherListWrapper .teacherList .teacherInfo {
  flex-grow: 1;
  align-self: center;
  padding-right: 16px;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherInfo h6,
#selectTeacherModal .teacherListWrapper .teacherList .teacherInfo h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#replaceTeacherModal .teacherListWrapper .teacherList .teacherInfo p,
#selectTeacherModal .teacherListWrapper .teacherList .teacherInfo p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn {
  display: inline-block;
  vertical-align: middle;
  align-self: center;
  height: 20px;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"],
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] {
  display: none;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  line-height: 20px !important;
  height: 20px;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn label,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn label {
  padding-bottom: 0 !important;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label::before,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 2px solid #c2c9d1;
  background: rgba(194, 201, 209, 0.1);
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:checked + label::before,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:checked + label::before {
  border: 2px solid #4da938;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label:hover:before,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"] + label:hover:before {
  background: rgba(194, 201, 209, 0.3);
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:checked + label::after,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease;
}
#replaceTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:not(:checked) + label::after,
#selectTeacherModal .teacherListWrapper .teacherList .radioBtn input[type="radio"]:not(:checked) + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(0);
  opacity: 0;
}
#selectStudentModal .modal-dialog {
  min-width: 800px;
}
#selectStudentModal .modal-body {
  padding: 0;
}
#selectStudentModal .selectStudentWrapper {
  display: flex;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper {
  flex-grow: 1;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper {
  display: flex;
  padding: 16px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .searchFilter {
  flex-grow: 1;
  align-self: center;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .searchFilter .search {
  margin-right: 8px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .combineFilterBtn {
  background-color: #FFFFFF;
  border-radius: 4px;
  border: none;
  padding: 8px;
  margin-left: 8px;
  border: 1px solid #EBEBEB;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .combineFilterBtn img {
  height: 24px;
  padding: 0;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter.show .combineFilterBtn {
  background-color: #F5F3F1;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu {
  min-width: 250px;
  max-width: 250px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu li {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .mainMenuList li {
  display: flex;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .mainMenuList li p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  flex-grow: 1;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .mainMenuList li .total {
  display: none;
  align-self: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .subMenu {
  display: none;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .subMenu .dropdown-header:hover {
  cursor: pointer;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .subMenu .dropdown-footer {
  margin-top: 0;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .subMenu li {
  padding: 8px 16px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .seachStudentWrapper .dropDownCombineFilter .dropdown-menu .subMenu .dropdown-list {
  max-height: 196px;
  overflow-y: auto;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper {
  max-height: 415px;
  min-height: 450px;
  overflow-y: auto;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail {
  display: flex;
  padding: 12px 16px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .studentInfo {
  flex-grow: 1;
  align-self: center;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .studentInfo h1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .studentInfo p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .checkboxWrapper {
  align-self: center;
  height: 16px;
  padding-left: 16px;
  pointer-events: none;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .checkboxWrapper:hover {
  cursor: pointer;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn {
  display: inline-block;
  vertical-align: middle;
  align-self: center;
  height: 20px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"] {
  display: none;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"] + label {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  line-height: 20px !important;
  height: 20px;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn label {
  padding-bottom: 0 !important;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 2px solid #c2c9d1;
  background: rgba(194, 201, 209, 0.1);
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"]:checked + label::before {
  border: 2px solid #4da938;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"] + label:hover:before {
  background: rgba(194, 201, 209, 0.3);
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease;
}
#selectStudentModal .selectStudentWrapper .studentListWrapper .studentDetailsListWrapper .studentDetail .radioBtn input[type="radio"]:not(:checked) + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #4da938;
  transform: scale(0);
  opacity: 0;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper {
  min-width: 260px;
  background-color: #F0F1F7;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .title {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  padding: 16px;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .selectedStudentListWrapper .selectedStudent {
  padding: 4px 16px;
  display: flex;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .selectedStudentListWrapper .selectedStudent .studentInfo {
  flex-grow: 1;
  align-self: center;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .selectedStudentListWrapper .selectedStudent .studentInfo h1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .selectedStudentListWrapper .selectedStudent .studentInfo p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
}
#selectStudentModal .selectStudentWrapper .selectedWrapper .selectedStudentListWrapper .selectedStudent .deleteStudent {
  align-self: center;
  height: 20px;
}
#endLessonModal .contentWrapper,
#removeStudentModal .contentWrapper {
  max-width: 305px;
}
#endLessonModal .contentWrapper .studentName,
#removeStudentModal .contentWrapper .studentName {
  font-weight: 600;
}
#specificLessonModal {
  height: calc(100vh - 67px);
  top: 67px;
}
#specificLessonModal .modal-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #EBEBEB;
}
#specificLessonModal .modal-header .left-header {
  align-items: center;
  display: flex;
  gap: 24px;
}
#specificLessonModal .modal-header .left-header .class-ended-badge {
  background: #ED3A02;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
}
#specificLessonModal .modal-header .left-header .bridging-badge {
  background: #3E4D9C;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
}
#specificLessonModal .modal-header .left-header .header-info .year-intake {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#specificLessonModal .modal-header .left-header .header-info .subject {
  align-items: center;
  display: flex;
  gap: 8px;
}
#specificLessonModal .modal-header .left-header .lesson-extra-info {
  align-items: center;
  display: flex;
  gap: 24px;
}
#specificLessonModal .modal-header .left-header .lesson-extra-info > div {
  padding-left: 24px;
  position: relative;
}
#specificLessonModal .modal-header .left-header .lesson-extra-info > div p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#specificLessonModal .modal-header .left-header .lesson-extra-info > div .header-info-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
#specificLessonModal .modal-header .left-header .lesson-extra-info > div::before {
  background-color: #EBEBEB;
  bottom: 7px;
  content: '';
  display: inline-block;
  height: 80%;
  left: 0;
  position: absolute;
  top: 7px;
  width: 1px;
}
#specificLessonModal .modal-header .right-header {
  align-items: center;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#specificLessonModal .modal-header .right-header button {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  border-radius: 8px;
  width: 100px;
  padding: 10px 16px;
}
#specificLessonModal .modal-header .right-header button:focus {
  outline: none;
}
#specificLessonModal .modal-header .right-header .view-in-calendar-btn,
#specificLessonModal .modal-header .right-header .end-class-btn {
  border: 1px solid #3E4D9C;
  color: #3E4D9C;
  background: #FFFFFF;
  width: auto;
}
#specificLessonModal .modal-header .right-header .upg-btn {
  border: 1px solid #3E4D9C;
  color: #3E4D9C;
  background: #FFFFFF;
}
#specificLessonModal .modal-header .right-header .edit-btn,
#specificLessonModal .modal-header .right-header .save-btn {
  border: none;
  background: #3E4D9C;
  color: #FFFFFF;
}
#specificLessonModal .modal-header .right-header .cancel-btn {
  border: none;
}
#specificLessonModal .modal-header .right-header .save-btn,
#specificLessonModal .modal-header .right-header .cancel-btn {
  display: none;
}
#specificLessonModal .modal-body {
  display: flex;
  padding: 0;
}
#specificLessonModal .modal-body button:focus {
  outline: none;
}
#specificLessonModal .modal-body .info-banner {
  margin: 16px 0;
  border-radius: 8px;
  display: flex;
  padding: 8px;
  align-items: center;
  background-color: #FEF6EB;
}
#specificLessonModal .modal-body .info-banner img {
  height: 24px;
  width: 24px;
  margin-right: 10px;
}
#specificLessonModal .modal-body .info-banner p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #4D4D4D;
}
#specificLessonModal .modal-body .info-banner .editFullBtn {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  color: #F09002;
  cursor: pointer;
  padding-left: 16px;
}
#specificLessonModal .modal-body .specific-lesson-header {
  align-items: center;
  display: flex;
  padding: 16px;
}
#specificLessonModal .modal-body .specific-lesson-calender-header {
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  gap: 8px;
}
#specificLessonModal .modal-body .specific-lesson-calender-header button {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  background-color: transparent;
  padding: 10px 16px;
  color: #4D4D4D;
  border: none;
  border-radius: 8px;
}
#specificLessonModal .modal-body .specific-lesson-calender-header button:last-child {
  margin: 0;
}
#specificLessonModal .modal-body .specific-lesson-calender-header button.active {
  background-color: #F09002;
  color: #FFFFFF;
}
#specificLessonModal .modal-body .specific-lesson-calender {
  padding: 16px;
}
#specificLessonModal .modal-body .date-nav.disabled {
  opacity: 0.5;
  pointer-events: none;
}
#specificLessonModal .modal-body .specific-lesson-picker-btn {
  justify-content: center;
  min-width: 260px;
}
#specificLessonModal .modal-body .specific-lesson-details {
  border-right: 1px solid #EBEBEB;
  margin-top: 0;
  width: 300px;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header {
  justify-content: space-between;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header .actions {
  display: flex;
  gap: 12px;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header .actions > button {
  align-items: center;
  display: inline-flex;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  height: 40px;
  width: 40px;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header .actions > button.edit-btn {
  background: #F0F1F7;
  opacity: 0;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header .actions > button.save-btn {
  background: #3E9C5E29;
  display: none;
}
#specificLessonModal .modal-body .specific-lesson-details .specific-lesson-details-header .actions > button.cancel-btn {
  background: #F5F3F1;
  display: none;
}
#specificLessonModal .modal-body .specific-lesson-details.edit-mode,
#specificLessonModal .modal-body .specific-lesson-details:hover,
#specificLessonModal .modal-body .specific-lesson-details:focus-within {
  background: #FAFBFC;
}
#specificLessonModal .modal-body .specific-lesson-details.edit-mode .edit-btn,
#specificLessonModal .modal-body .specific-lesson-details:hover .edit-btn,
#specificLessonModal .modal-body .specific-lesson-details:focus-within .edit-btn {
  opacity: 100 !important;
}
#specificLessonModal .modal-body .specific-lesson-calender-wrapper {
  background: #F5F3F1;
  flex: 4;
  max-width: calc(100% - 300px);
}
#specificLessonModal .modal-body .students-tab {
  display: none;
}
#specificLessonModal .modal-body .students-tab.active {
  display: block;
}
#specificLessonModal .modal-body .specific-detail-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #EBEBEB;
  border-bottom: none;
  background-color: #FAFBFC;
  padding: 12px;
  display: flex;
  justify-content: center;
  position: relative;
}
#specificLessonModal .modal-body .specific-detail-header img {
  cursor: pointer;
}
#specificLessonModal .modal-body .specific-detail-header .addClassBtn {
  position: absolute;
  top: 6px;
  right: 12px;
}
#specificLessonModal .modal-body .specific-detail-header .date-picker {
  margin: 0px 48px;
  position: relative;
}
#specificLessonModal .modal-body .specific-detail-header .date-picker button {
  display: flex;
  align-items: center;
  border: none;
  background-color: transparent;
  color: #3E4D9C;
}
#specificLessonModal .modal-body .specific-detail-header .date-picker ul {
  max-height: 250px;
  /* you can change as you need it */
  overflow: auto;
  /* to get scroll */
  width: 100%;
}
#specificLessonModal .modal-body .specific-detail-header .date-picker ul li {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  cursor: pointer;
  padding: 8px 16px;
}
#specificLessonModal .modal-body .specific-detail-header .date-picker ul li:hover {
  background-color: #F0F1F7;
}
#specificLessonModal .modal-body .lesson-details-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 67px - 79px - 72px - 38px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .title {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  min-width: 180px;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details .color-text {
  padding: 4px 12px;
  border-radius: 50px;
  color: #000000;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details .color-text.online {
  background-color: #8BC34A;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details .color-text.physical {
  background-color: #FFC107;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details .colorBlock {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 2px;
  display: inline-block;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row .details {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#specificLessonModal .modal-body .lesson-details-container .detail-row-remarks {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding: 10px 8px;
  background-color: #F5F3F1;
  border-radius: 8px;
  border: 1px solid #EBEBEB;
  width: 100%;
}
#specificLessonModal .modal-body .lesson-details-container,
#specificLessonModal .modal-body .lesson-details-form-container,
#specificLessonModal .modal-body .edit-students-list-container {
  display: none;
}
#specificLessonModal .modal-body .lesson-details-container.show,
#specificLessonModal .modal-body .students-container.show,
#specificLessonModal .modal-body .lesson-details-form-container.show,
#specificLessonModal .modal-body .edit-students-list-container.show {
  display: flex;
  flex-direction: column;
}
#specificLessonModal .modal-body .specific-detail-body {
  margin-bottom: 12px;
  border: 1px solid #EBEBEB;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#specificLessonModal .modal-body .specific-detail-body .body-container {
  border-top: 1px solid #EBEBEB;
}
#specificLessonModal .modal-body .specific-detail-body .body-container:not(.show) {
  display: none;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info h5,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info h5 {
  flex: 1;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .header-label,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .header-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  cursor: pointer;
  color: #808080;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .add-student-btn,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .add-student-btn {
  border-radius: 8px;
  border: 1px solid #3E4D9C;
  background-color: #FFFFFF;
  padding: 10px 16px;
  margin-left: 16px;
  display: none;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .add-student-btn > *,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .add-student-btn > * {
  display: inline-block;
  vertical-align: middle;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .add-student-btn img,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .add-student-btn img {
  height: 24px;
  margin-right: 4px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .add-student-btn p,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .add-student-btn p {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  color: #3E4D9C;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .header-info .add-student-btn.show,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .header-info .add-student-btn.show {
  display: inline-block;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  min-height: 42px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-name,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul,
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  width: 250px;
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  box-shadow: 0px 2.7672565px 2.2138052px 0px rgba(0, 0, 0, 0.07), 0px 6.65010214px 5.32008171px 0px rgba(141, 145, 160, 0.05), 0px 12.52155209px 10.01724148px 0px rgba(141, 145, 160, 0.04), 0px 22.33630943px 17.86904716px 0px rgba(141, 145, 160, 0.04), 0px 41.77761078px 33.42208862px 0px rgba(141, 145, 160, 0.03), 0px 100px 80px 0px rgba(141, 145, 160, 0.02);
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul li,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul li,
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul li,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul li {
  display: flex;
  padding: 4px 0;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul li label,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul li label,
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul li label,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul li label {
  cursor: pointer;
  width: 100%;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul li p,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul li p,
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul li p,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul li p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul li input[type="radio"],
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul li input[type="radio"],
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul li input[type="radio"],
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul li input[type="radio"] {
  accent-color: #3E9C5E;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn ul li:hover,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn ul li:hover,
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .dropdown-wrapper ul li:hover,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .dropdown-wrapper ul li:hover {
  cursor: pointer;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn {
  padding: 10px 8px;
  border: none;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  border: 1px solid #EBEBEB;
  background-color: #FFFFFF;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn.disabled,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .student-attendance-dropdown-btn img,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .student-attendance-dropdown-btn img {
  height: 20px;
  width: 20px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .remove-student,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .remove-student {
  display: none;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .remove-student img,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .remove-student img {
  height: 20px;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .remove-student img:hover,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .remove-student img:hover {
  cursor: pointer;
}
#specificLessonModal .modal-body .specific-detail-body .students-container .student-details-row .remove-student.show,
#specificLessonModal .modal-body .specific-detail-body .edit-students-list-container .student-details-row .remove-student.show {
  display: inline-block;
}
#specificLessonModal.is-ended .modal-header {
  border-top: 6px solid;
  border-image-source: linear-gradient(to right, #FFB0B0, #FF0909);
  border-image-slice: 1;
  border-image-width: 6px 0 0 0;
  border-image-outset: 0;
}
#specificLessonModal.is-ended .modal-header,
#specificLessonModal.is-ended .students-tab {
  background: #FCE7E0;
}
#specificLessonModal.is-ended .edit-btn,
#specificLessonModal.is-ended .addClassBtn {
  display: none !important;
}
.dateWrapper {
  display: flex;
  color: #000000;
  padding: 10.5px 12px;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  width: 100%;
}
.dateWrapper.disabled {
  background: #eee;
  pointer-events: none;
}
.dateWrapper.disabled input {
  background: #eee;
  color: #B2B2B2;
}
.dateWrapper img {
  height: 20px;
  align-self: center;
}
.dateWrapper input {
  flex-grow: 1;
  align-self: center;
  border: none;
  font-size: 14px;
  padding: 0 8px 0 0;
  margin: 0;
  width: auto;
  line-height: 20px;
}
.dateWrapper input:focus {
  outline: none;
}
.dateWrapper input::-moz-placeholder {
  color: #B2B2B2;
}
.dateWrapper input::placeholder {
  color: #B2B2B2;
}
.dateWrapper:focus-within {
  outline: 1px solid #3E4D9C;
  border: 1px solid transparent;
}
.static-select {
  background: #F5F3F1;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  width: 100%;
}
#stopLessonModal .modal-body,
#upgradeToFullModal .modal-body,
#addStudentModal .modal-body,
#upgradeConflictModal .modal-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#stopLessonModal textarea,
#upgradeToFullModal textarea,
#addStudentModal textarea,
#upgradeConflictModal textarea {
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 328px;
}
#stopLessonModal textarea::-moz-placeholder, #upgradeToFullModal textarea::-moz-placeholder, #addStudentModal textarea::-moz-placeholder, #upgradeConflictModal textarea::-moz-placeholder {
  color: #B2B2B2;
}
#stopLessonModal textarea::placeholder,
#upgradeToFullModal textarea::placeholder,
#addStudentModal textarea::placeholder,
#upgradeConflictModal textarea::placeholder {
  color: #B2B2B2;
}
#stopLessonModal .modal-dialog,
#upgradeToFullModal .modal-dialog,
#addStudentModal .modal-dialog,
#upgradeConflictModal .modal-dialog {
  width: 550px;
}
#stopLessonModal .formWrapper,
#upgradeToFullModal .formWrapper,
#addStudentModal .formWrapper,
#upgradeConflictModal .formWrapper {
  padding-bottom: 16px;
}
#stopLessonModal .formWrapper label,
#upgradeToFullModal .formWrapper label,
#addStudentModal .formWrapper label,
#upgradeConflictModal .formWrapper label {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  display: block;
  color: #000000;
  padding-bottom: 8px;
}
#stopLessonModal .formWrapper label span,
#upgradeToFullModal .formWrapper label span,
#addStudentModal .formWrapper label span,
#upgradeConflictModal .formWrapper label span {
  color: #ED3A02;
}
#stopLessonModal .header,
#upgradeToFullModal .header,
#addStudentModal .header,
#upgradeConflictModal .header {
  background: #F0F1F7;
  display: flex;
  gap: 16px;
  margin: -16px;
  margin-bottom: 16px;
  padding: 16px;
}
#stopLessonModal .header .half,
#upgradeToFullModal .header .half,
#addStudentModal .header .half,
#upgradeConflictModal .header .half {
  flex: 1;
  text-overflow: ellipsis;
  max-width: 225px;
}
#stopLessonModal .header .select2-selection,
#upgradeToFullModal .header .select2-selection,
#addStudentModal .header .select2-selection,
#upgradeConflictModal .header .select2-selection {
  padding-right: 23px;
}
#stopLessonModal .modal-dialog {
  width: 360px;
}
#upgradeConflictModal .modal-dialog {
  width: 500px;
}
#upgradeConflictModal .warning-icon {
  text-align: center;
  margin-bottom: 16px;
}
#upgradeConflictModal .warning-icon img {
  width: 48px;
  height: 48px;
}
#upgradeConflictModal .warning-message {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
}
#upgradeConflictModal .conflicts-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  padding: 16px;
  background-color: #F5F3F1;
}
#upgradeConflictModal .conflicts-list .student-conflict {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EBEBEB;
}
#upgradeConflictModal .conflicts-list .student-conflict:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
#upgradeConflictModal .conflicts-list .student-conflict .student-name {
  font-weight: 600;
  color: #ED3A02;
  margin-bottom: 8px;
}
#upgradeConflictModal .conflicts-list .student-conflict .conflict-item {
  background-color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 14px;
}
#upgradeConflictModal .conflicts-list .student-conflict .conflict-item:last-child {
  margin-bottom: 0;
}
#upgradeConflictModal .conflicts-list .student-conflict .conflict-item .lesson-name {
  font-weight: 500;
  color: #4D4D4D;
}
#upgradeConflictModal .conflicts-list .student-conflict .conflict-item .conflict-details {
  color: #808080;
  font-size: 12px;
  margin-top: 2px;
}
#upgradeConflictModal .warning-note {
  background-color: #FCE7E0;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #ED3A02;
  margin-bottom: 0;
}
#newPublicHolidayModal .modal-header,
#generateInvoiceModal .modal-header,
#addPaymentModal .modal-header,
#addNewAnnouncementModal .modal-header,
#generatePayrollModal .modal-header {
  display: flex;
  justify-content: left;
  border-bottom: 1px solid #EBEBEB;
  align-items: center;
}
#newPublicHolidayModal .modal-header h4,
#generateInvoiceModal .modal-header h4,
#addPaymentModal .modal-header h4,
#addNewAnnouncementModal .modal-header h4,
#generatePayrollModal .modal-header h4 {
  padding-left: 24px;
}
#newPublicHolidayModal .modal-body,
#generateInvoiceModal .modal-body,
#addPaymentModal .modal-body,
#addNewAnnouncementModal .modal-body,
#generatePayrollModal .modal-body {
  padding: 0px 16px;
  border-radius: 8px;
  border: 1px solid #EBEBEB;
  padding: 12px 16px 80px;
  margin: 16px;
  display: flex;
  align-items: stretch;
}
#newPublicHolidayModal .modal-body button:focus,
#generateInvoiceModal .modal-body button:focus,
#addPaymentModal .modal-body button:focus,
#addNewAnnouncementModal .modal-body button:focus,
#generatePayrollModal .modal-body button:focus {
  outline: none;
}
#newPublicHolidayModal .modal-body form,
#generateInvoiceModal .modal-body form,
#addPaymentModal .modal-body form,
#addNewAnnouncementModal .modal-body form,
#generatePayrollModal .modal-body form {
  width: 100%;
}
#newPublicHolidayModal .modal-body form .formWrapper,
#generateInvoiceModal .modal-body form .formWrapper,
#addPaymentModal .modal-body form .formWrapper,
#addNewAnnouncementModal .modal-body form .formWrapper,
#generatePayrollModal .modal-body form .formWrapper {
  padding-bottom: 16px;
  position: relative;
}
#newPublicHolidayModal .modal-body form .formWrapper input,
#generateInvoiceModal .modal-body form .formWrapper input,
#addPaymentModal .modal-body form .formWrapper input,
#addNewAnnouncementModal .modal-body form .formWrapper input,
#generatePayrollModal .modal-body form .formWrapper input,
#newPublicHolidayModal .modal-body form .formWrapper textarea,
#generateInvoiceModal .modal-body form .formWrapper textarea,
#addPaymentModal .modal-body form .formWrapper textarea,
#addNewAnnouncementModal .modal-body form .formWrapper textarea,
#generatePayrollModal .modal-body form .formWrapper textarea {
  margin-bottom: 0;
}
#newPublicHolidayModal .modal-body form .formWrapper .radioBtn.disabled,
#generateInvoiceModal .modal-body form .formWrapper .radioBtn.disabled,
#addPaymentModal .modal-body form .formWrapper .radioBtn.disabled,
#addNewAnnouncementModal .modal-body form .formWrapper .radioBtn.disabled,
#generatePayrollModal .modal-body form .formWrapper .radioBtn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
#newPublicHolidayModal .modal-body form .formWrapper label,
#generateInvoiceModal .modal-body form .formWrapper label,
#addPaymentModal .modal-body form .formWrapper label,
#addNewAnnouncementModal .modal-body form .formWrapper label,
#generatePayrollModal .modal-body form .formWrapper label {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #000000;
  padding-bottom: 8px;
}
#newPublicHolidayModal .modal-body form .formWrapper label span,
#generateInvoiceModal .modal-body form .formWrapper label span,
#addPaymentModal .modal-body form .formWrapper label span,
#addNewAnnouncementModal .modal-body form .formWrapper label span,
#generatePayrollModal .modal-body form .formWrapper label span {
  color: #ED3A02;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper,
#addPaymentModal .modal-body form .formWrapper .dateWrapper,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper {
  display: flex;
  color: #000000;
  padding: 10.5px 12px;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  width: 100%;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper.disabled,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper.disabled,
#addPaymentModal .modal-body form .formWrapper .dateWrapper.disabled,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper.disabled,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper.disabled {
  pointer-events: none;
  background-color: #F5F3F1;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper img,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper img,
#addPaymentModal .modal-body form .formWrapper .dateWrapper img,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper img,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper img {
  height: 20px;
  align-self: center;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper input,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper input,
#addPaymentModal .modal-body form .formWrapper .dateWrapper input,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper input,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper input {
  flex-grow: 1;
  align-self: center;
  border: none;
  padding: 0 0 0 8px;
  margin: 0;
  width: auto;
  line-height: 20px;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper input:focus,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper input:focus,
#addPaymentModal .modal-body form .formWrapper .dateWrapper input:focus,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper input:focus,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper input:focus {
  outline: none;
}
#newPublicHolidayModal .modal-body form .formWrapper .dateWrapper:focus-within,
#generateInvoiceModal .modal-body form .formWrapper .dateWrapper:focus-within,
#addPaymentModal .modal-body form .formWrapper .dateWrapper:focus-within,
#addNewAnnouncementModal .modal-body form .formWrapper .dateWrapper:focus-within,
#generatePayrollModal .modal-body form .formWrapper .dateWrapper:focus-within {
  outline: 1px solid #3E4D9C;
  border: 1px solid transparent;
}
#newPublicHolidayModal .modal-body form .formWrapper.holidayType,
#generateInvoiceModal .modal-body form .formWrapper.holidayType,
#addPaymentModal .modal-body form .formWrapper.holidayType,
#addNewAnnouncementModal .modal-body form .formWrapper.holidayType,
#generatePayrollModal .modal-body form .formWrapper.holidayType {
  display: none;
}
#newPublicHolidayModal .modal-body form .formWrapper .half,
#generateInvoiceModal .modal-body form .formWrapper .half,
#addPaymentModal .modal-body form .formWrapper .half,
#addNewAnnouncementModal .modal-body form .formWrapper .half,
#generatePayrollModal .modal-body form .formWrapper .half {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
#newPublicHolidayModal .modal-body form .formWrapper .half:first-child,
#generateInvoiceModal .modal-body form .formWrapper .half:first-child,
#addPaymentModal .modal-body form .formWrapper .half:first-child,
#addNewAnnouncementModal .modal-body form .formWrapper .half:first-child,
#generatePayrollModal .modal-body form .formWrapper .half:first-child {
  padding-right: 8px;
}
#newPublicHolidayModal .modal-body form .formWrapper .half:last-child,
#generateInvoiceModal .modal-body form .formWrapper .half:last-child,
#addPaymentModal .modal-body form .formWrapper .half:last-child,
#addNewAnnouncementModal .modal-body form .formWrapper .half:last-child,
#generatePayrollModal .modal-body form .formWrapper .half:last-child {
  padding-left: 8px;
}
#newPublicHolidayModal .modal-body form footer,
#generateInvoiceModal .modal-body form footer,
#addPaymentModal .modal-body form footer,
#addNewAnnouncementModal .modal-body form footer,
#generatePayrollModal .modal-body form footer {
  text-align: right;
  padding: 16px 10px;
  border-top: 1px solid #F5F3F1;
  margin-top: 8px;
  z-index: 1;
  bottom: 0;
  background-color: white;
  position: sticky;
  border-bottom: 1px solid #F5F3F1;
  border-bottom-right-radius: 8px;
}
#newPublicHolidayModal .modal-body form footer button,
#generateInvoiceModal .modal-body form footer button,
#addPaymentModal .modal-body form footer button,
#addNewAnnouncementModal .modal-body form footer button,
#generatePayrollModal .modal-body form footer button {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  border: none;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  width: auto;
}
#newPublicHolidayModal .modal-body form footer button:first-child,
#generateInvoiceModal .modal-body form footer button:first-child,
#addPaymentModal .modal-body form footer button:first-child,
#addNewAnnouncementModal .modal-body form footer button:first-child,
#generatePayrollModal .modal-body form footer button:first-child {
  margin-right: 16px;
}
#newPublicHolidayModal .modal-body form footer button:focus,
#generateInvoiceModal .modal-body form footer button:focus,
#addPaymentModal .modal-body form footer button:focus,
#addNewAnnouncementModal .modal-body form footer button:focus,
#generatePayrollModal .modal-body form footer button:focus {
  outline: none;
}
#newPublicHolidayModal .modal-body form footer button.greyBtn,
#generateInvoiceModal .modal-body form footer button.greyBtn,
#addPaymentModal .modal-body form footer button.greyBtn,
#addNewAnnouncementModal .modal-body form footer button.greyBtn,
#generatePayrollModal .modal-body form footer button.greyBtn {
  background-color: #EBEBEB;
  color: #4D4D4D;
}
#newPublicHolidayModal .modal-body form footer button.saveAsDraftBtn,
#generateInvoiceModal .modal-body form footer button.saveAsDraftBtn,
#addPaymentModal .modal-body form footer button.saveAsDraftBtn,
#addNewAnnouncementModal .modal-body form footer button.saveAsDraftBtn,
#generatePayrollModal .modal-body form footer button.saveAsDraftBtn {
  margin-right: 16px;
}
#newPublicHolidayModal .modal-body form footer .createLessonBtnWrapper,
#generateInvoiceModal .modal-body form footer .createLessonBtnWrapper,
#addPaymentModal .modal-body form footer .createLessonBtnWrapper,
#addNewAnnouncementModal .modal-body form footer .createLessonBtnWrapper,
#generatePayrollModal .modal-body form footer .createLessonBtnWrapper {
  display: inline-block;
}
#newPublicHolidayModal .modal-footer,
#generateInvoiceModal .modal-footer,
#addPaymentModal .modal-footer,
#addNewAnnouncementModal .modal-footer,
#generatePayrollModal .modal-footer {
  bottom: 64px;
  z-index: 1;
  background-color: #FFFFFF;
  position: sticky;
}
#newPublicHolidayModal .modal-footer .saveBtn,
#generateInvoiceModal .modal-footer .saveBtn,
#addPaymentModal .modal-footer .saveBtn,
#addNewAnnouncementModal .modal-footer .saveBtn,
#generatePayrollModal .modal-footer .saveBtn {
  display: none;
}
#newPublicHolidayModal .modal-footer .deleteBtn,
#generateInvoiceModal .modal-footer .deleteBtn,
#addPaymentModal .modal-footer .deleteBtn,
#addNewAnnouncementModal .modal-footer .deleteBtn,
#generatePayrollModal .modal-footer .deleteBtn {
  margin-right: 8px;
  display: none;
}
#tutorOrLessonModal {
  z-index: 100;
}
#outstandingPaymentModal .modal-dialog {
  min-width: 800px;
}
#outstandingPaymentModal .modal-header {
  border-bottom: none;
  padding: 16px 24px;
}
#outstandingPaymentModal .modal-body {
  padding: 0 24px;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable {
  border-radius: 8px;
  border: 1px solid #EBEBEB;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentHeader {
  display: flex;
  background-color: #ED3A0214;
  padding: 12px 24px;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentHeader .titleRow {
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentHeader .titleRow:first-child {
  flex-grow: 1;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentBody .titleRowWrapper {
  display: flex;
  padding: 8px 24px;
  border-bottom: 1px solid #EBEBEB;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentBody .titleRowWrapper:last-child {
  border-bottom: none;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentBody .titleRowWrapper .titleRow {
  align-self: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentBody .titleRowWrapper .titleRow:first-child {
  flex-grow: 1;
}
#outstandingPaymentModal .modal-body .outstandingPaymentTable .outstandingPaymentBody .titleRowWrapper .titleRow p {
  padding: 10px 8px;
  min-width: 200px;
  border-radius: 8px;
  background-color: #F5F3F1;
  border: 1px solid #EBEBEB;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  text-align: right;
}
#outstandingPaymentModal .modal-body .subtotalWrapper {
  text-align: right;
  padding: 12px 24px;
  margin: 8px 0;
}
#outstandingPaymentModal .modal-body .subtotalWrapper p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  display: inline-block;
}
#outstandingPaymentModal .modal-body .subtotalWrapper p:last-child {
  min-width: 200px;
  margin-left: 40px;
}
#ineligibleTermPaymentModal .modal-body .contentWrapper {
  max-width: 328px;
}
#ineligibleTermPaymentModal .modal-body .subject {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding-top: 8px;
}
#invoiceGenerateModal .modal-footer .downloadInvoice a {
  text-decoration: none;
  color: #FFFFFF;
}
#addPaymentModal .modal-body {
  flex-direction: column;
}
#addPaymentModal .modal-body.disabled {
  pointer-events: none;
  opacity: 0.5;
}
#addPaymentModal .paymentForm {
  width: 100%;
  flex-grow: 1;
}
#addPaymentModal .paymentForm .addAnotherPaymentBtn:hover {
  cursor: pointer;
}
#addPaymentModal .paymentForm .addAnotherPaymentBtn img {
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}
#addPaymentModal .paymentForm .addAnotherPaymentBtn p {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #3E4D9C;
  vertical-align: middle;
}
#addPaymentModal .paymentForm form {
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #EBEBEB;
  padding: 12px;
}
#addPaymentModal .paymentForm form .formWrapper:last-of-type {
  padding-bottom: 0;
}
#addPaymentModal .paymentForm form .formWrapper input[name="other_payment"] {
  margin-top: 16px;
  display: none;
}
#addPaymentModal .paymentForm form .formWrapper .hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #808080;
  position: absolute;
  right: 0;
  top: 3px;
}
#addPaymentModal .paymentForm form .formWrapper .hint .removePayment {
  height: 24px;
  display: none;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment {
  border: 1px solid #EBEBEB;
  border-radius: 8px;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment:hover {
  cursor: pointer;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment > * {
  display: inline-block;
  vertical-align: middle;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment input[type="file"] {
  display: none;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment img {
  height: 20px;
  width: 20px;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment .attachmentTitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  display: inline-block;
  margin-left: 8px;
  color: #000000;
}
#addPaymentModal .paymentForm form .formWrapper .uploadAttachPayment .uploadButton {
  padding-bottom: 0;
  display: block;
  padding: 10px 8px;
}
#addPaymentModal .paymentTotalWrapper {
  border-top: 1px solid #EBEBEB;
  margin-top: 40px;
}
#addPaymentModal .paymentTotalWrapper .subPaymentWrapper {
  text-align: right;
  padding: 16px 48px 0;
}
#addPaymentModal .paymentTotalWrapper .subPaymentWrapper p {
  padding-bottom: 16px;
}
#addPaymentModal .paymentTotalWrapper .subPaymentWrapper p span:first-child {
  padding-right: 40px;
}
#addPaymentModal .paymentTotalWrapper .subPaymentWrapper p span:last-child {
  width: 200px;
  display: inline-block;
}
#addPaymentModal .paymentTotalWrapper .balanceWrapper {
  background-color: #F0F1F7;
  padding: 24px 48px;
  text-align: right;
}
#addPaymentModal .paymentTotalWrapper .balanceWrapper h4 {
  display: inline-block;
}
#addPaymentModal .paymentTotalWrapper .balanceWrapper h4:first-child {
  padding-right: 40px;
}
#addPaymentModal .paymentTotalWrapper .balanceWrapper h4:last-child {
  min-width: 200px;
}
#addPaymentModal .modal-footer .savePaymentBtn {
  display: inline-block;
  margin-right: 8px;
}
#addPaymentModal .modal-footer.disabled {
  pointer-events: none;
}
#addPaymentModal .modal-footer.disabled > * {
  opacity: 0.5;
}
#viewReceiptModal .titleWrapper {
  padding: 0 40px;
  position: absolute;
  top: 78px;
  left: 0;
  width: 100%;
  text-align: left;
  display: flex;
}
#viewReceiptModal .titleWrapper .titleContainer {
  flex-grow: 1;
}
#viewReceiptModal .titleWrapper .titleContainer p {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  color: #FFFFFF;
}
#viewReceiptModal .titleWrapper .titleContainer .receiptName {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#viewReceiptModal .titleWrapper .closeWrapper img {
  height: 32px;
}
#viewReceiptModal .titleWrapper .closeWrapper img:hover {
  cursor: pointer;
}
#viewReceiptModal .titleWrapper .closeWrapper img:first-child {
  padding-right: 16px;
}
#viewReceiptModal .modal-content {
  background-color: transparent;
  border: none;
}
#viewReceiptModal .previewImg {
  height: 100%;
  width: 100%;
  max-height: 600px;
}
#attendanceUnmarkedModal .subjectListWrapper {
  padding-top: 8px;
}
#attendanceUnmarkedModal .subjectListWrapper ol {
  padding-left: 16px;
}
#attendanceUnmarkedModal .subjectListWrapper ol li {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding-left: 8px;
  padding-bottom: 8px;
}
#attendanceUnmarkedModal .subjectListWrapper ol li:last-of-type {
  padding-bottom: 0;
}
#attendanceUnmarkedModal .subjectListWrapper ol li .listWrapper {
  display: flex;
}
#attendanceUnmarkedModal .subjectListWrapper ol li .listWrapper .subjectWrapper {
  flex-grow: 1;
  align-self: center;
}
#attendanceUnmarkedModal .subjectListWrapper ol li .listWrapper .subjectWrapper p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#attendanceUnmarkedModal .subjectListWrapper ol li .listWrapper .subjectWrapper .time {
  color: #808080;
}
#attendanceUnmarkedModal .subjectListWrapper ol li .listWrapper .checked {
  align-self: center;
  height: 24px;
}
#payrollDetailsModal .modal-dialog {
  min-width: 800px;
}
#payrollDetailsModal .modal-dialog .modal-body {
  padding: 0;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown {
  display: block;
  border-bottom: 1px solid #EBEBEB;
  position: relative;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown .yearIntakeSideBar {
  height: 100%;
  width: 7px;
  position: absolute;
  left: 0;
  top: 0;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title {
  padding: 12px 24px;
  display: flex;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title i {
  transition: transform 0.5s;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .flip {
  transform: rotate(-180deg);
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title:hover {
  cursor: pointer;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .detailsWrapper {
  align-self: center;
  flex-grow: 1;
  padding: 0;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .detailsWrapper .subjectWrapper {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .detailsWrapper .subjectWrapper > * {
  display: inline-block;
  vertical-align: middle;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .detailsWrapper .tuitionCentreWrapper p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #808080;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .dropdown-total {
  align-self: center;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .dropdown-total .body1 {
  vertical-align: middle;
  margin-right: 16px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .dropdown-total .paidTotal {
  color: #3E9C5E;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-title .dropdown-total .caret-down {
  height: 24px;
  vertical-align: middle;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container {
  padding: 0px 24px 8px;
  display: none;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #EBEBEB;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td,
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th {
  border-bottom: 1px solid #EBEBEB;
  width: auto;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td:first-child,
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th:first-child {
  width: 70%;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td .name,
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th .name {
  min-width: 180px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td:not(:first-child),
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th:not(:first-child) {
  min-width: 100px;
  padding: 12px 8px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td:last-child,
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th:last-child {
  padding: 12px 24px 12px 8px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td span:first-child,
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th span:first-child {
  min-width: 24px;
  padding-right: 16px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th:first-child {
  border-top-left-radius: 8px;
  text-align: left;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper th:last-child {
  border-top-right-radius: 8px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td {
  padding: 10.5px 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td img {
  height: 24px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper td:not(:first-child) {
  text-align: center;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper.titleListWrapper {
  background-color: #F5F3F1;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper.footerListeWrapper td:first-child {
  padding-right: 0;
  text-align: right;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .studentListWrapper .rowWrapper.footerListeWrapper td span {
  padding-right: 0;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .subtotalWrapper {
  padding: 12px 24px;
  display: flex;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .subtotalWrapper p {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-align: right;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .subtotalWrapper p:first-child {
  flex-grow: 1;
  padding-right: 40px;
}
#payrollDetailsModal .modal-dialog .dropdownWrapper .dropdown-container .subtotalWrapper p:last-child {
  min-width: 200px;
}
#payrollDetailsModal .modal-dialog .grandTotalFooter {
  padding-right: 32px;
}
#payrollDetailsModal .modal-dialog .grandTotalFooter span {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
#payrollDetailsModal .modal-dialog .grandTotalFooter span:first-child {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #808080;
  padding-right: 16px;
}
.alertWrapper,
.successWrapper {
  display: none;
  position: absolute;
  top: 80px;
  right: 38px;
  max-width: 500px;
  width: 100%;
  z-index: 10000;
}
.alertWrapper .alert,
.successWrapper .alert,
.alertWrapper .success,
.successWrapper .success {
  background-color: #f9ece8;
  border-radius: 8px;
  box-shadow: 0px 100px 80px rgba(141, 145, 160, 0.0196802), 0px 41.7776px 33.4221px rgba(141, 145, 160, 0.0282725), 0px 22.3363px 17.869px rgba(141, 145, 160, 0.035), 0px 12.5216px 10.0172px rgba(141, 145, 160, 0.0417275), 0px 6.6501px 5.32008px rgba(141, 145, 160, 0.0503198), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
  margin: 0;
  padding: 12px 16px;
}
.alertWrapper .alert > *,
.successWrapper .alert > *,
.alertWrapper .success > *,
.successWrapper .success > * {
  display: inline-block;
  vertical-align: middle;
}
.alertWrapper .alert img,
.successWrapper .alert img,
.alertWrapper .success img,
.successWrapper .success img {
  height: 20px;
  margin-right: 16px;
}
.alertWrapper .alert p,
.successWrapper .alert p,
.alertWrapper .success p,
.successWrapper .success p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #ED3A02;
}
.successWrapper .success {
  background-color: #ebf3ef;
}
.successWrapper .success p {
  color: #3E9C5E;
}
.ui-datepicker {
  font-size: 14px;
}
.inputWrapper:not(.disabled) {
  background-color: #FFFFFF;
}
.select2-container {
  width: 100% !important;
  font-size: 14px;
}
.select2-container .select2-selection {
  padding: 8px 10.5px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  display: block;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  height: auto;
  min-height: 42px;
}
.select2-container .select2-selection:before {
  font-family: "FontAwesome" !important;
  content: "\f078" !important;
  font-weight: 400;
  font-size: 10px;
  position: absolute;
  right: 14px;
  top: 30%;
  color: #808080;
}
.select2-container .select2-selection.select2-selection--single:focus,
.select2-container .select2-selection.select2-selection--single:active {
  outline: 1px solid #3E4D9C;
  border: 1px solid transparent;
}
.select2-container .select2-selection .select2-selection__rendered {
  display: block;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  line-height: 24px;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__choice {
  margin: 0 4px 2.5px 0;
  padding: 0;
  padding: 2.5px 28px 0px 8px;
  border: none;
  border-radius: 50px;
  background-color: #F5F3F1;
  position: relative;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  color: #F5F3F1;
  font-size: 14px;
  line-height: 16px;
  vertical-align: top;
  background-color: #808080;
  border: none;
  border-radius: 50%;
  right: 4px;
  height: 16px;
  width: 16px;
  top: 20%;
  left: auto;
  position: absolute;
  padding: 0;
  text-align: center;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover,
.select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:focus {
  background-color: #808080;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding: 0;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #B2B2B2;
}
.select2-container .select2-selection .select2-selection__arrow {
  display: none;
}
.select2-container .select2-search .select2-search__field {
  margin: 0;
  min-height: unset;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  vertical-align: middle;
  line-height: 26px;
  font-family: 'Open Sans', sans-serif;
}
.select2-container .select2-search .select2-search__field:focus-visible {
  outline: none;
}
.select2-container .select2-results {
  font-weight: 400;
  line-height: 19px;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 14px;
}
.select2-container .select2-results .select2-results__option {
  padding: 8px 10.5px;
}
.select2-container .select2-results .select2-results__option.select2-results__option--highlighted {
  background-color: #F5F3F1;
}
.select2-container .select2-results .select2-results__option--highlighted {
  color: #000000;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid #3E4D9C;
  outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  border: 1px solid #EBEBEB;
  outline: 0;
  background-color: #F5F3F1;
}
span.select2.select2-container.select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: #B2B2B2;
}
.subHeaderWrapper {
  position: fixed;
  z-index: 1;
  width: 100%;
  background-color: #FFFFFF;
  top: 64px;
  padding: 16px 80px;
  display: flex;
  border-bottom: 1px solid #EBEBEB;
}
.subHeaderWrapper .breadcrumbWrapper {
  flex-grow: 1;
}
.subHeaderWrapper .breadcrumbWrapper .title {
  padding-top: 8px;
}
.subHeaderWrapper .closeBtn {
  align-self: center;
}
.subHeaderWrapper .closeBtn img {
  height: 33px;
}
.subHeaderWrapper .lessonStatusTag {
  align-self: center;
}
.subHeaderWrapper .lessonStatusTag p {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #808080;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.subHeaderWrapper .lessonStatusTag.publish p {
  background-color: #3E9C5E;
  border-radius: 4px;
}
.subHeaderWrapper .lessonStatusTag.ended p {
  background-color: #ED3A02;
  border-radius: 4px;
}
.subHeaderWrapper .invoiceStatus,
.subHeaderWrapper .payrollStatus {
  align-self: center;
}
.subHeaderWrapper .invoiceStatus .dueDateWrapper,
.subHeaderWrapper .payrollStatus .dueDateWrapper {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}
.subHeaderWrapper .invoiceStatus .dueDateWrapper > *,
.subHeaderWrapper .payrollStatus .dueDateWrapper > * {
  display: inline-block;
  vertical-align: middle;
}
.subHeaderWrapper .invoiceStatus .dueDateWrapper img,
.subHeaderWrapper .payrollStatus .dueDateWrapper img {
  height: 24px;
  margin-right: 8px;
}
.subHeaderWrapper .invoiceStatus .dueDateWrapper p,
.subHeaderWrapper .payrollStatus .dueDateWrapper p {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  color: #ED3A02;
  padding: 0;
}
.subHeaderWrapper .invoiceStatus p,
.subHeaderWrapper .payrollStatus p {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}
.subHeaderWrapper .invoiceStatus p.grey,
.subHeaderWrapper .payrollStatus p.grey {
  border: 1px solid #808080;
  background-color: transparent;
  color: #808080;
}
.subHeaderWrapper .invoiceStatus p.yellow,
.subHeaderWrapper .payrollStatus p.yellow {
  background-color: #F09002;
}
.subHeaderWrapper .invoiceStatus p.green,
.subHeaderWrapper .payrollStatus p.green {
  background-color: #3E9C5E;
}
.subHeaderWrapper .invoiceStatus p.red,
.subHeaderWrapper .payrollStatus p.red {
  background-color: #ED3A02;
}
.colorPalette.lightGreen {
  background-color: #8BC34A;
}
.colorPalette.amber {
  background-color: #FFC107;
}
.colorPalette.blue {
  background-color: #2196F3;
}
.colorPalette.lightPurple {
  background-color: #F2EAF6;
}
.colorPalette.grey {
  background-color: #9E9E9E;
}
.colorPalette.grey2 {
  background-color: #B2B2B2;
}
.colorPalette.darkBlue {
  background-color: #607D8B;
}
.colorPalette.red {
  background-color: #E35141;
}
.colorPalette.red-text {
  color: #E35141;
}
.colorPalette.purple {
  background-color: #9C27B0;
}
.colorPalette.indigo {
  background-color: #3F51B5;
}
.colorPalette.lightBlue {
  background-color: #03A9F4;
}
.colorPalette.teal {
  background-color: #009688;
}
.colorPalette.yellow {
  background-color: #FFEB3B;
}
.colorPalette.orange {
  background-color: #FF9800;
}
.colorPalette.deepOrange {
  background-color: #FF5722;
}
.colorPalette.brown {
  background-color: #795548;
}
.colorPalette.blueGrey {
  background-color: #607D8B;
}
.colorPalette.secondaryDark {
  background-color: #151643;
}
.colorPalette.pink {
  background-color: #E91E63;
}
.colorPalette.deepPurple {
  background-color: #673AB7;
}
.colorPalette.cyan {
  background-color: #00BCD4;
}
.colorPalette.lime {
  background-color: #CDDC39;
}
.tooltipster-box {
  background-color: #F0F1F7 !important;
  border: none !important;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16));
}
.tooltipster-box .tooltipster-content {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #000000 !important;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper h1 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #3E4D9C;
  padding-bottom: 8px;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper .classInfoWrapper > div > * {
  display: inline-block;
  vertical-align: middle;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper .classInfoWrapper > div img {
  height: 16px;
  margin-right: 12px;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper .classInfoWrapper > div p {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #000000;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper .classInfoWrapper .lessonCenterWrapper {
  padding-bottom: 6px;
}
.tooltipster-box .tooltipster-content .classTooltipWrapper .classInfoWrapper .lessonSubjectWrapper {
  padding-bottom: 6px;
}
.tooltipster-grey .tooltipster-box {
  background-color: #F5F3F1 !important;
}
.tooltipster-grey .tooltipster-box .tooltipster-content {
  padding: 8px 10px;
}
.tooltipster-grey .tooltipster-box .tooltipster-content .greyTooltip p {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #4D4D4D;
}
.tooltipster-grey .tooltipster-box .tooltipster-content .greyTooltip.createLesson p {
  max-width: 260px;
}
.tooltipster-arrow-uncropped .tooltipster-arrow-border {
  border: none !important;
}
.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #F0F1F7 !important;
}
.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #F0F1F7 !important;
}
.flipped {
  transform: scaleX(-1);
}
.tooltipster-base.tooltipster-sidetip.white-tooltipster .tooltipster-box {
  background-color: #fff !important;
}
.tooltipster-base.tooltipster-sidetip.white-tooltipster.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #fff !important;
}
.tooltipster-base.tooltipster-sidetip.white-tooltipster.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #fff !important;
}
#landing {
  height: 100%;
  align-items: center;
  position: relative;
  padding: 80px;
  font-size: 0;
}
#landing > * {
  padding: 100px;
  vertical-align: middle;
}
#landing > *:first-child {
  height: 100%;
}
#landing > *:last-child {
  max-height: 100vh;
  overflow: auto;
}
@media (max-width: 960px) {
  #landing > *:last-child {
    overflow: unset;
  }
}
@media (max-width: 960px) {
  #landing .col-md-6 {
    flex: 100%;
    max-width: 600px;
    margin: auto;
    padding: 0 40px;
  }
}
#landing .landingBg {
  padding: 48px;
  background-position: center;
  background-size: cover;
  border-radius: 50px;
}
@media (max-width: 960px) {
  #landing .landingBg {
    display: none;
  }
}
#landing .landingBg .logo {
  height: 60px;
}
#landing #loginForm {
  padding-top: 32px;
}
#landing .toggleEye {
  float: right;
  top: -48px;
  right: 10px;
  position: relative;
  cursor: pointer;
  height: 20px;
}
#landing .forgetPasswordBtn {
  text-align: right;
  display: block;
  padding-bottom: 16px;
}
#landing .forgetPasswordBtn a {
  color: #3E4D9C;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
#landing .forgetPasswordBtn a:hover {
  text-decoration: none;
}
#landing .errorMsg {
  margin-top: -8px;
  padding-bottom: 16px;
  display: none;
}
#landing .errorMsg > * {
  display: inline-block;
  vertical-align: middle;
}
#landing .errorMsg img {
  height: 16px;
  margin-right: 8px;
}
#landing .errorMsg span {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #ED3A02;
}
#landing #forgotPwdForm {
  padding-top: 16px;
}
#landing #forgotPwdForm h6 {
  padding-bottom: 32px;
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
#landing #forgotPwdForm .buttonWrapper {
  padding-top: 8px;
}
#landing #forgotPwdForm .buttonWrapper a {
  margin-top: 32px;
  text-align: center;
  display: block;
  width: 100%;
  color: #EE7A00;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-decoration: underline;
}
#landing #resetSuccessful {
  text-align: center;
}
#landing #resetSuccessful img {
  height: 120px;
}
#landing #resetSuccessful h6 {
  font-size: 14px;
  font-weight: 400;
  color: #4D4D4D;
  padding: 25px 0 32px;
  line-height: 19px;
}
#landing h5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #4D4D4D;
  padding: 16px 0 24px;
}
#landing .passwordValidation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 8px;
}
#landing .passwordValidation .validation {
  flex: 1 0 50%;
  padding-bottom: 10px;
}
#landing .passwordValidation .validation > * {
  vertical-align: middle;
  display: inline-block;
}
#landing .passwordValidation .validation.valid img {
  filter: invert(50%) sepia(17%) saturate(1312%) hue-rotate(88deg) brightness(100%) contrast(92%);
}
#landing .passwordValidation .validation.valid p {
  color: #3E9C5E;
}
#landing .passwordValidation .validation img {
  height: 17px;
  margin-right: 10px;
}
#landing .passwordValidation .validation p {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #B2B2B2;
}