/* Custom elements */
:root {
  /* Colours */
  --primaryColor: #1d9f86;
  --secondaryColor: #b6bb33;
  --thirdColor: #215257;
  --fourthColour: #739092;
  --lightGrey: #e8e8e8;
  --mediumGrey: #cccccc;
  --darkGrey: #a3a3a3;
  --errorColor: #db0916;
  --errorHoverColor: #b91313;
  --fontColor: #292929;
  --box: #f5f5f5;
  --subBox: #d9ebe7;
  --trHover: #e8e9c8;
  --shadow: 0px 2px 6px #00000041;

  /* Fonts */

  /* Images */
  --bgLoginImg: url(/img/webImages/INTEGRATEhomepage1920x1080.png) bottom right
    no-repeat;
  --headerBannerImg: url(/img/general/INTEGRATEbottombanner1920x100.png);
}

/* ----------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.hide {
  display: none !important;
}

h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  margin-bottom: 20px;
}

h2 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: var(--fontColor);
  margin-bottom: 30px;
  letter-spacing: 0.2px;
  margin-bottom: 20px;
}

h3 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: var(--primaryColor);
  margin-bottom: 30px;
  letter-spacing: 0.2px;
  margin-bottom: 20px;
}

h4 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--fontColor);
  margin-bottom: 13px;
  letter-spacing: 0.2px;
}

h5 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--primaryColor);
  margin-bottom: 13px;
  letter-spacing: 0.2px;
  line-height: 20px;
}

p {
  font-size: 14px;
  color: var(--fontColor);
  letter-spacing: 0.3px;
  line-height: 23px;
}

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

li {
  font-size: 14px;
  color: var(--fontColor);
  line-height: 14px;
  letter-spacing: 0.3px;
}

a:hover {
  cursor: pointer;
}

/* -------------- User Input/Forms -------------- */

input,
select,
textarea {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  height: 40px;
  /* min-height: 35px; */
  width: 250px;
  margin: 0;
  border: solid;
  border-width: 2px !important;
  border-radius: 3px !important;
  border-color: #dedede !important;
  outline: none;
  white-space: pre-wrap;
  background-color: #fff;
  color: #000000;
}

textarea {
  height: auto;
  display: inline-block;
  resize: none;
  white-space: pre-wrap;
}

input {
  height: auto;
  display: inline-block;
}

select {
  max-height: 35px;
  padding: 0 20px 0 8px;
}

input:focus,
select:focus,
textarea:focus {
  border: 2px solid var(--primaryColor) !important;
  border-radius: 3px;
  outline: none;
}

.inputError {
  border: 2px solid var(--errorColor);
}

input:invalid {
  border-color: var(--errorColor) !important;
}

.validationError {
  border: 2px solid var(--errorColor) !important;
}

select[multiple] {
  max-height: 100px;
  height: 100px;
  margin-top: 5px;
}

.editInput {
  height: 54px;
  width: 320px;
  overflow: scroll;
  vertical-align: middle;
  padding: 5px 7px;
  margin: 10px 15px 10px 0px;
}

::placeholder {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #dedede;
}

label {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--fontColor) !important;
  letter-spacing: 0.5px;
  font-weight: normal;
  line-height: 12px;
}

.tgglLabel {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  width: 100%;
  vertical-align: middle;
  line-height: 18px !important;
}

.radio {
  width: auto !important;
}

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

input[type="radio"] {
  width: auto !important;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  cursor: pointer;
  height: 18px;
  width: 18px;
  content: url(/img/general/Icons/clearSearch.svg);
}

.newEntry {
  border-color: var(--secondaryColor) !important;
  margin-top: 10px;
}

/* ---------- */

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

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

label.checkContainer {
  line-height: 17px;
  font-size: 14px;
  width: auto;
}

/* Create a custom checkbox */
.tick {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid var(--primaryColor);
}

/* On mouse-over, add a grey background color */
.checkContainer:hover input ~ .tick {
  background-color: #e6e6e6;
}

/* When the checkbox is checked, add a blue background */
.checkContainer input:checked ~ .tick {
  background-color: var(--primaryColor);
}

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

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

/* Style the tick/indicator */
.checkContainer .tick:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ------ */

.btn {
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: var(--primaryColor);
  cursor: pointer;
  color: white;
  padding: 10px 20px;
  box-shadow: none;
}

.btn:hover {
  color: white;
  background-color: var(--secondaryColor);
  box-shadow: none;
  border: none;
  outline: none;
}

.btn:active {
  color: white;
  background-color: var(--secondaryColor);
  box-shadow: none;
  border: none;
}

.btn:disabled {
  background-color: #d1d2d4;
  cursor: none;
}

.btnCancel {
  position: relative;
  border: solid 2px var(--primaryColor);
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  color: var(--primaryColor);
  padding: 10px 20px;
  box-shadow: none;
  justify-content: center;
  align-items: center;
  margin: 0 1rem 1rem 1rem;
}

.btnCancel:hover {
  cursor: pointer;
  background-color: #d4d4d4;
  outline: none;
}

.btnText {
  transition: all 0.2s;
}

/* change btn text visibility */
.invisible {
  visibility: hidden;
  opacity: 0;
}

/* btn onclick loading animation  */
.btnLoading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btnLoading-spinner 1s ease infinite;
}

@keyframes btnLoading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

