tr.hide {
  display: none;
}

.hide {
  display: none !important;
}

.margin-top-med {
  margin-top: 4rem;
}

.margin-bottom-med {
  margin-bottom: 4rem;
}

.margin-bottom-small {
  margin-bottom: 2rem;
}

.margin-left-small {
  margin-left: 2rem;
}

.margin-left-med {
  margin-left: 3rem;
}

.indent {
  margin-left: 50px;
}

.left {
  text-align: left;
}

.noMargin {
  margin: 0;
}

.border {
  border: 2px solid lightgrey;
  padding: 20px;
  border-radius: 20px;
  margin-top: 20px;
  width: 45%;
}

/*
0-600px phone
600px-900px table portrait
900px-1200px table landscape
[1200px - 1800px] normal styles
1800px + big desktop
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  padding: 0 0 3rem 0;
  font-family: "Open Sans", sans-serif;
  line-height: 22px;
  line-height: 25px;
}

div#page {
  font-size: 30px;
  color: darkgrey;
}

#mainPane {
  margin-top: 50px;
}

strong {
  color: var(--primaryColor);
  font-weight: bolder;
}

li {
  padding: 4px;
}

.list1,
.list2,
.list3 {
  margin-left: 50px;
}

@media (max-width: 900px) {

  .list1,
  .list2,
  .list3 {
    margin-left: 0;
  }
}

.list1 {
  list-style-type: circle;
}

.list3 {
  list-style-type: decimal;
}

#mainPane {
  position: relative;
  width: 1100px;
}

#mainPane .select {
  padding: 3px;
  border-radius: 4px;
  margin: 5px 0;
  background-color: #fff;
}

#mainPane .selectCC {
  padding: 3px;
  border-radius: 4px;
  margin: 5px 10px;
  background-color: #fff;
  width: 300px;
}

.listSpan {
  width: 200px;
  /* background-color: blue; */
}

.gridPage {
  display: grid;
  min-height: 50vh;
  width: 100%;
  grid-template: 269px auto/330px auto;
  grid-gap: 10px;
  margin-bottom: 80px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .gridPage {
    grid-template: 102px 30px auto/auto;
  }
}

/* .gridPage>div.CompanyLogo {
  grid-row: 1/1;
  grid-column: 1/1;
} */

.gridPage #nav {
  align-content: center;
}

.gridPage #mainPane {
  grid-row: 2/2;
  grid-column: 2/2;
  margin-top: 20px;
  width: calc(100vw - 450px);
  min-height: calc(100vh - 434px);
}

@media (max-width: 900px) {
  .grgridPageid #mainPane {
    width: 100vw;
    margin: 0;
    grid-row: 3/3;
    grid-column: 1/1;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    transform: translate(0, 0);
  }
}

.gridPage>div#primaryHeading {
  margin-top: 20px;
  z-index: 98;
  display: grid;
  grid-template: 50px 50px 50px 48px/330px 350px 350px;
  grid-gap: 10px;
}

@media (max-width: 900px) {
  .gridPage>div#primaryHeading {
    margin-top: 0;
    grid-row: 2/2;
    grid-column: 1/1;
    /* grid-template: none; */
    display: block;
  }
}

.ggridPagerid>div#primaryHeading>div#page {
  grid-row: 4/4;
  grid-column: 1/1;
  font-size: 30px;
  font-weight: 700;
  color: var(--primaryColor);
  margin: auto;
}

@media (max-width: 900px) {
  .gridPage>div#primaryHeading>div#page {
    grid-column: 2/2;
    margin-top: 0;
    text-align: center;
  }
}

.gridPage>div#primaryHeading>div#company {
  grid-row: 4/4;
  grid-column: 2/2;
  font-size: 30px;
  font-weight: 700;
  color: var(--primaryColor);
  margin: auto 0;
}

.gridPage>div#primaryHeading>div#clientSelect {
  grid-row: 1/1;
  grid-column: 1/1;
}

.gridPage>div#primaryHeading>div#clientSelect select {
  width: 100%;
}

.gridPage>div#primaryHeading>div#searchBox {
  grid-row: 2/2;
  grid-column: 1/1;
}

.gridPage>div#primaryHeading>div#activeYN {
  grid-row: 2/2;
  grid-column: 1/1;
  justify-self: start;
  white-space: nowrap;
  padding-top: 25px;
}

.gridPage>div#primaryHeading>div#selectGroup {
  grid-row: 1/1;
  grid-column: 2/2;
}

.gridPage>div#primaryHeading>div#selectGroup select {
  width: 100%;
}

.gridPage>div#primaryHeading>div#privateGroup {
  grid-row: 1/1;
  grid-column: 3/3;
  margin-top: 25px;
  justify-self: end;
  white-space: nowrap;
}

.gridPage>div#primaryHeading>div#newGroupName {
  grid-row: 1/1;
  grid-column: 3/3;
}

.gridPage>div#primaryHeading>div#newGroupName input {
  width: 100%;
  padding: 19px;
  border: 1px solid #000;
}

.gridPage>div#primaryHeading>div#newGroupDescription {
  grid-row: 2/3;
  grid-column: 3/3;
}

.gridPage>div#primaryHeading>div#addToUserGroup {
  grid-row: 4/4;
  grid-column: 3/3;
  padding: 1px;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  top: -22px;
}

.header_primary {
  background-color: var(--secondaryColor);
  border-bottom: 2px solid var(--secondaryColor);
}

#bannerHeader {
  position: absolute;
  top: 0;
  left: unset !important;
  right: 0 !important;
  width: 100%;
  height: 264px;
  background: url(https://www.integratezone.com/img/webImages/INTEGRATEtopbanner1920x263.png) right top no-repeat;
}

@media (max-width: 900px) {
  #bannerHeader {
    height: 152px;
  }
}

#bannerFooter {
  position: absolute;
  bottom: -120px;
  left: 0;
  width: 100vw;
  height: 100px;
  background: url(https://www.integratezone.com/img/webImages/INTEGRATEbottombanner1920x100.png) left top no-repeat;
}

.jvr_row {
  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
  padding: 5px 0;
  justify-content: space-around;
}

@media (max-width: 900px) {
  .jvr_row {
    max-width: 95vw;
    flex-wrap: wrap;
  }
}

.jvr_row.approvalHeader {
  justify-content: flex-start;
}

.jvr_row.submitList {
  justify-content: flex-start;
}

.jvr_row.submitList .column {
  padding-left: 10px;
}

@media (max-width: 900px) {
  .integrateLogoMain {
    position: absolute;
    width: 135px;
    background: url(https://www.integratezone.com/img/INTEGRATE_logo_TRANSPARENT.png) left top no-repeat;
    z-index: 0;
    height: 152px;
    top: 10px;
    left: calc(100vw - 100px);
  }
}

.flex_container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 900px) {
  .flex_container {
    flex-direction: column;
  }
}

.flex_container_column {
  flex-direction: column;
}

.flex_column {
  flex-direction: column;
  position: relative;
  margin-right: 20px;
}

.flex_row {
  display: flex;
  flex-direction: row;
  padding: 5px;
}

@media (max-width: 900px) {
  .flex_row {
    flex-direction: column;
  }
}

.flex_row.center {
  justify-content: center;
}

.flex_row>div#groupList {
  width: 100%;
}

.flex_row>div {
  width: 50%;
}

@media (max-width: 900px) {
  .flex_row>div {
    width: 100%;
  }
}

.flex_row>div>label {
  width: 25%;
}

@media (max-width: 900px) {
  .flex_row>div>label {
    width: 80%;
  }
}

.flex_row>div>select {
  width: 60%;
}

.flex_row input,
.flex_row select {
  border-radius: 3px;
  border: 1px solid darkgrey;
  padding: 5px;
}

.flex_row input[type="file"] {
  display: none;
}

.sk_row {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  padding: 5px 0;
  justify-content: flex-start;
}

.sk_row.center {
  justify-content: center;
}

.sk_row .column {
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  justify-content: flex-start;
  margin-right: 25px;
}

.row {
  display: flex;
  flex-direction: row;
  margin: 0;
  margin-bottom: 1rem;
}

.column {
  display: flex;
  flex-direction: column;
}

.column label {
  width: 80%;
}

.column select {
  width: 80%;
}

.column.half {
  width: 50%;
  padding: 10px;
}

.column.third {
  width: 33%;
}

@media (max-width: 900px) {
  .nav__button {
    height: 5rem;
    width: 100%;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: 50;
    text-align: center;
    cursor: pointer;
    display: block;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .nav__icon {
    position: relative;
    margin-top: 3rem;
    background-color: #526065;
    margin-left: 1rem;
  }
}

@media (max-width: 900px) {

  .nav__icon,
  .nav__icon::before,
  .nav__icon::after {
    width: 4rem;
    height: 0.6rem;
    background-color: #526065;
    display: inline-block;
  }
}

@media (max-width: 900px) {

  .nav__icon::before,
  .nav__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all 0.2s;
  }
}

@media (max-width: 900px) {
  .nav__icon::before {
    top: -1rem;
  }
}

@media (max-width: 900px) {
  .nav__icon::after {
    top: 1rem;
  }
}

@media (max-width: 900px) {
  .nav__checkbox:checked~.nav_container {
    left: 0;
  }
}

.nav__checkbox {
  display: none;
}

@media (max-width: 900px) {
  .nav__checkbox:checked+.nav__button .nav__icon {
    background-color: transparent;
  }
}

@media (max-width: 900px) {
  .nav__checkbox:checked+.nav__button .nav__icon::before {
    top: 0;
    transform: rotate(135deg);
  }
}

@media (max-width: 900px) {
  .nav__checkbox:checked+.nav__button .nav__icon::after {
    top: 0;
    transform: rotate(-135deg);
  }
}

@media (max-width: 900px) {
  /*  .nav_container {
    width: 100vw;
    height: calc(100vh-11rem);
    position: fixed;
    top: 48px;
    left: -37rem;
    z-index: 1500;
    transition: all 0.4s;
    background-color: white;
  } */
}

.nav__dropdown {
  position: relative;
  margin-left: 40px;
  margin-right: 40px !important;
  border-bottom: 2px solid var(--primaryColor);
  width: 60%;
  min-width: 180px;
}

@media (max-width: 900px) {
  /*  .nav__dropdown {
    font-size: 30px;
    padding: 7px;
    width: 90%;
  } */
}

.nav__dropdown div.nav__dropdown--dropbtn a {
  color: #526065;
  display: block;
  padding: 8px 15px 6px 5px;
}

.nav__dropdown .sub1 {
  position: absolute;
  display: none;
  right: -180px;
  top: 0;
}

.nav__dropdown .sub1 div.subitem {
  box-shadow: 3px 3px 10px grey;
  color: #526065;
  background-color: #fff;
  border-bottom: 2px solid var(--primaryColor);
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 4px;
}

.nav__dropdown:hover {
  background-color: #ccc;
  font-weight: 600;
}

.nav__dropdown:hover div.sub1 {
  display: block;
  width: 180px;
  z-index: 200;
}

.nav__dropdown:hover div.sub1:hover {
  background-color: #ccc;
  color: var(--primaryColor);
}

.nav__dropdown:hover div.nav__dropdown--dropbtn a {
  color: #526065;
}

.profile_imageContainer {
  overflow: hidden;
  position: relative;
  top: 5px;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  margin-left: 20px;
  border: 2px solid #fff;
  background-color: white;
  padding: 3px;
}

.profile_imageSupport {
  display: inline-block;
  margin-top: -25%;
  margin-left: -25%;
  height: 150px;
  width: 150px;
  border: 2px solid #fff;
  background-color: white;
  padding: 3px;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.profile_imageContainer_preview {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  border: 2px solid #fff;
  background-color: white;
  padding: 3px;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.profile_imageContainer {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  margin-left: 20px;
  border: 2px solid var(--primaryColor);
  background-color: white;
  padding: 3px;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.profile_imageContainer_preview2 {
  overflow: hidden;
  position: relative;
  /* top: 130px; */
  border-radius: 50%;
  height: 150px;
  width: 150px;
  border: 2px solid var(--primaryColor);
  background-color: white;
  padding-top: 3px;
  /* object-fit: scale-down; */
  /* object-position: 50% 50%; */
  margin: auto;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.profile_tipsContainer {
  display: block;
  position: relative;
  width: 400px;
  margin: 40px 0px 0 2px;
  letter-spacing: 1px;
}

/* .previewImg_edit{ */
/* width: 300px;
  height: 300px; */
/* max-width: 100%;
  max-height: auto; */
/* border: 2px solid var(--primaryColor);
  flex-direction: column;
  margin-left: 300px;
  padding: 5px 75px 0 75px; */
/* object-fit: cover;
  object-position: 50% 50%; */
/* } */

img#preview2 {
  position: absolute;
}

img#preview3 {
  position: absolute;
}

img#preview1 {
  position: absolute;
}

img#preview4 {
  max-width: auto;
  max-height: 150px;
  position: absolute;
  object-fit: contain;
  object-position: 50% 50%;
}

div.imageContainer {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  padding: 0;
  overflow: hidden;
  position: relative;
}

img.tableImage {
  position: absolute;
  top: 0;
  left: 0;
  /* max-width: 50px; */
}

.landingPage_image {
  order: -1;
  position: relative;
}

div#centre {
  position: absolute;
  top: 226px;
  left: 206px;
  font-size: 17px;
}

div#centre span {
  font-size: 17px;
  font-style: italic;
}

div#top {
  position: absolute;
  top: -2px;
  text-align: center;
  left: 124px;
}

div#top span {
  display: block;
}

div#left {
  position: absolute;
  top: 216px;
  left: -111px;
  transform: rotate(-90deg);
  text-align: center;
}

div#left span {
  display: block;
}

div#right {
  position: absolute;
  transform: rotate(-90deg);
  right: -74px;
  top: 216px;
  text-align: center;
}

div#right span {
  display: block;
}

div#bottom {
  position: absolute;
  text-align: center;
  bottom: 49px;
  left: 113px;
}

div#bottom span {
  display: block;
}

img.reputation {
  max-width: 500px;
  max-height: 500px;
  min-height: 300px;
  min-width: 300px;
  margin-right: 50px;
}

@media (max-width: 900px) {
  img.reputation {
    max-width: 95vw;
    max-height: 95vw;
    min-height: 150px;
    min-width: 150px;
    margin-right: 0;
  }
}

img.leaplyLandingImage {
  max-width: 300px;
  max-height: 300px;
  min-height: 300px;
  min-width: 300px;
  margin-right: 50px;
}

#mainPane {
  font-size: 14px;
  color: #2c292a;
}

#nominateForm {
  text-transform: capitalize;
}

#nominateForm>h5 {
  font-size: 14px;
  text-transform: capitalize;
}

label {
  text-transform: capitalize;
}

.landingPage.row {
  margin-bottom: 0;
}

.landingPage_firstColumn {
  width: 30%;
  font-size: 19px;
  font-weight: 600;
  color: #2c292a;
  background-color: #f2f3f4;
  padding-left: 15px;
  display: flex;
  border-bottom: 2px solid grey;
  align-items: center;
  min-height: 50px;
  font-family: Arial, Helvetica, sans-serif;
}

.landingPage_secondColumn {
  width: 70%;
  margin-left: 50px;
  font-size: 19px;
  color: #2c292a;
  font-family: Arial, Helvetica, sans-serif;
}

.landingPage_text {
  text-align: justify;
  text-justify: inter-word;
}

@media (max-width: 900px) {
  .landingPage_text {
    padding-left: 10px;
    width: 95vw;
  }
}

.myDevelopment_text {
  text-align: justify;
  text-justify: inter-word;
  font-size: 14px;
  font-weight: 400;
}

.myDevelopment_text p {
  margin-top: 15px;
}

.myDevelopment_text_table table tr {
  height: 50px;
}

.myDevelopment_heading {
  font-weight: bold;
  margin-bottom: 0;
}

.header_primary {
  text-align: center;
  font-size: 3rem;
  color: #fff;
}

.header_page {
  text-align: center;
  font-size: 3rem;
  color: var(--primaryColor);
  text-transform: capitalize;
}

.saved {
  color: var(--secondaryColor);
}

.jvr_warning {
  color: var(--errorColor);
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}

.success {
  color: var(--primaryColor);
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}

.thankyou {
  color: #2c292a;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}

div.survey_name {
  font-size: 18px;
  font-weight: bold;
}

div.survey_details {
  font-size: 15px;
}

div.survey_intro {
  font-size: 14px;
  color: #2c292a;
  line-height: 2rem;
}

.survey_q_set_section {
  position: relative;
}

div.endQuestion>div {
  font-size: 14px;
}

div.endQuestion textarea {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
}

h3 {
  color: var(--primaryColor);
  margin-bottom: 20px;
  font-family: inherit;
  letter-spacing: 1px;
}

#nav {
  font-size: 14px;
}

#nav a {
  text-decoration: none;
}

#nav a:hover {
  color: var(--primaryColor);
}

#nav .nav__dropdown {
  font-size: 14px;
}

@media (max-width: 900px) {
  #nav .nav__dropdown {
    /* font-size: 30px; */
  }
}

.fa-user-alt {
  color: var(--primaryColor);
  font-size: 5rem;
  padding: 5px 0;
}

.fa-check {
  position: absolute;
  font-size: 4rem;
  bottom: 0;
  right: 10px;
}

.fa-check.library {
  position: relative;
  font-size: 2rem;
}

.warning {
  color: var(--errorColor);
}

