:root {
  --primaryColour: #527383;
  --primaryDarkColour: #315263;
  --secColour: #ed7d3b;
  --text43: #635a5a;
  --text2d: #5a5a5a;
  --primaryBg: #f5f6fa;
  --red: #ed3c3c;
  --white: white;
  --purple: #e2e4f9
}

@font-face {
  font-family: 'Montserrat', sans-serif
}

:root {
  --primaryFont: 'Montserrat', sans-serif;
  --fonttwo: 'Montserrat', sans-serif;
  --extralight: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --extrabold: 800;
  --black: 900;
  --font: 'Roboto', sans-serif
}

.row.to6px {
  margin-left: -6px;
  margin-right: -6px
}

  .row.to6px [class^="col-"] {
    padding-right: 6px;
    padding-left: 6px
  }

.row.to8px {
  margin-left: -8px;
  margin-right: -8px
}

  .row.to8px [class^="col-"] {
    padding-right: 8px;
    padding-left: 8px
  }

.row.to0px {
  margin-left: 0px;
  margin-right: 0px
}

  .row.to0px [class^="col"] {
    padding-right: 0px;
    padding-left: 0px
  }

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.container {
  max-width: 1266px
}

.containerMax {
  max-width: 1366px;
  width: 100%
}

a, input, textarea, select, button {
  text-decoration: none !important;
  outline: none
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0px;
  font-weight: 400
}

body {
  font-family: var(--fonttwo);
  color: #2d2d2d
}

img {
  max-width: 100%
}

.cust_container {
  max-width: 1266px;
  margin: 0 auto;
  width: 100%;
  padding: 0px 15px
}

.widgetHeader {
  padding: 12px 0;
  background-color: #ffffff
}

@media (max-width: 480px) {
  .widgetHeader {
    background-color: #f5f6fa
  }
}

.widgetHeader .headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center
}

  .widgetHeader .headerContainer .menuHolder {
    margin-left: auto;
    padding-right: 25px;
    display: flex;
    align-items: center
  }

@media (max-width: 991px) {
  .widgetHeader .headerContainer .menuHolder {
    padding-right: 15px
  }
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .menuHolder {
    display: none
  }
}

.widgetHeader .headerContainer .menuHolder ul {
  display: flex;
  margin: 0;
  padding: 0
}

  .widgetHeader .headerContainer .menuHolder ul li {
    list-style-type: none;
    padding: 0 19px
  }

@media (max-width: 1199px) {
  .widgetHeader .headerContainer .menuHolder ul li {
    padding: 0 0
  }
}

.widgetHeader .headerContainer .menuHolder ul li a.navLink {
  padding: 7px 10px;
  display: flex;
  align-items: center;
  color: var(--text2d);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

  .widgetHeader .headerContainer .menuHolder ul li a.navLink svg {
    margin-right: 8px
  }

    .widgetHeader .headerContainer .menuHolder ul li a.navLink svg path {
      fill: var(--text2d);
      -webkit-transition: ease-in-out 0.4s;
      -moz-transition: ease-in-out 0.4s;
      -o-transition: ease-in-out 0.4s;
      -ms-transition: ease-in-out 0.4s;
      transition: ease-in-out 0.4s
    }

.widgetHeader .headerContainer .menuHolder ul li a:hover {
  color: var(--primaryColour)
}

  .widgetHeader .headerContainer .menuHolder ul li a:hover svg path {
    fill: var(--primaryColour)
  }

.widgetHeader .headerContainer .menuHolder ul li a .ripple {
  background: rgba(82,115,131,0.4)
}

.widgetHeader .headerContainer .contactBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: var(--primaryColour);
  width: 140px;
  height: 38px;
  border: solid 1px var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-right: 15px
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .contactBtn {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 1199px) {
  .widgetHeader .headerContainer .contactBtn {
    margin-right: 10px
  }
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .contactBtn {
    display: none
  }
}

.widgetHeader .headerContainer .contactBtn .ripple {
  background: rgba(82,115,131,0.4)
}

.widgetHeader .headerContainer .contactBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

.widgetHeader .headerContainer .feeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: var(--primaryColour);
  width: 85px;
  height: 38px;
  color: #fff;
  border: solid 1px var(--primaryColour);
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-right: 25px
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .feeBtn {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 1199px) {
  .widgetHeader .headerContainer .feeBtn {
    margin-right: 10px
  }
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .feeBtn {
    display: none
  }
}

.widgetHeader .headerContainer .feeBtn .ripple {
  background: rgba(82,115,131,0.4)
}

.widgetHeader .headerContainer .feeBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

.widgetHeader .headerContainer .profileControl {
  display: flex;
  flex-direction: column;
  position: relative
}

  .widgetHeader .headerContainer .profileControl .controllabel {
    display: flex;
    cursor: pointer
  }

    .widgetHeader .headerContainer .profileControl .controllabel .ripple {
      background: rgba(82,115,131,0.4)
    }

    .widgetHeader .headerContainer .profileControl .controllabel .labelHold {
      cursor: pointer;
      padding-left: 8px;
      display: flex;
      justify-content: center;
      flex-direction: column
    }

@media (max-width: 991px) {
  .widgetHeader .headerContainer .profileControl .controllabel .labelHold {
    display: none
  }
}

.widgetHeader .headerContainer .profileControl .controllabel .labelHold .nameLabel {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  line-height: 20px;
  color: var(--text2d);
  margin-bottom: 0;
  display: flex;
  cursor: pointer
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .profileControl .controllabel .labelHold .nameLabel {
    font-size: 12px;
    font-size: 13px
  }
}

.widgetHeader .headerContainer .profileControl .controllabel .labelHold .nameLabel svg {
  margin-left: 10px;
  position: relative;
  top: 5px
}

.widgetHeader .headerContainer .profileControl .controllabel .labelHold .nameLabel span {
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
  text-overflow: ellipsis
}

.widgetHeader .headerContainer .profileControl .controllabel .labelHold .posLabel {
  cursor: pointer;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d);
  line-height: 14px;
  margin-bottom: 0
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .profileControl .controllabel .labelHold .posLabel {
    font-size: 9px;
    font-size: 12px
  }
}

.widgetHeader .headerContainer .profileControl .profileDropRow {
  min-width: 235px;
  width: 100%;
  top: 100%;
  position: absolute;
  right: 0;
  display: none;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 1;
  box-shadow: 0 5px 6px 0 rgba(32,33,36,0.28);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

@media (max-width: 1199px) {
  .widgetHeader .headerContainer .profileControl .profileDropRow {
    padding-top: 0
  }
}

.widgetHeader .headerContainer .profileControl .profileDropRow .profListHold {
  display: flex;
  flex-direction: column
}

.widgetHeader .headerContainer .profileControl .profileDropRow .smProfile {
  padding: 18px 15px 12px 15px;
  display: flex;
  border-bottom: solid 1px #dddddd
}

  .widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px
  }

    .widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .nameLabel {
      font-family: var(--primaryfont);
      font-weight: var(--semibold);
      font-size: 14px;
      line-height: 14px;
      color: var(--primaryColour);
      margin-bottom: 0;
      display: flex;
      cursor: pointer
    }

@media (max-width: 767px) {
  .widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .nameLabel {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .nameLabel svg {
  margin-left: 10px;
  position: relative;
  top: 5px
}

.widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .posLabel {
  cursor: pointer;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--primaryColour);
  line-height: 14px;
  margin-bottom: 0
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .posLabel {
    font-size: 9px;
    font-size: 12px
  }
}

@media (min-width: 992px) {
  .widgetHeader .headerContainer .profileControl .profileDropRow .smProfile .labelHold .posLabel {
    display: none
  }
}

.widgetHeader .headerContainer .profileControl .profileDropRow .dropList {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .widgetHeader .headerContainer .profileControl .profileDropRow .dropList {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetHeader .headerContainer .profileControl .profileDropRow .dropList:hover {
  background-color: var(--primaryBg)
}

.widgetHeader .headerContainer .profileControl .profileDropRow .dropList.logOut {
  color: var(--secColour)
}

  .widgetHeader .headerContainer .profileControl .profileDropRow .dropList.logOut svg {
    width: 28px;
    height: 28px;
    padding-right: 10px
  }

.smNavWidget {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  display: none
}

@media (max-width: 767px) {
  .smNavWidget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10
  }
}

.smNavWidget a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

  .smNavWidget a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    background-color: #ecf6fb;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s
  }

  .smNavWidget a svg {
    position: relative;
    z-index: 1
  }

    .smNavWidget a svg path {
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      -ms-transition: all 0.4s;
      transition: all 0.4s;
      fill: gray
    }

  .smNavWidget a:hover svg path, .smNavWidget a:focus svg path {
    fill: var(--primaryColour)
  }

  .smNavWidget a:hover::after, .smNavWidget a:focus::after {
    width: 100%;
    height: 100%
  }

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1
}

.rippleEffect {
  animation: rippleDrop 0.6s linear
}

.eBtn {
  position: relative;
  overflow: hidden;
  cursor: pointer
}

.statusPageWidget {
  padding: 39px 0 75px 0;
  background-color: #ffffff
}

  .statusPageWidget .statusImg {
    max-width: 100%
  }

  .statusPageWidget h2 {
    color: var(--secColour);
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 24px;
    margin-bottom: 30px
  }

@media (max-width: 767px) {
  .statusPageWidget h2 {
    font-size: 18px
  }
}

@media (max-width: 767px) {
  .statusPageWidget h2 {
    margin-bottom: 15px
  }
}

.statusPageWidget p {
  max-width: 830px;
  margin: 0 auto;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .statusPageWidget p {
    font-size: 12px;
    font-size: 13px
  }
}

.statusPageWidget .backBtn {
  margin: 30px auto 0 auto;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--secColour);
  width: 165px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .statusPageWidget .backBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .statusPageWidget .backBtn {
    margin: 15px auto 0 auto
  }
}

.statusPageWidget .backBtn:hover {
  color: #fafafa;
  background-color: var(--secColour)
}

.btnLoading {
  position: relative !important;
  overflow: hidden !important
}

  .btnLoading::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    border: 2px solid var(--secColour);
    border-top: 2px solid var(--primaryColour);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.4s linear infinite;
    z-index: 1
  }

  .btnLoading::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primaryColour);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s
  }

.preeloader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(255,255,255,0.7);
  z-index: 10
}

  .preeloader::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    border: 3px solid var(--secColour);
    border-top: 3px solid #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    animation: spin 2s linear infinite;
    z-index: 1
  }

.sectionLoading {
  position: relative
}

  .sectionLoading::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    border: 3px solid var(--secColour);
    border-top: 3px solid #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    animation: spin 0.4s linear infinite;
    z-index: 9
  }

  .sectionLoading::after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    z-index: 8
  }

.modalWidgetMain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
  left: 0;
  -webkit-transform: translate3d(0, 105%, 0);
  transform: translate3d(0, 105%, 0);
  pointer-events: none;
  opacity: 0
}

  .modalWidgetMain .modalContainer {
    width: 650px;
    height: 300px;
    position: relative;
    background-color: #fafafa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 1;
    box-shadow: 0 2px 8px 0 rgba(32,33,36,0.28)
  }

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer {
    width: 90%;
    max-width: 425px;
    height: auto
  }
}

.modalWidgetMain .modalContainer .clseBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 11px;
  top: 10px;
  border: solid 1px #e6e6e6;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  cursor: pointer
}

  .modalWidgetMain .modalContainer .clseBtn:hover {
    background-color: #e6e6e6
  }