.btnCancel {
  position: relative;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  box-shadow: none;
  color: var(--primaryColor);
  fill: var(--primaryColor);
  background-color: transparent;
  border: solid 2px var(--primaryColor);
  cursor: pointer;
  text-transform: none;
  min-width: 120px;
  justify-content: center;
  align-items: center;
  margin: 0 1rem 1rem 1rem;
}

.btnCancel:hover {
  cursor: pointer;
  background-color: #cfcfcf;
  outline: none;
}

.subBtn {
  border: none;
  border-radius: 5px;
  background-color: var(--secondaryColor);
  cursor: pointer;
  color: white;
  padding: 10px 20px;
  box-shadow: none;
  text-align: center;
  width: auto;
}

.subBtn:hover {
  color: white;
  background-color: var(--secondaryColor);
  box-shadow: none;
  border: none;
}

.endBtn {
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: var(--primaryColor);
  cursor: pointer;
  min-width: 150px;
  color: white;
  padding: 10px 20px;
  box-shadow: none;
  height: 40px;
  margin: 5px 5px;
}

.endBtn:hover {
  color: white;
  background-color: var(--secondaryColor);
}

.endBtnSecondary {
  position: relative;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  min-width: 150px;
  color: var(--primaryColor);
  padding: 10px 20px;
  box-shadow: none;
  height: 40px;
  margin: 5px 5px;
  border: solid 2px var(--primaryColor);
}

.endBtnSecondary:hover {
  color: white;
  background-color: var(--secondaryColor);
  border-color: var(--secondaryColor);
}

.endbtn {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

/* 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;
  width: fit-content;
}

.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;
  align-items: center;
  height: 40px;
}

.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);
}

.errBtn {
  border: none;
  border-radius: 5px;
  background-color: var(--errorColor);
  cursor: pointer;
  color: white;
  padding: 10px 20px;
}

.errBtn:hover {
  background-color: var(--errorHoverColor);
}

.clearBtn {
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  color: rgb(82, 82, 82);
  box-shadow: none;
  min-width: 100px;
}

.clearBtn:hover {
  font-weight: bold;
}

.clearBtn svg {
  fill: rgb(82, 82, 82);
  height: 11px;
}

hr {
  border: 1.5px solid #e9e9e9;
  background-color: #e9e9e9;
  margin: 30px 0px;
}

.hrColor {
  border: 1.5px solid var(--primaryColor);
  background-color: var(--primaryColor);
  margin: 30px 0px;
}

/* Country Code */

.CCdiv {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: left;
}

.countryCodes {
  width: 100px;
  background-color: #dedede;
  min-width: unset;
  border-radius: 3px 0px 0px 3px !important;
  padding-right: 4px;
}

.CCdigits {
  border-radius: 0px 3px 3px 0px !important;
  border-left: none !important;
  min-width: unset !important;
  width: 150px;
  padding-left: 10px !important;
}

/* Password Validation */
#passValBox,
#passMatchBox {
  width: 250px;
  background-color: white;
  padding: 12px;
  margin-top: 18px;
  box-shadow: var(--shadow);
  position: absolute;
  z-index: 10;
}

#passValBox:after,
#passMatchBox::after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  background: #fff;
  position: absolute;
  top: -10px;
  left: calc(10% - 10px);
  /* box-shadow: var(--shadow); */
}

#passValBox > ul {
  list-style-position: inside;
  list-style-image: url(/img/general/Icons/cross2.png);
}

#passValBox > ul > li {
  font-size: 13px;
  line-height: 12px;
}

#passValBox > h5 {
  margin-bottom: 5px;
  font-size: 14px;
}

#passMatchBox > h5 {
  color: var(--errorColor);
  margin-bottom: 0;
}

/* eye */
.viewPass {
  width: 22px;
  position: absolute !important;
  cursor: pointer;
  margin: 6px 6px 6px -32px;
}

.eye {
  width: 22px;
  position: absolute;
  cursor: pointer;
  right: 14px;
  top: 42px;
}

#capsLock {
  width: 122px;
  left: 50px !important;
  background-color: #fff;
  padding: 5px;
  margin-top: 1px !important;
  box-shadow: var(--shadow);
  position: absolute;
  z-index: 10;
}

#capsLock:after {
  content: "";
  width: 11px;
  height: 11px;
  transform: rotate(-45deg);
  background: #fff;
  position: absolute;
  top: -5px;
  left: calc(10% - -1px);
  /* box-shadow: var(--shadow); */
}

/*--------------- Main Pane Features ------------*/

/* Login */
div.login_form {
  /* position: fixed; */
  position: relative;
  background: var(--bgLoginImg);
  background-size: cover;
  width: 100vw;
  height: 100%;
  /* margin-top: -113px;
  margin-left: -180px; */
  z-index: 1500;
  top: 0;
  left: 0;
}

/* linked to Index1.html */
div#page {
  font-size: 30px;
  color: darkgrey;
}

.gridPage {
  display: grid;
  min-height: 100%;
  height: 100%;
  width: 100%;
  grid-template: 100px auto/230px auto;
  grid-gap: 15px;
  margin-top: 20px;
  margin-bottom: 0;
  background-color: #fff;
}