.rejectText {
  color: var(--errorColor);
  border: 1px solid var(--errorColor) !important;
  background-color: rgba(255, 0, 0, 0.2);
}

@media (max-width: 900px) {
  .rejectText {
    border: none;
  }
}

.fa-check-circle {
  color: grey;
  font-size: 20px;
}

.fa-times-circle {
  color: grey;
  font-size: 20px;
}

.fa-window-close {
  color: var(--errorColor);
  font-size: 20px;
}

.fa-trash-alt {
  color: var(--errorColor);
}

input {
  color: #2c292a;
}

textarea {
  color: #2c292a;
}

a {
  color: #2c292a;
  text-decoration: none;
}

.ps_landing {
  margin: 0 auto;
  width: 90%;
}

.ps_landing_header {
  color: #2c292a;
  font-size: 25px;
  margin: 10px 0;
}

.ps_landing_text {
  width: 100%;
  padding: 10px 0;
}

.ps_landing_list {
  font-weight: 600;
}

.ps_landing_list li {
  font-weight: normal;
  margin-left: 15px;
}

input[type="text"],
input[type="email"] {
  border-radius: 4px;
  border: 1px solid darkgrey;
  min-width: 200px;
  padding: 5px;
  background-color: #fff;
}

input[type="checkbox"] {
  height: 18px;
  min-width: 50px;
}

select {
  border-radius: 4px;
  border: 1px solid darkgrey;
  min-width: 200px;
  width: 200px;
  background-color: #fff;
}

.selWidth {
  width: auto !important;
}

input[type="date"] {
  margin: 10px 0px;
}

textarea {
  border-radius: 4px;
  border: 1px solid darkgrey;
  padding: 5px;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}

div.login_form {
  margin-left: 0px !important;
}

/* @media (max-width: 900px) {
  div.login_form {
    padding-left: 0;
    z-index: 1000;
  }
} */

div.login_form div {
  padding-top: 10px;
  padding-bottom: 15px;
}

/* @media (max-width: 900px) {
  div.login_form div {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
  }
} */

div.login_form div label {
  padding-right: 5px;
}

/* @media (max-width: 900px) {
  div.login_form div label {
    padding-right: 5px;
    display: block;
    width: 100%;
    padding: 20px 5px 5px 10px;
    font-weight: 600;
  }
} */

div.login_form div input {
  border-radius: 3px;
  border: 1px solid darkgrey;
  padding-top: 5px;
  padding-left: 5px;
}

/* @media (max-width: 900px) {
  div.login_form div input {
    width: 80%;
    margin: 0 auto;
  }
} */

div.login_form div a {
  font-style: italic;
}

textarea {
  border-radius: 4px;
  border: 1px solid darkgrey;
  padding: 10px;
}

.list_default {
  flex: 0 0 auto;
  list-style: none;
}

.list_igniteHer {
  list-style: none;
  width: 100%;
}

li.list__item_default {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
}

li.list__item_default:hover>.r_btn_label_default {
  color: var(--errorColor);
}

li.list__item_default:hover>.r_btn_label_default::before {
  border: 0.5rem solid var(--errorHoverColor);
  margin-right: 2rem;
}

li.list__item_igniteHer {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  display: inline-flex;
  flex-flow: wrap;
  width: 25%;
}

li.list__item_igniteHer:hover>.r_btn_label_igniteHer {
  color: var(--secondaryColor);
}

li.list__item_igniteHer:hover>.r_btn_label_igniteHer::before {
  border: 0.5rem solid var(--errorColor);
  margin-right: auto;
  margin-left: auto;
}

li.list__item_fiveOptions {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  display: inline-flex;
  flex-flow: wrap;
  width: 20%;
}

@media (max-width: 900px) {
  li.list__item_fiveOptions {
    display: block;
    width: 100%;
  }
}

li.list__item_fiveOptions:hover>.r_btn_label_igniteHer {
  color: var(--secondaryColor);
}

li.list__item_fiveOptions:hover>.r_btn_label_igniteHer::before {
  border: 0.5rem solid var(--errorHoverColor);
  margin-right: auto;
  margin-left: auto;
}

.radio-btn {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.radio-btn:checked+.r_btn_label_default {
  color: var(--secondaryColor);
}

.radio-btn:checked+.r_btn_label_default::before {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  font-weight: bold;
}

.radio-btn:checked+.r_btn_label_igniteHer,
.radio-btn:checked+.r_btn_label_fiveOptions {
  color: var(--secondaryColor);
}

.radio-btn:checked+.r_btn_label_igniteHer::before,
.radio-btn:checked+.r_btn_label_fiveOptions::before {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  font-weight: bold;
}

label.r_btn_label_default {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 2px;
  color: var(--primaryColor);
  margin-right: 0;
  margin-bottom: 0;
  font-size: 14px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.25s linear;
}

label.r_btn_label_default::before {
  display: inline-block;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 10px;
  border: 2px solid var(--primaryColor);
  border-radius: 50%;
  transition: all 0.25s linear;
}

label.r_btn_label_igniteHer,
label.r_btn_label_fiveOptions {
  width: auto;
  /* display: flex; */
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px;
  color: black;
  margin-right: 0;
  margin-left: 0;
  font-size: 14px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.25s linear;
  text-align: center;
  line-height: normal;
}

label.r_btn_label_igniteHer::before,
label.r_btn_label_fiveOptions::before {
  display: block;
  content: "";
  height: 2rem;
  width: 2rem;
  margin-right: auto;
  margin-left: auto;
  border: 6px solid grey;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.25s linear;
  margin-top: 10px;
  margin-bottom: 10px;
}

.list__item_iwprRadio {
  display: inline;
  padding: 0;
}

ul.list_iwprRadio {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}

label {
  margin-right: 10px;
  width: 25%;
}

label.custom-file-upload {
  position: relative;
  width: auto;
  top: 18px;
  left: 5px;
  color: white !important;
}

label.r_btn_label_iwprRadio {
  border: 2px solid var(--secondaryColor);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  font-weight: 700;
  margin-right: 40px;
  display: inline-block;
}

label.r_btn_label_iwprRadio::after {
  content: "";
  border-top: 2px solid var(--secondaryColor);
  width: 42px;
  display: flex;
  position: absolute;
  right: -42px;
  top: 50%;
}

label.r_btn_label_iwprRadio::after:nth-of-type(5) {
  border: none;
}

label.r_btn_label_iwprRadio.value5::after {
  border-top: none;
}

.never,
.always {
  background-color: var(--secondaryColor);
  color: #fff;
  text-align: center;
  padding: 4px 10px;
  border-radius: 6px;
  margin-right: 40px;
  display: inline;
}

.radio-btn:checked+.r_btn_label_iwprRadio {
  background-color: var(--primaryColor);
  color: #fff;
}

input.required {
  border: 1px solid var(--errorColor);
}

#nominateForm>h5 {
  padding: 20px 5px 0 10px;
  text-align: left;
}

#nominateForm input {
  border-radius: 4px;
  border: 1px solid darkgrey;
  width: 200px;
  padding: 5px;
}

#nominateForm select {
  border-radius: 4px;
  border: 1px solid darkgrey;
  width: 200px;
  height: 28px;
}

#nominateForm textarea {
  border-radius: 4px;
  border: 1px solid darkgrey;
}

#nominateForm .btn {
  text-align: center;
}

.login-popup {
  /* The popup form - hidden by default */
  display: none;
  position: fixed;
  top: 15%;
  left: 18%;
  border: 3px solid var(--primaryColor);
  border-radius: 4px;
  background-color: #fff;
  z-index: 9;
  color: var(--primaryColor);
  box-shadow: 5px 10px 20px #888888;
}

.login-popup.booking {
  top: 25%;
  left: 25%;
}

.login-container {
  /* Add styles to the form container */
  max-width: 820px;
  padding: 10px;
}

.login-container b {
  font-weight: normal;
  color: var(--primaryColor);
}

.login-container input {
  /* Full-width input fields */
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background-color: #efefef !important;
  border-radius: 4px;
}

.login-container input:focus {
  /* When the inputs get focus, do something */
  background-color: var(--secondaryColor);
  outline: none;
}

.login-container select {
  border-radius: 4px;
  border: 1px solid var(--primaryColor);
  background-color: #efefef !important;
  padding: 5px 10px;
  margin: 5px 0 22px 0;
}

#bookingDate,
#bookingTime,
#bookingVenue {
  display: none;
}

#bookingForm {
  display: none;
}

.seekat_Form input {
  padding: 5px 10px;
  border: 1px solid grey;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left: 5px;
}

.seekat_Form select {
  padding: 5px 10px;
  border: 1px solid grey;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left: 5px;
}

.bookingTable {
  display: block;
}

.error {
  color: var(--errorColor);
  padding: 5px;
}

input.error {
  border: 1px solid var(--errorColor);
  box-shadow: 0px 0px 5px 1px rgba(201, 10, 10, 0.5);
}

label {
  margin-right: 10px;
  width: 25%;
}

label.btn.custom-file-upload {
  width: auto;
}

input {
  color: #2c292a;
  border-radius: 5px;
  border: 1px solid grey;
  height: 28px;
  padding: 5px;
  width: fit-content;
}

h4.radioSelect {
  display: flex;
}

h4.radioSelect input {
  margin-right: 5px;
}

.form__group {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
}

.form__label {
  text-align: left;
}

.form__btn {
  margin: 0 auto;
}

.form__group-row {
  display: inline-flex;
  flex-direction: row;
  margin: 10px 0;
}

.form__label {
  text-align: left;
  min-width: 150px;
}

.form__btn {
  margin: 0 auto;
}

.li__clean {
  list-style: none;
}

.radio__input {
  display: none;
}

.radio__label {
  margin-left: 35px;
  position: relative;
}

.radio__custom {
  border: 2px solid var(--primaryColor);
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: -27px;
  top: 3px;
}

.radio__custom::after {
  content: "";
  display: block;
  height: 9px;
  width: 9px;
  background-color: var(--secondaryColor);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.radio__input:checked+.radio__label .radio__custom::after {
  opacity: 1;
}

.radio__input:checked+.radio__label .radio__custom {
  border: 4px solid var(--secondaryColor);
}

.checkbox__input {
  display: none;
}

.checkbox__label {
  margin-left: 35px;
  position: relative;
}

.checkbox__custom {
  border: 2px solid var(--primaryColor);
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  position: absolute;
  left: -27px;
  top: 2px;
}

.checkbox__custom::after {
  content: "";
  display: block;
  height: 12px;
  width: 12px;
  background-color: var(--secondaryColor);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.checkbox__input:checked+.checkbox__label .checkbox__custom::after {
  opacity: 1;
}

.checkbox__input:checked+.checkbox__label .checkbox__custom {
  border: 2px solid var(--secondaryColor);
}

.upload__input {
  display: none;
}

.upload__label {
  border: 2px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  width: auto;
  padding: 2px 10px;
  margin: 10px 5px;
  border-radius: 4px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
}

.upload__custom {
  margin: auto;
}

#candidateInfoContent .row,
#yourInfoContent .row,
#issueInfoContent .row,
#requestedInfoContent .row,
#biossContent .row {
  margin-bottom: 2rem;
}

#candidateInfoContent .row .column.half,
#yourInfoContent .row .column.half,
#issueInfoContent .row .column.half,
#requestedInfoContent .row .column.half,
#biossContent .row .column.half {
  margin-right: 10px;
  width: 45%;
}

#candidateInfoContent .row .column.half label,
#yourInfoContent .row .column.half label,
#issueInfoContent .row .column.half label,
#requestedInfoContent .row .column.half label,
#biossContent .row .column.half label {
  font-size: smaller;
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition: all 0.3s;
}

#candidateInfoContent .row .column.half select,
#yourInfoContent .row .column.half select,
#issueInfoContent .row .column.half select,
#requestedInfoContent .row .column.half select,
#biossContent .row .column.half select {
  width: 100%;
}

#candidateInfoContent input:placeholder-shown+label,
#yourInfoContent input:placeholder-shown+label,
#issueInfoContent input:placeholder-shown+label,
#requestedInfoContent input:placeholder-shown+label,
#biossContent input:placeholder-shown+label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2.5rem);
}

#pre_app {
  border: 1px solid #526065;
  width: 30%;
  padding: 5px;
}

.label {
  font-size: smaller;
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition: all 0.3s;
}



div#mobileBox {
  position: relative;
}

div#mobileBox #cell_pre {
  position: absolute;
  top: 2px;
  left: 3px;
  font-weight: 600;
}

div#mobileBox input#candidatemobileNo {
  padding-left: 26px;
}

.addNewOrSelect {
  display: inline-flex;
}

.addNewOrSelect input {
  min-width: 82%;
  border-radius: 4px 0 0 4px;
}

.addNewOrSelect .btn {
  border: 1px solid var(--primaryColor);
  border-radius: 0 4px 0 0;
  display: inline;
  margin: 0;
  padding: 0 5px;
  margin-left: -4px;
}

.addNewOrSelect .btn:hover {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
}

.addNewOrSelect2 {
  display: inline-block;
}

.addNewOrSelect2 input {
  min-width: 82%;
  border-radius: 4px 0 0 4px;
}

.addNewOrSelect2 .btn {
  border: 1px solid var(--primaryColor);
  border-radius: 0 4px 0 0;
  display: inline;
  margin: 0;
  padding: 0 5px;
  margin-left: -4px;
}

.addNewOrSelect2 .btn:hover {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
}

#displayFileName {
  display: table-cell;
  padding-top: 15px;
}

#consentText ol {
  margin-left: 20px;
}

input[type="text"],
input[type="email"] {
  border-radius: 0;
  border: 1px solid darkgrey;
  min-width: 200px;
  padding: 5px;
  background-color: #fff;
}

input[type="checkbox"] {
  height: 18px;
  min-width: 50px;
}

select {
  border-radius: 0;
  border: 1px solid black;
  min-width: 200px;
  width: 200px;
  background-color: #fff;
}

textarea {
  border-radius: 0;
  border: 1px solid darkgrey;
  padding: 5px;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}

div.login_form {
  padding-left: 10px;
}

#instruction {
  line-height: 21px;
  max-width: 270px;
  margin-left: 19px;
}

#submitBtn {
  margin: 10px 19px;
}

@media (max-width: 900px) {
  /*  div.login_form {
    padding-left: 0;
    z-index: 1000;
  } */

  #instruction {
    margin: auto;
  }

  #submitBtn {
    margin: 15px auto;
  }
}

/* div.login_form div {
  padding-top: 10px;
  padding-bottom: 15px;
  height: fit-content;
} */

/* @media (max-width: 900px) {
  div.login_form div {
    padding-bottom: 0;
    text-align: center;
    top: 20px;
    left: 10px;
    transform: translate(0, 0);
    width: 100vw;
  }
} */

div.login_form div label {
  padding-right: 5px;
}

/* @media (max-width: 900px) {
  div.login_form div label {
    padding-right: 5px;
    display: block;
    width: 100%;
    padding: 20px 5px 5px 10px;
    font-weight: 600;
  }
} */

div.login_form div input {
  border-radius: 0;
  border: 1px solid darkgrey;
  padding-top: 5px;
  padding-left: 5px;
}

/* @media (max-width: 900px) {
  div.login_form div input {
    width: 80%;
    margin: 0 auto;
  }
} */

div.login_form div a {
  font-style: italic;
}

textarea {
  border-radius: 0;
  border: 1px solid darkgrey;
  padding: 10px;
}

.list_default {
  flex: 0 0 auto;
  list-style: none;
}

.list_igniteHer {
  list-style: none;
  width: 100%;
}

li.list__item_default {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
}

li.list__item_default:hover>.r_btn_label_default {
  color: var(--errorHoverColor);
}

li.list__item_default:hover>.r_btn_label_default::before {
  border: 0.5rem solid var(--errorHoverColor);
  margin-right: 2rem;
}

li.list__item_igniteHer {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  display: inline-flex;
  flex-flow: wrap;
  width: 25%;
}

li.list__item_igniteHer:hover>.r_btn_label_igniteHer {
  color: var(--secondaryColor);
}

li.list__item_igniteHer:hover>.r_btn_label_igniteHer::before {
  border: 0.5rem solid var(--errorHoverColor);
  margin-right: auto;
  margin-left: auto;
}

li.list__item_fiveOptions {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  display: inline-flex;
  flex-flow: wrap;
  width: 20%;
}

@media (max-width: 900px) {
  li.list__item_fiveOptions {
    display: block;
    width: 100%;
  }
}

li.list__item_fiveOptions:hover>.r_btn_label_igniteHer {
  color: var(--secondaryColor);
}

li.list__item_fiveOptions:hover>.r_btn_label_igniteHer::before {
  border: 0.5rem solid var(--errorHoverColor);
  margin-right: auto;
  margin-left: auto;
}