.modalWidgetMain .modalContainer.confirmationModal {
  padding: 20px;
  display: flex;
  align-items: flex-end
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal {
    align-items: flex-start;
    flex-direction: column
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal .modalImage svg {
    width: 155px;
    height: 130px
  }
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent {
  width: 100%;
  padding-left: 40px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal .modalContent {
    padding-left: 0
  }
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent .modalTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 22px;
  color: var(--secColour);
  margin-bottom: 2px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal .modalContent .modalTitle {
    font-size: 16.5px
  }
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour)
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal .modalContent p {
    font-size: 12px;
    font-size: 13px
  }
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent .buttomRow {
  margin-top: 18px;
  width: 260px;
  display: grid;
  column-gap: 12px;
  -moz-column-gap: 12px;
  grid-template-columns: 1fr 1fr
}

  .modalWidgetMain .modalContainer.confirmationModal .modalContent .buttomRow .btnCol {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.confirmationModal .modalContent .buttomRow .btnCol {
    font-size: 12px;
    font-size: 13px
  }
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent .buttomRow .btnCol:hover {
  box-shadow: 0 2px 5px 0 rgba(32,33,36,0.28)
}

.modalWidgetMain .modalContainer.confirmationModal .modalContent .button1 {
  color: var(--text2d);
  background-color: #dddddd
}

  .modalWidgetMain .modalContainer.confirmationModal .modalContent .button1:hover {
    background-color: #a9a9a9
  }

.modalWidgetMain .modalContainer.confirmationModal .modalContent .button2 {
  color: #fff;
  background-color: var(--secColour)
}

  .modalWidgetMain .modalContainer.confirmationModal .modalContent .button2:hover {
    background-color: #cc6020
  }

.modalWidgetMain .modalContainer.modalWidgetMainAdmn .innerScroll {
  max-height: calc((100vh) - 245px);
  display: block;
  overflow: auto
}

  .modalWidgetMain .modalContainer.modalWidgetMainAdmn .innerScroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    margin-left: 5px;
    left: 5px
  }

  .modalWidgetMain .modalContainer.modalWidgetMainAdmn .innerScroll::-webkit-scrollbar-track {
    background: #f8f8f8
  }

  .modalWidgetMain .modalContainer.modalWidgetMainAdmn .innerScroll::-webkit-scrollbar-thumb {
    background: #c2c2c2
  }

.modalWidgetMain .modalContainer.modalWidgetMainAdmn p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour)
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn p {
    font-size: 13px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn ul li {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  margin-bottom: 5px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn ul li {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn ul li {
    font-size: 13px;
    margin-bottom: 2px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn ul li a {
  color: var(--primaryColour)
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn ol li {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  margin-bottom: 5px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn ol li {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn ol li {
    font-size: 13px;
    margin-bottom: 2px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn ol li a {
  color: var(--primaryColour)
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn h1 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 26px;
  color: var(--primaryColour);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h1 {
    font-size: 19.5px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h1 {
    font-size: 22px;
    margin-bottom: 5px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn h2 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 24px;
  color: var(--primaryColour);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h2 {
    font-size: 18px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h2 {
    font-size: 20px;
    margin-bottom: 5px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn h3 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 22px;
  color: var(--primaryColour);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h3 {
    font-size: 16.5px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h3 {
    font-size: 18px;
    margin-bottom: 5px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn h4 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 20px;
  color: var(--primaryColour);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h4 {
    font-size: 15px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h4 {
    font-size: 16px;
    margin-bottom: 5px
  }
}

.modalWidgetMain .modalContainer.modalWidgetMainAdmn h5 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 18px;
  color: var(--primaryColour);
  margin-bottom: 10px
}

@media (max-width: 991px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h5 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h5 {
    font-size: 13.5px
  }
}

@media (max-width: 767px) {
  .modalWidgetMain .modalContainer.modalWidgetMainAdmn h5 {
    font-size: 14px;
    margin-bottom: 5px
  }
}

.modalWidgetMain .modalCover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.5;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  left: 0;
  -webkit-transform: translate3d(0, 105%, 0);
  transform: translate3d(0, 105%, 0)
}

.modalWidgetMain.openM {
  opacity: 1;
  pointer-events: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

  .modalWidgetMain.openM .modalCover {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

.themeModal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: translate3d(0, 105%, 0);
  transform: translate3d(0, 105%, 0)
}

@media (max-width: 767px) {
  .themeModal {
    padding: 8px
  }
}

.themeModal .tmContainer {
  width: 600px;
  position: relative;
  background-color: #fff;
  z-index: 1;
  border-radius: 2px;
  padding: 35px 38px
}

@media (max-width: 767px) {
  .themeModal .tmContainer {
    padding: 35px 15px;
    max-width: 600px;
    width: 100%
  }
}

.themeModal .tmContainer .tmClose {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50%
}

  .themeModal .tmContainer .tmClose svg path {
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

  .themeModal .tmContainer .tmClose:hover svg path {
    fill: var(--secColour)
  }

.themeModal .tmContainer .tmTable {
  overflow: auto;
  max-height: 76vh
}

@media (max-width: 767px) {
  .themeModal .tmContainer .tmTable {
    max-height: 75vh
  }
}

.themeModal .tmContainer .tmTable table {
  width: 100%;
  border: solid 1px #dddddd
}

  .themeModal .tmContainer .tmTable table tr th {
    padding: 12px;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    color: var(--text43)
  }

@media (max-width: 767px) {
  .themeModal .tmContainer .tmTable table tr th {
    font-size: 12px;
    font-size: 13px
  }
}

.themeModal .tmContainer .tmTable table tr td {
  padding: 15px
}

  .themeModal .tmContainer .tmTable table tr td .tmKey {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px;
    color: var(--text43)
  }

@media (max-width: 767px) {
  .themeModal .tmContainer .tmTable table tr td .tmKey {
    font-size: 10.5px;
    font-size: 12px
  }
}

.themeModal .tmContainer .tmTable table tr td ul {
  padding-left: 20px;
  margin-bottom: 0
}

  .themeModal .tmContainer .tmTable table tr td ul li {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px;
    color: var(--text43);
    margin-bottom: 4px
  }

@media (max-width: 767px) {
  .themeModal .tmContainer .tmTable table tr td ul li {
    font-size: 10.5px;
    font-size: 12px
  }
}

.themeModal .tmContainer .tmContent {
  overflow: auto;
  max-height: 76vh
}

@media (max-width: 767px) {
  .themeModal .tmContainer .tmContent {
    max-height: 75vh
  }
}

.themeModal .tmContainer .tmContent h3 {
  padding-bottom: 5px;
  border-bottom: solid 1px #dddddd;
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 16px;
  color: var(--primaryColour)
}

@media (max-width: 767px) {
  .themeModal .tmContainer .tmContent h3 {
    font-size: 12px;
    font-size: 13px
  }
}

.themeModal .tmContainer .tmContent .tmTitle {
  margin-top: 20px;
  margin-bottom: 8px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #2d2d2d
}

@media (max-width: 767px) {
  .themeModal .tmContainer .tmContent .tmTitle {
    font-size: 12px;
    font-size: 13px
  }
}

.themeModal .tmContainer .tmContent p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #2d2d2d
}

@media (max-width: 767px) {
  .themeModal .tmContainer .tmContent p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.themeModal .modalBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.36;
  z-index: 0
}

.themeModal.open {
  pointer-events: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.login_section {
  display: flex;
  height: 100vh;
  align-items: center;
  font-family: var(--font)
}

.loginForm {
  padding: 20px 155px;
  text-align: center;
  width: 50%
}

  .loginForm .loginFormLogo {
    display: block
  }

  .loginForm h3 {
    font-size: 24px;
    margin: 34px 0px 16px
  }

  .loginForm h4 {
    font-size: 16px;
    max-width: 375px;
    margin: 25px auto;
    line-height: 26px
  }

    .loginForm h4 a {
      font-size: 16px;
      color: var(--primaryColour);
      padding-left: 8px;
      text-decoration: underline !important;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s
    }

      .loginForm h4 a:hover {
        color: var(--secColour)
      }

.signInatag {
  display: flex;
  color: var(--primaryColour);
  padding: 23px 16px;
  -webkit-box-shadow: 2px 4px 11px -4px rgba(0,0,0,0.28);
  -moz-box-shadow: 2px 4px 11px -4px rgba(0,0,0,0.28);
  box-shadow: 2px 4px 11px -4px rgba(0,0,0,0.28);
  max-width: 345px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 15px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

  .signInatag:hover {
    color: var(--secColour);
    -webkit-box-shadow: 0px 0px 20px -4px rgba(237,125,59,0.2);
    -moz-box-shadow: 0px 0px 20px -4px rgba(237,125,59,0.2);
    box-shadow: 0px 0px 20px -4px rgba(237,125,59,0.2)
  }

.loginFormbg {
  width: 50%;
  height: 100%;
  background-color: var(--primaryColour);
  background-image: url("../images/loginbg.png");
  background-repeat: no-repeat;
  background-position: center
}

.loginFormWrapp {
  max-width: 345px;
  margin: 0 auto
}

.inputWrapr {
  margin-bottom: 16px
}

  .inputWrapr input {
    width: 100%;
    height: 56px;
    font-size: 16px;
    color: #808080;
    border: 1px solid var(--primaryColour);
    padding: 0px 24px
  }

.sbmtbtn {
  background-color: var(--primaryColour);
  border: none;
  font-size: 16px;
  color: #FAFAFA;
  width: 100%;
  padding: 17px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  cursor: pointer
}

  .sbmtbtn:hover {
    background-color: var(--secColour)
  }

@media (max-width: 1199px) {
  .loginForm {
    width: 100%
  }
}

@media (max-width: 768px) {
  .loginForm {
    padding: 15px
  }
}

.contact_section {
  height: calc(100vh - 69px);
  background-color: #F5F6FA;
  padding: 24px 0px;
  display: flex;
  align-items: center
}

.contactWrapper {
  display: flex;
  border-radius: 8px;
  overflow: hidden
}

.contactSidebar {
  background-color: var(--primaryColour);
  padding: 46px 40px 32px;
  max-width: 422px;
  width: 100%
}

  .contactSidebar p {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 26px;
    margin: 20px 0px 65px
  }

.cmnHead {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
  position: relative;
  padding-bottom: 8px
}

  .cmnHead::after {
    position: absolute;
    content: "";
    width: 75px;
    height: 2px;
    background-color: var(--secColour);
    bottom: 0;
    left: 0
  }

.callatag {
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 50px;
  display: flex;
  align-items: center
}

  .callatag svg {
    margin-right: 8px
  }

  .callatag:hover {
    color: #FFFFFF
  }

.socialMedia {
  display: flex
}

  .socialMedia a {
    margin-right: 13px;
    opacity: 0.5;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s
  }

    .socialMedia a:hover {
      opacity: 1
    }

.contactFormWrapper {
  background-color: #fff;
  width: 100%;
  padding: 46px 40px 32px
}

.contactInput {
  margin-bottom: 48px
}

  .contactInput label {
    font-size: 14px;
    color: #434343;
    font-weight: 500;
    display: block
  }

  .contactInput input, .contactInput textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #808080;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
    resize: none
  }

.sendbtn {
  background-color: transparent;
  font-size: 16px;
  color: var(--secColour);
  border: 1px solid var(--secColour);
  padding: 15px 24px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  cursor: pointer
}

  .sendbtn:hover {
    background-color: var(--secColour);
    color: #fff
  }

@media (max-width: 768px) {
  .contactWrapper {
    flex-direction: column
  }

  .contact_section {
    height: auto
  }

  .contactSidebar {
    max-width: inherit
  }
}

@media (max-width: 575px) {
  .contactSidebar, .contactFormWrapper {
    padding: 30px 15px
  }
}

.widgetBody {
  padding: 24px 0;
  background-color: #f5f6fa
}

@media (max-width: 991px) {
  .widgetBody {
    padding: 24px 0 60px 0
  }
}

@media (max-width: 480px) {
  .widgetBody {
    background-color: #fff
  }
}

.widgetBody .jobdetails {
  padding-top: 50px;
  padding-bottom: 50px
}

@media (max-width: 767px) {
  .widgetBody .jobdetails {
    padding-top: 20px;
    padding-bottom: 20px
  }
}

.widgetBody .jobdetails h1 {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: #2d2d2d
}

@media (max-width: 991px) {
  .widgetBody .jobdetails h1 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .widgetBody .jobdetails h1 {
    font-size: 13.5px
  }
}

.widgetBody .jobdetails p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #2d2d2d;
  line-height: 26px;
  margin-top: 30px
}

@media (max-width: 767px) {
  .widgetBody .jobdetails p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .widgetBody .jobdetails p {
    margin-top: 20px
  }
}

.widgetBody .jobdetails ul {
  list-style: none;
  padding-left: 20px
}

  .widgetBody .jobdetails ul li {
    margin-top: 30px;
    position: relative;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    line-height: 26px
  }

@media (max-width: 767px) {
  .widgetBody .jobdetails ul li {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetBody .jobdetails ul li:before {
  content: " ";
  width: 9px;
  left: -20px;
  height: 9px;
  position: absolute;
  background-color: #527383;
  top: 10px;
  border-radius: 50%
}

@media (max-width: 767px) {
  .widgetBody .jobdetails ul li:before {
    width: 7px;
    height: 7px
  }
}

@media (max-width: 767px) {
  .widgetBody .jobdetails ul li {
    margin-top: 20px
  }
}

.widgetBody .jobdetails .detailBtns {
  margin-top: 30px;
  display: flex;
  justify-content: center
}

  .widgetBody .jobdetails .detailBtns .jobComplete {
    width: 180px;
    height: 40px;
    border: 1px solid #f3f3f3;
    background-color: #fafafa;
    border-radius: 4px;
    color: #315263;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    margin-right: 15px;
    transition: all 0.4s
  }

@media (max-width: 767px) {
  .widgetBody .jobdetails .detailBtns .jobComplete {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetBody .jobdetails .detailBtns .jobComplete:hover {
  border: 1px solid #315263;
  background-color: #315263;
  border-radius: 4px;
  color: #fff
}

.widgetBody .jobdetails .detailBtns .jobApply {
  width: 155px;
  height: 40px;
  border: 1px solid #707070;
  background-color: #315263;
  border-radius: 4px;
  color: #fff;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  transition: all 0.4s
}

@media (max-width: 767px) {
  .widgetBody .jobdetails .detailBtns .jobApply {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetBody .jobdetails .detailBtns .jobApply:hover {
  border: 1px solid #f3f3f3;
  background-color: #fafafa;
  border-radius: 4px;
  color: #315263
}

.widgetCard {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 28px 24px 24px 24px
}

@media (max-width: 991px) {
  .widgetCard {
    padding: 25px 15px 15px 15px
  }
}

@media (max-width: 480px) {
  .widgetCard {
    padding: 0 0 15px 0
  }
}

.widgetCard .cardTitle {
  position: relative;
  color: var(--text43)
}

  .widgetCard .cardTitle::after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: "";
    width: 72px;
    height: 2px;
    background-color: var(--primaryColour)
  }

  .widgetCard .cardTitle h3 {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 18px;
    color: var(--text43);
    padding-bottom: 10px
  }

@media (max-width: 991px) {
  .widgetCard .cardTitle h3 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .widgetCard .cardTitle h3 {
    font-size: 13.5px
  }
}

@media (max-width: 480px) {
  .widgetCard .cardTitle {
    margin-bottom: 10px
  }
}

.widgetCard.profileBannerRow {
  overflow: hidden
}

.pCard1 {
  display: flex
}

@media (max-width: 600px) {
  .pCard1 {
    flex-direction: column;
    align-items: center;
    text-align: center
  }
}

@media (max-width: 600px) {
  .pCard1 .profileImg {
    width: 130px;
    height: 130px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden
  }
}

.pCard1 .profileImg img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

.pCard1 .profileContent {
  padding-top: 18px;
  padding-left: 24px;
  flex: 1
}

@media (max-width: 600px) {
  .pCard1 .profileContent {
    padding-left: 0
  }
}

.pCard1 .profileContent .nameLabel {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--text2d);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 991px) {
  .pCard1 .profileContent .nameLabel {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .pCard1 .profileContent .nameLabel {
    font-size: 13.5px
  }
}

.pCard1 .profileContent .dateLabel {
  display: flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .pCard1 .profileContent .dateLabel {
    font-size: 12px;
    font-size: 13px
  }
}

.pCard1 .profileContent .dateLabel svg {
  margin-right: 5px
}

.pCard1 .profileContent .dateLabel span {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .pCard1 .profileContent .dateLabel span {
    font-size: 12px;
    font-size: 13px
  }
}

.pCard1 .profileContent .viewBtn {
  color: #fff;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 40px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .pCard1 .profileContent .viewBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 600px) {
  .pCard1 .profileContent .viewBtn {
    margin: 0 auto
  }
}

.pCard1 .profileContent .viewBtn:hover {
  color: #fff;
  background-color: var(--primaryDarkColour)
}

.pCard2 .blockTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--text43);
  margin-bottom: 15px
}

@media (max-width: 991px) {
  .pCard2 .blockTitle {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .pCard2 .blockTitle {
    font-size: 13.5px
  }
}

.pCard2 .statusBarxCol {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-left: -5px;
  margin-right: -5px
}

  .pCard2 .statusBarxCol .statusList {
    margin: 0 5px;
    height: 4px;
    width: 100%;
    background-color: #ebebfd;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

    .pCard2 .statusBarxCol .statusList.filled {
      background-color: #527383
    }

.pCard2 .slideElementRow {
  position: relative
}

  .pCard2 .slideElementRow .slideElementList {
    width: 100%;
    padding: 15px 0 0 0
  }

    .pCard2 .slideElementRow .slideElementList .inputRow {
      position: relative;
      min-height: 63px
    }

      .pCard2 .slideElementRow .slideElementList .inputRow .elementInput {
        padding: 0 10px;
        width: 100%;
        height: 56px;
        border: solid 1px #f5f6fa;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px
      }

      .pCard2 .slideElementRow .slideElementList .inputRow .elementText {
        padding: 15px 10px;
        width: 100%;
        height: 56px;
        border: solid 1px #f5f6fa;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        resize: none
      }

      .pCard2 .slideElementRow .slideElementList .inputRow .validateText {
        position: absolute;
        right: 0;
        color: red;
        font-family: var(--primaryfont);
        font-weight: var(--regular);
        font-size: 12px
      }

@media (max-width: 767px) {
  .pCard2 .slideElementRow .slideElementList .inputRow .validateText {
    font-size: 9px;
    font-size: 12px
  }
}

.pCard2 .slideElementRow .slideElementList .formSubmit {
  outline: none !important;
  cursor: pointer;
  border: none;
  width: 115px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .pCard2 .slideElementRow .slideElementList .formSubmit {
    font-size: 10.5px;
    font-size: 12px
  }
}

.pCard2 .slideElementRow .slideElementList .formSubmit:hover {
  background-color: var(--primaryDarkColour)
}

.pCard2 .slideElementRow .arrowNavRow {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0
}

  .pCard2 .slideElementRow .arrowNavRow span {
    cursor: pointer;
    width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    color: #808080;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 12px
  }

@media (max-width: 767px) {
  .pCard2 .slideElementRow .arrowNavRow span {
    font-size: 9px;
    font-size: 12px
  }
}

.pCard2 .slideElementRow .arrowNavRow span svg line {
  stroke: #808080;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

.pCard2 .slideElementRow .arrowNavRow span .ripple {
  background: rgba(82,115,131,0.4)
}

.pCard2 .slideElementRow .arrowNavRow .prev svg {
  margin-right: 5px
}

.pCard2 .slideElementRow .arrowNavRow .next {
  padding: 0 10px;
  justify-content: flex-end
}

  .pCard2 .slideElementRow .arrowNavRow .next svg {
    margin-left: 5px
  }

.notificationGridRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px
}

@media (max-width: 767px) {
  .notificationGridRow {
    grid-column-gap: 5px
  }
}

@media (max-width: 480px) {
  .notificationGridRow {
    grid-template-columns: 1fr
  }
}

.notificationGridRow .notificationGridList {
  padding: 15px;
  grid-column-gap: 15px;
  display: grid;
  grid-template-columns: 262px 1fr;
  background-color: #f5f6fa;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-top: 15px
}

@media (max-width: 1199px) {
  .notificationGridRow .notificationGridList {
    grid-template-columns: 1fr
  }
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList {
    display: flex;
    margin-top: 5px;
    padding: 10px;
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .notificationGridRow .notificationGridList {
    padding: 10px;
    margin-bottom: 15px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px
  }
}

.notificationGridRow .notificationGridList .imageWidget {
  flex: 262px
}

@media (max-width: 1199px) {
  .notificationGridRow .notificationGridList .imageWidget {
    margin-bottom: 15px
  }
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList .imageWidget {
    flex: inherit;
    height: fit-content
  }
}

@media (max-width: 480px) {
  .notificationGridRow .notificationGridList .imageWidget img {
    width: 100%
  }
}

.notificationGridRow .notificationGridList .contentWidget h4 {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList .contentWidget h4 {
    font-size: 12px;
    font-size: 13px
  }
}

.notificationGridRow .notificationGridList .contentWidget .date {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #808080
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList .contentWidget .date {
    font-size: 10.5px;
    font-size: 12px
  }
}

.notificationGridRow .notificationGridList .contentWidget .date svg {
  margin-right: 12px
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList .contentWidget .date svg {
    margin-right: 5px
  }
}

.notificationGridRow .notificationGridList .contentWidget p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .notificationGridRow .notificationGridList .contentWidget p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.notificationBtn {
  margin: 0 auto;
  color: #fff;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 40px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .notificationBtn {
    font-size: 12px;
    font-size: 13px
  }
}

.notificationBtn:hover {
  color: #fff;
  background-color: var(--secColour)
}

.widgetSheduleRow {
  display: grid;
  grid-template-columns: 1fr 390px;
  grid-column-gap: 15px
}

@media (max-width: 1199px) {
  .widgetSheduleRow {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0
  }
}

@media (max-width: 767px) {
  .widgetSheduleRow .owl-nav {
    display: none !important
  }
}

@media (max-width: 1199px) {
  .widgetSheduleRow .listHolder {
    grid-column: span 2
  }
}

.widgetSheduleRow .listHolder .widgetList {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #f5f6fa;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-top: 8px
}

@media (max-width: 767px) {
  .widgetSheduleRow .listHolder .widgetList {
    grid-template-columns: 1fr 1fr;
    padding: 5px
  }
}

.widgetSheduleRow .listHolder .widgetList .listItems {
  display: flex;
  align-items: center
}

@media (max-width: 767px) {
  .widgetSheduleRow .listHolder .widgetList .listItems:first-child {
    grid-column: span 3;
    margin-bottom: 10px
  }
}

.widgetSheduleRow .listHolder .widgetList .lIcon img {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
  border: solid 2px #fff
}

.widgetSheduleRow .listHolder .widgetList .lTitle {
  padding-left: 12px
}

.widgetSheduleRow .listHolder .widgetList .lDatd {
  white-space: nowrap;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43);
  display: flex;
  align-items: center;
  margin: 0 auto
}

@media (max-width: 767px) {
  .widgetSheduleRow .listHolder .widgetList .lDatd {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .widgetSheduleRow .listHolder .widgetList .lDatd {
    margin: 0;
    font-size: 10px
  }
}

.widgetSheduleRow .listHolder .widgetList .lDatd svg {
  margin-right: 5px
}

.widgetSheduleRow .listHolder .widgetList .lStatus {
  margin-left: auto
}

.widgetSheduleRow .carosalHolder {
  padding-top: 8px
}

@media (max-width: 1199px) {
  .widgetSheduleRow .carosalHolder {
    grid-column: span 2;
    max-width: 400px
  }
}

.widgetSheduleRow .carosalHolder .owl-nav {
  position: absolute;
  width: 100%;
  bottom: 0
}

  .widgetSheduleRow .carosalHolder .owl-nav button {
    position: absolute;
    bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 47px;
    background-color: #84c7c6;
    border: none;
    outline: none !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

    .widgetSheduleRow .carosalHolder .owl-nav button:hover {
      background-color: var(--primaryColour)
    }

    .widgetSheduleRow .carosalHolder .owl-nav button.owl-prev {
      left: 10px
    }

    .widgetSheduleRow .carosalHolder .owl-nav button.owl-next {
      right: 10px
    }

.widgetSheduleRow .carosalHolder .owl-dots {
  display: none
}

.statusLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  min-width: 155px;
  height: 35px;
  padding: 0 15px 0 40px;
  display: inline-flex;
  align-items: center;
  position: relative;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px
}

@media (max-width: 767px) {
  .statusLabel {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .statusLabel {
    min-width: 115px;
    padding: 0 8px 0 25px;
    font-size: 8px;
    height: 28px;
    min-width: auto
  }
}

.statusLabel::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

@media (max-width: 767px) {
  .statusLabel::before {
    left: 8px
  }
}

.statusLabel.completed {
  color: #0ade6d;
  background-color: #ddf4ec
}

  .statusLabel.completed::before {
    background-color: #0ade6d
  }

.statusLabel.ongoing {
  color: #3c42ed;
  background-color: #e2e3f9
}

  .statusLabel.ongoing::before {
    background-color: #3c42ed
  }

.statusLabel.upcoming {
  color: #ed3c3c;
  background-color: #f4e3e7
}

  .statusLabel.upcoming::before {
    background-color: #ed3c3c
  }

.widgetCourseDetailsRow {
  display: grid;
  grid-template-columns: 1fr 390px;
  grid-column-gap: 15px
}

@media (max-width: 1199px) {
  .widgetCourseDetailsRow {
    grid-template-columns: 1fr;
    grid-column-gap: 0
  }
}

.widgetCourseDetailsRow .courseWidgetList {
  padding: 30px 20px 20px 20px;
  background-color: #f5f6fa;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

@media (max-width: 1199px) {
  .widgetCourseDetailsRow .courseWidgetList {
    margin-bottom: 10px
  }
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList {
    padding: 0;
    background-color: #fff
  }
}

.widgetCourseDetailsRow .courseWidgetList h4 {
  text-transform: uppercase;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList h4 {
    font-size: 12px;
    font-size: 13px
  }
}

.widgetCourseDetailsRow .courseWidgetList p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetCourseDetailsRow .courseWidgetList .authorRow {
  display: flex
}

  .widgetCourseDetailsRow .courseWidgetList .authorRow .authorDetails {
    padding-left: 8px
  }

    .widgetCourseDetailsRow .courseWidgetList .authorRow .authorDetails .auName {
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 16px;
      color: var(--text43)
    }

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList .authorRow .authorDetails .auName {
    font-size: 12px;
    font-size: 13px
  }
}

.widgetCourseDetailsRow .courseWidgetList .authorRow .authorDetails .auDesignation {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: #808080
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList .authorRow .authorDetails .auDesignation {
    font-size: 9px;
    font-size: 12px
  }
}

.widgetCourseDetailsRow .courseWidgetList .progresHolder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 15px
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList .progresHolder {
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    border-radius: 3px;
    padding: 0px 8px 8px 8px;
    margin-top: 10px
  }
}

.widgetCourseDetailsRow .courseWidgetList .progresHolder .progresList .progresLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: var(--text43);
  margin-bottom: 5px
}

@media (max-width: 767px) {
  .widgetCourseDetailsRow .courseWidgetList .progresHolder .progresList .progresLabel {
    font-size: 9px;
    font-size: 12px
  }
}

.widgetCourseDetailsRow .courseWidgetList .progresHolder .progresList .progress {
  height: 3px
}

  .widgetCourseDetailsRow .courseWidgetList .progresHolder .progresList .progress .progress-bar {
    background-color: var(--primaryColour)
  }

.validateElement {
  position: relative
}

  .validateElement .input-validation-error {
    border: solid 1px red !important
  }

  .validateElement .field-validation-error {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: red;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 10px
  }

@media (max-width: 767px) {
  .validateElement .field-validation-error {
    font-size: 7.5px
  }
}

.baseGridCol2 {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px
}

@media (max-width: 1199px) {
  .baseGridCol2 {
    column-gap: 5px
  }
}

@media (max-width: 991px) {
  .baseGridCol2 {
    display: flex;
    flex-direction: column
  }
}

.baseGridCol2 .baseGridList .defCard {
  padding: 22px;
  width: 100%;
  height: 100%;
  background-color: var(--primaryBg);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px
}

@media (max-width: 1199px) {
  .baseGridCol2 .baseGridList .defCard {
    padding: 14px
  }
}

@media (max-width: 991px) {
  .baseGridCol2 .baseGridList .defCard {
    margin-bottom: 20px
  }
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard {
    padding: 0;
    background-color: #fff
  }
}

.baseGridCol2 .baseGridList .defCard h4 {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43);
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard h4 {
    font-size: 12px;
    font-size: 13px
  }
}

.baseGridCol2 .baseGridList .defCard p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.baseGridCol2 .baseGridList .defCard img {
  max-width: 475px;
  width: 100%
}

.baseGridCol2 .baseGridList .defCard .videoBanner {
  margin-top: 25px
}

  .baseGridCol2 .baseGridList .defCard .videoBanner a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
  }

    .baseGridCol2 .baseGridList .defCard .videoBanner a .playBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      color: #fff;
      z-index: 1
    }

      .baseGridCol2 .baseGridList .defCard .videoBanner a .playBtn img {
        width: 65px;
        height: 65px
      }

    .baseGridCol2 .baseGridList .defCard .videoBanner a .vidBanner {
      position: relative;
      -webkit-transition: opacity 1s, -webkit-transform 1s;
      transition: opacity 1s, transform 1s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      z-index: 0;
      max-width: 100%;
      width: 100%
    }

    .baseGridCol2 .baseGridList .defCard .videoBanner a:hover .vidBanner {
      -webkit-transform: scale3d(1.1, 1.1, 1);
      transform: scale3d(1.1, 1.1, 1)
    }

.baseGridCol2 .baseGridList .defCard .buttonRow {
  margin-top: 16px;
  position: relative;
  display: flex;
  column-gap: 12px;
  -moz-column-gap: 12px;
  -webkit-column-gap: 12px
}

@media (max-width: 1199px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow {
    column-gap: 8px;
    -moz-column-gap: 8px;
    -webkit-column-gap: 8px
  }
}

@media (min-width: 992px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow {
    display: grid;
    grid-template-columns: 110px 1fr 1fr
  }
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow {
    column-gap: 4px;
    -moz-column-gap: 4px;
    -webkit-column-gap: 4px
  }
}

.baseGridCol2 .baseGridList .defCard .buttonRow .templateButton {
  cursor: pointer;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: #fafafa;
  width: auto;
  height: 45px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton {
    font-size: 9px;
    font-size: 12px
  }
}

@media (min-width: 992px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton {
    width: 100%
  }
}

@media (max-width: 767px) {
  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton {
    font-size: 10px;
    height: 38px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
  }
}

.baseGridCol2 .baseGridList .defCard .buttonRow .templateButton:hover {
  box-shadow: -3px 11px 5px -12px rgba(0,0,0,0.35);
  -webkit-box-shadow: -3px 11px 5px -12px rgba(0,0,0,0.35);
  -moz-box-shadow: -3px 11px 5px -12px rgba(0,0,0,0.35)
}

.baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn1 {
  background-color: #ed3c3c
}

  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn1:hover {
    background-color: #d32d2d
  }

.baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn2 {
  background-color: var(--secColour)
}

  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn2:hover {
    background-color: #cc6428
  }

.baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn3 {
  background-color: var(--primaryColour)
}

  .baseGridCol2 .baseGridList .defCard .buttonRow .templateButton.btn3:hover {
    background-color: var(--primaryDarkColour)
  }

.widgetStripCard {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 15px;
  -webkit-box-shadow: 4px 2px 8px -1px rgba(26,23,26,0.3);
  -moz-box-shadow: 4px 2px 8px -1px rgba(26,23,26,0.3);
  box-shadow: 4px 2px 8px -1px rgba(26,23,26,0.3)
}

@media (max-width: 991px) {
  .widgetStripCard {
    padding: 25px 15px 15px 15px
  }
}

@media (max-width: 480px) {
  .widgetStripCard {
    padding: 15px
  }
}

.bg-purple {
  background-color: var(--purple);
  display: grid;
  grid-template-columns: 10% 1fr 35%;
  align-items: center
}

@media (max-width: 991px) {
  .bg-purple {
    grid-template-columns: 9% 1fr 43%
  }
}

@media (max-width: 768px) {
  .bg-purple {
    grid-template-columns: 15% 1fr
  }
}

@media (max-width: 480px) {
  .bg-purple .stripIcon {
    margin-bottom: auto
  }
}

.bg-purple .stripText {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text2d);
  line-height: 26px
}

@media (max-width: 767px) {
  .bg-purple .stripText {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .bg-purple .stripText {
    font-size: 12px;
    line-height: 22px;
    margin-left: 15px
  }
}

.bg-purple .stripBtn {
  margin-left: auto
}

@media (max-width: 768px) {
  .bg-purple .stripBtn {
    margin: 15px auto auto;
    display: flex
  }
}

@media (max-width: 480px) {
  .bg-purple .stripBtn {
    display: flex;
    justify-content: space-between
  }
}

.bg-purple .stripBtn .completeBtn {
  height: 36px;
  border-radius: 4px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--primaryDarkColour);
  background-color: var(--white);
  margin-right: 15px;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .bg-purple .stripBtn .completeBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (min-width: 1200px) {
  .bg-purple .stripBtn .completeBtn {
    width: 180px
  }
}

@media (max-width: 1199px) {
  .bg-purple .stripBtn .completeBtn {
    width: 155px;
    font-size: 13px
  }
}

@media (max-width: 480px) {
  .bg-purple .stripBtn .completeBtn {
    width: 148px;
    margin-right: 6px
  }
}

.bg-purple .stripBtn .completeBtn:hover {
  background-color: var(--primaryDarkColour);
  color: var(--white)
}

.bg-purple .stripBtn .viewDtlBtn {
  height: 36px;
  border-radius: 4px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--white);
  background-color: var(--primaryDarkColour);
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .bg-purple .stripBtn .viewDtlBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (min-width: 1200px) {
  .bg-purple .stripBtn .viewDtlBtn {
    width: 155px
  }
}

@media (max-width: 1199px) {
  .bg-purple .stripBtn .viewDtlBtn {
    width: 135px;
    font-size: 13px
  }
}

@media (max-width: 480px) {
  .bg-purple .stripBtn .viewDtlBtn {
    width: 150px;
    margin-left: 3px
  }
}

@media (max-width: 345px) {
  .bg-purple .stripBtn .viewDtlBtn {
    width: 105px
  }
}

.bg-purple .stripBtn .viewDtlBtn:hover {
  background-color: var(--white);
  color: var(--primaryDarkColour)
}

.accordstatusLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  min-width: 155px;
  height: 35px;
  padding: 0 15px 0 40px;
  display: inline-flex;
  align-items: center;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

@media (max-width: 767px) {
  .accordstatusLabel {
    min-width: 115px;
    padding: 0 8px 0 25px;
    font-size: 8px;
    height: 28px;
    min-width: auto
  }
}

.accordstatusLabel::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

@media (max-width: 767px) {
  .accordstatusLabel::before {
    left: 8px
  }
}

.accordstatusLabel.completed {
  color: #0ade6d;
  background-color: #ddf4ec
}

  .accordstatusLabel.completed::before {
    background-color: #0ade6d
  }

@media (max-width: 1199px) {
  .accordionDashboard {
    grid-column: span 2
  }
}

.accordionDashboard .widgetListAccordion {
  margin-top: 25px;
  padding: 25px 15px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  background-color: #f5f6fa;
  border-color: #f5f6fa;
  border-radius: 2px
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion {
    padding: 15px 10px
  }
}

@media (max-width: 680px) {
  .accordionDashboard .widgetListAccordion {
    padding: 8px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead {
  display: grid;
  background-color: #f5f6fa;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-bottom: 25px
}

@media (min-width: 1200px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead {
    grid-template-columns: 1fr 85px 1fr 1fr 1fr 100px
  }
}

@media (max-width: 1199px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead {
    grid-template-columns: 1fr 85px 1fr 1fr 1fr 40px
  }
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead {
    display: flex;
    flex-wrap: wrap;
    margin: 0
  }
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead {
    padding: 0
  }
}

@media (max-width: 480px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead {
    margin: 0 5px 5px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .listItems {
  display: flex;
  align-items: center
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems {
    padding: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 8px
  }
}

@media (max-width: 680px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems {
    flex: 45%;
    margin-bottom: 7px
  }
}

@media (max-width: 680px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems.feeL {
    order: 1
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .listItems .feeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: var(--primaryColour);
  width: 85px;
  height: 38px;
  color: #fff;
  border: solid 1px var(--primaryColour);
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems .feeBtn {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems .feeBtn {
    width: 100%
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .listItems .feeBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .listItems.name {
    flex: 100%
  }
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead {
    position: absolute;
    right: 8px;
    top: 22px
  }
}

@media (max-width: 480px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead {
    right: 10px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead #acminus {
  width: 40px;
  height: 40px;
  padding: 6px;
  border: 1px solid #315263;
  background-color: #315263;
  border-radius: 50%;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

@media (max-width: 480px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead #acminus {
    width: 30px;
    height: 30px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead #acplus {
  width: 40px;
  height: 40px;
  padding: 6px;
  border: 1px solid #315263;
  background-color: #fff;
  border-radius: 50%;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none
}

@media (max-width: 480px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead #acplus {
    width: 30px;
    height: 30px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead:active #acminus {
  display: none
}

.accordionDashboard .widgetListAccordion .accordionMainHead .accordionControlHead:active #acplus {
  display: block
}

.accordionDashboard .widgetListAccordion .accordionMainHead .lIcon img {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
  border: solid 2px #fff
}

.accordionDashboard .widgetListAccordion .accordionMainHead .accordListCap {
  padding-left: 15px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d);
  margin-bottom: 5px
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordListCap {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .accordListCap {
    padding-left: 0;
    margin-bottom: 0
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .lTitle {
  padding-left: 15px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lTitle {
    font-size: 12px;
    font-size: 13px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .lDatd {
  white-space: nowrap;
  display: flex;
  align-items: center
}

@media (min-width: 992px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lDatd {
    margin: 0 auto
  }
}

@media (max-width: 991px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lDatd {
    width: 100%;
    padding: 5px;
    background-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .lDatd .dateEnrolled {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43);
  display: flex;
  align-items: center;
  padding-left: 15px
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lDatd .dateEnrolled {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lDatd .dateEnrolled {
    margin: 0;
    padding-left: 0;
    font-size: 10px
  }
}

.accordionDashboard .widgetListAccordion .accordionMainHead .lDatd svg {
  margin-right: 5px;
  background: white;
  padding: 8px;
  width: 40px;
  height: 40px
}

@media (max-width: 680px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lDatd svg {
    padding: 5px;
    width: 30px;
    height: 30px
  }
}

@media (min-width: 1200px) {
  .accordionDashboard .widgetListAccordion .accordionMainHead .lStatus {
    margin-left: auto
  }
}

.accordionDashboard .accordionBody {
  padding: 25px 20px;
  background-color: #fff;
  border-radius: 2px;
  overflow: hidden
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody {
    padding: 5px;
    margin: 5px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead {
  background-color: #f5f6fa
}

@media (min-width: 1200px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead {
    padding: 30px
  }
}

@media (max-width: 1199px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead {
    padding: 20px
  }
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead {
    position: relative
  }
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead {
    padding: 10px;
    margin: 5px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .listStyle2Cont {
  display: grid
}

@media (min-width: 1200px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listStyle2Cont {
    grid-template-columns: 1fr 1fr 1fr 255px
  }
}

@media (max-width: 1199px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listStyle2Cont {
    grid-template-columns: 1fr 1fr 1fr 200px
  }
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listStyle2Cont {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 767px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listStyle2Cont {
    grid-template-columns: 1fr
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .listItems {
  display: flex;
  align-items: center
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listItems {
    margin-top: 10px;
    margin-bottom: 10px
  }
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .listItems {
    margin-bottom: 15px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .lTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .lTitle {
    font-size: 12px;
    font-size: 13px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .lDatd {
  white-space: nowrap;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43);
  display: flex;
  align-items: center
}

@media (max-width: 767px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .lDatd {
    font-size: 10.5px;
    font-size: 12px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .lDatd svg {
  margin-right: 10px
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyControl {
  margin-left: auto;
  cursor: pointer;
  background-color: #fff;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  align-items: center;
  display: flex;
  justify-content: center
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyControl {
    position: absolute;
    right: 8px
  }
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyControl {
    right: 10px;
    width: 25px;
    height: 25px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent {
  padding: 25px 25px 15px;
  margin-top: 10px;
  border-radius: 2px;
  margin-top: 25px;
  background-color: white
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent {
    padding: 10px
  }
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent {
    margin-top: 15px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 {
  display: grid;
  padding: 35px 25px;
  grid-template-columns: 1fr 1fr;
  background: #f5f6fa;
  margin-top: 15px;
  border-radius: 2px
}

@media (max-width: 991px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 {
    padding: 10px
  }
}

@media (max-width: 480px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 {
    grid-template-columns: 1fr
  }
}

@media (min-width: 992px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .listMargin {
    margin-left: auto
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverble {
  white-space: nowrap;
  color: var(--primaryDarkColour);
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  display: flex;
  align-items: center
}

@media (max-width: 767px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverble {
    font-size: 10.5px;
    font-size: 12px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverble svg {
  margin-right: 20px
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverbleSecond {
  white-space: nowrap;
  color: var(--primaryDarkColour);
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  border-radius: 2px;
  padding: 30px 25px
}

@media (max-width: 767px) {
  .accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverbleSecond {
    font-size: 10.5px;
    font-size: 12px
  }
}

.accordionDashboard .accordionBody .accordionBodyInnerHead .accordionBodyInnerContent .innerContentStyle2 .lDeliverbleSecond svg {
  margin-right: 20px
}

.accordionDashboard .accordionBody.open {
  display: block
}

.mrgTop-10 {
  margin-top: 10px
}

.innerContentStyle21 {
  display: grid;
  padding: 15px 0 0;
  grid-template-columns: 1fr 1fr
}

@media (min-width: 1200px) {
  .innerContentStyle21 {
    grid-template-columns: 1fr 1fr 280px
  }
}

@media (max-width: 991px) {
  .innerContentStyle21 {
    padding: 10px
  }
}

@media (max-width: 767px) {
  .innerContentStyle21 {
    padding: 0px;
    grid-template-columns: 1fr
  }
}

.innerContentStyle21 .listMargin {
  margin-left: auto
}

.innerContentStyle21 .lDeliverble {
  white-space: nowrap;
  color: var(--primaryDarkColour);
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #f3f3f3;
  border-radius: 4px;
  padding: 25px;
  margin-right: 15px
}

@media (max-width: 767px) {
  .innerContentStyle21 .lDeliverble {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (min-width: 768px) {
  .innerContentStyle21 .lDeliverble {
    padding: 8px
  }
}

@media (max-width: 767px) {
  .innerContentStyle21 .lDeliverble {
    padding: 8px
  }
}

.innerContentStyle21 .lDeliverble svg {
  margin-right: 20px
}

@media (max-width: 480px) {
  .innerContentStyle21 .lDeliverble svg {
    width: 18px;
    height: 18px;
    margin-right: 5px
  }
}

.innerContentStyle21 .lDeliverbleSecond {
  white-space: nowrap;
  color: var(--primaryDarkColour);
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px
}

@media (max-width: 767px) {
  .innerContentStyle21 .lDeliverbleSecond {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (min-width: 768px) {
  .innerContentStyle21 .lDeliverbleSecond {
    padding: 8px
  }
}

@media (max-width: 767px) {
  .innerContentStyle21 .lDeliverbleSecond {
    padding: 8px
  }
}

.innerContentStyle21 .lDeliverbleSecond svg {
  margin-right: 20px
}

@media (max-width: 480px) {
  .innerContentStyle21 .lDeliverbleSecond svg {
    width: 18px;
    height: 18px;
    margin-right: 5px
  }
}

.aiBanner {
  background-color: #003955;
  border-radius: 8px;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative
}

  .aiBanner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.35);
    display: none
  }

@media (max-width: 991px) {
  .aiBanner::after {
    display: block
  }
}

.aiBanner .textARea {
  padding: 47px 42px 47px 42px;
  max-width: 800px;
  width: 100%;
  z-index: 1;
  position: relative
}

@media (max-width: 767px) {
  .aiBanner .textARea {
    padding: 30px 20px
  }
}

.aiBanner .textARea .subTitle {
  color: #FAFAFA;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .aiBanner .textARea .subTitle {
    font-size: 12px;
    font-size: 13px
  }
}

.aiBanner .textARea h2 {
  font-family: var(--primaryfont);
  font-weight: var(--bold);
  font-size: 32px;
  line-height: 48px;
  color: #FAFAFA;
  margin-bottom: 15px;
  max-width: 472px;
  width: 100%
}

@media (max-width: 767px) {
  .aiBanner .textARea h2 {
    font-size: 24px
  }
}

@media (max-width: 767px) {
  .aiBanner .textARea h2 {
    line-height: 35px;
    margin-bottom: 10px
  }
}

.aiBanner .textARea h2 span {
  color: #ED7C3C
}

.aiBanner .textARea p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 18px;
  line-height: 32px;
  color: #FAFAFA;
  margin-bottom: 25px
}

@media (max-width: 991px) {
  .aiBanner .textARea p {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .aiBanner .textARea p {
    font-size: 13.5px
  }
}

@media (max-width: 767px) {
  .aiBanner .textARea p {
    margin-bottom: 10px;
    line-height: 22px
  }
}

.aiBanner .textARea .viewBtn {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  line-height: 18px;
  color: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  border-radius: 2px;
  background-color: #ED7C3C;
  transition: ease-in-out 0.4s;
  gap: 16px;
  column-gap: 16px
}

@media (max-width: 767px) {
  .aiBanner .textARea .viewBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

.aiBanner .textARea .viewBtn:hover {
  background-color: #cc6428
}

.notification_section {
  padding: 24px;
  background-color: #F5F6FA
}

.notificDetWrapper {
  padding: 53px 22px;
  background-color: #fff;
  border-radius: 8px
}

  .notificDetWrapper h3 {
    font-size: 18px;
    line-height: 32px;
    font-weight: 500
  }

.timeago {
  font-size: 14px;
  color: #808080;
  margin: 18px 0px 34px;
  display: flex;
  align-items: center
}

  .timeago svg {
    margin-right: 10px
  }

.notDetailsWrapInner p {
  font-size: 14px;
  line-height: 26px;
  margin-top: 24px
}

  .notDetailsWrapInner p:last-child {
    margin-bottom: 24px
  }

.cmnUl {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 32px
}

  .cmnUl li {
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 24px;
    position: relative;
    padding-left: 18px
  }

    .cmnUl li:before {
      position: absolute;
      content: "";
      width: 9px;
      height: 9px;
      background-color: var(--primaryColour);
      left: 0;
      top: 9px;
      border-radius: 50%
    }

.extLinks {
  padding: 19px 24px;
  border: 1px solid #F5F6FA;
  margin-bottom: 8px
}

  .extLinks a {
    font-size: 16px;
    color: #2D2D2D;
    display: block;
    margin-top: 24px;
    word-break: break-all
  }

  .extLinks h4 {
    position: relative;
    font-size: 18px;
    color: var(--primaryColour);
    font-weight: 500
  }

    .extLinks h4:after {
      width: 100%;
      position: absolute;
      content: "";
      left: 0;
      bottom: 04px;
      height: 1px;
      border-bottom: 1px solid #F5F6FA;
      z-index: 5
    }

    .extLinks h4 span {
      background-color: #fff;
      position: relative;
      z-index: 6;
      padding-right: 3px
    }

.notificatn_section {
  padding: 24px 0px;
  background-color: #F5F6FA
}

.cmnHeadTwo {
  color: #2d2d2d
}

  .cmnHeadTwo::after {
    background-color: var(--primaryColour)
  }

.notificationWrapper {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px
}

.searchWrapper {
  padding: 10px;
  border: 1px solid #F5F6FA;
  margin: 24px 0px 0px;
  display: flex
}

  .searchWrapper input {
    border: none;
    width: 100%;
    font-size: 16px;
    color: #808080
  }

  .searchWrapper .searchBtn {
    background-color: var(--primaryColour);
    font-size: 16px;
    color: #FFFFFF;
    border: none;
    padding: 12px 52px;
    cursor: pointer;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s
  }

    .searchWrapper .searchBtn:hover {
      background-color: var(--secColour)
    }

.cust_pagination {
  justify-content: center;
  margin-top: 20px
}

  .cust_pagination li a {
    color: #808080;
    font-size: 14px;
    padding: 15px 17px;
    border: 1px solid #F5F6FA;
    margin: 0px 4px
  }

@media (max-width: 768px) {
  .notificDetWrapper {
    padding: 20px 15px
  }

    .notificDetWrapper h3 {
      font-size: 16px;
      line-height: 26px
    }

  .notification_section {
    padding: 20px 0px
  }
}

@media (max-width: 575px) {
  .notificationWrapper {
    padding: 20px 10px
  }

  .searchWrapper {
    flex-direction: column
  }

    .searchWrapper .searchBtn {
      margin-top: 20px;
      padding: 8px
    }

  .cust_pagination li a {
    padding: 10px 12px;
    margin: 0px 2px
  }
}

.changeEmail_section {
  padding: 24px 0px;
  background-color: #f5f6fa;
  min-height: calc(100vh - 69px)
}

.changeEmailWRapper {
  display: flex
}

.cEmailSIdebar {
  max-width: 350px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden
}

  .cEmailSIdebar a {
    display: block;
    font-size: 16px;
    color: #434343;
    padding: 39px 24px;
    background-color: #ffffff;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    border-bottom: 1px solid #dddddd
  }

    .cEmailSIdebar a:last-child {
      border: none;
      border-radius: 0px 0px 8px 8px
    }

    .cEmailSIdebar a:hover {
      background-color: #52738396;
      color: #fff
    }

    .cEmailSIdebar a.active {
      background-color: var(--primaryColour);
      color: #fff
    }

.cEmalMainWrap {
  padding: 32px 24px;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  margin-left: 16px
}

  .cEmalMainWrap h3 {
    font-size: 18px;
    font-weight: 500
  }

  .cEmalMainWrap h5 {
    font-size: 16px;
    color: #434343;
    margin: 18px 0px 32px
  }

  .cEmalMainWrap .emailId {
    font-size: 16px;
    padding: 17px 16px;
    background-color: #dddddd
  }

  .cEmalMainWrap .inputDiv {
    margin: 24px 0px;
    position: relative
  }

    .cEmalMainWrap .inputDiv label {
      display: block;
      margin-bottom: 8px;
      color: #808080;
      font-size: 16px
    }

    .cEmalMainWrap .inputDiv .edit {
      position: absolute;
      right: 16px;
      top: 16px;
      font-size: 16px;
      color: var(--secColour);
      text-decoration: underline !important;
      display: flex;
      align-items: center
    }

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv .edit {
    right: 10px
  }
}

.cEmalMainWrap .inputDiv .edit svg {
  margin-right: 4px
}

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv .edit svg {
    margin-right: 0
  }
}

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv .edit .eLabel {
    display: none
  }
}

.cEmalMainWrap .inputDiv input {
  width: 100%;
  height: 52px;
  border: 1px solid #dddddd;
  font-size: 16px;
  padding: 15px;
  color: #808080
}

.cEmalMainWrap .inputDiv p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv p {
    font-size: 12px;
    font-size: 13px
  }
}

.cEmalMainWrap .inputDiv p .timeE {
  color: var(--secColour)
}

.cEmalMainWrap .inputDiv p .resentOtp {
  position: relative;
  overflow: hidden;
  color: var(--secColour);
  text-decoration: underline;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

  .cEmalMainWrap .inputDiv p .resentOtp:hover {
    color: #ff5f00
  }

.cEmalMainWrap .inputDiv.eEmail .inputText {
  padding-right: 105px
}

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv.eEmail .inputText {
    padding-right: 50px
  }
}

.cEmalMainWrap .inputDiv.eEmail .devLinkRow {
  display: flex;
  align-items: center;
  position: absolute;
  right: 75px;
  top: 8px
}

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv.eEmail .devLinkRow {
    right: 28px
  }
}

.cEmalMainWrap .inputDiv.eEmail .devLinkRow .clearDev {
  padding-top: 9px;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #f5f6fa;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  cursor: pointer;
  z-index: 1
}

  .cEmalMainWrap .inputDiv.eEmail .devLinkRow .clearDev:hover {
    background: rgba(82,115,131,0.3)
  }

  .cEmalMainWrap .inputDiv.eEmail .devLinkRow .clearDev .ripple {
    background: rgba(82,115,131,0.6)
  }

.cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus {
  display: flex;
  align-content: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px
}

  .cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus .statusMsg {
    pointer-events: none;
    padding: 7px 12px;
    width: 200px;
    position: absolute;
    right: 0;
    opacity: 0;
    color: #fafafa;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    background-color: var(--primaryColour);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

@media (max-width: 767px) {
  .cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus .statusMsg {
    font-size: 10.5px;
    font-size: 12px
  }
}

.cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus .sIcon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 5px;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

  .cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus .sIcon .ripple {
    background: rgba(237,60,60,0.6)
  }

.cEmalMainWrap .inputDiv.eEmail .devLinkRow .devStatus.open .statusMsg {
  pointer-events: visible;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: translate3d(-35px, 0, 0);
  transform: translate3d(-35px, 0, 0);
  opacity: 1
}

.cEmalMainWrap button {
  width: 100%;
  background-color: var(--secColour);
  padding: 14px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  outline: none
}

  .cEmalMainWrap button:hover {
    background-color: var(--primaryColour)
  }

.cEmalMainWrap .messageWidget {
  margin-top: 24px;
  padding: 14px 20px;
  background-color: #f3f3f3
}

@media (max-width: 767px) {
  .cEmalMainWrap .messageWidget {
    padding: 15px
  }
}

.cEmalMainWrap .messageWidget .msgTitle {
  display: flex;
  align-items: center;
  margin-bottom: 12px
}

  .cEmalMainWrap .messageWidget .msgTitle h3 {
    font-size: 16px;
    font-weight: 500
  }

  .cEmalMainWrap .messageWidget .msgTitle svg {
    margin-right: 10px
  }

.cEmalMainWrap .messageWidget p {
  color: #434343;
  font-size: 14px
}

.cEmalMainWrap .messageWidget .resendBtn {
  font-size: 14px;
  margin-top: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 119px;
  height: 38px;
  color: var(--secColour);
  border: solid 1px var(--secColour);
  background-color: #fafafa;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

  .cEmalMainWrap .messageWidget .resendBtn:hover {
    color: #fafafa;
    background-color: var(--secColour)
  }

@media (max-width: 1199px) {
  .cEmalMainWrap .inputDiv .wait {
    position: static;
    margin-top: 10px;
    display: inline-block
  }
}

@media (max-width: 992px) {
  .changeEmailWRapper {
    flex-direction: column
  }

  .cEmailSIdebar {
    display: flex;
    max-width: initial;
    margin-bottom: 20px
  }

    .cEmailSIdebar a {
      width: 100%;
      padding: 15px;
      border: none;
      font-size: 13px;
      text-align: center
    }

  .cEmalMainWrap {
    margin-left: 0px
  }
}

@media (max-width: 767px) {
  .cEmailSIdebar a {
    display: flex;
    align-items: center;
    padding: 15px 10px
  }
}

@media (max-width: 575px) {
  .cEmailSIdebar a {
    font-size: 12px;
    padding: 15px 5px
  }

  .cEmalMainWrap {
    padding: 20px 10px
  }

    .cEmalMainWrap h5 {
      margin: 15px 0px
    }

    .cEmalMainWrap .emailId {
      padding: 15px 10px
    }

    .cEmalMainWrap .inputDiv input {
      padding: 10px;
      font-size: 14px
    }

  .row.to6px {
    margin-left: -3px;
    margin-right: -3px
  }

    .row.to6px [class^="col-"] {
      padding-right: 3px;
      padding-left: 3px
    }
}

@media (max-width: 991px) {
  .ptofileBanner {
    order: -1
  }
}

.frofileCardRow {
  display: flex
}

@media (max-width: 600px) {
  .frofileCardRow {
    flex-direction: column
  }
}

.frofileCardRow .profileImg {
  width: 160px;
  position: relative;
  cursor: pointer
}

@media (max-width: 600px) {
  .frofileCardRow .profileImg {
    width: 130px;
    height: 130px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto
  }
}

.frofileCardRow .profileImg .iconRow {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: solid 2px #ffffff;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

.frofileCardRow .profileImg .hideBtn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer
}

.frofileCardRow .profileImg:hover .iconRow {
  border-color: var(--primaryColour);
  background-color: var(--primaryColour)
}

.frofileCardRow .profileContent {
  padding-left: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center
}

@media (max-width: 600px) {
  .frofileCardRow .profileContent {
    text-align: center;
    padding-left: 0
  }
}

.frofileCardRow .profileStatus {
  width: 100px;
  display: flex;
  align-items: center
}

@media (max-width: 600px) {
  .frofileCardRow .profileStatus {
    position: absolute;
    right: 5px;
    top: 5px
  }
}

.box {
  display: inline-block
}

.profileStatusBar {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

  .profileStatusBar > .inner {
    text-align: center;
    position: absolute;
    color: var(--primaryColour)
  }

    .profileStatusBar > .inner strong {
      font-family: var(--primaryfont);
      font-weight: var(--semibold);
      font-size: 16px
    }

@media (max-width: 767px) {
  .profileStatusBar > .inner strong {
    font-size: 12px;
    font-size: 13px
  }
}

.profileStatusBar > .inner p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px
}

@media (max-width: 767px) {
  .profileStatusBar > .inner p {
    font-size: 9px;
    font-size: 12px
  }
}

.progress > svg {
  height: 100%;
  display: block
}

.formCardRow .formCardTitle {
  display: flex;
  justify-content: space-between;
  position: relative;
  border-bottom: solid 1px #dddddd;
  padding-bottom: 8px
}

  .formCardRow .formCardTitle h3 {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 18px;
    color: var(--text43)
  }

@media (max-width: 991px) {
  .formCardRow .formCardTitle h3 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .formCardRow .formCardTitle h3 {
    font-size: 13.5px
  }
}

.formCardRow .formCardTitle .editBtn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--secColour);
  text-decoration: underline;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -o-transition: .4s;
  -ms-transition: .4s;
  transition: .4s
}

@media (max-width: 767px) {
  .formCardRow .formCardTitle .editBtn {
    font-size: 12px;
    font-size: 13px
  }
}

.formCardRow .formCardTitle .editBtn svg {
  margin-right: 5px
}

  .formCardRow .formCardTitle .editBtn svg path {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    transition: .4s
  }

.formCardRow .formCardTitle .editBtn .ripple {
  background: rgba(231,125,59,0.4)
}

.formCardRow .formCardTitle .editBtn:hover {
  color: var(--primaryDarkColour)
}

  .formCardRow .formCardTitle .editBtn:hover svg path {
    fill: var(--primaryDarkColour)
  }

.formCardRow .profElementHolder {
  overflow: hidden
}

.formCardRow .elementWrper {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

  .formCardRow .elementWrper .formViewWidget {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s
  }

    .formCardRow .elementWrper .formViewWidget .viewList {
      padding: 8px 0;
      display: grid;
      grid-template-columns: 292px 1fr
    }

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList {
    grid-template-columns: 1fr
  }
}

.formCardRow .elementWrper .formViewWidget .viewList p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList p {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewListCol {
  display: flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewListCol .value {
  padding-left: 10px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol .value {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol .value {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol .value {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol .value {
    padding-left: 0;
    font-weight: bold;
    font-size: 14px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewListCol .mediaIcons {
  padding-left: 11px
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewListCol .mediaIcons {
    padding-left: 0
  }
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo {
  grid-template-columns: 1fr
}

  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .durationSection {
    display: flex;
    justify-content: space-between
  }

  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate {
    opacity: 0;
    display: flex;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    pointer-events: none
  }

    .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .delete-btn {
      height: 38px;
      width: 40px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      text-decoration: none;
      margin-right: 10px;
      border: 1px solid var(--red);
      border-radius: 4px
    }

@media (max-width: 680px) {
  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .delete-btn {
    font-size: 12px;
    border: none;
    width: 38px;
    border-radius: 50%;
    margin-right: 0
  }
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .delete-btn .ripple {
  background: rgba(237,60,60,0.6)
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .edit-btn {
  height: 38px;
  width: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primaryColour);
  text-decoration: none;
  border: 1px solid var(--primaryColour);
  border-radius: 4px
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .edit-btn {
    font-size: 12px;
    border: none;
    width: 38px;
    border-radius: 50%
  }
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .edit-btn .ripple {
  background: rgba(82,115,131,0.6)
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .btnLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .btnLabel {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formViewWidget .viewList.spanTwo .editUpdate .btnLabel {
    display: none
  }
}

.formCardRow .elementWrper .formViewWidget .viewList.spanTwo:hover .editUpdate {
  opacity: 1;
  pointer-events: visible
}

.formCardRow .elementWrper .formViewWidget .viewList .viewTitle {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 18px;
  color: #808080;
  margin-bottom: 15px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewTitle {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewTitle {
    font-size: 13.5px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewCardRow {
  display: flex;
  flex-wrap: wrap
}

  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard {
    margin-top: 5px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 25px 5px 4px;
    height: 40px;
    color: var(--primaryColour);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    background-color: #f5f6fa;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
  }

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard {
    margin-right: 5px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard {
    height: auto
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard .closeIcon {
  border: 1px solid var(--white);
  padding: 10px;
  align-items: center;
  display: flex;
  border-radius: 50px;
  background: var(--white);
  margin-right: 8px;
  cursor: pointer
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard .closeIcon {
    padding: 4px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard .closeIcon:hover {
  background: rgba(82,115,131,0.3);
  transition: ease-in-out 0.6s
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formViewWidget .viewList .viewCardRow .viewCard .closeIcon svg {
    width: 11px !important;
    height: 11px !important
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .durationEducation {
  padding: 0 20px;
  color: #fff;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 38px;
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .durationEducation {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .durationEducation {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList .durationEducation {
    height: 32px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .durationEducation.bgSecondary {
  background-color: var(--secColour)
}

.formCardRow .elementWrper .formViewWidget .viewList .nameEdu {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 18px;
  color: var(--text43)
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .nameEdu {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .nameEdu {
    font-size: 13.5px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .nameEdu {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .nameEdu {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .companyName {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .companyName {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .companyName {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .companyName {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .companyName.semiB {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 16px;
  color: #808080
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .companyName.semiB {
    font-size: 12px;
    font-size: 13px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .placeEdu {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .placeEdu {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .placeEdu {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .placeEdu {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList hr {
  border-color: #dddddd;
  padding: 0;
  margin: 0;
  margin-top: 15px;
  margin-bottom: 10px
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #8ca3af;
  background-color: #f3f3f3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6px 12px 6px 15px;
  margin-top: 10px;
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel {
    padding: 5px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel {
    border-radius: 3px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  display: flex;
  align-items: center
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 12px
  }
}

@media (max-width: 767px) and (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath {
    font-size: 9px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath svg {
  margin-right: 5px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .filePath svg {
    height: 20px;
    width: 20px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn {
  height: 40px;
  width: 125px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn {
    height: 30px;
    width: 32px;
    margin: auto 0;
    border-radius: 50%
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn .ripple {
  background: rgba(82,115,131,0.6)
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn svg {
  margin-right: 5px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn svg {
    margin: 0;
    height: 16px;
    width: 16px
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn svg path {
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn .previewLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn .previewLabel {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn .previewLabel {
    display: none
  }
}

.formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

  .formCardRow .elementWrper .formViewWidget .viewList .fileLabel .previewBtn:hover svg path {
    stroke: #fafafa
  }

.formCardRow .elementWrper .formEditWidget {
  position: relative;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s
}

  .formCardRow .elementWrper .formEditWidget .editList {
    padding: 8px 0;
    display: grid;
    grid-template-columns: 292px 1fr
  }

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList {
    grid-template-columns: 130px 1fr
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList {
    grid-template-columns: 1fr
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editTitle {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 18px;
  color: #808080;
  margin-bottom: 15px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editTitle {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editTitle {
    font-size: 13.5px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol {
  display: flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol {
    font-size: 10.5px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol.labelCol {
  padding-top: 15px;
  display: flex;
  align-items: flex-start
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol.labelCol {
    padding-top: 0;
    margin-bottom: 4px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol.labelCol .eDoted {
  margin-left: auto
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputRow, .formCardRow .elementWrper .formEditWidget .editList .editListCol .textRow, .formCardRow .elementWrper .formEditWidget .editList .editListCol .selectRow {
  padding-left: 16px
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputRow, .formCardRow .elementWrper .formEditWidget .editList .editListCol .textRow, .formCardRow .elementWrper .formEditWidget .editList .editListCol .selectRow {
    margin-left: 0
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputRow .inputElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .textRow .inputElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .selectRow .inputElement {
  padding: 0 14px
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputRow .textElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .textRow .textElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .selectRow .textElement {
  padding: 14px
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputRow .selectElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .textRow .selectElement, .formCardRow .elementWrper .formEditWidget .editList .editListCol .selectRow .selectElement {
  padding: 0 30px 0 12px
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  width: 100%
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder {
    padding-left: 0
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder .mediaUrlList {
  padding-left: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 12px
}

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder .mediaUrlList .mIcon {
    width: 166px;
    display: flex;
    align-items: center
  }

    .formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder .mediaUrlList .mIcon .label {
      padding-left: 12px
    }

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .mediaUrlHolder .mediaUrlList .mIcon .label {
    padding-left: 5px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol.connectColLabel {
  padding-top: 15px
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol.connectColContent span {
  padding-top: 12px
}

  .formCardRow .elementWrper .formEditWidget .editList .editListCol.connectColContent span.label {
    padding-top: 0px
  }

.formCardRow .elementWrper .formEditWidget .editList .editListCol .profileGrid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .profileGrid {
    grid-template-columns: 1fr;
    padding-left: 0
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .profileGrid .profileGridList {
    margin-bottom: 10px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox {
  cursor: pointer;
  padding-left: 16px;
  position: relative;
  display: flex;
  align-items: center
}

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox * {
    box-sizing: border-box;
    user-select: none
  }

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] {
    height: 0;
    width: 0
  }

    .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] + label {
      position: relative;
      display: flex;
      margin: 0.6em 0;
      align-items: center;
      color: #9e9e9e;
      transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1)
    }

      .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] + label > ins {
        position: absolute;
        display: block;
        bottom: 0;
        left: 2em;
        height: 0;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
        transition: height 300ms cubic-bezier(0.4, 0, 0.23, 1)
      }

        .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] + label > ins > i {
          position: absolute;
          bottom: 0;
          font-style: normal;
          color: #4fc3f7
        }

      .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] + label > span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        background: transparent;
        border: 1px solid #9e9e9e;
        border-radius: 2px;
        cursor: pointer;
        transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1)
      }

      .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"] + label:hover > span, .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"]:focus + label > span {
        background: rgba(255,255,255,0.1)
      }

    .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"]:checked + label > ins {
      height: 100%
    }

    .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox input[type="checkbox"]:checked + label > span {
      border: 10px solid var(--primaryColour);
      animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1)
    }

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox span {
    margin-right: 8px
  }

    .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox span:after {
      content: "";
      display: block;
      position: absolute;
      top: 6px;
      left: 7px;
      width: 6px;
      height: 10px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox label {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    color: #808080
  }

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .checkBox label {
    font-size: 12px;
    font-size: 13px
  }
}

@keyframes shrink-bounce {
  0% {
    transform: scale(1)
  }

  33% {
    transform: scale(0.85)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes checkbox-check {
  0% {
    width: 0;
    height: 0;
    border-color: #212121;
    transform: translate3d(0, 0, 0) rotate(45deg)
  }

  33% {
    width: 0.2em;
    height: 0;
    transform: translate3d(0, 0, 0) rotate(45deg)
  }

  100% {
    width: 0.2em;
    height: 0.5em;
    border-color: #212121;
    transform: translate3d(0, -0.5em, 0) rotate(45deg)
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow {
  padding-left: 16px;
  position: relative;
  display: flex;
  align-items: center
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow {
    padding-left: 0
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow {
    display: block
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 52px;
  position: relative;
  background-color: var(--primaryColour)
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton {
    width: 125px;
    height: 40px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton {
    border-radius: 3px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .inputUpload {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 0
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 12px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel {
    font-size: 9px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel svg {
  margin-right: 10px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .uploadButton .buttonLabel svg {
    height: 20px;
    width: 20px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #8ca3af;
  background-color: #f3f3f3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6px 12px 6px 15px;
  margin-left: 10px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel {
    border-radius: 3px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel {
    padding: 5px 5px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel {
    margin-left: 0px;
    margin-top: 10px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  display: flex;
  align-items: center
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 12px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath {
    font-size: 9px;
    font-size: 12px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath svg {
  margin-right: 5px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .filePath svg {
    width: 20px;
    height: 20px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn {
  height: 40px;
  width: 125px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--primaryColour);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn {
    height: 28px;
    width: 28px;
    margin: auto 0;
    border-radius: 50%
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn .ripple {
  background: rgba(82,115,131,0.6)
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn svg {
  margin-right: 5px
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn svg {
    margin-right: 0px;
    width: 13px;
    height: 13px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn svg line {
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn:hover svg line {
    stroke: #fafafa
  }

.formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn .removeLabel {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn .removeLabel {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .formCardRow .elementWrper .formEditWidget .editList .editListCol .inputFileRow .fileLabel .removeBtn .removeLabel {
    display: none
  }
}

.formCardRow .elementWrper .formEditWidget .editList .addSkillRow {
  display: grid;
  grid-template-columns: 1fr 160px;
  grid-column-gap: 16px
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .addSkillRow {
    grid-template-columns: 1fr 50px;
    grid-column-gap: 8px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .addSkillRow .inputRow .inputElement {
  padding: 0 18px;
  width: 100%;
  height: 52px;
  border: solid 1px #dddddd
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .addSkillRow .inputRow .inputElement {
    height: 40px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .addSkillRow .addBtn {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: none;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  outline: none !important
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .addSkillRow .addBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .addSkillRow .addBtn {
    height: 40px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .addSkillRow .addBtn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .addSkillRow .addBtn:hover {
  background-color: var(--primaryColour)
}

.formCardRow .elementWrper .formEditWidget .editList .editCardRow {
  display: flex;
  flex-wrap: wrap
}

  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard {
    margin-top: 5px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 15px 5px 2px;
    height: 40px;
    color: var(--primaryColour);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    background-color: #f5f6fa;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
  }

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard {
    margin-right: 5px
  }
}

@media (max-width: 600px) {
  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard {
    height: auto
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard .closeIcon {
  border: 1px solid var(--white);
  padding: 10px;
  align-items: center;
  display: flex;
  border-radius: 50px;
  background: var(--white);
  margin-right: 8px;
  cursor: pointer
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard .closeIcon {
    padding: 4px
  }
}

.formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard .closeIcon:hover {
  background: rgba(82,115,131,0.3);
  transition: ease-in-out 0.6s
}

@media (max-width: 680px) {
  .formCardRow .elementWrper .formEditWidget .editList .editCardRow .editCard .closeIcon svg {
    width: 11px !important;
    height: 11px !important
  }
}

.formCardRow .elementWrper .formEditWidget .editList.spanTwo {
  grid-template-columns: 1fr
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList.colspan2Sm {
    grid-template-columns: 1fr
  }
}

@media (max-width: 767px) {
  .formCardRow .elementWrper .formEditWidget .editList.colspan2Sm .eDoted {
    display: none
  }
}

.formCardRow .elementWrper .formEditWidget .editList.colspan2Sm .mediaUrlHolder .mediaUrlList {
  padding-left: 0
}

  .formCardRow .elementWrper .formEditWidget .editList.colspan2Sm .mediaUrlHolder .mediaUrlList .inputRow {
    margin-left: 0
  }

.formCardRow .labelCol {
  display: flex
}

@media (max-width: 600px) {
  .formCardRow .labelCol {
    padding-top: 0;
    margin-bottom: 4px;
    color: #98989c !important
  }
}

.formCardRow .labelCol .eDoted {
  margin-left: auto
}

@media (max-width: 600px) {
  .formCardRow .labelCol .eDoted {
    display: none
  }
}

.datNotFound {
  padding: 20px;
  background-color: #fafafa;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px
}

  .datNotFound img {
    margin-bottom: 25px;
    max-width: 100%
  }

  .datNotFound h3 {
    font-family: var(--primaryfont);
    font-weight: var(--bold);
    font-size: 28px;
    color: var(--primaryColour);
    margin-bottom: 18px
  }

@media (max-width: 767px) {
  .datNotFound h3 {
    font-size: 21px
  }
}

.datNotFound p {
  max-width: 900px;
  margin: 0 auto 15px auto;
  color: #6d7e86
}

.datNotFound .addBtn {
  height: 40px;
  padding: 0 20px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--secColour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

@media (max-width: 767px) {
  .datNotFound .addBtn {
    font-size: 12px;
    font-size: 13px
  }
}

.datNotFound .addBtn:hover {
  color: #fafafa;
  background-color: var(--secColour)
}

.inputRow {
  position: relative
}

  .inputRow .inputElement {
    position: relative;
    width: 100%;
    height: 52px;
    border: solid 1px #dddddd;
    color: var(--text43);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px
  }

@media (max-width: 767px) {
  .inputRow .inputElement {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .inputRow .inputElement {
    height: 40px
  }
}

@media (max-width: 600px) {
  .inputRow .inputElement {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
  }
}

.inputRow .inputElement.selectedElm {
  background-color: #f3f3f3
}

.textRow {
  position: relative
}

  .textRow .textElement {
    position: relative;
    width: 100%;
    height: 140px;
    border: solid 1px #dddddd;
    resize: none
  }

@media (max-width: 600px) {
  .textRow .textElement {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
  }
}

.textRow .textElement.selectedElm {
  background-color: #f3f3f3
}

.selectRow {
  position: relative
}

  .selectRow .selectElement {
    position: relative;
    width: 100%;
    height: 52px;
    border: solid 1px #dddddd;
    color: var(--text43);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    z-index: 1
  }

@media (max-width: 767px) {
  .selectRow .selectElement {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .selectRow .selectElement {
    height: 40px
  }
}

@media (max-width: 600px) {
  .selectRow .selectElement {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
  }
}

.selectRow .selectElement::-ms-expand {
  display: none
}

.selectRow .dropIcon {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 0
}

@media (max-width: 767px) {
  .selectRow .dropIcon {
    top: 12px;
    right: 8px
  }
}

.selectRow.selectedElm {
  background-color: #f3f3f3
}

.widgetBtn {
  display: flex;
  justify-content: flex-end;
  position: relative
}

  .widgetBtn .cancelBtn {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    color: var(--text2d);
    width: 160px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dddddd;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    border: none;
    outline: none
  }

@media (max-width: 767px) {
  .widgetBtn .cancelBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .widgetBtn .cancelBtn {
    width: fit-content;
    height: 40px;
    padding: 0 20px
  }
}

@media (max-width: 600px) {
  .widgetBtn .cancelBtn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 34px
  }
}

.widgetBtn .cancelBtn:hover {
  color: var(--white);
  background-color: var(--primaryColour)
}

.widgetBtn .submitBtn {
  margin-left: 16px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--white);
  width: 160px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  border: none;
  outline: none
}

@media (max-width: 767px) {
  .widgetBtn .submitBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .widgetBtn .submitBtn {
    width: fit-content;
    height: 40px;
    padding: 0 20px;
    margin-left: 8px
  }
}

@media (max-width: 600px) {
  .widgetBtn .submitBtn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 34px
  }
}

.widgetBtn .submitBtn:hover {
  background-color: var(--primaryColour)
}

.tempHeader {
  height: 75px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--white)
}

  .tempHeader .headerContainer {
    display: flex;
    justify-content: space-between
  }

  .tempHeader .container {
    width: 1266px
  }

    .tempHeader .container .widgetNav {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      width: 38px;
      height: 38px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      overflow: hidden
    }

      .tempHeader .container .widgetNav .ripple {
        background: rgba(82,115,131,0.4)
      }

      .tempHeader .container .widgetNav .wnavList {
        display: flex;
        margin-bottom: 3px;
        width: 6px;
        height: 6px;
        border: solid 1px var(--primaryDarkColour);
        position: relative;
        -webkit-transition: ease-in-out 0.4s;
        -moz-transition: ease-in-out 0.4s;
        -o-transition: ease-in-out 0.4s;
        -ms-transition: ease-in-out 0.4s;
        transition: ease-in-out 0.4s
      }

        .tempHeader .container .widgetNav .wnavList:before {
          position: absolute;
          top: -1px;
          right: -10px;
          content: "";
          width: 6px;
          height: 6px;
          border: solid 1px var(--primaryDarkColour);
          -webkit-transition: ease-in-out 0.4s;
          -moz-transition: ease-in-out 0.4s;
          -o-transition: ease-in-out 0.4s;
          -ms-transition: ease-in-out 0.4s;
          transition: ease-in-out 0.4s
        }

        .tempHeader .container .widgetNav .wnavList:after {
          position: absolute;
          top: -1px;
          left: -10px;
          content: "";
          width: 6px;
          height: 6px;
          border: solid 1px var(--primaryDarkColour);
          -webkit-transition: ease-in-out 0.4s;
          -moz-transition: ease-in-out 0.4s;
          -o-transition: ease-in-out 0.4s;
          -ms-transition: ease-in-out 0.4s;
          transition: ease-in-out 0.4s
        }

    .tempHeader .container:hover .wnavList {
      background-color: var(--primaryDarkColour)
    }

      .tempHeader .container:hover .wnavList:before, .tempHeader .container:hover .wnavList:after {
        background-color: var(--primaryDarkColour)
      }

.pageBanner {
  min-height: 216px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 20px 0
}

@media (max-width: 767px) {
  .pageBanner {
    min-height: 150px
  }
}

.pageBanner img {
  position: absolute
}

.pageBanner .pageTitle {
  max-width: 1266px;
  margin: 0 auto
}

  .pageBanner .pageTitle h2 {
    color: #fff;
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 24px
  }

@media (max-width: 767px) {
  .pageBanner .pageTitle h2 {
    font-size: 18px
  }
}

.pageBanner .pageTitle p {
  color: #fff;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px
}

@media (max-width: 767px) {
  .pageBanner .pageTitle p {
    font-size: 12px;
    font-size: 13px
  }
}

.templateBody {
  background-color: #fafafa;
  position: relative;
  overflow: hidden
}

  .templateBody .registerWidget {
    display: flex;
    padding: 60px 0;
    background-color: #fafafa
  }

@media (max-width: 991px) {
  .templateBody .registerWidget {
    padding: 20px 0px
  }
}

.templateBody .registerWidget .widgetCard {
  min-width: 805px;
  flex: 805px;
  padding: 65px 30px 40px 30px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  box-shadow: 0 2px 8px 0 rgba(32,33,36,0.28);
  position: relative;
  z-index: 1
}

@media (max-width: 1279px) {
  .templateBody .registerWidget .widgetCard {
    min-width: 100%;
    flex: 100%
  }
}

@media (max-width: 767px) {
  .templateBody .registerWidget .widgetCard {
    padding: 25px 20px 20px 20px
  }
}

@media (max-width: 600px) {
  .templateBody .registerWidget .widgetCard {
    padding: 0;
    box-shadow: none;
    background-color: #fafafa !important
  }
}

.templateBody .regBanner {
  min-width: 412px;
  display: flex;
  position: relative
}

@media (max-width: 1279px) {
  .templateBody .regBanner {
    display: none
  }
}

.templateBody .regBanner .imageRow {
  position: sticky;
  height: fit-content;
  top: 0
}

  .templateBody .regBanner .imageRow:after {
    position: absolute;
    bottom: 0;
    left: 99%;
    content: "";
    width: 100%;
    height: 92%;
    background-color: #315263
  }

  .templateBody .regBanner .imageRow:before {
    position: absolute;
    bottom: 0;
    right: 99%;
    content: "";
    width: calc((100vw) - 35vw);
    height: 110px;
    background-color: #315263
  }

  .templateBody .regBanner .imageRow figure {
    position: relative;
    z-index: 1;
    margin-bottom: 0
  }

.inputRow {
  position: relative
}

  .inputRow .inputLabel {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    color: #434343
  }

@media (max-width: 767px) {
  .inputRow .inputLabel {
    font-size: 12px;
    font-size: 13px
  }
}

.inputRow .inputControl {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080;
  padding: 0 10px;
  width: 100%;
  height: 52px;
  border: solid 1px #dddddd
}

@media (max-width: 767px) {
  .inputRow .inputControl {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .inputRow .inputControl {
    height: 40px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
  }
}

.inputRow .inputControl.input-validation-error {
  border-color: red
}

.inputRow .textControl {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080;
  width: 100%;
  height: 140px;
  border: solid 1px #dddddd
}

@media (max-width: 767px) {
  .inputRow .textControl {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .inputRow .textControl {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
  }
}

.inputRow .textControl.input-validation-error {
  border-color: red
}

.inputRow .field-validation-error {
  position: absolute;
  right: 0;
  bottom: -16px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 10px;
  color: red
}

@media (max-width: 767px) {
  .inputRow .field-validation-error {
    font-size: 7.5px
  }
}

.inputRow .selectRow {
  margin-right: 8px;
  min-width: 135px;
  position: relative
}

@media (max-width: 767px) {
  .inputRow .selectRow {
    min-width: 105px
  }
}

.inputRow .selectRow .selectedLabel {
  cursor: pointer;
  padding-left: 10px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080;
  width: 100%;
  height: 52px;
  border: solid 1px #dddddd;
  position: relative
}

@media (max-width: 767px) {
  .inputRow .selectRow .selectedLabel {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .inputRow .selectRow .selectedLabel {
    height: 40px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
  }
}

.inputRow .selectRow .selectedLabel.input-validation-error {
  border-color: red
}

.inputRow .selectRow .selectedLabel svg {
  position: absolute;
  right: 10px
}

.inputRow .selectRow .selectedDrop {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0 2px 8px 0 rgba(32,33,36,0.28)
}

  .inputRow .selectRow .selectedDrop .selectedList {
    cursor: pointer;
    padding: 12px 10px 10px 5px;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 12px;
    color: #434343;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

@media (max-width: 767px) {
  .inputRow .selectRow .selectedDrop .selectedList {
    font-size: 9px;
    font-size: 12px
  }
}

.inputRow .selectRow .selectedDrop .selectedList:hover {
  background-color: #fafafa
}

.slideElementList .inputRow .field-validation-error {
  right: 4px;
  bottom: 8px
}

.formSubmit .submitBtn {
  outline: none !important;
  cursor: pointer;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #fafafa;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 302px;
  height: 52px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .formSubmit .submitBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .formSubmit .submitBtn {
    width: 150px;
    height: 40px
  }
}

.formSubmit .submitBtn:hover {
  background-color: var(--primaryColour)
}

.registerContentWidget {
  position: relative;
  background-color: var(--primaryColour);
  background-position: right center !important;
  background-size: contain !important
}

@media (max-width: 991px) {
  .registerContentWidget {
    background-size: cover !important;
    padding: 30px 0px
  }
}

.registerContentWidget figure {
  margin-bottom: 0
}

@media (max-width: 991px) {
  .registerContentWidget figure {
    display: none
  }
}

.registerContentWidget .container {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto
}

@media (max-width: 991px) {
  .registerContentWidget .container {
    position: relative
  }
}

.registerContentWidget .container .registerContent {
  height: 100%;
  padding-right: 40px;
  padding-top: 142px;
  background-color: var(--primaryColour)
}

@media (max-width: 991px) {
  .registerContentWidget .container .registerContent {
    border-radius: 12px;
    overflow: hidden;
    padding: 30px
  }
}

@media (max-width: 600px) {
  .registerContentWidget .container .registerContent {
    padding: 20px
  }
}

.registerContentWidget .container .registerContent h1, .registerContentWidget .container .registerContent h2, .registerContentWidget .container .registerContent h3, .registerContentWidget .container .registerContent h4, .registerContentWidget .container .registerContent h5 {
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 24px;
  color: var(--white);
  margin-bottom: 25px
}

@media (max-width: 767px) {
  .registerContentWidget .container .registerContent h1, .registerContentWidget .container .registerContent h2, .registerContentWidget .container .registerContent h3, .registerContentWidget .container .registerContent h4, .registerContentWidget .container .registerContent h5 {
    font-size: 18px
  }
}

@media (max-width: 991px) {
  .registerContentWidget .container .registerContent h1, .registerContentWidget .container .registerContent h2, .registerContentWidget .container .registerContent h3, .registerContentWidget .container .registerContent h4, .registerContentWidget .container .registerContent h5 {
    margin-bottom: 15px
  }
}

.registerContentWidget .container .registerContent p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #dddddd
}

@media (max-width: 767px) {
  .registerContentWidget .container .registerContent p {
    font-size: 12px;
    font-size: 13px
  }
}

.registerContentWidget .container .registerContent .moreBtn {
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 55px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  background-color: var(--secColour)
}

@media (max-width: 767px) {
  .registerContentWidget .container .registerContent .moreBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .registerContentWidget .container .registerContent .moreBtn {
    width: 150px;
    height: 40px
  }
}

.personalitySection {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 16px
}

  .personalitySection .personalityHead {
    padding: 22px 20px;
    display: flex;
    cursor: pointer
  }

@media (max-width: 480px) {
  .personalitySection .personalityHead {
    padding: 12px 20px
  }
}

@media (max-width: 480px) {
  .personalitySection .personalityHead.interPersonalityHead {
    padding: 10px
  }
}

.personalitySection .personalityHead .headTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 24px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .personalitySection .personalityHead .headTitle {
    font-size: 18px
  }
}

.personalitySection .personalityHead .titleArrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer
}

  .personalitySection .personalityHead .titleArrow:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    background-color: var(--secColour);
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0.1
  }

  .personalitySection .personalityHead .titleArrow svg {
    position: relative;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

  .personalitySection .personalityHead .titleArrow.active svg {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  .personalitySection .personalityHead .titleArrow:hover:after {
    width: 100%;
    height: 100%
  }

.personalitySection .personalityBody {
  display: none
}

  .personalitySection .personalityBody hr {
    border-color: #f3f3f3;
    margin-bottom: 0;
    margin-top: 0
  }

  .personalitySection .personalityBody .personalityCard {
    padding: 22px 20px;
    display: grid;
    grid-template-columns: 600px auto;
    column-gap: 15px;
    -moz-column-gap: 15px
  }

@media (max-width: 1279px) {
  .personalitySection .personalityBody .personalityCard {
    display: flex;
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .personalitySection .personalityBody .personalityCard {
    padding: 22px 20px 0px
  }
}

@media (max-width: 480px) {
  .personalitySection .personalityBody .personalityCard.interPersonalityCard {
    padding: 22px 10px 0px
  }
}

.personalitySection .personalityBody .personalityCard .cardContent p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  margin-bottom: 14px
}

@media (max-width: 767px) {
  .personalitySection .personalityBody .personalityCard .cardContent p {
    font-size: 12px;
    font-size: 13px
  }
}

.personalitySection .personalityBody .personalityCard .cardContent strong {
  display: block;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: #2d2d2d;
  margin-bottom: 15px
}

@media (max-width: 991px) {
  .personalitySection .personalityBody .personalityCard .cardContent strong {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .personalitySection .personalityBody .personalityCard .cardContent strong {
    font-size: 13.5px
  }
}

.personalitySection .personalityBody .personalityCard .cardContent ul {
  padding-left: 0
}

@media (max-width: 480px) {
  .personalitySection .personalityBody .personalityCard .cardContent ul {
    margin-bottom: 0px
  }
}

.personalitySection .personalityBody .personalityCard .cardContent ul li {
  position: relative;
  padding-left: 20px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  list-style-type: none;
  margin-bottom: 15px
}

@media (max-width: 767px) {
  .personalitySection .personalityBody .personalityCard .cardContent ul li {
    font-size: 12px;
    font-size: 13px
  }
}

.personalitySection .personalityBody .personalityCard .cardContent ul li:last-child {
  margin-bottom: 0px
}

.personalitySection .personalityBody .personalityCard .cardContent ul li::before {
  position: absolute;
  left: 0;
  top: 8px;
  content: "";
  width: 9px;
  height: 9px;
  background-color: #ed7c3c;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

.personalitySection .personalityBody .personalityCard .cardImage {
  position: relative
}

@media (max-width: 1279px) {
  .personalitySection .personalityBody .personalityCard .cardImage {
    order: -1;
    margin-bottom: 15px
  }
}

.personalitySection .personalityBody .personalityCard .cardImage img {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px
}

.personalitySection .personalityBody .personalityCard .cardImage.instCardImage {
  order: 1
}

.personalitySection .personalityBody.open {
  display: block
}

.scrollTabWidget {
  padding: 0 25px 25px 25px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px
}

@media (max-width: 680px) {
  .scrollTabWidget {
    padding: 0 5px 5px 5px
  }
}

.scrollTabWidget .scrollTabNav {
  position: relative;
  display: flex;
  align-items: center
}

  .scrollTabWidget .scrollTabNav.interScrollTabNav {
    border-bottom: solid 1px #f3f3f3;
    margin-bottom: 30px
  }

@media (max-width: 991px) {
  .scrollTabWidget .scrollTabNav.interScrollTabNav {
    margin-bottom: 20px
  }
}

.scrollTabWidget .scrollTabNav .tNav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  background-color: #dddddd;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

  .scrollTabWidget .scrollTabNav .tNav:hover {
    background-color: var(--primaryColour)
  }

  .scrollTabWidget .scrollTabNav .tNav.navNextT {
    right: 0;
    top: 22px
  }

  .scrollTabWidget .scrollTabNav .tNav.navPrevT {
    left: 0;
    top: 22px
  }

.scrollTabWidget .scrollTabNav .stNavRow {
  padding: 0 35px 0 25px;
  display: flex;
  overflow: hidden
}

  .scrollTabWidget .scrollTabNav .stNavRow .slider-nav {
    display: flex;
    width: 100%;
    max-width: 1136px
  }

  .scrollTabWidget .scrollTabNav .stNavRow .stNavList {
    white-space: nowrap;
    text-align: center;
    padding: 25px 24px;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    color: #dddddd;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    cursor: pointer;
    position: relative
  }

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabNav .stNavRow .stNavList {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabNav .stNavRow .stNavList {
    padding: 25px 10px;
    font-size: 14px
  }
}

.scrollTabWidget .scrollTabNav .stNavRow .stNavList::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  width: 0;
  height: 1px;
  background-color: var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  opacity: 0
}

.scrollTabWidget .scrollTabNav .stNavRow .stNavList:hover {
  color: var(--primaryColour)
}

.scrollTabWidget .scrollTabNav .stNavRow .stNavList.active {
  color: var(--primaryColour)
}

  .scrollTabWidget .scrollTabNav .stNavRow .stNavList.active::after {
    width: 100%;
    opacity: 1
  }

.scrollTabWidget .scrollTabNav .mCSB_scrollTools {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden !important
}

.scrollTabWidget .scrollTabBody .stBody {
  display: none;
  padding: 12px 0px 22px
}

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody {
    padding: 22px 0px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stHeadPrimary {
  padding: 10px 0 14px 0;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 20px;
  color: var(--secColour);
  border-bottom: solid 1px #f3f3f3
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .stHeadPrimary {
    font-size: 15px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stHeadPrimary.primaryHeadColor {
  color: var(--primaryColour);
  font-size: 18px;
  padding: 17px
}

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody .stHeadPrimary.primaryHeadColor {
    font-size: 15px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid {
  display: grid;
  grid-template-columns: 570px auto
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid {
    display: flex;
    flex-direction: column
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget {
  padding-top: 50px
}

  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 24px;
    color: #434343;
    margin-bottom: 25px
  }

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle {
    font-size: 18px
  }
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle {
    margin-bottom: 10px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle.interGridTitle {
  padding-right: 60px
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle.interGridTitle {
    padding-right: 0px
  }
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle.interGridTitle .interGridTitleSep {
    display: block
  }
}

@media (max-width: 600px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .gridTitle.interGridTitle .interGridTitleSep {
    display: inline
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget.interStContentWidget {
  padding-right: 50px
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget.interStContentWidget {
    padding-right: 0px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  margin-bottom: 12px
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget p {
    font-size: 12px;
    font-size: 13px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .btnParticipate {
  margin-top: 25px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 41px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .btnParticipate {
    font-size: 10.5px;
    font-size: 12px
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stContentWidget .btnParticipate:hover {
  background-color: var(--primaryColour)
}

@media (max-width: 1279px) {
  .scrollTabWidget .scrollTabBody .stBody .stGrid .stImageWidget {
    order: -1
  }
}

.scrollTabWidget .scrollTabBody .stBody .stGrid .stImageWidget img {
  max-width: 100%;
  width: inherit
}

.scrollTabWidget .scrollTabBody .stBody.cardBorder {
  border: solid 1px #f3f3f3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

.scrollTabWidget .scrollTabBody .stBody .statuebarPage {
  margin-top: 25px;
  padding: 24px 18px;
  background-color: #f5f6fa;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: flex
}

@media (max-width: 480px) {
  .scrollTabWidget .scrollTabBody .stBody .statuebarPage {
    display: block;
    padding: 15px
  }
}

.scrollTabWidget .scrollTabBody .stBody .statuebarPage .progerssWidget {
  padding: 0 25px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #434343;
  flex-grow: 1;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .statuebarPage .progerssWidget {
    font-size: 12px;
    font-size: 13px
  }
}

.scrollTabWidget .scrollTabBody .stBody .statuebarPage .progerssWidget .progress {
  width: 100%;
  height: 2px
}

  .scrollTabWidget .scrollTabBody .stBody .statuebarPage .progerssWidget .progress .progress-bar {
    background-color: var(--secColour)
  }

.scrollTabWidget .scrollTabBody .stBody .statuebarPage .widgetPagestatus {
  margin-left: 12px;
  padding: 0 10px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #434343;
  width: 165px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .statuebarPage .widgetPagestatus {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 480px) {
  .scrollTabWidget .scrollTabBody .stBody .statuebarPage .widgetPagestatus {
    margin-left: 0px;
    margin-top: 10px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow {
  padding-top: 22px
}

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow.squestionTableInt {
    padding: 25px 17px 17px
  }

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow.squestionTableInt {
    padding: 17px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow {
  display: grid;
  grid-template-columns: 190px 110px 110px;
  margin-bottom: 24px
}

@media (max-width: 480px) {
  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow {
    grid-template-columns: 190px 60px 60px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRow {
  grid-template-columns: auto 90px 75px;
  margin-bottom: 10px
}

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRow {
    grid-template-columns: auto 50px 50px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRowBg {
  background-color: #f5f6fa;
  padding: 15px 0 15px 20px;
  margin-bottom: 10px
}

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRowBg {
    padding: 10px 0 10px 10px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRowBg .gtList {
  display: flex;
  align-items: center
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow.activityRowBgLst {
  margin-bottom: 0px
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #2d2d2d
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList {
    font-size: 12px;
    font-size: 13px
  }
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList.primaryHeadColor {
  color: var(--primaryColour)
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList.gLabel {
  padding-left: 8px
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList.caption-center {
  text-align: center
}

.scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow {
  width: 26px;
  height: 26px;
  position: relative
}

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow.btn-center {
    margin: auto
  }

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow input {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
  }

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow label {
    cursor: pointer;
    width: 26px;
    height: 26px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
  }

    .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow label::after {
      position: absolute;
      content: "";
      width: 26px;
      height: 26px;
      position: absolute;
      content: "";
      border: solid 1px #dddddd;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%
    }

    .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow label::before {
      position: absolute;
      content: "";
      width: 12px;
      height: 12px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #315263;
      -webkit-transition: ease-in-out 0.4s;
      -moz-transition: ease-in-out 0.4s;
      -o-transition: ease-in-out 0.4s;
      -ms-transition: ease-in-out 0.4s;
      transition: ease-in-out 0.4s;
      opacity: 0
    }

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow input[type="radio"]:not(:checked) ~ label::before {
    opacity: 0
  }

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow input[type="radio"]:checked ~ label::before {
    opacity: 1
  }

  .scrollTabWidget .scrollTabBody .stBody .squestionTableRow .gtRow .gtList .gRadioRow input[type="radio"]:checked ~ label::after {
    border: 1px solid #315263
  }

.scrollTabWidget .scrollTabBody .stBody .sFormButton .formSubmit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 41px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #fff;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

@media (max-width: 767px) {
  .scrollTabWidget .scrollTabBody .stBody .sFormButton .formSubmit {
    font-size: 10.5px;
    font-size: 12px
  }
}

.scrollTabWidget .scrollTabBody .stBody .sFormButton .formSubmit:hover {
  background-color: var(--primaryColour)
}

.scrollTabWidget .scrollTabBody .stBody.stBodySpc {
  padding: 0px
}

  .scrollTabWidget .scrollTabBody .stBody.stBodySpc .cardBorder {
    border: solid 1px #f3f3f3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 22px
  }

    .scrollTabWidget .scrollTabBody .stBody.stBodySpc .cardBorder.cardBorder-activity {
      border: solid 1px #f3f3f3;
      padding: 0;
      margin-bottom: 10px !important
    }

@media (max-width: 991px) {
  .scrollTabWidget .scrollTabBody .stBody.stBodySpc .cardBorder {
    padding: 0px;
    border: none
  }
}

@media (max-width: 680px) {
  .scrollTabWidget .scrollTabBody .stBody.stBodySpc .cardBorder {
    padding: 0px 15px
  }
}

@media (max-width: 480px) {
  .scrollTabWidget .scrollTabBody .stBody.stBodySpc .cardBorder {
    padding: 0px
  }
}

.scrollTabWidget .scrollTabBody .stBody.open {
  display: block
}

.scrollTabWidget .btnParticipate {
  margin-top: 25px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 41px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .scrollTabWidget .btnParticipate {
    font-size: 10.5px;
    font-size: 12px
  }
}

.scrollTabWidget .btnParticipate:hover {
  background-color: var(--primaryColour)
}

.customControl {
  right: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 35px;
  position: fixed;
  background-color: var(--primaryColour);
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  z-index: 2
}

  .customControl svg {
    width: 20px;
    height: 20px
  }

    .customControl svg polyline {
      fill: #fff
    }

.extrIntroversion.extrIntroversionSep {
  margin-top: 20px
}

.extrIntroversion .extrIntroversionSec .extrIntroversionPara {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 20px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .extrIntroversionPara {
    font-size: 13px;
    padding-bottom: 10px
  }
}

.extrIntroversion .extrIntroversionSec .extrIntroversionTit {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .extrIntroversionTit {
    font-size: 13px
  }
}

.extrIntroversion .extrIntroversionSec .progressBarTitleSec {
  max-width: 538px;
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  margin-bottom: 16px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .progressBarTitleSec {
    margin-top: 20px
  }
}

.extrIntroversion .extrIntroversionSec .progressBarTitleSec p {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .progressBarTitleSec p {
    font-size: 13px
  }
}

.extrIntroversion .extrIntroversionSec .progressBarTitleSec .progressBarTitleLft {
  position: relative;
  padding-left: 28px
}

  .extrIntroversion .extrIntroversionSec .progressBarTitleSec .progressBarTitleLft.progressBarTitleLftClr::before {
    content: "";
    position: absolute;
    left: 0;
    width: 19px;
    height: 19px;
    background-color: #9971ee;
    border-radius: 2px
  }

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .progressBarTitleSec .progressBarTitleLft.progressBarTitleLftClr::before {
    margin-top: 4px
  }
}

.extrIntroversion .extrIntroversionSec .progressBarTitleSec .progressBarTitleLft.progressBarTitleLftClr2::before {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 19px;
  background-color: #fa6cb4;
  border-radius: 2px
}

.extrIntroversion .extrIntroversionSec .proLightGrey {
  background-color: #f1f1f1 !important;
  height: 45px;
  max-width: 538px;
  border-radius: 2px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .proLightGrey {
    height: 30px
  }
}

.extrIntroversion .extrIntroversionSec .proLightGrey .proContainer {
  color: #fff !important;
  text-align: center;
  height: 45px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 2px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .proLightGrey .proContainer {
    height: 30px
  }
}

.extrIntroversion .extrIntroversionSec .proLightGrey .proContainer.proClr {
  background-color: #9971ee !important
}

.extrIntroversion .extrIntroversionSec .proLightGrey .proContainer.proClr2 {
  background-color: #fa6cb4 !important
}

.extrIntroversion .extrIntroversionSec .confirmPreference {
  background-color: #f5f6fa;
  padding: 20px;
  margin-top: 30px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px
}

@media (max-width: 480px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference {
    padding: 15px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .confirmPreferenceTit {
  font-size: 18px;
  font-weight: 500;
  color: var(--text2d);
  margin-bottom: 15px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .confirmPreferenceTit {
    font-size: 15px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput {
  display: flex;
  justify-content: space-between;
  column-gap: 11px
}

@media (max-width: 767px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput {
    display: block;
    column-gap: 0px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow {
  position: relative;
  background-color: var(--white);
  border-radius: 4px;
  width: 100%
}

  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropLabel {
    font-size: 16px;
    font-weight: 400;
    color: var(--text43);
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    outline: none;
    padding-right: 30px;
    padding-left: 15px;
    position: relative
  }

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropLabel {
    font-size: 13px;
    height: 45px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropLabel .arrow svg {
  position: absolute;
  right: 15px;
  top: 20px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropLabel .arrow svg {
    top: 18px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropOptionRow {
  position: absolute;
  top: 105%;
  left: 0;
  background: #fff;
  width: 100%;
  border: 1px solid var(--lightgry);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
  -webkit-box-shadow: 0px 15px 14px -12px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 15px 14px -12px rgba(0,0,0,0.25);
  box-shadow: 0px 15px 14px -12px rgba(0,0,0,0.25)
}

  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropOptionRow .dropOption {
    cursor: pointer;
    padding: 10px 16px;
    transition: ease-in-out 0.4s
  }

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropOptionRow .dropOption {
    font-size: 13px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropOptionRow .dropOption:hover {
  background-color: #fafafa
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownInput .tmDbDropRow .dropOptionRow.open {
  pointer-events: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn {
  display: flex
}

@media (max-width: 767px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn {
    margin-top: 15px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 14px;
  height: 52px;
  color: var(--white);
  background-color: #ed7c3c;
  border-radius: 4px;
  transition: ease-in-out 0.4s;
  border: none;
  outline: none;
  cursor: pointer;
  width: 103px
}

@media (max-width: 680px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm {
    font-size: 12px
  }
}

@media (max-width: 600px) {
  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm {
    height: 45px
  }
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm:hover {
  background-color: #527383
}

.extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm.searchBack {
  margin-left: 10px;
  background-color: #527383;
  width: 166px
}

  .extrIntroversion .extrIntroversionSec .confirmPreference .dropDownArea .dropDownBtn .searchConfirm.searchBack:hover {
    background-color: #ed7c3c
  }

.selfAssesSummary .selfAssesSummarySec .selfAssesSummaryTit {
  font-size: 18px;
  font-weight: 500;
  color: var(--text43);
  margin-bottom: 20px
}

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .selfAssesSummaryTit {
    font-size: 15px;
    margin-bottom: 10px
  }
}

.selfAssesSummary .selfAssesSummarySec .selfAssesSummaryPara {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 35px
}

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .selfAssesSummaryPara {
    font-size: 13px;
    padding-bottom: 20px
  }
}

.selfAssesSummary .selfAssesSummarySec .selfAssesSummaryArea {
  display: flex;
  column-gap: 15px
}

  .selfAssesSummary .selfAssesSummarySec .selfAssesSummaryArea .selfAssesSummaryClr {
    width: 285px;
    padding: 20px;
    display: block;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    height: 86px;
    color: var(--text43);
    background-color: #f5f6fa
  }

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .selfAssesSummaryArea .selfAssesSummaryClr {
    font-size: 30px;
    height: 55px
  }
}

@media (max-width: 480px) {
  .selfAssesSummary .selfAssesSummarySec .selfAssesSummaryArea .selfAssesSummaryClr {
    font-size: 25px;
    height: 40px
  }
}

.selfAssesSummary .selfAssesSummarySec .selfAssesSummaryArea .selfAssesSummaryClr.selfAssesSummaryAct {
  color: var(--white);
  background-color: var(--primaryDarkColour)
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow {
  margin-top: 20px
}

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    -moz-column-gap: 16px;
    width: 100%;
    margin: 0 auto
  }

    .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink {
      margin-bottom: 20px
    }

      .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink.active .tabNavLinkTit {
        margin-bottom: 0px;
        position: relative;
        display: flex
      }

        .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink.active .tabNavLinkTit svg {
          transform: rotate(180deg) !important
        }

      .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit {
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        height: 66px;
        color: var(--text43);
        background-color: var(--white);
        border-radius: 2px;
        border: solid 1px #f3f3f3;
        transition: ease-in-out 0.4s;
        display: flex;
        align-items: center;
        padding: 17px;
        margin-bottom: 10px
      }

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit {
    font-size: 15px;
    height: 50px;
    padding: 10px
  }
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .tabNavTitSep {
  font-weight: 500;
  color: var(--primaryColour);
  padding-left: 10px
}

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .tabNavTitSep.tabNavTitSepInt {
    padding-left: 0px
  }

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer
}

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    background-color: var(--secColour);
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0.1
  }

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow:hover:after {
    width: 100%;
    height: 100%
  }

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow svg {
    transform: rotate(0deg);
    position: relative;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .userTabList {
  display: none;
  border: solid 1px #f3f3f3;
  padding: 25px 17px 17px;
  border-top: 0px
}

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .userTabList {
    padding: 17px
  }
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .tabNavLink .userTabList.open {
  display: block;
  margin-bottom: 0px;
  padding-bottom: 5px
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec {
  margin-bottom: 20px
}

  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec .extrIntroversionTit {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px
  }

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec .extrIntroversionTit {
    font-size: 15px
  }
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec .extrIntroversionPara {
  padding-bottom: 0px
}

.selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec .progressBarTitleSec {
  margin-top: 0px;
  display: block;
  text-align: right
}

@media (max-width: 680px) {
  .selfAssesSummary .selfAssesSummarySec .tabNavRow .userTabNav .extrIntroversion .extrIntroversionSec .progressBarTitleSec {
    margin-bottom: 10px
  }
}

.selfAssesSummary .btnArea {
  text-align: right;
  margin: 20px 0px
}

@media (max-width: 680px) {
  .selfAssesSummary .btnArea {
    margin: 10px 0px
  }
}

@media (max-width: 480px) {
  .selfAssesSummary .btnArea {
    margin: 0px
  }
}

.bestFillType .bestFillTypeSec .bestFillTypeTitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--text2d);
  padding-bottom: 20px
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillTypeTitle {
    font-size: 15px;
    padding-bottom: 10px
  }
}

.bestFillType .bestFillTypeSec .bestFillTypeTitle.bestFillTypeTitleClr {
  color: #ed7c3c;
  padding-bottom: 10px;
  margin-top: 24px
}

.bestFillType .bestFillTypeSec .bestFillTypeTitle.bestFillTypeTitleSep {
  padding-bottom: 0px !important
}

.bestFillType .bestFillTypeSec .bestFillTypePara {
  font-size: 16px;
  font-weight: 400;
  color: var(--text43);
  line-height: 26px
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillTypePara {
    font-size: 13px
  }
}

.bestFillType .bestFillTypeSec .bestFillTypePara ul {
  margin-top: 20px;
  padding-left: 20px
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec .bestFillTypePara ul {
    margin-top: 15px;
    padding-left: 10px
  }
}

.bestFillType .bestFillTypeSec .bestFillTypePara ul li {
  font-size: 16px;
  font-weight: 400;
  color: var(--text43);
  line-height: 26px;
  padding-bottom: 10px;
  list-style: none;
  padding-left: 20px;
  position: relative
}

@media (max-width: 767px) {
  .bestFillType .bestFillTypeSec .bestFillTypePara ul li {
    font-size: 13px;
    line-height: 23px
  }
}

.bestFillType .bestFillTypeSec .bestFillTypePara ul li::before {
  position: absolute;
  left: 0;
  top: 8px;
  content: "";
  width: 9px;
  height: 9px;
  background-color: #315263;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 {
  margin-top: 24px
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 {
    margin-top: 15px
  }
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder {
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  padding: 24px
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder {
    padding: 15px
  }
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 {
  border-top: none
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 {
    padding: 20px 15px 24px 15px
  }
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul {
  padding-left: 60px;
  margin-bottom: 0px
}

@media (max-width: 767px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul {
    padding-left: 10px
  }
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul li {
  font-size: 48px;
  font-weight: 700;
  color: var(--primaryDarkColour);
  padding: 20px;
  margin-right: 54px;
  line-height: 34px;
  border-bottom: 1px solid #707070;
  display: inline-block;
  padding-top: 10px
}

@media (max-width: 767px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul li {
    padding: 18px;
    margin-right: 45px
  }
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul li {
    font-size: 30px;
    padding: 13px;
    margin-right: 25px
  }
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul li {
    font-size: 25px;
    padding: 5px;
    width: 45px;
    height: 45px;
    text-align: center;
    margin-right: 20px
  }
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeBorder.bestFillTypeBorder2 ul li:last-child {
  margin-right: 0px
}

.bestFillType .bestFillTypeSec.bestFillTypeSec2 .bestFillTypeTitle {
  padding-bottom: 10px
}

.bestFillType .bestFillTypeSec .bestFillTypeDropSel {
  display: flex;
  column-gap: 66px;
  padding-left: 65px;
  padding-bottom: 10px
}

@media (max-width: 767px) {
  .bestFillType .bestFillTypeSec .bestFillTypeDropSel {
    padding-left: 10px
  }
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillTypeDropSel {
    column-gap: 24px
  }
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec .bestFillTypeDropSel {
    column-gap: 20px
  }
}

.bestFillType .bestFillTypeSec .bestFillDropRow {
  display: flex;
  align-items: center
}

  .bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 58px;
    height: 54px;
    outline: none;
    padding-right: 12px;
    padding-left: 12px;
    position: relative;
    font-size: 48px;
    font-weight: 700;
    color: #dddddd;
    text-align: center
  }

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel {
    width: 50px;
    height: 50px;
    font-size: 30px
  }
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel {
    width: 45px;
    height: 50px;
    font-size: 25px
  }
}

.bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel .active {
  color: var(--primaryDarkColour);
  margin-left: -5px
}

.bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel::after {
  position: absolute;
  content: "";
  width: 58px;
  height: 2px;
  left: 0px;
  background-color: #707070;
  bottom: -10px
}

@media (max-width: 680px) {
  .bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel::after {
    width: 44px
  }
}

@media (max-width: 480px) {
  .bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel::after {
    width: 40px
  }
}

.bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel .arrowTop svg {
  position: absolute;
  right: -15px;
  top: 0
}

.bestFillType .bestFillTypeSec .bestFillDropRow .dropLabel .arrowBottom svg {
  position: absolute;
  right: -15px;
  bottom: 0;
  transform: rotate(180deg)
}

.bestFillType .bestFillTypeSec .bestFillDropRow .dropOptionRow {
  position: absolute;
  margin-top: -104px;
  background: #fff;
  width: 54px;
  pointer-events: none;
  opacity: 0;
  margin-left: -7px;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
  font-size: 48px;
  font-weight: 700;
  color: #dddddd;
  text-align: center;
  -webkit-box-shadow: 0px 0px 17px 2px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 0px 17px 2px rgba(0,0,0,0.12);
  box-shadow: 0px 0px 17px 2px rgba(0,0,0,0.12);
  line-height: 45px
}

  .bestFillType .bestFillTypeSec .bestFillDropRow .dropOptionRow .dropOption {
    cursor: pointer;
    padding: 10px;
    transition: ease-in-out 0.4s;
    text-align: center
  }

    .bestFillType .bestFillTypeSec .bestFillDropRow .dropOptionRow .dropOption.active {
      color: var(--primaryDarkColour)
    }

    .bestFillType .bestFillTypeSec .bestFillDropRow .dropOptionRow .dropOption.dropOptionBdr {
      border-top: 1px solid #f3f3f3;
      border-bottom: 1px solid #f3f3f3
    }

  .bestFillType .bestFillTypeSec .bestFillDropRow .dropOptionRow.open {
    pointer-events: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

.btnArea {
  text-align: right;
  margin: 40px 0px
}

@media (max-width: 767px) {
  .btnArea {
    margin: 20px 0px
  }
}

.btnArea.btnAreaInt {
  text-align: left;
  margin: 5px 0px
}

@media (max-width: 680px) {
  .btnArea.btnAreaInt {
    margin-bottom: 20px
  }
}

.btnArea .submitBtn {
  background-color: #ed7c3c;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  border: none;
  padding: 10px 45px;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 680px) {
  .btnArea .submitBtn {
    font-size: 12px
  }
}

.btnArea .submitBtn:hover {
  background-color: var(--primaryColour)
}

.careerFieldPreference.occupation .tabNavTitSep {
  padding-left: 0px !important
}

.careerFieldPreference .tabNavRow .userTabNav {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 16px;
  -moz-column-gap: 16px;
  width: 100%;
  margin: 0 auto
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink.active .tabNavLinkTit {
    margin-bottom: 0px
  }

    .careerFieldPreference .tabNavRow .userTabNav .tabNavLink.active .tabNavLinkTit svg {
      transform: rotate(180deg)
    }

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit {
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    height: 66px;
    color: var(--text43);
    background-color: var(--white);
    border-radius: 2px;
    border: solid 1px #F3F3F3;
    transition: ease-in-out 0.4s;
    display: flex;
    align-items: center;
    padding: 17px;
    margin-bottom: 10px
  }

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit {
    font-size: 15px;
    height: 50px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .tabNavTitSep {
  font-weight: 500;
  color: var(--primaryColour);
  padding-left: 10px
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .tabNavTitSep.tabNavTitSepInt {
    padding-left: 0
  }

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .tabNavLinkTit .iconArrow svg {
    position: relative;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList {
  display: none;
  border: solid 1px #F3F3F3;
  padding: 25px 17px 17px;
  border-top: 0px
}

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList {
    padding: 17px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList.open {
  display: block;
  margin-bottom: 10px
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea {
  margin-bottom: 20px
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea .userTabTit {
    font-size: 14px;
    font-weight: 400;
    color: var(--primaryColour);
    padding-bottom: 10px
  }

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea .userTabTit {
    font-size: 12px;
    padding-bottom: 5px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea .userTabTxt {
  font-size: 16px;
  font-weight: 400;
  color: var(--text2d);
  line-height: 26px
}

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea .userTabTxt {
    font-size: 13px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .userTabTxtArea.userTabTxtAreaSep {
  margin-bottom: 0px
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc {
  padding-top: 15px
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    color: #808080;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0px;
    background-color: #F5F6FA;
    padding: 13px;
    margin-bottom: 10px;
    min-height: 50px
  }

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer {
    min-height: 40px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer.checkActive {
  background-color: var(--primaryColour)
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer.checkcontainerLst {
  margin-bottom: 0px
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkOpacity {
  z-index: 2
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input {
  height: auto;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkmark {
    background-color: var(--white);
    border-radius: 2px
  }

    .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkmark:after {
      display: block;
      border: solid var(--primaryColour);
      border-width: 0 2px 2px 0
    }

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkmarktxt {
    color: var(--white);
    font-size: 15px;
    position: relative
  }

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkmarktxt {
    font-size: 12px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkActive {
  background-color: var(--primaryColour);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer input:checked ~ .checkcontainer {
  background-color: var(--primaryColour)
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmarktxt {
  color: var(--text2d);
  margin-left: 35px;
  font-size: 16px;
  font-weight: 400;
  display: block
}

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmarktxt {
    font-size: 13px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmark {
  position: absolute;
  top: 14px;
  left: 15px;
  height: 23px;
  width: 23px;
  background-color: var(--white);
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: center
}

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmark {
    height: 20px;
    width: 20px;
    top: 12px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 5px;
  height: 10px;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}

@media (max-width: 680px) {
  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc .checkcontainer .checkmark::after {
    left: 8px;
    top: 4px
  }
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc a {
  font-family: "Muli";
  font-weight: 400;
  font-size: 16px;
  color: #f26e21;
  display: block;
  margin-top: 20px
}

.careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc.prolstspcInt {
  padding-top: 0px
}

  .careerFieldPreference .tabNavRow .userTabNav .tabNavLink .userTabList .pro-lst-spc.prolstspcInt .checkmark {
    border-radius: 0px !important
  }

.riasccArea {
  padding-bottom: 20px
}

@media (max-width: 680px) {
  .riasccArea {
    padding: 0px 15px
  }
}

@media (max-width: 480px) {
  .riasccArea {
    padding: 0px
  }
}

.riasccArea p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  margin-bottom: 14px
}

@media (max-width: 767px) {
  .riasccArea p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .riasccArea p {
    font-size: 13px
  }
}

.riasccArea .interChooseSec {
  display: grid;
  grid-template-columns: 1fr 135px;
  column-gap: 12px;
  margin-top: 20px
}

@media (max-width: 680px) {
  .riasccArea .interChooseSec {
    grid-template-columns: 1fr 120px
  }
}

@media (max-width: 600px) {
  .riasccArea .interChooseSec {
    grid-template-columns: 1fr
  }
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField {
  display: grid;
  grid-template-columns: 90px 1fr;
  column-gap: 6px;
  background-color: var(--primaryBg);
  border-radius: 4px;
  padding: 4px 12px 4px 25px;
  height: 47px;
  align-items: center;
  margin-bottom: 10px
}

@media (max-width: 600px) {
  .riasccArea .interChooseSec .interChooseLeft .interChooseField {
    grid-template-columns: 70px 1fr;
    padding: 4px 12px 4px 15px
  }
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldLft {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  color: var(--primaryColour)
}

@media (max-width: 767px) {
  .riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldLft {
    font-size: 10.5px;
    font-size: 12px
  }
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgt {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #DDDDDD;
  display: grid;
  align-items: center;
  height: 39px;
  background-color: var(--white);
  border-radius: 4px;
  justify-content: center;
  border: 1px solid #F3F3F3
}

@media (max-width: 767px) {
  .riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgt {
    font-size: 10.5px;
    font-size: 12px
  }
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgt.activeBorder {
  border: 1px dashed var(--primaryColour)
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgt.dropedBg {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--white);
  background-color: var(--primaryColour)
}

@media (max-width: 767px) {
  .riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgt.dropedBg {
    font-size: 12px;
    font-size: 13px
  }
}

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgtIcn .delSec {
  background-color: #ED7C3C;
  width: 38px;
  height: 39px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: flex
}

  .riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgtIcn .delSec:hover {
    background-color: #DF6B29
  }

.riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgtIcn .arwSec {
  background-color: var(--white);
  width: 38px;
  height: 39px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 4px;
  cursor: grab;
  border: 1px solid var(--primaryBg)
}

  .riasccArea .interChooseSec .interChooseLeft .interChooseField .interChooseFldRgtIcn .arwSec:hover {
    background-color: #eceef5
  }

.riasccArea .interChooseSec .interChooseLeft .interChooseField.interChooseFieldSep {
  grid-template-columns: 90px 1fr 38px
}

@media (max-width: 600px) {
  .riasccArea .interChooseSec .interChooseLeft .interChooseField.interChooseFieldSep {
    grid-template-columns: 70px 1fr 38px
  }
}

.riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea {
  display: flex;
  align-items: center;
  height: 47px;
  width: 100%;
  background-color: #FAFAFA;
  border: 1px solid var(--primaryBg);
  border-radius: 4px;
  margin-bottom: 10px
}

@media (max-width: 600px) {
  .riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea {
    width: 160px
  }
}

.riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea .InterChooseTxt {
  cursor: grab;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text2d);
  background-color: var(--white);
  border: 1px solid var(--primaryBg);
  display: flex;
  align-items: center;
  height: 47px;
  width: 100%;
  border-radius: 4px;
  padding: 5px 12px
}

@media (max-width: 767px) {
  .riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea .InterChooseTxt {
    font-size: 12px;
    font-size: 13px
  }
}

.riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea .InterChooseTxt.pickShdw {
  -webkit-box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.14);
  -moz-box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.14);
  box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.14)
}

.riasccArea .interChooseSec .interChooseRight .InterChooseTxtArea .InterChooseTxt:focus {
  background-color: red
}

.riasccArea .btnParticipate {
  margin-top: 15px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 41px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .riasccArea .btnParticipate {
    font-size: 10.5px;
    font-size: 12px
  }
}

.riasccArea .btnParticipate:hover {
  background-color: var(--primaryColour)
}

@media (max-width: 680px) {
  .riasccArea .btnParticipate {
    margin-top: 5px;
    margin-bottom: 20px
  }
}

@media (max-width: 600px) {
  .InterBtn {
    display: none
  }
}

.InterBtn .btnParticipate {
  margin-top: 15px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 41px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .InterBtn .btnParticipate {
    font-size: 10.5px;
    font-size: 12px
  }
}

.InterBtn .btnParticipate:hover {
  background-color: var(--primaryColour)
}

@media (max-width: 680px) {
  .InterBtn .btnParticipate {
    margin-top: 5px
  }
}

.InterBtnBtn {
  display: none
}

@media (max-width: 600px) {
  .InterBtnBtn {
    display: block
  }
}

.chooseOccupation .para {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43);
  line-height: 26px;
  background-color: #FAFAFA;
  border-radius: 4px;
  padding: 30px 18px
}

@media (max-width: 767px) {
  .chooseOccupation .para {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 600px) {
  .chooseOccupation .para {
    padding: 20px 18px
  }
}

.chooseOccupation .para a {
  color: #3C42ED
}

.chooseOccupation .sInput {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  margin: 12px 0px
}

  .chooseOccupation .sInput svg {
    position: absolute;
    left: 15px
  }

  .chooseOccupation .sInput .inputControl {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    color: var(--text2d);
    padding: 0 32px 0 45px;
    border-radius: 4px;
    width: 100%;
    height: 55px;
    border: solid 1px #F3F3F3;
    background-color: transparent;
    position: relative;
    z-index: 1
  }

@media (max-width: 767px) {
  .chooseOccupation .sInput .inputControl {
    font-size: 12px;
    font-size: 13px
  }
}

.chooseOccupation .sInput .inputControl::placeholder {
  color: var(--text2d)
}

.chooseOccupation .sInput .inputControl.inputControlSep {
  padding: 0 120px 0 17px
}

.chooseOccupation .occupationslist {
  border: 1px solid #F3F3F3;
  border-radius: 4px;
  margin-bottom: 12px
}

  .chooseOccupation .occupationslist .occupationslistTit {
    display: flex
  }

    .chooseOccupation .occupationslist .occupationslistTit .occupationslistNo {
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 16px;
      color: var(--text43);
      padding: 24px 11px
    }

@media (max-width: 767px) {
  .chooseOccupation .occupationslist .occupationslistTit .occupationslistNo {
    font-size: 12px;
    font-size: 13px
  }
}

.chooseOccupation .occupationslist .occupationslistTit .occupationslistCnt {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43);
  padding: 24px 15px;
  border-left: 1px solid #F3F3F3
}

@media (max-width: 767px) {
  .chooseOccupation .occupationslist .occupationslistTit .occupationslistCnt {
    font-size: 12px;
    font-size: 13px
  }
}

.chooseOccupation .occupationslist .occupationslistBody {
  border-top: 1px solid #F3F3F3;
  padding-right: 10px
}

  .chooseOccupation .occupationslist .occupationslistBody .occupationslistInner {
    max-height: 310px
  }

  .chooseOccupation .occupationslist .occupationslistBody .table {
    margin-bottom: 0px
  }

    .chooseOccupation .occupationslist .occupationslistBody .table td {
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 16px;
      color: var(--text43);
      padding-top: 24px;
      padding: 0px;
      border: none
    }

@media (max-width: 767px) {
  .chooseOccupation .occupationslist .occupationslistBody .table td {
    font-size: 12px;
    font-size: 13px
  }
}

.chooseOccupation .occupationslist .occupationslistBody .table .num {
  width: 45px;
  padding-top: 12px;
  text-align: center
}

@media (max-width: 767px) {
  .chooseOccupation .occupationslist .occupationslistBody .table .num {
    width: 41px
  }
}

.chooseOccupation .occupationslist .occupationslistBody .table .numTxt {
  padding-top: 12px;
  padding-left: 15px;
  text-align: left;
  border-left: 1px solid #F3F3F3
}

  .chooseOccupation .occupationslist .occupationslistBody .table .numTxt.numNoItm {
    color: #DDDDDD;
    padding-top: 15px
  }

.chooseOccupation .occupationslist .occupationslistBody .table .numBtm {
  padding-bottom: 20px
}

@media (max-width: 600px) {
  .chooseOccupation .occupationslist .occupationslistBody .table .numBtm {
    padding-bottom: 15px
  }
}

.chooseOccupation .occupationslist .mCSB_scrollTools {
  height: 90%;
  top: 15px
}

  .chooseOccupation .occupationslist .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px;
    background-color: #DDDDDD
  }

  .chooseOccupation .occupationslist .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    background-color: #F3F3F3
  }

.chooseOccupation .searchInput {
  position: relative
}

.chooseOccupation .serDrop {
  position: absolute;
  width: 100%;
  top: 57px;
  background-color: var(--white);
  padding: 19px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.28);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.28);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.28)
}

@media (max-width: 600px) {
  .chooseOccupation .serDrop {
    padding: 10px
  }
}

.chooseOccupation .serDrop .serDropList {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #DDDDDD;
  padding: 0px 30px 17px;
  margin-bottom: 17px
}

@media (max-width: 767px) {
  .chooseOccupation .serDrop .serDropList {
    padding: 0px 30px 14px;
    margin-bottom: 14px
  }
}

@media (max-width: 600px) {
  .chooseOccupation .serDrop .serDropList {
    padding: 0px 10px 9px;
    margin-bottom: 9px
  }
}

.chooseOccupation .serDrop .serDropList.serDropListLst {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: none
}

.chooseOccupation .serDrop .serDropList .serDropName {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .chooseOccupation .serDrop .serDropList .serDropName {
    font-size: 12px;
    font-size: 13px
  }
}

.chooseOccupation .serDrop .serDropList .serDropBtn a {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  color: var(--text43);
  background-color: #F5F6FA;
  width: 96px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .chooseOccupation .serDrop .serDropList .serDropBtn a {
    font-size: 10.5px;
    font-size: 12px
  }
}

.chooseOccupation .serDrop .serDropList .serDropBtn a:hover {
  color: var(--white);
  background-color: var(--primaryColour)
}

.chooseOccupation .addList {
  position: relative
}

  .chooseOccupation .addList a {
    right: 5px;
    top: 5px;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px;
    color: var(--text43);
    background-color: #F5F6FA;
    width: 109px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    padding: 5px;
    z-index: 3;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

@media (max-width: 767px) {
  .chooseOccupation .addList a {
    font-size: 10.5px;
    font-size: 12px
  }
}

.chooseOccupation .addList a:hover {
  color: var(--white);
  background-color: var(--primaryColour)
}

.chooseOccupation .btnParticipate {
  margin-top: 20px
}

@media (max-width: 680px) {
  .chooseOccupation .btnParticipate {
    margin-top: 5px;
    margin-bottom: 20px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody {
  border: 1px solid #dddddd
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 13px
  }

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed {
    flex-direction: column;
    align-items: baseline;
    padding: 15px 13px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedTit {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--primaryColour)
}

@media (max-width: 991px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedTit {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedTit {
    font-size: 13.5px
  }
}

@media (max-width: 680px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedTit {
    font-size: 15px
  }
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedTit {
    margin-bottom: 10px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedBtn a {
  border: 1px solid var(--primaryColour);
  color: var(--primaryColour);
  background-color: #f5f6fa;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 15px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedBtn a {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedBtn a {
    font-size: 12px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtHed .aptitudeWrkshtHedBtn a:hover {
  color: #ffffff;
  background-color: var(--primaryColour)
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble {
  display: flex;
  border-top: 1px solid #DDDDDD
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble.aptitudeWrkshtTbleClr {
    background-color: #FAFAFA
  }

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtGp {
    width: 42px;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 12px;
    color: #ED7C3C;
    text-transform: uppercase;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
  }

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtGp {
    font-size: 9px;
    font-size: 12px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtGp span {
  display: block;
  width: max-content;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  position: absolute
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike {
  padding: 16px 14px;
  border-left: 1px solid #DDDDDD;
  width: 50%
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike {
    width: 100%
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike span, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: #ED7C3C;
  margin-bottom: 5px;
  display: block
}

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike span, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike span {
    font-size: 12px;
    font-size: 13px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike p, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike p, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList {
  display: none
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList ul, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList ul {
    padding-left: 20px
  }

    .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList ul li, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList ul li {
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 16px;
      color: var(--text43);
      padding-bottom: 15px;
      list-style: none;
      position: relative
    }

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList ul li, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList ul li {
    font-size: 12px;
    font-size: 13px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList ul li:last-child, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList ul li:last-child {
  padding-bottom: 0px
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList ul li::after, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList ul li::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 8px;
  left: -20px;
  border-radius: 20px;
  background-color: var(--text43)
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtList.activeList, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtList.activeList {
  display: block
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea {
  position: relative
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropBox, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropBox {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 12px;
    color: var(--primaryColour);
    width: 248px;
    height: 42px;
    display: flex;
    justify-content: space-between;
    background-color: #FAFAFA;
    border: 1px solid #F3F3F3;
    padding: 12px;
    cursor: pointer;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s
  }

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropBox, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropBox {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropBox, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropBox {
    width: 100%
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropBox .aptitudeDropBoxArrow, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropBox .aptitudeDropBoxArrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer;
  margin-right: 10px
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropBox.active svg, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropBox.active svg {
  transform: rotate(-180deg);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField {
  display: none;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.18);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.18);
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.18);
  position: absolute;
  top: 43px;
  width: 248px;
  background-color: var(--white);
  z-index: 1;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField {
    width: 100%
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy {
  max-height: 180px;
  overflow-y: scroll
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy {
    max-height: 160px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar {
  width: 8px;
  margin-left: 5px;
  left: 5px
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar-track, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar-track {
  background: #f5f6fa
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar-thumb, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy::-webkit-scrollbar-thumb {
  background: #dddddd
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul {
  padding-left: 0px;
  margin-bottom: 0px
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li {
    list-style: none
  }

    .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a {
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 14px;
      color: var(--text43);
      text-decoration: none;
      display: block;
      padding: 6px;
      margin-right: 5px
    }

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a {
    font-size: 10.5px;
    font-size: 12px
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a:hover, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField .aptitudeDropFieldBdy ul li a:hover {
  background-color: #fafafa
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeDropBoxArea .aptitudeDropField.open, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeDropBoxArea .aptitudeDropField.open {
  display: block
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtLikeBtn, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtLikeBtn {
  margin-top: 8px
}

  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtLikeBtn a, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtLikeBtn a {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 12px;
    color: var(--white);
    text-transform: uppercase;
    background-color: var(--primaryColour);
    width: 248px;
    height: 42px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s
  }

@media (max-width: 767px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtLikeBtn a, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtLikeBtn a {
    font-size: 9px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtLikeBtn a, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtLikeBtn a {
    width: 100%
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtLike .aptitudeWrkshtLikeBtn a:hover, .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkshtTble .aptitudeWrkshtDLike .aptitudeWrkshtLikeBtn a:hover {
  background-color: #ED7C3C
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkMob {
    display: none
  }
}

.aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkMobShw {
  display: none
}

@media (max-width: 600px) {
  .aptitudeWrksht .aptitudeWrkshtBody .aptitudeWrkMobShw {
    display: block
  }
}

.aptitudeWrksht .aptitudeBotmBtn .btnParticipate {
  margin-top: 20px
}

.managementTit {
  position: relative;
  color: var(--text43);
  margin-bottom: 20px
}

  .managementTit::after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: "";
    width: 72px;
    height: 2px;
    background-color: var(--primaryColour)
  }

  .managementTit h3 {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 18px;
    color: var(--text43);
    padding-bottom: 10px
  }

@media (max-width: 991px) {
  .managementTit h3 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .managementTit h3 {
    font-size: 13.5px
  }
}

@media (max-width: 480px) {
  .managementTit {
    margin-bottom: 10px
  }
}

.managementHdr {
  background-color: #f5f6fa;
  padding: 20px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px
}

@media (max-width: 991px) {
  .managementHdr {
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .managementHdr {
    padding: 13px
  }
}

.managementHdr .coursetit {
  display: flex;
  column-gap: 17px
}

@media (max-width: 991px) {
  .managementHdr .coursetit {
    margin-bottom: 15px
  }
}

@media (max-width: 767px) {
  .managementHdr .coursetit {
    column-gap: 15px;
    margin-bottom: 10px
  }
}

@media (max-width: 480px) {
  .managementHdr .coursetit {
    column-gap: 8px
  }
}

.managementHdr .coursetit .coursePic img {
  border-radius: 8px
}

.managementHdr .coursetit .courseTxt span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .managementHdr .coursetit .courseTxt span {
    font-size: 9px;
    font-size: 12px
  }
}

.managementHdr .coursetit .courseTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .managementHdr .coursetit .courseTxt p {
    font-size: 12px;
    font-size: 13px
  }
}

.managementHdr .coursePay {
  display: flex;
  column-gap: 15px
}

@media (max-width: 767px) {
  .managementHdr .coursePay {
    flex-direction: column
  }
}

@media (max-width: 767px) {
  .managementHdr .coursePay.coursePaid .prz {
    padding: 10px 26px
  }
}

.managementHdr .coursePay .partialBtn {
  border: 1px solid var(--primaryColour);
  color: var(--primaryColour);
  background-color: #f5f6fa;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 15px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .managementHdr .coursePay .partialBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .managementHdr .coursePay .partialBtn {
    font-size: 12px;
    width: 170px
  }
}

.managementHdr .coursePay .partialBtn:hover {
  color: #ffffff;
  background-color: var(--primaryColour)
}

  .managementHdr .coursePay .partialBtn:hover svg path {
    fill: #ffffff
  }

.managementHdr .coursePay .partialBtn svg {
  margin-left: 12px
}

.managementHdr .coursePay .partialBtn.open svg {
  transform: rotate(-180deg);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

.managementHdr .listItemsBtnSec {
  display: flex;
  flex-direction: row;
  column-gap: 15px
}

@media (max-width: 767px) {
  .managementHdr .listItemsBtnSec {
    margin-top: 10px
  }
}

@media (max-width: 480px) {
  .managementHdr .listItemsBtnSec {
    margin-top: 8px
  }
}

.managementHdr .listItemsBtnSec .payNow {
  background-color: #ed7c3c;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  width: 120px;
  height: 40px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .managementHdr .listItemsBtnSec .payNow {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .managementHdr .listItemsBtnSec .payNow {
    font-size: 12px
  }
}

@media (max-width: 345px) {
  .managementHdr .listItemsBtnSec .payNow {
    width: 90px
  }
}

.managementHdr .listItemsBtnSec .payNow:hover {
  background-color: var(--primaryColour)
}

.managementHdr .listItemsBtnSec .prz {
  background-color: var(--primaryColour);
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #ffffff;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 10px 20px;
  text-transform: uppercase
}

@media (max-width: 767px) {
  .managementHdr .listItemsBtnSec .prz {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .managementHdr .listItemsBtnSec .prz {
    font-size: 12px
  }
}

@media (max-width: 345px) {
  .managementHdr .listItemsBtnSec .prz {
    padding: 10px
  }
}

.managementHdr .listItemsPmtRgt {
  display: flex;
  column-gap: 15px;
  justify-content: flex-end
}

@media (max-width: 1199px) {
  .managementHdr .listItemsPmtRgt {
    justify-content: space-between
  }
}

@media (max-width: 991px) {
  .managementHdr .listItemsPmtRgt {
    flex-direction: column
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtDtl {
  display: flex;
  column-gap: 15px
}

@media (max-width: 991px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl {
    justify-content: space-between;
    margin-bottom: 15px
  }
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl {
    flex-direction: column;
    margin-bottom: 5px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate {
  display: flex;
  column-gap: 10px
}

@media (max-width: 991px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate {
    background-color: #ffffff;
    padding: 10px;
    width: 33%;
    border-radius: 4px
  }
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate {
    margin-bottom: 10px;
    width: 217px;
    column-gap: 8px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt span {
    font-size: 9px;
    font-size: 12px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt p {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 991px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtRec {
    align-self: center
  }
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtRec {
    align-self: auto
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtRec a {
  border: 1px solid var(--primaryColour);
  color: var(--primaryColour);
  background-color: #f5f6fa;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 15px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtRec a {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtRec a {
    font-size: 12px;
    width: 217px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtRec a svg {
  margin-right: 5px
}

.managementHdr .listItemsPmtRgt .listItemsPmtRec a:hover {
  color: #ffffff;
  background-color: var(--primaryColour)
}

  .managementHdr .listItemsPmtRgt .listItemsPmtRec a:hover svg path {
    fill: #ffffff
  }

.managementHdr .listItemsPmtRgt .listItemsPmtTrack {
  display: flex;
  column-gap: 10px
}

@media (max-width: 991px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtTrack {
    background-color: #ffffff;
    padding: 10px;
    width: 32%;
    border-radius: 4px
  }
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtTrack {
    margin-bottom: 10px;
    width: 217px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtTrack .listItemsPmtTrackTxt span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtTrack .listItemsPmtTrackTxt span {
    font-size: 9px;
    font-size: 12px
  }
}

.managementHdr .listItemsPmtRgt .listItemsPmtTrack .listItemsPmtTrackTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080
}

@media (max-width: 767px) {
  .managementHdr .listItemsPmtRgt .listItemsPmtTrack .listItemsPmtTrackTxt p {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 1199px) {
  .managementHdr.managementHdrSpc {
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .managementHdr.managementHdrSpc .listItemsBtnSec {
    margin-top: 3px
  }
}

.slipUp {
  background-color: #f5f6fa;
  padding: 20px;
  border-radius: 2px
}

@media (max-width: 991px) {
  .slipUp {
    position: relative
  }
}

@media (max-width: 480px) {
  .slipUp {
    padding: 13px
  }
}

.slipUp .slipUptitleArea {
  display: flex;
  align-items: center
}

@media (max-width: 480px) {
  .slipUp .slipUptitleArea {
    margin-bottom: 15px
  }
}

.slipUp .slipUptitleArea .slipUpTitle {
  position: relative;
  color: var(--text43)
}

  .slipUp .slipUptitleArea .slipUpTitle::after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: "";
    width: 72px;
    height: 2px;
    background-color: var(--primaryColour)
  }

  .slipUp .slipUptitleArea .slipUpTitle h3 {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 18px;
    color: var(--text43);
    padding-bottom: 10px
  }

@media (max-width: 991px) {
  .slipUp .slipUptitleArea .slipUpTitle h3 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .slipUp .slipUptitleArea .slipUpTitle h3 {
    font-size: 13.5px
  }
}

.slipUp .slipUptitleArea .slipUpClose {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer
}

.slipUp .widgetList {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px
}

@media (max-width: 480px) {
  .slipUp .widgetList {
    padding: 13px;
    margin-top: 10px
  }
}

.slipUp .widgetList .listItemArea {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd
}

@media (max-width: 480px) {
  .slipUp .widgetList .listItemArea {
    padding-bottom: 15px;
    margin-bottom: 15px
  }
}

.slipUp .widgetList .listItemArea.listItemVsble .listItems {
  display: flex
}

.slipUp .widgetList .listItemArea.listItemVsble .paidSec {
  display: none
}

.slipUp .widgetList .listItemArea.listItemsLst {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px
}

.slipUp .widgetList .listItemArea .listItems {
  display: none;
  justify-content: space-between;
  column-gap: 15px
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItems {
    flex-direction: column
  }
}

.slipUp .widgetList .listItemArea .listItems .listItemsTxt {
  display: flex
}

  .slipUp .widgetList .listItemArea .listItems .listItemsTxt span {
    display: block;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    color: var(--text43)
  }

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItems .listItemsTxt span {
    font-size: 12px;
    font-size: 13px
  }
}

.slipUp .widgetList .listItemArea .listItems .listItemsTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItems .listItemsTxt p {
    font-size: 12px;
    font-size: 13px
  }
}

.slipUp .widgetList .listItemArea .listItemsBtnSec {
  display: flex;
  flex-direction: row;
  column-gap: 15px
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec {
    margin-top: 10px
  }
}

@media (max-width: 480px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec {
    margin-top: 4px;
    column-gap: 10px
  }
}

.slipUp .widgetList .listItemArea .listItemsBtnSec .payNow {
  background-color: #ed7c3c;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  width: 120px;
  height: 40px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .payNow {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .payNow {
    font-size: 12px
  }
}

@media (max-width: 345px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .payNow {
    width: 90px
  }
}

.slipUp .widgetList .listItemArea .listItemsBtnSec .payNow:disabled {
  cursor: auto;
  opacity: .2
}

  .slipUp .widgetList .listItemArea .listItemsBtnSec .payNow:disabled:hover {
    background-color: #ed7c3c
  }

.slipUp .widgetList .listItemArea .listItemsBtnSec .payNow:hover {
  background-color: var(--primaryColour)
}

.slipUp .widgetList .listItemArea .listItemsBtnSec .prz {
  background-color: var(--primaryColour);
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #ffffff;
  width: 111px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .prz {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .prz {
    font-size: 12px
  }
}

@media (max-width: 345px) {
  .slipUp .widgetList .listItemArea .listItemsBtnSec .prz {
    width: 100px
  }
}

.slipUp .widgetList .listItemArea .paidSec {
  display: flex;
  justify-content: space-between;
  column-gap: 5px
}

@media (max-width: 1199px) {
  .slipUp .widgetList .listItemArea .paidSec {
    flex-direction: column
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsTit {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43);
  align-self: center
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsTit {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 1199px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsTit {
    margin-bottom: 15px;
    align-self: auto
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtRgt {
  display: flex;
  column-gap: 15px;
  justify-content: flex-end
}

@media (max-width: 1199px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRgt {
    justify-content: space-between
  }
}

@media (max-width: 991px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRgt {
    flex-direction: column
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl {
  display: flex;
  column-gap: 15px
}

@media (max-width: 991px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl {
    justify-content: space-between;
    margin-bottom: 15px
  }
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl {
    flex-direction: column;
    margin-bottom: 5px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate {
  display: flex;
  column-gap: 10px
}

@media (max-width: 991px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate {
    background-color: #f5f6fa;
    padding: 10px;
    width: 31%;
    border-radius: 4px
  }
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate {
    margin-bottom: 10px;
    width: 217px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt span {
    font-size: 9px;
    font-size: 12px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtDtl .listItemsPmtDate .listItemsPmtDateTxt p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack {
  display: flex;
  column-gap: 10px
}

@media (max-width: 991px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack {
    background-color: #f5f6fa;
    padding: 10px;
    width: 33%;
    border-radius: 4px
  }
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack {
    margin-bottom: 10px;
    width: 217px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack .listItemsPmtTrackTxt span {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 12px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack .listItemsPmtTrackTxt span {
    font-size: 9px;
    font-size: 12px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack .listItemsPmtTrackTxt p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtTrack .listItemsPmtTrackTxt p {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 991px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec {
    align-self: center
  }
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec {
    align-self: auto
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a {
  border: 1px solid var(--primaryColour);
  color: var(--primaryColour);
  background-color: #f5f6fa;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 15px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a {
    font-size: 12px;
    width: 217px
  }
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a svg {
  margin-right: 5px
}

.slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a:hover {
  color: #ffffff;
  background-color: var(--primaryColour)
}

  .slipUp .widgetList .listItemArea .paidSec .listItemsPmtRec a:hover svg path {
    fill: #ffffff
  }

.slipUp .widgetList .listItemArea .paidSec .payNow {
  color: #ed7c3c;
  background-color: #ffffff;
  border: 1px solid #ed7c3c;
  cursor: auto;
  opacity: 1
}

  .slipUp .widgetList .listItemArea .paidSec .payNow:hover {
    color: #ed7c3c;
    background-color: #ffffff;
    border: 1px solid #ed7c3c
  }

  .slipUp .widgetList .listItemArea .paidSec .payNow:disabled {
    cursor: auto;
    opacity: 1
  }

    .slipUp .widgetList .listItemArea .paidSec .payNow:disabled:hover {
      color: #ed7c3c;
      background-color: #ffffff;
      opacity: 1
    }

.slipUp .gstTxt {
  margin-top: 20px
}

  .slipUp .gstTxt p {
    font-style: italic;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    color: #808080
  }

@media (max-width: 767px) {
  .slipUp .gstTxt p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.widgetCardSpc {
  margin-top: 8px
}

@media (max-width: 991px) {
  .widgetCardSpc {
    padding: 15px
  }
}

@media (max-width: 480px) {
  .widgetCardSpc {
    padding: 15px 0px
  }
}

.payFullCus {
  display: flex;
  font-style: italic;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #ED7C3C
}

@media (max-width: 767px) {
  .payFullCus {
    font-size: 12px;
    font-size: 13px
  }
}

.payFullCus svg {
  margin-right: 18px
}

@media (max-width: 767px) {
  .payFullCus svg {
    margin-right: 10px
  }
}

.feeAmntGst {
  font-style: italic;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #808080;
  margin: 20px 0px
}

@media (max-width: 767px) {
  .feeAmntGst {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 600px) {
  .feeAmntGst {
    margin: 10px 0px
  }
}

.workChartRow {
  margin-right: -16px;
  margin-left: -16px;
  border-bottom: solid 1px #f3f3f3;
  display: grid;
  grid-template-columns: 120px auto 120px;
  position: relative
}

@media (max-width: 991px) {
  .workChartRow {
    grid-template-columns: 85px auto 85px
  }
}

.workChartRow::before {
  position: absolute;
  bottom: 370px;
  content: "";
  width: 100%;
  height: 0px;
  border: dashed 1px #f3f3f3
}

.workChartRow .gridFirst {
  position: relative;
  min-height: 350px
}

  .workChartRow .gridFirst .gRowY {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px;
    color: var(--text2d);
    text-align: center;
    width: 320px;
    position: absolute;
    bottom: 0;
    left: 25px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
  }

@media (max-width: 767px) {
  .workChartRow .gridFirst .gRowY {
    font-size: 10.5px;
    font-size: 12px
  }
}

.workChartRow .gridBody {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 450px;
  height: 100%
}

  .workChartRow .gridBody .gtdRow {
    display: flex;
    width: 100%;
    margin: 0 auto 10px auto;
    max-width: 700px
  }

    .workChartRow .gridBody .gtdRow .gth {
      display: flex;
      justify-content: center;
      flex: 1;
      font-family: var(--primaryfont);
      font-weight: var(--semibold);
      font-size: 12px;
      color: #527383
    }

@media (max-width: 767px) {
  .workChartRow .gridBody .gtdRow .gth {
    font-size: 9px;
    font-size: 12px
  }
}

.workChartRow .gridBody .gTable {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative
}

  .workChartRow .gridBody .gTable .gtr {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px;
    color: #527383;
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative
  }

@media (max-width: 767px) {
  .workChartRow .gridBody .gTable .gtr {
    font-size: 10.5px;
    font-size: 12px
  }
}

.workChartRow .gridBody .gTable .gtr::after {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - 42px);
  background-color: #f3f3f3;
  bottom: 0
}

.workChartRow .gridBody .gTable .gtProgresRow {
  position: absolute;
  left: 0;
  right: 0;
  width: 86%;
  height: 20px;
  bottom: 0;
  top: 0;
  margin: auto auto
}

@media (max-width: 991px) {
  .workChartRow .gridBody .gTable .gtProgresRow {
    width: 97%
  }
}

.workChartRow .gridBody .gTable .gtProgresRow .slideIco {
  cursor: grab;
  width: 30px;
  height: 40px;
  position: relative;
  display: flex;
  flex-direction: column
}

  .workChartRow .gridBody .gTable .gtProgresRow .slideIco::before {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    content: "";
    width: 28px;
    height: 28px;
    background-image: url(../images/selecter.png);
    background-repeat: no-repeat;
    background-position: center
  }

  .workChartRow .gridBody .gTable .gtProgresRow .slideIco::after {
    position: absolute;
    top: -54px;
    left: -7px;
    content: "";
    width: 44px;
    height: 52px;
    background-image: url(../images/drgIco.png);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 5px 9px 0 rgba(32,33,36,0.28);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

  .workChartRow .gridBody .gTable .gtProgresRow .slideIco:hover::after {
    opacity: 1;
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }

.workChartRow .gridLast {
  min-height: 350px;
  position: relative
}

  .workChartRow .gridLast .gRowY {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 14px;
    color: var(--text2d);
    text-align: center;
    width: 320px;
    position: absolute;
    bottom: 0;
    left: calc(100% - 65px);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
  }

@media (max-width: 767px) {
  .workChartRow .gridLast .gRowY {
    font-size: 10.5px;
    font-size: 12px
  }
}

.scoreW {
  padding: 18px 0 0 0;
  display: flex;
  justify-content: center;
  font-family: var(--primaryfont);
  font-weight: var(--semibold);
  font-size: 14px;
  color: var(--text2d)
}

@media (max-width: 767px) {
  .scoreW {
    font-size: 10.5px;
    font-size: 12px
  }
}

.scoreW span {
  padding-left: 10px;
  color: var(--secColour)
}

.paymentSuccSection {
  background-color: #fff;
  padding: 40px 40px 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 120px;
  border-radius: 8px
}

@media (max-width: 1199px) {
  .paymentSuccSection {
    column-gap: 60px
  }
}

@media (max-width: 991px) {
  .paymentSuccSection {
    column-gap: 30px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection {
    column-gap: 30px;
    padding: 25px
  }
}

@media (max-width: 767px) {
  .paymentSuccSection {
    grid-template-columns: 1fr;
    display: block;
    padding: 15px
  }
}

@media (max-width: 480px) {
  .paymentSuccSection {
    padding: 0
  }
}

.paymentSuccSection .paymentSuccess {
  text-align: center
}

  .paymentSuccSection .paymentSuccess .buttonGroup {
    display: flex;
    align-items: center;
    justify-content: center
  }

    .paymentSuccSection .paymentSuccess .buttonGroup .dashBoradBtn {
      width: 180px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-family: var(--primaryfont);
      font-weight: var(--regular);
      font-size: 14px;
      color: #FAFAFA;
      background-color: #527383;
      margin-right: 15px;
      transition: all .4s
    }

@media (max-width: 767px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .dashBoradBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .dashBoradBtn {
    font-size: 13px
  }
}

@media (max-width: 480px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .dashBoradBtn {
    width: 150px;
    height: 35px
  }
}

.paymentSuccSection .paymentSuccess .buttonGroup .dashBoradBtn:hover {
  background-color: #274c5f
}

.paymentSuccSection .paymentSuccess .buttonGroup .feeBtn {
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #FAFAFA;
  background-color: #ED7C3C;
  transition: all .4s
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .feeBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .feeBtn {
    font-size: 13px
  }
}

@media (max-width: 480px) {
  .paymentSuccSection .paymentSuccess .buttonGroup .feeBtn {
    width: 100px;
    height: 35px
  }
}

.paymentSuccSection .paymentSuccess .buttonGroup .feeBtn:hover {
  background-color: #b95217
}

.paymentSuccSection .paymentSuccess img {
  margin-bottom: 30px
}

.paymentSuccSection .paymentSuccess h1 {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 24px;
  color: #527383;
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentSuccess h1 {
    font-size: 18px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentSuccess h1 {
    font-size: 20px
  }
}

.paymentSuccSection .paymentSuccess p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #ED7C3C;
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentSuccess p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentSuccess p {
    font-size: 15px
  }
}

@media (max-width: 480px) {
  .paymentSuccSection .paymentSuccess p {
    font-size: 13px
  }
}

.paymentSuccSection .paymentDetailSection {
  margin: auto 0
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection {
    margin-top: 25px
  }
}

.paymentSuccSection .paymentDetailSection h2 {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--text43);
  position: relative
}

@media (max-width: 991px) {
  .paymentSuccSection .paymentDetailSection h2 {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection h2 {
    font-size: 13.5px
  }
}

.paymentSuccSection .paymentDetailSection h2::after {
  content: " ";
  position: absolute;
  width: 75px;
  height: 2px;
  background-color: #527383;
  bottom: -8px;
  left: 0
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget {
  cursor: pointer;
  overflow: hidden;
  margin-top: 35px;
  padding: 25px;
  background-color: #F5F6FA;
  border-radius: 2px
}

@media (max-width: 1199px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget {
    padding: 20px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget {
    padding: 15px
  }
}

@media (max-width: 600px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget {
    margin-top: 25px
  }
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 190px 1fr
}

@media (max-width: 991px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList {
    grid-template-columns: 160px 1fr
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList {
    grid-template-columns: 150px 1fr
  }
}

@media (max-width: 600px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList {
    grid-template-columns: 135px 1fr
  }
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList p {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol {
  display: flex;
  align-items: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol {
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol {
    font-size: 10.5px;
    font-size: 12px
  }
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
  padding-left: 24px;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 991px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 768px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
    padding-left: 15px
  }
}

@media (max-width: 600px) {
  .paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value {
    padding-left: 10px;
    font-size: 12px
  }
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .value.paymentFeeclr {
  color: #ED7C3C
}

.paymentSuccSection .paymentDetailSection .paymentDetailWidget .paymentList .paymentListCol .eDoted {
  margin-left: auto
}

.motivatorWidget .motivatorRow .mvTitle {
  min-height: 65px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #f3f3f3;
  border-bottom: none
}

  .motivatorWidget .motivatorRow .mvTitle h2 {
    color: #2d2d2d;
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px
  }

@media (max-width: 767px) {
  .motivatorWidget .motivatorRow .mvTitle h2 {
    font-size: 12px;
    font-size: 13px
  }
}

.motivatorWidget .motivatorRow .mvTitle .mvBtnLink {
  cursor: pointer;
  padding: 0 15px;
  height: 34px;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  color: var(--primaryColour);
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  border: solid 1px var(--primaryColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
  .motivatorWidget .motivatorRow .mvTitle .mvBtnLink {
    font-size: 9px;
    font-size: 12px
  }
}

.motivatorWidget .motivatorRow .mvTitle .mvBtnLink:hover {
  color: #fafafa;
  background-color: var(--primaryColour)
}

.motivatorWidget .motivatorRow table {
  width: 100%;
  border: solid 1px #f3f3f3
}

  .motivatorWidget .motivatorRow table tr th {
    padding: 14px;
    color: var(--primaryColour);
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px
  }

@media (max-width: 767px) {
  .motivatorWidget .motivatorRow table tr th {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .motivatorRow table tr td {
  padding: 14px;
  color: var(--text43);
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px
}

@media (max-width: 767px) {
  .motivatorWidget .motivatorRow table tr td {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .motivatorRow table .mvCheckRow {
  display: flex;
  position: relative
}

  .motivatorWidget .motivatorRow table .mvCheckRow label {
    cursor: pointer;
    min-height: 24px;
    display: flex;
    align-items: center;
    padding: 0;
    color: var(--text43);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    position: relative;
    padding-left: 32px;
    margin-bottom: 0
  }

@media (max-width: 767px) {
  .motivatorWidget .motivatorRow table .mvCheckRow label {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .motivatorRow table .mvCheckRow label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: solid 1px #dddddd;
  border-radius: 2px;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s
}

.motivatorWidget .motivatorRow table .mvCheckRow label::after {
  width: 13px;
  height: 7px;
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  margin: 0;
  width: 13px;
  height: 7px;
  border: solid 2px #fafafa;
  border-right: none;
  border-top: none;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  opacity: 0;
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.motivatorWidget .motivatorRow table .mvCheckRow label.checked::before {
  border-color: var(--primaryColour);
  background-color: var(--primaryColour)
}

.motivatorWidget .motivatorRow table .mvCheckRow label.checked::after {
  opacity: 1
}

.motivatorWidget .motivatorRow table .mvCheckRow input {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1
}

  .motivatorWidget .motivatorRow table .mvCheckRow input:checked ~ label::before {
    border-color: var(--primaryColour);
    background-color: var(--primaryColour)
  }

  .motivatorWidget .motivatorRow table .mvCheckRow input:checked ~ label::after {
    opacity: 1
  }

.motivatorWidget .mvContent {
  padding: 15px;
  border: solid 1px #f3f3f3
}

  .motivatorWidget .mvContent p {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 14px;
    line-height: 24px;
    color: #434343;
    margin-bottom: 12px
  }

@media (max-width: 767px) {
  .motivatorWidget .mvContent p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .mvContent .mvContentCard {
  padding: 15px 15px;
  background-color: #f5f6fa;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-bottom: 22px
}

  .motivatorWidget .mvContent .mvContentCard ul {
    padding: 0;
    margin: 0
  }

    .motivatorWidget .mvContent .mvContentCard ul li {
      padding-left: 20px;
      margin-bottom: 10px;
      position: relative;
      font-family: var(--primaryfont);
      font-weight: var(--medium);
      font-size: 14px;
      color: #527383;
      list-style: none
    }

@media (max-width: 767px) {
  .motivatorWidget .mvContent .mvContentCard ul li {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .mvContent .mvContentCard ul li::after {
  position: absolute;
  left: 0;
  top: 6px;
  content: "";
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #527383
}

.motivatorWidget .mvContent .mvContentCard ul li:last-child {
  margin-bottom: 0
}

.motivatorWidget .mvContent .mvContentCard p {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  line-height: 24px;
  color: #527383;
  margin-bottom: 0
}

@media (max-width: 767px) {
  .motivatorWidget .mvContent .mvContentCard p {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .mvTextRow .mvtextLabel {
  color: #2d2d2d;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 16px
}

@media (max-width: 767px) {
  .motivatorWidget .mvTextRow .mvtextLabel {
    font-size: 12px;
    font-size: 13px
  }
}

.motivatorWidget .mvTextRow textarea, .motivatorWidget .mvTextRow .textarea {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #808080;
  padding: 10px 18px;
  resize: none;
  display: block;
  width: 100%;
  height: 140px;
  background-color: #fff;
  border: solid 1px #dddddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

@media (max-width: 767px) {
  .motivatorWidget .mvTextRow textarea, .motivatorWidget .mvTextRow .textarea {
    font-size: 12px;
    font-size: 13px
  }
}

.motivatorWidget .mvBtn {
  cursor: pointer;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #fafafa;
  min-width: 160px;
  width: fit-content;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background-color: var(--secColour);
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none
}

@media (max-width: 767px) {
  .motivatorWidget .mvBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

.motivatorWidget .mvBtn:hover {
  background-color: var(--primaryColour)
}

.careerDetailSection {
  display: flex;
  flex-direction: column;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 16px
}

  .careerDetailSection .studentDetailsHead {
    padding: 16px 25px;
    display: grid;
    grid-template-columns: 1fr 40px;
    cursor: pointer
  }

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsHead {
    padding: 16px
  }
}

.careerDetailSection .studentDetailsHead .headTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--text43);
  align-self: center
}

@media (max-width: 991px) {
  .careerDetailSection .studentDetailsHead .headTitle {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsHead .headTitle {
    font-size: 13.5px
  }
}

.careerDetailSection .studentDetailsHead .titleControl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #315263
}

  .careerDetailSection .studentDetailsHead .titleControl svg {
    position: relative;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

  .careerDetailSection .studentDetailsHead .titleControl.active svg {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
  }

.careerDetailSection .studentDetailsBody {
  display: none
}

  .careerDetailSection .studentDetailsBody hr {
    border-color: #f3f3f3;
    margin-bottom: 0;
    margin-top: 0
  }

  .careerDetailSection .studentDetailsBody.open {
    display: block
  }

  .careerDetailSection .studentDetailsBody .instructorDetailCard {
    padding: 15px 24px 25px
  }

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard {
    padding: 15px 15px 15px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--text43)
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard p {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard p {
    font-size: 13px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec {
  background-color: #fff;
  border: 1px solid #f3f3f3;
  padding: 8px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .studentName {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 18px;
    color: var(--text43);
    display: flex;
    align-items: center;
    padding-right: 8px
  }

@media (max-width: 991px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .studentName {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .studentName {
    font-size: 13.5px
  }
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .studentName {
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn {
  display: flex
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn {
    width: 64px;
    height: 48px;
    border-radius: 2px;
    border: 1px solid #dddddd;
    color: var(--text43);
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    position: relative
  }

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn {
    width: 40px;
    height: 35px;
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn .tooltip-text {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 4px;
  min-width: 165px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #fff;
  color: #2d2d2d;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  bottom: calc((100%) + 8px);
  right: 10px;
  z-index: 9;
  box-shadow: -1px 6px 13px 0px rgba(0,0,0,0.18);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn .tooltip-text {
    font-size: 10.5px;
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn .tooltip-text::after {
  position: absolute;
  bottom: -10px;
  right: 20px;
  margin-left: -5px;
  width: 0;
  border-top: 10px solid #fff;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: " "
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .icfBtn:hover .tooltip-text {
  display: flex
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn {
  width: 64px;
  height: 48px;
  border-radius: 3px;
  border: 1px solid #dddddd;
  color: var(--text43);
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn {
    font-size: 12px;
    font-size: 13px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn.selectBtn {
  background-color: #315263;
  color: #fff;
  border-color: #315263
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn {
    width: 40px;
    height: 35px;
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn .tooltip-text {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 4px;
  min-width: 165px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #fff;
  color: black;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 14px;
  bottom: calc((100%) + 8px);
  right: 10px;
  box-shadow: -1px 6px 13px 0px rgba(0,0,0,0.18);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn .tooltip-text {
    font-size: 10.5px;
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn .tooltip-text::after {
  position: absolute;
  bottom: -10px;
  right: 20px;
  margin-left: -5px;
  width: 0;
  border-top: 10px solid #fff;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: " "
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .instructortDetailSec .skillBtn .pcfBtn:hover .tooltip-text {
  display: flex
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .updateBtn {
  background-color: #ed7c3c;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: var(--white);
  border: none;
  width: 132px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  margin-left: auto;
  margin-top: 15px
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .updateBtn {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .updateBtn {
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .updateBtn:hover {
  background-color: var(--primaryColour)
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock {
  margin-top: 15px;
  border: 1px solid #dddddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 40px;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
  }

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead {
    padding: 8px;
    grid-template-columns: 1fr 30px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .headTitleSec {
  display: flex;
  column-gap: 11px;
  align-self: center
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .headTitleSec {
    display: block
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .headTitleSec .headTitle {
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--text43);
  align-self: center
}

@media (max-width: 991px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .headTitleSec .headTitle {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .headTitleSec .headTitle {
    font-size: 13.5px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  background-color: #fff;
  border: solid 1px #dddddd
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 2px;
    background-color: #000000;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 14px;
    background-color: #000000;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s
  }

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn.active, .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn:hover {
    background-color: #315263;
    border-color: #315263
  }

    .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn.active::before, .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn.active::after, .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn:hover::before, .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn:hover::after {
      background-color: #fff
    }

    .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .occupationDetailHead .actionBtn.active::before {
      opacity: 0
    }

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody {
  display: none;
  border-top: 1px solid #dddddd;
  padding: 15px 12px
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent {
    margin-top: 15px
  }

    .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent span {
      font-family: var(--primaryfont);
      font-weight: var(--regular);
      font-size: 16px;
      color: #2d2d2d;
      align-self: center
    }

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent span {
    font-size: 12px;
    font-size: 13px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent .ordinancetDetailSec {
  background-color: #fff;
  border: 1px solid #dddddd;
  padding: 3px 6px;
  border-radius: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent .ordinancetDetailSec .ordinanceItem {
    display: flex;
    padding: 6px 25px 6px 10px;
    border-radius: 2px;
    border: 1px solid #dddddd;
    position: relative;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 16px;
    color: #808080;
    background: #f5f6fa;
    margin-right: 6px;
    margin-bottom: 3px;
    margin-top: 3px
  }

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent .ordinancetDetailSec .ordinanceItem {
    font-size: 12px;
    font-size: 13px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent .ordinancetDetailSec .ordinanceItem .closeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  right: 2px;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .ordinanceContent .ordinancetDetailSec .ordinanceItem .closeBtn:hover {
    background-color: #fff
  }

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .updateBtn {
  background-color: #ed7c3c;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--white);
  border: none;
  width: 132px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  margin-left: auto;
  margin-top: 15px
}

@media (max-width: 767px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .updateBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 680px) {
  .careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .updateBtn {
    font-size: 12px
  }
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody .updateBtn:hover {
  background-color: var(--primaryColour)
}

.careerDetailSection .studentDetailsBody .instructorDetailCard .occupationBlock .ordinanceBody.open {
  display: block
}

.careerDetailSection .personalityCard {
  padding: 22px 20px;
  display: grid;
  grid-template-columns: 600px auto;
  column-gap: 15px;
  -moz-column-gap: 15px
}

@media (max-width: 1279px) {
  .careerDetailSection .personalityCard {
    display: flex;
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .careerDetailSection .personalityCard {
    padding: 22px 20px 0px
  }
}

@media (max-width: 480px) {
  .careerDetailSection .personalityCard.interPersonalityCard {
    padding: 22px 10px 0px
  }
}

.careerDetailSection .personalityCard .cardContent p {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  margin-bottom: 14px
}

@media (max-width: 767px) {
  .careerDetailSection .personalityCard .cardContent p {
    font-size: 12px;
    font-size: 13px
  }
}

.careerDetailSection .personalityCard .cardContent strong {
  display: block;
  font-family: var(--primaryfont);
  font-weight: var(--medium);
  font-size: 18px;
  color: #2d2d2d;
  margin-bottom: 15px
}

@media (max-width: 991px) {
  .careerDetailSection .personalityCard .cardContent strong {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .careerDetailSection .personalityCard .cardContent strong {
    font-size: 13.5px
  }
}

.careerDetailSection .personalityCard .cardContent ul {
  padding-left: 0
}

@media (max-width: 480px) {
  .careerDetailSection .personalityCard .cardContent ul {
    margin-bottom: 0px
  }
}

.careerDetailSection .personalityCard .cardContent ul li {
  position: relative;
  padding-left: 20px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  line-height: 26px;
  color: #434343;
  list-style-type: none;
  margin-bottom: 15px
}

@media (max-width: 767px) {
  .careerDetailSection .personalityCard .cardContent ul li {
    font-size: 12px;
    font-size: 13px
  }
}

.careerDetailSection .personalityCard .cardContent ul li:last-child {
  margin-bottom: 0px
}

.careerDetailSection .personalityCard .cardContent ul li::before {
  position: absolute;
  left: 0;
  top: 8px;
  content: "";
  width: 9px;
  height: 9px;
  background-color: #ed7c3c;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

.careerDetailSection .personalityCard .cardImage {
  position: relative
}

@media (max-width: 1279px) {
  .careerDetailSection .personalityCard .cardImage {
    order: -1;
    margin-bottom: 15px
  }
}

.careerDetailSection .personalityCard .cardImage img {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px
}

.careerDetailSection .personalityCard .cardImage.instCardImage {
  order: 1
}

.selectAccount {
  height: calc((100vh) - 69px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f6fa;
  padding: 10px
}

@media (max-width: 767px) {
  .selectAccount {
    height: calc((100vh) - 58px)
  }
}

.widgetselectAccount {
  background-color: var(--white)
}

.selectAccountArea {
  width: 422px;
  padding: 20px 32px;
  background-color: var(--white);
  border-radius: 12px
}

@media (max-width: 680px) {
  .selectAccountArea {
    padding: 20px
  }
}

.selectAccountArea .selectAccountTop {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-bottom: 15px
}

  .selectAccountArea .selectAccountTop .selectAccountTopImg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #CEF9E2
  }

  .selectAccountArea .selectAccountTop .selectAccountTopText {
    font-family: var(--primaryfont);
    font-weight: var(--semibold);
    font-size: 18px;
    color: #707070
  }

@media (max-width: 991px) {
  .selectAccountArea .selectAccountTop .selectAccountTopText {
    font-size: 16px
  }
}

@media (max-width: 767px) {
  .selectAccountArea .selectAccountTop .selectAccountTopText {
    font-size: 13.5px
  }
}

.selectAccountArea .selectAccountPra {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 16px;
  color: #707070;
  line-height: 26px;
  margin-bottom: 23px
}

@media (max-width: 767px) {
  .selectAccountArea .selectAccountPra {
    font-size: 12px;
    font-size: 13px
  }
}

@media (max-width: 767px) {
  .selectAccountArea .selectAccountPra {
    margin-bottom: 15px
  }
}

.selectAccountArea .selectAccountBottom {
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 12px;
  color: #707070;
  margin-top: 14px
}

@media (max-width: 767px) {
  .selectAccountArea .selectAccountBottom {
    font-size: 9px;
    font-size: 12px
  }
}

.selectAccountArea .selectAccountBottom span {
  color: #527383;
  color: var(--primaryColour);
  text-decoration: underline;
  cursor: pointer
}

.selectAccountArea .pro-lst-spc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  border: 1px solid #F3F3F3;
  border-radius: 6px;
  padding: 17px 20px;
  margin-bottom: 4px
}

  .selectAccountArea .pro-lst-spc .plsBtn {
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    padding: 0
  }

  .selectAccountArea .pro-lst-spc .title {
    font-family: var(--primaryfont);
    font-weight: var(--medium);
    font-size: 16px;
    color: #2d2d2d
  }

@media (max-width: 767px) {
  .selectAccountArea .pro-lst-spc .title {
    font-size: 12px;
    font-size: 13px
  }
}

.selectAccountArea .pro-lst-spc .title span {
  margin-top: 9px;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #707070;
  display: block
}

@media (max-width: 767px) {
  .selectAccountArea .pro-lst-spc .title span {
    font-size: 10.5px;
    font-size: 12px
  }
}

.selectAccountArea .pro-lst-spc .checkcontainer {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  color: #808080;
  user-select: none;
  margin: 0px;
  padding: 13px;
  min-height: 25px
}

@media (max-width: 680px) {
  .selectAccountArea .pro-lst-spc .checkcontainer {
    min-height: 40px
  }
}

.selectAccountArea .pro-lst-spc .checkcontainer.checkActive {
  background-color: var(--primaryColour)
}

.selectAccountArea .pro-lst-spc .checkcontainer.checkcontainerLst {
  margin-bottom: 0px
}

.selectAccountArea .pro-lst-spc .checkcontainer .checkOpacity {
  z-index: 2
}

.selectAccountArea .pro-lst-spc .checkcontainer input {
  height: auto;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0
}

  .selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkmark {
    background-color: var(--primaryColour);
    border-radius: 50%;
    border: 1px solid #F3F3F3
  }

    .selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkmark:after {
      display: block;
      border: solid var(--white);
      border-width: 0 2px 2px 0
    }

  .selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkmarktxt {
    color: var(--white);
    font-size: 15px;
    position: relative
  }

@media (max-width: 680px) {
  .selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkmarktxt {
    font-size: 12px
  }
}

.selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkActive {
  background-color: var(--primaryColour);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px
}

.selectAccountArea .pro-lst-spc .checkcontainer input:checked ~ .checkcontainer {
  background-color: var(--primaryColour)
}

.selectAccountArea .pro-lst-spc .checkcontainer .checkmarktxt {
  color: var(--text2d);
  margin-left: 35px;
  font-size: 16px;
  font-weight: 400;
  display: block
}

@media (max-width: 680px) {
  .selectAccountArea .pro-lst-spc .checkcontainer .checkmarktxt {
    font-size: 13px
  }
}

.selectAccountArea .pro-lst-spc .checkcontainer .checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 26px;
  width: 26px;
  background-color: var(--white);
  border-radius: 50%;
  border: 1px solid #F3F3F3;
  background-repeat: no-repeat;
  background-position: center
}

  .selectAccountArea .pro-lst-spc .checkcontainer .checkmark::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    width: 5px;
    height: 10px;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
  }

.studentLanding {
  background-color: #FAFAFA;
  padding-top: 30px;
  position: relative
}

@media (max-width: 991px) {
  .studentLanding {
    padding-top: 20px
  }
}

@media (max-width: 767px) {
  .studentLanding {
    padding-top: 8px
  }
}

.studentLanding .bgImg {
  position: absolute;
  right: -139px;
  top: -71px;
  width: 370px
}

@media (max-width: 991px) {
  .studentLanding .bgImg {
    display: none
  }
}

.studentLanding .footerSection {
  padding: 10px 10px 30px 10px
}

  .studentLanding .footerSection .socialMediaIcon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap
  }

@media (max-width: 767px) {
  .studentLanding .footerSection .socialMediaIcon {
    margin-bottom: 8px
  }
}

.studentLanding .footerSection .socialMediaIcon .icon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center
}

  .studentLanding .footerSection .socialMediaIcon .icon ul li {
    cursor: pointer;
    margin-right: 14px
  }

@media (max-width: 991px) {
  .studentLanding .footerSection .socialMediaIcon .icon ul li {
    margin-right: 10px
  }
}

.studentLanding .footerSection .socialMediaIcon .icon ul li:last-child {
  margin-right: 0px
}

.studentLanding .footerSection .socialMediaIcon .icon ul li:hover a svg path {
  fill: #ED7C3C
}

.studentLanding .footerSection .socialMediaIcon .links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center
}

  .studentLanding .footerSection .socialMediaIcon .links ul li {
    margin-right: 100px
  }

@media (max-width: 991px) {
  .studentLanding .footerSection .socialMediaIcon .links ul li {
    margin-right: 10px
  }
}

.studentLanding .footerSection .socialMediaIcon .links ul li:last-child {
  margin-right: 0px
}

.studentLanding .footerSection .socialMediaIcon .links ul li:hover a {
  cursor: pointer;
  color: #ED7C3C
}

.studentLanding .footerSection .socialMediaIcon .links ul li a {
  font-size: 16px;
  font-weight: 400;
  color: #2d2d2d
}

@media (max-width: 991px) {
  .studentLanding .footerSection .socialMediaIcon .links ul li a {
    font-size: 14px
  }
}

.studentLanding .footerSection .policyCo {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap
}

@media (max-width: 991px) {
  .studentLanding .footerSection .policyCo {
    justify-content: start
  }
}

.studentLanding .footerSection .policyCo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center
}

  .studentLanding .footerSection .policyCo ul li {
    margin-right: 46px
  }

@media (max-width: 991px) {
  .studentLanding .footerSection .policyCo ul li {
    margin-right: 10px
  }
}

.studentLanding .footerSection .policyCo ul li:last-child {
  margin-right: 0px
}

.studentLanding .footerSection .policyCo ul li:hover a {
  cursor: pointer;
  color: #2D2D2D
}

.studentLanding .footerSection .policyCo ul li a {
  font-size: 14px;
  font-weight: 400;
  color: #DDDDDD
}

@media (max-width: 991px) {
  .studentLanding .footerSection .policyCo ul li a {
    font-size: 12px
  }
}

.studentLanding .welcomeVedatma {
  min-height: calc((100vh) - 218px)
}

  .studentLanding .welcomeVedatma .welcomeVeda {
    position: relative;
    border-radius: 29px;
    overflow: hidden;
    margin-bottom: 76px
  }

    .studentLanding .welcomeVedatma .welcomeVeda::before {
      position: absolute;
      content: "";
      opacity: .2;
      z-index: 1;
      width: 100%;
      padding: 20px;
      border: 20px solid #fff;
      height: 100%;
      background-image: url(../images/bgSt.jpg)
    }

    .studentLanding .welcomeVedatma .welcomeVeda::after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      opacity: .1;
      width: 100%;
      height: 100%;
      border-radius: 29px
    }

    .studentLanding .welcomeVedatma .welcomeVeda .content {
      padding: 80px 50px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      transition: ease-in-out .4s;
      position: relative
    }

@media (max-width: 991px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content {
    padding: 10px 20px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8)
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent {
  z-index: 1;
  position: relative
}

  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

    .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .leftHead {
      font-size: 26px;
      font-weight: 600;
      line-height: 35px;
      color: #2D2D2D;
      margin-bottom: 12px
    }

@media (max-width: 991px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .leftHead {
    font-size: 23px;
    line-height: 30px
  }
}

@media (max-width: 767px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .leftHead {
    font-size: 20px;
    line-height: 28px
  }
}

@media (max-width: 480px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .leftHead {
    font-size: 18px;
    line-height: 26px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .rightHead {
  border-radius: 4px;
  border: 1px solid #DCDCDC;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  margin-right: -36px
}

@media (max-width: 1279px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .rightHead {
    margin-right: 0px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .rightHead:hover {
  background-color: #ED7C3C;
  cursor: pointer
}

  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .header .rightHead:hover svg path {
    fill: #fff
  }

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .subHead {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #2D2D2D;
  margin-bottom: 24px
}

@media (max-width: 991px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .subHead {
    font-size: 14px;
    line-height: 18px
  }
}

@media (max-width: 767px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .subHead {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 12px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu {
  border-radius: 16px;
  background-color: #fff;
  padding: 20px 32px;
  box-shadow: 0px 2px 6px #d6d5d5;
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: center
}

@media (max-width: 1024px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu {
    grid-template-columns: 1fr;
    padding: 12px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .leftSec {
  font-size: 20px;
  color: #2d2d2d;
  font-weight: 700
}

@media (max-width: 1024px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .leftSec {
    font-size: 18px;
    margin-bottom: 20px
  }
}

@media (max-width: 767px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .leftSec {
    font-size: 16px;
    margin-bottom: 20px
  }
}

@media (max-width: 480px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .leftSec {
    font-size: 12px;
    margin-bottom: 10px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

@media (max-width: 1199px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec {
    grid-template-columns: 1fr
  }
}

@media (max-width: 1024px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 680px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec {
    grid-template-columns: 1fr
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort {
  border: 1px solid #DDDDDD;
  border-radius: 12px;
  height: 112px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr
}

  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .img.imgSecTr {
    transform: translateY(-33px)
  }

@media (max-width: 480px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .img.imgSecTr {
    transform: translateY(0px);
    width: 110px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .img.imgSecTr1 {
  transform: translateY(-22px)
}

@media (max-width: 480px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .img.imgSecTr1 {
    transform: translateY(0px);
    width: 110px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .img.imgSecTr1 img {
  transform: translateX(16px)
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort:hover {
  cursor: pointer
}

  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort:hover .contImg .arrow {
    opacity: 1;
    transition: ease-in-out .4s;
    margin-right: 25px
  }

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .contImg .name {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #2d2d2d;
  margin-left: -30px
}

@media (max-width: 1279px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .contImg .name {
    margin-left: 0px
  }
}

@media (max-width: 991px) {
  .studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .contImg .name {
    font-size: 14px
  }
}

.studentLanding .welcomeVedatma .welcomeVeda .content .mainContent .chooseEdu .rightSec .studentPort .contImg .arrow {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 40px;
  padding-top: 10px;
  opacity: 0
}

.studentLanding .message {
  width: 54px;
  height: 54px;
  background-color: #ED7C3C;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 32px;
  z-index: 9;
  bottom: 24px;
  box-shadow: 0px 2px 6px #aba8a8
}

  .studentLanding .message .msgCo {
    cursor: pointer
  }

.modalWidet {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: translate3d(0, 102%, 0);
  transform: translate3d(0, 102%, 0);
  box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2);
  opacity: 0
}

@media (max-width: 480px) {
  .modalWidet {
    padding: 10px
  }
}

.modalWidet.cookiesPopup {
  align-items: flex-end
}

@media (max-width: 680px) {
  .modalWidet.cookiesPopup {
    padding: 0
  }
}

.modalWidet.cookiesPopup .modalRow {
  max-width: 100%;
  padding: 23px 0;
  border-radius: 0
}

@media (max-width: 1199px) {
  .modalWidet.cookiesPopup .modalRow {
    padding: 23px 15px
  }
}

.modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea {
  max-width: 1164px;
  margin: auto
}

  .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea h5 {
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    color: var(--theme-text-colour);
    margin-bottom: 7px
  }

  .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #6A6A6A;
    margin-bottom: 11px;
    margin-top: 0
  }

    .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea p a {
      font-weight: 600;
      color: var(--theme-text-colour);
      text-decoration: underline
    }

  .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup {
    display: flex
  }

    .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup .cmnBtn {
      width: 120px;
      margin-top: 0
    }

@media (max-width: 680px) {
  .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup .cmnBtn {
    margin-left: 0;
    margin-right: 0
  }
}

.modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup .cmnBtnBgWht {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: var(--theme-colour2);
  background-color: var(--white);
  width: 120px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out .4s;
  border: 2px solid var(--white);
  outline: none;
  margin-top: 0;
  cursor: pointer;
  text-decoration: underline
}

@media (max-width: 680px) {
  .modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup .cmnBtnBgWht {
    margin-left: 0;
    margin-right: 0
  }
}

.modalWidet.cookiesPopup .modalRow .cookiesPopupCntArea .btnGroup .cmnBtnBgWht:hover {
  color: var(--theme-colour2-dark)
}

.modalWidet.cookiesPopupPolicy {
  z-index: 9999;
  align-items: center
}

  .modalWidet.cookiesPopupPolicy.open .modalBg {
    opacity: 0.4
  }

  .modalWidet.cookiesPopupPolicy .modalRow {
    max-width: 422px;
    padding: 22px 32px 32px 32px;
    border-radius: 10px
  }

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow {
    padding: 25px 15px 25px 15px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .closeBtn {
  position: absolute;
  right: 20px;
  cursor: pointer
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .header {
  color: #2d2d2d;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 10px
}

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .header {
    font-size: 16px;
    line-height: 21px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .subCont {
  color: #707070;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin-bottom: 16px
}

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .subCont {
    font-size: 14px;
    line-height: 21px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay {
  border: 1px solid #F3F3F3;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

@media (max-width: 480px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr {
    flex-direction: column;
    justify-content: center
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr .wrapLeft {
  display: flex;
  align-items: center
}

  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr .wrapLeft .logo {
    border-radius: 6px;
    border: 1px solid #f3f3f3;
    padding: 18px 10px 21px 10px;
    min-width: 77px
  }

@media (max-width: 480px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr .wrapLeft .logo {
    padding: 10px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr .wrapLeft .content {
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  color: #2d2d2d;
  margin-left: 12px
}

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .leftAr .wrapLeft .content {
    font-size: 14px;
    line-height: 25px;
    margin-left: 6px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio {
  height: 26px;
  width: 26px
}

  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer {
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    color: #808080;
    user-select: none;
    margin: 0px;
    padding: 13px;
    min-height: 25px
  }

    .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer.checkActive {
      background-color: var(--primaryColour)
    }

    .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer.checkcontainerLst {
      margin-bottom: 0px
    }

    .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkOpacity {
      z-index: 2
    }

    .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input {
      height: auto;
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0
    }

      .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkmark {
        background-color: var(--primaryColour);
        border-radius: 50%;
        border: 1px solid #F3F3F3
      }

        .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkmark:after {
          display: block;
          border: solid var(--white);
          border-width: 0 2px 2px 0
        }

      .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkmarktxt {
        color: var(--white);
        font-size: 15px;
        position: relative
      }

@media (max-width: 680px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkmarktxt {
    font-size: 12px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkActive {
  background-color: var(--primaryColour);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer input:checked ~ .checkcontainer {
  background-color: var(--primaryColour)
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmarktxt {
  color: var(--text2d);
  margin-left: 35px;
  font-size: 16px;
  font-weight: 400;
  display: block
}

@media (max-width: 680px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmarktxt {
    font-size: 13px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 26px;
  width: 26px;
  background-color: var(--white);
  border-radius: 50%;
  border: 1px solid #F3F3F3;
  background-repeat: no-repeat;
  background-position: center
}

@media (max-width: 680px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmark {
    height: 23px;
    width: 23px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 5px;
  height: 10px;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}

@media (max-width: 680px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .listPay .rightRadio .checkcontainer .checkmark::after {
    top: 4px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px
}

  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .gobackBtn {
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primaryfont);
    font-weight: var(--regular);
    font-size: 14px;
    color: #527383;
    text-transform: uppercase;
    line-height: 19px;
    padding: 13px 42px;
    height: 45px;
    font-weight: 400s;
    border: solid 1px #527383;
    background-color: #fff;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    transition: ease-in-out 0.4s;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-right: 12px
  }

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .gobackBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 480px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .gobackBtn {
    padding: 15px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .gobackBtn:hover {
  color: #fafafa;
  background-color: var(--primaryDarkColour)
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .contBtn {
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primaryfont);
  font-weight: var(--regular);
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  line-height: 19px;
  padding: 13px 42px;
  height: 45px;
  font-weight: 400s;
  border: solid 1px #527383;
  -webkit-transition: ease-in-out 0.4s;
  -moz-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: var(--primaryDarkColour)
}

@media (max-width: 767px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .contBtn {
    font-size: 10.5px;
    font-size: 12px
  }
}

@media (max-width: 480px) {
  .modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .contBtn {
    padding: 15px
  }
}

.modalWidet.cookiesPopupPolicy .modalRow .contentSec .btnAreaPay .contBtn:hover {
  background-color: #ed7d3b
}

.modalWidet .modalRow {
  padding: 45px 55px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  z-index: 1;
  max-width: 950px;
  width: 100%;
  min-height: 411px
}

@media (max-width: 991px) {
  .modalWidet .modalRow {
    max-width: 700px;
    padding: 30px
  }
}

@media (max-width: 767px) {
  .modalWidet .modalRow {
    max-width: 400px;
    padding: 20px
  }
}

@media (max-width: 480px) {
  .modalWidet .modalRow {
    max-width: 100%;
    padding: 10px
  }
}

.modalWidet .modalRow .nextPrevBtn {
  display: flex;
  column-gap: 6px;
  position: absolute;
  right: 16px;
  top: 16px
}

  .modalWidet .modalRow .nextPrevBtn .closeBtn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.4s;
    border-radius: 50%;
    border-radius: 5px
  }

    .modalWidet .modalRow .nextPrevBtn .closeBtn svg rect {
      fill: var(--primary)
    }

    .modalWidet .modalRow .nextPrevBtn .closeBtn:hover {
      background-color: #EEF3F8
    }

      .modalWidet .modalRow .nextPrevBtn .closeBtn:hover .status {
        opacity: 1;
        pointer-events: all
      }

    .modalWidet .modalRow .nextPrevBtn .closeBtn .status {
      font-size: 14px;
      font-weight: 400;
      line-height: 16px;
      color: #DDDDDD;
      height: 32px;
      display: flex;
      align-items: center;
      column-gap: 15px;
      padding: 5px 12px;
      border-radius: 5px;
      background-color: #2D2D2D;
      position: absolute;
      right: 0;
      top: -40px;
      opacity: 0;
      pointer-events: none;
      transition: ease-in-out 0.4s
    }

@media (max-width: 680px) {
  .modalWidet .modalRow .modalContant {
    margin-top: 25px
  }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header {
  display: flex;
  justify-content: space-between;
  position: relative
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .head-left {
    font-size: 22px;
    font-weight: 600;
    line-height: 35px;
    color: #043C58
  }

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.4s;
    border-radius: 50%;
    border-radius: 5px
  }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn svg rect {
      fill: var(--primary)
    }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn:hover {
      background-color: #EEF3F8
    }

      .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn:hover .status {
        opacity: 1;
        pointer-events: all
      }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn .status {
      font-size: 14px;
      font-weight: 400;
      line-height: 16px;
      color: #DDDDDD;
      height: 32px;
      display: flex;
      align-items: center;
      column-gap: 15px;
      padding: 5px 12px;
      border-radius: 5px;
      background-color: #2D2D2D;
      position: absolute;
      right: 0;
      top: -40px;
      opacity: 0;
      pointer-events: none;
      transition: ease-in-out 0.4s
    }

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn-2 {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.4s;
    border-radius: 50%;
    border-radius: 5px
  }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn-2 svg rect {
      fill: var(--primary)
    }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn-2:hover {
      background-color: #EEF3F8
    }

      .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn-2:hover .status {
        opacity: 1;
        pointer-events: all
      }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .header .closeBtn-2 .status {
      font-size: 14px;
      font-weight: 400;
      line-height: 16px;
      color: #DDDDDD;
      height: 32px;
      display: flex;
      align-items: center;
      column-gap: 15px;
      padding: 5px 12px;
      border-radius: 5px;
      background-color: #2D2D2D;
      position: absolute;
      right: 0;
      top: -40px;
      opacity: 0;
      pointer-events: none;
      transition: ease-in-out 0.4s
    }

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 43px;
  height: 60vh;
  overflow-y: auto
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec::-webkit-scrollbar {
    width: 6px
  }

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px
  }

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px
  }

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec::-webkit-scrollbar-thumb:hover {
      background: transparent;
      border-radius: 10px
    }

@media (max-width: 767px) {
  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec {
    grid-template-columns: 1fr
  }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow label {
  color: #2D2D2D;
  margin-left: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 35px
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow label {
  color: #2D2D2D
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow .inputCtrl {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: #000000;
  width: 100%;
  height: 45px;
  background: var(--white);
  border: 1px solid #ddd !important;
  box-shadow: none
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow .inputCtrl::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #656565
  }

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow textarea {
  height: 80px !important;
  padding: 12px 33px 12px 16px
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow textarea::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #656565
  }

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  margin-bottom: 24px
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup .cmnBtn {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: var(--white);
    background-color: #54A64E;
    width: 147px;
    border-radius: 6px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: 1px solid #0070a2;
    cursor: pointer;
    column-gap: 6px;
    transition: ease-in-out 0.4s
  }

@media (max-width: 767px) {
  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup .cmnBtn {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px
  }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup .cmnBtn svg {
  transition: ease-in-out 0.4s;
  opacity: 0;
  pointer-events: none;
  width: 0
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup .cmnBtn:hover svg {
  opacity: 1;
  pointer-events: all;
  width: 7px
}

  .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .btnGroup .cmnBtn:hover svg path {
    fill: var(--white)
  }

.modalWidet .modalBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.5s;
  transition: opacity 0.6s, transform 0.5s;
  -webkit-transform: translate3d(0, 102%, 0);
  transform: translate3d(0, 102%, 0);
  box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2)
}

.modalWidet.open {
  opacity: 1;
  pointer-events: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

  .modalWidet.open .modalBg {
    opacity: 0.5;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

.modaFee .open {
  display: flex !important
}

.commonHeaderBanner {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: end;
  min-height: 216px;
  justify-content: center
}

  .commonHeaderBanner::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4) 0%
  }

  .commonHeaderBanner .containerMax2 .commonHeaderContent {
    display: flex;
    align-items: self-end;
    justify-content: space-between;
    margin: 5px 5px 24px;
    flex-wrap: wrap;
    z-index: 9;
    position: relative
  }

    .commonHeaderBanner .containerMax2 .commonHeaderContent .leftSec {
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      color: #fff
    }

@media (max-width: 767px) {
  .commonHeaderBanner .containerMax2 .commonHeaderContent .leftSec {
    font-size: 22px;
    line-height: 30px
  }
}

.commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram {
  display: flex;
  align-items: center
}

  .commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
  }

    .commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram ul li.margin10 {
      margin: 0px 10px
    }

    .commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram ul li a {
      font-size: 16px;
      z-index: 1;
      font-weight: 400;
      line-height: 21px;
      color: #fff
    }

@media (max-width: 767px) {
  .commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram ul li a {
    font-size: 14px;
    line-height: 18px
  }
}

.commonHeaderBanner .containerMax2 .commonHeaderContent .rightBredScram ul li:hover a {
  color: #ED7C3C
}

.tabformArea {
  background-color: #F6F6F6;
  border-radius: 16px;
  position: relative
}

@media (max-width: 680px) {
  .tabformArea {
    border-radius: 4;
    margin-top: 0;
    padding: 0
  }
}

.tabformArea .topRight {
  position: absolute;
  right: 0;
  top: 0
}

@media (max-width: 991px) {
  .tabformArea .topRight {
    display: none
  }
}

.tabformArea .topLeft {
  position: absolute;
  left: 0;
  bottom: 0
}

@media (max-width: 991px) {
  .tabformArea .topLeft {
    display: none
  }
}

.tabformArea.tabformAreaMain {
  background-color: transparent !important;
  border-radius: 0px !important
}

.tabformArea .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px
}

@media (max-width: 991px) {
  .tabformArea .tabs {
    margin-top: 10px
  }
}

@media (max-width: 680px) {
  .tabformArea .tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
  }
}

.tabformArea .tab {
  padding: 10px;
  cursor: pointer;
  border-bottom: none;
  border: 1px solid #DDDDDD;
  border-radius: 12px;
  background-color: #fff;
  height: 60px;
  display: flex;
  align-items: center
}

@media (max-width: 480px) {
  .tabformArea .tab {
    height: 45px
  }
}

.tabformArea .tab-content {
  display: block;
  padding: 20px
}

@media (max-width: 991px) {
  .tabformArea .tab-content {
    padding: 10px 0px
  }
}

@media (max-width: 680px) {
  .tabformArea .tab-content {
    padding: 0px
  }
}

.tabformArea .tab-content.active {
  display: block
}

.tabformArea .tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px
}

  .tabformArea .tab-label svg {
    margin-right: 10px
  }

  .tabformArea .tab-label label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0px !important
  }

@media (max-width: 767px) {
  .tabformArea .tab-label label {
    font-size: 14px
  }
}

@media (max-width: 480px) {
  .tabformArea .tab-label label {
    font-size: 12px
  }
}

.tabformArea .tab-label img {
  width: 20px;
  height: 20px;
  margin-right: 10px
}

.tabformArea .tab-label input[type="radio"] {
  margin-right: 10px
}

.tabformArea .tab input[type="radio"]:checked + img + label {
  color: white
}

.tabformArea .tab input[type="radio"]:checked {
  accent-color: #fff;
  width: 16px;
  height: 16px
}

.tabformArea input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #DDDDDD;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  background-color: white
}

  .tabformArea input[type="radio"]:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    transition: background-color 0.3s
  }

  .tabformArea input[type="radio"]:checked {
    border-color: #fff
  }

    .tabformArea input[type="radio"]:checked:before {
      background-color: white;
      border: 2px solid #ed7c3c
    }

  .tabformArea input[type="radio"]:not(:checked) {
    border-color: #DDDDDD
  }

    .tabformArea input[type="radio"]:not(:checked):before {
      background-color: white
    }

.tabformArea .tab:has(input[type="radio"]:checked) {
  background-color: #ED7C3C
}

  .tabformArea .tab:has(input[type="radio"]:checked) svg path {
    fill: #fff
  }

  .tabformArea .tab:has(input[type="radio"]:checked) label {
    color: #fff
  }

.chooseEduForm {
  border-radius: 16px;
  background-color: #fff;
  padding: 0px;
  box-shadow: 0px 2px 6px #d6d5d5;
  display: grid;
  grid-template-columns: 450px 1fr;
  align-items: center
}

@media (max-width: 1199px) {
  .chooseEduForm {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 1024px) {
  .chooseEduForm {
    grid-template-columns: 1fr;
    padding: 10px
  }
}

.chooseEduForm .leftImgArea {
  display: flex;
  align-items: center
}

@media (max-width: 1024px) {
  .chooseEduForm .leftImgArea {
    display: flex;
    align-items: center
  }
}

@media (max-width: 991px) {
  .chooseEduForm .leftImgArea {
    display: flex;
    align-items: center;
    flex-direction: column
  }
}

@media (max-width: 1024px) {
  .chooseEduForm .leftImgArea label {
    margin-top: -60px;
    margin-left: -20px
  }
}

@media (max-width: 991px) {
  .chooseEduForm .leftImgArea label {
    margin-top: 0px;
    margin-left: 0px
  }
}

.chooseEduForm .leftImgArea img {
  height: 171px
}

@media (max-width: 1024px) {
  .chooseEduForm .rightTabArea {
    margin-top: -110px
  }
}

@media (max-width: 991px) {
  .chooseEduForm .rightTabArea {
    margin-top: 0px
  }
}

.d-flexForm {
  display: flex;
  align-items: center;
  justify-content: center
}

.uploadBg {
  background-color: var(--white);
  border-radius: 10px;
  padding: 0px 0px 0px 18px;
  border: 1px solid #DDDDDD
}

  .uploadBg #staffFileName {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #707070;
    margin-left: 7px;
    max-width: 138px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

@media (max-width: 767px) {
  .uploadBg #staffFileName {
    font-size: 12px;
    line-height: 14px
  }
}

.uploadBg .uploadAreaBtn {
  border-radius: 10px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  overflow: hidden
}

  .uploadBg .uploadAreaBtn input[type="file"] {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0
  }

    .uploadBg .uploadAreaBtn input[type="file"]::placeholder {
      color: gray !important
    }

  .uploadBg .uploadAreaBtn .upCat {
    color: gray !important;
    font-size: 14px;
    font-weight: 400
  }

@media (max-width: 767px) {
  .uploadBg .uploadAreaBtn .upCat {
    font-size: 12px
  }
}

@media (max-width: 480px) {
  .uploadBg .uploadAreaBtn .upCat {
    width: 110px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
  }
}

.uploadBg .uploadAreaBtn .uploadBtn {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
  color: var(--theme-colour2);
  background-color: #EDF1F2;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  column-gap: 4px;
  border-radius: 0px 10px 10px 0px;
  transition: ease-in-out 0.4s;
  width: auto;
  outline: none;
  padding: 5px 13px;
  border: none;
  border-left: none
}

@media (max-width: 767px) {
  .uploadBg .uploadAreaBtn .uploadBtn {
    font-size: 12px;
    line-height: 12px
  }
}

@media (max-width: 680px) {
  .uploadBg .uploadAreaBtn .uploadBtn {
    padding: 5px 15px
  }
}

.to6px .selectRow .selectedLabel {
  border-radius: 10px;
  background-color: #fff !important;
  padding-left: 18px
}

.to6px .inputRow .inputControl {
  border-radius: 10px;
  background-color: #fff !important;
  padding-left: 18px;
  font-size: 14px !important
}

.to6px .inputRow .selectRow {
  min-width: 73px !important
}

  .to6px .inputRow .selectRow .selectedLabel2 {
    background-color: #F5F6FA !important
  }

    .to6px .inputRow .selectRow .selectedLabel2 svg {
      right: 8px !important
    }

.to6px .inputRow .inputLabel {
  width: 100%
}

  .to6px .inputRow .inputLabel .lableFle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap
  }

@media (max-width: 480px) {
  .to6px .inputRow .inputLabel .lableFle {
    flex-direction: column;
    align-items: start
  }
}

.to6px .inputRow .inputLabel .lableFle .custom-dropdown-container {
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
  width: 170px;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 0px 2px 10px
}

  .to6px .inputRow .inputLabel .lableFle .custom-dropdown-container label {
    font-size: 12px;
    font-weight: 400;
    color: #808080
  }

.to6px .inputRow .inputLabel .lableFle .custom-dropdown {
  display: grid;
  grid-template-columns: 58px 20px 10px;
  font-size: 12px;
  align-items: center;
  appearance: none;
  appearance: none;
  background-color: white;
  min-width: 70px;
  height: 25px;
  cursor: pointer;
  border: none
}

.to6px .inputRow .inputLabel sup {
  color: red;
  top: 2px;
  left: 6px
}

.to6px .inputRow .inputContainer {
  display: flex;
  align-items: center
}

  .to6px .inputRow .inputContainer.inputContainerDOB {
    position: relative
  }

    .to6px .inputRow .inputContainer.inputContainerDOB .inputControl {
      padding: 0 40px 0 18px !important
    }

    .to6px .inputRow .inputContainer.inputContainerDOB .icon {
      pointer-events: all;
      cursor: pointer;
      position: absolute;
      right: 16px;
      top: 15px
    }

@media (max-width: 767px) {
  .to6px .inputRow .inputContainer.inputContainerDOB .icon {
    top: 8px
  }
}

.borRd12 {
  border-radius: 12px
}

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

  .wrapCat .captcha {
    border: solid 1px #CBCBCB;
    width: 277px;
    height: 70px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #F9F9F9;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-top: 16px
  }

    .wrapCat .captcha .text-align {
      align-items: center;
      display: flex;
      column-gap: 5px
    }

      .wrapCat .captcha .text-align label {
        margin: 0;
        font-weight: 500;
        color: #2d2d2d;
        font-size: 14px
      }

@media (max-width: 767px) {
  .wrapCat .captcha .text-align label {
    font-size: 12px
  }
}

.wrapCat .captcha input[type="checkbox"] {
  width: 25px;
  height: 25px;
  cursor: pointer
}

.bgTrans {
  background-color: transparent !important
}

@media (max-width: 767px) {
  .bgTrans {
    padding: 8px 0px
  }
}

.w346 {
  width: 346px !important
}

.labForm {
  font-size: 22px;
  font-weight: 600;
  color: #2D2D2D;
  white-space: nowrap
}

@media (max-width: 767px) {
  .labForm {
    font-size: 22px
  }
}

@media (max-width: 480px) {
  .labForm {
    font-size: 14px
  }
}

.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: 200px
}

.custom-dropdown {
  position: relative;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  cursor: pointer
}

  .custom-dropdown .selected {
    font-size: 12px;
    color: #808080;
    font-weight: 500
  }

  .custom-dropdown .dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
  }

  .custom-dropdown .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0 2px 6px #dddddd;
    border-radius: 10px;
    border: 1px solid #dddddd;
    border-top: none;
    display: none;
    z-index: 1000
  }

  .custom-dropdown .dropdown-option {
    border-radius: 5px;
    padding: 10px;
    cursor: pointer
  }

    .custom-dropdown .dropdown-option:hover {
      background-color: #f0f0f0
    }

    .custom-dropdown .dropdown-option.selected {
      background-color: #007bff;
      color: #fff
    }

.contentSub {
  padding: 32px 55px !important
}

@media (max-width: 991px) {
  .contentSub {
    padding: 20px !important
  }
}

@media (max-width: 991px) {
  .contentSub {
    padding: 8px !important
  }
}

.selectRow:has(.slowDrop) .selectedLabel svg {
  transform: rotate(180deg);
  transition: ease-in-out 0.4s
}

.selectRow:has(.slowDrop) .selectedList {
  padding-left: 18px !important
}

.slowDrop {
  box-shadow: 0 2px 6px #ddd !important;
  border-radius: 10px;
  border: 1px solid #dddddd
}

  .slowDrop .selectedList {
    border-radius: 5px;
    padding-left: 16px
  }
/*# sourceMappingURL=stylesheet.css.map */