.topLeftGrid {
  grid-row: 1/2 !important;
  grid-column: 1/2 !important;
  /* background-color: #1d9f86 !important; */
  /*  border-bottom: 2px solid #1d9f86; */
  background-color: #e2e2e2;
  padding: 20px 15px;
  align-content: center;
  bottom: 0;
}

#searchSite {
  width: 189px;
  min-width: unset;
  border: none;
  padding: 5px 5px 5px 15px;
}

#CompanyLogo > img {
  max-width: 150px !important;
  height: auto;
}

.topRightGrid {
  background-color: #e2e2e2;
  grid-row: 1/2;
  grid-column: 2/2;
  vertical-align: middle;
  padding: 5px 50px;
  display: flex;
  flex-direction: row;
  align-content: space-between;
  align-items: center;
}

#user {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
}

#profileImage {
  border-radius: 50%;
  border: 2px solid var(--primaryColor);
  width: 40px;
  height: 40px;
}

h6 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: rgb(0, 0, 0);
  letter-spacing: 0.2px;
  margin-left: 10px;
  font-weight: normal;
}

.labelDescript {
  font-size: 10px;
  color: #808080;
  text-transform: none;
}

.sub1 {
  cursor: pointer;
}

.subitem:hover {
  background-color: #ccc !important;
  font-weight: 600 !important;
  color: var(--primaryColor) !important;
}

.required {
  color: var(--errorColor);
  /* font-weight: bold; */
  font-size: 10px;
}

/* 
.grid #nav {
  grid-row: 2/2;
  grid-column: 1/2;
  align-content: center;
  background: #1d9f86;
}

.nav_container {
  padding-bottom: 20px;

}

.nav__dropdown {
  position: relative;
  margin-left: 0;
  margin-right: 0 !important;
  padding-left: 0px;
  border-bottom: none;
  width: 100%;
  min-width: 180px;
}

.nav__dropdown:hover {
  background: #1d9f857c !important;
  color: black !important;
  font-weight: bold !important;
  border-left: 4px solid black;
}

#nav a {
  text-decoration: none;
  color: white;
  padding: 8px 15px 6px 30px;
}

#nav a:hover {
  text-decoration: none;
  color: white;
  background: royalblue;
}

#nav a:active {
  text-decoration: none;
  color: white;
  background: royalblue;
} */

.navActive {
}

.mainContent {
  margin: 20px 50px 20px 50px !important;
  grid-row: 2/2 !important;
  grid-column: 2/2 !important;
  margin-top: 20px;
  align-content: center;
  width: calc(100vw - 333px);
  min-height: calc(100vh - 434px);
}

#mainPane {
  width: calc(100vw - 333px);
}

.primaryHeading {
  grid-row: 2/2;
  grid-column: 2/2;
}

#company {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  color: var(--primaryColor);
  margin-bottom: 30px;
  letter-spacing: 0.2px;
  margin-bottom: 0px;
}

div#page {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  margin-bottom: 0px;
  color: black;
}

.LandingPageImg {
  width: 100%;
  height: auto;
}

/* =========================== LMS ====================== */

#lmsContainer {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  border: none;
}

/* ------------------------------------ */

.tabcontent,
.messageContent,
.assessmentContents,
.nominationContent {
  border: none !important;
  padding: 0 !important;
  min-height: 60vh;
  width: 100%;
  /* grid */
}

.tab {
  border-bottom: 3px solid var(--primaryColor);
  padding-bottom: 30px;
  margin-bottom: 20px;
}

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

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

.tab button,
.tab button#viewGroupTab,
.tab button#linkAssessmentTab {
  background-color: lightgrey;
  color: #fff;
  border-radius: 7px;
  min-width: 100px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  margin-right: 5px;
  margin-bottom: 10px;
  transition: 0.5s;
}

.box {
  background: var(--box);
  box-shadow: 0px 2px 6px #00000041;
  border-radius: 10px;
  opacity: 1;
  padding: 3.5%;
  margin-top: 30px;
}

.lightGreenBox {
  background-color: var(--subBox);
  border-radius: 10px;
  padding: 20px;
}

#selectC {
  background-color: var(--subBox);
  /* box-shadow: var(--shadow); */
  border-radius: 10px;
  padding: 10px 50px 35px 50px;
  margin-bottom: 30px;
}

/* ----------------Tables ------------------------ */

table {
  border-spacing: 1;
  border-collapse: collapse;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  width: 100% !important;
  box-shadow: 0px 2px 6px #00000041;
  border: none;
  text-transform: none !important;
  white-space: normal !important;
}

thead {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  letter-spacing: 0.2px;
  border: none;
  padding: 0px 20px !important;
  height: 65px;
}

th {
  font-size: 14px !important;
  border: none !important;
  padding: 15px 5px !important;
  letter-spacing: 0.2px !important;
}

td {
  padding: 15px !important;
  text-transform: none !important;
  white-space: normal !important;
}

tr {
  border-bottom: 2px solid #e6e6e6 !important;
  font-size: 13px !important;
  background-color: #ffffff;
  padding: 15px 15px !important;
  text-transform: none !important;
  white-space: normal !important;
}

tr:hover {
  background-color: var(--trHover);
}

#mailBody > tr:hover {
  background-color: none !important;
}

table tr:last-of-type {
  border-bottom: none;
}

/*--------------- Login & Forgot Password ------------*/