.radio-btn {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.radio-btn:checked+.r_btn_label_default {
  color: var(--secondaryColor);
}

.radio-btn:checked+.r_btn_label_default::before {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  font-weight: bold;
}

.radio-btn:checked+.r_btn_label_igniteHer,
.radio-btn:checked+.r_btn_label_fiveOptions {
  color: var(--secondaryColor);
}

.radio-btn:checked+.r_btn_label_igniteHer::before,
.radio-btn:checked+.r_btn_label_fiveOptions::before {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  font-weight: bold;
}

label.r_btn_label_default {
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 5px;
  color: var(--primaryColor);
  margin-right: 0;
  margin-bottom: 0;
  font-size: 14px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.25s linear;
}

label.r_btn_label_default::before {
  display: inline-block;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 10px;
  border: 2px solid var(--primaryColor);
  border-radius: 50%;
  transition: all 0.25s linear;
}

label.r_btn_label_igniteHer,
label.r_btn_label_fiveOptions {
  width: auto;
  /* display: flex; */
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px;
  color: black;
  margin-right: 0;
  margin-left: 0;
  font-size: 14px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.25s linear;
  text-align: center;
  line-height: normal;
}

label.r_btn_label_igniteHer::before,
label.r_btn_label_fiveOptions::before {
  display: block;
  content: "";
  height: 2rem;
  width: 2rem;
  margin-right: auto;
  margin-left: auto;
  border: 6px solid grey;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.25s linear;
  margin-top: 10px;
  margin-bottom: 10px;
}

.list__item_iwprRadio {
  display: inline;
  padding: 0;
}

ul.list_iwprRadio {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}

label.r_btn_label_iwprRadio {
  border: 2px solid var(--secondaryColor);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  font-weight: 700;
  margin-right: 40px;
  display: inline-block;
}

label.r_btn_label_iwprRadio::after {
  content: "";
  border-top: 2px solid var(--secondaryColor);
  width: 42px;
  display: flex;
  position: absolute;
  right: -42px;
  top: 50%;
}

label.r_btn_label_iwprRadio::after:nth-of-type(5) {
  border: none;
}

label.r_btn_label_iwprRadio.value5::after {
  border-top: none;
}

.never,
.always {
  background-color: var(--secondaryColor);
  color: #fff;
  text-align: center;
  padding: 4px 10px;
  border-radius: 6px;
  margin-right: 40px;
  display: inline;
}

.radio-btn:checked+.r_btn_label_iwprRadio {
  background-color: var(--primaryColor);
  color: #fff;
}

input.required {
  border: 1px solid var(--errorColor);
}

#nominateForm>h5 {
  padding: 20px 5px 0 10px;
  text-align: left;
}

#nominateForm input {
  border-radius: 0;
  border: 1px solid darkgrey;
  width: 200px;
  padding: 5px;
}

#nominateForm select {
  border-radius: 0;
  border: 1px solid darkgrey;
  width: 200px;
  height: 28px;
}

#nominateForm textarea {
  border-radius: 0;
  border: 1px solid darkgrey;
}

#nominateForm .btn {
  text-align: center;
}

.login-popup {
  /* The popup form - hidden by default */
  display: none;
  position: fixed;
  top: 15%;
  left: 18%;
  border: 3px solid var(--primaryColor);
  border-radius: 0;
  background-color: #fff;
  z-index: 9;
  color: var(--primaryColor);
  box-shadow: 5px 10px 20px #888888;
}

.login-popup.booking {
  top: 25%;
  left: 25%;
}

.login-container {
  /* Add styles to the form container */
  max-width: 820px;
  padding: 10px;
}

.login-container b {
  font-weight: normal;
  color: var(--primaryColor);
}

.login-container input {
  /* Full-width input fields */
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background-color: #efefef !important;
  border-radius: 0;
}

.login-container input:focus {
  /* When the inputs get focus, do something */
  background-color: green;
  outline: none;
}

.login-container select {
  border-radius: 0;
  border: 1px solid var(--primaryColor);
  background-color: #efefef !important;
  padding: 5px 10px;
  margin: 5px 0 22px 0;
}

#bookingDate,
#bookingTime,
#bookingVenue {
  display: none;
}

#bookingForm {
  display: none;
}

.seekat_Form input {
  padding: 5px 10px;
  border: 1px solid grey;
  border-radius: 0;
  margin-bottom: 20px;
  margin-left: 5px;
}

.seekat_Form select {
  padding: 5px 10px;
  border: 1px solid grey;
  border-radius: 0;
  margin-bottom: 20px;
  margin-left: 5px;
}

.bookingTable {
  display: block;
}

.error {
  color: var(--errorColor);
  padding: 5px;
}

input.error {
  border: 1px solid var(--errorColor);
  box-shadow: 0px 0px 5px 1px rgba(201, 10, 10, 0.5);
}

label {
  margin-right: 10px;
  width: 25%;
}

label.btn.custom-file-upload {
  width: auto;
}

input {
  color: #2c292a;
  border-radius: 0;
  border: 1px solid grey;
  height: 28px;
  padding: 5px;
}

h4.radioSelect {
  display: flex;
}

h4.radioSelect input {
  margin-right: 5px;
}

.form__group {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
}

.form__label {
  text-align: left;
}

.form__btn {
  margin: 0 auto;
}

.form__group-row {
  display: inline-flex;
  flex-direction: row;
  margin: 10px 0;
}

.form__label {
  text-align: left;
  min-width: 150px;
}

.form__btn {
  margin: 0 auto;
}

.li__clean {
  list-style: none;
}

.radio__input {
  display: none;
}

.radio__label {
  margin-left: 35px;
  position: relative;
}

.radio__custom {
  border: 2px solid var(--primaryColor);
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: -27px;
  top: 3px;
}

.radio__custom::after {
  content: "";
  display: block;
  height: 9px;
  width: 9px;
  background-color: var(--secondaryColor);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.radio__input:checked+.radio__label .radio__custom::after {
  opacity: 1;
}

.radio__input:checked+.radio__label .radio__custom {
  border: 4px solid var(--secondaryColor);
}

.checkbox__input {
  display: none;
}

.checkbox__label {
  margin-left: 35px;
  position: relative;
}

.checkbox__custom {
  border: 2px solid var(--primaryColor);
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 0;
  position: absolute;
  left: -27px;
  top: 2px;
}

.checkbox__custom::after {
  content: "";
  display: block;
  height: 12px;
  width: 12px;
  background-color: var(--secondaryColor);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.checkbox__input:checked+.checkbox__label .checkbox__custom::after {
  opacity: 1;
}

.checkbox__input:checked+.checkbox__label .checkbox__custom {
  border: 2px solid var(--secondaryColor);
}

.upload__input {
  display: none;
}

.upload__label {
  border: 2px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  width: auto;
  padding: 2px 10px;
  margin: 10px 5px;
  border-radius: 0;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
}

.upload__custom {
  margin: auto;
}

#candidateInfoContent .row,
#yourInfoContent .row,
#issueInfoContent .row,
#requestedInfoContent .row,
#biossContent .row {
  margin-bottom: 2rem;
}

#candidateInfoContent .row .column.half,
#yourInfoContent .row .column.half,
#issueInfoContent .row .column.half,
#requestedInfoContent .row .column.half,
#biossContent .row .column.half {
  margin-right: 10px;
  width: 45%;
}

#candidateInfoContent .row .column.half label,
#yourInfoContent .row .column.half label,
#issueInfoContent .row .column.half label,
#requestedInfoContent .row .column.half label,
#biossContent .row .column.half label {
  font-size: smaller;
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition: all 0.3s;
}

#candidateInfoContent .row .column.half select,
#yourInfoContent .row .column.half select,
#issueInfoContent .row .column.half select,
#requestedInfoContent .row .column.half select,
#biossContent .row .column.half select {
  width: 100%;
}

#candidateInfoContent input:placeholder-shown+label,
#yourInfoContent input:placeholder-shown+label,
#issueInfoContent input:placeholder-shown+label,
#requestedInfoContent input:placeholder-shown+label,
#biossContent input:placeholder-shown+label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2.5rem);
}

#pre_app {
  border: 1px solid #526065;
  width: 30%;
  padding: 5px;
}

.label {
  font-size: smaller;
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition: all 0.3s;
}

.label_medium {
  font-size: medium;
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition: all 0.3s;
}

div#mobileBox {
  position: relative;
}

div#mobileBox #cell_pre {
  position: absolute;
  top: 2px;
  left: 3px;
  font-weight: 600;
}

div#mobileBox input#candidatemobileNo {
  padding-left: 26px;
}

.addNewOrSelect {
  display: inline-flex;
}

.addNewOrSelect input {
  min-width: 82%;
  border-radius: 0;
}

.addNewOrSelect .btn {
  border: 1px solid var(--primaryColor);
  border-radius: 0;
  display: inline;
  margin: 0;
  padding: 0 5px;
  margin-left: -4px;
}

.addNewOrSelect .btn:hover {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
}

#displayFileName {
  display: table-cell;
  padding-top: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #ccc;
  padding: 25px;
}

table thead th {
  text-align: center;
  height: 45px;
  font-weight: bold;
  color: #fff;
  background-color: var(--primaryColor);
  border: 2px solid #ccc;
  text-transform: capitalize;
  padding: 6px;
}

@media (max-width: 900px) {
  table thead th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
}

table thead th input.searchBoxInput {
  min-width: 95px;
  width: 95px;
  padding: 2px 5px;
  height: auto;
}

table tr {
  border-bottom: 2px solid #fff;
}

table tr:last-of-type {
  border-bottom: 2px solid #ccc;
}

table tr td {
  color: #2c292a;
  text-align: center;
  padding: 8px;
  text-transform: capitalize;
  max-width: 200px;
  white-space: pre-wrap;
}

/* td .btn {
  margin-left: auto;
  margin-right: auto;
} */

table tr td.displayNominate {
  text-align: center;
}

table tr td a {
  text-decoration: none;
}

table tr td.textarea {
  width: 120px;
}

tr.nominateRow {
  border-top: 2px solid #ccc;
}

tr.nominateOpen {
  border-bottom: 2px solid #ccc;
}

td div div.row {
  padding: 0;
}

td.date,
td.rateeName,
td.approvers {
  white-space: nowrap;
}

td.rateeName,
td.approvers {
  text-align: left;
}

td.link:hover {
  background-color: var(--primaryColor);
  color: #fff;
}

@media (max-width: 900px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
}

@media (max-width: 900px) {

  table#listTableCurrent tr td,
  table#listTableCompleted tr td,
  table#listTableArchived tr td {
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid darkgrey;
    position: relative;
    width: 100% !important;
  }

  table#listTableCurrent tr td::before,
  table#listTableCompleted tr td::before,
  table#listTableArchived tr td::before {
    display: block;
    font-weight: 600;
  }

  table#listTableCurrent tr td:nth-last-of-type(10)::before,
  table#listTableCompleted tr td:nth-last-of-type(10)::before,
  table#listTableArchived tr td:nth-last-of-type(10)::before {
    content: "Date Allocated";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(9)::before,
  table#listTableCompleted tr td:nth-last-of-type(9)::before,
  table#listTableArchived tr td:nth-last-of-type(9)::before {
    content: "Assessment";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(8)::before,
  table#listTableCompleted tr td:nth-last-of-type(8)::before,
  table#listTableArchived tr td:nth-last-of-type(8)::before {
    content: "Assessment";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(7)::before,
  table#listTableCompleted tr td:nth-last-of-type(7)::before,
  table#listTableArchived tr td:nth-last-of-type(7)::before {
    content: "Assessment Status";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(6)::before,
  table#listTableCompleted tr td:nth-last-of-type(6)::before,
  table#listTableArchived tr td:nth-last-of-type(6)::before {
    content: "Person to Rate";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(5)::before,
  table#listTableCompleted tr td:nth-last-of-type(5)::before,
  table#listTableArchived tr td:nth-last-of-type(5)::before {
    content: "Person to Rate";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(4)::before,
  table#listTableCompleted tr td:nth-last-of-type(4)::before,
  table#listTableArchived tr td:nth-last-of-type(4)::before {
    content: "Nominate";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(3)::before,
  table#listTableCompleted tr td:nth-last-of-type(3)::before,
  table#listTableArchived tr td:nth-last-of-type(3)::before {
    content: "Select";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(2)::before,
  table#listTableCompleted tr td:nth-last-of-type(2)::before,
  table#listTableArchived tr td:nth-last-of-type(2)::before {
    content: "Take Assessment";
    vertical-align: top;
  }

  table#listTableCurrent tr td:nth-last-of-type(1)::before,
  table#listTableCompleted tr td:nth-last-of-type(1)::before,
  table#listTableArchived tr td:nth-last-of-type(1)::before {
    content: "Archive";
    vertical-align: top;
  }
}

#survey_id {
  display: none;
}

.notSaved {
  display: none;
}

.noCap {
  text-transform: none !important;
}

.saved {
  display: inline-block;
}

@media (max-width: 900px) {
  .survey {
    padding: 0 20px;
  }

  .survey button.btn {
    display: inline;
    padding: 15px;
    margin: 5px;
  }
}

@media (max-width: 900px) {
  .survey_pageHeader {
    font-size: 15px;
    text-align: center;
  }
}

.survey_pageHeader_description {
  padding: 10px 0 20px 0;
  font-size: larger;
}

@media (max-width: 900px) {
  .survey_pageHeader_description {
    text-align: center;
  }
}

.survey_measureDef {
  font-size: 18px;
  padding-bottom: 20px;
  font-weight: 600;
  margin-left: 20px;
}

.survey_name {
  padding: 10px 0;
  font-size: 18px;
}

.survey_details {
  padding-bottom: 20px;
}

.survey_details p {
  line-height: 2;
}

.survey_intro {
  padding: 0 80px 20px 0;
}

.survey_intro_container div {
  margin-top: 10px;
  margin-bottom: 10px;
}

.survey_intro_container h4 {
  margin-top: 30px;
}

.survey_intro_container_p {
  padding: 15px 0;
}

.survey_q_set_biographic .bioQuestion {
  display: flex;
  width: 50%;
}

.survey_q_set_biographic .bioQuestion .larger {
  width: 50%;
}

.survey_q_set_default {
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px solid darkgrey;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .survey_q_set_default {
    flex-direction: column;
  }
}

.survey_q_set_igniteHer,
.survey_q_set_fiveOptions {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  border-bottom: none;
  margin-bottom: 20px;
}

.survey_q_set_fiveOptions {
  margin-bottom: 30px;
  border-bottom: 2px solid var(--primaryColor);
  padding-bottom: 30px;
}

.survey_q_set_section_default {
  display: inline-block;
  position: relative;
}

@media (max-width: 900px) {
  .survey_q_set_section_default {
    background-color: lightgrey;
    margin-bottom: 20px;
    padding: 5px;
  }
}

.survey_q_set_section_default div:nth-child(2) {
  width: 500px;
}

@media (max-width: 900px) {
  .survey_q_set_section_default div:nth-child(2) {
    width: 80vw;
  }
}

.survey_q_set_section-id {
  display: none;
}

.survey_q_set_section_igniteHer,
.survey_q_set_section_fiveOptions {
  display: inline-block;
  position: relative;
}

.survey_q_set_section_igniteHer-id,
.survey_q_set_section_fiveOptions-id {
  display: none;
}

.survey_q_set_section_fiveOptions .larger {
  font-size: 18px;
  font-weight: 600;
  color: var(--primaryColor);
}

.survey_q_set_section_igniteHer:nth-child(2) {
  width: 100%;
  padding-left: 10px;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

.survey_q_set_tailer {
  padding: 10px;
}

.survey_q_set_header {
  display: flex;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid darkgrey;
}

.survey_q_set_header_section {
  width: 250px;
  position: relative;
  padding-left: 10px;
  display: inline-flex;
}

.survey_q_set_header div.survey_q_set_section {
  width: 60%;
}

div#sectionHeader {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: 600;
  margin-left: 0;
  margin-top: 30px;
}

.optionContainer_igniteHer {
  display: flex;
  width: 100%;
  margin-top: 15px;
}

.optionContainer_default {
  display: flex;
  width: auto;
  margin-right: 10px;
}

.optionContainer select {
  border-radius: 4px;
  border: 1px solid darkgrey;
  width: 200px;
}

.endQuestion {
  position: relative;
}

.endQuestion div.larger {
  margin-top: 40px;
  font-size: 14px;
}

.endQuestion textarea {
  width: 80%;
  margin-top: 20px;
  border-radius: 3px;
  border: 1px solid darkgrey;
  padding-top: 5px;
  padding-left: 5px;
}

.endQuestion textarea.largeTextBox {
  border-radius: 5px;
  font-size: 18px;
}

#survey_Headers {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 20px;
}

#survey_Headers .survey_Headers_text {
  order: 1;
  width: 70%;
}

@media (max-width: 900px) {
  #survey_Headers .survey_Headers_text {
    margin: 0 auto;
  }
}

img.survey_Headers_profilePic {
  order: 0;
  margin-right: 25px;
  margin-top: 10px;
  max-height: 150px;
  padding: 3px;
  background-color: #fff;
  border: 2px solid #ccc;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

@media (max-width: 900px) {
  img.survey_Headers_profilePic {
    margin: 0 auto;
  }
}

.measureName {
  display: none;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 15px 0 15px;
  padding-left: 15px;
}

div.survey_section div.survey_q_set div.survey_q_set_section {
  border-right: none;
}

ul.list {
  list-style: none;
}

#consentForm {
  margin-top: 40px;
}

#consentText p {
  padding-bottom: 15px;
  text-align: justify;
}

#concentCheckContainer {
  /* padding-top: 15px; */
  text-align: center;
  width: fit-content;
}

div#otp {
  font-size: larger;
  font-weight: 700;
  text-align: center;
  /* max-width: 200px; */
}

p.guideText {
  font-size: x-large;
  padding-left: 20px;
  padding-top: 48px;
}

img.guideTextImage {
  max-height: 15vh;
}

#businessCards {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.businesssCard {
  position: relative;
  text-align: left;
  margin: 10px;
  height: 180px;
  width: 320px;
  padding: 10px;
  display: grid;
  grid-template: 40px 20px 20px 20px/150px 150px;
  grid-gap: 2px;
  border: 1px solid #384045;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.businesssCard_name {
  justify-self: start;
  text-overflow: ellipsis;
  font-size: 2rem;
  font-weight: bolder;
  grid-row: 1/1;
  grid-column: 1/1;
}

.businesssCard_email {
  justify-self: start;
  color: blue;
  font-style: italic;
  font-size: 1.5rem;
  grid-row: 2/2;
  grid-column: 1/1;
}

.businesssCard_relationship {
  justify-self: start;
  font-size: 1.5rem;
  grid-row: 3/3;
  grid-column: 1/2;
}

.businesssCard_assessmentStatus {
  justify-self: start;
  font-size: 1.5rem;
  grid-row: 5/5;
  grid-column: 1/1;
}

.businesssCard_imageContainer {
  grid-row: 1/4;
  grid-column: 2/2;
  height: 100px;
  width: 100px;
  justify-self: right;
  padding: 0;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}

.businesssCard_image {
  position: absolute;
  width: 100px;
}

.businesssCard .fas.fa-times-circle {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  color: rgba(255, 0, 0, 0.5);
}

.businesssCard .fas.fa-times-circle:hover {
  opacity: 0;
  transition: opacity 0.2s;
}

.businesssCard .fas.fa-times-circle:hover~.replace {
  opacity: 1;
}

.businesssCard .replace {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  height: 19px;
  line-height: 13px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.5s;
}

.tab {
  overflow: hidden;
  width: 100%;
}

.tab button,
.tab button#viewGroupTab,
.tab button#linkAssessmentTab {
  background-color: lightgrey;
  color: #fff;
  border-radius: 12px 12px 0 0;
  min-width: 100px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1rem;
  margin-right: 5px;
  transition: 0.5s;
}

.tab button:hover {
  background-color: var(--secondaryColor);
  color: #fff;
}

.tab button.active {
  background-color: var(--primaryColor);
  color: #fff;
}

.tabcontent,
.messageContent,
.assessmentContents,
.nominationContent {
  padding: 20px 30px 0px 20px;
  display: none;
  border: 2px solid var(--primaryColor);
  border-radius: 0;
  min-height: 60vh;
  width: 100%;
}

.tabcontent div.container,
.messageContent div.container,
.assessmentContents div.container,
.nominationContent div.container {
  padding: 20px 30px;
}

@media (max-width: 900px) {

  .tabcontent div.container,
  .messageContent div.container,
  .assessmentContents div.container,
  .nominationContent div.container {
    padding: 0;
  }
}

.tabcontent.active,
.messageContent.active,
.assessmentContents.active,
.nominationContent.active {
  display: block;
}

#tab1,
#tab1_l {
  display: block;
}

#tab1_l,
#tab2_l,
#tab3_l,
#tab4_l {
  min-height: 250px;
}

#messageTabs {
  width: 50%;
}

.eReplyContent {
  padding: 10px;
  min-height: 60vh;
  width: auto;
}

.elabel {
  color: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  width: 100px;
  transition: all 0.3s;
}

.tabcontent2 {
  padding: 20px 30px;
  border: 2px solid var(--primaryColor);
  border-radius: 0;
  min-height: 60vh;
  width: 100%;
}

@media (max-width: 900px) {
  .tab {
    background-color: transparent;
  }

  .tab .tablinks {
    border-radius: 0;
    margin: 0;
  }

  .tabcontent,
  .messageContent,
  .assessmentContents,
  .nominationContent {
    border-radius: 0;
    border: 4px solid var(--primaryColor);
    width: 100vw;
  }
}

.question {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
}

.question_header {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
}

.question_survey {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  height: auto;
}

.question_survey p {
  margin-bottom: 2px;
}

.question_survey p:nth-child(1) {
  padding-right: 20px;
}

.question_survey:nth-child(odd) p:nth-child(2),
.question_survey:nth-child(odd) p:nth-child(3) {
  background-color: rgba(182, 187, 51, 0.3);
  padding-left: 7px;
  margin-left: 2px;
}

.question_survey:nth-child(odd) p:nth-child(1) {
  padding-left: 7px;
  background-color: rgba(182, 187, 51, 0.3);
}

.question_survey:nth-child(even) p:nth-child(2),
.question_survey:nth-child(even) p:nth-child(3) {
  background-color: rgba(182, 187, 51, 0.1);
  padding-left: 7px;
  margin-left: 2px;
}

.question_survey:nth-child(even) p:nth-child(1) {
  padding-left: 7px;
  background-color: rgba(182, 187, 51, 0.1);
}

.question_trailer {
  display: block;
  width: 100%;
  justify-content: space-between;
}

#survey_section_1_header,
#survey_section_2_header,
#survey_section_3_header {
  margin-top: 15px;
  font-weight: bolder;
  color: #fff;
}

#survey_section_1_header div,
#survey_section_2_header div,
#survey_section_3_header div {
  background-color: var(--secondaryColor);
  padding-left: 7px;
}

#survey_section_1_header p,
#survey_section_2_header p,
#survey_section_3_header p {
  background-color: var(--secondaryColor);
  margin-bottom: 0;
  padding-left: 7px;
  margin-left: 2px;
}

#survey_section_1 {
  border: 2px solid var(--secondaryColor);
}

#survey_section_1_header {
  background-color: var(--secondaryColor);
  padding-left: 7px;
}

#survey_section_1 .question_header {
  padding-left: 7px;
}

#survey_section_1 .question_header p {
  margin-bottom: 0;
}

#survey_section_1 .question_header:nth-child(odd) {
  background-color: rgba(182, 187, 51, 0.3);
}

#survey_section_1 .question_header:nth-child(even) {
  background-color: rgba(182, 187, 51, 0.1);
}

#survey_section_2 {
  border: 2px solid var(--secondaryColor);
}

#survey_section_2_header {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
}

#survey_section_2_header>.placeholder {
  width: 50%;
}

#survey_section_2_header>.head {
  width: 25%;
}

.question_trailer {
  margin-bottom: 20px;
  border: 2px solid var(--secondaryColor);
  text-align: center;
}

.question_trailer p {
  margin-bottom: 0;
}

.question_trailer p:nth-child(odd) {
  color: white;
  background-color: var(--secondaryColor);
  text-align: center;
  font-weight: bolder;
  width: 100%;
}

.question_trailer p:nth-child(even) {
  background-color: rgba(182, 187, 51, 0.1);
  border: 2;
}

.questionText {
  width: 50%;
}

.answer-one-answer {
  width: 20%;
}

.answer-multi-answer {
  width: 25%;
}

.answer-text-answer {
  display: block;
}

img.graph {
  box-shadow: 0 0 20px grey;
  border: 1px solid grey;
  padding: 7px;
}

div.reports {
  margin-top: 25px;
  margin-bottom: 50px;
}

ul.reportList {
  padding-top: 20px;
}

ul.reportList li {
  list-style-type: none;
  display: inline;
  padding: 10px 15px;
  background-color: var(--primaryColor);
  color: white;
  font-size: larger;
}

#Graph1,
#Graph2,
#Graph3 {
  display: none;
}

.cadidateBox {
  border: 1 px solid lightgray;
  padding: 30px 50px;
  border-radius: 5px;
  box-shadow: 0 0 20px lightgray;
  width: 40%;
}

.cadidateBox div.jvr_row label {
  padding: 5px;
  padding: 5px 15px;
  text-align: left;
}

.cadidateBox div.jvr_row input {
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 4px;
}

.cadidateBox div.jvr_row a {
  color: #fff;
  font-weight: bold;
  background-color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
  border-radius: 4px;
  padding: 4px 8px;
  text-decoration: none;
}

.cadidateBox div.jvr_row a:hover {
  background-color: black;
  border: 2px solid black;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.cadidateBox table thead th {
  width: 150px;
}

#display1 {
  position: absolute;
  background-color: #fff;
  border: 1px solid darkgray;
  left: 5%;
  z-index: 150;
  border-radius: 5px;
  box-shadow: 0 0 10px grey;
  max-width: 70vw;
  width: auto;
  padding: 0 40px 40px 40px;
}

.fa-window-close {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
}

.display1 {
  position: absolute;
  background-color: #fff;
  border: 1px solid darkgray;
  left: 25%;
  top: 10%;
  z-index: 150;
  border-radius: 5px;
  box-shadow: 0 0 10px grey;
  width: 500px;
  padding: 40px;
}

#displayPopUp {
  position: absolute;
  border: 1px solid darkgrey;
  background-color: #fff;
  z-index: 150;
  box-shadow: 0 0 40px grey;
  padding: 0;
  margin-bottom: 20px;
  min-height: 80vh;
  min-width: 90vh;
  width: auto;
}

#displayPopUp .popup_header {
  /* width: 90vh; */
  padding: 10px;
  font-size: larger;
  text-align: center;
  background-color: var(--primaryColor);
  color: #fff;
}

#displayPopUp div#popup_container {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
}

#displayPopUp h5 {
  font-size: larger;
}

#displayPopUp div#mailBody {
  margin-top: 20px;
  padding-top: 40px;
  border-top: 1px solid lightgray;
}

select#cancelReason {
  /* width: 267px; */
}

#approvalCards {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  background-color: #fff;
}

.approvalCards {
  text-align: left;
  margin: 10px;
  height: 180px;
  padding: 10px;
  display: grid;
  grid-template: 22px 22px 22px/80px 250px;
  grid-gap: 2px;
  border: 1px solid #384045;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

.approvalCards_name {
  justify-self: start;
  text-overflow: ellipsis;
  font-size: 2rem;
  font-weight: bolder;
  grid-row: 1/1;
  grid-column: 2/2;
}

.approvalCards_relationship {
  justify-self: start;
  font-size: 1.5rem;
  grid-row: 3/3;
  grid-column: 2/2;
}

.approvalCards_email {
  justify-self: start;
  color: #2c292a;
  font-style: italic;
  font-size: 1.5rem;
  grid-row: 2/2;
  grid-column: 2/2;
}

.approvalCards_imageContainer {
  grid-row: 1/3;
  grid-column: 1/1;
  height: 65px;
  width: 65px;
  justify-self: left;
  padding: 0;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}

.approvalCards_image {
  position: absolute;
  width: 65px;
  height: auto;
}

.approvalCards_comments {
  grid-row: 4/6;
  grid-column: 2/2;
  border: 2px solid var(--primaryColor);
}

.approvalCards_approve {
  grid-row: 4/4;
  grid-column: 1/1;
  font-weight: bolder;
  border: 2px solid var(--secondaryColor);
  background-color: #fff;
  color: var(--secondaryColor);
  margin: 0;
  border-radius: 4px;
}

.approvalCards_approve.active {
  color: #fff;
  background-color: var(--secondaryColor);
}

.approvalCards_approve.inactive {
  color: lightgray;
  background-color: #fff;
  border-color: lightgray;
}

.approvalCards_approve:hover {
  border: 2px solid #009e32;
  color: #fff;
  background-color: #009e32;
}

.approvalCards_reject {
  margin: 0;
  grid-row: 5/5;
  grid-column: 1/1;
  border: 2px solid #c83c37;
  font-weight: bolder;
  color: #c83c37;
}

.approvalCards_reject:hover {
  border: 2px solid #c83c37;
  color: #fff;
  background-color: #c83c37;
}

.approvalCards_reject.active {
  color: #fff;
  background-color: #c83c37;
}

.approvalCards_reject.inactive {
  color: lightgray;
  background-color: #fff;
  border-color: lightgray;
}

.history {
  border: 1px solid grey;
}

.historyHeader {
  margin: 0 0 10px 0;
  background-color: var(--secondaryColor);
  padding: 5px;
}

.nominate_btn {
  border: 3px solid var(--primaryColor);
  border-radius: 4px;
  color: var(--primaryColor);
  background-color: #fff;
  text-align: center;
  line-height: 17px;
  width: 100px;
}

.nominate_btn:hover {
  color: #fff;
  background-color: var(--primaryColor);
}

.nominations:nth-child(odd) {
  background-color: #f2f3f4;
}

#nominationInstructions div {
  margin-top: 20px;
}

#nominationInstructions div ul {
  margin-left: 20px;
  margin-top: 15px;
}

#createNominees {
  margin-top: 30px;
}

.jvr_row.nominations {
  justify-content: flex-start;
  margin-top: 10px;
  width: 100%;
}

.jvr_row.nominations .column {
  padding-left: 10px;
}

.jvr_row.nominations .column:nth-child(1) {
  width: 15%;
}

.jvr_row.nominations .column:nth-child(2) {
  width: 20%;
}

.jvr_row.nominations .column:nth-child(3) {
  width: 20%;
}

.jvr_row.nominations .column:nth-child(4) {
  width: 20%;
}

.jvr_row.nominations .column:nth-child(5) {
  width: 10%;
}

.jvr_row.nominations .column:nth-child(6) {
  width: 18%;
}

.jvr_row.nominations .relation {
  width: 15%;
}

label.jvr_row.nominations {
  padding-left: 20px;
}

label.jvr_row.nominations span.relation {
  width: 17%;
}

#warningMinNotReached {
  background-color: #fff;
  width: 500px;
  position: absolute;
  top: 25%;
  left: 25%;
  padding: 40px;
  box-shadow: 0 0 15px grey;
  text-align: center;
  border-radius: 4px;
}

#warningMinNotReached div.flex_row {
  justify-content: center;
}

#warningMinNotReached_text {
  width: 100%;
}

#replaceNomineeForm.fas.fa-times-circle {
  position: absolute;
  top: 7px;
  right: 7px;
  color: var(--primaryColor);
}

.history {
  border: 1px solid grey;
}

.historyHeader {
  margin: 0 0 10px 0;
  background-color: var(--primaryColor);
  color: white;
  padding: 5px;
  width: 100%;
}

.nominate_btn {
  border: 3px solid var(--primaryColor);
  border-radius: 4px;
  color: var(--primaryColor);
  background-color: #fff;
  text-align: center;
  width: 100px;
}

.nominate_btn:hover {
  color: #fff;
  background-color: var(--primaryColor);
}

.nominations {
  border: 1px solid var(--primaryColor);
  padding: 10px;
  margin: 10px;
}

#nominationInstructions div {
  margin-top: 20px;
}

#nominationInstructions div ul {
  margin-left: 20px;
  margin-top: 15px;
}

#createNominees {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}

.jvr_row.nominations {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 250px;
  justify-content: flex-start;
  margin-top: 10px;
  width: 100%;
}

.jvr_row.nominations .column {
  width: 100%;
}

.jvr_row.nominations .relation {
  width: 15%;
}

div#inserted {
  display: flex;
  flex-wrap: wrap;
}

#inserted img {
  min-width: 20px;
}

label.jvr_row.nominations {
  padding-left: 20px;
}

label.jvr_row.nominations span.relation {
  width: 17%;
}

#warningMinNotReached {
  background-color: #fff;
  width: 500px;
  position: absolute;
  top: 25%;
  left: 25%;
  padding: 40px;
  box-shadow: 0 0 15px grey;
  text-align: center;
  border-radius: 4px;
}

#warningMinNotReached div.flex_row {
  justify-content: center;
}

#warningMinNotReached_text {
  width: 100%;
}

#display2 {
  padding: 20px;
  background-color: #fff;
  border: 1px solid grey;
  border-radius: 5px;
  box-shadow: 0 0 20px grey;
  position: absolute;
  top: 20%;
  left: 30%;
}

#editUser {
  width: 350px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid grey;
  border-radius: 5px;
  box-shadow: 0 0 20px grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

p.info {
  width: 80%;
  font-size: larger;
  margin-top: 10px;
}

p.info strong {
  color: var(--errorColor);
}

.column.addUser {
  margin-top: 25px;
  width: 400px;
}

.column.addUser label {
  width: 40%;
}

.column.addUser input {
  padding: 5px;
  border: 1px solid grey;
  border-radius: 4px;
  background-color: #f2f3f4;
}

select {
  border: 1px solid #000000;
  padding: 10px;
}

input {
  border: 1px solid #000;
  padding-left: 10px;
}

.radio label {
  padding: 10px;
  width: 100px;
}

#clientDD {
  width: 200px;
}

table#ListUserTable {
  min-width: 1000px;
  display: block;
  min-height: 70vh;
  width: fit-content;
  border-collapse: collapse;
  border: 2px solid #ccc;
  padding: 25px;
}

#asrateeArray,
#asRaterArray {
  width: 100%;
}

.assessmentDetails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.assessmentDetails>.row {
  width: 300px;
}

.assessmentDetails>.row>label.fieldname {
  width: 180px;
}

.assessmentDetails>.row>label.container {
  margin: 0;
}

.assessmentDetails>div>div>div>label.fieldname {
  width: fit-content;
}

.reviewProfile {
  margin-right: 20px;
  width: 30%;
}

.reviewProfile>div>label {
  /* display: inline-block; */
  width: 100px;
  font-weight: 800;
  letter-spacing: 0px;
  font-size: 15px;
  font-weight: 700;
}

.reviewProfile>div {
  margin-bottom: 5px;
}

div.listHeading {
  color: #fff;
  font-weight: 600;
  font-size: larger;
  background-color: var(--primaryColor);
  padding: 10px;
  border-radius: 0;
}

div.listHeading>span {
  margin-right: 50px;
}

div.assessmentReview,
div.assessmentReview2 {
  padding: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
}