.loginContent {
  position: relative;
  width: 420px !important;
  /* height: 550px !important; */
  height: fit-content;
  padding: 40px;
  top: 10%;
  margin: auto;
  background: white;
  margin-top: 10px;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  padding-bottom: 30px !important;
}

#loginLogos {
  display: flex;
  flex-direction: row;
  margin: 30px 20px 0px 20px;
  justify-content: space-evenly;
  padding: 0;
}

.loginHeading {
  text-align: center !important;
  padding-bottom: 0 !important;
}

.forgotPassword {
  text-align: center;
  color: var(--primaryColor) !important;
  font-weight: normal;
}

.forgotPassword:hover {
  font-weight: bold;
}

.jvr_warning {
  color: var(--errorColor);
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  display: block;
  margin: auto;
  padding: 0 !important;
  display: block !important;
  text-align: center;
  line-height: 18px;
  padding-top: 8px !important;
}

.responseFeedback {
  color: var(--primaryColor);
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  display: block;
  margin: auto;
  padding: 0 !important;
  display: block !important;
  text-align: center;
}

input#l_username,
input#l_password:active {
  background-color: white !important;
}

/* Logos */
/* Logo in header */
#bannerHeader {
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: flex-start;
  height: 100px;
  background-image: var(--headerBannerImg);
  background-repeat: repeat-x;
}

.companyImg {
  margin: 5px;
  max-width: 200px !important;
  max-height: 80px !important;
  z-index: 99;
  object-fit: contain;
}

/* Logos in login */
.loginLogos {
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
}

.loginImg {
  margin: 10px;
  max-width: 145px !important;
  max-height: 100px !important;
  object-fit: contain;
}

/*--------------- Main Pane Features ------------*/

.box {
  background: var(--box);
  box-shadow: 0px 2px 6px #00000041;
  border-radius: 10px;
  opacity: 1;
  padding: 3.5%;
  margin-top: 30px;
}

.lightGreenBox {
  background-color: var(--subBox);
  border-radius: 10px;
  padding: 3.5%;
}

/* ---------------------- Tabs -------------------------------- */

/* Sub Tabs */

#subList {
  display: flex;
  border-bottom: none;
  margin-bottom: 0;
  margin-top: 20px;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.subTab {
  color: #d3d3d3;
  display: flex;
  align-content: center;
  margin-right: 25px;
  margin-bottom: 12px;
}

.subTab:hover {
  color: var(--primaryColor);
  font-weight: bold;
}

.subTabActive {
  display: flex;
  align-content: center;
  border-bottom: 3px solid var(--primaryColor);
  padding-bottom: 5px;
  margin-right: 20px;
  color: #000000;
  font-weight: bold;
}

.subTabActive:hover {
  display: flex;
  align-content: center;
  border-bottom: 3px solid var(--primaryColor);
  padding-bottom: 5px;
  margin-right: 20px;
  color: #000000;
  font-weight: bold;
}

/* icons */
.subTab > svg {
  max-width: 25px;
  min-width: 25px;
  max-height: 25px;
  min-height: 25px;
  fill: currentColor;
  margin-right: 8px;
}

.subTabActive > svg {
  max-width: 25px;
  min-width: 25px;
  max-height: 25px;
  min-height: 25px;
  fill: currentColor;
  margin-right: 8px;
}

.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;
  display: flex;
}

/*--- Message Tabs--- */

.msgTabBox {
  margin-bottom: 30px;
  width: fit-content;
  display: flex;
}

.msgTab {
  color: var(--primaryColor);
  padding: 8px 15px;
  cursor: pointer;
  border: none;
  font-size: 12px;
  margin: 0;
  border: 2px solid var(--primaryColor);
}

.msgTab:hover {
  cursor: pointer;
  background-color: #d3d3d3;
  border: 2px solid var(--primaryColor);
  margin: 0;
  /* color: white; */
}

.msgTabActive {
  background-color: var(--primaryColor);
  color: white;
  padding: 8px 15px;
  border: none;
  font-size: 12px;
  border: 2px solid var(--primaryColor);
  margin: 0;
}

.msgTabActive:hover {
  background-color: var(--primaryColor);
  color: white;
  padding: 8px 15px;
  border: none;
  font-size: 12px;
  border: 2px solid var(--primaryColor);
  margin: 0;
}

.leftEdge {
  border-radius: 8px 0px 0px 8px;
}

.rightEdge {
  border-radius: 0px 8px 8px 0px;
}

/* ------Search Table --------------- */

#searchSpace {
  float: right;
  margin-bottom: 12px;
  display: flex;
}

#searchFilters {
  width: auto;
  height: 40px;
  background-color: var(--primaryColor);
  border-radius: 7px;
  margin-left: 12px;
  text-align: center;
  top: -5px;
  position: relative;
  padding: 0px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  cursor: pointer;
  margin-top: 5px;
}

#searchFilters > img {
  width: 17px;
  height: auto;
  margin-left: 10px;
  /* margin-top: 12px; */
}

#searchFilters:hover {
  background-color: var(--secondaryColor);
}

.searchFiltersActive {
  background-color: var(--secondaryColor) !important;
}

.searchBarIcon {
  content: url(/img/general/Icons/magGlass_grey.svg);
  width: 14px;
  fill: #a9a9a9;
  position: absolute;
  margin: 13px;
}

#trSearch {
  background-color: #e8e8e8 !important;
  /* #DEDEDE */
  min-height: 65px;
}

#trSearch input {
  min-width: 130px;
  max-width: 180px;
  margin: 10px;
}

#trSearch select {
  min-width: 130px;
  max-width: 175px;
  margin: 10px;
}

.iconOff {
  fill: #777777;
  cursor: pointer;
}

.iconOn {
  fill: var(--primaryColor);
}

.iconGrid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  grid-gap: 8px;
}

.addSerDiv > svg {
  width: auto;
  height: 12px;
  margin: 1rem;
}

.clientLogoTable > img {
  width: 60px;
  height: auto;
}

/* ------Pagination -------- */

#pagDiv {
  text-align: center;
  margin: 15px;
}

.pagNum {
  font-size: 12px;
  font-weight: normal;
  color: #000000;
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  padding: 10px 20px;
  box-shadow: none;
}

.pagNumActive {
  font-size: 14px;
  font-weight: bold;
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: var(--secondaryColor);
  cursor: pointer;
  color: black;
  padding: 10px 20px;
  box-shadow: none;
}

.pagNum:hover {
  font-weight: bold;
}

.pagArrow {
  color: #000000;
  position: relative;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  padding: 10px 20px;
  box-shadow: none;
  font-size: 20px;
}

.pagArrow:hover {
  color: var(--primaryColor);
}

/* --------------------Drag & Drop --------------------------- */
.draggable {
  background-color: white;
  box-shadow: 0px 2px 6px #00000041;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  width: 800px;
  padding: 15px;
  margin: 10px 0px;
  width: 100%;
  max-width: 800px;
  align-items: center;
}

.draggable::after,
.draggable::before {
  margin: unset;
}

.draggable:hover {
  background-color: var(--subBox);
  cursor: pointer;
}

.draggable.dragging {
  background-color: var(--subBox);
  cursor: move;
}

.barLeft {
  display: inline-flex;
  margin-right: 20px;
}

.barRight {
  float: right;
}

.barDots {
  object-fit: none;
  margin-right: 15px;
}

/*  drag & drop in a table */
.Tdraggable {
  background-color: transparent;
  box-shadow: unset;
  border-radius: unset;
  display: unset;
  justify-content: unset;
  width: unset;
  padding: unset;
  margin: unset;
  width: 100%;
  max-width: unset;
  align-items: unset;
}

.Tdraggable::after,
.Tdraggable::before {
  margin: unset;
}

.Tdraggable:hover {
  background-color: var(--trHover_);
  cursor: pointer;
}

.Tdraggable.dragging {
  background-color: var(--trHover_);
  cursor: move;
}

.TbarDots {
  object-fit: none;
  margin-left: 20px;
  margin-top: 16px;
}

/* ----------- Select Client ---------------------- */

.selectCGrid {
  display: grid;
  grid-template-columns: 280px 280px 150px 280px;
  grid-gap: 15px 20px;
  box-sizing: content-box;
}

#addToUserGroup {
  grid-column: 4/5;
  grid-row: 1;
}

#newGroupName {
  grid-column: 1;
  grid-row: 2;
}

#newGroupDescription {
  grid-column: 2;
  grid-row: 2;
}

#privateGroup {
  grid-column: 3;
  grid-row: 2;
}

.selectCHeading {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 21px;
  color: black;
  font-weight: normal;
}

/* --------- Notification popup ------------------ */
.notify {
  position: fixed;
  top: 10px;
  z-index: 100001;
}

.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: 100000;
}

.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: var(--errorColor);
  font-size: 14px;
  text-align: center;
  z-index: 100000;
}

.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);
}

/* ----------information popup --------------------- */

.popupBoxBig {
  position: fixed;
  top: 30%;
  left: 40%;
  z-index: 100;
}

.popupBoxContent {
  position: relative;
  width: 80%;
  max-height: 90%;
  padding: 40px;
  top: 5%;
  margin: auto;
  background: white;
  margin-top: 10px;
  box-shadow: 0px 3px 6px #00000029;
  overflow: auto;
}

.seeThroughOverlay {
  position: fixed;
  width: 1000px;
  height: 100%;
  top: 150px;
  background-color: transparent;
  z-index: 101;
}

.closeX {
  padding-top: 7px;
  color: #dadada;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  float: right;
  position: relative;
  z-index: 105 !important;
  margin-left: 20px;
}

.closeX:hover {
  background-color: #e2e2e2;
  color: white;
  cursor: pointer;
}

/* ----------custom popup --------------------- */

#custardBox {
  position: fixed;
  top: 30%;
  left: 40%;
  z-index: 10000;
}

#custardContainer {
  position: relative;
  width: 40%;
  max-height: 80%;
  padding: 40px;
  top: 15%;
  margin: auto;
  background: white;
  margin-top: 10px;
  box-shadow: 0px 3px 6px #00000029;
  overflow: auto;
}

.custardHeading {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

#custardContent {
  text-align: center;
}

.x {
  fill: #dadada;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  float: right;
  position: absolute;
  z-index: 105 !important;
  margin-left: 20px;
  top: 21px;
  right: 21px;
}

.x:hover {
  /* background-color: #e2e2e2; */
  fill: var(--primaryColor);
  cursor: pointer;
}

/* ---------Compare Users --------------------------- */

#compareBtn {
  float: left;
  margin-bottom: 12px;
  display: flex;
}