div.listBox {
  margin-top: 20px;
  border: 1px solid lightGrey;
  border-radius: 6px;
}

.listBox>table {
  width: 95%;
  border-collapse: collapse;
  border: 2px solid #ccc;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.message {
  position: absolute;
  background-color: #fff;
  border: 1px solid var(--primaryColor);
  left: 25%;
  top: 10%;
  z-index: 150;
  box-shadow: 0 0 15px #303030;
  width: 500px;
  padding: 15px 40px;
}

.message h4 {
  text-align: center;
  color: #2c292a;
  font-size: large;
}

.message p {
  color: #2c292a;
  padding: 15px 0;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  width: 50px;
  height: 24px;
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  width: 50px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider.both {
  background-color: var(--secondaryColor);
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked+.slider {
  background-color: var(--primaryColor);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.info {
  border: 1px solid grey;
  border-radius: 5px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 20px grey;
}

.info .heading {
  border-radius: 5px 5px 0 0;
  background-color: var(--primaryColor);
  color: #fff;
  font-weight: bold;
  font-size: larger;
  padding: 10px;
  text-align: center;
}

.info p {
  padding: 0 20px 20px 20px;
}

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

.sk_row#approvalBatch {
  justify-content: space-evenly;
  border-radius: 5px;
  border: #ccc;
  box-shadow: 0 0 5px;
  margin-top: 20px;
}

.sk_row#approvalBatch_submit {
  justify-content: center;
}

div#replaceNomineeForm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 20px;
  z-index: 10;
  padding: 20px 30px 20px 20px;
}

div#ReplaceForm {
  display: inline-block;
}

div#ReplaceFormNew {
  margin: 0 auto;
  display: block;
  width: 100%;
}

div#formfields {
  width: fit-content;
  margin: auto;
}

div#addNewReplacementBtn {
  display: inline-block;
  margin-left: -5px;
  padding: 5px 10px;
  border: 2px solid grey;
  height: 39px;
}

.btn.swopToTargetList {
  margin: 0;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10000;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid var(--primaryColor);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#blocker {
  position: absolute;
}

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

  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

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

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

#myDiv {
  display: none;
  text-align: center;
}

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 1px solid grey;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
  background-color: var(--secondaryColor);
  border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark::after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark::after {
  left: 33%;
  top: 47%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg) translate(-50%, -50%);
}

#errorMessageBox,
#confirmationMessageBox {
  background-color: #fff;
  width: 500px;
  position: fixed;
  top: 25%;
  left: 25%;
  box-shadow: 0 0 15px grey;
  text-align: center;
  border-radius: 4px;
  z-index: 1000;
}

#errorMessageBox_header,
#confirmationMessageBox_header {
  font-size: larger;
  color: #fff;
  background-color: var(--primaryColor);
  width: 100%;
  padding: 10px;
}

#errorMessageBox_text,
#confirmationMessageBox_text {
  padding: 15px;
}

#btn_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#btn_container.btn.btn_solid {
  width: 45%;
}

.emailTemplatesForm div.flex_row div.flex_column label {
  /* display: inline-flex; */
  width: 120px;
  padding: 5px;
  border-radius: 4px;
  border-color: 1px solid grey;
}

.emailTemplatesForm div.flex_row div.flex_column select {
  width: 250px;
  padding: 5px;
  border-radius: 4px;
  border-color: 1px solid grey;
}

.emailTemplatesForm div.flex_row div.flex_column input {
  width: 720px;
  padding: 5px;
  border-radius: 4px;
  border-color: 1px solid grey;
  height: auto;
}

.emailTemplatesForm div.flex_row div.flex_column textarea {
  padding: 5px;
  border-radius: 4px;
  border-color: 1px solid grey;
}

div.emailTemplatesForm div.flex_row div.flex_column select#clientDD {
  width: 250px;
}

div#eventType.column,
div#event.column,
div#assessment.column,
div#messageType.column {
  width: 250px;
}

#getTemplate {
  width: 130px;
}

#video1 {
  height: 100%;
  width: 60vw;
}

.attendLesson_video1 {
  position: relative;
}

.attendLesson_video1_controls {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20%;
  padding: 5px 10px;
}

.attendLesson_video1_controls div {
  display: inline-block;
}

.attendLesson_video1_controls.play {
  display: inline;
  left: 5%;
  bottom: 2%;
  z-index: 2;
}

.attendLesson_video1_controls.pause {
  display: inline;
  left: 10%;
  bottom: 2%;
  z-index: 2;
}

.attendLesson_video1_controls.bookmark {
  display: inline;
  left: 27%;
  bottom: 2%;
  z-index: 2;
}

.attendLesson_video1_controls.lengthVScurrent {
  display: inline;
  left: 15%;
  bottom: 2%;
  color: black;
  font-weight: 500;
  z-index: 2;
}

.attendLesson_video1_controls.expand {
  display: inline;
  right: 5%;
  bottom: 2%;
  z-index: 2;
}

.attendLesson_video1_controls.progressBar {
  padding: 0;
  left: 35%;
  bottom: 4%;
  width: 50%;
  height: 10px;
  background-color: grey;
  z-index: 2;
}

.attendLesson_video1_controls.progressBarSeek {
  padding: 0;
  left: 35%;
  bottom: 4%;
  width: 50%;
  height: 10px;
  z-index: 2;
}

.attendLesson_video1_controls.progressBarTrack {
  padding: 0;
  bottom: 4%;
  height: 10px;
  background-color: green;
  z-index: 2;
}

.attendLesson_video1_Container .tabcontent {
  background-color: #fff;
}

.fas.fa-play {
  color: black;
}

.fas.fa-pause {
  color: black;
}

.far.fa-bookmark {
  color: black;
}

.fas.fa-expand {
  color: black;
}

.block {
  position: absolute;
  z-index: 1;
  display: inline-block;
}

#playerControls {
  height: 60px;
  background-color: #ccc;
}

#fullScreen {
  display: block;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  background-color: black;
  text-align: center;
}

#fullScreen div.attendLesson_video1_controls.bookmark {
  display: none;
}

div.pdvForm {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 20px 0 20px 0;
  border: 1px solid var(--primaryColor);
  text-align: center;
}

div.pdvForm_inputField {
  width: 30%;
  margin-right: 10px;
}

div.pdvForm_inputField label {
  display: inline-flex;
  width: 35%;
}

div.pdvForm_inputField select {
  width: 60%;
}

div.pdvForm h2 {
  margin-top: 0;
  color: #fff;
  background-color: var(--primaryColor);
}

div.pdvForm .flex_row {
  padding: 10px 15px;
}

/* here */

div.pdvFormDark {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 20px 0 20px 0;
  /* border: 1px solid var(--primaryColor); */
  text-align: center;
}

div.pdvFormDark h2 {
  margin-top: 0;
  color: black;
  background-color: rgb(255, 255, 255);
}

div.pdvFormDark .flex_row {
  padding: 10px 15px;
}

.cardBody {
  display: flex;
  flex-flow: wrap;
}

.cardBody * {
  box-sizing: border-box;
}

.card-container {
  flex: 200px;
  margin: 30px;
}

.card-container .card {
  font-weight: bold;
  position: relative;
  width: 300px;
}

.card-container .card h2 {
  margin: 10px 0;
}

.card-container .card a {
  padding: 30px;
  width: 100%;
  height: 300px;
  border: 2px solid black;
  background: white;
  text-decoration: none;
  color: black;
  display: block;
  transition: 0.25s ease;
}

.card-container .card a:hover {
  transform: translate(-30px, -30px);
  border-color: var(--primaryColor);
}

.card-container .card a:hover .card--display {
  display: none;
}

.card-container .card a:hover .card--hover {
  display: block;
}

.card-container .card a .card--display i {
  font-size: 60px;
  margin-top: 18px;
}

.card-container .card a .card--display h2 {
  margin: 20px 0;
}

.card-container .card a .card--hover {
  display: none;
}

.card-container .card a .card--hover h2 {
  margin: 20px 0;
}

.card-container .card a .card--hover p {
  font-weight: normal;
  line-height: 1.5;
}

.card-container .card a .card--hover p.link {
  font-weight: bold;
  color: var(--primaryColor);
}

.card-container .card .card--border {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 2px dashed var(--secondaryColor);
  z-index: -1;
}

.card-container .card.card--dark a {
  color: white;
  background-color: black;
  border-color: black;
}

.card-container .card.card--dark a .card--hover .link {
  color: var(--secondaryColor);
}

div#ListRef1 div.tab button.tablinks,
div#ListRef2 div.tab button.tablinks {
  width: auto;
}

div#ListRef1 div.tabcontent,
div#ListRef2 div.tabcontent {
  padding: 25px;
}

div#ListRef1 div.tabcontent ul li,
div#ListRef2 div.tabcontent ul li {
  list-style-type: none;
  list-style: none;
}

h2#catergoryHeader {
  margin-bottom: 20px;
}

table#rateeNominationBreakdown thead th {
  text-transform: capitalize;
}

table#rateeNominationBreakdown tr td {
  white-space: nowrap;
}

table#rateeNominationBreakdown tr:nth-child(even) td.selfRate {
  background-color: #d2e9fa;
}

table#rateeNominationBreakdown tr:nth-child(even) td.selfRateCompleted {
  background-color: #d2e9fa;
}

table#rateeNominationBreakdown tr:nth-child(even) td.managerNominated {
  background-color: #bde5fc;
}

table#rateeNominationBreakdown tr:nth-child(even) td.managerCompleted {
  background-color: #bde5fc;
}

table#rateeNominationBreakdown tr:nth-child(even) td.peerNominated {
  background-color: #b6ddfa;
}

table#rateeNominationBreakdown tr:nth-child(even) td.peerCompleted {
  background-color: #b6ddfa;
}

table#rateeNominationBreakdown tr:nth-child(even) td.directReportNominated {
  background-color: #a2c8ff;
}

table#rateeNominationBreakdown tr:nth-child(even) td.directReportCompleted {
  background-color: #a2c8ff;
}

table#rateeNominationBreakdown tr:nth-child(even) td.keystakeholderNominated {
  background-color: #a2e6ff;
}

table#rateeNominationBreakdown tr:nth-child(even) td.keystakeholderCompleted {
  background-color: #a2e6ff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.selfRate {
  background-color: #f7fcff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.selfRateCompleted {
  background-color: #f7fcff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.managerNominated {
  background-color: #f7fcff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.managerCompleted {
  background-color: #f7fcff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.peerNominated {
  background-color: #edf7fc;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.peerCompleted {
  background-color: #edf7fc;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.directReportNominated {
  background-color: #d7e6fc;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.directReportCompleted {
  background-color: #d7e6fc;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.keystakeholderNominated {
  background-color: #e4f8ff;
}

table#rateeNominationBreakdown tr:nth-child(odd) td.keystakeholderCompleted {
  background-color: #e4f8ff;
}

table#raterNominationBreakdown thead th {
  text-transform: capitalize;
  white-space: nowrap;
}

table#raterNominationBreakdown tr td {
  white-space: nowrap;
}

table#raterNominationBreakdown tr:nth-child(even) td.selfRate {
  background-color: #d2e9fa;
}

table#raterNominationBreakdown tr:nth-child(even) td.selfRateCompleted {
  background-color: #d2e9fa;
}

table#raterNominationBreakdown tr:nth-child(even) td.nominated {
  background-color: #bde5fc;
}

table#raterNominationBreakdown tr:nth-child(even) td.completed {
  background-color: #bde5fc;
}

table#raterNominationBreakdown tr:nth-child(odd) td.selfRate {
  background-color: #f7fcff;
}

table#raterNominationBreakdown tr:nth-child(odd) td.selfRateCompleted {
  background-color: #f7fcff;
}

table#raterNominationBreakdown tr:nth-child(odd) td.nominated {
  background-color: #f7fcff;
}

table#raterNominationBreakdown tr:nth-child(odd) td.completed {
  background-color: #f7fcff;
}

table#raterNominationStatus thead th {
  text-transform: capitalize;
  white-space: nowrap;
}

table#raterNominationStatus tr td {
  white-space: nowrap;
}

div#participantName div,
div#nominationStatus div {
  margin-top: 20px;
}

div#participantName div h2,
div#nominationStatus div h2 {
  margin-top: 0;
}

#editAssessmentTabs .tabcontent {
  min-height: 70vh;
  padding: 20px;
}

#editAssessmentTabs .tabcontent div textarea {
  width: 100%;
  min-height: 50px;
}

#editAssessmentTabs .tabcontent div div label {
  vertical-align: top;
}

#editAssessmentTabs .tabcontent div div textarea {
  width: 80%;
}

#editAssessmentTabs .tabcontent div div input {
  width: 80%;
}

#editAssessmentTabs .tabcontent div div input.slider {
  width: 50%;
}

#editAssessmentTabs .tabcontent div div#pageInfo {
  width: 66%;
  max-height: 60vh;
  overflow-y: scroll;
}

#editAssessmentTabs .tabcontent div div#pageInfo .dropQuestion {
  border: 1px solid lightgray;
  min-height: 10px;
}

#editAssessmentTabs .tabcontent div #selectQuestions {
  width: 34%;
}

#editAssessmentTabs .tabcontent div #selectQuestions div {
  padding: 10px;
}

#editAssessmentTabs .tabcontent div #selectQuestions div.QuestionsContainer {
  border: 1px solid lightgrey;
  min-height: 200px;
  max-height: 400px;
  overflow-y: scroll;
  width: 95%;
}

#editAssessmentTabs .tabcontent div #selectQuestions div select {
  width: 150px;
}

#editAssessmentTabs .tabcontent .clone {
  padding: 20px;
  background-color: #f2f3f4;
  border: 1px solid grey;
  border-radius: 0 0 4px 4px;
}

#editAssessmentTabs .tabcontent .clone_header {
  text-align: center;
  border: 1px solid var(--primaryColor);
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  background-color: var(--primaryColor);
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

.dragableQuestion {
  border: 1px solid lightgray;
  margin: 5px;
}

.dragableQuestion:last-of-type {
  margin-bottom: 50px;
}

.questionsPerPageCard {
  margin-top: 10px;
}

.pageHeading {
  text-align: center;
  background: var(--primaryColor);
  color: #fff;
  border: 1px solid lightgrey;
  margin-bottom: 1px;
  position: relative;
  margin-right: 30px;
}

.pageHeading span.toggelPageContent {
  color: #fff;
  position: absolute;
  right: 5px;
  font-weight: 600;
  font-size: x-large;
  background-color: transparent;
}

.pageContent {
  border: 1px solid lightgrey;
  margin-right: 30px;
  padding: 10px;
}

.pageContent div.questionDropBox {
  min-height: 100px;
  position: relative;
  margin-right: 30px;
  padding: 10px;
}

.pageContent div {
  border: 1px solid lightgrey;
  background-color: #fff;
  padding: 5px;
  padding-right: 15px;
  margin-top: 5px;
  position: relative;
}

.pageContent div.btn {
  padding: 4px 10px;
  border: 3px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
}

.pageContent div.btn:hover {
  border: 3px solid var(--primaryColor);
  background-color: var(--primaryColor);
}

.pageContent div:last-of-type {
  margin-bottom: 50px;
}

.pageContent .fa-trash-alt {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--errorColor);
}

.pageContent .dropQuestion {
  position: absolute;
  right: -90px;
  top: -5px;
  height: 100px;
  width: 80px;
}

.pageContent .dropQuestion:-moz-drag-over {
  background-color: var(--secondaryColor);
}

#measurements div.column {
  width: 20%;
}

#measurements div.column_xsmall {
  width: 40px;
}

#listQuestions {
  margin-top: 50px;
}

.column_xsmall input {
  width: 20px !important;
  margin-top: 5px;
}

span#openClose {
  font-size: larger;
  font-weight: 800;
}

div#pageHeadersContainer_header {
  font-size: large;
  margin: 20px 0 10px 0;
}

div.pageTextToggleHeading {
  background-color: var(--primaryColor);
  width: 100%;
  margin-bottom: 0;
  color: #fff;
}

select#userRoleDD {
  width: 95%;
}

label#defaultheading {
  width: auto;
  margin-left: 25%;
}

div#navtab.tabcontent.flex_row div.flex_row input {
  margin: 0 20px;
}

.selectedRatees {
  margin-bottom: 30px;
}

.selectedRatees .remove {
  width: 30px;
}

.selectRatee label {
  width: auto;
}

.selectRatee select {
  margin-right: 20px;
  height: 35px;
}

.selectRatee .btn {
  height: 45px;
}

div#targetGroupSelectBtn {
  margin: 0;
}

div#addNewSelectBtn {
  margin: 0 10px 0 0;
  padding: 5px;
  height: 35px;
}

div#selectionInputForm2 {
  margin-right: 20px;
}

.reporturl .btn {
  display: inline-block;
}