.compareGrid {
  display: grid;
  grid-template-columns: 140px auto;
  grid-gap: 35px 20px;
  box-sizing: content-box;
  /* grid-auto-columns: minmax(200px, 380px); */
}

.hrCompare {
  margin: 0px 0px 25px 0px;
  border: 1px solid #cccccc;
}

.compareLabels {
  color: var(--primaryColor);
  margin-top: 294px;
}

.compareLabels > h4 {
  margin: 4.3px 0px;
}

.compareProfile {
  background: white;
  color: var(--fontColor);
  grid-column: 2;
  padding: 30px;
  border-radius: 20px;
  width: fit-content;
  box-shadow: 0px 2px 6px #00000041;
  min-width: 260px;
}

.compareProfileActive {
  background: var(--primaryColor);
  color: white;
  grid-column: 2;
  padding: 30px;
  border-radius: 20px;
  width: fit-content;
  min-width: 260px;
  box-shadow: 0px 2px 6px #00000041;
}

.profileDets > p {
  color: var(--fontColor);
  font-size: 11px;
  line-height: 18px;
  font-weight: lighter;
}

.profileDetsActive > p {
  color: white;
  font-size: 11px;
  line-height: 18px;
  font-weight: lighter;
}

.profileDets > h4 {
  font-size: 17px;
  margin-bottom: 7px;
}

.profileDetsActive > h4 {
  font-size: 17px;
  margin-bottom: 7px;
  color: white;
}

.compareProfileActive > .userinfo > label {
  color: white !important;
}

.userinfo > label {
  text-transform: none;
  font-weight: lighter;
}

.selected {
  font-weight: bold;
}

.assNapp {
  margin: 20px 0px 26px 26px;
}

.compareli {
  font-size: 11px;
  list-style: none;
  font-weight: bold;
}

.compareli > li {
  line-height: 8px;
  font-size: 11px;
  color: var(--primaryColor);
}

.compareSubli {
  margin: 10px 0px 10px 15px;
  font-size: 11px;
}

.compareSubli > li {
  line-height: 8px;
  font-size: 11px;
  font-weight: normal;
}

#ppic_0,
#ppic_1,
#ppic_2 {
  position: absolute;
  width: 100px;
  top: -1px;
  left: -1px;
}

.ppContainer {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  border: 2.5px solid var(--primaryColor);
  background-color: white;
  padding: 3px;
}

.imgTick {
  position: absolute;
  cursor: pointer;
  z-index: 1;
  margin-left: 65px;
  margin-top: 54px;
  width: 42px;
}

.fillWhite {
  fill: #fff;
}

.fillSecColour {
  fill: var(--secondaryColor);
}

.ppActive {
  border: 3px solid var(--secondaryColor);
}

/* ---Checkbox on green bg ---*/
.compareProfileActive > .userinfo > .checkContainer input ~ .tick {
  border: 2px solid white;
}

.compareProfileActive > .userinfo > .checkContainer input:checked ~ .tick {
  background-color: white;
}

.compareProfileActive > .userinfo > .checkContainer .tick:after {
  border: solid var(--primaryColor);
  border-width: 0 2px 2px 0;
}

/* ---Checkbox not valid ---*/
.compareProfile > .userinfo > .checkContainer input:checked ~ .na {
  background-color: #d3d3d3;
}

.compareProfile > .userinfo > .checkContainer .na:after {
  border: solid #d3d3d3;
  border-width: 0 2px 2px 0;
}

.compareProfileActive > .userinfo > .checkContainer input ~ .na {
  border: 2px solid #8d8d8d;
}

.compareProfileActive > .userinfo > .checkContainer input:checked ~ .na {
  background-color: #d3d3d3;
}

.compareProfileActive > .userinfo > .checkContainer .na:after {
  border: solid #d3d3d3;
  border-width: 0 2px 2px 0;
}

input ~ .na {
  border: 2px solid #8d8d8d;
  background-color: #d3d3d3;
}

input:checked ~ .na {
  background-color: #d3d3d3;
  border: 2px solid #8d8d8d;
}

.na:after {
  border: solid #d3d3d3;
  border-width: 0 2px 2px 0;
}

.checkContainer:hover input ~ .na {
  background-color: #d3d3d3;
  cursor: none;
}

.checkContainer .na:after {
  border: solid #d3d3d3;
  border-width: 0 2px 2px 0;
}

.fyi {
  background-color: #d1d2d4;
  padding: 16px;
  max-width: 350px;
  border-radius: 7px;
}

.fyi > p {
  font-size: 12px;
  line-height: 20px;
}

.prefixMobDiv {
  display: grid;
  grid-template-columns: 87px auto;
}

.prefixMobDiv > input {
  border-left: none !important;
  min-width: unset !important;
  width: fit-content;
  padding-left: 10px !important;
}

.countryCodes {
  width: 100px;
  background-color: #0000;
  min-width: unset;
  padding-right: 4px;
  border: none;
  border: 2px solid var(--mediumGrey);
  background-color: white;
}

.labelFinePrint {
  font-size: smaller;
  color: #b91313;
  line-height: 14px;
  margin-bottom: 5px;
}

.group {
  position: relative;
  margin-bottom: 34px;
  width: 100%;
}