.btn {
  border: 2px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

@media (max-width: 900px) {
  .btn {
    display: block;
    margin: 0 auto;
  }
}

.btn:hover {
  background-color: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
  color: white;
  box-shadow: 0 0 5px grey;
}

.btn_inactive {
  border: 3px solid lightgray;
  background-color: lightgray;
}

.btn_inactive:hover {
  border: 3px solid lightgray;
  background-color: lightgray;
}

.btn.active {
  background-color: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
  color: #fff;
}

.btn_addMore {
  color: #fff;
  font-weight: 600;
  margin: 10px;
  font-size: larger;
  background-color: var(--primaryColor);
  width: 250px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.btn.small {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.btn_xsmall {
  padding: 0 5px;
  margin: 0;
  width: 50px;
}

.btn_xsmall.red {
  border: 2px solid var(--errorColor);
  background-color: #fff;
  color: var(--errorColor);
  width: 80px;
  margin-left: 10px;
}

.btn_xsmall.red:hover {
  background-color: var(--errorColor);
  color: #fff;
}

.btn_solid {
  background-color: var(--primaryColor);
  color: #fff;
  width: 100px;
}

.btn_solid:hover {
  background-color: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
}

.btn.top {
  margin-top: 0;
  margin-bottom: 20px;
}

.current {
  color: #fff;
  background-color: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
}

.start {
  border-radius: 0 20px 20px 0;
}

.custom-file-upload {
  margin-left: 30px;
  cursor: pointer;
}

div.btn.nominate {
  margin-left: 20px;
}

.fas.fa-times {
  border: 2px solid var(--errorColor);
  border-radius: 50%;
  color: var(--errorColor);
  font-weight: 700;
  padding: 3px 4px 1px 3px;
}

.custom-upload-input {
  position: absolute;
  left: 0;
  opacity: 0;
}

.custom-upload-label {
  position: relative;
}

div#addManagerBtn {
  padding: 0 10px;
  width: fit-content;
  margin: 0;
  margin-bottom: 10px;
}

/* Style the search box inside the navigation bar */
.search {
  margin-top: 8px;
  margin-right: 16px;
  margin-bottom: 8px;
  width: 100%;
}

.search div {
  display: inline-flex;
  position: relative;
  margin-left: 5px;
}

.search input[type="text"] {
  padding: 4px;
  border: 1px solid grey;
  border-radius: 4px;
  font-size: 17px;
  max-width: 150px;
}

.search .fas.fa-search {
  position: absolute;
  right: 5px;
  top: 8px;
  font-size: 15px;
  color: grey;
}

.search1 {
  margin-top: 8px;
  margin-right: 16px;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
  margin-left: 5px;
  display: inline-flex;
}


.search1 input[type="text"] {
  padding: 4px;
  border: 1px solid grey;
  border-radius: 4px;
  font-size: 17px;
  max-width: 150px;
}

.search1 .fas.fa-search {
  position: absolute;
  right: 5px;
  top: 8px;
  font-size: 15px;
  color: grey;
}

#searchContainer {
  position: absolute;
  top: 5px;
  right: -60px;
}

#searchContainer .searchBtn {
  opacity: 0;
  visibility: hidden;
  width: 90px;
  position: absolute;
  top: -65px;
  right: 107px;
  transition: all 0.5s;
}

#searchContainer .searchBtn__table,
#searchContainer .searchBtn__field {
  display: block;
  width: 100%;
  border: 1px solid var(--secondaryColor);
  border-top: 2px solid var(--secondaryColor);
  border-bottom: 2px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  padding: 3px 3px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: initial;
  visibility: visible;
}

#searchContainer .searchBtn input {
  visibility: hidden;
}

#searchContainer .searchBtn__field {
  margin-top: -2px;
  border-top: 1px solid var(--secondaryColor);
}

#searchContainer .searchArea__tableInput {
  visibility: hidden;
  position: absolute;
  right: 89px;
  top: 52px;
  height: 45px;
  border: 2px solid var(--secondaryColor);
  border-radius: 4px 0 0 4px;
}

#searchContainer .searchArea__optionsLabel {
  background-color: var(--secondaryColor);
  padding: 9px;
  text-align: center;
  padding-top: 16px;
  padding-left: 13px;
  border: 2px solid var(--secondaryColor);
}

#searchContainer .searchArea__optionsLabel .fas.fa-search {
  font-size: 20px;
  color: #fff;
}

#searchContainer .searchArea__checkBox {
  visibility: hidden;
}

#searchContainer .searchArea__checkBox:checked~.searchBtn {
  opacity: 1;
  visibility: visible;
}

#searchTable:checked~.searchArea__tableInput {
  visibility: visible;
}

#searchTable:checked~.searchBtn__table {
  background-color: var(--primaryColor);
}

#searchfield:checked~.searchBtn__field {
  background-color: var(--primaryColor);
}

.groupBox {
  border: 1px solid var(--primaryColor);
  border-radius: 4px;
}

.groupBox_heading {
  background-color: var(--primaryColor);
  padding: 5px;
  text-align: center;
  font-size: larger;
  font-weight: bolder;
  color: #fff;
}

.groupBox div {
  padding: 5px;
}

.groupBox div label {
  width: 80px;
}

#approversList>h5 {
  font-size: larger;
  font-weight: 700;
}

h2#assessmentHeader {
  font-size: 30px;
  color: #215257;
  font-weight: 100;
  display: flex;
  align-items: center;
}

img.user_Headers_profilePic {
  margin-right: 25px;
  max-height: 100px;
  padding: 3px;
  background-color: #fff;
  border: 1px solid #384045;
  -webkit-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  -moz-box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
  box-shadow: 8px 8px 33px -4px rgba(112, 112, 112, 0.5);
}

#Rating .rating__list--Box,
#RatedBy .rating__list--Box {
  display: block;
}

#Rating .rating__list--list li,
#RatedBy .rating__list--list li {
  list-style: none;
  padding: 4px 20px;
  border-bottom: 2px solid lightgrey;
  width: 200px;
}

#Rating .rating__form,
#RatedBy .rating__form {
  margin: 0 auto;
}

#Rating .rating__form__group,
#RatedBy .rating__form__group {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

#Rating .rating__form__group label,
#RatedBy .rating__form__group label {
  width: fit-content;
}

.align {
  display: inline;
}

.align .btn {
  margin: 0;

}

#searchName,
#searchName2 {
  display: inline;
  margin-right: 0;
  border-radius: 4px 0 0 0;
}

/* #searchName+.btn,
#searchName2+.btn {
  display: inline;
  margin: 0;
  padding: 4px 5px;
  margin-left: -4px;
  border-radius: 0 4px 4px 0;
} */

#rateeDD,
#rateeDD2 {
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
  /* border-top: 1px solid transparent; */
  width: 290px;
}

div#articles .nameInput,
#books .nameInput,
#eAcademyCourse .nameInput,
#eAcademyWorkshop .nameInput,
#podcasts .nameInput,
#videos .nameInput,
#workshops .nameInput {
  width: 389px;
}

div#articles .urlLink,
#books .urlLink,
#eAcademyCourse .urlLink,
#eAcademyWorkshop .urlLink,
#podcasts .urlLink,
#videos .urlLink,
#workshops .urlLink {
  width: 389px;
}

div#articles div.column,
#books div.column,
#eAcademyCourse div.column,
#eAcademyWorkshop div.column,
#podcasts div.column,
#videos div.column,
#workshops div.column {
  margin-right: 15px;
}

div#articles div.row,
#books div.row,
#eAcademyCourse div.row,
#eAcademyWorkshop div.row,
#podcasts div.row,
#videos div.row,
#workshops div.row {
  margin: 10px 0;
}

div#articles div.row div.column,
#books div.row div.column,
#eAcademyCourse div.row div.column,
#eAcademyWorkshop div.row div.column,
#podcasts div.row div.column,
#videos div.row div.column,
#workshops div.row div.column {
  margin-right: 35px;
}

.moreinfo {
  width: 30%;
  text-align: left;
  margin-left: 10px;
}

.addForm {
  width: 100%;
  background-color: var(--primaryColor);
  padding: 10px;
  color: #fff;
  font-size: larger;
  border-radius: 4px 4px 0 0;
}

.addNew {
  border: 1px solid var(--primaryColor);
  padding: 10px;
  border-radius: 0 0 4px 4px;
}

#contactFormContent input#searchAssessment {
  width: 100%;
}

#contactFormContent select#DDassessmentID {
  width: 100%;
}

#contactFormContent h3#bookingDateHeading {
  color: var(--primaryColor);
  margin-bottom: 20px;
  margin-top: 20px;
  font-family: inherit;
  letter-spacing: 1px;
  border-top: 2px solid lightgray;
  padding-top: 20px;
}

#contactFormContent label {
  width: 20%;
}

input#durationHour,
input#durationMinute {
  width: 55px;
  height: 40px;
}

.completeFeedback {
  position: fixed;
  top: 35%;
  left: 45%;
  transform: translate(-10px, -20%);
  background-color: #fff;
  border-radius: 6px;
  padding: 40px 35px 16px 35px;
  box-shadow: 0 0 10px;
  z-index: 1000;
}

#viewSupportDetail label,
#viewApplication label,
#auditTrailContent label,
#applicationReportsContent label,
#applicationReports label,
#userReports label {
  display: inline-block;
  width: 250px;
  color: var(--primaryColor);
  font-weight: 700;
  margin-right: 0;
  padding: 2px 10px;
}

#viewSupportDetail div.viewInfo,
#viewApplication div.viewInfo,
#auditTrailContent div.viewInfo,
#applicationReportsContent div.viewInfo,
#applicationReports div.viewInfo,
#userReports div.viewInfo {
  display: inline-block;
  width: 100%;
  padding: 2px 10px;
}

#viewSupportDetail h3,
#viewApplication h3,
#auditTrailContent h3,
#applicationReportsContent h3,
#applicationReports h3,
#userReports h3 {
  color: #215257;
  margin-bottom: 0;
  font-family: inherit;
  letter-spacing: 1px;
  border-bottom: 2px solid lightgrey;
  padding: 5px 10px;
}

#viewSupportDetail .column.third,
#viewApplication .column.third,
#auditTrailContent .column.third,
#applicationReportsContent .column.third,
#applicationReports .column.third,
#userReports .column.third {
  border: 2px solid lightgray;
  border-radius: 6px 6px 0 0;
  margin-right: 10px;
  box-shadow: 0 0 15px lightgrey;
}

#viewSupportDetail .column.third .row,
#viewApplication .column.third .row,
#auditTrailContent .column.third .row,
#applicationReportsContent .column.third .row,
#applicationReports .column.third .row,
#userReports .column.third .row {
  padding: 0;
  margin: 0;
}

#viewSupportDetail .auditTrail,
#viewApplication .auditTrail,
#auditTrailContent .auditTrail,
#applicationReportsContent .auditTrail,
#applicationReports .auditTrail,
#userReports .auditTrail {
  width: 100%;
  border: 2px solid lightgray;
  border-radius: 6px 6px 0 0;
  min-height: 400px;
  box-shadow: 0 0 15px lightgrey;
}

#viewSupportDetail span.historydate,
#viewSupportDetail span.reportdate,
#viewApplication span.historydate,
#viewApplication span.reportdate,
#auditTrailContent span.historydate,
#auditTrailContent span.reportdate,
#applicationReportsContent span.historydate,
#applicationReportsContent span.reportdate,
#applicationReports span.historydate,
#applicationReports span.reportdate,
#userReports span.historydate,
#userReports span.reportdate {
  display: inline-block;
  width: 200px;
  padding-left: 10px;
}

#viewSupportDetail span.historyUpdater,
#viewSupportDetail span.reportUpdater,
#viewSupportDetail span.reporttype,
#viewApplication span.historyUpdater,
#viewApplication span.reportUpdater,
#viewApplication span.reporttype,
#auditTrailContent span.historyUpdater,
#auditTrailContent span.reportUpdater,
#auditTrailContent span.reporttype,
#applicationReportsContent span.historyUpdater,
#applicationReportsContent span.reportUpdater,
#applicationReportsContent span.reporttype,
#applicationReports span.historyUpdater,
#applicationReports span.reportUpdater,
#applicationReports span.reporttype,
#userReports span.historyUpdater,
#userReports span.reportUpdater,
#userReports span.reporttype {
  display: inline-block;
  width: 200px;
}

#viewSupportDetail .changelist,
#viewApplication .changelist,
#auditTrailContent .changelist,
#applicationReportsContent .changelist,
#applicationReports .changelist,
#userReports .changelist {
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid lightgrey;
  background-color: #f1f1f1;
}

#viewSupportDetail span.description,
#viewApplication span.description,
#auditTrailContent span.description,
#applicationReportsContent span.description,
#applicationReports span.description,
#userReports span.description {
  display: inline-block;
  width: 198px;
  padding-left: 20px;
}

#viewSupportDetail span.toggle,
#viewApplication span.toggle,
#auditTrailContent span.toggle,
#applicationReportsContent span.toggle,
#applicationReports span.toggle,
#userReports span.toggle {
  padding-left: 10px;
  font-size: x-large;
  font-weight: 700;
}

#viewSupportDetail .historyRow,
#viewApplication .historyRow,
#auditTrailContent .historyRow,
#applicationReportsContent .historyRow,
#applicationReports .historyRow,
#userReports .historyRow {
  border-bottom: 1px solid grey;
}

#viewSupportDetail .historyRowspan.reportDate,
#viewApplication .historyRowspan.reportDate,
#auditTrailContent .historyRowspan.reportDate,
#applicationReportsContent .historyRowspan.reportDate,
#applicationReports .historyRowspan.reportDate,
#userReports .historyRowspan.reportDate {
  margin-right: 15px;
}

.requestDetail {
  position: relative;
  display: inline-block;
  width: 33%;
  height: 10vh;
}

.rowDetail {
  display: none;
}

.noteDetail {
  text-align: left;
}

.a_notes {
  position: relative;
  border: 1px solid var(--primaryColor);
  white-space: normal;
  overflow: overlay;
  resize: none;
  min-height: 100px;
  max-height: 100px;
  width: 1100px;
  margin: 10px;
}

.e_body {
  position: relative;
  border: 1px solid var(--primaryColor);
  white-space: normal;
  overflow: overlay;
  resize: none;
  min-height: 200px;
  /* max-height: 100px; */
  width: 100%;
  padding: 10px;
  /* margin: 10px 0px; */
}

.h_notes {
  width: auto;
  border: 1px solid var(--primaryColor);
  min-height: 150px;
  padding: 10px;
  margin: 10px;
}

.detail_info {
  display: inline-table;
  margin: 15px;
  width: 33%;
}

.detail_info1 {
  position: relative;
  padding: 10px;
  margin-right: 10px;
}

.contactDirect {
  padding: 20px 30px;
  display: none;
  border: 2px solid var(--primaryColor);
  border-radius: 0;
  min-height: 60vh;
}

.btnMore {
  border: 2px solid gray;
  background-color: rgb(211, 211, 211);
  color: #2c292a;
  font-size: 14px;
  font-weight: 400;
  padding: 3px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px #2c292a;
  transition: 0.3s;
  height: auto;
}

.replyBtn {
  position: absolute;
  width: auto;
  display: flex;
  margin-right: 10px;
}

.listProjects {
  text-align: left;
}

.respondDiv {
  background-color: var(--primaryColor);
  width: 55%;
  height: auto;
  position: relative;
  display: inline-block;
  border: solid;
  margin-right: 10px;
  padding-top: 10px;
}

.actionList {
  width: 100%;
  border: 2px solid lightgray;
  border-radius: 6px 6px 0 0;
  min-height: 100px;
  box-shadow: 0 0 15px lightgrey;
}

.actionChange {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  /* background-color: var(--errorColor); */
  height: 20px;
  width: 635px;
}

#actionListButton {
  margin-left: 20px;
}

.candSearch {
  border: 2px solid lightgray;
  position: relative;
  display: flex;
  padding: 0 5px 0 5px;
}

#additionalServicesAdded .row>span {
  padding-right: 20px;
}

#applicationReports .historyRow {
  padding: 5px 10px;
}

#reportBtn {
  color: #fff;
}

.slidecontainer {
  width: 100%;
  position: relative;
}

.sliderAss {
  position: relative;
  -webkit-appearance: none;
  width: 50%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  border-radius: 0;
  border: 0px;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.sliderAss::before {
  background: transparent;
}

.sliderAss:hover {
  opacity: 1;
}

.sliderAss::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #d3d3d3;
  cursor: pointer;
}

.sliderAss::-webkit-slider-thumb.saved {
  background: var(--primaryColor);
}

.sliderAss.saved::-webkit-slider-thumb {
  background: var(--primaryColor);
}

.sliderAss.saved::-moz-range-thumb {
  background: var(--primaryColor);
}

.sliderAss::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #d3d3d3;
  cursor: pointer;
}

.sliderAss::-moz-range-thumb.saved {
  background: green;
}

.never {
  padding-right: 15px;
}

.always {
  padding-left: 15px;
}

.ib_row {
  display: flex;
  flex-flow: row nowrap;
}

.attendLesson_Container {
  margin-top: 20px;
  height: 550px;
}

.attendLesson_video1 {
  height: auto;
  width: 60vw;
  margin: auto;
}

.attendLesson_video1_Container .tabcontent {
  border: 3px solid var(--primaryColor);
}

.attendLesson_sidebar {
  width: 25vw;
  padding: 5px;
  display: inline-block;
  z-index: 5;
}

.course_section {
  border: 1px solid lightgrey;
  position: relative;
  width: 250px;
}

.course_section_heading {
  font-size: larger;
  font-weight: 600;
  color: var(--primaryColor);
  padding: 5px 10px;
}

.course_section_info {
  width: 90%;
  display: inline-block;
}

.course_section_info span {
  color: grey;
  font-size: smaller;
  padding-left: 10px;
}

.course_section_openSection {
  position: absolute;
  font-size: 40px;
  font-weight: 700;
  color: var(--primaryColor);
  top: 5px;
  right: 5px;
}

.course_section_lesson {
  list-style: none;
  border-bottom: 1px solid lightgrey;
}

.course_section_lesson_label {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin-top: auto;
  margin-bottom: auto;
}

.course_section_lesson_labelContainer {
  display: inline-block;
}

.course_section_lesson_name {
  display: inline-block;
  font-weight: 300;
  font-size: normal;
  padding: 5px;
}

div#attendLesson_video1.attendLesson_video1 {
  padding: 0;
}

.attendLesson_video1_Container .tabcontent {
  padding: 0;
}

input.course_section_lessonCheckBox {
  display: none;
}

li.course_section_lesson:last-child {
  border: none;
}

ul.course_section_lessons {
  list-style-type: none;
  padding-inline-start: 0;
  padding-inline-end: 0;
  margin-bottom: 0;
  width: 250px;
}

.lesson_bookmark_container {
  background-color: #fff;
}

.course_section_lessonBookmark_name {
  padding: 5px;
  border-bottom: 1px solid grey;
  color: var(--primaryColor);
}

div.note p {
  display: inline-block;
}

.bookmarkTime {
  color: grey;
  font-size: smaller;
  font-weight: 500;
  font-style: italic;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
}

.displaynote {
  font-size: smaller;
  font-style: italic;
  color: grey;
  overflow-wrap: normal;
  display: inline-block;
}

.fas.fa-play-circle {
  color: var(--primaryColor);
  display: inline-block;
  font-size: 15px;
  padding-left: 3px;
}

.fas.fa-check-square {
  display: none;
  font-size: 15px;
  padding-left: 4px;
}

#the-canvas {
  text-align: center;
}

#tab4,
.tab4 {
  margin-bottom: 4px;
}

.attendLesson_Container {
  margin-top: 0;
}

.tab button {
  float: none;
}

.attendLesson_Container #tab4,
.attendLesson_Container .tab4 {
  margin-bottom: 0;
}

.attendLesson_Container .tab button {
  float: none;
}

.attendLesson_Container .tab {
  overflow: visible;
}

.attendLesson_Container a#videoTab.btn.active,
.attendLesson_Container a.tablinks2.active.btn {
  padding: 4px 10px;
  margin-bottom: -4px;
  display: inline-block;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
  border: 2px solid var(--secondaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 4px 10px;
}

.attendLesson_Container #tab5,
.attendLesson_Container .tab5 {
  height: 75vh;
  border: 3px solid var(--primaryColor);
  width: fit-content;
}

.attendLesson_Container .attendLesson_sidebar {
  width: 262px;
  height: 75vh;
  padding: 5px;
}

.attendLesson_Container a#worksheetTab {
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.attendLesson_Container a#videoTab {
  display: inline-block;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.attendLesson_Container div#tab2 {
  width: 60vw;
  height: 75vh;
}

.attendLesson_Container div#tab2 {
  width: 60vw;
}

.attendLesson_Container .tabcontent {
  min-height: 75vh;
}

.attendLesson_Container #video1 {
  height: 100%;
  width: 55vw;
}

div.cont {
  position: fixed;
  width: 363px;
  height: 455px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  border-radius: 0;
  box-shadow: 0 0 30px;
  padding-top: 140px !important;
}

@media (max-width: 900px) {
  div.cont {
    position: fixed;
  }
}

.discoverLogo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px;
  background: url() left top no-repeat;
}

.integrateLogo {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 160px;
  height: 160px !important;
  background: url(https://www.integratezone.com/img/INTEGRATElogoTRANSPARENT_login.png) left top no-repeat;
}

.capitecLogo {
  z-index: 1501;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px !important;
  background: url(https://integratezone.com/img/capitec.png) left top no-repeat;
  background-size: cover;
}

div.login_form {
  position: fixed;
  padding-left: 10px;
  background: var(--bgLoginImg) bottom right no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  margin-top: -277px;
  margin-left: -180px;
  z-index: 1500;
}

input#l_username,
input#l_password {
  width: 100%;
  padding: 10px;
  height: 36px;
  border: 1px solid black;
  border-radius: 0;
  margin: 0 auto;
}

div.formdetails>div {
  width: 90%;
  margin: 0 auto;
}

div.formdetails>div.forgotPassword {
  padding: 0;
  margin-top: -10px;
}

@media (max-width: 900px) {
  div.formdetails>div.forgotPassword {
    margin-top: 0;
  }
}

div.formdetailsbutton.btn.login {
  max-width: 100%;
  display: block;
  padding: 10px;
  margin: 0;
  width: 96%;
}

div.formdetailsbutton.btn.login:hover {
  background-color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
}

#reportListBody .fa-check {
  position: relative;
  font-size: 14px;
  color: var(--primaryColor);
}

#reportListBody .fa-times {
  position: relative;
  font-size: 14px;
  color: var(--primaryColor);
  border: none;
}

/* Styling For  Assessment Buttons */