.group > label {
  position: absolute;
  top: -15px;
  font-size: 12px;
  left: 0px;
  color: var(--darkGrey);
  font-weight: 400;
  letter-spacing: 0.5px;
  width: 100%;
}

.width100 {
  width: 100%;
}

/* ----------------MGS Temeplates page --------------- */
/* Whole div */
#selectCheckboxes {
  border: 1px #dadada solid;
  background-color: #fff;
  padding: 10px;
  box-shadow: 1px 3px 4px 0px #0000001f;
  border-radius: 0px 0px 10px 10px;
  position: absolute;
  width: 250px;
  z-index: 1;
}

#selectCheckboxes label {
  line-height: 15px;
  min-width: 70px;
}

/* Hide select when clicked */
.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Row */
.multiCheckOption {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.multiCheckOption > p {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--fontColor) !important;
  letter-spacing: 0.5px;
  font-weight: normal;
  line-height: 15px;
}

/* Items in row */
.multiCheckOption > input[type="checkbox"] {
  margin-right: 10px;
}

.selectBox {
  position: relative;
}

/* Fake DD -- not sureheast these do but will keep incase*/
/* .multiCheckSelect {
  width: 250px;
}
.selectBox select {
  width: 100%;
} */

/* ------------- Add report -------------------------- */

.addReportGrid {
  display: grid;
  grid-template-columns: 270px auto;
  grid-gap: 35px 20px;
  box-sizing: content-box;
}

.whiteSubBox {
  background: white;
  color: var(--fontColor);
  grid-column: 2;
  padding: 43px;
  border-radius: 20px;
  box-shadow: 0px 2px 6px #00000028;
  margin-bottom: 20px;
}

.resultsGrid {
  display: grid;
  grid-template-columns: 285px auto auto;
  grid-gap: 35px 30px;
  box-sizing: content-box;
  align-items: end;
}

.resultsGrid4Col {
  display: grid;
  grid-template-columns: 200px auto auto auto;
  grid-gap: 35px 30px;
  box-sizing: content-box;
  align-items: end;
}

.inputResults > div {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 6px;
}

.inputResults > div > h4 {
  margin-bottom: 0;
}

.inputResults > div > input:focus {
  outline: none !important;
  border-top: transparent !important;
  border-left: transparent !important;
  border-right: transparent !important;
}

.inputResults > div > .correct {
  border-color: #1d9f86 !important;
}

.inputResults > div > .incorrect {
  border-color: var(--errorColor) !important;
}

.inputResults > div > input {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.3px;
  height: 25px;
  width: 60px;
  margin: 0;
  border: none;
  border-bottom: solid 2px !important;
  border-radius: 0px !important;
  border-color: #dedede !important;
  outline: none;
  min-width: unset;
  text-align: center;
  padding: 0px !important;
}

.dashInput > input {
  width: 32px !important;
}

.feilds > h4 {
  font-weight: normal;
  margin-bottom: 0px;
  margin-top: 7px;
}

.resultsNote {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 40px;
  background-color: #d1d2d4;
  padding: 16px;
  border-radius: 7px;
}

.resultsNote > div {
  margin-right: 18px;
}

.resultsNote > div > p {
  font-size: 13px;
  line-height: 19px;
}

/* Steps */

.steps {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.step {
  background-color: #d6d6d6;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  color: white;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding: 2px;
}

.stepLine {
  width: 60px;
  border: 1.5px solid #d6d6d6;
  background-color: #d6d6d6;
}

/* List Table */

.listHead > tr > th {
  color: var(--fontColor);
  background-color: white;
  font-size: 14px !important;
  padding: 10px 5px !important;
}

.listBody {
  background-color: white;
}

.listBody > tr {
  border-bottom: none !important;
  padding-top: 10px;
  text-align: center;
}

.listBody > tr > td {
  text-align: center;
  padding: 8px !important;
}

a:hover,
td > img:hover {
  cursor: pointer;
}

a > svg:hover {
  fill: var(--primaryColor);
}

td svg {
  height: 2rem;
  width: auto;
  cursor: pointer;
  fill: var(--primaryColor);
  margin-left: 0.9rem;
}

td svg:hover {
  fill: var(--secondaryColor);
}

/*----------- Scientist -> edit Discovery Application------------- */
#scientistQs > div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.smallP {
  font-size: 12px;
  line-height: 19px;
}

#QcomboYN,
#Q2YN,
#Q1YN {
  width: 17px;
  height: 14px;
  object-fit: contain;
  margin: 4px 10px 0px 0px;
}

/* ------------------Admin Reports ------------------------- */

.controlPanelGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.reportChart {
  width: minmax(auto, 1200px);
  height: auto;
  margin-bottom: 3rem;
}

.reportChart > canvas {
  position: relative;
}

/* Steps -> month slider */

.rating {
  margin: 1rem 0 3.5rem 0;
}

.rating > p:first-of-type {
  margin-bottom: 1rem;
}

.ratingSteps1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.ratingItem {
  background-color: var(--mediumGrey);
  border-radius: 30px;
  width: 40px;
  height: 40px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 0;
}

.ratingLine {
  width: 100%;
  border: 4px solid var(--mediumGrey);
  background-color: var(--mediumGrey);
  margin-bottom: unset;
}

.selected {
  border-color: var(--secondaryColor);
  background-color: var(--secondaryColor);
}