/* No Assesments Done And Not Selected */
.assBtnNone.currN {
  border: 4px solid var(--primaryColor);
  background-color: rgb(177, 177, 177);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* No Assesments Done And Selected */
.assBtnNone.currY {
  border: 4px solid var(--secondaryColor);
  background-color: grey;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* One + Assesments Done And Not Selected */
.assBtnPartial.currN {
  border: 4px solid var(--primaryColor);
  background-color: var(--secondaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* One + Assesments Done And Selected */
.assBtnPartial.currY {
  border: 4px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* All Assesments Done And Not Selected */
.assBtnDone.currN {
  border: 4px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* All Assesments Done And Selected */
.assBtnDone.currY {
  border: 4px solid var(--secondaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* End Of Styling Assessment Buttons */

/* This is a test edit */

/* Headings for assign assessment blocks */

.nominateDescription {
  font-size: 20px;
  padding-bottom: 30px;
  color: var(--primaryColor);
}

.nominateeDiscription {
  font-size: 20px;
  padding-bottom: 30px;
  color: var(--primaryColor);
}

/* User status showing if they have other roles. Located in Applications at the top of page nect to button */

.otherProfiles {
  padding-bottom: 20px;
}

.otherRoles {
  position: relative;
  font-size: 21px;
  letter-spacing: 0.2px;
  color: var(--primaryColor);
  /* font-weight: bold; */
}

.noOtherRoles {
  position: relative;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  color: var(--primaryColor);
  letter-spacing: 0.2px;
  font-weight: bold;

}

.idkWhatThisIs {
  position: relative;
  font-size: 21px;
}

.cancelApplication {
  position: relative;
  border: 2px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  margin: 10px 5px;
  margin-left: 250px;
  top: -55px;
  max-width: 200px;
  text-align: center;
  text-transform: capitalize;
  box-shadow: 0 0 10px grey;
  transition: 0.3s;
  height: auto;
}

/* buildIDP.html Page */
.flex_column.devPlan_inputs {
  width: 400px;
  margin-left: 100px;
}

.flex_column.devPlan_options {
  width: 400px;
  margin-left: 230px;
}

.template_info {
  background-color: yellow;
}

.templateDescription {
  position: relative;
  white-space: nowrap;
  top: 50px;
}

.templateDescription_textArea {
  margin-top: 60px;
  width: 280px;
  height: 140px;
  resize: none;
}

.options {
  margin-top: 60px;
}

.devPlanBtn {
  position: relative;
  margin: auto;
}

.two {
  margin-bottom: 10px;
}

/* End of buildIDP.html */

/* buildIDPAdd.html */

.IDP_Add_Column1 {
  flex-direction: column;
  position: relative;
  width: 50%;
}

.IDP_Add_Column2 {
  flex-direction: column;
  position: relative;
  width: 50%;
}

.build_IDP_Add_labels {
  display: inline-block;
  text-align: left;
  margin-top: 20px;
}

.build_IDP_Add_btn {
  position: relative;
  left: 550px;
  margin-top: 20px;
}

/* End of buildIDPAdd.html */

/* editIDP.html */

.templateIDPName_textInput {
  text-align: center;
}

.flex_column label {
  font-weight: bold;
  font-size: medium;
  letter-spacing: 1px;
  margin-left: 10px;
}

.devPlan_inputs input {
  position: relative;
  width: 275px;
  margin-left: 0px;
  margin-top: 0px;
  text-align: center;
  border: 0.2px solid grey;
  border-radius: 4%;
}

.templateIDPName_textInput {
  position: relative;
  width: 275px;
  margin-left: 60px;
  margin-top: 10px;
  text-align: center;
  border: 0.2px solid grey;
  border-radius: 4%;
}

.select_client_borderBox {
  position: relative;
  width: 150px;
  margin-left: 115px;
  margin-top: 10px;
  text-align: center;
  border: 0.2px solid rgb(141, 141, 141);
  border-radius: 4%;
}

.clientIDP_label {
  position: absolute;
  left: 100px;
}

.clientIDP {
  position: absolute;
  left: 130px;
  font-size: medium;
  font-weight: 700;
}

.templateIDPName_label {
  position: absolute;
  left: 110px;
}

.templateIDPName_textInputEdit {
  position: absolute;
  left: 220px;
  font-size: medium;
  font-weight: 700;
}

/* editAssessment.html */

div .individualDevelopmentPlan_select {
  margin-top: 0px;
  margin-bottom: 20px;
  width: 355px;
}

.individualDevelopmentPlan_label_1,
.individualDevelopmentPlan_label_2 {
  font-size: medium;
  font-weight: 550;
}

.individualDevelopmentPlan_span1 {
  position: relative;
  left: -380px;
  white-space: nowrap;
}

.individualDevelopmentPlan_span2 {
  position: relative;
  left: -750px;
  white-space: nowrap;
}

.individualDevelopmentPlan_label_1 {
  position: relative;
  left: 0px;
  margin-right: 5px;
}

.individualDevelopmentPlan_label_2 {
  position: relative;
  left: -350px;
  white-space: nowrap;
}

.individualDevelopmentPlan_h2 {
  color: var(--primaryColor);
  padding-bottom: 10px;
}

.individualDevelopmentPlan_container {
  border: solid 2px var(--primaryColor);
  padding: 10px;
}

/* Tim Asked For This */

.invalid {
  border: 0.5px var(--errorColor) solid;
}

.invld {
  outline: none !important;
  border: 0.5px var(--errorColor) solid !important;
}

/* editUser.html */

#assessmentSelect {
  margin-top: 10px;
  margin-bottom: 30px;
  margin-left: 5px;
  width: 340px;
}

.label_results {
  font-size: medium;
  color: #000000;
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  margin-top: 20px;
}

.paddingLeftSmall {
  padding-left: 5px;
}

.grey_btn {
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  border: black solid 1px;
}

.report_comments_textarea {
  position: relative;
  margin-top: -20px;
  margin-left: 5px;
  padding: 0px;
}

/* 
.manageUsers_developmentPlan_border {
  border: 2px solid var(--primaryColor);
  padding: 20px;
  min-height: 400px;
  max-width: 90%;
} */

.assetDiv {
  margin: 10px 10px 20px 0px;
}

.removeBtnIDP {
  max-height: 19px;
  margin: 2px 15px 0px 0px;
}

.removeBtnIDP:hover {
  cursor: pointer;
}

.projectsSelect_row {
  margin: 40px 750px 40px 10px;
}

.button_projects {
  margin: 0px 0px 20px 80px;
}

/* editUserIDPView.html */

.editUserIDPView_heading {
  color: var(--primaryColor);
  margin: 10px 0px 30px 0px;
}

/* viewSupportDetail  */

.ul_noDecoration {
  list-style: none;
}

#currFolderList {
  margin-left: 10px;
  font-weight: 700;
}

#folderSelect {
  width: 500px;
}

#newFolderName {
  width: 500px;
  margin-top: 10px;
}

.half textarea {
  width: 500px;
  margin-top: 20px;
  resize: none;
}

/* myDevelopment.html */

/* Heading */
.developmentGuide_h1 {
  font-size: 40px;
  text-align: center;
  margin: 30px 0px 80px 0px;
  letter-spacing: 7px;
}

/* Row One */
.developmentGuide_rowOne {
  margin-bottom: 30px;
}

.developmentGuide_paragraphOne {
  position: relative;
  top: 30px;
  margin-bottom: 100px;
  font-size: 25px;
  margin-top: 15px;
  word-spacing: 5px;
  background-color: var(--primaryColor);
  padding: 10px 15px 10px 15px;
  color: white;
}

/* Controls the distance between each line the paragraph */
div .developmentGuide_paragraphOne {
  line-height: 40px;
}

.developmentGuide_imgContainerOne {
  content: url(/img/integrate/CI/Page-1-Image-2.jpg);
  width: auto;
  margin: 20px 20px 15px 50px;
  height: 220px;
}

/* Row Two */

.developmentGuide_rowTwo {
  margin: 0px 0px 30px 50px;
}

.developmentGuide_imgContainerTwo {
  content: url(/img/integrate/CI/Page-1-Image-3.jpg);
  width: auto;
  margin: 40px 0px 15px 20px;
  height: 300px;
}

.developmentGuide_paragraphTwo {
  position: relative;
  top: 40px;
  font-size: 25px;
  margin-top: 15px;
  margin-bottom: 100px;
  word-spacing: 5px;
  background-color: #618da7;
  padding: 10px 15px 10px 15px;
  color: white;
}

/* Controls the distance between each line the paragraph */
div .developmentGuide_paragraphTwo {
  line-height: 40px;
}

/* Row Three */
.developmentGuide_rowThree {
  margin-bottom: 30px;
}

.developmentGuide_paragraphThree {
  position: relative;
  width: 900px;
  left: -100px;
  font-size: 25px;
  margin-top: 15px;
  word-spacing: 5px;
  background-color: var(--primaryColor);
  padding: 10px 0px 10px 15px;
  color: white;
}

/* Controls the distance between each line the paragraph */
div .developmentGuide_paragraphThree {
  line-height: 40px;
}

.developmentGuide_imgContainerThree {
  position: relative;
  top: 50px;
  content: url(/img/integrate/CI/Page-1-Image-4.jpg);
  width: auto;
  margin: 20px 20px 15px 0px;
  height: 215px;
}

/* Card Body Styling  */

.developmentGuide_cardBody {
  margin-bottom: 100px;
}

/* Row Four */
.developmentGuide_rowFour {
  margin-bottom: 30px;
}

.developmentGuide_paragraphFour {
  position: relative;
  font-size: 25px;
  margin-top: 15px;
  word-spacing: 5px;
  background-color: #618da7;
  padding: 10px 15px 10px 15px;
  color: white;
}

/* Controls the distance between each line the paragraph */
div .developmentGuide_paragraphFour {
  line-height: 40px;
}

.developmentGuide_imgContainerFour {
  position: relative;
  left: -80px;
  content: url(/img/integrate/CI/Page-1-Image-5.jpg);
  width: auto;
  margin: 55px 20px 15px 50px;
  height: 120px;
}

/* Row Five */
.developmentGuide_rowFive {
  margin-bottom: 30px;
  padding: 0px;
  color: white;
}

.developmentGuide_paragraphFive {
  position: relative;
  width: 900px;
  left: -100px;
  font-size: 25px;
  margin-top: 15px;
  word-spacing: 5px;
  background-color: var(--primaryColor);
  padding: 10px 0px 10px 15px;
  color: white;
}

.developmentGuide_imgContainerFive {
  position: relative;
  top: 50px;
  content: url(/img/integrate/CI/Page-1-Image-6.jpg);
  margin: 20px 0px 15px 50px;
  height: 350px;
}

.developmentGuide_columnOne {
  position: relative;
  top: 25px;
  width: 35%;
  background-color: var(--primaryColor);
  margin: 10px;
  height: 380px;
}

.developmentGuide_columnOne ul {
  line-height: 50px;
  font-size: 25px;
  margin-left: 40px;
}

.developmentGuide_columnTwo {
  width: 35%;
  background-color: var(--primaryColor);
  margin: 10px;
}

.developmentGuide_columnTwo ul {
  line-height: 50px;
  font-size: 25px;
  margin-left: 40px;
}

/* Row Six */
.developmentGuide_rowSix {
  margin-bottom: 30px;
}

.developmentGuide_paragraphSix {
  position: relative;
  font-size: 25px;
  margin-top: 15px;
  word-spacing: 5px;
  background-color: #618da7;
  padding: 10px 15px 10px 15px;
  color: white;
}

.developmentGuide_cardBody {
  float: left;
  margin-right: 200px;
}

div .developmentGuide_paragraphSix {
  line-height: 40px;
}

/* No_devplan.html    */
.noData_heading {
  position: sticky;
  top: 0;
  text-align: center;
  font-size: 30px;
  color: #000;
  margin-top: 50px;
}

/* addClient.html */

.leftColumn_addClient {
  width: 50%;
}

.rightColumn_addClient {
  width: 50%;
}

.textareaDescription_addClient {
  resize: none;
}

.addClient_clientName {
  margin-bottom: 20px;
  width: 300px;
}

.textareaDescription_addClient {
  margin-bottom: 20px;
  width: 300px;
  height: 200px;
}

div .select_addClient {
  margin-bottom: 20px;
  width: 300px;
}

.switch_addClient {
  margin-bottom: 30px;
}

.button_addClient {
  margin: auto;
}

/* editClient.html */

.editClient_heading {
  position: relative;
  width: 100%;
  margin: auto;
  text-align: center;
  font-size: 40px;
  color: var(--primaryColor);
}

.leftColumn_addClient {
  margin-left: 150px;
  margin-top: 50px;
}

.rightColumn_addClient {
  margin-left: 300px;
  margin-top: 50px;
}

/* .editClient_border {
  border: solid 2px var(--primaryColor);
  padding: 20px;
} */

.editClient_client {
  color: black;
}

/* Vitality  */

.vitality_logo_header {
  position: relative;
  top: 100px;
  left: 75%;
}

/* Capitec  */

.capitec_logo_header {
  position: relative;
  top: 175px;
  left: 68%;
  height: auto;
  width: 300px;
}

/* editReports.hmtl */

.editReports_rightColumn {
  width: 50%;
  padding-left: 180px;
}

.editReports_leftColumn {
  width: 50%;
  padding-left: 150px;
}

.editReports_heading {
  color: var(--primaryColor);
  margin: 10px 0px 30px 0px;
  text-align: center;
}

.noWrap_editReports {
  white-space: nowrap;
  margin-top: 10px;
}

.editReports_label {
  margin-top: 40px;
}

.textareaDescription_editReports {
  height: 120px;
  width: 300px;
  resize: none;
}

.button_editReports {
  margin-top: 20px;
  margin: auto;
}

div .select_editReports {
  width: 300px;
}

.editReports_toggle {
  margin: 35px 0px 29px 0px;
}

.editReports_select {
  margin-top: 20px;
}

/* addTeam.html */

.addTeam_heading {
  font-size: 30px;
  text-align: center;
  color: var(--primaryColor);
  width: 100%;
  margin: auto;
  white-space: nowrap;
}

.addTeam_bothColumns {
  width: 100%;
  margin: 40px;
}

.rightColumn_addTeam {
  width: 50%;
  margin-left: 0px;
}

.leftColumn_addTeam {
  width: 50%;
  margin-left: 200px;
}

.addTeam_clientName {
  margin-bottom: 35px;
}

.textareaDescription_addTeam {
  height: 150px;
  width: 300px;
  resize: none;
}

.addTeam_teamName {
  width: 300px;
}

/* editTeam.html */

.editTeam_heading {
  font-size: 30px;
  text-align: center;
  color: var(--primaryColor);
  width: 100%;
  margin: auto;
  white-space: nowrap;
}

.textareaDescription_editTeam {
  height: 100px;
  width: 300px;
  resize: none;
}

.select_editTeam {
  margin-bottom: 35px;
}

.editTeam_clientName {
  width: 300px;
}

/* messageTemplates.html */

.intructionsContainer_imageForEmailTemplates {
  display: none;
}

.intructionsContainer_attachmentForEmailTemplates {
  display: none;
}

/* emailTemplates.html */

.showGetEmailTemplateBtn {
  margin: 25px 0px 0px -20px;
  padding: 5px;
}

.assessmentEmail {
  margin: 0px 0px 0px 0px;
}

.eventTypeEmail {
  margin: 0px 20px 0px 0px;
}

.eventEmail {
  margin: 0px 0px 0px 30px;
}

.emailTemplates_clientName {
  font-size: 40px;
  font-style: bold;
  margin: 0px 0px 40px 0px;
  display: none;
}

.emailTemplates_border {
  border: solid 2px var(--primaryColor);
  margin: 0px;
  padding: 20px;
}

.emailTemplates_label {
  font-size: 25px;
  font-weight: 700;
  margin-left: 0px;
}

.messageType_h5 {
  margin: 0px 0px 30px 0px;
  font-size: 25px;
}

/* emailTemplatesAttachments.html */

.emailTemplateAttachments_imagesFileLabel {
  position: relative;
  left: -4px;
}

.emailTemplateAttachments_attachmentsLabel {
  position: relative;
  left: -4px;
}

.ATTACHMENTS_select {
  position: relative;
  height: 30px;
  top: -10px;
}

.ATTACHMENTS_btn {
  position: relative;
  width: 100%;
  margin: 0px;
  max-width: 250px;
  padding: 2px;
}

.imagefilesDD_select {
  position: relative;
  height: 30px;
  top: -10px;
}

.imagefilesDD_btn {
  position: relative;
  width: 100%;
  margin: 0px;
  max-width: 250px;
  padding: 2px;
}

.imageList_label {
  white-space: nowrap;
}

.attachmentList_label {
  white-space: nowrap;
}

.marginToTheLeft {
  margin-left: 10px;
}

.emailTANumber {
  padding: 2px;
  margin: 2px;
  width: 2px;
}

/* uploadEmailImage.html */

.instructionsContainer {
  width: 40%;
  padding: 10px;
}

.imagePrevieewContainer {
  width: 60%;
  padding: 10px;
}

.uploadEmailImage_imageContainer {
  border: 2px solid var(--primaryColor);
  padding: 20px;
  max-height: 100%;
}

.uploadEmailImage_imageContainer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.uploadEmailImage_imageDetails {
  margin-top: 20px;
}

.uploadEmailImage_imageHeading {
  font-size: 30px;
  margin-bottom: 10px;
  width: 100%;
  text-align: left;
}

.uploadEmailImage_errorTags {
  margin-top: 40px;
  font-size: 30px;
}

.btnNoMargin {
  position: relative;
  top: -30px impor !important;
  left: -5px !important;
  margin: 0px;
}

.imageAndSizeRow {
  justify-content: space-between;
}

.imageEmailName {
  margin-top: 17px;
}

.imageEmailSize {
  margin-top: 17px;
}

.instructionsImageContainer {
  padding: 20px 20px 0px 0px;
  max-height: 100%;
  justify-content: space-between;
}



.errorTypeeEmailImage {
  color: var(--errorColor);
}

/* uploadEmailAttachment.html  */

.uploadEmailAttachment_fileName {
  margin: 65px 20px 20px 20px;
}

.uploadEmailAttachment_fileName label {
  font-size: 20px;
}

.uploadEmailAttachment_fileSize {
  margin: 45px 20px 65px 20px;
}

.uploadEmailAttachment_fileSize {
  font-size: 20px;
}

.attachmentUploadForEmailTemplates {
  margin-left: 20px;
}

.attachmentUploadForEmailTemplatesTwo {
  margin-left: 20px;
}

/* addUser.html */

.addUser_bulkUploadBorder {
  border: 2px solid var(--primaryColor);
  padding: 20px 200px 20px 200px;
  max-height: 100%;
  margin-top: 50px;
}

.addUser_bulkUploadHeading {
  text-align: center;
  color: var(--primaryColor);
}

.bulkUploadAssessAndCheckbox_row {
  margin: 40px 0px 0px 0px;
  justify-content: space-between;
}

div .select_addBulkUploadAssessments {
  width: 300px;
  margin: 0px 0px 0px 140px;
}

.allAss_switch {
  margin: 8px 0px 0px -140px;
}

.allAss_switchLabel {
  margin: 8px 0px 0px 0px;
}

.uploadBulk_noEmailTemplate {
  font-size: 20px;
  text-align: center;
  display: none;
}

.buttonUploadFileAndSubmitFile_row {
  margin: 40px 0px 0px 0px;
  justify-content: space-between;
}

.fileBtn {
  background-color: white;
  color: var(--primaryColor);
}

.bulkUploadHeadingRaterRatee {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 25px;
  font-size: 25px;
  color: var(--primaryColor);
}

.bulkUploadRaterColumn {
  width: 50%;
}

.bulkUploadRaterColumn ul {
  font-size: 18px;
  margin: 0px 0px 0px 20px;
  padding: 0px;
  width: 300px;
}

.bulkUploadRateeColumn {
  width: 50%;
}

.bulkUploadRateeColumn ul {
  font-size: 18px;
  margin: 0px 0px 0px 120px;
  padding: 0px;
  width: 300px;
}

.borderForRater {
  border: 2px solid var(--primaryColor);
  padding: 5px 5px 0px 25px;
}

.borderForRatee {
  border: 2px solid var(--primaryColor);
  padding: 5px 5px 0px 25px;
  height: 138px;
}

.bulkUploadGuidelines {
  margin: 30px 0px 30px 0px;
  text-align: center;
  font-size: 20px;
}

.bulkUploadExample {
  position: relative;
  width: 800px;
  margin: auto;
  left: 50px;
}

.scButt {
  border-style: none;
  background-color: var(--primaryColor);
  color: white;
  height: 32px;
  padding: 1% 3%;
}

/* DiscoveryLandingPage2 */

.discoveryLandingPage2 {
  width: 100%;
  height: auto;
}

/* MPt_myCV.html */

.myCV {
  margin: 20px 20px;
}

.myCV_labelAndBtn {
  margin-bottom: 20px;
}

.myCV_label {
  margin-left: 0px;
  white-space: nowrap;
}

.myCV_tipsContainer {
  position: relative;
  top: -80px;
}

div .myCV_linkedInLink {
  width: 397px;
  height: 40px;
  margin: 10px 0px 0px 9px;
}

div .linkedInLabel {
  font-size: 20px;
  color: black !important;
}

.myCV_topRow {
  justify-content: space-between;
}

.myCV_widerBtn {
  width: 400px !important;
  margin-top: 5px;
  margin-left: 0px;
}

.myCV_TipHeading {
  margin-left: 0px;
}

div .myCV_UploadTips {
  width: 550px;
  border: 2px solid var(--primaryColor);
  padding: 10px;
}

.commentsContainer {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.myCV_commentsLabel {
  position: relative;
}

.myCV_textArea {
  width: 550px;
  height: 100px;
  resize: none;
  margin-bottom: 20px;
}

.myCV_SecondRow {
  justify-content: space-between;
  margin-top: 30px;
}

.myCV_btnRow {
  margin: 10px 6px;
  justify-content: space-between;
}

.myCV_spaceLeft {
  margin-left: 10px;
}

.myCV_Help {
  font-size: 12px;
  font-weight: bold;
  margin-left: 5px;
}

.myCV_Help:hover {
  text-decoration: underline;

  cursor: pointer;
}

.myCV_UploadBtn {
  margin-left: 0px;
}

/* editUserIDPAdd.html */

.editUserIDPAdd_select {
  margin-left: 10px;
}

.editUserIDPAdd_searchContainer {
  height: 40px;
  position: absolute;
  top: 31px;
}

div .editUserIDPAdd_searchBox {
  height: 38px;
  border-radius: 20%;
}

/* MCt_headers.html */

div .textareaDescription_addClient {
  width: 399px !important;
  height: 40px !important;
}

div .select_addClient {
  width: 399px !important;
}

.btnTopMargin5px {
  margin-top: 5px;
}

/* mobilePrefix.html */

.mobilePrefix_inputs {
  width: 20px;
}

.mobilePrefix_heading {
  margin-left: 10px;
  color: var(--primaryColor);
}

.plusForMobilePrefix_input {
  position: absolute;
  top: 137px;
  left: 698px;
  font-size: 20px;
}

.mobilePrefixInput_Columns {
  margin-left: 50px;
}

.mobilePrefix_label {
  margin-bottom: 10px;
  white-space: nowrap;
}

.mobilePrefix_btn {
  position: absolute;
  left: 1220px;
  top: 117px;
  width: 150px;
  padding: 3px 10px !important;
}

/* ---------- Steph CSS ------------ */
/* ------------------------------------------ */

.newStyling input,
.newStyling select,
.newStyling textarea {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  height: 40px;
  width: 250px;
  margin: 0;
  border: solid;
  border-width: 2px;
  border-radius: 3px;
  border-color: #dedede;
  outline: none;
}

.newStyling textarea {
  height: auto;
  display: inline-block;
}

.newStyling input {
  height: auto;
  display: inline-block;
}

.newStyling select {
  max-height: 35px;
  padding: 0 2%;
}

.newStyling input:focus,
.newStyling select:focus,
.newStyling textarea:focus {
  border: solid;
  border-width: 2px;
  border-radius: 3px;
  border-color: var(--primaryColor);
  outline: none;
}

.newStyling ::placeholder {
  font-family: Open Sans, Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #dedede;
}

.newStyling label {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
  letter-spacing: 0.5px;
  font-weight: normal;
  line-height: 12px !important;
}

.tgglLabel {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  width: 100%;
}

.radio {
  width: auto !important;
}

.newStyling input[type="checkbox"] {
  width: auto !important;
}

.newStyling .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: left;
}

.newStyling .rowbtn {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.whiteBox {
  background: #f8f8f8;
  box-shadow: 0px 2px 6px #00000041;
  border-radius: 10px;
  opacity: 1;
  padding: 3%;
  margin-top: 30px;
  max-width: 700px;
  min-width: 660px;
}

.whiteBox1 {
  background: #f8f8f8;
  box-shadow: 0px 2px 6px #00000041;
  border-radius: 10px;
  opacity: 1;
  padding: 3%;
  margin-top: 30px;
}

.lightGreenBox {
  background-color: var(--subBox);
  border-radius: 10px;
  padding: 5%;
}

.grid-container-2col {
  display: grid;
  grid-template-columns: 40% 40%;
  grid-gap: 20px 20px;
}

.grid-container-3col {
  display: grid;
  grid-template-columns: 25% 40% 10%;
  grid-gap: 35px 40px;
  box-sizing: content-box;
}

.grid-container-3col-even {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 20px 20px;
  box-sizing: content-box;
}

.grid-container-3col-even>select {
  max-width: 250px !important;
}

.newbtn {
  border: none;
  border-radius: 5px;
  background-color: var(--primaryColor);
  cursor: pointer;
  color: white;
  padding: 10px 20px;
}

.newbtn:hover {
  color: white;
  background-color: var(--secondaryColor);
}

.newbtnRed {
  border: none;
  border-radius: 5px;
  background-color: var(--errorColor);
  cursor: pointer;
  color: white;
  padding: 10px 20px;
}

.newbtnRed:hover {
  background-color: var(--errorHoverColor);
}

/* Upload button  - 2 part*/
.uploadbtn {
  border: none;
  border-radius: 5px;
  background-color: #dedede;
  cursor: pointer;
  font-size: 12px !important;
  color: var(--primaryColor) !important;
  margin: 5px 5px;
  padding: 10px 0px 10px 20px;
  height: 40px;
}

.uploadbtn:hover {
  background-color: #cacaca;
}

.uploadAdd {
  background-color: var(--primaryColor);
  font-size: 25px;
  color: white;
  margin-left: 10px;
  border-radius: 0px 5px 5px 0px;
  padding: 3px 7px 0px 7px;
  margin-top: 5px;
  vertical-align: middle;
  height: 40px;
}

.paddingTop {
  margin-top: 20px;
}

.marginTopBot {
  margin-top: 10px;
  margin-bottom: 10px;
}

/*------------------ Checkboxes styling --------------------- */

/* The container */
.newStyling .container1 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: 250px;
  line-height: 14px !important;
}

/* Hide the browser's default checkbox */
.newStyling .container1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.newStyling .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgb(255, 255, 255);
  border: solid;
  border-width: 2px;
  border-color: #dadada;
}

/* On mouse-over, add a grey background color */
.newStyling .container1:hover input~.checkmark {
  background-color: #dadada;
}

/* When the checkbox is checked, add a blue background */
.newStyling .container1 input:checked~.checkmark {
  background-color: var(--primaryColor);
  border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.newStyling .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.newStyling .container1 input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.newStyling .container1 .checkmark:after {
  top: 5px;
  left: 9px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* -------------Responsive ---------------- */

@media (max-width: 1620px) {
  .grid-container-3col-even {
    display: grid;
    grid-template-columns: 50% 50%;
  }
}

@media (max-width: 1230px) {
  .grid-container-3col-even {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 15px 10px;
  }
}

/* Manage Users > Allocate Assessment Styling */
/* ------------------------------------------ */

.AAsection1 {
  display: flex;
}

.AAsection1 div {
  padding-right: 2%;
}

.minMax label {
  font-size: 13px !important;
  width: 40%;
}

.minMax input {
  margin-right: 5px;
}

/* Notification popup */
/* ------------------------------------------ */
.notify {
  position: fixed;
  top: 10px;
  z-index: 102;
}

.notification {
  position: relative;
  background: white;
  margin-top: 10px;
  box-shadow: 0px 3px 6px #00000029;
  padding: 3%;
  left: -400px;
  min-width: 250px;
  max-width: 400px;
  min-height: 35px;
  border-right: solid;
  border-width: 5px;
  border-color: var(--primaryColor);
  font-size: 14px;
  opacity: 80%;
  display: grid;
  grid-template-columns: 15% 79% 6%;

  /* Animation – Slide in*/
  -webkit-animation: notification 0.5s forwards;
  -webkit-animation-delay: 1s;
  animation: notification 0.5s forwards;
  animation-delay: 1s;
}

@-webkit-keyframes notification {
  100% {
    left: 20px;
  }
}

@keyframes notification {
  100% {
    left: 20px;
  }
}

/* Error popup */
/* ------------------------------------------ */
.popupBox {
  position: fixed;
  top: 30%;
  left: 40%;
  z-index: 99;
}

.popupMsg {
  position: relative;
  background: white;
  box-shadow: 0px 3px 6px #00000029;
  padding: 10%;
  width: 300px;
  min-height: 200px;
  border-top: solid;
  border-width: 8px;
  border-color: #db0916;
  font-size: 14px;
  text-align: center;
  z-index: 100;
}

.msgHeading {
  font-size: 18px;
  font-weight: bold;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.61);
  z-index: 1;
}

/* Manage Users > User Groups */
/* ------------------------------------------ */

.headerUnderlineTabs {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: left;
}

.headingTab {
  color: #9d9d9d;
  width: auto;
  margin-left: 20px;
}

.headingTab-active {
  border-bottom: solid;
  border-width: 2px;
  border-color: var(--primaryColor);
  padding-bottom: 5px;
  color: #000000;
}