.ratingActive {
  background-color: var(--secondaryColor);
  border-color: var(--secondaryColor);
}

/* --------------------- Grids ----------------------------- */

.input-2col {
  display: grid;
  grid-template-columns: 400px 400px;
  grid-gap: 40px;
  box-sizing: content-box;
}

.input-2col-thin {
  display: grid;
  grid-template-columns: 400px 400px;
  grid-gap: 40px;
  box-sizing: content-box;
}

.input-3col {
  display: grid;
  grid-template-columns: 320px 340px 320px;
  grid-gap: 35px 40px;
  box-sizing: content-box;
}

.float {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: left;
}

.floatItem {
  margin-right: 35px;
  margin-bottom: 20px;
}

.row {
  display: flex;
  flex-direction: row;
  margin: 0;
  margin-bottom: 20px;
}

.row label {
  width: 20%;
  margin-right: 15px;
}

.halfGrid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 40px;
}

.thirdGrid {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 20px;
}

.textTableUpdateTD {
  display: grid;
  gap: 1rem;
  align-items: center;
  align-content: center;
  grid-template-columns: 6fr 1fr;
  max-width: unset;
}

.textTableUpdateTD > textarea {
  width: 100%;
  min-height: 70px;
  overflow-x: hidden;
}

/* ------------- Responsive ------------------------- */

@media only screen and (max-width: 1540px) {
  .input-3col {
    display: grid;
    grid-template-columns: 340px 340px;
    grid-gap: 35px 40px;
    box-sizing: content-box;
  }

  .controlPanelGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 1300px) {
  .thirdGrid {
    display: grid;
    grid-template-columns: 50% 50%;
  }
}

@media only screen and (max-width: 1260px) {
  .input-3col {
    display: grid;
    grid-template-columns: 340px;
    grid-gap: 35px 40px;
    box-sizing: content-box;
  }

  .input-2col {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 3rem 5rem;
    box-sizing: content-box;
  }

  .controlPanelGrid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 1270px) {
  .addReportGrid {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 1100px) {
  .input-2col-thin {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 35px;
    box-sizing: content-box;
  }

  .halfGrid {
    grid-template-columns: 100%;
    grid-gap: 10px;
  }
}

/* -------------- Quick Fixes -------------------- */

.marginTop {
  margin-top: 20px;
}

.marginBottom {
  margin-bottom: 20px;
}

.sectionGap {
  margin-top: 50px;
}

.width50 {
  width: 50%;
  padding-right: 15px;
}

.width33 {
  width: 50%;
  padding-right: 15px;
}

.editBtn {
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.verticalAlign {
  vertical-align: middle;
}

.alignCenter {
  display: flex;
  align-items: center;
}

.center {
  display: flex;
  justify-content: center;
}

/* Center end button */
.justifySpace {
  justify-content: space-around;
  display: flex;
  flex-direction: row;
}

.marginAuto {
  margin: auto;
}

/* Bug fix - don't change */
.switch {
  margin-bottom: 0;
}

.bgActive {
  background-color: var(--primaryColor);
}

.hrActive {
  border: 1.5px solid var(--primaryColor);
  background-color: var(--primaryColor);
}

/* No arrows on number inputs */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.noMargBtn .btn {
  margin: 0;
}

.slider.both {
  background-color: #cccccc;
}

/* Validation */

.correct {
  border-color: #1d9f86 !important;
}

.incorrect {
  border-color: var(--errorColor) !important;
}

.incorrect:focus {
  border-color: var(--errorColor) !important;
}

.list {
  margin-left: 17px;
}

.list > li {
  line-height: 22px;
}

/* Content Page */

.checkSVG {
  fill: grey;
}

.checkSVG > svg {
  height: 27px !important;
  width: auto;
}

.checkSVG:hover {
  fill: var(--primaryColor);
}

.arrowDD {
  fill: var(--firstColor);
  width: 11px;
  height: auto;
}

.arrowDown {
  transform: rotateZ(90deg);
}

.consentName {
  display: flex;
  padding: 12px 30px;
  align-items: center;
  cursor: pointer;
  background-color: var(--primaryColor);
  border-radius: 20px;
  margin-top: 20px;
}

.consentName > svg {
  margin-right: 10px;
  fill: white;
}

.consentName > h5 {
  margin: 0 !important;
  color: white;
}

.textContainer {
  padding: 30px;
  cursor: pointer;
  background-color: white;
  border-radius: 0px 0px 20px 20px;
  box-shadow: var(--shadow);
}

.textContainer ul,
.textContainer ol {
  margin-left: 20px;
}

.textContainer ul > li,
.textContainer ol > li {
  line-height: 21px;
}

.textContainer p {
  margin-bottom: 17px;
}

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

.oldBox {
  border: 2px solid #d3d3d3;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 15px lightgrey;
  padding: 10px;
}

.labelRow > .row {
  align-items: baseline;
  margin-bottom: 14px;
}

.labelRow > .row > label {
  width: 35%;
  font-weight: bold;
  line-height: 18px;
  font-size: 14px;
}

/* Reports table quick fix */

#userReports > .historyRow {
  border-bottom: 1px solid grey;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#userReports span.reporttype {
  display: inline-block;
  width: 200px;
  word-break: break-word;
  line-height: 18px;
}

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

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-bottom: 5rem;
}

@media only screen and (max-width: 1165px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}