* {
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
}

input:invalid {
  box-shadow: none;
}

a {
  /* remove all href styles */
  color: inherit;
  text-decoration: inherit;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.margin-auto {
  margin: auto;
}

.height-auto {
  height: auto;
}

.mr-auto {
  margin-right: auto;
}

@font-face {
  font-family: "Moresugar";
  src: url("/assets/fonts/MoreSugar-Regular.ttf");
}
.ember-modal-dialog {
  z-index: 51;
  position: fixed;
}

.ember-modal-dialog.emd-in-place {
  position: static;
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
  position: relative;
}

.ember-modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px;
}

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77);
}

input:focus {
  box-shadow: 0 0 10px rgba(52, 77, 144, 0.5);
}

:root {
  --primary-color-1: #4281A4;
  --primary-color-2: #48A9A6;
  --primary-color-3: #D4B483;
  --primary-color-4: #C1666B;
  --secondary-color-1: #1A3A61;
  --secondary-color-2: #E4DFDA;
  --secondary-color-3: #80606E;
  --font-color-1: #1A3A61;
  --font-color-2: #737373;
  --font-color-3: #131929;
  --font-color-4: #FFFFFF;
  --font-color-5: #1A3A61;
  --font-inverted-white: white;
  --help-color: #EE0000;
  --menu-color-1: #003E8F;
  --menu-color-2: #28B4CC;
  --menu-color-3: #EF5406;
  --menu-color-4: #19C89C;
  --menu-color-5: #822EB2;
  --menu-color-6: #FACE03;
  --menu-border-radius: 0 20px 0 20px;
  --module-h1-color: #48A9A6;
  --module-h2-color: #C1666B;
  --module-h3-color: #000000;
  --module-h4-color: #7C606B;
  --module-h5-color: #000000;
  --module-h6-color: #1A3A61;
}

@font-face {
  font-family: "Dosis:wght@800";
  src: url("/assets/fonts/Dosis/static/Dosis-ExtraBold.ttf");
}
@font-face {
  font-family: "Montserrat", sans-serif;
  src: url("/assets/fonts/Montserrat/Montserrat-Regular.ttf");
}
@font-face {
  font-family: "Montserrat", sans-serif;
  src: url("/assets/fonts/Montserrat/Montserrat-Bold.ttf");
}
@font-face {
  font-family: "Glacial-Indifference";
  src: url("/assets/fonts/glacial-indifference/GlacialIndifference-Bold.otf");
}
@font-face {
  font-family: "Fredoka-One";
  src: url("/assets/fonts/FredokaOne-Regular.ttf");
}
@font-face {
  font-family: "nunito";
  src: url("/assets/fonts/Nunito/nunito-bold-webfont.woff2") format("woff2"), url("/assets/fonts/Nunito/nunito-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "nunito";
  src: url("/assets/fonts/Nunito/nunito-extrabold-webfont.woff2") format("woff2"), url("/assets/fonts/Nunito/nunito-extrabold-webfont.woff") format("woff");
  font-weight: bolder;
  font-style: normal;
}
@font-face {
  font-family: "nunito";
  src: url("/assets/fonts/Nunito/nunito-regular-webfont.woff2") format("woff2"), url("/assets/fonts/Nunito/nunito-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "nunito";
  src: url("/assets/fonts/Nunito/nunito-semibolditalic-webfont.woff2") format("woff2"), url("fonts/nunito-semibolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "introrust";
  src: url("/assets/fonts/introrust-base-webfont.woff2") format("woff2"), url("/assets/fonts/introrust-base-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "chewy";
  src: url("/assets/fonts/chewy-regular-webfont.woff2") format("woff2"), url("/assets/fonts/chewy-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "quicksand";
  src: url("/assets/fonts/quicksand-bolditalic-webfont.woff2") format("woff2"), url("/assets/fonts/quicksand-bolditalic-webfont.woff") format("woff");
  font-weight: bold-italic;
  font-style: bold-italic;
}
@font-face {
  font-family: "quicksand";
  src: url("/assets/fonts/quicksand-semibold.woff2") format("woff2"), url("/assets/fonts/quicksand-semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "quicksand";
  src: url("/assets/fonts/quicksand-bold.woff2") format("woff2"), url("/assets/fonts/quicksand-bold.woff") format("woff");
  font-weight: bold;
  font-style: bold;
}
@font-face {
  font-family: "quicksand";
  src: url("/assets/fonts/quicksand-italic-webfont.woff2") format("woff2"), url("/assets/fonts/quicksand-italic-webfont.woff") format("woff");
  font-weight: italic;
  font-style: italic;
}
@font-face {
  font-family: "sniglet";
  src: url("/assets/fonts/sniglet-regular-webfont.woff2") format("woff2"), url("/assets/fonts/sniglet-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
.p_h1 {
  font-size: 35px;
  font-family: "Dosis:wght@800";
  font-weight: 800;
  padding-bottom: 30px !important;
  color: white !important;
}

.p_h2 {
  font-size: 22px;
  font-family: "Dosis:wght@800";
  font-weight: 800;
  padding-bottom: 20px !important;
}

.p_c1 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 18;
  line-height: 140%;
  font-size: 16px;
  font-weight: 300;
}

.p_c2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 18 !important;
  line-height: 140%;
  font-size: 16px;
  font-weight: 400 !important;
}

.participant-primary-color1 {
  background-color: var(--primary-color-1);
}

.participant-primary-color2 {
  background-color: var(--primary-color-2);
}

.participant-primary-color3 {
  background-color: var(--primary-color-3);
}

.participant-primary-color4 {
  background-color: var(--primary-color-4);
}

.participant-primary-col-color1 {
  color: var(--primary-color-1);
}

.participant-primary-col-color2 {
  color: var(--primary-color-2) !important;
}

.participant-primary-col-color3 {
  color: var(--primary-color-3);
}

.participant-primary-col-color4 {
  color: var(--primary-color-4);
}

.participant-font-color-1 {
  color: var(--font-color-1) !important;
}

.participant-font-color-2 {
  color: var(--font-color-2) !important;
}

.participant-font-color-3 {
  color: var(--font-color-3);
}

.participant-font-color-4 {
  color: var(--font-color-4);
}

.help-color {
  background-color: var(--help-color);
}

.menu-color1 {
  background-color: var(--menu-color-1);
}

.menu-color2 {
  background-color: var(--menu-color-2);
}

.menu-color3 {
  background-color: var(--menu-color-3);
}

.menu-color4 {
  background-color: var(--menu-color-4);
}

.menu-color5 {
  background-color: var(--menu-color-5);
}

.menu-color6 {
  background-color: var(--menu-color-6);
}

.menu-color1-col {
  color: var(--menu-color-1);
}

.menu-color2-col {
  color: var(--menu-color-2);
}

.menu-color3-col {
  color: var(--menu-color-3);
}

.menu-color4-col {
  color: var(--menu-color-4);
}

.menu-color5-col {
  color: var(--menu-color-5);
}

.menu-color6-col {
  color: var(--menu-color-6);
}

.menu-help-col {
  color: var(--help-color);
}

.participant-search {
  position: relative;
  margin-bottom: 20px;
  background-color: var(--menu-color-2);
  padding: 10px;
  border-radius: var(--menu-border-radius);
  display: none;
}
.participant-search .search_image {
  position: absolute;
  color: var(--font-color-1);
  border: 4px solid var(--menu-color-1);
  top: 10px;
  right: 10px;
  border-radius: 0 5px 5px 0;
  background-color: #fff;
}
.participant-search .search_image svg {
  width: 1.7em;
  height: 1.7em;
}
.participant-search .search_image path {
  transform: scale(0.7) translateX(30%) translateY(20%);
  fill: var(--menu-color-1);
}
.participant-search .search-input {
  width: calc(100% - 28px);
  border: 4px solid var(--menu-color-1);
  border-radius: 5px 5px 0 0;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  padding: 5px;
  height: 19px;
}
.participant-search .search-input::placeholder {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 300;
}

.participant-input {
  border: 0px solid var(--font-color-1) !important;
  border-bottom: 3px solid var(--font-color-1) !important;
  border-right: 3px solid var(--font-color-1) !important;
  border-radius: 29px !important;
}
.participant-input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em var(--primary-color-1);
}

@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.participant-container {
  background-color: rgba(255, 255, 255, 0) !important;
  max-width: calc(100% - 350px);
}
@media (max-width: 930px) {
  .participant-container {
    max-width: 100%;
  }
}

.feelingstracker .participant-container {
  max-width: 100%;
  overflow-y: auto !important;
}

.index .participant-container {
  max-width: 100%;
  overflow-y: auto !important;
}

.session-container {
  background-color: rgba(255, 255, 255, 0) !important;
  max-width: calc(90% - 275px) !important;
}
@media (max-width: 900px) {
  .session-container {
    max-width: calc(85% - 275px) !important;
  }
}

.participant-button-global {
  width: 250px;
  background-color: var(--primary-color-1);
  color: #FFFAF1;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  border-radius: 5px;
  height: 55px;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}
.participant-button-global .background-layer {
  width: 0%;
  height: 100%;
  position: absolute;
  background-color: #FFFAF1;
}
.participant-button-global .nav-icon-outer {
  background-color: #FFFAF1;
  padding: 15px 10px;
  padding-right: 30px;
  padding-left: 20px;
  clip-path: polygon(80% 38%, 100% 50%, 80% 62%, 80% 99%, 0 100%, 0 0, 80% 0);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.participant-button-global .nav-icon-outer .nav-icon {
  font-size: 30px;
  color: var(--primary-color-1);
}
.participant-button-global .nav-title {
  padding: 16px 22px;
  font-weight: 600;
}
.participant-button-global:hover {
  opacity: 1;
}

.bell-notification {
  position: absolute;
  right: -22px;
  top: 0px;
}
.bell-notification .search-icon {
  background-color: white;
  padding: 5px;
  border-radius: 100%;
  font-size: 18px;
  color: var(--menu-color-4);
}

.bellicon {
  position: absolute;
  right: -10px;
  padding: 5px;
  border-radius: 100%;
}

.header-section {
  display: flex;
  font-family: "Chewy";
}
.header-section .left-side-images {
  width: 300px;
  height: 200px;
  margin: 10px 10px 50px 40px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}
.header-section .left-side-images .person-image {
  width: 50%;
  margin-left: 25%;
  margin-top: -30px;
}
.header-section .right-side-text {
  width: 70%;
  margin: 30px 10% 0px -30px;
  display: inline-block;
  text-align: center;
}
.header-section .right-side-text .description {
  font-size: 32px;
  color: #fff;
  width: 70%;
  margin-left: 15%;
}
.header-section .right-side-text .links {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.assets-component {
  position: relative;
  height: calc(100vh - 180px);
  background-color: #ffffff;
  width: 230px;
  top: 0px;
  right: 0px;
  z-index: 3;
  padding: 20px 20px;
  border-left: 2px solid rgb(206, 206, 206);
  /* Hide scrollbar for Chrome, Safari and Opera */
  /* Hide scrollbar for IE, Edge and Firefox */
}
.assets-component h2 {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 300;
}
.assets-component .edit-menu {
  position: absolute;
  background-color: #344D90;
  border-radius: 100%;
  right: 10px;
  top: 5px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.assets-component .edit-menu:hover {
  opacity: 1;
}
.assets-component .edit-menu .select-icon {
  padding: 6px 7px;
  font-size: 12px;
  color: #ffffff;
}
.assets-component .edit-box {
  padding: 10px;
  background-color: #ffffff;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  position: absolute;
  box-sizing: border-box;
  top: 0;
  height: 100%;
  display: none;
  z-index: 100000;
}
.assets-component .edit-box .inputfield {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fafafa;
}
.assets-component .edit-box input {
  width: calc(100% - 60px) !important;
  padding: 5px 10px !important;
  margin: 10px 0px;
  background-color: white;
  border: rgb(221, 221, 221) solid 1px;
}
.assets-component .edit-box .select-icon {
  background-color: #344D90;
  border-radius: 29px;
  right: 10px;
  top: 10px;
  cursor: pointer;
  opacity: 0.8;
  padding: 6px;
  font-size: 14px;
  color: #ffffff;
  margin: 10px 0px;
  transition: 0.3s ease-in-out;
}
.assets-component .edit-box .select-icon:hover {
  opacity: 1;
}
.assets-component .edit-box .asset-hed {
  font-weight: 500;
  padding: 4px 5px;
  color: #344D90;
  text-transform: uppercase;
}
.assets-component .edit-box .or {
  text-align: center;
  font-size: 12px;
}
.assets-component .edit-box .deleteasset {
  text-align: center;
  font-weight: 500;
  color: #344D90;
  text-decoration: underline;
  font-size: 14px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s ease-in-out;
}
.assets-component .edit-box .deleteasset:hover {
  opacity: 1;
}
.assets-component .edit-box .close-btn {
  position: absolute;
  right: 18px;
  top: -12px;
  cursor: pointer;
}
.assets-component .each-assets {
  width: 190px;
  margin-top: 20px;
  background-color: #fafafa;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 400px);
  overflow-y: scroll;
  overflow-x: hidden;
}
.assets-component .each-assets > div:hover .edit-menu {
  opacity: 1;
}
.assets-component .each-assets .asset-name-title {
  padding: 10px 10px;
  background-color: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: calc(95% - 20px);
  margin: auto;
}
.assets-component .each-assets .asset-name-title p {
  font-size: 14px;
  width: 80%;
  font-weight: 400;
}
.assets-component .each-assets img {
  width: 95%;
  height: 150px;
  background-color: #ffffff;
  object-fit: contain;
  margin: 0px 3%;
  margin-bottom: 10px;
  align-items: center;
  background-size: cover;
  cursor: move;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.assets-component .each-assets object {
  width: 95%;
  background-color: #ffffff;
  margin: 0px 3%;
  margin-bottom: 10px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: move;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 5px;
  height: 150px;
  object-fit: contain;
}
.assets-component .each-assets .svg-img {
  position: relative;
  min-height: 80px;
}
.assets-component .each-assets .svg-image {
  height: 150px;
  position: absolute;
  z-index: 20;
  top: 0px;
  opacity: 0;
}
.assets-component .each-assets .video {
  width: 95%;
  margin: 0px 3%;
  margin-bottom: 10px;
  align-items: center;
  background-size: cover;
  background-color: #ffffff;
  cursor: move;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.assets-component .each-assets .video iframe {
  border: none;
}
.assets-component .each-assets .video .asset-name-title {
  padding: 10px 10px;
  padding-bottom: 0px;
  background-color: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: calc(95% - 20px);
  margin: auto;
}
.assets-component .each-assets .video .asset-name-title p {
  font-size: 14px;
  width: 90%;
  font-weight: 400;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.assets-component .each-assets .video .view {
  background-color: #344D90;
  padding: 5px;
  color: white;
  font-size: 12px;
  margin-top: 10px;
}
.assets-component .each-assets .video .view a {
  text-align: center;
  margin: auto;
  width: 30px;
  display: block;
}
.assets-component .each-assets .image-asset,
.assets-component .each-assets .embedd-assets {
  position: relative;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin-bottom: 20px;
}
.assets-component .each-assets .each-survey {
  height: 120px;
  width: 95%;
  background-color: #ffffff;
  margin: 0px 3%;
  margin-bottom: 10px;
  align-items: center;
  background-size: cover !important;
  cursor: move;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 5px;
  border: 1px solid transparent;
  padding: 5px;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
  position: relative;
}
.assets-component .each-assets .each-survey:hover {
  border: 1px solid rgba(52, 77, 144, 0.5);
}
.assets-component .each-assets .each-survey p {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 20px;
  transform: translateY(-50%);
  text-align: center;
}
.assets-component .each-assets .each-survey .survey-title {
  font-size: 16px;
  font-weight: 500;
  padding: 5px;
  background: rgba(255, 255, 255, 0.7);
  top: 40% !important;
  transform: translateY(-50%);
  font-weight: 300;
  text-transform: capitalize;
}
.assets-component .each-assets .each-survey .survet-description {
  font-size: 14px;
}
.assets-component .survey-assets {
  margin-top: 0px;
  height: calc(100vh - 340px);
}
.assets-component .each-assets::-webkit-scrollbar {
  display: none;
}
.assets-component .each-assets {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.assets-component .close {
  display: none;
  position: absolute;
  top: 40px;
  right: 20px;
  color: #ffffff;
  font-size: 20px;
  background-color: #344D90;
  padding: 3px 8px;
  border-radius: 100%;
  cursor: pointer;
}
.assets-component .media-choice {
  display: flex;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  margin: 20px 0px;
  margin-top: 0px;
}
.assets-component .media-choice span {
  border-radius: 10px;
  width: 25%;
  height: 40px;
  font-weight: 300;
  cursor: pointer;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
}
.assets-component .media-choice .shadow {
  background-color: #344D90;
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.assets-component .media-choice .svg {
  font-weight: 500;
}
.assets-component .media-choice .photos {
  color: #ffffff;
}
.assets-component .media-choice999 span {
  border-radius: 10px;
  width: 25%;
  height: 35px;
  font-weight: 300;
  cursor: pointer;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
}
.assets-component .search-assets {
  width: calc(100% - 40px);
  border: none;
  background-color: #fafafa;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 0px;
  margin-top: 0px;
}
.assets-component .upload1 {
  position: absolute;
  width: 30px;
  height: 30px;
  padding: 7px 8px;
  text-align: center;
  background-color: #344D90;
  color: #ffffff;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 70px;
  transition: 0.3s ease-in-out;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.assets-component .upload1:hover {
  opacity: 0.9;
}
.assets-component .upload1 .icir {
  padding-top: 5px;
  font-size: 18px;
}
.assets-component .up1 {
  z-index: 10;
}
.assets-component .up2 {
  display: none;
  animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
}
.assets-component .uploadbox1 {
  position: relative;
  width: 100px;
  margin: auto;
  margin-top: 10px;
  width: 100%;
}
@keyframes scaleIn {
  from {
    transform: scale(0.5, 0.5);
    opacity: 0.5;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}
.assets-component .back_button {
  color: #344D90;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  margin: 0px 80px;
  margin-top: 50px;
}
.assets-component .uploader {
  width: 190px;
  background-color: #fafafa;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 350px);
  position: relative;
}
.assets-component .uploader p {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  padding: 20px 0px;
  color: gray;
}
.assets-component .uploader .middle {
  height: 150px;
  width: 190px;
  margin: auto;
  border-radius: 20px;
  background-color: #ffffff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.assets-component .uploader .middle .mediaicon {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px;
}
.assets-component .uploader .middle .mediaicon .select-icon {
  font-size: 50px;
  color: #344D90;
}
.assets-component .uploader .icr {
  margin: 0px 70px;
  margin-top: 70px;
  font-size: 50px;
  color: gray;
  opacity: 0.7;
}
.assets-component .inner {
  top: 20%;
  left: 0px;
  width: 100%;
}
.assets-component .upload-file {
  margin-top: 10px;
}
.assets-component .upload-file input {
  width: 140px !important;
  margin: 10px;
  border: none;
  background-color: #ffffff;
  padding: 12px 20px;
  border-radius: 10px;
}
.assets-component .close-asset > div,
.assets-component .upload > div {
  background-color: #344D90;
  color: #ffffff;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
}
.assets-component .close-asset > div:hover,
.assets-component .upload > div:hover {
  opacity: 0.9;
}
.assets-component .close-asset > div .icr,
.assets-component .upload > div .icr {
  font-size: 16px;
}

.initial-note {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: grey;
}

.button-bottom {
  display: flex;
  margin: 20px 0;
  position: relative;
}
.button-bottom > div {
  width: 20%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  cursor: pointer;
}
.button-bottom > div.active {
  color: #ffffff;
}
.button-bottom .hover-shadow {
  background-color: #344D90;
  height: 100%;
  width: 20%;
  position: absolute;
  left: 20%;
  top: 0px;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}

.choose-survey-asset {
  position: absolute;
  width: 80px;
  background-color: #fafafa;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 10px;
  margin-left: 60px;
}

.module-media-choice {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  margin: 20px 0px;
  margin-top: 0px;
}
.module-media-choice span {
  padding: 10px 10px;
  border-radius: 10px;
  width: 75px;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  z-index: 1;
}
.module-media-choice .shadow {
  background-color: #344D90;
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.module-media-choice .photos {
  color: #ffffff;
}

.video-type {
  height: 150px !important;
  width: 95%;
}

.myaudioplayer {
  width: 170px;
  height: 40px;
  margin: 10px 5px;
}

.assets-SV {
  display: none;
}

.assets-AD {
  display: none;
}

.assets-VD {
  display: none;
}

.assets-DC {
  display: none;
}

.loadmoreassets {
  text-align: center;
  width: 100%;
  padding: 8px 0px;
  background-color: #344D90;
  color: #ffffff;
  font-weight: 300;
  border-radius: 5px;
  opacity: 0.8;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.loadmoreassets:hover {
  opacity: 1;
}

.mediauppload-hd1 {
  font-size: 14px;
}

.searcheditorassets {
  margin-top: 30px !important;
  margin-bottom: 10px !important;
}

.refreshAssets {
  top: 10px !important;
}

.surveysearchinput {
  margin-top: 30px !important;
}

.survey-assets-height {
  height: calc(100vh - 370px) !important;
}

.file_name {
  color: #344D90 !important;
  font-weight: 500;
  padding-top: 0px !important;
}

.each-module-asset {
  height: 150px;
  width: 95%;
  background-color: white;
  margin: 0px 3%;
  margin-bottom: 10px;
  align-items: center;
  background-size: cover;
  cursor: move;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 5px;
  z-index: 20;
}
.each-module-asset p {
  padding-top: 25%;
  text-align: center;
}

.each-module-assets {
  width: 90%;
  margin-top: 20px;
  background-color: #fafafa;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 350px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.media-upload-errors {
  color: red;
  font-size: 12px;
}

.rule-assets {
  background-color: white;
  width: 100%;
  height: calc(100vh - 250px);
  position: relative;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rule-assets::-webkit-scrollbar {
  display: none;
}
.rule-assets .top-menu {
  margin-bottom: 10px;
  position: absolute !important;
  right: 30px;
  top: 15px;
}
.rule-assets .top-menu .top-menu-button {
  position: absolute;
  padding: 7px 8px;
  text-align: center;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  bottom: 10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.rule-assets .top-menu .top-menu-button:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.rule-assets .top-menu .top-menu-button .icr {
  font-size: 16px;
}
.rule-assets .top-menu .m1 {
  padding: 7px 11px;
  text-align: center;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.rule-assets .top-menu .m1:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.rule-assets .top-menu .m1 .icr {
  font-size: 16px;
}
.rule-assets .top-menu .m2 {
  right: 40px !important;
}
.rule-assets .top-menu .m3 {
  right: 0px;
}
.rule-assets .top-menu .m4 {
  right: 80px;
}
.rule-assets h2 {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 300;
}
.rule-assets .create-rule {
  width: 90% !important;
  position: relative !important;
  margin: auto;
}
.rule-assets .new-rule-comp {
  padding: 0px 30px;
}
.rule-assets .new-rule-comp .warning-message {
  margin-top: 10px;
  padding: 10px 20px;
}
.rule-assets .new-rule-comp input.error, .rule-assets .new-rule-comp select.error, .rule-assets .new-rule-comp textarea.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.rule-assets .each-rules {
  width: 90%;
  margin-top: 20px;
  background-color: #fafafa;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 520px);
  overflow-y: scroll;
  overflow-x: hidden;
}
.rule-assets .each-rules .each-rule {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  background-color: white;
  border-radius: 29px;
  justify-content: space-between;
}
.rule-assets .each-rules .each-rule span {
  cursor: pointer;
}
.rule-assets .each-rules .each-rule span:hover {
  color: #344D90;
}
.rule-assets .each-rules .each-rule .icon {
  margin: auto 0px;
  color: #344D90;
  cursor: pointer;
}
.rule-assets .close {
  display: none;
  position: absolute;
  top: 40px;
  right: 20px;
  color: white;
  font-size: 20px;
  background-color: #344D90;
  padding: 3px 10px;
  border-radius: 100%;
  cursor: pointer;
}
.rule-assets .rule_name {
  margin-top: 0px !important;
}
.rule-assets .media-choice {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  margin: 20px 0px;
  margin-top: 0px;
}
.rule-assets .media-choice span {
  padding: 10px 10px;
  border-radius: 10px;
  width: 75px;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}
.rule-assets .media-choice .shadow {
  background-color: #344D90;
  height: 100%;
  width: 95px;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.rule-assets .media-choice .photos {
  color: white;
}
.rule-assets .search-assets {
  width: calc(100% - 100px);
  border: none;
  background-color: #fafafa;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 0px;
}
.rule-assets .or {
  padding: 15px 20px;
  text-align: center;
  color: #a5a2a2;
  opacity: 0.7;
  font-weight: 100;
}
.rule-assets .upload {
  position: absolute;
  bottom: 100px;
  width: 80%;
  padding: 10px 0px;
  text-align: center;
  background-color: #344D90;
  color: white;
  border: none;
  border-radius: 29px;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.rule-assets .upload:hover {
  opacity: 0.9;
}
.rule-assets .back-button {
  padding: 20px 0px;
  color: #344D90;
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.rule-assets .back-button .icon {
  transform: translateY(2px);
}
.rule-assets .back-button:hover {
  opacity: 0.9;
}
.rule-assets .rule-point-head {
  font-weight: 300;
  padding: 20px 0px;
}
.rule-assets .selector {
  width: 100%;
  border: none;
  background-color: #fafafa;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 20px 0px;
  margin-top: 0px;
}
.rule-assets .rule-1 {
  margin: 20px 20px;
  margin-top: 0px;
  width: 85%;
}
.rule-assets .select-input {
  padding: 0px 20px;
}
.rule-assets .select-input p {
  font-weight: 300;
  padding: 0px;
  padding-bottom: 10px;
  padding-top: 15px;
}
.rule-assets .select-input input {
  margin: 5px 0px;
}
.rule-assets .column-conditions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}
.rule-assets .column-conditions .condition-text {
  font-weight: 300;
  font-size: 14px;
}
.rule-assets .column-conditions .condition {
  padding: 0px 2px;
}
.rule-assets .logical-condition-1 {
  display: flex;
  flex-direction: row;
}
.rule-assets .logical-condition-1 .logical-text-1 {
  padding: 20px 0px;
  padding-right: 20px;
  font-weight: 400;
  text-transform: uppercase;
}
.rule-assets .logical-condition-1 .selector {
  width: 120px;
  margin: 0px;
}
.rule-assets .logical-condition-1 .event-selector {
  width: 500px;
}
.rule-assets .logical-condition-1 input {
  width: 40px;
  margin: 0px;
}
.rule-assets .logical-condition-1 .placeholder-text {
  font-size: 10px;
  text-align: center;
}
.rule-assets .logical-condition-2 {
  display: none;
}
.rule-assets .logic-note {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 10px;
  font-weight: 100;
}
.rule-assets .margin-bottom {
  height: 100px;
}
.rule-assets .outer-logic-component {
  padding: 20px;
  border: 2px solid #fafafa;
  border-radius: 10px;
  margin-bottom: 20px;
}

.rules-events {
  display: flex;
  flex-direction: row;
  border: 1px solid rgb(235, 235, 235);
}
.rules-events .all-events {
  width: calc(50% - 40px);
  border-right: 1px solid rgb(235, 235, 235);
  padding: 20px;
}
.rules-events .all-events .notetext {
  padding: 0px 10px;
  font-size: 12px;
  color: gray;
  font-weight: 300;
  transform: translateY(-20px);
}
.rules-events .create-events {
  width: calc(50% - 40px);
  padding: 20px;
}
.rules-events .create-events input.error, .rules-events .create-events select.error, .rules-events .create-events textarea.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.rules-events .event_head {
  font-weight: 300;
  padding-bottom: 10px;
  padding-left: 10px;
  font-size: 12px;
}
.rules-events .text-event {
  height: 80px;
}
.rules-events .ctevnt {
  padding-top: 0px;
}
.rules-events .addeventbutton {
  padding: 8px;
  margin-top: 10px;
}
.rules-events .eventlists .each-event {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  padding: 5px;
  justify-content: space-between;
  margin-bottom: 10px;
  border-radius: 5px;
}
.rules-events .eventlists .each-event .event-name {
  font-size: 16px;
  margin: auto 2px;
}
.rules-events .eventlists .each-event .event-buttons {
  display: flex;
  flex-direction: row;
  width: 60px;
  justify-content: space-evenly;
}
.rules-events .eventlists .each-event .event-buttons span {
  margin: auto;
  width: 15px;
  height: 15px;
  padding: 5px 6px;
  text-align: center;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.rules-events .eventlists .each-event .event-buttons span:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.rules-events .eventlists .each-event .event-buttons span .icr {
  font-size: 12px;
}
.rules-events .eventlists .each-event .event-buttons .rightarrow {
  transform: translateX(20px);
  padding: 2px 0px;
  color: #344D90;
  display: none;
}
.rules-events .eventlists .each-event .event-buttons-1 {
  width: 40px;
}
.rules-events .mod-sur-container {
  width: 100%;
  height: 150px;
  max-width: 250px;
  background-color: #fafafa;
  border-radius: 10px;
  margin-top: 0px;
  margin-bottom: 20px;
}
.rules-events .mod-sur-container .drag-text {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.rules-events .condition {
  padding: 10px 0px;
  width: 180px;
  margin: auto;
}
.rules-events .condition p {
  font-weight: 300;
  font-size: 16px;
  transform: translateY(5px);
}

.inputsandlogicsoutside {
  width: 100%;
  height: 350px;
  background-color: #fafafa;
  border-radius: 10px;
  position: relative;
}
.inputsandlogicsoutside .abovelayer {
  width: 100%;
  height: 350px;
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  z-index: 10;
}

.inputsandlogics {
  width: 100%;
  height: 350px;
  background-color: #fafafa;
  border-radius: 10px;
}

.event-head-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.event-head-flex .event-buttons-2 {
  padding-top: 20px;
  padding-right: 10px;
}
.event-head-flex span {
  margin: auto;
  width: 15px;
  height: 15px;
  padding: 5px 6px;
  text-align: center;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.event-head-flex span:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.event-head-flex span .icr {
  font-size: 12px;
}

.addedmodulesurveybox {
  padding-bottom: 30px;
}
.addedmodulesurveybox .hds {
  padding-bottom: 10px;
  padding-top: 20px;
}
.addedmodulesurveybox .each-addedmodulesurveybox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fafafa;
  padding: 10px;
  border-radius: 5px;
}
.addedmodulesurveybox .each-addedmodulesurveybox span {
  margin: auto 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  opacity: 0.5;
}
.addedmodulesurveybox .each-addedmodulesurveybox span:hover {
  opacity: 1;
  color: #344D90;
}

.optionalmodules h2 {
  font-size: 12px;
  padding: 0px 5px;
}
.optionalmodules .dragoptionalmodule {
  margin: 20px 0px;
  height: 140px;
  max-width: 250px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  background-color: white;
  margin-bottom: 40px;
  border-radius: 10px;
}
.optionalmodules .dragoptionalmodule span {
  color: #344D90;
  text-align: center;
  display: block;
  padding: 60px 0px;
  text-transform: capitalize;
}
.optionalmodules .dragoptionalmodule.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}

#ruletriggerfrequency, #ruletriggerfrequency_head, #inhours {
  display: none;
}

.login-component .hover_bkgr_fricc {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.login-component .hover_bkgr_fricc > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 95%;
  width: 95%;
  max-height: 770px;
  max-width: 800px;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
@media (max-width: 800px) {
  .login-component .hover_bkgr_fricc > div {
    width: 90%;
  }
}
.login-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.login-component .hover_bkgr_fricc .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .close {
  position: absolute;
  right: -40px;
  top: -20px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .logo {
  margin: auto;
  margin-top: 50px;
  height: 150px;
  width: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
}
@media (max-width: 500px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .logo {
    margin-top: 60px;
    height: 120px;
    width: 250px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .code-copyyu {
  padding: 40px 20px;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-top: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .login {
  display: flex;
  flex-direction: column;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .login p {
  width: 500px;
  margin: 0px auto;
  font-family: "Roboto", sans-serif;
  padding-bottom: 20px;
  font-weight: 300;
  text-align: center;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .login input {
  width: 500px;
  border: none;
  background-color: white;
  padding: 10px 20px;
  margin: 30px auto;
  margin-top: 0px;
  border-bottom: 1px solid #344D90;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .login input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .login input {
    width: 230px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .login select {
  width: 540px;
  border: none;
  background-color: white;
  padding: 10px 20px;
  margin: 30px auto;
  margin-top: 0px;
  border-bottom: 1px solid #344D90;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  border-radius: 0px;
}
@media (max-width: 700px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .login select {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .login select {
    width: 230px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .forgot-password {
  margin: auto;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}
@media (max-width: 400px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .forgot-password {
    font-size: 14px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .forgot-password a {
  color: #344D90;
  cursor: pointer;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .forgot-password a:hover {
  opacity: 1;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .incorrectuspassalert {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  padding: 20px;
  padding-top: 0px;
  font-family: "Roboto", sans-serif;
  color: red;
  /*@media (max-height: 900px) {
             transform: translateY(-40px);
  }*/
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .incorrectuspassalert1 {
  transform: translateY(30px);
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .nouspassalert {
  display: none;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
  color: red;
  /*@media (max-height: 900px) {
             transform: translateY(-40px);
  }*/
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .successful-login {
  display: none;
  text-align: center;
  padding: 20px;
  padding-top: 5px;
  font-family: "Roboto", sans-serif;
  color: #344D90;
}
@media (max-height: 900px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .successful-login {
    transform: translateY(-20px);
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .loading_line {
  background-color: #344D90;
  width: 0px;
  height: 5px;
}
@media (max-height: 900px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .loading_line {
    transform: translateY(-10px);
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .resetpassword-sent {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  border: 2px solid #344D90;
  padding: 20px;
  margin-bottom: 40px;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .update-button {
  padding: 10px 20px;
  text-align: center;
  width: 500px;
  background-color: #344D90;
  color: white;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  cursor: pointer;
  margin: auto;
  border-radius: 5px;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
  }
}
@media (max-width: 400px) {
  .login-component .hover_bkgr_fricc .login-component-box .inner-box .update-button {
    width: 230px;
    font-size: 18px;
    padding: 12px 20px;
  }
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.login-component .hover_bkgr_fricc .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.landing-page-component {
  padding: 50px;
  min-height: calc(100vh - 233px);
  background-color: #FFFFFF;
}
@media (max-width: 1040px) {
  .landing-page-component {
    min-height: 100vh;
    padding: 20px;
  }
}
.landing-page-component .landing-page-logo {
  margin: auto;
  margin-top: 20px;
  height: 180px;
  width: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  cursor: pointer;
}
@media (max-width: 500px) {
  .landing-page-component .landing-page-logo {
    margin-top: 50px;
    height: 120px;
    width: 250px;
  }
}
.landing-page-component .middle-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 50px 0px;
  border-top: 1px solid rgb(219, 219, 219);
  border-bottom: 1px solid rgb(219, 219, 219);
  margin: 90px 0px;
  margin-top: 50px;
}
@media (max-width: 1200px) {
  .landing-page-component .middle-section {
    flex-direction: column;
    justify-content: space-evenly;
  }
}
@media (max-width: 500px) {
  .landing-page-component .middle-section {
    margin: 70px 0px;
  }
}
.landing-page-component .middle-copy {
  font-weight: 300;
  padding-top: 10px;
}
.landing-page-component .signup {
  width: 200px;
}
@media (min-width: 1200px) {
  .landing-page-component .signup {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .landing-page-component .signup {
    margin: 0px auto;
    margin-top: 20px;
  }
}
.landing-page-component .row {
  width: 48%;
  position: relative;
}
@media (max-width: 1200px) {
  .landing-page-component .row {
    width: 100%;
  }
}
.landing-page-component .row .head {
  color: #1E2B50;
}
.landing-page-component .row .head, .landing-page-component .row .middle-copy {
  text-align: right;
}
@media (max-width: 1200px) {
  .landing-page-component .row .head, .landing-page-component .row .middle-copy {
    text-align: center;
  }
}
.landing-page-component .announcements .announcement-heading {
  text-align: center;
  color: #1E2B50;
}
.landing-page-component .announcements .announcement-copy {
  text-align: center;
  padding: 20px;
  font-weight: 300;
}
.landing-page-component h1 {
  font-size: 35px;
  font-weight: 400;
}
@media (max-width: 1040px) {
  .landing-page-component h1 {
    font-size: 40px;
  }
}
@media (max-width: 500px) {
  .landing-page-component h1 {
    font-size: 30px;
  }
}

.footer-component {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: #64656A;
  border-top: 1px solid rgb(238, 238, 238);
}
@media (max-width: 1040px) {
  .footer-component {
    flex-direction: column;
  }
}
.footer-component a {
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 300;
  color: white;
}
@media (max-width: 1040px) {
  .footer-component a {
    text-align: center;
    padding: 20px;
    font-size: 14px;
  }
}

.create-new-study-component .hover_bkgr_fricc-study-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-study-component .hover_bkgr_fricc-study-comp > div {
  background-color: #fff;
  margin: auto;
  margin-top: 5%;
  display: flex;
  height: 90%;
  max-height: 750px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 3px 3px;
}
@media (max-height: 900px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp > div {
    margin-top: 2%;
  }
}
@media (max-width: 800px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp > div {
    width: 90%;
  }
}
.create-new-study-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp select {
  width: 540px;
  border: none;
  background-color: #fafafa;
  margin: 20px auto;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .condition {
  margin: auto;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .condition p {
  padding-top: 3px;
  font-size: 16px !important;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .numberofarmsandphases {
  display: flex;
  flex-direction: row;
  width: 540px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .numberofarmsandphases {
    width: 300px;
    flex-direction: column;
    margin-bottom: 0px;
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
  width: 40%;
  margin: 0px;
}
@media (max-width: 700px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
    margin: 30px auto;
    margin-top: 0px;
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
    width: 230px;
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-study-component .hover_bkgr_fricc-study-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-study-component .select_site {
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  transform: translateY(18px);
  margin-top: -8px;
}

.updatemodule-tags-component .hover_bkgr_fricc-module-tags {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags > div {
  background-color: #fff;
  margin: auto;
  margin-top: 5%;
  display: flex;
  height: 90%;
  max-height: 750px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 3px 3px;
}
@media (max-height: 900px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags > div {
    margin-top: 5%;
  }
}
@media (max-width: 800px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags > div {
    width: 90%;
  }
}
@media (max-height: 500px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags > div {
    overflow-y: scroll;
  }
}
.updatemodule-tags-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box {
  width: 90%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 15px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .numberofarmsandphases {
  display: flex;
  flex-direction: row;
  width: 540px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .numberofarmsandphases {
    width: 300px;
    flex-direction: column;
    margin-bottom: 0px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .numberofarmsandphases .noanp {
  width: 40%;
  margin: 0px;
}
@media (max-width: 700px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .numberofarmsandphases .noanp {
    margin: 30px auto;
    margin-top: 0px;
    width: 300px;
  }
}
@media (max-width: 400px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .numberofarmsandphases .noanp {
    width: 230px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input {
  margin: auto;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .Add-action {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  width: 60px;
  padding: 6px 20px;
  border-radius: 29px;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  font-size: 16px;
  color: #344D90;
  font-weight: 400;
  text-transform: uppercase;
  margin: auto;
  transition: all 0.3s ease-in-out;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .Add-action .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 10px;
  padding: 2px;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .Add-action:hover {
  background-color: #344D90;
  color: #fafafa;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .Add-action:hover .plus {
  color: #fafafa;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .tags-box {
  background-color: #fafafa;
  padding: 20px;
  height: 150px;
  margin: 30px auto;
  margin-top: 20px;
  overflow-y: scroll;
  width: 500px;
  position: relative;
}
@media (max-width: 700px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .tags-box {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .tags-box {
    width: 230px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .tags-box .p-text {
  background-color: white;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 29px;
  color: #344D90;
  margin-right: 20px;
  margin-bottom: 10px;
  position: relative;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .note-tag {
  opacity: 0;
  padding: 20px;
  text-align: center;
  font-weight: 300;
  color: red !important;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .delete-tag {
  background-color: red;
  border-radius: 100%;
  position: absolute;
  right: -10px;
  top: -10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  cursor: pointer;
  opacity: 0.9;
  height: 20px;
  width: 18px;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .delete-tag .minus {
  margin-left: 1.5px;
  color: white;
  padding: 2px;
  padding-top: 2px;
  font-size: 12px;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .delete-tag:hover {
  opacity: 1;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .trash {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #344D90;
  cursor: pointer;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .tags-input .tag-initial {
  color: gray;
  font-weight: 200;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.updatemodule-tags-component .hover_bkgr_fricc-module-tags .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.updatemodule-tags-component .modulenameexist {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  color: red;
  font-weight: 400;
}

.create-module {
  overflow-x: hidden;
  overflow-y: hidden;
}

.create-new-module-component .hover_bkgr_fricc-study-module {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-module-component .hover_bkgr_fricc-study-module > div {
  background-color: #fff;
  margin: auto;
  margin-top: 2%;
  display: flex;
  height: 90%;
  max-height: 730px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 3px 3px;
}
@media (max-height: 900px) {
  .create-new-module-component .hover_bkgr_fricc-study-module > div {
    margin-top: 2%;
  }
}
@media (max-width: 800px) {
  .create-new-module-component .hover_bkgr_fricc-study-module > div {
    width: 90%;
  }
}
.create-new-module-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box {
  width: 90%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .condition {
  margin: 0px auto;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .condition p {
  font-size: 16px;
  padding: 4px 0px;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .numberofarmsandphases {
  display: flex;
  flex-direction: row;
  width: 540px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .numberofarmsandphases {
    width: 300px;
    flex-direction: column;
    margin-bottom: 0px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .numberofarmsandphases .noanp {
  width: 40%;
  margin: 0px;
}
@media (max-width: 700px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .numberofarmsandphases .noanp {
    margin: 30px auto;
    margin-top: 0px;
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .numberofarmsandphases .noanp {
    width: 230px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input {
  margin: auto;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .Add-action {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  width: 60px;
  padding: 6px 20px;
  border-radius: 29px;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  font-size: 16px;
  color: #344D90;
  font-weight: 400;
  text-transform: uppercase;
  margin: auto;
  transition: all 0.3s ease-in-out;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .Add-action .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 10px;
  padding: 2px;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .Add-action:hover {
  background-color: #344D90;
  color: #fafafa;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .Add-action:hover .plus {
  color: #fafafa;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .tags-box {
  background-color: #fafafa;
  padding: 20px;
  height: 70px;
  margin: 30px auto;
  overflow-y: scroll;
  width: 500px;
  position: relative;
}
@media (max-width: 700px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .tags-box {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .tags-box {
    width: 230px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .tags-box .p-text {
  background-color: white;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 29px;
  color: #344D90;
  margin-right: 20px;
  margin-bottom: 10px;
  position: relative;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .note-tag {
  opacity: 0;
  padding: 20px;
  text-align: center;
  font-weight: 300;
  color: red !important;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .delete-tag {
  background-color: red;
  border-radius: 100%;
  position: absolute;
  right: -10px;
  top: -10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  cursor: pointer;
  opacity: 0.9;
  height: 20px;
  width: 18px;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .delete-tag .minus {
  margin-left: 1.5px;
  color: white;
  padding: 2px;
  padding-top: 2px;
  font-size: 12px;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .delete-tag:hover {
  opacity: 1;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .trash {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #344D90;
  cursor: pointer;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .tags-input .tag-initial {
  color: gray;
  font-weight: 200;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box .margin-bottom {
  height: 100px;
  width: 100%;
}
.create-new-module-component .hover_bkgr_fricc-study-module .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-module-component .modulenameexist {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  color: red;
  font-weight: 400;
}

.uploadthumbnail-view {
  margin: 30px auto;
}
.uploadthumbnail-view .upload-head {
  padding: 10px 0px;
  font-weight: 500;
  font-size: 18px;
  color: #344D90;
}
.uploadthumbnail-view .thumbnailview {
  height: 140px;
  width: 240px;
  background-color: #fafafa;
  border-radius: 5px;
  margin: auto;
  background-position: center;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}

.create-new-survey-component .hover_bkgr_fricc-study-survey {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 98%;
  max-height: 820px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 3px 3px;
}
@media (max-height: 850px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey > div {
    overflow-y: scroll;
  }
}
@media (max-width: 800px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey > div {
    width: 90%;
  }
}
.create-new-survey-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp select {
  width: 540px;
  border: none;
  background-color: #fafafa;
  margin: 10px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp select {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp select {
    width: 230px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp select.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .study-comp .vrtotrack {
  margin-bottom: 10px;
  display: none;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .numberofarmsandphases {
  display: flex;
  flex-direction: row;
  width: 540px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .numberofarmsandphases {
    width: 300px;
    flex-direction: column;
    margin-bottom: 0px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .numberofarmsandphases .noanp {
  width: 40%;
  margin: 0px;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .numberofarmsandphases .noanp {
    margin: 30px auto;
    margin-top: 0px;
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .numberofarmsandphases .noanp {
    width: 230px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input {
  margin: auto;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .Add-action {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  width: 60px;
  padding: 6px 20px;
  border-radius: 29px;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  font-size: 16px;
  color: #344D90;
  font-weight: 400;
  text-transform: uppercase;
  margin: auto;
  transition: all 0.3s ease-in-out;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .Add-action .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 10px;
  padding: 2px;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .Add-action:hover {
  background-color: #344D90;
  color: #fafafa;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .Add-action:hover .plus {
  color: #fafafa;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .tags-box {
  background-color: #fafafa;
  padding: 20px;
  height: 70px;
  margin: 30px auto;
  overflow-y: scroll;
  width: 500px;
  position: relative;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .tags-box {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .tags-box {
    width: 230px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .tags-box .p-text {
  background-color: white;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 29px;
  color: #344D90;
  margin-right: 20px;
  margin-bottom: 10px;
  position: relative;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .note-tag {
  opacity: 0;
  padding: 20px;
  text-align: center;
  font-weight: 300;
  color: red !important;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .delete-tag {
  background-color: red;
  border-radius: 100%;
  position: absolute;
  right: -10px;
  top: -10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  cursor: pointer;
  opacity: 0.9;
  height: 20px;
  width: 18px;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .delete-tag .minus {
  margin-left: 1.5px;
  color: white;
  padding: 2px;
  padding-top: 2px;
  font-size: 12px;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .delete-tag:hover {
  opacity: 1;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .trash {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #344D90;
  cursor: pointer;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .tags-input .tag-initial {
  color: gray;
  font-weight: 200;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .speacialsurveytext {
  font-weight: 300;
  font-size: 14px;
  color: gray;
  padding-bottom: 10px;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .warning {
  text-align: center;
  font-weight: 300;
  font-size: 14px;
  color: red;
  padding-bottom: 10px;
  display: none;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .warning a {
  color: #344D90;
  text-decoration: underline;
  cursor: pointer;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-survey-component .hover_bkgr_fricc-study-survey .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-survey-component .modulenameexist {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  color: red;
  font-weight: 400;
}

.cw-gauge--wrapper {
  background-image: url("cw/cw_gauge_bg.svg");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.cw-gauge--wrapper > .cw-gauge--reading-container {
  position: relative;
}
.cw-gauge--wrapper > .cw-gauge--reading-container > div {
  position: absolute;
  color: white;
  height: 150px;
  transform-origin: 50% 100%;
  text-align: center;
  padding-top: 45px;
  top: 10px;
  font-size: 1.6rem;
  left: -37px;
  width: 58px;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0, 1.09, 1, -0.34);
}
.cw-gauge--wrapper > .cw-gauge--reading-container > div.selected {
  top: 5px;
  font-size: 2rem;
}
.cw-gauge--wrapper .cw-gauge--needle {
  background-image: url("cw/cw_gauge_pointer.svg");
  background-repeat: no-repeat;
  position: absolute;
  transition: 0.5s cubic-bezier(1, -0.35, 0.3, 1.4);
  pointer-events: none;
  width: 120px;
  height: 30px;
  top: calc(50% - 0px);
  z-index: 999;
  left: calc(50% - 90px);
  transform: rotate(-30deg);
  transform-origin: 80px 15px;
}
.cw-gauge--wrapper.happiness-meter {
  background-image: url("cw/happiness_meter.svg");
}
.cw-gauge--wrapper.happiness-meter > .cw-gauge--reading-container > div {
  padding-top: 37px;
  top: 18px;
  left: -15px;
}
.cw-gauge--wrapper.happiness-meter > .cw-gauge--needle {
  left: calc(50% - 70px);
  top: calc(50% + 10px);
}

.svd_container .svd_questions_editor .svd_question {
  border-width: 6px;
  border-color: rgba(149, 170, 193, 0.5607843137);
}

.svd_container .svd_questions_editor .svd_question:hover {
  border-color: #344D90;
  border-width: 6px;
}

#surveyElement .cw-gauge--wrapper > .cw-gauge--reading-container > div {
  height: 105px;
}

.survey_response_copy {
  padding: 40px 20px;
}

.sv-completedpage {
  height: auto !important;
}

.sv-completedpage::before {
  display: none;
}

.quiz-question .quiz-choices {
  margin-bottom: 20px;
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quiz-question .quiz-choices.answer-selected .quiz-choice {
  opacity: 0.5;
}
.quiz-question .quiz-choices.answer-selected .quiz-choice.selected-answer {
  opacity: 1;
}
.quiz-question .quiz-choice {
  display: grid;
  place-items: center;
  min-height: 40px;
  width: 30%;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  background: yellow;
  border: 2px solid red;
  border-radius: 8px;
  cursor: pointer;
}
.quiz-question .quiz-choice img {
  width: 100%;
}
.quiz-question .quiz-choice.image-choice {
  border: 0;
  background: transparent;
  padding: 0;
}

.quiz-wrapper .sv-title-actions__title {
  width: 100%;
  height: 50px;
  padding: 10px;
}
.quiz-wrapper .correct-answer {
  color: green;
  border: 2px solid green;
  background: #d4edda;
}
.quiz-wrapper .wrong-answer {
  color: red;
  border: 2px solid red;
  background: #f8d7da;
}
.quiz-wrapper .answer-response {
  display: none;
  font-size: 20px;
  padding: 10px 20px;
  height: 50px;
  width: fit-content;
  border-radius: 4px;
}
.quiz-wrapper.correct-response .correct-answer {
  display: block;
}
.quiz-wrapper.wrong-response .wrong-answer {
  display: block;
}

.blockly-component .hover_bkgr_fricc-study-blockly {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  left: 0;
}
.blockly-component .hover_bkgr_fricc-study-blockly > div {
  background-color: #fff;
  margin: auto;
  margin-top: 20px;
  display: flex;
  height: calc(100vh - 40px);
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.blockly-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .close {
  position: absolute;
  right: 30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .close:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .close .saveicons {
  font-size: 16px;
  padding: 10px;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .close1 {
  right: -30px;
  padding: 0px 2px;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .close2 {
  right: 90px;
  padding: 0px 2px;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .inner-component {
  width: 100%;
  height: calc(100vh - 250px);
  display: flex;
  flex-direction: row;
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .inner-component .blocklyDiv {
  width: 100%;
  height: calc(100vh - 250px);
}
.blockly-component .hover_bkgr_fricc-study-blockly .login-component-box .inner-box .inner-component .categoryControl .blocklyTreeLabel {
  padding: 10px;
}

.open_logic {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
}
.open_logic .code {
  padding-right: 10px;
}

.test-new-study-component .hover_bkgr_fricc-study-comp12 {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 > div {
  background-color: #fff;
  margin: auto;
  margin-top: 5%;
  display: flex;
  width: 800px;
  height: 650px;
  overflow: scroll;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
@media (max-height: 900px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 > div {
    margin-top: 2%;
  }
}
@media (max-width: 800px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 > div {
    width: 90%;
  }
}
.test-new-study-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp .selector {
  width: 100%;
  border: none;
  background-color: #fafafa;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 20px 0px;
  margin-top: 0px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp .selector.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp .rule-point-head {
  padding: 10px;
  padding-top: 0px;
  font-size: 16px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp .rule-point-head span {
  font-weight: 300;
  padding: 0px 10px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .study-comp .rule-point-head_1 {
  padding: 20px 10px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
  margin-bottom: 40px;
}
@media (max-width: 700px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .studyvariablsediv {
  margin-top: 10px;
  margin-bottom: 20px;
  border: 1px solid rgb(221, 221, 221);
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .studyvariablsediv table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .studyvariablsediv td, .test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .studyvariablsediv th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box .studyvariablsediv input {
  padding: 5px 10px;
  border: none;
  background-color: #fafafa;
  border-radius: 5px;
  width: 100px;
}
.test-new-study-component .hover_bkgr_fricc-study-comp12 .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.create-new-addsite-component .hover_bkgr_fricc-addsite-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 95%;
  max-height: 900px;
  max-width: 1200px;
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-addsite-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp select {
  width: 540px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .search-box {
  max-width: 500px;
  margin: auto;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 40px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers td,
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers td .edit-user,
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers td .edit-user:hover,
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .groupheading {
  font-size: 20px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .restksb {
  text-align: left;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .noreesarchers {
  text-align: center;
  color: gray;
  font-weight: 300;
  padding: 40px;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-addsite-component .hover_bkgr_fricc-addsite-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-addsite-component .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
  margin-top: 50px;
}
.create-new-addsite-component .pagination_view .chev {
  cursor: pointer;
}
.create-new-addsite-component .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.create-new-addsite-component .pagination_view .pre {
  z-index: 100;
}
.create-new-addsite-component .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.create-new-addsite-component .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.create-new-addsite-component .plus {
  cursor: pointer;
}
.create-new-addsite-component .plus:hover {
  color: #344D90;
}

.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp > div {
  background-color: #fff;
  margin: auto;
  margin: auto;
  display: flex;
  height: 90%;
  max-height: 1000px;
  max-width: 1400px;
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-reasearchersgroup-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
  position: relative;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box {
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .activecheckbox {
  height: 25px;
  margin-left: auto;
  margin-right: 20px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .activecheckbox p {
  transform: translateY(-14px) !important;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 20px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box button:hover {
  opacity: 1;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .closepop1 {
  right: 120px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .filterbox {
  display: flex;
  flex-direction: row;
  width: 300px;
  justify-content: space-evenly;
  position: absolute;
  left: 20px;
  padding: 10px;
  top: 20px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .search-box .filterbox input {
  max-width: 100px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers td,
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers td .edit-user,
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers td .edit-user:hover,
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
  margin-top: 50px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view .chev {
  cursor: pointer;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view .pre {
  z-index: 100;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .noreesarchers {
  text-align: center;
  color: gray;
  font-weight: 300;
  padding: 40px;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-reasearchersgroup-component .hover_bkgr_fricc-researchersgroup-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-reasearchersgroup-component .plus {
  cursor: pointer;
}
.create-new-reasearchersgroup-component .plus:hover {
  color: #344D90;
}

.container-checkbox1 {
  transform: translate(40px, -7px);
}

.container-checkbox12 {
  transform: translate(40px, -10px) !important;
}

.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 > div {
  background-color: #fff;
  margin: auto;
  margin: auto;
  display: flex;
  height: 90%;
  max-height: 1000px;
  max-width: 1400px;
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-siteadmintosite-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
  position: relative;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box {
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 20px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box button:hover {
  opacity: 1;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box .closepop1 {
  right: 120px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box .filterbox {
  display: flex;
  flex-direction: row;
  width: 300px;
  justify-content: space-evenly;
  position: absolute;
  left: 20px;
  padding: 10px;
  top: 20px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .search-box .filterbox input {
  max-width: 100px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers td,
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers td .edit-user,
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers td .edit-user:hover,
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
  margin-top: 50px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view .chev {
  cursor: pointer;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view .pre {
  z-index: 100;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .noreesarchers {
  text-align: center;
  color: gray;
  font-weight: 300;
  padding: 40px;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-siteadmintosite-component .hover_bkgr_fricc-researchersgroup-comp1 .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-siteadmintosite-component .plus {
  cursor: pointer;
}
.create-new-siteadmintosite-component .plus:hover {
  color: #344D90;
}

.container-checkbox1 {
  transform: translate(40px, -7px);
}

.container-checkbox12 {
  transform: translate(40px, -10px) !important;
}

.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 95%;
  max-height: 900px;
  max-width: 1200px;
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-assigngroups-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .search-box {
  max-width: 500px;
  margin: auto;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 40px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers td,
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers td .edit-user,
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers td .edit-user:hover,
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .groupheading {
  font-size: 20px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .restksb {
  text-align: left;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .noreesarchers {
  text-align: center;
  color: gray;
  font-weight: 300;
  padding: 40px;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-assigngroups-component .hover_bkgr_fricc-assigngroups-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-assigngroups-component .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
  margin-top: 50px;
}
.create-new-assigngroups-component .pagination_view .chev {
  cursor: pointer;
}
.create-new-assigngroups-component .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.create-new-assigngroups-component .pagination_view .pre {
  z-index: 100;
}
.create-new-assigngroups-component .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.create-new-assigngroups-component .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.create-new-assigngroups-component .plus {
  cursor: pointer;
}
.create-new-assigngroups-component .plus:hover {
  color: #344D90;
}

.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp > div {
  background-color: #fff;
  margin: auto;
  margin: auto;
  display: flex;
  height: 90%;
  max-height: 1000px;
  max-width: 1400px;
  width: 90%;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-assignsiteadmin-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
  position: relative;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box {
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 20px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box button:hover {
  opacity: 1;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box .closepop1 {
  right: 120px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box .filterbox {
  display: flex;
  flex-direction: row;
  width: 300px;
  justify-content: space-evenly;
  position: absolute;
  left: 20px;
  padding: 10px;
  top: 20px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .search-box .filterbox input {
  max-width: 100px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers td,
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers td .edit-user,
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers td .edit-user:hover,
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
  margin-top: 50px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view .chev {
  cursor: pointer;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view .pre {
  z-index: 100;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .noreesarchers {
  text-align: center;
  color: gray;
  font-weight: 300;
  padding: 40px;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-assignsiteadmin-component .hover_bkgr_fricc-assignsiteadmin-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-assignsiteadmin-component .plus {
  cursor: pointer;
}
.create-new-assignsiteadmin-component .plus:hover {
  color: #344D90;
}

.container-checkbox1 {
  transform: translate(40px, -7px);
}

.container-checkbox12 {
  transform: translate(40px, -10px) !important;
}

.worry-level-container {
  width: 200px;
  height: 100px;
  border: 1px solid #ddd;
  margin: 5px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.worry-level-container .worry-level-bars {
  position: relative;
  height: 60px;
  cursor: pointer;
}
.worry-level-container .worry-level-bars .worry-level {
  position: absolute;
  bottom: 0;
  background: #668899;
  width: 12px;
  border-radius: 2px 2px 0 0;
}
.worry-level-container .worry-level-bars .worry-level.level-1 {
  height: 10%;
  left: 30px;
}
.worry-level-container .worry-level-bars .worry-level.level-1.active, .worry-level-container .worry-level-bars .worry-level.level-1.hover {
  background-color: #99ba1d;
}
.worry-level-container .worry-level-bars .worry-level.level-2 {
  height: 20%;
  left: 45px;
}
.worry-level-container .worry-level-bars .worry-level.level-2.active, .worry-level-container .worry-level-bars .worry-level.level-2.hover {
  background-color: #99ba1d;
}
.worry-level-container .worry-level-bars .worry-level.level-3 {
  height: 30%;
  left: 60px;
}
.worry-level-container .worry-level-bars .worry-level.level-3.active, .worry-level-container .worry-level-bars .worry-level.level-3.hover {
  background-color: #bbc431;
}
.worry-level-container .worry-level-bars .worry-level.level-4 {
  height: 40%;
  left: 75px;
}
.worry-level-container .worry-level-bars .worry-level.level-4.active, .worry-level-container .worry-level-bars .worry-level.level-4.hover {
  background-color: #efcd0d;
}
.worry-level-container .worry-level-bars .worry-level.level-5 {
  height: 50%;
  left: 90px;
}
.worry-level-container .worry-level-bars .worry-level.level-5.active, .worry-level-container .worry-level-bars .worry-level.level-5.hover {
  background-color: #ecb51d;
}
.worry-level-container .worry-level-bars .worry-level.level-6 {
  height: 60%;
  left: 105px;
}
.worry-level-container .worry-level-bars .worry-level.level-6.active, .worry-level-container .worry-level-bars .worry-level.level-6.hover {
  background-color: #ef930c;
}
.worry-level-container .worry-level-bars .worry-level.level-7 {
  height: 70%;
  left: 120px;
}
.worry-level-container .worry-level-bars .worry-level.level-7.active, .worry-level-container .worry-level-bars .worry-level.level-7.hover {
  background-color: #ef520B;
}
.worry-level-container .worry-level-bars .worry-level.level-8 {
  height: 80%;
  left: 135px;
}
.worry-level-container .worry-level-bars .worry-level.level-8.active, .worry-level-container .worry-level-bars .worry-level.level-8.hover {
  background-color: #ce4001;
}
.worry-level-container .worry-level-bars .worry-level.level-9 {
  height: 90%;
  left: 150px;
}
.worry-level-container .worry-level-bars .worry-level.level-9.active, .worry-level-container .worry-level-bars .worry-level.level-9.hover {
  background-color: #ce4001;
}
.worry-level-container .worry-level-bars .worry-level.level-10 {
  height: 100%;
  left: 165px;
}
.worry-level-container .worry-level-bars .worry-level.level-10.active, .worry-level-container .worry-level-bars .worry-level.level-10.hover {
  background: #a63300;
}

.clinician-dashboard {
  margin-top: 30px;
  margin-left: 10px;
}
.clinician-dashboard .clinician-dashboard-greeting {
  color: #0A4C98;
  font-size: 48px;
  font-weight: bold;
}
.clinician-dashboard .globalinput.searchmodule {
  border: 1px solid #ddd;
  margin-bottom: 0;
}
.clinician-dashboard .participants-list {
  text-align: center;
  width: 99%;
  margin-top: 20px;
  border-spacing: 0px;
}
.clinician-dashboard .participants-list tr {
  height: 40px;
}
.clinician-dashboard .participants-list td, .clinician-dashboard .participants-list th {
  border: 1px solid #ddd;
}
.clinician-dashboard .participants-list tbody tr:nth-child(even) {
  background: #fafafa;
}
.clinician-dashboard .participants-list tbody a {
  color: #98B3CE;
}
.clinician-dashboard .view-as-link {
  cursor: pointer;
}

.side-panel {
  right: 0;
  top: 0;
  width: 500px;
  height: 100%;
  position: fixed;
  background: #fff;
  overflow-y: scroll;
  border-left: 1px solid #ddd;
  z-index: 205;
  box-shadow: -10px 0px 19px -6px #aaaaaa;
  font-family: "Fredoka-One";
}
.side-panel.blue-background {
  background: #7CACEA;
}
.side-panel .side-panel-title {
  font-size: 32px;
  font-weight: bold;
  height: 35px;
  color: var(--primary-color-3);
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.side-panel .side-panel-title svg {
  cursor: pointer;
  font-size: 20px;
  color: red;
}
.side-panel .side-panel-title.example-category {
  height: auto;
}
.side-panel .side-panel-title .example-category-button {
  width: 60%;
  height: auto;
  margin: 0;
}
.side-panel .side-panel-body {
  padding: 30px;
}
.side-panel .side-panel-body .description-section {
  width: 90%;
  margin: auto;
  padding: 20px;
  text-align: justify;
  background: #fff;
}
.side-panel .side-panel-body .description-section ol {
  margin-left: 40px;
}
.side-panel .side-panel-body .description-section h4 {
  text-align: center;
  margin: 20px 0;
}
.side-panel .example-category-button {
  width: 90%;
  text-align: center;
  padding: 10px;
  margin: 10px auto;
  color: #fff;
  font-size: 24px;
  background: var(--menu-color-1);
  cursor: pointer;
}
.side-panel .examples-list {
  margin-top: 40px;
}
.side-panel .AccordionItem {
  margin: 20px 20px;
  margin-right: 30px;
  width: 90%;
}
.side-panel .AccordionToggle {
  display: flex;
  justify-content: stretch;
  background: #ddd;
  border-radius: 0px 40px;
  padding: 20px;
}
.side-panel .AccordionToggle .accordion-title {
  display: inline-block;
  color: var(--menu-color-1);
}
.side-panel .AccordionToggle .span-angle {
  display: inline-block;
  margin-left: auto;
}
.side-panel .AccordionToggle.is-active .span-angle {
  transform: rotate(90deg);
}
.side-panel .AccordionPanel {
  margin-left: 50px;
  background: rgba(255, 255, 255, 0.4);
}
.side-panel .AccordionPanel .accordion-body-title {
  color: var(--menu-color-3);
  font-size: 16px;
  font-weight: bold;
}
.side-panel .AccordionPanel .help-text {
  padding: 10px;
  font-size: 14px;
}
.side-panel .AccordionPanel .example-step {
  background: #f5f5f5;
  border: 1px solid #888;
  margin: 10px 2%;
  padding: 10px;
  display: flex;
  cursor: move;
}
.side-panel .AccordionPanel .example-step .drag-drop-handle {
  width: 30px;
}

.study-container {
  padding: 10px !important;
}

.study-overview-container {
  padding-top: 10px !important;
  height: calc(100vh - 240px);
  overflow: hidden;
}

.study-builder-top {
  padding: 10px !important;
}
.study-builder-top .page-heading {
  font-size: 30px;
}

.part-builder-component {
  width: 90%;
  margin: auto;
  background-color: white;
  border-radius: 20px;
  padding-top: 10px;
  height: calc(100vh - 200px);
  margin-top: 50px;
  position: relative;
}
@media (max-width: 500px) {
  .part-builder-component {
    width: 95%;
  }
}
.part-builder-component .note {
  text-align: center;
  margin: 30% auto;
  font-weight: 300;
  opacity: 0.6;
}
.part-builder-component .scrollable-component {
  max-width: calc(100vw - 300px);
  height: 100%;
  overflow: scroll;
}

.each-part-component {
  display: flex;
  flex-direction: row;
  min-width: 100%;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  overflow-x: clip;
}

.module-container {
  height: 180px;
  padding: 20px;
  width: 250px;
  border: 2px solid #e9e9e9;
  border-radius: 10px;
  position: relative;
}
.module-container .inner-module-container {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #fafafa;
  border-radius: 10px;
}
.module-container .text {
  text-align: center;
  opacity: 0.2;
  position: absolute;
  left: 30%;
  bottom: 110px;
}
.module-container .container-buttons {
  background-color: #344D90;
  position: absolute;
  color: white;
  padding: 4px 9.5px;
  padding-top: 6px;
  border-radius: 100%;
  left: 45%;
  bottom: 8px;
  cursor: pointer;
  transition: 0.3s all ease;
}
.module-container .container-buttons .ang-icon {
  font-size: 20px;
}
.module-container .container-buttons:hover {
  opacity: 0.9;
}
.module-container .alreadyupdated-button {
  background-color: #344D90;
  position: absolute;
  color: white;
  padding: 5px 10px;
  padding-top: 6px;
  left: 43%;
  bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s all ease;
  display: none;
}
.module-container .alreadyupdated-button .ang-icon {
  font-size: 20px;
}
.module-container .alreadyupdated-button:hover {
  opacity: 0.9;
}

.trigger-point {
  display: none;
  background-color: #f5f5f5;
  width: 100%;
  border-radius: 10px;
  margin-top: 20px;
  position: relative;
}
.trigger-point .head-text {
  padding: 20px;
  color: gray;
}
.trigger-point .input-div {
  display: flex;
  flex-direction: row;
}
.trigger-point .trigger-create-button {
  background-color: #344D90;
  display: inline-block;
  height: 24px;
  width: 30px;
  color: white;
  padding-top: 6px;
  border-radius: 100%;
  cursor: pointer;
  transition: 0.3s all ease;
}
.trigger-point .trigger-create-button .ang-icon {
  font-size: 18px;
  margin-left: 7px;
  margin-top: 1px;
}
.trigger-point .trigger-create-button:hover {
  opacity: 0.9;
}
.trigger-point .trigger-points-input {
  width: 170px;
  border: none;
  background-color: white;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 20px;
  margin-top: 0px;
}
.trigger-point .selector {
  width: 253px;
  border: none;
  background-color: white;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 20px;
  margin-top: 0px;
}

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

.each-trigger-point {
  position: relative;
}

.rank {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 5;
  font-size: 40px;
}

.each-trigger-point {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 50px;
}

.controll-center {
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 2;
}
.controll-center .edit-button {
  text-align: center;
  margin-bottom: 20px;
  color: #344D90;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.controll-center .edit-button:hover {
  background-color: #344D90;
  color: white;
}

.zoom {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 10px 5px;
}
.zoom .each-button {
  background-color: #344D90;
  color: white;
  font-size: 12px;
  padding: 8px;
  border-radius: 100%;
  margin: 10px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.zoom .each-button:hover {
  opacity: 0.9;
}
.zoom .percentage {
  font-size: 12px;
  text-align: center;
}

.line {
  position: absolute;
  height: 2px;
  background-color: black;
  z-index: 10;
}

.bottom-point {
  height: 10px;
  width: 100%;
  margin: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.top-point {
  height: 10px;
  width: 100%;
  margin: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.bottom-arrow {
  position: absolute;
  left: 45%;
  bottom: -30px;
  right: auto;
  display: none;
}
.bottom-arrow .arrow-icon {
  font-size: 25px;
}

.delete-triggerpoint {
  background-color: red;
  color: white;
  position: absolute;
  top: -20px;
  right: 30px;
  padding: 4px 5px;
  border-radius: 100%;
  font-size: 14px;
  cursor: pointer;
}

.add-triggerpoint {
  background-color: greenyellow;
  color: white;
  position: absolute;
  top: -20px;
  right: 30px;
  padding: 4px 5px;
  border-radius: 100%;
  font-size: 14px;
  cursor: pointer;
}

.change-text-module {
  display: none;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  font-size: 16px;
  opacity: 3;
  cursor: pointer;
  transition: 0.3s all ease;
  font-weight: 400;
  background-color: #fafafa;
}
.change-text-module:hover {
  color: #344D90;
}

.left-study-choice {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  margin: 20px 0px;
  margin-top: 0px;
}
.left-study-choice span {
  padding: 10px 10px;
  border-radius: 10px;
  width: 33%;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}
.left-study-choice .shadow, .left-study-choice .shadow1, .left-study-choice .shadow2 {
  background-color: #344D90;
  height: 100%;
  width: 33%;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.left-study-choice .shadow2 {
  width: 50%;
}
.left-study-choice .tree, .left-study-choice .rules {
  color: white;
}

.left-study-choice1 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  margin: 20px auto;
  width: 260px;
}
.left-study-choice1 span {
  padding: 7px 10px;
  border-radius: 10px;
  width: 33.3%;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}
.left-study-choice1 .shadow3 {
  background-color: #344D90;
  height: 100%;
  width: 33%;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.left-study-choice1 .shadow3 {
  width: 33.3%;
}
.left-study-choice1 .study {
  color: white;
}

.centre-choice {
  max-width: 400px;
  margin: 10px auto;
}

.study-heading {
  font-weight: 400;
  font-size: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ececec;
}

.study-analytics-component .no-copy {
  text-align: center;
  padding: 50px 20px;
}
.study-analytics-component .modules-comm {
  transform: translateY(-20px);
  overflow-y: scroll;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  max-height: calc(100vh - 420px);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.study-analytics-component .modules-comm.rules-comm {
  transform: none;
}
.study-analytics-component .modules-comm .each-module-survey {
  height: 70px;
  padding: 20px;
  width: 250px !important;
  border-radius: 10px;
  position: relative;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin: 10px auto;
  cursor: move;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .study-analytics-component .modules-comm .each-module-survey {
    margin-right: 0px;
  }
}
.study-analytics-component .modules-comm .each-module-survey .left-side-1 {
  width: 200px;
  position: relative;
}
.study-analytics-component .modules-comm .each-module-survey .left-side-1 .rule-id {
  font-size: 10px;
  opacity: 0.9;
}
.study-analytics-component .modules-comm .each-module-survey .left-side-1 .descp {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: #344D90;
}
.study-analytics-component .modules-comm .each-module-survey .left-side-1 .module-description {
  font-weight: 100;
  font-size: 12px;
  padding-top: 5px;
}
.study-analytics-component .modules-comm .each-module-survey .right-side-1 {
  width: 40px;
  height: 110%;
  background-color: #344D90;
  transform: translate(10px, -7px);
  border-radius: 29px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 0px;
}
.study-analytics-component .modules-comm .each-module-survey .right-side-1 .each-buttons {
  margin: auto;
  position: relative;
}
.study-analytics-component .modules-comm .each-module-survey .right-side-1 .each-buttons .right-side-icon {
  color: #fafafa;
  font-size: 14px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.study-analytics-component .modules-comm .each-module-survey .right-side-1 .each-buttons .right-side-icon:hover {
  opacity: 1;
}
.study-analytics-component .modules-comm .each-rule {
  height: 20px;
  background-color: rgba(50, 96, 205, 0.2901960784);
}
.study-analytics-component .modules-comm .each-rule .descp {
  font-weight: 400 !important;
}
.study-analytics-component .modules-comm .each-rule .right-side-1 {
  height: 25px !important;
  border-radius: 100% !important;
  width: 25px !important;
  transform: translate(10px, -7px);
  padding: 4px !important;
}
.study-analytics-component .modules-comm .each-rule .right-side-1 .right-side-icon {
  font-size: 14px !important;
}
.study-analytics-component .modules-comm::-webkit-scrollbar {
  display: none;
}

.loadbutton {
  width: 300px;
  margin: 20px auto;
  background-color: #fafafa;
  text-align: center;
  padding: 7px 10px;
  cursor: pointer;
  color: #344D90;
  transition: all 0.3s ease-in-out;
}
.loadbutton:hover {
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}

.left-study, .right-side1 {
  height: calc(100vh - 255px) !important;
  max-height: 100vh !important;
  position: relative;
}
.left-study .searchandadd, .right-side1 .searchandadd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transform: translateY(-20px);
}
.left-study .searchandadd.rule-search, .right-side1 .searchandadd.rule-search {
  transform: none;
}
.left-study .searchandadd.rule-search input, .right-side1 .searchandadd.rule-search input {
  margin: 10px 0;
}
.left-study .searchandadd .searchmodule, .right-side1 .searchandadd .searchmodule {
  width: 100%;
  background-color: #fafafa;
}
.left-study .searchandadd .add-bttn, .right-side1 .searchandadd .add-bttn {
  background-color: #344D90;
  border-radius: 100%;
  display: inline-block;
  height: 35px;
  width: 35px;
  cursor: pointer;
  margin: 30px 0px;
}
.left-study .searchandadd .add-bttn .add-bttn-icon, .right-side1 .searchandadd .add-bttn .add-bttn-icon {
  padding: 10px 11px;
  color: #fafafa;
}

.tree-component {
  height: calc(100vh - 370px) !important;
  padding: 10px 0px;
}
.tree-component .initial-study {
  width: 180px;
  height: 100px;
  background-color: rgba(12, 12, 13, 0.2);
  opacity: 0.8;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin: 0px auto;
  margin-bottom: 20px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  position: relative;
}
.tree-component .initial-study:hover {
  box-shadow: 1px 1px 10px #344D90;
}
.tree-component .initial-study .checkbox {
  display: none;
  position: absolute;
  font-size: 10px;
  right: 0px;
  top: 0px;
  height: 100px;
  width: 180px;
  border: 1px solid #344D90;
  opacity: 0.7;
  border-radius: 5px;
}
.tree-component .initial-study .study-name {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  color: #03164A;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  line-break: auto;
  padding: 4px;
  line-height: 1.5em;
}
.tree-component .study-arms-phases {
  display: flex;
  flex-direction: row;
  overflow: auto;
  width: 100%;
  padding: 20px 0px;
  height: calc(100% - 150px);
}
.tree-component .child-node {
  margin: 0px 10px;
  margin-bottom: 40px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.tree-component .child-node:hover {
  box-shadow: 1px 1px 10px #344D90;
}
.tree-component .study-down-arrow {
  position: absolute;
  left: 85px;
  bottom: -30px;
}
.tree-component .chev-down {
  color: #344D90;
}
.tree-component .columns {
  margin: 0px auto;
}

.left-tree-asset-button {
  top: calc(55vh - 20px);
  z-index: 7;
  left: 0px;
  display: none;
  background-color: #344D90;
  color: white;
  border-bottom-right-radius: 29px;
  border-top-right-radius: 29px;
  padding: 12px 20px;
  position: fixed;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s all ease;
}
@media (max-width: 500px) {
  .left-tree-asset-button {
    right: 20px;
  }
}
.left-tree-asset-button:hover {
  padding-left: 50px;
}

.select_part_from_menu {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 18px;
  font-weight: 300;
}

.attachnodediv {
  background-color: white;
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  border: 2px solid #e9e9e9 !important;
  box-shadow: 1px 1px 10px #e4e3e3;
  position: relative;
}
.attachnodediv button {
  padding: 5px 20px;
  margin: 10px 20px;
  background-color: #344D90;
  border-radius: 29px;
  text-align: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
  border-color: #344D90;
}
.attachnodediv button:hover {
  opacity: 1;
}
.attachnodediv input {
  margin: auto;
  width: calc(100% - 40px);
  background-color: #fafafa;
  margin-bottom: 10px;
  font-size: 16px;
  padding: 5px !important;
  margin-top: 5px;
  border: 1px solid rgba(52, 77, 144, 0.2);
  text-align: center;
}
.attachnodediv .hd {
  text-align: center;
  font-size: 16px;
  color: #344D90;
  padding-bottom: 5px !important;
  padding-top: 10px;
}
.attachnodediv .copy {
  text-align: center;
  font-size: 12px;
  padding: 10px 0px;
  padding-bottom: 5px !important;
}
.attachnodediv .hd3 {
  display: none;
  position: absolute;
  right: 5px;
  top: 5px;
  text-transform: uppercase;
  font-size: 10px;
  color: #344D90;
}

.action-component {
  position: relative;
  margin: 20px auto;
}
.action-component .Add-action {
  background-color: #fafafa;
  width: 16px;
  height: 16px;
  padding: 6px;
  padding-top: 5px;
  padding-bottom: 8px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  transition: all 0.3s ease-in-out;
}
.action-component .Add-action .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 1px;
}
.action-component .Add-action:hover {
  background-color: #344D90;
}
.action-component .Add-action:hover .plus {
  color: #fafafa;
}
.action-component .choose-option {
  background-color: #fafafa;
  width: 300px;
  margin: 20px auto;
  padding-bottom: 10px;
  border-radius: 10px;
  display: none;
  position: relative;
}
.action-component .choose-option .option-text {
  padding: 10px 10px;
  text-align: center;
  font-weight: 400;
}
.action-component .choose-option .option-button {
  padding: 5px 20px;
  margin: 10px 20px;
  background-color: #344D90;
  border-radius: 29px;
  text-align: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.action-component .choose-option .option-button:hover {
  opacity: 1;
}
.action-component .choose-option .close-option {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #344D90;
  cursor: pointer;
}

.right-side {
  height: calc(100vh - 255px);
}
.right-side .creative-box {
  width: 100%;
  position: relative;
}
.right-side .module-survey-container {
  width: 250px;
  height: 150px;
  background-color: #fafafa;
  position: absolute;
}
.right-side .fld {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#chart_div {
  width: 100%;
  height: calc(100% - 565px);
  overflow: scroll;
  padding-top: 30px;
  padding-bottom: 500px;
  overflow-x: scroll !important;
}
#chart_div .inner-module-container {
  position: relative;
  width: 100%;
  height: 100px !important;
  background-color: #fafafa;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  margin: 10px 0px !important;
}

.google-visualization-orgchart-node {
  width: 230px !important;
  border: none !important;
  background: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  position: relative;
}

.google-visualization-orgchart-table {
  margin-left: auto;
  margin-right: auto;
}

.choose-option1 {
  background-color: #fafafa;
  width: 300px;
  margin: 20px auto;
  margin-top: 50px !important;
  margin-left: -45% !important;
  padding-bottom: 10px;
  border-radius: 10px;
  display: none;
  position: relative;
  z-index: 100;
}
.choose-option1 .option-text {
  padding: 10px 10px;
  text-align: center;
  font-weight: 400;
}
.choose-option1 .option-button {
  padding: 5px 20px;
  margin: 10px 20px;
  background-color: #344D90;
  border-radius: 29px;
  text-align: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.choose-option1 .option-button:hover {
  opacity: 1;
}
.choose-option1 .close-option {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #344D90;
  cursor: pointer;
}

.action-component1 {
  position: absolute;
  top: 220px;
  margin-left: 46% !important;
}
.action-component1 .addbutton-1 {
  position: absolute !important;
  transform: translateX(-40%) !important;
}
.action-component1 .addbutton-1 p {
  transform: translateX(7px);
}
.action-component1 .option-button {
  padding: 7px 0px !important;
}
.action-component1 .option-text {
  padding: 10px 10px !important;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
}
.action-component1 .close-option-1 {
  font-size: 18px;
  text-transform: uppercase;
}

.add-survey-div {
  height: 200px;
  background-color: white;
  border: 2px solid #e9e9e9 !important;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  background: white !important;
  position: relative !important;
}
.add-survey-div .add-survey-head {
  color: #344D90;
  font-size: 16px;
  height: 2px;
  padding: 8px 0px;
  padding-bottom: 30px;
  text-align: center;
}
.add-survey-div .add-survey-head1 {
  padding-top: 10px;
  background-color: rgba(52, 77, 144, 0.3);
  color: white;
  cursor: pointer;
}
.add-survey-div .drag-text {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 160px;
  top: 30%;
  text-align: center;
  font-size: 15px !important;
  font-weight: bold;
}
.add-survey-div .addsurvey-drag {
  background-color: #fafafa;
  height: 82px;
  cursor: pointer;
}
.add-survey-div .addsurvey-drag .drag-text {
  font-size: 15px !important;
  line-break: anywhere;
}
.add-survey-div .continuenode {
  display: flex;
  float: left;
  width: 80px;
  margin: auto;
  margin-top: 2.5px;
  flex-direction: row;
  padding: 5px;
  justify-content: space-around;
}
.add-survey-div .continuenode input {
  margin: 2px;
}
.add-survey-div .continuenode p {
  font-size: 12px;
}
.add-survey-div .delaynode {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: auto;
  float: right;
}
.add-survey-div .delaynode input {
  margin: 2px;
  width: 50px;
}
.add-survey-div .delaynode p {
  margin-right: 2px;
  margin-top: 3px;
}

.add-survey-div11 .addsurvey-drag {
  background-color: rgba(206, 121, 30, 0.41);
}

.add-survey-div12 .addsurvey-drag {
  background-color: rgba(52, 172, 150, 0.23);
}

.each-module-survey11 {
  background-color: rgba(206, 121, 30, 0.41) !important;
}

.each-module-survey12 {
  background-color: rgba(52, 172, 150, 0.23) !important;
}

.google-visualization-orgchart-linebottom {
  border-bottom: 1px solid #344D90 !important;
}

.google-visualization-orgchart-lineleft {
  border-left: 1px solid #344D90 !important;
}

.google-visualization-orgchart-lineright {
  border-right: 1px solid #344D90 !important;
}

.testing {
  height: 100px;
  background-color: #fafafa;
}

.addssign {
  position: absolute;
  background-color: #344D90;
  width: 20px;
  top: 230px;
  left: 118px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  background-image: url("../assets/plus.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.addssign .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 1px;
}
.addssign:hover {
  opacity: 1;
}

.editssign {
  position: absolute;
  background-color: #344D90;
  width: 20px;
  top: 230px;
  left: 118px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  background-image: url("../assets/edit.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.editssign .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 1px;
}
.editssign:hover {
  opacity: 1;
}

.all-variables {
  height: calc(100vh - 480px);
  overflow-y: scroll;
  transform: translateY(-20px);
}
.all-variables .each-variable {
  padding: 5px 10px;
  background-color: #fafafa;
  font-size: 18px;
  font-weight: 100;
  border-radius: 10px;
  margin-top: 5px;
}
.all-variables .each-variable span {
  padding-left: 10px;
}
.all-variables .each_variable_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: #fafafa;
  margin-bottom: 5px;
  border-radius: 10px;
}
.all-variables .each_variable_div button {
  display: block;
  background-color: #344D90;
  border: none;
  height: 30px;
  border-radius: 100%;
  width: 30px;
  margin: 5px;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.all-variables .each_variable_div button .edit_icon {
  color: white;
}
.all-variables .each_variable_div button:hover {
  opacity: 1;
}

.all-variables-traking {
  height: 350px !important;
}

.variable_edit_box {
  background-color: #fafafa;
  margin-bottom: 20px;
  padding: 20px;
  padding-top: 40px;
  position: relative;
  display: none;
}
.variable_edit_box .close_icon_div {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.variable_edit_box .close_icon_div:hover {
  opacity: 1;
}
.variable_edit_box input {
  margin: 0px !important;
  width: calc(100% - 40px);
}
.variable_edit_box .edit_buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.variable_edit_box p {
  font-weight: 300;
  font-size: 14px;
  padding: 10px 10px;
}
.variable_edit_box button {
  display: block;
  background-color: #344D90;
  border: none;
  height: 30px;
  border-radius: 100%;
  width: 30px;
  margin: 5px;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.variable_edit_box button .edit_icon {
  color: white;
}
.variable_edit_box button:hover {
  opacity: 1;
}

.all-variables-1 {
  height: calc(100vh - 420px);
}
.all-variables-1 .each-module-survey {
  height: 70px;
  padding: 20px;
  width: 250px !important;
  border-radius: 10px;
  position: relative;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin: 10px auto;
  cursor: move;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .all-variables-1 .each-module-survey {
    margin-right: 0px;
  }
}
.all-variables-1 .each-module-survey .left-side-1 {
  width: 200px;
  position: relative;
}
.all-variables-1 .each-module-survey .left-side-1 .descp {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: #344D90;
}
.all-variables-1 .each-module-survey .left-side-1 .module-description {
  font-weight: 100;
  font-size: 12px;
  padding-top: 5px;
}
.all-variables-1 .each-module-survey .right-side-1 {
  width: 40px;
  height: 110%;
  background-color: #344D90;
  transform: translate(10px, -7px);
  border-radius: 29px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 0px;
}
.all-variables-1 .each-module-survey .right-side-1 .each-buttons {
  margin: auto;
  position: relative;
}
.all-variables-1 .each-module-survey .right-side-1 .each-buttons .right-side-icon {
  color: #fafafa;
  font-size: 14px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.all-variables-1 .each-module-survey .right-side-1 .each-buttons .right-side-icon:hover {
  opacity: 1;
}
.all-variables-1 .each-rule {
  height: 20px;
}
.all-variables-1 .each-rule .descp {
  font-weight: 400 !important;
}
.all-variables-1 .each-rule .right-side-1 {
  height: 25px !important;
  border-radius: 100% !important;
  width: 25px !important;
  transform: translate(10px, -7px);
  padding: 4px !important;
}
.all-variables-1 .each-rule .right-side-1 .right-side-icon {
  font-size: 14px !important;
}

.variable-in-study {
  margin: 10px 0;
}

.createvariable {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transform: translateY(-15px);
}
.createvariable .search-assets {
  width: calc(100% - 100px);
  border: none;
  background-color: #fafafa;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 0px;
}
.createvariable .top-menu-button {
  margin-top: 33px;
  width: 20px;
  height: 20px;
  padding: 7px 7px;
  text-align: center;
  background-color: #fafafa;
  color: #344D90;
  border: none;
  border-radius: 100%;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  bottom: 10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.createvariable .top-menu-button:hover {
  opacity: 0.9;
  background-color: #344D90;
  color: #fafafa;
}
.createvariable .top-menu-button .icr {
  font-size: 16px;
}

.addbutton-1 {
  background-color: #fafafa;
  width: 30px;
  border-radius: 100%;
  border: none;
  color: #344D90;
  transform: translate(130px);
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  transition: all 0.3s ease-in-out;
}
.addbutton-1 p {
  font-size: 25px;
  font-weight: 500;
  padding: 0px !important;
  margin-left: -12px;
}
.addbutton-1:hover {
  background-color: #344D90;
}
.addbutton-1:hover p {
  color: #fafafa;
}

.addbranches {
  padding-top: 10px !important;
  background-color: white;
  border: 2px solid #e9e9e9 !important;
  box-shadow: 1px 1px 10px rgb(228, 227, 227) !important;
  background: white !important;
  border-radius: 10px !important;
  text-align: center;
}
.addbranches .branch-head {
  text-align: center;
  font-size: 14px;
  color: #344D90;
  padding-bottom: 5px !important;
}
.addbranches input {
  width: calc(100% - 40px);
  background-color: #fafafa;
  margin-bottom: 20px;
  font-size: 16px;
  padding: 5px !important;
  border: 1px solid rgba(52, 77, 144, 0.2) !important;
  text-align: center;
}
.addbranches .globalbutton {
  padding: 5px !important;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}
.addbranches .add-survey-head {
  color: #344D90;
  font-size: 16px;
  padding: 10px 0px;
  background-color: rgba(52, 77, 144, 0.3);
  color: white;
  cursor: pointer;
  margin-top: 12px;
}

.action-component2 {
  top: 0px !important;
}

.pipleline {
  color: #344D90;
}

.show-create-arm-poup .hover_bkgr_fricc-popup {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.show-create-arm-poup .hover_bkgr_fricc-popup > div {
  background-color: #fff;
  margin: auto;
  margin-top: 15%;
  display: flex;
  height: 90%;
  max-height: 300px;
  width: 800px;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
@media (max-width: 800px) {
  .show-create-arm-poup .hover_bkgr_fricc-popup > div {
    width: 90%;
  }
}
.show-create-arm-poup .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .head {
  margin: 10px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .study-comp .phase-title12 {
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  padding-bottom: 20px;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .buttons-box {
  display: flex;
  flex-direction: row;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .update-button {
  width: 300px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.show-create-arm-poup .hover_bkgr_fricc-popup .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.clear_tree {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #344D90;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s all ease;
  opacity: 0.8;
  font-weight: 500;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  padding: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: white;
  z-index: 10;
}
.clear_tree:hover {
  opacity: 1;
  color: white;
  background-color: #344D90;
}

.clear_tree_1 {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  color: #344D90;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s all ease;
  opacity: 0.8;
  font-weight: 500;
  height: 20px;
  border-top: none;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.clear_tree_1:hover {
  opacity: 1;
}

.noeventsavailable {
  font-size: 14px;
  font-weight: 300;
  color: gray;
  text-transform: uppercase;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin: 100px 0px;
}

#updatetreeNode {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}

.study_node_id {
  position: absolute;
  top: -20px;
  left: 0px;
}
.study_node_id .p-info {
  color: white !important;
  font-size: 14px !important;
  padding: 2px 9px !important;
  border-radius: 100%;
  background-color: #344D90;
  cursor: pointer;
}
.study_node_id .ptext {
  cursor: pointer;
  font-size: 80%;
  background-color: #ececec;
  padding: 4px 8px;
  border-radius: 10px;
  color: gray !important;
  transition: 0.3s all ease;
}
.study_node_id .ptext:hover {
  display: block;
}
.study_node_id .p-info:hover + .ptext {
  display: block;
}

.notextavailable {
  text-align: center;
  font-weight: 300;
  padding: 20px;
}

.refreshModulesurvey {
  background-color: white;
  border: none;
  color: #344D90;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  padding: 7px 10px;
  position: absolute;
  top: 22px;
  left: 20px;
}
.refreshModulesurvey p {
  padding: 0px 10px;
  text-align: center;
  color: #344D90;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  bottom: 10px;
}

.nodedeletebutton {
  border-radius: 100%;
  border: none;
  padding: 4px;
  background-color: white;
  transition: 0.3s all ease;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  position: absolute;
  top: -10px;
  right: -10px;
  display: none;
  animation: fadeIn12 1s;
  opacity: 1;
}
.nodedeletebutton img {
  height: 20px;
  width: 20px;
}
.nodedeletebutton:hover {
  transform: scale(1.2);
}

@keyframes fadeIn12 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.displaynone {
  display: none !important;
}

.nodedeletebutton1 {
  top: -20px;
  right: -30px;
}

.checkbox_div {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
}
.checkbox_div .container-checkbox {
  margin-right: 40px;
}
.checkbox_div p {
  font-size: 14px !important;
  transform: translateY(5px);
  font-weight: 300 !important;
  text-transform: uppercase;
}

.randomisationStrategyComponent {
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.678);
  z-index: 100;
  display: none;
}
.randomisationStrategyComponent .inner {
  background-color: white;
  width: 95%;
  height: 95%;
  max-width: 800px;
  max-height: 700px;
  overflow-y: scroll;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 40px;
}
.randomisationStrategyComponent .inner .close {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
}
.randomisationStrategyComponent .inner .close:hover {
  color: #344D90;
}
.randomisationStrategyComponent .inner h1 {
  margin: 30px 0px;
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .randomisationStrategyComponent .inner h1 {
    font-size: 25px;
  }
}
.randomisationStrategyComponent .inner p {
  font-weight: 300;
}
.randomisationStrategyComponent .inner table {
  margin: 20px auto;
  padding-bottom: 20px;
  border: 2px solid whitesmoke;
  padding: 10px 0px;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
.randomisationStrategyComponent .inner table th {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
}
.randomisationStrategyComponent .inner table td, .randomisationStrategyComponent .inner table th {
  padding: 12px 8px;
  text-align: center;
}
.randomisationStrategyComponent .inner table td {
  font-size: 14px;
}
.randomisationStrategyComponent .inner table span {
  display: flex;
  flex-direction: row;
  margin: auto;
  width: 220px;
}
.randomisationStrategyComponent .inner table .one {
  padding-right: 10px;
  padding: 10px;
}
.randomisationStrategyComponent .inner table tr:nth-child(even) {
  background-color: #fafafa;
}
.randomisationStrategyComponent .inner table input {
  margin: auto 0px !important;
  padding: 7px 10px;
  border: 1px solid whitesmoke;
}
.randomisationStrategyComponent .inner .update-button {
  width: 300px;
  margin: 30px auto;
  height: 40px;
  display: block;
}
.randomisationStrategyComponent .inner .errormessage,
.randomisationStrategyComponent .inner .errormessage1,
.randomisationStrategyComponent .inner .block-size-error {
  text-align: center;
  color: red;
  display: none;
}
.randomisationStrategyComponent .inner .blockcomponent {
  border: 1px solid whitesmoke;
  padding: 20px;
}
.randomisationStrategyComponent .inner .blockcomponent input {
  background-color: #fafafa;
  margin: 0px;
  margin-bottom: 10px;
  width: calc(100% - 40px);
}
.randomisationStrategyComponent .inner .blockcomponent select {
  background-color: #fafafa;
  width: 100%;
}
.randomisationStrategyComponent .inner .blockcomponent h5 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  padding: 5px 2px;
}

.study_view_full_screen {
  position: fixed !important;
  width: 100vw;
  left: 0;
  background-color: #F0F1EB;
}

.participant-all-modules {
  max-width: calc(90% - 275px) !important;
  margin: 0 !important;
}

.application.modules .participant-application-view.teenager .right-participant-view {
  background: none !important;
  background-color: #203564 !important;
}
.application.modules .participant-application-view.teenager .right-participant-view .participant-heading {
  color: var(--menu-color-6) !important;
  text-align: center;
}
.application.modules .participant-application-view.teenager .right-participant-view h1.participant-heading.p_h1 {
  text-shadow: 2px 2px #343232;
  font-size: 4em;
  font-family: "Moresugar";
}
.application.modules .participant-application-view.child .right-participant-view {
  background: none !important;
  background-color: #fff !important;
}

.participant-application-view.teenager .optionalModules.with-background, .participant-application-view.teenager .all-modules {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/Teen_transparent_trees.png");
  background-size: cover;
  background-repeat: repeat-x;
  background-color: rgba(239, 244, 251, 0.4392156863);
  padding-top: 15px !important;
  margin-bottom: 15px;
}
.participant-application-view.child .optionalModules.with-background, .participant-application-view.child .all-modules {
  background-image: url("../assets/participantDashboard/all_dashboards/Child/Child_transparent_trees.png");
  background-size: cover;
  background-repeat: repeat-x;
  background-color: rgba(239, 244, 251, 0.4392156863);
  padding-top: 15px !important;
  margin-bottom: 15px;
}
@media screen and (min-width: 540px) and (max-width: 780px) {
  .participant-application-view .all-modules {
    background-image: none !important;
  }
}
.participant-application-view .right-participant-view .container.session-container {
  overflow-y: auto;
  height: auto;
}
.participant-application-view .right-participant-view .container.session-container .go-to-session-link {
  font-size: 25px;
  font-weight: bold;
  color: var(--primary-color-1);
  display: flex;
  align-items: center;
  padding-left: 50px;
}
.participant-application-view .right-participant-view .container.session-container .go-to-session-link img {
  height: 35px;
  margin-left: 10px;
  cursor: pointer;
  -webkit-animation: pulse 2s ease-in-out;
  -moz-animation: pulse 2s ease-in-out;
  animation: pulse 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.participant-application-view .right-participant-view .container.session-container .go-to-session-link img:hover {
  transform: scale(1.5);
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
    opacity: 0.5;
  }
  10% {
    -webkit-transform: scale(1);
    opacity: 0.6;
  }
  20% {
    -webkit-transform: scale(1.3);
    opacity: 0.7;
  }
  40% {
    -webkit-transform: scale(1.5);
    opacity: 0.8;
  }
  60% {
    -webkit-transform: scale(1.6);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1.5);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: scale(1.4);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.6;
  }
}

@-webkit-keyframes glow {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e67073, 0 0 40px #e67073, 0 0 50px #e67073, 0 0 60px #e67073, 0 0 70px #e67073;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #efcd26, 0 0 40px #efcd26, 0 0 50px #efcd26, 0 0 60px #efcd26, 0 0 70px #efcd26, 0 0 80px #efcd26;
  }
}
.all-modules, .optionalModules {
  align-items: flex-start;
  display: grid;
  grid-gap: 1rem;
  justify-content: space-evenly;
  margin: auto;
  padding: 50px;
}
@media (max-width: 500px) {
  .all-modules, .optionalModules {
    padding: 50px 10px;
  }
}
.all-modules .each-module, .optionalModules .each-module {
  height: 100px;
  padding: 20px;
  width: 160px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin-bottom: 20px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .all-modules .each-module, .optionalModules .each-module {
    margin-right: 0px;
  }
}
.all-modules .each-module .left-side, .optionalModules .each-module .left-side {
  width: 150px;
  height: 80px;
  margin: auto;
  position: relative;
}
.all-modules .each-module .left-side .descp, .optionalModules .each-module .left-side .descp {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.all-modules .each-module .left-side .surveydescp, .optionalModules .each-module .left-side .surveydescp {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50% !important;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.all-modules .each-module .left-side .module-description, .optionalModules .each-module .left-side .module-description {
  font-weight: 100;
  font-size: 12px;
  padding-top: 5px;
}
.all-modules .each-module .right-side, .optionalModules .each-module .right-side {
  width: 40px;
  height: 110%;
  background-color: #344D90;
  transform: translate(10px, -7px);
  border-radius: 29px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 2px 0px;
}
.all-modules .each-module .right-side .column-flex, .optionalModules .each-module .right-side .column-flex {
  flex-direction: column;
}
.all-modules .each-module .right-side .each-buttons, .optionalModules .each-module .right-side .each-buttons {
  margin: auto;
  position: relative;
}
.all-modules .each-module .right-side .each-buttons .right-side-icon, .optionalModules .each-module .right-side .each-buttons .right-side-icon {
  color: #fafafa;
  font-size: 14px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.all-modules .each-module .right-side .each-buttons .right-side-icon:hover, .optionalModules .each-module .right-side .each-buttons .right-side-icon:hover {
  opacity: 1;
}
.all-modules .each-module .tags-to-show, .optionalModules .each-module .tags-to-show {
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.all-modules .each-module .tags-to-show .right-side-icon, .optionalModules .each-module .tags-to-show .right-side-icon {
  background-color: #fafafa;
  padding: 5px;
  border-radius: 100%;
  color: #344D90;
  font-size: 12px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.all-modules .each-module .tags-to-show .right-side-icon:hover, .optionalModules .each-module .tags-to-show .right-side-icon:hover {
  opacity: 1;
}
.all-modules .each-module .tags-to-show .show-tags, .optionalModules .each-module .tags-to-show .show-tags {
  display: none;
  position: absolute;
  opacity: 0.9;
  z-index: 10;
  background-color: #344D90;
  color: white;
  width: 180px;
  padding: 20px;
  box-shadow: 1px 1px 10px rgb(0, 0, 0);
  border-radius: 10px;
  flex-wrap: wrap;
}
.all-modules .each-module .tags-to-show .show-tags p, .optionalModules .each-module .tags-to-show .show-tags p {
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 100;
}
.all-modules .each-module .tags-to-show .show-tags p::after, .optionalModules .each-module .tags-to-show .show-tags p::after {
  content: ",";
}
.all-modules .each-module .tags-to-show .show-tags p:last-of-type::after, .optionalModules .each-module .tags-to-show .show-tags p:last-of-type::after {
  display: none;
}
.all-modules .each-module .tags-to-show:hover .show-tags, .optionalModules .each-module .tags-to-show:hover .show-tags {
  display: flex;
}
.all-modules .right-side.researcher-primary, .optionalModules .right-side.researcher-primary {
  flex-direction: column !important;
}

@media (min-width: 500px) {
  .all-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .all-modules {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1080px) {
  .all-modules {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1350px) {
  .all-modules {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1680px) {
  .all-modules {
    grid-template-columns: repeat(6, 1fr);
  }
}
.module-filter-center {
  display: flex;
  flex-direction: row;
  padding: 20px 50px;
  padding-bottom: 0px;
  justify-content: flex-end;
}
@media (max-width: 1000px) {
  .module-filter-center {
    max-width: 488px;
  }
}
@media (max-width: 543px) {
  .module-filter-center {
    padding: 10px;
    padding-bottom: 0px;
  }
}
@media (max-width: 670px) {
  .module-filter-center {
    padding: 0px;
  }
}
.module-filter-center .each-part {
  display: flex;
  flex-direction: row;
}
@media (max-width: 670px) {
  .module-filter-center .each-part {
    flex-direction: column;
  }
}
.module-filter-center .default-button {
  background-color: #344D90;
  color: white;
  padding: 9px 20px;
  font-size: 18px;
  width: 100%;
  border-radius: 10px;
  max-width: 250px;
  display: block;
  margin: 0 88px;
  border: none;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.module-filter-center .default-button:hover {
  opacity: 1;
}
@media (max-width: 670px) {
  .module-filter-center .default-button {
    margin: 0 auto;
  }
}
.module-filter-center .searchmodule {
  width: 300px;
}
@media (max-width: 1210px) {
  .module-filter-center .searchmodule {
    width: 200px;
  }
}
@media (max-width: 1000px) {
  .module-filter-center .searchmodule {
    width: 70%;
  }
}
@media (max-width: 670px) {
  .module-filter-center .searchmodule {
    width: calc(100% - 80px);
    margin: 20px 20px;
  }
}
.module-filter-center .orderbyselector {
  width: 220px;
  height: 40px;
  margin: auto 20px;
}
@media (max-width: 1210px) {
  .module-filter-center .orderbyselector {
    width: 200px;
  }
}
@media (max-width: 1000px) {
  .module-filter-center .orderbyselector {
    width: 30%;
  }
}
@media (max-width: 670px) {
  .module-filter-center .orderbyselector {
    width: calc(100% - 40px);
    margin-bottom: 20px;
  }
}
.module-filter-center .each-button {
  width: 200px;
  font-weight: 400;
  margin: auto 20px;
  margin-right: 0px;
}
@media (max-width: 1177px) {
  .module-filter-center .each-button {
    width: 150px;
  }
}
@media (max-width: 1000px) {
  .module-filter-center .each-button {
    width: 50%;
  }
}
@media (max-width: 670px) {
  .module-filter-center .each-button {
    width: calc(100% - 40px);
    margin: 20px;
    margin-top: 0px;
  }
}

.create-mod-comp {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 100px);
  width: 100%;
}
.create-mod-comp .center {
  height: 100%;
  width: calc(100% - 270px);
}
.create-mod-comp .module-preview {
  height: 100%;
  width: 100%;
}
.create-mod-comp .right-side {
  width: 270px;
  height: 100%;
  background-color: white;
}

.hedgedoc-component {
  width: 100%;
  height: 100%;
  height: inherit;
  position: relative;
}
.hedgedoc-component embed, .hedgedoc-component iframe {
  padding: 0px;
  height: calc(100vh - 145px);
  width: 100%;
}
@media (max-width: 500px) {
  .hedgedoc-component embed, .hedgedoc-component iframe {
    width: calc(100% - 10px);
  }
}

.hedgedoc-component-preview {
  width: 100%;
  height: 100%;
  height: inherit;
  position: relative;
  overflow: hidden;
}
.hedgedoc-component-preview embed, .hedgedoc-component-preview iframe {
  padding: 0px;
  height: calc(100vh - 103px);
  width: 100%;
}
@media (max-width: 500px) {
  .hedgedoc-component-preview embed, .hedgedoc-component-preview iframe {
    width: calc(100% - 10px);
  }
}

.hedgedoc-component-participant-preview {
  overflow: hidden;
}
.hedgedoc-component-participant-preview embed, .hedgedoc-component-participant-preview iframe {
  height: 100vh !important;
  border-bottom: none;
}

.open-assets-button {
  top: calc(50vh - 20px);
  z-index: 7;
  right: 0px;
  background-color: #344D90;
  color: white;
  border-bottom-left-radius: 29px;
  border-top-left-radius: 29px;
  padding: 12px 20px;
  position: fixed;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s all ease;
}
@media (max-width: 500px) {
  .open-assets-button {
    right: 20px;
  }
}
.open-assets-button:hover {
  padding-right: 50px;
}

#open-assets-button {
  display: none;
}

.module-title {
  overflow-wrap: break-word;
}

.module-title-box {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.module-title-box .left-buttons {
  display: flex;
  flex-direction: row;
}
.module-title-box .module-title {
  font-size: 18px;
}
.module-title-box .selector {
  margin-right: 50px;
  border-radius: 5px;
}
.module-title-box .media-choice {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
  width: 100px;
}
.module-title-box .media-choice span {
  padding: 5px 5px;
  border-radius: 10px;
  width: 25%;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}
.module-title-box .media-choice .shadow1 {
  background-color: #344D90;
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0px;
  border-radius: 10px;
}
.module-title-box .media-choice .edititor1 {
  color: white;
}

.editModulehmoduleName {
  height: 2px !important;
  margin: 0px 20px !important;
}

.edit-title-button1 {
  background-color: white;
  color: #344D90;
  padding: 5px;
  height: 15px;
  border-radius: 100%;
  margin-left: 20px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  transition: 0.3s all ease;
  opacity: 0.8;
}
.edit-title-button1:hover {
  opacity: 1;
  background-color: #344D90;
  color: white;
}

.survey-overheadf {
  display: flex;
  flex-direction: row;
}
@media (max-width: 700px) {
  .survey-overheadf {
    margin-bottom: 20px;
  }
}
.survey-overheadf .right-headsds {
  margin-left: 20px;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
}
.survey-overheadf .right-headsds .module-title {
  font-size: 25px;
}

@media (min-width: 500px) {
  .participant-all-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .participant-all-modules {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1080px) {
  .participant-all-modules {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1350px) {
  .participant-all-modules {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1680px) {
  .participant-all-modules {
    grid-template-columns: repeat(5, 1fr);
  }
}
.participant-all-modules .each-module, .optionalModules .each-module {
  border: 1px solid var(--primary-color-2);
  border-bottom: 3px solid var(--primary-color-2);
  border-right: 3px solid var(--primary-color-2);
}
.participant-all-modules .each-module .module-title, .optionalModules .each-module .module-title {
  color: var(--font-color-1);
}
.participant-all-modules .each-module .right-side, .optionalModules .each-module .right-side {
  width: 40px;
  height: 35px;
  background-color: var(--primary-color-2);
  margin-top: 45px;
}
.participant-all-modules .each-module .right-side .right-side-icon, .optionalModules .each-module .right-side .right-side-icon {
  font-size: 25px !important;
  margin-left: 3px;
}

.participant-create-mod-comp {
  height: 100vh !important;
}

.partback12 {
  background-color: #F0F1EB;
}
.partback12 .survey-preview-component {
  position: absolute;
  width: calc(100% - 80px);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

.participant-module-preview {
  position: relative;
}
.bottom-nextstudy {
  display: none;
  background-color: rgba(20, 27, 35, 0.1215686275);
  height: 100px;
  width: 400px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.bottom-nextstudy .participant-button {
  background-color: var(--menu-color-3);
  opacity: 1;
  width: 300px;
  position: absolute;
  top: 18px;
  right: 50px;
}
@media (max-width: 500px) {
  .bottom-nextstudy .participant-button {
    position: relative;
    margin: auto !important;
    right: auto;
  }
}
.bottom-nextstudy .participant-button .nav-icon {
  font-size: 30px;
  color: var(--menu-color-3) !important;
}

.bottom-nextstudy-1 {
  display: none;
  background-color: rgba(20, 27, 35, 0.1215686275);
  height: 100px;
  width: inherit;
  position: absolute;
  bottom: 0px;
}
.bottom-nextstudy-1 .participant-button {
  background-color: var(--menu-color-3);
  opacity: 1;
  width: 300px;
  position: absolute;
  top: 18px;
  right: 50px;
}
@media (max-width: 500px) {
  .bottom-nextstudy-1 .participant-button {
    position: relative;
    margin: auto !important;
    right: auto;
  }
}
.bottom-nextstudy-1 .participant-button .nav-icon {
  font-size: 30px;
  color: var(--menu-color-3) !important;
}

.bottom-nextstudy-modeule {
  display: block !important;
}

.study-alert .hover_bkgr_fricc-study-alert {
  background: rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.study-alert .hover_bkgr_fricc-study-alert > div {
  border-radius: 5px;
  margin: auto;
  display: flex;
  max-height: 700px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 3px;
}
@media (max-width: 800px) {
  .study-alert .hover_bkgr_fricc-study-alert > div {
    width: 90%;
  }
}
.study-alert .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
.study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box li {
  list-style: none;
  background: var(--primary-color-1);
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  margin-bottom: 20px !important;
  overflow: hidden;
  width: 90%;
  perspective: 100px;
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
  padding: 20px;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-weight: 300;
}
.study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box li.show {
  height: auto;
  margin: 2px 0;
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}
.study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box #add-to-list {
  display: none;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: var(--primary-color-1);
  color: white;
}
@media (max-height: 900px) {
  .study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.study-alert .hover_bkgr_fricc-study-alert .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.previewcontainer {
  display: none;
}

.optionalModules {
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  background-color: rgba(239, 244, 251, 0.4392156863);
  justify-content: flex-start;
  padding: 20px 20px !important;
  position: relative;
  padding-top: 15px !important;
}
.optionalModules.column-flex {
  flex-direction: column;
  flex-wrap: wrap;
  height: 370px;
}
@media (min-width: 900px) {
  .optionalModules {
    margin: 0px 40px;
    margin-top: 0px;
  }
}
.optionalModules .each-module {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  position: relative;
}
.optionalModules .each-module .optionalTag {
  position: absolute;
  background-color: var(--primary-color-2);
  padding: 4px;
  padding-right: 10px;
  border-bottom-right-radius: 29px;
  border-top-right-radius: 29px;
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  transform: translate(-20px, 109px);
}
.optionalModules .each-module.blank-background {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  cursor: default;
}

.hideshowoptmod {
  position: absolute;
  right: 0px;
  top: 0px;
  border: none;
  color: white;
  background-color: rgba(255, 255, 255, 0);
  text-decoration: underline;
}

.nomodulesavaialble {
  font-size: 25px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 22px;
  text-align: center;
}

.view_optinal_module {
  background-color: white;
  position: absolute;
  right: 0px;
  height: calc(100vh - 40px);
  padding: 20px;
}
.view_optinal_module .each-module {
  height: 120px;
  padding: 20px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin-bottom: 20px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .view_optinal_module .each-module {
    margin-right: 0px;
  }
}
.view_optinal_module .each-module .left-side {
  width: 150px;
  height: 80px;
  margin: auto;
  position: relative;
}
.view_optinal_module .each-module .left-side .descp {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.view_optinal_module .each-module .left-side .surveydescp {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50% !important;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.view_optinal_module .each-module .left-side .module-description {
  font-weight: 100;
  font-size: 12px;
  padding-top: 5px;
}
.view_optinal_module .each-module .right-side {
  width: 40px;
  height: 110%;
  background-color: #344D90;
  transform: translate(10px, -7px);
  border-radius: 29px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 0px;
}
.view_optinal_module .each-module .right-side .each-buttons {
  margin: auto;
  position: relative;
}
.view_optinal_module .each-module .right-side .each-buttons .right-side-icon {
  color: #fafafa;
  font-size: 14px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.view_optinal_module .each-module .right-side .each-buttons .right-side-icon:hover {
  opacity: 1;
}
.view_optinal_module .each-module .tags-to-show {
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.view_optinal_module .each-module .tags-to-show .right-side-icon {
  background-color: #fafafa;
  padding: 5px;
  border-radius: 100%;
  color: #344D90;
  font-size: 12px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.view_optinal_module .each-module .tags-to-show .right-side-icon:hover {
  opacity: 1;
}
.view_optinal_module .each-module .tags-to-show .show-tags {
  display: none;
  position: absolute;
  opacity: 0.9;
  z-index: 10;
  background-color: #344D90;
  color: white;
  width: 180px;
  padding: 20px;
  box-shadow: 1px 1px 10px rgb(0, 0, 0);
  border-radius: 10px;
  flex-wrap: wrap;
}
.view_optinal_module .each-module .tags-to-show .show-tags p {
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 100;
}
.view_optinal_module .each-module .tags-to-show .show-tags p::after {
  content: ",";
}
.view_optinal_module .each-module .tags-to-show .show-tags p:last-of-type::after {
  display: none;
}
.view_optinal_module .each-module .tags-to-show:hover .show-tags {
  display: flex;
}

.sessions-module-headers {
  color: var(--font-color-5);
  font-size: 18px;
  width: 90%;
  padding: 10px;
  margin-left: 30px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
}

.participant-heading {
  color: var(--menu-color-5) !important;
  text-align: center;
}

h1.participant-heading.p_h1 {
  text-shadow: 2px 2px #989898;
  font-size: 4em;
}

.study-delay-description {
  width: 100%;
  margin-top: 200px;
  font-size: 1rem;
  text-align: center;
}
.study-delay-description a {
  text-align: center;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1200px) {
  .bottom-nextstudy,
  .bottom-nextstudy-1 {
    position: fixed;
  }
}
.study-details {
  margin: auto;
  padding: 50px;
}
@media (max-width: 500px) {
  .study-details {
    padding: 50px 10px;
  }
}
.study-details .each-study {
  width: 100%;
  min-height: 150px;
  background-color: white;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: space-between;
}
@media (max-width: 1070px) {
  .study-details .each-study {
    flex-direction: column;
  }
}
.study-details .each-study .left {
  display: flex;
  flex-direction: row;
  width: calc(100% - 400px);
  justify-content: space-between;
}
@media (max-width: 1070px) {
  .study-details .each-study .left {
    width: 100%;
  }
}
@media (max-width: 1070px) {
  .study-details .each-study .left {
    flex-direction: column;
    width: 100%;
    padding-top: 30px;
  }
}
.study-details .each-study .first_row {
  padding: 20px 50px;
  max-width: 500px;
}
@media (max-width: 1070px) {
  .study-details .each-study .first_row {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: auto;
  }
}
@media (max-width: 1580px) {
  .study-details .each-study .first_row {
    padding: 20px 20px;
  }
}
.study-details .each-study .first_row .study_name {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 25px;
}
.study-details .each-study .first_row .created {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
}
.study-details .each-study .second_row {
  padding: 20px 50px;
}
@media (max-width: 1070px) {
  .study-details .each-study .second_row {
    width: calc(100% - 40px);
  }
}
@media (max-width: 1580px) {
  .study-details .each-study .second_row {
    padding: 20px 20px;
  }
}
.study-details .each-study .second_row .tu {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 14px;
  padding: 5px 0px;
}
.study-details .each-study .third_row {
  padding: 20px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: calc(100% - 40px);
  max-width: 400px;
}
@media (max-width: 1580px) {
  .study-details .each-study .third_row {
    padding: 20px 20px;
  }
}
@media (max-width: 1200px) {
  .study-details .each-study .third_row {
    flex-direction: column;
    margin: auto;
  }
}
@media (max-width: 1070px) {
  .study-details .each-study .third_row {
    width: calc(100% - 40px);
  }
}
.study-details .each-study .third_row .each_button {
  background-color: white;
  color: #344D90;
  font-weight: 500;
  border: solid 2px #344D90;
  text-align: center;
  font-size: 14px;
}
.study-details .each-study .third_row .each_button:hover {
  color: white;
  background-color: #344D90;
}
@media (min-width: 1200px) {
  .study-details .each-study .third_row .each_button {
    width: 250px;
    margin-left: auto;
    margin-right: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-width: 1200px) {
  .study-details .each-study .third_row .each_button {
    width: 80%;
    margin: auto;
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  .study-details .each-study .third_row .each_button {
    width: 100%;
  }
}
.study-details .each-study .fourth_row {
  color: #344D90;
  font-weight: 500;
  position: relative;
  top: 130px;
  width: 90px;
  text-align: right;
  padding-right: 10px;
}
@media (max-width: 1070px) {
  .study-details .each-study .fourth_row {
    top: 0;
  }
}
.study-details .no-study {
  width: 200px;
  height: 40px;
  margin: auto;
  font-size: 16px;
  font-weight: 400;
  font-size: 18px;
  font-weight: 300;
}

.timebaseevent {
  padding: 10px;
  border: #ebebeb 1px solid;
  margin-bottom: 30px;
}
.timebaseevent .note {
  font-size: 12px;
  font-weight: 300;
  padding: 0px 10px;
  transform: translateY(-20px);
  margin-bottom: 10px;
  opacity: 0.8;
}

@media (max-width: 1200px) {
  .study-container-12 {
    display: none;
  }
}

.studybuilderdesclimer {
  text-align: center;
  font-weight: 300;
  margin: auto;
  height: 30px;
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@media (min-width: 1200px) {
  .studybuilderdesclimer {
    display: none;
  }
}
@media (max-width: 500px) {
  .studybuilderdesclimer {
    font-size: 16px;
  }
}

.studybuilderdesclimer1 {
  text-align: center;
  font-weight: 300;
  margin: auto;
  height: 30px;
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@media (max-width: 500px) {
  .studybuilderdesclimer1 {
    font-size: 16px;
  }
}

.admin-dashboard {
  width: 95%;
  margin: 50px auto;
  position: relative;
}
@media (max-width: 820px) {
  .admin-dashboard {
    width: 90%;
  }
}
.admin-dashboard .each-dashboard-component {
  background-color: rgba(255, 255, 255, 0.308);
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  padding: 50px;
  margin-bottom: 50px;
  position: relative;
  min-height: 200px;
}
@media (max-width: 500px) {
  .admin-dashboard .each-dashboard-component {
    padding: 50px 30px;
  }
}
.admin-dashboard .each-dashboard-component .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 905px) {
  .admin-dashboard .each-dashboard-component .top {
    flex-direction: column;
  }
}
.admin-dashboard .each-dashboard-component .mobile-add-button {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
}
.admin-dashboard .each-dashboard-component .mobile-add-button:hover {
  opacity: 1;
}
@media (min-width: 905px) {
  .admin-dashboard .each-dashboard-component .mobile-add-button {
    display: none;
  }
}
@media (max-width: 500px) {
  .admin-dashboard .each-dashboard-component .mobile-add-button {
    right: 20px;
    top: 20px;
  }
}
.admin-dashboard .each-dashboard-component .mobile-add-button .add-ic {
  color: #344D90;
  font-size: 20px;
  opacity: 0.9;
}
.admin-dashboard .each-dashboard-component .left-side {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 650px;
}
@media (max-width: 1150px) {
  .admin-dashboard .each-dashboard-component .left-side {
    width: 550px;
  }
}
@media (max-width: 905px) {
  .admin-dashboard .each-dashboard-component .left-side {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .admin-dashboard .each-dashboard-component .left-side {
    flex-direction: column;
  }
}
.admin-dashboard .each-dashboard-component .head {
  font-weight: 400;
  font-size: 30px;
}
@media (max-width: 905px) {
  .admin-dashboard .each-dashboard-component .head {
    font-size: 25px;
  }
}
.admin-dashboard .each-dashboard-component .searchinp {
  margin: 0px 40px;
  width: 300px;
  background-color: #fafafa;
}
@media (max-width: 1150px) {
  .admin-dashboard .each-dashboard-component .searchinp {
    width: 200px;
  }
}
@media (max-width: 700px) {
  .admin-dashboard .each-dashboard-component .searchinp {
    width: calc(100% - 40px);
    margin: 20px 0px;
  }
}
.admin-dashboard .each-dashboard-component .globalbutton {
  width: 250px;
  font-weight: 400;
  padding-top: 12px;
}
@media (max-width: 1150px) {
  .admin-dashboard .each-dashboard-component .globalbutton {
    width: 200px;
  }
}
@media (max-width: 905px) {
  .admin-dashboard .each-dashboard-component .globalbutton {
    display: none;
  }
}
.admin-dashboard .each-dashboard-component .showing_number {
  text-align: center;
  transform: translateY(10px);
  font-weight: 300;
  opacity: 0.9;
}
.admin-dashboard .each-active-studies {
  width: 300px;
  background-color: #fafafa;
  padding: 30px;
  margin-top: 40px;
  margin-right: 20px;
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  justify-content: space-between;
}
@media (max-width: 550px) {
  .admin-dashboard .each-active-studies {
    flex-direction: column;
    width: 100%;
    margin-right: 0px;
  }
}
.admin-dashboard .each-active-studies .left {
  width: 50%;
  border-right: 1px solid rgb(199, 199, 199);
  text-align: center;
}
@media (max-width: 550px) {
  .admin-dashboard .each-active-studies .left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgb(199, 199, 199);
    padding-bottom: 20px;
  }
}
.admin-dashboard .each-active-studies .left .hd {
  font-weight: 400;
  font-size: 20px;
  padding-right: 10px;
  cursor: pointer;
  transition: 0.3s all ease;
}
.admin-dashboard .each-active-studies .left .hd:hover {
  color: #344D90;
}
.admin-dashboard .each-active-studies .right {
  width: 50%;
  text-align: center;
}
@media (max-width: 550px) {
  .admin-dashboard .each-active-studies .right {
    width: 100%;
    padding-top: 20px;
  }
}
.admin-dashboard .each-active-studies .cpy {
  font-size: 14px;
  padding-top: 10px;
  font-weight: 300;
}
.admin-dashboard .each-active-studies .view_study {
  font-size: 14px;
  padding-top: 10px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.admin-dashboard .bottom {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px;
}
@media (max-width: 550px) {
  .admin-dashboard .bottom {
    padding-top: 0px;
  }
}
.admin-dashboard .left-arrow {
  position: absolute;
  left: 20px;
  top: 55%;
  cursor: pointer;
}
@media (max-width: 905px) {
  .admin-dashboard .left-arrow {
    display: none;
  }
}
.admin-dashboard .right-arrow {
  position: absolute;
  right: 20px;
  top: 55%;
  cursor: pointer;
}
@media (max-width: 905px) {
  .admin-dashboard .right-arrow {
    display: none;
  }
}
.admin-dashboard .each-module-survey {
  height: 120px;
  padding: 20px;
  width: 210px;
  border-radius: 10px;
  position: relative;
  border: 1px solid #fafafa;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  margin-right: 20px;
  margin-top: 20px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .admin-dashboard .each-module-survey {
    margin-right: 0px;
  }
}
.admin-dashboard .each-module-survey .left-side {
  width: 160px;
  position: relative;
}
.admin-dashboard .each-module-survey .left-side .descp {
  width: 160px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 40%;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.admin-dashboard .each-module-survey .left-side .module-description {
  font-weight: 100;
  font-size: 12px;
  padding-top: 5px;
}
.admin-dashboard .each-module-survey .right-side {
  width: 40px;
  height: 110%;
  background-color: #344D90;
  transform: translate(10px, -7px);
  border-radius: 29px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 0px;
}
.admin-dashboard .each-module-survey .right-side .each-buttons {
  margin: auto;
  position: relative;
}
.admin-dashboard .each-module-survey .right-side .each-buttons .right-side-icon {
  color: #fafafa;
  font-size: 14px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.admin-dashboard .each-module-survey .right-side .each-buttons .right-side-icon:hover {
  opacity: 1;
}
.admin-dashboard .each-module-survey .tags-to-show {
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.admin-dashboard .each-module-survey .tags-to-show .right-side-icon {
  background-color: #fafafa;
  padding: 5px;
  border-radius: 100%;
  color: #344D90;
  font-size: 12px;
  transition: 0.3s all ease;
  opacity: 0.8;
  cursor: pointer;
}
.admin-dashboard .each-module-survey .tags-to-show .right-side-icon:hover {
  opacity: 1;
}
.admin-dashboard .each-module-survey .tags-to-show .show-tags {
  display: none;
  position: absolute;
  opacity: 0.9;
  z-index: 10;
  background-color: #344D90;
  color: white;
  width: 180px;
  padding: 20px;
  box-shadow: 1px 1px 10px rgb(0, 0, 0);
  border-radius: 10px;
  flex-wrap: wrap;
}
.admin-dashboard .each-module-survey .tags-to-show .show-tags p {
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 100;
}
.admin-dashboard .each-module-survey .tags-to-show .show-tags p::after {
  content: ",";
}
.admin-dashboard .each-module-survey .tags-to-show .show-tags p:last-of-type::after {
  display: none;
}
.admin-dashboard .each-module-survey .tags-to-show:hover .show-tags {
  display: flex;
}

.no-data {
  padding: 20px;
  text-align: center;
  margin: 35px auto;
  background-color: #fafafa;
  border-radius: 10px;
}

.delete-module-survey-component .hover_bkgr_fricc-delete-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 90%;
  max-height: 400px;
  width: 800px;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
@media (max-height: 900px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp > div {
    margin-top: 10%;
  }
}
@media (max-width: 800px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp > div {
    width: 90%;
  }
}
.delete-module-survey-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -40px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .delete-copy {
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  padding: 20px;
  padding-top: 0px;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .update-button {
  width: 300px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.delete-module-survey-component .hover_bkgr_fricc-delete-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.participant-application-view.child .participant-dashboard-view .go-to-session {
  float: right;
  position: relative;
  font-size: 2rem;
  color: #086778;
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_shared/menu_items_child/goToMySessionFinal_new.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  text-decoration: none;
  border: none;
  width: 170px;
  height: 150px;
}

.participant-dashboard-view {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow-x: hidden;
  z-index: 0;
  background: url(../assets/dashboards/shared/progress_bar/progress_grass_1.svg) repeat-x bottom, url(../assets/dashboards/shared/progress_bar/progress_grass_1.svg) repeat-x bottom left, url(../assets/dashboards/shared/progress_bar/progress_tree_9.svg) no-repeat bottom;
  background-size: auto 5%, auto 6%, auto 30%;
  position: relative;
}
@media (max-height: 860px) {
  .participant-dashboard-view {
    overflow-y: scroll;
  }
}
@media (max-width: 1300px) {
  .participant-dashboard-view {
    flex-direction: column;
    height: auto;
  }
}
.participant-dashboard-view .sign1 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_feelings_tracker.svg");
}
.participant-dashboard-view .sign2 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_clue_calmers.svg");
}
.participant-dashboard-view .sign3 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_power_thinking.svg");
}
.participant-dashboard-view .sign4 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_climbing_plans.svg");
}
.participant-dashboard-view .sign5 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_mood_boost.svg");
}
.participant-dashboard-view .sign6 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_change_focus.svg");
}
.participant-dashboard-view.high-contrast .welcome-name {
  color: #1A3A61;
}
.participant-dashboard-view .center-view {
  width: calc(100% - 230px);
  height: calc(100% - 60px);
  padding: 30px 20px;
}
@media (max-height: 860px) {
  .participant-dashboard-view .center-view {
    height: auto;
  }
}
@media (max-width: 700px) {
  .participant-dashboard-view .center-view {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (min-width: 3000px) {
  .participant-dashboard-view .center-view {
    width: calc(100% - 390px);
  }
}
@media (max-width: 1300px) {
  .participant-dashboard-view .center-view {
    width: calc(100% - 60px);
  }
}
.participant-dashboard-view .center-view .participant-welcome {
  text-align: center;
  padding: 50px 30px !important;
}
@media (max-height: 950px) {
  .participant-dashboard-view .center-view .participant-welcome {
    padding: 30px 30px !important;
  }
}
@media (min-width: 1300px) {
  .participant-dashboard-view .center-view .participant-welcome {
    font-size: 50px !important;
  }
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .participant-welcome {
    padding-top: 60px !important;
  }
}
.participant-dashboard-view .center-view .each-div {
  width: 100%;
}
.participant-dashboard-view .center-view .welcome-box {
  width: 100%;
  max-width: 2000px;
  max-height: 500px;
  min-height: 500px;
  margin: auto;
  border-radius: 29px;
  position: relative;
}
.participant-dashboard-view .center-view .welcome-box .welcome-name {
  padding: 30px;
  padding-bottom: 10px !important;
  color: var(--font-color-1);
  word-spacing: 1.2px;
  font-size: 4rem;
  color: #fff;
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .welcome-box .welcome-name {
    text-align: center;
    padding-top: 20px;
    font-size: 30px;
  }
}
.participant-dashboard-view .center-view .welcome-box .welcome-copy {
  text-align: center;
  font-size: 20px;
  font-weight: 300;
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .welcome-box .welcome-copy {
    padding: 0px 10px;
  }
}
.participant-dashboard-view .center-view .welcome-box .progresspview {
  width: 100%;
  padding: 20px 0px;
  height: calc(100% - 280px);
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .welcome-box .progresspview {
    height: calc(100% - 300px);
  }
}
.participant-dashboard-view .center-view .welcome-box .links-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 60px;
  grid-row-gap: 40px;
  width: 100%;
}
.participant-dashboard-view .center-view .welcome-box .links-wrapper .signimage:hover {
  transform: scale(1.3);
}
.participant-dashboard-view .center-view .welcome-box .links-wrapper .signimage.sign1:hover {
  transform: scale(1.3);
}
@media (max-width: 500px) {
  .participant-dashboard-view .center-view .welcome-box .links-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}
.participant-dashboard-view .center-view .session-snapshot {
  width: 100%;
  max-width: 2000px;
  margin: auto;
  height: 200px;
  border-radius: 29px;
  position: relative;
  margin-top: 40px;
  max-height: 200px;
  /* Hide scrollbar for IE, Edge and Firefox */
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .session-snapshot {
    height: 300px;
  }
}
@media (max-height: 960px) {
  .participant-dashboard-view .center-view .session-snapshot {
    margin-top: 20px;
  }
}
.participant-dashboard-view .center-view .session-snapshot .welcome-name {
  padding: 30px;
  padding-bottom: 10px;
  font-size: 30px;
  color: var(--font-color-1);
  word-spacing: 1.2px;
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .session-snapshot .welcome-name {
    text-align: center;
    padding-top: 20px;
    font-size: 30px;
  }
}
.participant-dashboard-view .center-view .session-snapshot .each-div {
  width: 100%;
}
.participant-dashboard-view .center-view .session-snapshot .continue-module {
  width: 180px;
  background-color: var(--primary-color-1);
  color: #FFFAF1;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  border-radius: 29px;
  height: 50px;
  bottom: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
  justify-content: space-between;
}
@media (max-width: 800px) {
  .participant-dashboard-view .center-view .session-snapshot .continue-module {
    position: relative !important;
    margin: auto;
    transform: translateX(20px);
  }
}
.participant-dashboard-view .center-view .session-snapshot .continue-module .text {
  padding: 12px;
}
.participant-dashboard-view .center-view .session-snapshot .continue-module .nav-icon-outer {
  background-color: #fafafa;
  color: var(--primary-color-1);
  height: 35px;
  width: 35px;
  border-radius: 100%;
  margin: 7px 10px;
  font-size: 30px;
}
.participant-dashboard-view .center-view .session-snapshot .continue-module .nav-icon-outer .nav-icon {
  padding: 3px 13px;
}
.participant-dashboard-view .center-view .session-snapshot .continue-module:hover {
  opacity: 1;
}
.participant-dashboard-view .center-view .session-snapshot .session-view {
  width: 100%;
  max-width: 2000px;
  height: calc(40vh - 150px);
}
.participant-dashboard-view .center-view .session-snapshot .session-view .stroke {
  display: flex;
  flex-direction: row;
  width: 100%;
}
@media (max-width: 850px) {
  .participant-dashboard-view .center-view .session-snapshot .session-view .stroke {
    overflow-x: scroll;
    width: 90vw;
    margin: 0px auto;
  }
}
.participant-dashboard-view .center-view .session-snapshot .session-view .stroke .stroke1,
.participant-dashboard-view .center-view .session-snapshot .session-view .stroke .stroke2 {
  width: 100%;
  height: 40px;
  border: solid 2px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 50%;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session {
  width: 110px;
  height: 120px;
  border: 1px solid rgb(228, 227, 227);
  padding: 10px;
  border-radius: 2px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .inner-session {
  width: 110px;
  height: 90px;
  border: 1px solid #166898;
  border-radius: 2px;
  background-color: #166898;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .inner-session .inner-image {
  width: 80px;
  height: 60px;
  margin: 10px auto;
  background-color: white;
  border-radius: 2px;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .inner-session .inner-image .sessiontext {
  font-weight: 100;
  font-size: 14px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .clip {
  height: 40px;
  width: 50px;
  border-radius: 100%;
  margin: 12px 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -40px;
  left: 40px;
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .clip1 {
  background-image: url("../assets/redclip.png");
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .clip2 {
  background-image: url("../assets/greenclip.png");
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session .clip3 {
  background-image: url("../assets/blueclip.png");
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session1 {
  transform: scale(0.9) rotate(-2deg);
}
@media (max-width: 430px) {
  .participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session1 {
    display: none;
  }
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session2 {
  transform: scale(0.9) rotate(10deg);
}
.participant-dashboard-view .center-view .session-snapshot .session-view .session-slides .each-session3 {
  transform: scale(0.9) rotate(-5deg);
}
.participant-dashboard-view .center-view .session-snapshot .stroke::-webkit-scrollbar {
  display: none;
}
.participant-dashboard-view .center-view .session-snapshot .stroke {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.participant-dashboard-view .right-view {
  width: 230px;
  height: 100%;
}
@media (max-height: 860px) {
  .participant-dashboard-view .right-view {
    height: auto;
  }
}
@media (min-width: 3000px) {
  .participant-dashboard-view .right-view {
    width: 350px;
  }
}
@media (max-width: 1300px) {
  .participant-dashboard-view .right-view {
    width: 100%;
  }
}
@media (max-height: 860px) {
  .participant-dashboard-view .right-view {
    height: auto;
  }
}
.participant-dashboard-view .right-view .help-button {
  height: 110px;
  width: 110px;
  margin: 15px auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (max-height: 950px) {
  .participant-dashboard-view .right-view .help-button {
    margin: 15px auto;
  }
}
@media (max-width: 1300px) {
  .participant-dashboard-view .right-view .help-button {
    display: none;
  }
}
.participant-dashboard-view .right-view .help-button:hover {
  transform: scale(1.2);
}
.participant-dashboard-view .right-view .daily-checkin {
  width: 80%;
  margin: 0 auto;
  border-radius: 29px;
}
@media (max-height: 860px) {
  .participant-dashboard-view .right-view .daily-checkin {
    height: auto;
  }
}
@media (max-width: 1300px) {
  .participant-dashboard-view .right-view .daily-checkin {
    max-height: 340px;
    margin: 50px auto;
  }
}
@media (max-width: 700px) {
  .participant-dashboard-view .right-view .daily-checkin {
    max-height: 720px;
  }
}
.participant-dashboard-view .right-view .daily-checkin .check-in-wrapper {
  background: #70d2e3;
  border-radius: 10px 0 10px 0;
}
.participant-dashboard-view .right-view .daily-checkin .welcome-name {
  text-align: center;
  padding: 20px 10px;
  padding-bottom: 10px;
  font-size: 32px;
  color: var(--font-color-5);
  word-spacing: 1.2px;
  padding-top: 4px;
  margin-top: 10px;
  padding-bottom: 0px !important;
}
.participant-dashboard-view .right-view .daily-checkin .welcome-copy {
  text-align: center;
  color: var(--font-color-5);
  padding-bottom: 10px;
  font-size: 18px;
}
.participant-dashboard-view .right-view .daily-checkin .moods {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
@media (max-width: 1300px) {
  .participant-dashboard-view .right-view .daily-checkin .moods {
    flex-direction: row;
  }
}
@media (max-width: 700px) {
  .participant-dashboard-view .right-view .daily-checkin .moods {
    flex-direction: column;
  }
}
.participant-dashboard-view .right-view .daily-checkin .mood {
  width: 75px;
  margin: auto;
  margin-top: 10px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.participant-dashboard-view .right-view .daily-checkin .mood:hover, .participant-dashboard-view .right-view .daily-checkin .mood.selected-mood {
  transform: scale(1.2);
}
.participant-dashboard-view .right-view .daily-checkin .mood.selected-mood {
  border: 3px solid;
  border-radius: 50%;
  transition: none;
  border-color: #d9a289;
  box-shadow: 0 0 60px 30px #fff, 0 0 20px 10px rgba(207, 175, 51, 0.8901960784), 0 0 30px;
}
@media (max-width: 1300px) {
  .participant-dashboard-view .right-view .daily-checkin .mood {
    width: 65px;
  }
}
@media (max-height: 907px) {
  .participant-dashboard-view .right-view .daily-checkin .mood {
    width: 65px;
  }
}
.participant-dashboard-view .right-view .daily-checkin .week-sofar {
  display: flex;
  flex-direction: row;
  padding: 0px 10px;
  padding-bottom: 20px;
}
@media (max-height: 950px) {
  .participant-dashboard-view .right-view .daily-checkin .week-sofar {
    padding-bottom: 10px;
  }
}
.participant-dashboard-view .right-view .daily-checkin .week-sofar .mood {
  width: 35px;
}
@media (max-height: 950px) {
  .participant-dashboard-view .right-view .daily-checkin .week-sofar .mood {
    width: 35px;
  }
}
.participant-dashboard-view .right-view .daily-checkin .week-sofar-copy {
  text-align: center;
  font-weight: 300;
  padding-top: 20px;
  color: var(--font-color-5);
}
.participant-dashboard-view .tree-animations {
  display: flex;
  height: 250px;
  width: 80%;
  position: absolute;
  bottom: 0;
  transform-origin: bottom;
  z-index: -1;
}
.participant-dashboard-view .tree-animations > div {
  flex-grow: 1;
  flex-basis: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  visibility: hidden;
}
.participant-dashboard-view .tree-animations > div.show {
  visibility: visible;
}
@media (max-width: 2440px) {
  .participant-dashboard-view .tree-animations {
    max-height: 200px;
  }
}
@media (max-width: 1440px) {
  .participant-dashboard-view .tree-animations {
    max-height: 170px;
  }
}
.participant-dashboard-view .tree-animations .flower-8 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_8.svg);
}
.participant-dashboard-view .tree-animations .flower-6 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_6.svg);
}
.participant-dashboard-view .tree-animations .flower-9 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_9.svg);
}
.participant-dashboard-view .tree-animations .flower-10 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_10.svg);
}
.participant-dashboard-view .tree-animations .flower-1 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_anim_1.gif);
}
.participant-dashboard-view .tree-animations .flower-2 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_anim_2.gif);
}
.participant-dashboard-view .tree-animations .flower-3 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_anim_3.gif);
}
.participant-dashboard-view .tree-animations .flower-4 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_anim_4.gif);
}
.participant-dashboard-view .tree-animations .flower-5 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_anim_5.gif);
}
.participant-dashboard-view .tree-animations .flower-7 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_flower_7.svg);
}
.participant-dashboard-view .tree-animations .tree-3 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_3.gif);
}
.participant-dashboard-view .tree-animations .tree-4 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_4.gif);
}
.participant-dashboard-view .tree-animations .tree-5 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_5.gif);
}
.participant-dashboard-view .tree-animations .tree-9 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_9.svg);
}
.participant-dashboard-view .tree-animations .tree-7 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_7.svg);
}
.participant-dashboard-view .tree-animations .tree-6 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_6.svg);
}
.participant-dashboard-view .tree-animations .tree-8 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_8.svg);
}
.participant-dashboard-view .tree-animations .tree-10 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_10.svg);
}
.participant-dashboard-view .tree-animations .tree-1 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_1.gif);
}
.participant-dashboard-view .tree-animations .tree-2 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_2.gif);
}
.participant-dashboard-view .tree-animations .tree-4 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_4.gif);
}
.participant-dashboard-view .tree-animations .tree-5 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_tree_anim_5.gif);
}
.participant-dashboard-view .tree-animations .seed-1 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_seedling_1.svg);
  background-size: auto 50%;
}
.participant-dashboard-view .tree-animations .seed-2 {
  background-image: url(../assets/dashboards/shared/progress_bar/progress_seedling_2.svg);
  background-size: auto 50%;
}
.participant-dashboard-view .tree-animations .stage-1 {
  transform: translate(0%, 10%) scale(0.8);
}

.session-view {
  width: 100%;
  height: 200px;
}
.session-view .stroke {
  display: flex;
  flex-direction: row;
  width: 100%;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
@media (max-width: 850px) {
  .session-view .stroke {
    overflow-x: scroll;
    width: 90vw;
    margin: 0px auto;
  }
}
@media (max-width: 1440px) {
  .session-view .stroke {
    overflow-x: scroll;
  }
}
.session-view .stroke .stroke1,
.session-view .stroke .stroke2 {
  width: 100%;
  height: 40px;
  border-radius: 50%;
}
@media (max-height: 960px) {
  .session-view .stroke .stroke1,
  .session-view .stroke .stroke2 {
    height: 20px;
  }
}
.session-view .stroke::-webkit-scrollbar {
  display: none;
}
.session-view .session-slides {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}
.session-view .session-slides .each-session {
  width: 110px;
  height: 120px;
  border: 1px solid rgb(228, 227, 227);
  padding: 10px;
  border-radius: 2px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.session-view .session-slides .each-session .inner-session {
  width: 110px;
  height: 110px;
  border: 1px solid var(--primary-color-1);
  border-radius: 2px;
  background-color: var(--primary-color-1);
}
.session-view .session-slides .each-session .inner-session .inner-image {
  width: 100px;
  height: 90px;
  margin: 10px auto;
  background-color: white;
  border-radius: 2px;
}
.session-view .session-slides .each-session .inner-session .inner-image .sessiontext {
  font-weight: 100;
  font-size: 14px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.session-view .session-slides .each-session1 {
  transform: scale(0.9) rotate(-2deg);
}
@media (max-width: 500px) {
  .session-view .session-slides .each-session1 {
    transform: scale(0.9) rotate(-2deg) translateX(-10px);
  }
}
.session-view .session-slides .each-session2 {
  transform: scale(0.9) rotate(10deg);
}
@media (max-width: 500px) {
  .session-view .session-slides .each-session2 {
    display: none;
  }
}
.session-view .session-slides .each-session3 {
  transform: scale(0.9) rotate(-5deg);
}
@media (max-width: 500px) {
  .session-view .session-slides .each-session3 {
    display: none;
  }
}
.session-view .slide-1 {
  animation-name: run;
  animation-duration: 1s;
}
.session-view .slide-2 {
  animation-name: run2;
  animation-duration: 1s;
}

@keyframes run {
  from {
    transform: translateX(-80px);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes run2 {
  from {
    transform: translateX(80px);
  }
  to {
    transform: translateX(0px);
  }
}
.session-view {
  width: 100%;
}
.session-view .div1 {
  display: flex;
  flex-direction: row;
  height: 150px;
  margin: 30px auto;
}
@media (max-height: 960px) {
  .session-view .div1 {
    margin: 15px auto;
  }
}
@media (min-width: 1500px) {
  .session-view .div1 {
    height: 180px;
  }
}
.session-view .signimage {
  height: 150px;
  width: 150px;
  margin: auto auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: scale(1.1);
}
@media (min-width: 1500px) {
  .session-view .signimage {
    height: 180px;
    width: 180px;
  }
}

.participant-application-view.child.contrast .sign1 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_feelings_tracker.svg") !important;
}
.participant-application-view.child.contrast .sign2 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_clue_calmers.svg") !important;
}
.participant-application-view.child.contrast .sign3 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_power_thinking.svg") !important;
}
.participant-application-view.child.contrast .sign4 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_climbing_plans.svg") !important;
}
.participant-application-view.child.contrast .sign5 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_mood_boost.svg") !important;
}
.participant-application-view.child.contrast .sign6 {
  background-image: url("../assets/dashboards/child/main/ch_db_main_change_focus.svg") !important;
}

.participant-application-view.teenager .right-participant-view {
  background: url("../assets/dashboards/teen/teen_db_main_background.png");
  background-size: cover;
}
.participant-application-view.teenager .session-view .sign1 {
  background-image: url("../assets/dashboards/teen/teen_db_main_feelings_tracker.svg");
}
.participant-application-view.teenager .session-view .sign2 {
  background-image: url("../assets/dashboards/teen/teen_db_main_clue_calmers.svg");
}
.participant-application-view.teenager .session-view .sign3 {
  background-image: url("../assets/dashboards/teen/teen_db_main_power_thinking.svg");
}
.participant-application-view.teenager .session-view .sign4 {
  background-image: url("../assets/dashboards/teen/teen_db_main_climbing_plans.svg");
}
.participant-application-view.teenager .session-view .sign5 {
  background-image: url("../assets/dashboards/teen/teen_db_main_mood_boost.svg");
}
.participant-application-view.teenager .session-view .sign6 {
  background-image: url("../assets/dashboards/teen/teen_db_main_change_focus.svg");
}
.participant-application-view.teenager .check-in-wrapper {
  background: none !important;
}
.participant-application-view.teenager .check-in-wrapper h1,
.participant-application-view.teenager .check-in-wrapper h3 {
  color: #fff !important;
}
.participant-application-view.teenager .check-in-wrapper .welcome-copy.p_c1 {
  font-size: 13px !important;
}
.participant-application-view.teenager.contrast .sign1, .participant-application-view.teenager.contrast .sign2, .participant-application-view.teenager.contrast .sign3, .participant-application-view.teenager.contrast .sign4, .participant-application-view.teenager.contrast .sign5, .participant-application-view.teenager.contrast .sign6 {
  background-image: none !important;
}

.background-module-thumbnail {
  background-size: contain;
  background-repeat: no-repeat;
}
.background-module-thumbnail .descp {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 10px 0px;
  margin: auto !important;
  top: 0% !important;
  transform: translateY(0%) !important;
}
.background-module-thumbnail .descp .module-title {
  padding-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  width: 160px;
}
.background-module-thumbnail .descp .module-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}

.background-module-thumbnail-participant {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.background-module-thumbnail-participant .descp {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin: auto !important;
  top: 0% !important;
  transform: translateY(10%) !important;
  font-weight: 500 !important;
  color: black !important;
}
.background-module-thumbnail-participant .descp .module-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}
.background-module-thumbnail-participant .descp .module-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}
.background-module-thumbnail-participant:hover {
  filter: drop-shadow(2px 4px 6px black);
  /* filter: hue-rotate(45deg); */
}

.hedgedocloginiframe {
  height: 0px;
  width: 0px;
  border: none;
}

.climbing-plans .climbing-plans-instruction {
  color: #1a3a61 !important;
  background: #fff;
  padding: 10px 5px;
  width: 84% !important;
  margin-left: 6%;
}
.climbing-plans .participant-application-view.child .right-participant-view {
  background-image: url("../assets/climbing-plans/child-background-lighter.png");
  background-color: var(--menu-color-2);
  background-position-x: right;
  background-size: 80% auto;
  background-repeat: no-repeat;
}
.climbing-plans .participant-application-view.child .right-participant-view .climbing-plans-header .climbing-header-image {
  background-image: url("../assets/climbing-plans/child-header.svg");
}
.climbing-plans .participant-application-view.child .right-participant-view .climbing-plans-header .climbing-person-image {
  background-image: url("../assets/climbing-plans/child-climbing.png");
  background-repeat: no-repeat;
}
.climbing-plans .participant-application-view.child .right-participant-view .mountains-section .mountain {
  border-left: 20px solid var(--menu-color-6);
}
.climbing-plans .participant-application-view.child .right-participant-view .mount-momentum-form-header .form-right-section {
  background-image: url("../assets/climbing-plans/child-background.png");
}
.climbing-plans .participant-application-view.teenager .right-participant-view {
  background: url("../assets/climbing-plans/teen-background.png") var(--font-color-1) no-repeat !important;
  background-size: 90% auto !important;
  background-position-x: center !important;
  background-position-y: bottom !important;
}
.climbing-plans .participant-application-view.teenager .right-participant-view .climbing-plans-header .climbing-header-image {
  background-image: url("../assets/climbing-plans/teen-header.svg");
}
.climbing-plans .participant-application-view.teenager .right-participant-view .climbing-plans-header .climbing-person-image {
  background-image: url("../assets/climbing-plans/teen-climbing.svg");
  background-repeat: no-repeat;
}
.climbing-plans .participant-application-view.teenager .right-participant-view .mountains-section .mountain {
  border-left: 20px solid var(--menu-color-4);
}
.climbing-plans .participant-application-view.teenager .right-participant-view .mount-momentum-form-header .form-right-section {
  background-image: url("../assets/climbing-plans/teen-climbing.svg");
  background-color: transparent;
}
.climbing-plans .participant-application-view.teenager .right-participant-view .description-section {
  color: #fff;
}

.climbing-plans-create .participant-application-view .right-participant-view,
.climbing-plans-edit .participant-application-view .right-participant-view {
  background-image: none !important;
}

.mount-momentum-container {
  font-family: "Fredoka-One";
  width: 100%;
}
.mount-momentum-container .mount-momentum-form-header {
  display: flex;
  justify-content: center;
  align-items: end;
}
.mount-momentum-container .mount-momentum-form-header .form-right-section {
  background-color: #fff;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.mount-momentum-container .page-title,
.mount-momentum-container .page-subtitle {
  text-align: center;
  color: #fff;
}
.mount-momentum-container .page-title {
  margin-top: 50px;
  font-size: 48px;
}
.mount-momentum-container .page-subtitle {
  font-size: 32px;
}
.mount-momentum-container .form-section {
  background: rgba(255, 255, 255, 0.4);
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  padding: 20px;
}
.mount-momentum-container .climbing-plan-link {
  position: relative;
  color: var(--font-color-5);
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  border-left: 20px solid #99ADF9;
  background: #fff;
  padding: 10px;
  margin-right: 100px;
  cursor: pointer;
  box-shadow: 8px 7px 3px 1px rgba(64, 57, 57, 0.3882352941);
}
.mount-momentum-container .climbing-plan-link:after {
  content: "";
  position: absolute;
  right: -23px;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  border-right: 23px solid transparent;
  border-top: 22px solid #fff;
  border-bottom: 22px solid #fff;
  box-sizing: border-box;
}
.mount-momentum-container .form-title-section {
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-evenly;
}
.mount-momentum-container .form-title-section .examples-link {
  margin-top: 25px;
}
.mount-momentum-container .form-title-section .add-step-link img {
  cursor: pointer;
  height: 120px;
}
.mount-momentum-container .form-title-section .my-goal-input-container {
  text-align: left;
}
.mount-momentum-container .form-title-section .my-goal-input-container:after {
  border-right: 30px solid transparent;
  border-top: 59px solid #fff;
  border-bottom: 59px solid #fff;
  right: -30px;
}
.mount-momentum-container .form-title-section .form-title-label {
  opacity: 0.54;
}
.mount-momentum-container .form-title-section input,
.mount-momentum-container .form-title-section input:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--menu-color-1);
  margin: 10px;
  height: 50px;
  font-size: 24px;
  font-family: inherit;
  font-weight: bold;
}
.mount-momentum-container .form-title-section input::placeholder {
  color: var(--menu-color-1);
  opacity: 0.4;
}
.mount-momentum-container .description-section {
  text-align: center;
  margin-top: 20px;
  color: var(--menu-color-1);
}
.mount-momentum-container .description-section p {
  margin-top: 15px;
  font-weight: bold;
}
.mount-momentum-container .description-section .list-page-link {
  color: var(--primary-color-4);
  text-decoration: underline;
}
.mount-momentum-container .footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.mount-momentum-container .participant-button {
  text-align: center;
  display: inline-block;
}
.mount-momentum-container .participant-button .nav-icon-outer {
  background: transparent;
  padding-right: 10px;
  margin-top: 3px;
}
.mount-momentum-container .examples-button {
  background: var(--primary-color-4);
}
.mount-momentum-container .save-button {
  display: block;
}
.mount-momentum-container .buttons-section {
  text-align: center;
  margin-top: 50px;
}
.mount-momentum-container .mount-momentum-step {
  background: white;
  border-radius: 8px 40px;
  padding: 10px;
  width: 90%;
  margin: 10px auto;
  color: #000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.mount-momentum-container .mount-momentum-step .cw-gauge--wrapper {
  background-image: url("cw/no_text_gauge.svg");
  width: 300px;
  height: 200px;
}
.mount-momentum-container .mount-momentum-step .cw-gauge--wrapper .cw-gauge--reading-container > div {
  height: 100px;
  padding-top: 0px;
  transform-origin: 50% 110%;
  left: -56px;
}
.mount-momentum-container .mount-momentum-step .cw-gauge--wrapper .cw-gauge--needle {
  z-index: 101;
}
.mount-momentum-container .mount-momentum-step:hover .reorder-section, .mount-momentum-container .mount-momentum-step:hover .remove-item-section {
  opacity: 1;
}
.mount-momentum-container .mount-momentum-step .reorder-section,
.mount-momentum-container .mount-momentum-step .remove-item-section {
  width: 30px;
  vertical-align: bottom;
  padding-top: 60px;
  opacity: 0;
}
.mount-momentum-container .mount-momentum-step .reorder-section {
  cursor: grab;
}
.mount-momentum-container .mount-momentum-step .reorder-section:active {
  cursor: grabbing;
}
.mount-momentum-container .mount-momentum-step .remove-item-section {
  color: var(--primary-color-4);
  cursor: pointer;
}
.mount-momentum-container .mount-momentum-step .steps-reward-section {
  flex-grow: 1;
  border-right: 2px #ddd dashed;
}
.mount-momentum-container .mount-momentum-step .step-input {
  margin-top: 5px;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 5px;
}
.mount-momentum-container .mount-momentum-step .step-input .label {
  width: 60px;
  margin-right: 10px;
}
.mount-momentum-container .mount-momentum-step .step-input .input textarea {
  padding: 10px;
  height: 100px;
  width: 90%;
  border: none;
  font-family: "Fredoka-One";
  font-size: 20px;
}
.mount-momentum-container .mount-momentum-step .worry-level-section {
  width: 250px;
  padding-left: 25px;
  height: 100%;
  position: relative;
  border-right: 2px #ddd dashed;
  margin-right: 10px;
}
.mount-momentum-container .mount-momentum-step .worry-level-section .tooltip {
  position: absolute;
  left: -300px;
  top: 30px;
  width: 250px;
  background: #fff;
  border: 4px solid #f00;
  border-radius: 8px;
  color: #000;
  padding: 20px;
  z-index: 100;
}
.mount-momentum-container .mount-momentum-step .worry-level-section .tooltip .arrow {
  border-right: none !important;
  border-left: 22px solid #f00;
  position: absolute;
  right: -22px;
  top: 50%;
  margin-left: -13px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.mount-momentum-container .mount-momentum-step .done-section {
  color: #668899;
  height: 100%;
}
.mount-momentum-container .mount-momentum-step .done-section .done-button {
  width: 100px;
  border-radius: 4px;
  padding: 10% 20px;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 90%;
  background: #ddd;
}
.mount-momentum-container .mount-momentum-step .done-section .done-button:hover, .mount-momentum-container .mount-momentum-step .done-section .done-button.completed {
  background: #b9d169;
  color: #fff;
  cursor: pointer;
}
.mount-momentum-container .mount-momentum-step .done-section .done-button .label {
  margin: 5px 0;
}
.mount-momentum-container .mount-momentum-step .done-section .done-button svg {
  margin: 15px 0;
}
.mount-momentum-container .mountains-section {
  width: 75%;
  margin: auto;
  margin-top: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.mount-momentum-container .mountains-section .mountain {
  background: #fff;
  background-repeat: no-repeat;
  margin-right: 30px;
  margin-bottom: 30px;
  padding: 15px 10px;
  color: #000;
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
  box-shadow: 8px 7px 3px 1px rgba(64, 57, 57, 0.3882352941);
}
.mount-momentum-container .mountains-section .mountain .mountain-number {
  width: 20px;
  display: inline-block;
  margin-left: -25px;
}
.mount-momentum-container .mountains-section .mountain .mountain-name {
  display: inline-block;
  min-width: 120px;
  font-family: sniglet;
}
.mount-momentum-container .mountains-section .mountain .right-side-stripes {
  width: 20px;
}
.mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe {
  width: 15px;
  height: 5px;
  position: absolute;
  right: 0;
  background: #000;
}
.mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe-1 {
  top: 20%;
}
.mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe-2 {
  top: 50%;
}
.mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe-3 {
  top: 80%;
}
.mount-momentum-container .climbing-plans-header {
  display: flex;
  font-family: "Chewy";
}
.mount-momentum-container .climbing-plans-header .left-side-images {
  width: 20%;
  margin: 30px;
  display: inline-block;
}
.mount-momentum-container .climbing-plans-header .left-side-images .climbing-header-image {
  background-repeat: no-repeat;
  height: 100px;
}
.mount-momentum-container .climbing-plans-header .left-side-images .climbing-person-image {
  height: 170px;
  width: 50%;
  margin-left: 25%;
  margin-top: -30px;
  background-size: contain;
}
.mount-momentum-container .climbing-plans-header .right-side-text {
  width: 70%;
  margin: 30px 10% 0px -30px;
  display: inline-block;
  text-align: center;
}
.mount-momentum-container .climbing-plans-header .right-side-text .climbing-plans-description {
  font-size: 32px;
  color: #fff;
  width: 70%;
  margin-left: 15%;
}
.mount-momentum-container .climbing-plans-header .right-side-text .links {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.climbing-plans .mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe {
  background: #6cb1cb !important;
}

.climbing-plans .participant-application-view.teenager .mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe {
  background: #273960 !important;
}

.climbing-plans .participant-application-view.child .mount-momentum-container .mountains-section .mountain .right-side-stripes .stripe {
  background: #6cb1cb !important;
}

.climbing-plans .mount-momentum-container .mount-momentum-step .worry-level-section {
  width: 200px !important;
  padding-top: 15px !important;
}
.climbing-plans .mount-momentum-container .cw-gauge--wrapper {
  width: 225px !important;
  height: 150px !important;
  background-size: contain;
}
.climbing-plans .mount-momentum-container .cw-gauge--wrapper .cw-gauge--needle {
  background-size: contain;
  width: 100px !important;
  transform-origin: 65px 15px !important;
}
.climbing-plans .mount-momentum-container .cw-gauge--wrapper .cw-gauge--reading-container > div {
  transform-origin: 50% 80% !important;
  font-size: 1rem;
  left: -40px !important;
  width: 30px;
}

.container {
  position: relative;
}

.createmessage {
  position: fixed;
  padding: 20px;
  border: none;
  font-size: 25px;
  border-radius: 100%;
  right: 40px;
  bottom: 80px;
  background-color: #344D90;
  color: white;
  box-shadow: 1px 1px 10px rgb(153, 153, 153);
  z-index: 2;
}
@media (max-width: 500px) {
  .createmessage {
    padding: 15px;
    right: 20px;
    bottom: 20px;
  }
}

.inbox .participant-application-view .right-participant-view .container {
  overflow: scroll !important;
}

.inbox-component .module-filter-center {
  justify-content: space-between;
}
@media (max-width: 1000px) {
  .inbox-component .module-filter-center {
    flex-direction: column-reverse !important;
  }
}
@media (max-width: 1000px) {
  .inbox-component .module-filter-center .searchmodule {
    width: calc(100% - 80px);
    margin: 20px 20px;
  }
}
.inbox-component .choose-option123 .res,
.inbox-component .choose-option123 .pt {
  background-color: white;
  color: black;
}
.inbox-component .choose-option123 .res.selected,
.inbox-component .choose-option123 .pt.selected {
  background-color: #345D90;
  color: white;
}
@media (max-width: 1000px) {
  .inbox-component .choose-option123 {
    width: 100%;
    transform: translateY(-20px);
  }
}
.inbox-component .choose-option123 div {
  width: 50%;
  text-align: center;
}
.inbox-component .receivedmessage {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 10px rgb(238, 238, 238);
  border-radius: 10px;
}
@media (max-width: 500px) {
  .inbox-component .receivedmessage {
    padding: 10px;
  }
}
.inbox-component .receivedmessage h1 {
  font-size: 25px;
  padding: 0px 20px;
}
@media (max-width: 500px) {
  .inbox-component .receivedmessage h1 {
    padding: 10px 20px;
    padding-bottom: 0px;
    font-size: 20px;
  }
}
.inbox-component .receivedmessage .each_messages {
  margin: 10px auto;
  padding: 20px;
  position: relative;
}
.inbox-component .receivedmessage .each_messages .info-box {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
}
.inbox-component .receivedmessage .each_messages .info-box img {
  height: 60px;
  width: 60px;
  object-fit: cover;
}
.inbox-component .receivedmessage .each_messages .info-box p {
  font-size: 20px;
  padding: 20px;
  font-weight: 500;
}
.inbox-component .receivedmessage .each_messages .view {
  position: absolute;
  right: 80px;
  top: 20px;
  background-color: white;
  font-size: 18px;
  text-transform: lowercase;
  color: #344D90;
  padding: 7px 20px;
  border-radius: 29px;
  border: 1px solid #344D90;
  opacity: 0.9;
  transition: 0.3s all ease;
}
@media (max-width: 500px) {
  .inbox-component .receivedmessage .each_messages .view {
    right: 0px;
    top: 5px;
    font-size: 16px;
    padding: 4px 10px;
  }
}
.inbox-component .receivedmessage .each_messages .view:hover {
  opacity: 1;
  background-color: #344D90;
  color: white;
}
@media (max-width: 500px) {
  .inbox-component .receivedmessage .each_messages .closesendmessage {
    right: 0px;
    top: -30px;
    font-size: 16px;
  }
}
.inbox-component .receivedmessage .each_messages .lastline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.inbox-component .receivedmessage .each_messages .newmessage {
  text-align: left;
  font-size: 14px;
  background-color: #344D90;
  color: white;
  border-radius: 29px;
  padding: 4px 10px;
  height: 18px;
  margin-top: 15px;
}
.inbox-component .receivedmessage .each_messages .timereceived {
  text-align: right;
  padding-top: 20px;
  font-size: 14px;
}
.inbox-component .receivedmessage .messagetextarea {
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100vh - 700px);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  border: 1px solid rgb(231, 231, 231);
}
@media (max-width: 500px) {
  .inbox-component .receivedmessage .messagetextarea {
    height: 300px;
    font-size: 14px;
  }
}
.inbox-component .receivedmessage .sendmessage {
  background-color: #344D90;
  color: white;
  padding: 9px 20px;
  font-size: 18px;
  width: 90%;
  border-radius: 29px;
  max-width: 250px;
  display: block;
  margin: auto;
  transform: translateY(20px);
  border: none;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.inbox-component .receivedmessage .sendmessage:hover {
  opacity: 1;
}
.inbox-component .receivedmessage .nomessagesavailable {
  text-align: center;
  padding: 40px;
  font-weight: 300;
}
.inbox-component .sentmessages {
  padding: 20px 50px;
  overflow: scroll;
  height: calc(100vh - 420px);
}
@media (max-width: 670px) {
  .inbox-component .sentmessages {
    padding: 10px 0px;
  }
}
.inbox-component .sentmessages .message-box {
  white-space: pre-line;
}
.inbox-component .sentmessages .message-box p {
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
}
.inbox-component .sentmessages textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
.inbox-component .each_messages {
  border-bottom: 1px solid rgb(231, 231, 231);
}

.container-checkbox p {
  font-size: 18px;
}

.each-part .space-checkbox {
  margin-right: 24px;
}
.each-part .span-space {
  padding: 7px;
}
.each-part .module-filter-center .orderbyselector {
  width: 27rem;
}
@media (max-width: 670px) {
  .each-part .module-filter-center .orderbyselector {
    width: 100% !important;
    margin: 0;
  }
}

.pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
}
.pagination_view .chev {
  cursor: pointer;
}
.pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.pagination_view .pre {
  z-index: 100;
}
.pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.pagination_view .nex {
  position: absolute;
  right: 40px;
}

.dot {
  color: white;
}

.writemessage {
  margin-top: 40px;
}
@media (max-width: 500px) {
  .writemessage {
    margin-top: 20px;
  }
}

.participant_inbox {
  border: 1px solid var(--primary-color-2);
  border-bottom: 3px solid var(--primary-color-2);
  border-right: 3px solid var(--primary-color-2);
}

.participant_buttons {
  border: 1px solid var(--primary-color-2) !important;
  color: var(--primary-color-2) !important;
  border-radius: 5px !important;
}
.participant_buttons:hover {
  background-color: var(--primary-color-2) !important;
  color: white !important;
}

.newmessage-heading {
  border-radius: 1rem 1rem 0rem 0rem;
  padding: 24px 0 !important;
  justify-content: center;
  background: #344D90;
}

.no-padding {
  padding: 0 !important;
}

dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  margin: -1px 0 0 22px;
}

.dropdown dd {
  position: relative;
}

.hida {
  padding: 10px 20px !important;
}

.dropdown a,
.dropdown a:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}

.dropdown dt a {
  background-color: #efefef;
  display: block;
  width: 27rem;
  height: 40px;
  border-radius: 10px;
  color: black;
}
@media (max-width: 670px) {
  .dropdown dt a {
    width: 100% !important;
    margin: 0;
  }
}

.dropdown dt a span,
.multiSel span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0;
}

.multiSel {
  height: 13px;
  overflow: hidden;
  padding: 10px 20px;
}

.dropdown dd ul {
  font-size: 14px;
  background-color: #efefef;
  border: 0;
  display: none;
  left: 0px;
  padding: 0px 0px 0px 18px;
  position: absolute;
  top: 2px;
  width: 243px;
  color: black;
  list-style: none;
  height: auto;
  overflow: auto;
  z-index: 1;
}

.mutliSelect ul li input {
  margin: 0 14px 0 0;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li {
  padding: 5px;
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #fff;
}

.message-box {
  white-space: pre-line;
}

.container.participant-container.feelingstrackerpage.childback {
  background-color: #28B4CC !important;
}

.container.participant-container.feelingstrackerpage.teenback {
  background-color: #1A3A61 !important;
}

.feelingtrackercomponent {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  padding-top: 30px;
}
@media (max-width: 900px) {
  .feelingtrackercomponent {
    flex-direction: column;
  }
}
.feelingtrackercomponent .eachrow {
  width: 50%;
}
@media (max-width: 900px) {
  .feelingtrackercomponent .eachrow {
    width: 100%;
    margin-bottom: 20px;
  }
}
.feelingtrackercomponent .eachrow .box {
  width: calc(95% - 40px);
  padding: 20px 20px;
  margin: auto;
  border-radius: 29px;
  min-height: 500px;
  background-color: white;
  position: relative;
}
.feelingtrackercomponent .eachrow .box h1 {
  text-align: center;
  padding: 20px;
  color: #1A3A61;
  font-family: "Chewy";
  font-weight: 400;
}
.feelingtrackercomponent .eachrow button {
  color: white;
  border: none;
  font-size: 20px;
  width: 250px;
  height: 100px;
  margin: 20px auto;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
}
.feelingtrackercomponent .eachrow .button_anx_child {
  background-image: url(/assets/feelingstracker/infobutton_anx_child.svg);
}
.feelingtrackercomponent .eachrow .button_anx_teen {
  background-image: url(/assets/feelingstracker/infobutton_anx_teen.svg);
}
.feelingtrackercomponent .eachrow .button_mood_child {
  background-image: url(/assets/feelingstracker/infobutton_dep_child.svg);
}
.feelingtrackercomponent .eachrow .button_mood_teen {
  background-image: url(/assets/feelingstracker/infobutton_dep_teen.svg);
}
.feelingtrackercomponent .eachrow .button_assresults_child {
  background-image: url(/assets/feelingstracker/tellme_child.svg);
  color: #1A3A61;
  font-family: "Chewy";
}
.feelingtrackercomponent .eachrow .button_assresults_teen {
  background-image: url(/assets/feelingstracker/tellme_teen.svg);
  color: white;
  font-family: "Chewy";
  padding-left: 11px;
  padding-right: 11px;
}
.feelingtrackercomponent .eachrow .myassessmentreults {
  color: white;
  height: 180px;
  width: calc(100% - 40px);
  border-radius: 10px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}
.feelingtrackercomponent .eachrow .myassessmentreultsbox {
  min-height: 425px;
  background-color: transparent !important;
  border: none !important;
}
.feelingtrackercomponent div#feelingouter {
  background-color: transparent;
  border: none;
  color: #1A3A61;
  font-family: "quicksand";
  font-weight: 700;
  text-align: center;
  font-size: larger;
  padding-top: 50px;
}
.feelingtrackercomponent .feelingoutertext_child {
  color: #1A3A61;
}
.feelingtrackercomponent .feelingoutertext_teen {
  color: white;
}

.moreinfoComponent {
  display: none;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.363);
}
.moreinfoComponent .innercomponent {
  padding: 30px;
  background-color: white;
  margin: auto;
  border-radius: 29px;
  border: 2px solid var(--primary-color-2);
  border-bottom: 10px solid var(--primary-color-2);
  border-right: 10px solid var(--primary-color-2);
  width: calc(95% - 60px);
  max-width: 1000px;
  height: calc(95% - 60px);
  max-height: 700px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.moreinfoComponent .innercomponent .close {
  position: absolute;
  right: 30px;
  top: 20px;
  cursor: pointer;
  color: var(--primary-color-2);
}
.moreinfoComponent .innercomponent h1 {
  text-align: center;
}
.moreinfoComponent .innercomponent p {
  padding: 20px 0px;
}
.moreinfoComponent .innercomponent iframe {
  width: 100%;
  margin-top: 20px;
  height: calc(100% - 80px);
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}

.graphtext {
  display: none;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
}

#my_dataviz, #my_dataviz1 {
  transform: translateY(40px);
}

.assessmentresultcomponent {
  padding: 50px 30px;
  background-color: white;
  margin: 40px auto;
  border-radius: 29px;
  border: 2px solid var(--primary-color-2);
  border-bottom: 10px solid var(--primary-color-2);
  border-right: 10px solid var(--primary-color-2);
  width: calc(100% - 60px);
}
.assessmentresultcomponent table {
  width: 100%;
}
@media (max-width: 700px) {
  .assessmentresultcomponent table {
    display: none;
  }
}
.assessmentresultcomponent table a {
  color: var(--primary-color-2);
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.assessmentresultcomponent table a:hover {
  opacity: 1;
}
.assessmentresultcomponent td, .assessmentresultcomponent th {
  border-bottom: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}
.assessmentresultcomponent .table_mobile {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--primary-color-2);
}
@media (min-width: 700px) {
  .assessmentresultcomponent .table_mobile {
    display: none;
  }
}
.assessmentresultcomponent .table_mobile div {
  display: flex;
  flex-direction: row;
  font-weight: 700;
}
.assessmentresultcomponent .table_mobile div span {
  padding-bottom: 5px;
}
.assessmentresultcomponent .table_mobile div .data {
  text-align: center;
  font-weight: 300;
  width: calc(100% - 150px);
}
.assessmentresultcomponent .table_mobile div .title {
  width: 150px;
}
.assessmentresultcomponent .table_mobile div a {
  color: var(--primary-color-2);
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.assessmentresultcomponent .table_mobile div a:hover {
  opacity: 1;
}

.feelingstracker_header {
  font-family: "MoreSugar";
  text-shadow: 5px 5px rgba(0, 0, 0, 0.3137254902) !important;
  color: #D4B483 !important;
}

.feelingstracker_header.teenheader {
  font-family: "MoreSugar";
  text-shadow: 5px 5px rgba(0, 0, 0, 0.3137254902) !important;
  color: #D4B483 !important;
}

.feelingstracker_header.childheader {
  font-family: "MoreSugar";
  text-shadow: 5px 5px rgba(0, 0, 0, 0.3137254902) !important;
  color: #ffffff !important;
}

.p_h3 {
  font-size: 30px;
  font-family: "Chewy";
  text-shadow: 2px 2px rgba(0, 0, 0, 0.3137254902);
  font-weight: 400;
  padding: 0px 60px 10px 60px;
  color: white;
  text-align: center;
}

#my_dataviz line {
  opacity: 0;
}

#my_dataviz1 line {
  opacity: 0;
}

.user_management_component_container {
  padding: 0px 0px !important;
}

.user_management_component,
.study-analytics-table {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: calc(100vh - 100px);
}
.user_management_component .left,
.study-analytics-table .left {
  width: 220px;
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.user_management_component .left a,
.study-analytics-table .left a {
  text-align: center;
  padding: 10px 20px;
  font-weight: 400;
  font-size: 18px;
  transition: 0.3s all ease;
}
.user_management_component .left a:hover,
.study-analytics-table .left a:hover {
  background-color: #344D90;
  color: white;
  cursor: pointer;
}
.user_management_component .left a.active,
.study-analytics-table .left a.active {
  background-color: #344D90;
  color: white;
  cursor: pointer;
}
.user_management_component .right,
.study-analytics-table .right {
  padding: 20px 0px;
  width: 100%;
  overflow-y: scroll;
}
.user_management_component .right .module-filter-center,
.study-analytics-table .right .module-filter-center {
  margin: 0px auto !important;
  padding: 0px 20px !important;
}
.user_management_component .right .pagination_view,
.study-analytics-table .right .pagination_view {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  height: 20px;
}
.user_management_component .right .pagination_view .chev,
.study-analytics-table .right .pagination_view .chev {
  cursor: pointer;
}
.user_management_component .right .pagination_view .chev:hover,
.study-analytics-table .right .pagination_view .chev:hover {
  transition: 0.3s all ease;
  color: #344D90;
}
.user_management_component .right .pagination_view .pre,
.study-analytics-table .right .pagination_view .pre {
  z-index: 100;
}
.user_management_component .right .pagination_view .pg,
.study-analytics-table .right .pagination_view .pg {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.user_management_component .right .pagination_view .nex,
.study-analytics-table .right .pagination_view .nex {
  position: absolute;
  right: 40px;
}
.user_management_component .right .tablediv,
.study-analytics-table .right .tablediv {
  margin: auto;
  width: calc(100% - 40px);
  padding-bottom: 20px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  background-color: rgb(255, 255, 255);
  padding: 10px 0px;
}
.user_management_component .right .tablediv a:hover,
.study-analytics-table .right .tablediv a:hover {
  text-decoration: underline !important;
}
.user_management_component .right table,
.study-analytics-table .right table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
.user_management_component .right td, .user_management_component .right th,
.study-analytics-table .right td,
.study-analytics-table .right th {
  padding: 12px 8px;
  text-align: center;
}
.user_management_component .right td .edit-user, .user_management_component .right th .edit-user,
.study-analytics-table .right td .edit-user,
.study-analytics-table .right th .edit-user {
  font-size: 16px;
}
.user_management_component .right td .edit-user:hover, .user_management_component .right th .edit-user:hover,
.study-analytics-table .right td .edit-user:hover,
.study-analytics-table .right th .edit-user:hover {
  color: #344D90;
}
.user_management_component .right td button,
.study-analytics-table .right td button {
  border: none;
  padding: 8px 20px;
  background-color: #344D90;
  border-radius: 5px;
  color: white;
  font-weight: 500;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.user_management_component .right td button:hover,
.study-analytics-table .right td button:hover {
  opacity: 1;
}
.user_management_component .right tr:nth-child(even),
.study-analytics-table .right tr:nth-child(even) {
  background-color: #fafafa;
}
.user_management_component .right .edit-user,
.study-analytics-table .right .edit-user {
  text-align: center;
  cursor: pointer;
}
.user_management_component .right .researchers-name,
.study-analytics-table .right .researchers-name {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: scroll;
}
.user_management_component .right .researchers-name .groupName,
.study-analytics-table .right .researchers-name .groupName {
  font-size: 18px;
}
.user_management_component .right .researchers-name .padding-botttom,
.study-analytics-table .right .researchers-name .padding-botttom {
  padding: 5px 0px;
}
.user_management_component .right .researchers-name p,
.study-analytics-table .right .researchers-name p {
  padding: 2px 0px;
}
.user_management_component .right .variables-name,
.study-analytics-table .right .variables-name {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
  margin: auto;
}
.user_management_component .right .variables-name .comma:empty,
.study-analytics-table .right .variables-name .comma:empty {
  display: none;
}
.user_management_component .right .variables-name .comma:not(:first-child):before,
.study-analytics-table .right .variables-name .comma:not(:first-child):before {
  content: ", ";
}
.user_management_component .right .variables-name .comma:empty + .comma:not(:empty):before,
.study-analytics-table .right .variables-name .comma:empty + .comma:not(:empty):before {
  content: "";
}
.user_management_component .right .variables-name .comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before,
.study-analytics-table .right .variables-name .comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before {
  content: ", ";
  padding-right: 10px;
}

.create-group-component .hover_bkgr_fricc-group-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-group-component .hover_bkgr_fricc-group-comp > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 90%;
  max-height: 440px;
  width: 800px;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-50%);
  top: 50%;
}
@media (max-width: 800px) {
  .create-group-component .hover_bkgr_fricc-group-comp > div {
    width: 90%;
  }
}
.create-group-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
@media (max-height: 900px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp select {
  width: 540px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .study-comp select.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box p {
  text-align: center;
  font-size: 14px;
  transform: translateY(-20px);
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .condition {
  margin: auto;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .condition p {
  padding-top: 3px;
  font-size: 16px !important;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-group-component .hover_bkgr_fricc-group-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}

.copy_link {
  text-decoration: underline;
  cursor: pointer;
}
.copy_link:hover {
  color: #344D90;
}

.choose-option123 {
  display: flex;
  flex-direction: row;
  background-color: white;
  height: 40px;
  border-radius: 29px;
  margin-top: 30px;
  text-transform: uppercase;
}
.choose-option123 div {
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s all ease;
}
.choose-option123 div:hover {
  color: white;
  background-color: #344D90;
}
.choose-option123 .res {
  color: white;
  background-color: #344D90;
  border-top-left-radius: 29px;
  border-bottom-left-radius: 29px;
}
.choose-option123 .pt {
  border-top-right-radius: 29px;
  border-bottom-right-radius: 29px;
}

.noav {
  text-align: center;
  font-size: 20px;
  padding: 80px 20px;
  color: gray;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  top: 40%;
  font-weight: 300;
}

.links_component {
  padding: 50px;
  position: relative;
}
.links_component .top_links {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.links_component .outer_box {
  width: 300px;
}
.links_component .outer_box h5 {
  padding: 10px 0px;
}
.links_component .search_input_select {
  width: 300px;
  background-color: white;
  border: 1px solid #ddd;
}
.links_component .search_input_select input {
  width: calc(100% - 40px);
  margin: 0px;
  border-radius: 0px;
  border-bottom: 1px solid #ddd;
}
.links_component .search_input_select .search_data {
  height: 300px;
  overflow-y: scroll;
}
.links_component .search_input_select .search_data .each_search_data {
  padding: 10px 20px;
  font-weight: 300;
  border-bottom: 1px solid rgba(221, 221, 221, 0.226);
}
.links_component .search_input_select .search_data .each_search_data:hover {
  background-color: rgba(52, 77, 144, 0.2);
  cursor: pointer;
}
.links_component .search_input_select .search_data .active {
  background-color: rgba(52, 77, 144, 0.2);
}
.links_component .search_input_select.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.links_component .globalbutton {
  width: 500px;
  height: 40px;
  display: block;
  margin: 60px auto;
}
.links_component .copy_link {
  padding: 20px;
  background-color: white;
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: row;
  position: relative;
}
.links_component .copy_link a {
  position: absolute;
  right: 20px;
  padding: 7px 8px;
  height: 20px;
  color: white;
  background-color: #344D90;
  border-radius: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}
.links_component .copy_link p {
  font-weight: 300;
}
.links_component .error_message {
  text-align: center;
  color: red;
}
.links_component .copied {
  display: none;
  text-align: center;
  color: gray;
  padding: 10px;
  font-weight: 300;
}
.links_component .reset_link {
  position: absolute;
  right: 50px;
  top: 0px;
  border: 1px solid #344D90;
  background-color: #344D90;
  color: white;
  padding: 9px 15px;
  border-radius: 29px;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.links_component .reset_link:hover {
  opacity: 1;
}
.links_component .reset_link .indo_icon {
  padding-right: 5px;
  font-size: 12px;
}

.activecheckbox {
  width: 100px;
  margin: auto;
}
.activecheckbox .container-checkbox p {
  transform: translateY(4px) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  color: gray;
}

.rewards-section {
  height: 100vh;
  overflow-y: scroll;
}
.rewards-section .left-container {
  width: 70%;
  display: inline-block;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 0%;
}
.rewards-section .left-container .rewards-scene {
  height: 900px;
  background-color: white;
  padding-top: 50px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 50px;
}
.rewards-section .left-container .rewards-scene .reward-images {
  position: relative;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}
.rewards-section .left-container .rewards-scene .reward-images img {
  position: absolute;
  width: 100%;
}
.rewards-section .left-container .rewards-scene .reward-text {
  display: block;
  position: relative;
  top: 730px;
  padding: 0 30px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list {
  list-style-type: none;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list li {
  display: inline-block;
  margin: 2px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-darkblue {
  background: url("../assets/rewards/adornments/list-item-darkblue.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-orange {
  background: url("../assets/rewards/adornments/list-item-orange.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-lightblue {
  background: url("../assets/rewards/adornments/list-item-lightblue.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-greyblue {
  background: url("../assets/rewards/adornments/list-item-greyblue.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-gold {
  background: url("../assets/rewards/adornments/list-item-gold.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .left-container .rewards-scene .reward-text .rw-text-list .list-item-teal {
  background: url("../assets/rewards/adornments/list-item-teal.svg") no-repeat left top;
  height: 24px;
  padding-top: 7px;
  padding-left: 44px;
}
.rewards-section .avatar-section {
  height: 220px;
  border-radius: 8px;
  padding: 25px;
  display: flex;
  align-items: center;
}
.rewards-section .avatar-section img {
  height: 220px;
}
.rewards-section .avatar-section .heading {
  flex-direction: column;
  padding-right: 25%;
}
.rewards-section .avatar-section .heading .participant-heading {
  padding-left: 0px;
  padding-right: 0px;
}
.rewards-section .avatar-section .heading .settings-link {
  font-size: 2.5em;
  font-family: "quicksand";
  color: white;
  text-align: right;
  font-weight: bold;
  margin-left: 200px;
  cursor: pointer;
}
.rewards-section .right-container {
  width: 25%;
  display: block;
  float: right;
  position: relative;
  margin-right: 20px;
  height: 925px;
}
.rewards-section .right-container h2 {
  font-family: "chewy";
  font-size: 45px;
  line-height: 1.8em;
  padding-top: 15px;
  padding-left: 18px;
}
.rewards-section .right-container .badges-arrow {
  text-align: center;
  padding: 5px;
}
.rewards-section .right-container .badges-arrow img {
  width: 70px;
}
.rewards-section .right-container .rewards-badges {
  padding-left: 15%;
  padding-right: 5%;
  margin-right: 10%;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 670px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rewards-section .right-container .rewards-badges .badges-images img {
  padding-bottom: 5px;
}

.application.rewards .participant-application-view.teenager .right-participant-view {
  background: none !important;
  background-color: var(--font-color-1) !important;
}
.application.rewards .participant-application-view.teenager .right-participant-view .rewards-section .avatar-section .settings-link {
  background-image: url("../assets/profile-page/change_settings_button_teen.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  padding-bottom: 28px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.application.rewards .participant-application-view.teenager .right-participant-view .rewards-section .left-container .rewards-scene {
  background-image: url("../assets/reward_background_teen.svg");
  background-repeat: repeat-x;
  background-size: contain;
}
.application.rewards .participant-application-view.teenager .right-participant-view .rewards-section .right-container {
  background-color: #1a3a61;
  border-bottom: 24px solid #D4B483;
  background-image: url("../assets/rewards/badges/badge_surround_with_background_teen.svg");
  background-size: cover;
}
.application.rewards .participant-application-view.teenager .right-participant-view .rewards-section .right-container h2 {
  color: var(--menu-color-1);
}
.application.rewards .participant-application-view.teenager .right-participant-view .heading .participant-heading {
  color: var(--menu-color-6) !important;
  text-align: center;
}
.application.rewards .participant-application-view.teenager .right-participant-view .heading h1.participant-heading.p_h1 {
  text-shadow: 2px 2px #343232;
  font-size: 4em;
  font-family: "Moresugar";
}
.application.rewards .participant-application-view.child .right-participant-view {
  background: none !important;
  background-color: var(--menu-color-2) !important;
}
.application.rewards .participant-application-view.child .right-participant-view .rewards-section .avatar-section .settings-link {
  background-image: url("../assets/profile-page/change_settings_button_child.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  padding-bottom: 28px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.application.rewards .participant-application-view.child .right-participant-view .rewards-section .left-container .rewards-scene {
  background-image: url("../assets/reward_background_child.svg");
  background-repeat: repeat-x;
  background-size: contain;
}
.application.rewards .participant-application-view.child .right-participant-view .rewards-section .right-container {
  background-color: white;
  border-bottom: 24px solid #FF5757;
  background-image: url("../assets/rewards/badges/badge_surround_with_background_child.svg");
  background-size: cover;
}
.application.rewards .participant-application-view.child .right-participant-view .rewards-section .right-container h2 {
  color: var(--menu-color-1);
}
.application.rewards .participant-application-view.child .right-participant-view .heading .participant-heading {
  color: var(--font-color-4) !important;
  text-align: center;
}
.application.rewards .participant-application-view.child .right-participant-view .heading h1.participant-heading.p_h1 {
  text-shadow: 2px 2px #343232;
  font-size: 4em;
  font-family: "Moresugar";
}

.survey-container {
  width: 100%;
  height: 700px;
}

.button-container {
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .button-container {
    flex-direction: column;
  }
}
.button-container button {
  border: solid 1px #344D90;
  padding: 10px 25px;
  border-radius: 29px;
  background-color: #344D90;
  color: white;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.button-container button:hover {
  opacity: 1;
}

.survey-researcher-alert .hover_bkgr_fricc-study-module3 {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  max-height: 730px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 800px) {
  .survey-researcher-alert .hover_bkgr_fricc-study-module3 > div {
    width: 90%;
  }
}
.survey-researcher-alert .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box {
  width: 90%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .head {
  margin: 10px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .study-comp p {
  text-align: center;
  padding-bottom: 20px;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .buttons {
  display: flex;
  flex-direction: row;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .update-button {
  width: 40%;
  max-width: 300px;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin: 20px auto;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
  }
}
@media (max-width: 400px) {
  .survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
  }
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .closingsurvey {
  padding-top: 0px;
  padding: 20px 0px;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .closingsurvey .closingline {
  width: 100%;
  height: 3px;
  background-color: #344D90;
  opacity: 0.4;
  animation-name: changeWidth;
  animation-duration: 62s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes changeWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box .closingsurvey p {
  text-align: center;
  padding-top: 10px;
  font-size: 14px;
  color: gray;
}
.survey-researcher-alert .hover_bkgr_fricc-study-module3 .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.survey-researcher-alert .modulenameexist {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  color: red;
  font-weight: 400;
}

.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  max-height: 730px;
  width: 800px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 800px) {
  .survey-researcher-alert1 .hover_bkgr_fricc-study-module1 > div {
    width: 90%;
  }
}
.survey-researcher-alert1 .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box {
  width: 90%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
}
@media (max-height: 900px) {
  .survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box {
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .head {
  margin: 10px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .study-comp p {
  text-align: center;
  padding-bottom: 20px;
  font-size: 20px;
  font-weight: 300;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .update-button {
  width: 200px;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin: 20px auto;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
  }
}
@media (max-width: 400px) {
  .survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
  }
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .closingsurvey {
  padding-top: 0px;
  padding: 20px 0px;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .closingsurvey .closingline {
  width: 100%;
  height: 3px;
  background-color: #344D90;
  opacity: 0.4;
  animation-name: changeWidth;
  animation-duration: 62s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes changeWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .closingsurvey p {
  text-align: center;
  padding-top: 10px;
  font-size: 14px;
  color: gray;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box .twobuttons {
  display: flex;
  flex-direction: row;
}
.survey-researcher-alert1 .hover_bkgr_fricc-study-module1 .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.survey-researcher-alert1 .modulenameexist {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  color: red;
  font-weight: 400;
}

.survey-preview-component {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border-radius: 10px;
  max-width: 100%;
  margin: auto;
  padding: 20px;
  border-radius: 20px;
  max-height: calc(100% - 140px);
  overflow-y: scroll;
}

.lock_assigned_to_label {
  background-color: #344D90;
  max-width: 400px;
  border-radius: 10px;
  color: white;
  padding: 20px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  letter-spacing: 1px;
}

/* Adding additional styling for survey */
.sv-dropdown__value input {
  border: none;
  box-shadow: none;
  background: transparent;
}

.sv-dropdown[aria-expanded=true] .sv-dropdown__value {
  position: absolute;
  margin-top: -20px;
}

.sv-dropdown {
  width: 40%;
  position: relative;
}

.sv-dropdown_clean-button-svg {
  width: 20px;
  position: absolute;
  left: 90%;
  top: -20px;
  cursor: pointer;
  height: 20px;
}

.sv-dropdown[aria-expanded=true] .sv-dropdown_clean-button-svg {
  top: 0px;
}

.sv-dropdown_clean-button {
  position: relative;
}

.sv-dropdown__hint-suffix {
  display: none;
}

.sv-root-modern .sv-boolean__slider {
  background-color: white;
}

.sv-root-modern .sv-boolean__switch {
  background-color: rgb(26, 179, 148);
}

.sv-btn.sv-btn--navigation {
  background-color: var(--menu-color-4) !important;
}

@media (max-width: 1200px) {
  .survey-preview-component {
    max-height: calc(100% - 250px);
  }
}
.heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}

.profile {
  width: 95%;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  position: relative;
}
@media (max-width: 820px) {
  .profile {
    flex-direction: column;
    justify-content: space-evenly;
    width: 90%;
  }
}
.profile .left-part {
  height: 100%;
  margin: auto;
}
.profile .left-part .profile-pic {
  margin: 50px 50px;
  height: 250px;
  width: 250px;
  border-radius: 100%;
  background-image: url("../assets/profile-picture.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
@media (max-width: 820px) {
  .profile .left-part .profile-pic {
    margin: 50px auto;
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  .profile .left-part .profile-pic {
    margin: 50px auto;
    margin-bottom: 0px;
  }
}
.profile .right-part {
  height: 100%;
  width: 70%;
}
@media (max-width: 820px) {
  .profile .right-part {
    padding: 50px 0px;
    padding-top: 0px;
    margin: 0px auto;
    width: calc(100% - 100px);
  }
}
@media (max-width: 500px) {
  .profile .right-part {
    padding: 30px 20px;
    padding-top: 0px;
    width: calc(100% - 40px);
  }
}
.profile .right-part .name {
  padding: 50px;
  padding-bottom: 20px;
  font-weight: 400;
  margin-top: 30px;
}
.profile .right-part .dob {
  padding: 10px 50px;
  padding-bottom: 0px;
  font-weight: 400;
  padding-bottom: 20px;
}
.profile .right-part .status {
  padding: 10px 50px;
  padding-bottom: 0px;
  font-weight: 400;
}
.profile .right-part .d1 {
  font-size: 14px;
  font-weight: 400;
  width: 100px;
  color: gray;
}
.profile .right-part .d2 {
  font-size: 24px;
  font-weight: 300;
}
@media (max-width: 500px) {
  .profile .right-part .d2 {
    font-size: 20px;
  }
}
.profile .edit-button {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
}
.profile .edit-button:hover {
  opacity: 1;
}
@media (max-width: 500px) {
  .profile .edit-button {
    right: 20px;
    top: 20px;
  }
}
.profile .edit-button .edit-icon {
  color: var(--primary-color-1);
  font-size: 20px;
  opacity: 0.9;
}
.profile .edit-profile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 50px 100px;
  padding-left: 0px;
}
@media (max-width: 1000px) {
  .profile .edit-profile {
    flex-direction: column;
    padding: 50px 20px;
  }
}
@media (max-width: 820px) {
  .profile .edit-profile {
    flex-direction: column;
    padding: 20px;
  }
}
.profile .edit-profile .profile-input {
  background-color: #fafafa;
}
@media (max-width: 1000px) {
  .profile .edit-profile .profile-input {
    margin-bottom: 0px;
  }
}
.profile .edit-profile .profile-button {
  margin: 30px auto;
  width: 100%;
}
@media (max-width: 1000px) {
  .profile .edit-profile .profile-button {
    margin-bottom: 0px;
  }
}
.profile .edit-profile .input-row {
  width: 48%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000px) {
  .profile .edit-profile .input-row {
    width: 100%;
  }
}
.profile .upload-image {
  margin: 50px 50px;
  height: 250px;
  width: 250px;
  border-radius: 10px;
  background-color: #fafafa;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 820px) {
  .profile .upload-image {
    margin: 50px auto;
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  .profile .upload-image {
    margin: 50px auto;
    margin-bottom: 0px;
  }
}

.settings {
  width: 95%;
  margin: 50px auto;
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  position: relative;
  padding-bottom: 50px;
}
@media (max-width: 820px) {
  .settings {
    width: 90%;
  }
}
.settings .settings-head {
  padding: 50px;
  padding-bottom: 20px;
  font-weight: 400;
}
.settings .current-theme {
  padding: 0px 50px;
  font-weight: 400;
  font-size: 16px;
  padding-bottom: 10px;
}
.settings .theme-colors {
  padding: 0px 50px;
}
.settings .theme-colors .box-color {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  display: inline-block;
  margin-top: 10px;
  border: 1px solid transparent;
}
.settings .theme-colors .box-color:hover {
  border: 1px solid #000;
}
.settings .theme-colors .color-secondary-white {
  background-color: white;
  box-shadow: 1px 1px 10px #bbbaba;
}
.settings .theme-colors .color-primary-black {
  background-color: black;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary {
  background-color: #4281A4;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary1 {
  background-color: #48A9A6;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-secondary {
  background-color: #D4B483;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-secondary1 {
  background-color: #C1666B;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-11 {
  background-color: #003E8F;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-22 {
  background-color: #28B4CC;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-33 {
  background-color: #EF5406;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-44 {
  background-color: #19C89C;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-55 {
  background-color: #822EB2;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors1 .color-primary-66 {
  background-color: #FACE03;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary {
  background-color: #28B4CC;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary1 {
  background-color: #19C89C;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-secondary {
  background-color: #FACE03;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-secondary1 {
  background-color: #822EB2;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-1 {
  background-color: #4281A4;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-2 {
  background-color: #7C606B;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-3 {
  background-color: #C1666B;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-4 {
  background-color: #48A9A6;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-5 {
  background-color: #1A3A61;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .theme-colors2 .color-primary-6 {
  background-color: #D4B483;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
}
.settings .select-theme {
  cursor: pointer;
  float: left;
}
.settings .select-theme .profile-thumb-contrast {
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_shared/icon-contrast-theme.png);
  background-size: cover;
}
.settings .select-theme .profile-thumb-default {
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_shared/icon-default-theme.png);
  background-size: cover;
}
.settings .guardian-report-generate {
  display: none;
}
.settings .get-report {
  cursor: pointer;
  color: #fff;
  background-color: #5632a8;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  height: -webkit-fill-available;
  width: fit-content;
  border-radius: 10px;
  margin: 4% 7%;
}
.settings .report-heading {
  font-family: Roboto;
  font-size: 22px;
  font-weight: bold;
}
.settings .report-description {
  font-family: Roboto !important;
  font-size: 19px !important;
}
.settings .choose-theme {
  background-color: #fafafa;
  color: gray;
  margin: 20px 50px;
  border-radius: 10px;
  padding: 20px 0px;
  border: solid 2px #fafafa;
}
.settings .choose-theme .theme-copy {
  padding: 10px 0px;
  text-align: center;
}
@media (max-width: 500px) {
  .settings .choose-theme {
    width: calc(100% - 100px);
  }
}
.settings .edit-button {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
}
.settings .edit-button:hover {
  opacity: 1;
}
@media (max-width: 500px) {
  .settings .edit-button {
    right: 20px;
    top: 20px;
  }
}
.settings .edit-button .edit-icon {
  color: var(--primary-color-1);
  font-size: 20px;
  opacity: 0.9;
}
.settings .themebutton {
  width: 300px;
  margin: 100px 100px 0px 0px !important;
  position: relative;
}
@media (max-width: 1000px) {
  .settings .themebutton {
    margin: 100px auto 0px auto !important;
  }
}
@media (max-width: 1000px) {
  .settings .themebutton {
    margin-top: 20px;
  }
}
@media (max-width: 500px) {
  .settings .themebutton {
    width: calc(100% - 100px);
  }
}
.settings .choose-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 1000px) {
  .settings .choose-inner {
    flex-direction: column;
  }
}
.settings .supportform {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 50px;
}
@media (max-width: 700px) {
  .settings .supportform {
    flex-direction: column;
  }
}
@media (max-width: 820px) {
  .settings .supportform {
    padding: 0px 20px;
  }
}
.settings .supportform input {
  margin: 10px 0px;
  max-width: 400px;
}
.settings .supportform .participant-button {
  margin: 0px;
  margin-top: 20px;
  width: 100%;
  max-width: 440px;
}
.settings .supportform .each_permission {
  max-width: 440px;
}
.settings .supportform .each_permission .title {
  transform: translateY(15px);
}
.settings .supportform .each-row {
  width: 48%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .settings .supportform .each-row {
    width: 100%;
  }
}
.settings button {
  border: none;
  color: var(--primary-color-2);
  background-color: rgba(255, 255, 255, 0);
  font-size: 18px;
  margin: auto;
  display: block;
  text-decoration: underline;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.settings button:hover {
  opacity: 1;
}
.settings .supporttable .assessmentresultcomponent {
  border: none;
  margin: 0px !important;
}
.settings .close {
  position: absolute;
  right: 50px;
  top: 50px;
}
@media (max-width: 600px) {
  .settings .close {
    right: 20px;
    top: 20px;
  }
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

.participant-profile {
  border-radius: 29px;
  border: 2px solid var(--primary-color-2);
  border-bottom: 10px solid var(--primary-color-2);
  border-right: 10px solid var(--primary-color-2);
}
.participant-profile .name {
  padding-top: 40px !important;
}
.participant-profile .name .d1, .participant-profile .dob .d1, .participant-profile .status .d1 {
  color: #166898;
  font-weight: 500;
  font-size: 20px;
  padding-bottom: 0px !important;
}
.participant-profile input {
  border: 1px solid #166898;
  color: #166898 !important;
  font-weight: 500 !important;
}
.participant-profile p {
  padding: 0px 50px;
}
.participant-profile select {
  width: calc(100% - 100px);
  max-width: 300px;
  margin: 20px 50px;
  margin-bottom: 0px;
  border: none;
  background-color: white;
  padding: 10px 20px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  border-radius: 29px;
  border: 0px solid var(--font-color-1) !important;
  border-bottom: 3px solid var(--font-color-1) !important;
  border-right: 3px solid var(--font-color-1) !important;
}
.participant-profile .participant-button {
  margin-top: 30px;
  background-color: var(--primary-color-1);
}
.participant-profile .participant-button .background-layer {
  width: 0%;
  height: 100%;
  position: absolute;
  background-color: white;
}
.participant-profile .participant-button .nav-icon-outer {
  background-color: white;
  padding: 18px 10px;
  padding-right: 30px;
  padding-left: 20px;
  clip-path: polygon(80% 38%, 100% 50%, 80% 62%, 80% 99%, 0 100%, 0 0, 80% 0);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.participant-profile .participant-button .nav-icon-outer .nav-icon {
  font-size: 30px;
  color: #344D90;
}

.noshadow {
  box-shadow: none !important;
}

.permission_component {
  padding: 0px 50px;
}
@media (max-width: 460px) {
  .permission_component {
    padding: 0px 30px;
  }
}

.each_permission {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.each_permission .title {
  font-size: 18px;
}
@media (max-width: 460px) {
  .each_permission .title {
    font-size: 16px;
  }
}
.each_permission .toggle {
  transform: translateY(-20px);
}
.each_permission .toggle input[type=checkbox] {
  visibility: hidden;
}
.each_permission .toggle input[type=checkbox]:checked + label {
  background-color: var(--primary-color-2);
}
.each_permission .toggle input[type=checkbox]:checked + label:before {
  transform: translateX(25px);
  background-color: #FFF;
}
.each_permission .toggle label {
  display: flex;
  width: 50px;
  height: 25px;
  border: 2px solid var(--primary-color-2);
  border-radius: 99em;
  position: relative;
  transition: transform 0.75s ease-in-out;
  transform-origin: 50% 50%;
  cursor: pointer;
}
.each_permission .toggle label:before {
  transition: transform 0.75s ease;
  transition-delay: 0.5s;
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--primary-color-2);
  border-radius: 50%;
  top: 2.5px;
  left: 2.5px;
}

@media (max-width: 1000px) {
  .study-analytics-top .page-heading {
    padding-bottom: 30px;
  }
}

.study-analytics-component {
  margin: auto;
  padding: 50px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 500px;
}
.study-analytics-component .study-analytics-table {
  width: 100%;
}
@media (max-width: 500px) {
  .study-analytics-component {
    padding: 50px 10px;
  }
}
.study-analytics-component .left-side, .study-analytics-component .right-side1 {
  width: 400px;
  height: 500px;
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  padding: 30px;
  min-height: 500px !important;
}
@media (max-width: 1530px) {
  .study-analytics-component .left-side, .study-analytics-component .right-side1 {
    width: 400px;
  }
}
@media (max-width: 497px) {
  .study-analytics-component .left-side, .study-analytics-component .right-side1 {
    width: calc(100% - 100px);
  }
}
.study-analytics-component .left-side .head, .study-analytics-component .right-side1 .head {
  text-align: center;
  font-weight: 400;
  font-size: 25px;
  padding: 20px;
}
.study-analytics-component .right-side1 {
  width: 300px;
}
.study-analytics-component .right-side {
  width: calc(100% - 610px);
  min-height: 500px;
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
  padding: 30px;
  height: auto;
}
@media (max-width: 1530px) {
  .study-analytics-component .right-side {
    width: calc(100% - 540px);
  }
}
@media (max-width: 1270px) {
  .study-analytics-component .right-side {
    width: 100%;
  }
}
.study-analytics-component .right-side .graph-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
@media (max-width: 750px) {
  .study-analytics-component .right-side .graph-div {
    flex-direction: column;
  }
}
.study-analytics-component .right-side .graph-div .each-graph {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  background-color: #fafafa;
}
@media (min-width: 1500px) {
  .study-analytics-component .right-side .graph-div .each-graph canvas {
    width: 100% !important;
    height: 300px !important;
  }
}
.study-analytics-component .right-side .graph-div .each-side {
  width: 49%;
}
@media (max-width: 750px) {
  .study-analytics-component .right-side .graph-div .each-side {
    width: 90%;
    margin: auto;
  }
}
.study-analytics-component .right-side .graph-div .each-side .stat-text {
  border: 2px solid #344D90;
  border-radius: 29px;
  padding: 8px 10px;
  max-width: 300px;
  color: #344D90;
  margin: 20px auto;
}
@media (max-width: 1530px) {
  .study-analytics-component .right-side .graph-div .each-side .stat-text {
    max-width: 200px;
  }
}
.study-analytics-component .right-side .graph-div .each-side .stat-text .pcopy {
  text-align: center;
  font-size: 12px;
}
.study-analytics-component .right-side .graph-div .each-side .stat-text .h2copy {
  text-align: center;
}
@media (max-width: 450px) {
  .study-analytics-component .right-side .analytics-table {
    padding: 50px 20px;
  }
}
.study-analytics-component .right-side .analytics-table .each-column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 25px 20px;
  border-top: solid 1px rgb(221, 221, 221);
  border-bottom: solid 1px rgb(221, 221, 221);
}
@media (max-width: 527px) {
  .study-analytics-component .right-side .analytics-table .each-column {
    flex-direction: column;
  }
}
.study-analytics-component .right-side .analytics-table .each-column .head {
  font-weight: 400;
  font-size: 25px;
  padding: 0px 40px;
  text-transform: uppercase;
}
@media (max-width: 677px) {
  .study-analytics-component .right-side .analytics-table .each-column .head {
    font-size: 20px;
    padding: 0px 20px;
  }
}
@media (max-width: 527px) {
  .study-analytics-component .right-side .analytics-table .each-column .head {
    text-align: center;
  }
}
.study-analytics-component .right-side .analytics-table .each-column .copy {
  padding: 4px 40px;
  text-align: center;
  font-size: 20px;
}
@media (max-width: 677px) {
  .study-analytics-component .right-side .analytics-table .each-column .copy {
    font-size: 14px;
    padding: 4px 20px;
  }
}
@media (max-width: 527px) {
  .study-analytics-component .right-side .analytics-table .each-column .copy {
    text-align: center;
  }
}
.study-analytics-component .centre-11 {
  width: calc(100% - 840px);
  position: relative;
}
.study-analytics-component .top-menu {
  padding: 10px;
  height: 10px;
  margin-bottom: 10px;
  position: relative;
}
.study-analytics-component .top-menu .top-menu-button {
  position: absolute;
  padding: 7px 10px;
  text-align: center;
  color: #344D90;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  bottom: 10px;
}
.study-analytics-component .top-menu .top-menu-button .icr {
  font-size: 16px;
}
.study-analytics-component .top-menu .m1 {
  left: 0px;
  position: absolute;
  padding: 7px 10px;
  text-align: center;
  color: #344D90;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.study-analytics-component .top-menu .m1:hover {
  color: #344D90;
}
.study-analytics-component .top-menu .m1 .icr {
  font-size: 16px;
}
.study-analytics-component .top-menu .m2 {
  right: 0px;
}
.study-analytics-component .update-tree {
  position: absolute;
  background-color: red;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  right: -10px;
  top: -10px;
  cursor: pointer;
  z-index: 100;
}
.study-analytics-component .update-tree .del {
  color: white;
  font-size: 12px;
  padding: 4px 5px;
}
.study-analytics-component .Add-arm-button {
  background-color: #fafafa;
  width: 16px;
  height: 16px;
  padding: 6px;
  padding-top: 5px;
  padding-bottom: 8px;
  border-radius: 100%;
  margin: auto;
  transform: translate(5px, -27px);
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.study-analytics-component .Add-arm-button .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 1px;
}
.study-analytics-component .Add-arm-button:hover {
  background-color: #344D90;
}
.study-analytics-component .Add-arm-button:hover .plus {
  color: #fafafa;
}
.study-analytics-component .Add-arm {
  position: absolute;
  background-color: #fafafa;
  width: 16px;
  height: 16px;
  padding: 6px;
  padding-top: 5px;
  padding-bottom: 8px;
  border-radius: 100%;
  cursor: pointer;
  right: -50px;
  top: 40px;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  transition: all 0.3s ease-in-out;
}
.study-analytics-component .Add-arm .plus {
  color: #344D90;
  font-size: 16px;
  margin-left: 1px;
}
.study-analytics-component .Add-arm:hover {
  background-color: #344D90;
}
.study-analytics-component .Add-arm:hover .plus {
  color: #fafafa;
}

.study-analytics-mobile {
  position: relative !important;
  height: auto;
}
@media (min-width: 1270px) {
  .study-analytics-mobile {
    display: none;
  }
}
.study-analytics-mobile .innner {
  background-color: white;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin: 20px;
  margin-bottom: 0px;
  cursor: pointer;
  box-shadow: 1px 1px 10px rgb(214, 214, 214);
}
.study-analytics-mobile .innner .env {
  font-size: 30px;
  padding: 10px;
  color: #344D90;
}

.new-study-analytics-component {
  padding-top: 20px !important;
  padding-bottom: 0px !important;
}
.new-study-analytics-component .right-side {
  width: calc(100% - 540px);
}
.new-study-analytics-component .left-side {
  height: calc(100vh - 255px) !important;
  max-height: 100vh !important;
  position: relative;
}
.new-study-analytics-component .left-side .study-arms-phases {
  height: calc(100vh - 470px) !important;
}

.study-analytics-container {
  padding: 20px 10px !important;
  padding-bottom: 0px !important;
}
.study-analytics-container .study-analytics-top {
  padding-top: 0px !important;
}

.clue-calmers {
  width: 100%;
}
.clue-calmers .clue-calmers-links {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.clue-calmers .clue-calmers-links.optionalModules {
  padding: 60px 0 !important;
  overflow: auto;
}
.clue-calmers .clue-calmers-links .clue-calmers-item {
  width: 20%;
  text-align: center;
  background: #fff;
  border-radius: 8px;
}
.clue-calmers .clue-calmers-links .clue-calmers-item iframe {
  border-radius: 8px;
}
.clue-calmers .clue-calmers-links .clue-calmers-item.each-module {
  padding: 0;
  width: 20%;
  height: 150px;
}
.clue-calmers .clue-calmers-links .clue-calmers-item.each-module .right-side {
  transform: translate(-5px, -7px);
}
.clue-calmers .participant-application-view.child .right-participant-view {
  background-color: #28b4cc;
  background-image: none;
}
.clue-calmers .participant-application-view.child .right-participant-view .left-side-images {
  background-image: url("../assets/clue_calmers_page_header_icon_child.png");
}
.clue-calmers .participant-application-view.teenager .right-participant-view {
  background: var(--font-color-1) !important;
  background-image: none !important;
}
.clue-calmers .participant-application-view.teenager .right-participant-view .left-side-images {
  background-image: url("../assets/clue_calmers_page_header_icon_teen.png");
}

.mood-boosters .right-participant-view {
  position: relative;
}
.mood-boosters .participant-application-view.child .right-participant-view .left-side-images {
  background-image: url("../assets/mood-boosters/logo-child.png");
}
.mood-boosters .participant-application-view.teenager .right-participant-view .left-side-images {
  background-image: url("../assets/mood-boosters/logo-teen.png");
}
.mood-boosters .new-event-form {
  padding: 30px;
  margin: 20px;
}
.mood-boosters .new-event-form .new-event-form-field {
  display: flex;
  justify-content: space-between;
}
.mood-boosters .new-event-form .new-event-form-field + .new-event-form-field {
  margin-top: 10px;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector {
  display: flex;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour {
  width: 20px;
  height: 20px;
  margin-left: 20px;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 4px;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.selected {
  border: 2px solid #000;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-dark-green {
  background-color: #2BB989;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-blue {
  background-color: #3583DB;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-yellow {
  background-color: #FACE00;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-red {
  background-color: #FE5758;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-purple {
  background-color: #9D5AC3;
}
.mood-boosters .new-event-form .new-event-form-field .colour-selector .event-colour.colour-orange {
  background-color: #f39c12;
}
.mood-boosters .new-event-form .new-event-form-field label {
  padding-top: 10px;
}
.mood-boosters .new-event-form .new-event-form-field input {
  margin-left: 50px;
  padding: 10px;
  width: 145px;
}
.mood-boosters .new-event-form .new-event-form-field select {
  width: 170px;
  padding: 10px;
}
.mood-boosters .new-event-form .new-event-form-field input.error,
.mood-boosters .new-event-form .new-event-form-field select.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344d90;
}
.mood-boosters .new-event-form .submit-container {
  text-align: center;
  margin-top: 30px;
}
.mood-boosters .new-event-form .submit-container .submit-button {
  background: var(--font-color-1);
  text-align: center;
  color: #fff;
  width: 100px;
  height: 30px;
  border-radius: 8px;
}
.mood-boosters .new-event-form .submit-container .delete-button {
  background: #EF5406;
}
.mood-boosters .fullcalendar-container {
  width: 90%;
  margin: auto;
  padding: 20px;
  background: #28B4CC;
}
.mood-boosters .fullcalendar-container .fc-view-container {
  height: 600px;
  background: #fff;
}
.mood-boosters .fullcalendar-container .fc-scroller {
  height: 575px !important;
}
.mood-boosters .fullcalendar-container .fc-right,
.mood-boosters .fullcalendar-container .fc-left {
  display: none;
}
.mood-boosters .fullcalendar-container .fc-day-grid .fc-row:first-child {
  display: none;
}
.mood-boosters .fullcalendar-container .fc-axis {
  background: rgba(52, 152, 219, 0.3);
}
.mood-boosters .fullcalendar-container .fc-mon {
  background: #E7F7F0;
}
.mood-boosters .fullcalendar-container .fc-mon.fc-day-header {
  background: #2BB989;
}
.mood-boosters .fullcalendar-container .fc-tue {
  background: #E7F0FA;
}
.mood-boosters .fullcalendar-container .fc-tue.fc-day-header {
  background: #3583DB;
}
.mood-boosters .fullcalendar-container .fc-wed {
  background: #FEF9E5;
}
.mood-boosters .fullcalendar-container .fc-wed.fc-day-header {
  background: #FACE00;
}
.mood-boosters .fullcalendar-container .fc-thu {
  background: #FFEAEA;
}
.mood-boosters .fullcalendar-container .fc-thu.fc-day-header {
  background: #FE5758;
}
.mood-boosters .fullcalendar-container .fc-fri {
  background: #F0E5F6;
}
.mood-boosters .fullcalendar-container .fc-fri.fc-day-header {
  background: #9D5AC3;
}
.mood-boosters .fullcalendar-container .fc-sat {
  background: rgba(243, 156, 18, 0.2);
}
.mood-boosters .fullcalendar-container .fc-sat.fc-day-header {
  background: rgb(243, 156, 18);
}
.mood-boosters .fullcalendar-container .fc-sun {
  background: rgba(46, 204, 113, 0.2);
}
.mood-boosters .fullcalendar-container .fc-sun.fc-day-header {
  background: rgb(46, 204, 113);
}
.mood-boosters .fullcalendar-container .table-buttons {
  display: flex;
}
.mood-boosters .fullcalendar-container .table-buttons .participant-button {
  margin: 0;
  height: 40px;
  width: auto;
  opacity: 1;
  padding-right: 10px;
}
.mood-boosters .fullcalendar-container .table-buttons .participant-button .nav-icon-outer {
  padding-top: 5px !important;
}
.mood-boosters .fullcalendar-container .table-buttons .participant-button + .participant-button {
  margin-left: 20px;
}
.mood-boosters .fullcalendar-container .footer {
  margin-top: 30px;
  text-align: right;
  width: 95%;
  display: flex;
  justify-content: right;
}
.mood-boosters .fullcalendar-container .footer .mood-boosting-tips-link {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "Fredoka-One";
}
.mood-boosters .fullcalendar-container .footer .mood-boosting-tips-link p {
  margin-right: 10px;
}
.mood-boosters #draggable-container {
  margin: auto;
}
.mood-boosters #draggable-container .draggable {
  background: #fff;
  color: var(--menu-color-1);
  margin: 10px;
  padding: 10px;
  text-align: left;
  cursor: grab;
}

.power-thinking .participant-application-view .right-participant-view .right-side-text .description {
  font-size: 24px;
}
.power-thinking .participant-application-view.child .right-participant-view {
  background-color: #28b4CC;
  background-image: none;
}
.power-thinking .participant-application-view.child .right-participant-view .left-side-images {
  background-image: url("../assets/power-thinking/logo-child.png");
}
.power-thinking .participant-application-view.teenager .right-participant-view {
  background-color: #1A3A61;
  background-image: none;
}
.power-thinking .participant-application-view.teenager .right-participant-view .left-side-images {
  background-image: url("../assets/power-thinking/logo-teen.png");
}
.power-thinking .modules {
  width: 70%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.power-thinking .modules .power-thinking-item {
  cursor: pointer;
  width: 40%;
  height: 200px;
  margin: auto;
  text-align: center;
  background: #fff;
  border-radius: 8px;
}
.power-thinking .modules .power-thinking-item iframe {
  border-radius: 8px;
}
.power-thinking .modules .power-thinking-item.each-module {
  margin-bottom: 40px;
  padding: 0;
}
.power-thinking .modules .power-thinking-item.each-module .right-side {
  transform: translate(45%, 20%);
}

.change-focus .participant-application-view.child .right-participant-view {
  background-color: #28B4CC;
  background-image: none;
}
.change-focus .participant-application-view.child .right-participant-view .left-side-images {
  background-image: url("../assets/change-focus/logo-child.png");
}
.change-focus .participant-application-view.teenager .right-participant-view {
  background-color: #1A3A61;
  background-image: none;
}
.change-focus .participant-application-view.teenager .right-participant-view .left-side-images {
  background-image: url("../assets/change-focus/logo-teen.png");
}
.change-focus .modules {
  width: 70%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.change-focus .modules .change-focus-item {
  cursor: pointer;
  width: 40%;
  height: 170px;
  margin: auto;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  font-size: 32px;
  font-weight: bold;
  border: 5px solid var(--menu-color-6);
}
.change-focus .modules .change-focus-item .title {
  margin-top: 50px;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 18pt;
  line-height: 1.5em;
  background-color: #eee1a6;
}
.change-focus .open-diary-btn {
  position: relative;
  background-position: bottom;
  width: 300px;
  height: 250px;
}

.participant-details-container {
  width: 98%;
  margin: auto;
}
.participant-details-container .participant-details-box {
  margin-top: 30px;
  color: #07489A;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 10px;
  max-height: 400px;
}
.participant-details-container .participant-details-box .globalbutton {
  height: auto;
  padding: 10px;
}
.participant-details-container .participant-details-box .participant-details-flex {
  width: 90%;
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.participant-details-container .participant-details-box .participant-details-flex .participant-detail-item > div {
  margin-bottom: 10px;
}
.participant-details-container .participant-details-box textarea {
  padding: 20px;
  width: 97%;
  height: 300px;
  background-color: #f8f8f8;
  margin-top: 20px;
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  transform: translateY(-5px);
}
.styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #fafafa;
  border-radius: 3px;
}
.styled-checkbox:hover + label:before {
  background: #344D90;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px #fafafa;
}
.styled-checkbox:checked + label:before {
  background: #344D90;
  border-radius: 3px;
}
.styled-checkbox:disabled + label {
  color: #fafafa;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #fafafa;
}
.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 3px;
  height: 3px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}

/* The container */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.container-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 5px;
}

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

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #344D90;
}

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

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

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

.spinner-component .hover_bkgr_fricccc_spinner {
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.spinner-component .hover_bkgr_fricccc_spinner > div {
  margin: auto;
  display: flex;
  width: 50px;
  height: 50px;
  margin-top: 40vh;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-rotate 2s infinite linear;
  animation: sk-rotate 2s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-image: linear-gradient(to bottom, #344D90, #344D90);
  border-radius: 100%;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes sk-rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
.momentum-spinner-component .hover_bkgr_fricccc_spinner1 {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(16.5px);
  -webkit-backdrop-filter: blur(16.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.momentum-spinner-component .hover_bkgr_fricccc_spinner1 > div {
  margin: auto;
  display: flex;
  width: 500px;
  margin-top: 30vh;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
@media (max-width: 500px) {
  .momentum-spinner-component .hover_bkgr_fricccc_spinner1 > div {
    width: 300px;
  }
}
.momentum-spinner-component .inner {
  display: flex;
  flex-direction: column;
}
.momentum-spinner-component .inner object {
  width: 400px;
}
@media (max-width: 500px) {
  .momentum-spinner-component .inner object {
    margin: auto;
    width: 200px;
  }
}
.momentum-spinner-component .inner p {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}
@media (max-width: 500px) {
  .momentum-spinner-component .inner p {
    font-size: 14px;
  }
}

.create-new-user-component .hover_bkgr_fricc-user-comp {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
.create-new-user-component .hover_bkgr_fricc-user-comp > div {
  background-color: #fff;
  margin: auto;
  display: flex;
  height: 90%;
  height: 90%;
  width: 90%;
  max-height: 800px;
  max-width: 800px;
  vertical-align: middle;
  position: relative;
  padding: 3px 3px;
}
.create-new-user-component .trigger_popup_fricc {
  font-size: 20px;
  display: flex;
  font-weight: bold;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .close:hover {
  color: #344D90;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .head {
  margin: 30px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
  border-bottom: 1px solid whitesmoke;
}
@media (max-width: 500px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .head {
    font-size: 25px;
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp select {
  width: 540px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp input {
  width: 500px;
  border: none;
  background-color: #fafafa;
  margin: 30px auto;
  margin-top: 0px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp input {
    width: 230px;
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .study-comp input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive {
  display: flex;
  flex-direction: row;
  margin: 10px auto;
  padding: 20px 20px;
  border: 1px solid rgb(226, 226, 226);
  border-radius: 10px;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive span {
  margin-right: 50px;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive span button {
  border: none;
  padding: 10px 20px;
  margin: auto;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive span .true {
  background-color: #344D90;
  color: white;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive button {
  border: none;
  padding: 10px 20px;
  margin: auto 20px;
  margin-right: 0px;
  border-radius: 5px;
  background-color: #eeeeee;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .active_inactive button:hover {
  background-color: #344D90;
  color: white;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .buttonsa {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5px 0px;
  padding-top: 0px;
  margin: auto;
  margin-bottom: 20px;
  margin-top: -20px;
  width: 440px;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .buttonsa .update-button {
  width: 200px;
  border-radius: 5px;
  padding: 7px 5px;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .condition {
  margin: auto;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .condition p {
  padding-top: 3px;
  font-size: 16px !important;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .numberofarmsandphases {
  display: flex;
  flex-direction: row;
  width: 540px;
  margin: auto;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 700px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .numberofarmsandphases {
    width: 300px;
    flex-direction: column;
    margin-bottom: 0px;
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
  width: 40%;
  margin: 0px;
}
@media (max-width: 700px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
    margin: 30px auto;
    margin-top: 0px;
    width: 300px;
  }
}
@media (max-width: 400px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .numberofarmsandphases .noanp {
    width: 230px;
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .update-button {
  width: 540px;
  margin: auto;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .update-button {
    width: 300px;
    margin: auto;
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  .create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .update-button {
    width: 250px;
    font-size: 18px;
    margin-top: 20px;
  }
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .update-button:hover {
  opacity: 1;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .login-component-box .inner-box::-webkit-scrollbar {
  display: none;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .assigngardian {
  width: 300px !important;
  transform: translateX(10px);
}
.create-new-user-component .hover_bkgr_fricc-user-comp .closebuttin999 {
  border: none;
  background-color: #344D90;
  padding: 8px 20px;
  color: white;
  font-size: 18px;
  border-radius: 29px;
  display: block;
  width: 200px;
  margin: 20px auto;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.create-new-user-component .hover_bkgr_fricc-user-comp .closebuttin999:hover {
  opacity: 1;
}
.create-new-user-component .passworddoewnstmatch {
  text-align: center;
  padding-bottom: 20px;
  color: red;
  transform: translateY(-10px);
}
.create-new-user-component .flex-box {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
}
.create-new-user-component .findresearchers {
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
  position: relative;
}
.create-new-user-component .findresearchers .search-box {
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.create-new-user-component .findresearchers .search-box input {
  margin: auto;
  max-width: 500px;
}
.create-new-user-component .findresearchers .search-box p {
  text-align: center;
  padding: 20px 0px;
}
.create-new-user-component .findresearchers .search-box button {
  border: none;
  background-color: #344D90;
  color: white;
  padding: 10px 20px;
  border-radius: 29px;
  display: block;
  margin: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s all ease;
}
.create-new-user-component .findresearchers .search-box button:hover {
  opacity: 1;
}
.create-new-user-component .findresearchers .search-box .closepop {
  position: absolute;
  right: 20px;
}
.create-new-user-component .findresearchers .search-box .closepop1 {
  right: 120px;
}
.create-new-user-component .findresearchers .search-box .filterbox {
  display: flex;
  flex-direction: row;
  width: 300px;
  justify-content: space-evenly;
  position: absolute;
  left: 20px;
  padding: 10px;
  top: 20px;
}
.create-new-user-component .findresearchers .search-box .filterbox input {
  max-width: 100px;
}
.create-new-user-component .findresearchers table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.create-new-user-component .findresearchers td,
.create-new-user-component .findresearchers th {
  padding: 12px 8px;
  text-align: center;
}
.create-new-user-component .findresearchers td .edit-user,
.create-new-user-component .findresearchers th .edit-user {
  font-size: 16px;
}
.create-new-user-component .findresearchers td .edit-user:hover,
.create-new-user-component .findresearchers th .edit-user:hover {
  color: #344D90;
}
.create-new-user-component .findresearchers tr:nth-child(even) {
  background-color: #fafafa;
}
.create-new-user-component .findresearchers .edit-user {
  text-align: center;
  cursor: pointer;
}
.create-new-user-component .findresearchers .researchers-name {
  display: flex;
  flex-direction: column;
}
.create-new-user-component .findresearchers .researchers-name p {
  padding: 2px 0px;
}
.create-new-user-component .selectbetweenusers {
  display: flex;
  flex-direction: row;
  padding: 20px 0px;
  justify-content: space-evenly;
  width: 300px;
  margin: auto;
}
.create-new-user-component .selectbetweenusers .container-checkbox p {
  font-size: 16px;
  transform: translateY(3px);
}
.create-new-user-component .researchersingroup {
  margin: 20px 0px;
  padding: 20px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 5px;
}
.create-new-user-component .researchersingroup .researchersingrouphead {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.create-new-user-component .guardian_name {
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
}

.creating_user_text {
  text-align: center;
  padding: 20px;
  animation: blinker 2s linear infinite;
  display: none;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.diary-modal {
  width: 80%;
  min-height: 85%;
  padding: 0 35px;
  background: none;
  box-shadow: none;
}
.diary-modal .survey-component {
  height: 620px;
  overflow: scroll;
}
.diary-modal .cw-gauge--wrapper > .cw-gauge--reading-container > div {
  transform-origin: 50% 75%;
}
.diary-modal .cw-gauge--wrapper > .cw-gauge--reading-container > div.disable-clicks {
  pointer-events: none;
}
.diary-modal .diary-close-button {
  position: absolute;
  top: 50px;
  right: 15px;
  cursor: pointer;
  color: var(--menu-color-2);
}
.diary-modal .diary-close-button .svg-inline--fa {
  width: 2em !important;
  height: 2em !important;
}
.diary-modal .diary-actions {
  position: absolute;
  right: 12%;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  transform: translateX(-12%);
}
.diary-modal .forward-1 {
  top: 13%;
}
.diary-modal .forward-5 {
  top: 22%;
}
.diary-modal .backward-1 {
  bottom: 21%;
}
.diary-modal .backward-5 {
  bottom: 11%;
}
.diary-modal .left {
  float: left;
}
.diary-modal .right {
  float: right;
}
.diary-modal .w25 {
  width: 25%;
}
.diary-modal .right-border {
  border-left: 3px dashed #e6e6e6;
}
.diary-modal .right-actions {
  text-align: right;
}
.diary-modal .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.diary-modal .left-container {
  margin-left: 50px;
}
.diary-modal .left-container .left-form {
  margin-left: 25px;
}
.diary-modal .column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin: 0 45px 0 0;
}
.diary-modal .column .diary-content {
  margin-top: 35px;
  width: 77%;
  max-height: 68vh;
  background: aliceblue;
  overflow: scroll;
  margin-left: 11%;
}
.diary-modal .column .diary-content iframe {
  min-height: 64vh;
  width: 99%;
}
.diary-modal .diaryHistory {
  display: none;
}
.diary-modal #newForm button {
  margin-top: 50px;
  border: none;
  border-radius: 8px;
  padding: 18px;
  position: absolute;
  top: 0;
  right: 100px;
  width: 25%;
  background-color: var(--menu-color-2);
  color: white;
  font-family: "Dosis:wght@800";
  font-size: inherit;
}
.diary-modal .diary-body .diary-actions {
  margin-top: 15px;
}
.diary-modal .diary-body .diary-actions .close-button {
  display: inline-flex;
  width: 5%;
}
.diary-modal .diary-body .diary-actions .diary-component-title {
  width: 85%;
  display: inline-flex;
  margin-left: 15px;
}
.diary-modal .diary-body .diary-actions .close-button {
  display: inline-flex;
  width: 5%;
}
.diary-modal .diary-body .diary-actions .close-button button {
  border: none;
  background: none;
  box-shadow: none;
}
.diary-modal .diary-body .diary-actions .close-button button .fa {
  font-size: 32px;
}
.diary-modal .diary-body .diary-actions .diary-title {
  width: 80%;
  display: inline-flex;
  margin-left: 15px;
  text-align: right;
}
.diary-modal .diary-body .diary-actions .diary-title h1 {
  text-align: right;
  width: 100%;
}
.diary-modal .diary-body .diary-actions .add-button {
  display: inline-flex;
  width: 5%;
  margin-left: 20px;
}
.diary-modal .diary-body .diary-actions .add-button button {
  border: none;
  background: none;
  box-shadow: none;
}
.diary-modal .diary-body .diary-actions .add-button button .fa {
  font-size: 32px;
}
.diary-modal .diary-body .diary-actions .footer-btn {
  background: none;
  border: none;
  font-size: 24px;
  margin: 15px 10px 0 10px;
}

.open-diary-btn {
  text-shadow: 0 0 5px #676a6c;
  color: #ffeca2;
  position: absolute;
  bottom: 20px;
  border: none;
  background-color: transparent;
  background: url(../../assets/participantDashboard/all_dashboards/Shared/diary-button.png) no-repeat;
  background-size: contain;
  width: 200px;
  height: 150px;
}
.open-diary-btn .text {
  display: none;
  padding: 10px;
  font-size: 20px;
  text-transform: uppercase;
}
.open-diary-btn i {
  display: none;
  font-size: 64px;
}

#newSurveyResult {
  display: none;
}

.showIframe {
  width: 100%;
  height: 400px;
  display: block;
}

@media all and (max-width: 1650px) {
  .diary-actions {
    right: 5% !important;
  }
}
@media all and (max-width: 1350px) {
  .diary-actions {
    right: 3% !important;
  }
  .diary-modal .column .diary-content {
    margin-top: 65px !important;
  }
}
@media all and (max-width: 1295px) {
  .diary-actions {
    margin-top: 30px !important;
  }
  .diary-modal .column .diary-content {
    margin-top: 90px !important;
    max-height: 65vh !important;
  }
  .diary-modal .backward-1 {
    bottom: 22% !important;
  }
  .diary-modal .backward-5 {
    bottom: 14% !important;
  }
}
@media all and (max-width: 1215px) {
  .diary-actions {
    right: 3% !important;
    margin-top: 45px !important;
  }
  .diary-modal .column .diary-content {
    margin-top: 90px !important;
    max-height: 65vh !important;
  }
  .diary-modal .backward-1 {
    bottom: 24% !important;
  }
  .diary-modal .backward-5 {
    bottom: 16% !important;
  }
}
.mood-boosters .open-diary-btn {
  left: 4% !important;
  top: 80% !important;
}

.clue-calmers .open-diary-btn {
  position: relative !important;
  margin-top: 20px !important;
  bottom: 0 !important;
}

.climbing-plans .open-diary-btn {
  top: 125px !important;
  right: 30px !important;
}

#g1663, #g1658, #back_one_tab, #back_5_tab {
  cursor: pointer;
}

#back_5_arrow,
#forward_one,
#forward_5_arrow,
#back_one_arrow {
  font-size: 24px !important;
  letter-spacing: -4px !important;
}

.no-background {
  background: none !important;
}

.homepage .participant-help-button {
  display: none;
}

/* Copyright 2008 Google Inc. All Rights Reserved. */
.google-visualization-orgchart-table {
  border: 0;
  text-align: center;
}

.google-visualization-orgchart-table * {
  margin: 0;
  padding: 2px;
}

.google-visualization-orgchart-space-small {
  width: 4px;
  height: 1px;
  border: 0;
}

.google-visualization-orgchart-space-medium {
  width: 10px;
  height: 1px;
  border: 0;
}

.google-visualization-orgchart-space-large {
  width: 16px;
  height: 1px;
  border: 0;
}

.google-visualization-orgchart-noderow-small {
  height: 12px;
  border: 0;
}

.google-visualization-orgchart-noderow-medium {
  height: 30px;
  border: 0;
}

.google-visualization-orgchart-noderow-large {
  height: 46px;
  border: 0;
}

.google-visualization-orgchart-connrow-small {
  height: 2px;
  font-size: 1px;
}

.google-visualization-orgchart-connrow-medium {
  height: 6px;
  font-size: 4px;
}

.google-visualization-orgchart-connrow-large {
  height: 10px;
  font-size: 8px;
}

.google-visualization-orgchart-node {
  text-align: center;
  vertical-align: middle;
  font-family: arial, helvetica;
  cursor: default;
  border: 2px solid #b5d9ea;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
  background-color: #edf7ff;
  background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));
}

.google-visualization-orgchart-nodesel {
  border: 2px solid #e3ca4b;
  background-color: #fff7ae;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff7ae), to(#eee79e));
}

.google-visualization-orgchart-node-small {
  font-size: 0.6em;
}

.google-visualization-orgchart-node-medium {
  font-size: 0.8em;
}

.google-visualization-orgchart-node-large {
  font-size: 1.2em;
  font-weight: bold;
}

.google-visualization-orgchart-linenode {
  border: 0;
}

.google-visualization-orgchart-lineleft {
  border-left: 1px solid #3388dd;
}

.google-visualization-orgchart-lineright {
  border-right: 1px solid #3388dd;
}

.google-visualization-orgchart-linebottom {
  border-bottom: 1px solid #3388dd;
}

/* Copyright 2012 Google Inc. All Rights Reserved. */
.google-visualization-tooltip-action:hover {
  background-color: #eeeeee;
}

.google-visualization-tooltip {
  border: solid 1px #bdbdbd;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
  font-size: 12px;
  padding: 0px;
  -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
  z-index: 10000;
}

.google-visualization-tooltip-action-list {
  list-style-type: none;
  margin: 0;
  padding: 0.5em 0em 0.5em 0em;
  cursor: hand;
}

.google-visualization-tooltip-action {
  margin: 0;
  cursor: pointer;
  padding: 0.5em 2em 0.5em 1em;
}

.google-visualization-tooltip-action:hover {
  background-color: #eeeeee;
}

.google-visualization-tooltip-item-list {
  list-style-type: none;
  margin: 1em 0 1em 0;
  padding: 0em;
}

.google-visualization-tooltip-item {
  margin: 0.65em 0em 0.65em 0em;
  padding: 0em 2em 0em 1em;
}

.google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child {
  margin: 1em 0em 1em 0em;
}

.google-visualization-tooltip-separator {
  margin: 0;
  padding: 0;
  height: 1px;
  background-color: #dddddd;
}

.google-visualization-tooltip-square {
  display: inline-block;
  /* IE did not support inline-block, so fall back to float left. */
  /* float: left; */
  clear: none;
  width: 0.5em;
  height: 0.5em;
  margin: 0.16em 0.7em 0em 0em;
  border-bottom: solid 0.1em white;
}

/* javascript/gviz/devel/jsapi/static/util/css/toolbar.css */
.google-visualization-toolbar {
  font-size: 100%;
}

.google-visualization-toolbar .google-visualization-toolbar-export-igoogle {
  margin-right: 0.1em;
}

.google-visualization-toolbar .google-visualization-toolbar-export-data {
  margin-right: 0.1em;
}

.google-visualization-toolbar .google-visualization-toolbar-html-code {
  margin-right: 0.1em;
}

.google-visualization-toolbar-html-code-explanation {
  font-weight: bold;
}

.google-visualization-toolbar-ok-button {
  padding: 2px;
}

.google-visualization-toolbar-triangle {
  position: absolute;
  right: 0px;
  top: 0px;
}

.google-visualization-toolbar-caption-table {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.google-visualization-toolbar-small-dialog {
  width: 500px;
}

.google-visualization-toolbar-big-dialog {
  width: 800px;
}

.google-visualization-toolbar-small-dialog,
.google-visualization-toolbar-big-dialog {
  position: absolute;
  background-color: #c1d9ff;
  border: 1px solid #3a5774;
  padding: 8px;
}

.google-visualization-toolbar-small-dialog-bg,
.google-visualization-toolbar-big-dialog-bg {
  background-color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
}

.google-visualization-toolbar-small-dialog-title,
.google-visualization-toolbar-big-dialog-title {
  background-color: #e0edfe;
  color: #000;
  cursor: pointer;
  padding: 8px;
  position: relative;
  font-size: 12pt;
  font-weight: bold;
  vertical-align: middle;
}

.google-visualization-toolbar-small-dialog-content,
.google-visualization-toolbar-big-dialog-content {
  background-color: #fff;
  padding: 4px;
  font-weight: normal;
  overflow: auto;
}

.google-visualization-toolbar-small-dialog-title-close,
.google-visualization-toolbar-big-dialog-title-close {
  background: transparent url(close_box.gif) no-repeat scroll center;
  height: 15px;
  position: absolute;
  right: 10px;
  top: 8px;
  width: 15px;
}

.google-visualization-toolbar-small-dialog-content iframe,
.google-visualization-toolbar-big-dialog-content iframe {
  width: 500px;
  height: 700px;
  border: 1px solid black;
}

/* javascript/closure/css/common.css */
/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */
/*
 * Cross-browser implementation of the "display: inline-block" CSS property.
 * See http://www.w3.org/TR/CSS21/visuren.html#propdef-display for details.
 * Tested on IE 6 & 7, FF 1.5 & 2.0, Safari 2 & 3, Webkit, and Opera 9.
 *
 * @author attila@google.com (Attila Bodis)
 */
/*
 * Default rule; only Safari, Webkit, and Opera handle it without hacks.
 */
.goog-inline-block {
  position: relative;
  display: -moz-inline-box; /* Ignored by FF3 and later. */
  display: inline-block;
}

/*
 * Pre-IE7 IE hack.  On IE, "display: inline-block" only gives the element
 * layout, but doesn't give it inline behavior.  Subsequently setting display
 * to inline does the trick.
 */
* html .goog-inline-block {
  display: inline;
}

/*
 * IE7-only hack.  On IE, "display: inline-block" only gives the element
 * layout, but doesn't give it inline behavior.  Subsequently setting display
 * to inline does the trick.
 */
*:first-child + html .goog-inline-block {
  display: inline;
}

/* javascript/closure/css/menu.css */
/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */
/*
 * Standard styling for menus created by goog.ui.MenuRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */
.goog-menu {
  background: #fff;
  border-color: #ccc #666 #666 #ccc;
  border-style: solid;
  border-width: 1px;
  cursor: default;
  font: normal 13px Arial, sans-serif;
  margin: 0;
  outline: none;
  padding: 4px 0;
  position: absolute;
  z-index: 20000; /* Arbitrary, but some apps depend on it... */
}

/* javascript/closure/css/menubutton.css */
/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */
/*
 * Standard styling for buttons created by goog.ui.MenuButtonRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */
/* State: resting. */
.goog-menu-button {
  /* Client apps may override the URL at which they serve the image. */
  background: #ddd url(//ssl.gstatic.com/editor/button-bg.png) repeat-x top left;
  border: 0;
  color: #000;
  cursor: pointer;
  list-style: none;
  margin: 2px;
  outline: none;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
}

/* Pseudo-rounded corners. */
.goog-menu-button-outer-box,
.goog-menu-button-inner-box {
  border-style: solid;
  border-color: #aaa;
  vertical-align: top;
}

.goog-menu-button-outer-box {
  margin: 0;
  border-width: 1px 0;
  padding: 0;
}

.goog-menu-button-inner-box {
  margin: 0 -1px;
  border-width: 0 1px;
  padding: 3px 4px;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-menu-button-inner-box {
  /* IE6 needs to have the box shifted to make the borders line up. */
  left: -1px;
}

/* Pre-IE7 BiDi fixes. */
* html .goog-menu-button-rtl .goog-menu-button-outer-box {
  /* @noflip */
  left: -1px;
  /* @noflip */
  right: auto;
}

* html .goog-menu-button-rtl .goog-menu-button-inner-box {
  /* @noflip */
  right: auto;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child + html .goog-menu-button-inner-box {
  /* IE7 needs to have the box shifted to make the borders line up. */
  left: -1px;
}

/* IE7 BiDi fix. */
*:first-child + html .goog-menu-button-rtl .goog-menu-button-inner-box {
  /* @noflip */
  left: 1px;
  /* @noflip */
  right: auto;
}

/* Safari-only hacks. */
::root .goog-menu-button,
::root .goog-menu-button-outer-box,
::root .goog-menu-button-inner-box {
  /* Required to make pseudo-rounded corners work on Safari. */
  line-height: 0;
}

::root .goog-menu-button-caption,
::root .goog-menu-button-dropdown {
  /* Required to make pseudo-rounded corners work on Safari. */
  line-height: normal;
}

/* State: disabled. */
.goog-menu-button-disabled {
  background-image: none !important;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
}

.goog-menu-button-disabled .goog-menu-button-outer-box,
.goog-menu-button-disabled .goog-menu-button-inner-box,
.goog-menu-button-disabled .goog-menu-button-caption,
.goog-menu-button-disabled .goog-menu-button-dropdown {
  color: #333 !important;
  border-color: #999 !important;
}

/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .goog-menu-button-disabled {
  margin: 2px 1px !important;
  padding: 0 1px !important;
}

/* IE7-only hack; ignored by all other browsers. */
*:first-child + html .goog-menu-button-disabled {
  margin: 2px 1px !important;
  padding: 0 1px !important;
}

/* State: hover. */
.goog-menu-button-hover .goog-menu-button-outer-box,
.goog-menu-button-hover .goog-menu-button-inner-box {
  border-color: #9cf #69e #69e #7af !important; /* Hover border wins. */
}

/* State: active, open. */
.goog-menu-button-active,
.goog-menu-button-open {
  background-color: #bbb;
  background-position: bottom left;
}

/* State: focused. */
.goog-menu-button-focused .goog-menu-button-outer-box,
.goog-menu-button-focused .goog-menu-button-inner-box {
  border-color: orange;
}

/* Caption style. */
.goog-menu-button-caption {
  padding: 0 4px 0 0;
  vertical-align: top;
}

/* Dropdown arrow style. */
.goog-menu-button-dropdown {
  height: 15px;
  width: 7px;
  /* Client apps may override the URL at which they serve the sprite. */
  background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -388px 0;
  vertical-align: top;
}

/* Pill (collapsed border) styles. */
/* TODO(gboyer): Remove specific menu button styles and have any button support being a menu button. */
.goog-menu-button-collapse-right,
.goog-menu-button-collapse-right .goog-menu-button-outer-box,
.goog-menu-button-collapse-right .goog-menu-button-inner-box {
  margin-right: 0;
}

.goog-menu-button-collapse-left,
.goog-menu-button-collapse-left .goog-menu-button-outer-box,
.goog-menu-button-collapse-left .goog-menu-button-inner-box {
  margin-left: 0;
}

.goog-menu-button-collapse-left .goog-menu-button-inner-box {
  border-left: 1px solid #fff;
}

.goog-menu-button-collapse-left.goog-menu-button-checked .goog-menu-button-inner-box {
  border-left: 1px solid #ddd;
}

/* javascript/closure/css/menuitem.css */
/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */
/*
 * Standard styling for menus created by goog.ui.MenuItemRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */
/**
 * State: resting.
 *
 * NOTE(mleibman,chrishenry):
 * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
 * classes and BiDi flipping done by the CSS compiler.  Closure supports RTL
 * with or without the use of the CSS compiler.  In order for them not
 * to conflict with each other, the "rtl" CSS classes need to have the @noflip
 * annotation.  The non-rtl counterparts should ideally have them as well, but,
 * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
 * being added, there is a risk of people having templates where they are not
 * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
 * on the BiDi flipping by the CSS compiler.  That's why we're not adding the
 * @noflip to .goog-menuitem.
 */
.goog-menuitem {
  color: #000;
  font: normal 13px Arial, sans-serif;
  list-style: none;
  margin: 0;
  /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
  padding: 4px 7em 4px 28px;
  white-space: nowrap;
}

/* BiDi override for the resting state. */
/* @noflip */
.goog-menuitem.goog-menuitem-rtl {
  /* Flip left/right padding for BiDi. */
  padding-left: 7em;
  padding-right: 28px;
}

/* If a menu doesn't have checkable items or items with icons, remove padding. */
.goog-menu-nocheckbox .goog-menuitem,
.goog-menu-noicon .goog-menuitem {
  padding-left: 12px;
}

/*
 * If a menu doesn't have items with shortcuts, leave just enough room for
 * submenu arrows, if they are rendered.
 */
.goog-menu-noaccel .goog-menuitem {
  padding-right: 20px;
}

.goog-menuitem-content {
  color: #000;
  font: normal 13px Arial, sans-serif;
}

/* State: disabled. */
.goog-menuitem-disabled .goog-menuitem-accel,
.goog-menuitem-disabled .goog-menuitem-content {
  color: #ccc !important;
}

.goog-menuitem-disabled .goog-menuitem-icon {
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
}

/* State: hover. */
.goog-menuitem-highlight,
.goog-menuitem-hover {
  background-color: #d6e9f8;
  /* Use an explicit top and bottom border so that the selection is visible
   * in high contrast mode. */
  border-color: #d6e9f8;
  border-style: dotted;
  border-width: 1px 0;
  padding-bottom: 3px;
  padding-top: 3px;
}

/* State: selected/checked. */
.goog-menuitem-checkbox,
.goog-menuitem-icon {
  background-repeat: no-repeat;
  height: 16px;
  left: 6px;
  position: absolute;
  right: auto;
  vertical-align: middle;
  width: 16px;
}

/* BiDi override for the selected/checked state. */
/* @noflip */
.goog-menuitem-rtl .goog-menuitem-checkbox,
.goog-menuitem-rtl .goog-menuitem-icon {
  /* Flip left/right positioning. */
  left: auto;
  right: 6px;
}

.goog-option-selected .goog-menuitem-checkbox,
.goog-option-selected .goog-menuitem-icon {
  /* Client apps may override the URL at which they serve the sprite. */
  background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;
}

/* Keyboard shortcut ("accelerator") style. */
.goog-menuitem-accel {
  color: #999;
  /* Keyboard shortcuts are untranslated; always left-to-right. */
  /* @noflip */
  direction: ltr;
  left: auto;
  padding: 0 6px;
  position: absolute;
  right: 0;
  text-align: right;
}

/* BiDi override for shortcut style. */
/* @noflip */
.goog-menuitem-rtl .goog-menuitem-accel {
  /* Flip left/right positioning and text alignment. */
  left: 0;
  right: auto;
  text-align: left;
}

/* Mnemonic styles. */
.goog-menuitem-mnemonic-hint {
  text-decoration: underline;
}

.goog-menuitem-mnemonic-separator {
  color: #999;
  font-size: 12px;
  padding-left: 4px;
}

.application-view {
  font-family: "Roboto", sans-serif;
  background-color: #FAFAFA;
}

.teenager.dark .participant-search {
  background-color: transparent;
  background: url(../assets/participantDashboard/all_dashboards/Shared/dark_dashboard_search_bar.svg) no-repeat;
  background-size: cover;
}
.teenager.dark .participant-search .search-input {
  border-color: #D5B383;
}
.teenager.dark .participant-search .search_image {
  border-color: #D5B383;
}

.go-to-session-text {
  display: none;
}

.box-color-name {
  text-align: center;
  margin-top: 10px;
  color: #000;
}

.check-in-wrapper {
  margin-top: 140px;
}

.go-to-session {
  transition: all 0.3s ease-in-out;
}
.go-to-session:hover {
  transform: scale(1.1) !important;
}

.participant-application-view {
  font-family: "nunito";
  display: flex;
  flex-direction: row;
  width: 100vw;
  /*
  *
  *   Override the high contrast
  *
  */
  /*
  *
  *   Override the high contrast
  *
  */
}
.participant-application-view.contrast .go-to-session {
  float: right;
  background: url(../assets/dashboards/child/main/ch_db_contrast_cloud_checking.svg);
}
.participant-application-view.contrast .go-to-session .go-to-session-text {
  display: none;
}
.participant-application-view.contrast .select-theme .profile-thumb-contrast {
  border: 2px solid #DDD;
  box-shadow: 5px 5px 5px #ccc;
}
.participant-application-view.contrast.teenager .participant-dashboard-view .center-view .welcome-box .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_gotomysession.svg) no-repeat !important;
  background-size: contain !important;
  position: relative;
  font-size: 2rem;
  color: #086778;
  background-repeat: no-repeat;
  text-decoration: none;
  border: none;
  width: 200px !important;
  height: 150px !important;
}
.participant-application-view.teenager .select-theme {
  cursor: pointer;
  float: left;
}
.participant-application-view.teenager .select-theme .profile-thumb-contrast {
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/icon-contrast-theme.png);
  background-size: cover;
}
.participant-application-view.teenager .select-theme .profile-thumb-default {
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/icon-default-theme.png);
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .nav-icon-outer {
  display: none;
}
.participant-application-view.teenager .left-navigation .help-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_help.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .help-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .home-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_home.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .home-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .profile-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_profile.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .profile-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .sessions-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_sessions.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .sessions-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .messages-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_messages.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .messages-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .information-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_information.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .information-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .left-navigation .logout-btn {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_logout.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .left-navigation .logout-btn .nav-title {
  display: none;
}
.participant-application-view.teenager .signimage {
  background-image: none;
}
.participant-application-view.teenager .signimage .links-description {
  display: block !important;
  margin-top: 42%;
  float: left;
  text-align: center;
  width: 100%;
  color: #1D3C63;
  line-height: 1.5vh;
  margin-left: -5%;
  visibility: hidden;
}
.participant-application-view.teenager.contrast .right-participant-view {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_contrast/Contrast_background_button_1.svg") #fff no-repeat;
  background-size: cover;
}
.participant-application-view.teenager.contrast .welcome-name {
  padding: 5px;
}
.participant-application-view.teenager.contrast .links-description {
  font-family: "Moresugar", sans-serif;
  font-size: 24px;
  line-height: 25px;
  visibility: visible;
}
.participant-application-view.teenager.contrast .welcome-name {
  color: #FFF;
  text-shadow: 0px 0px 5px #1A3A61;
}
.participant-application-view.teenager.contrast .check-in-wrapper {
  background: none;
  background-size: 105%;
  background-position: center;
  min-height: 100px;
}
.participant-application-view.teenager.contrast .check-in-wrapper .welcome-name {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_background_shape.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.teenager .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_gotomysession.svg) no-repeat !important;
  background-size: contain !important;
  position: relative;
  font-size: 2rem;
  color: #086778;
  background-repeat: no-repeat;
  text-decoration: none;
  border: none;
  width: 200px !important;
  height: 150px !important;
}
.participant-application-view .right-participant-view {
  width: calc(100vw - 330px);
  background: url("../assets/dashboards/child/main/ch_db_main_bg.svg");
  background-size: cover;
  background-position: bottom;
}
@media (max-width: 1300px) {
  .participant-application-view .right-participant-view {
    width: 100vw;
  }
}
.participant-application-view .right-participant-view .container {
  height: calc(100vh - 100px);
  overflow-y: hidden;
}
.participant-application-view .links-description {
  display: none;
}
.participant-application-view.dark .select-theme .profile-thumb-default {
  border: 2px solid #DDD;
  box-shadow: 5px 5px 5px #ccc;
}
.participant-application-view.dark.teenager .right-participant-view {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_background_1.png") #9BD7F5 no-repeat;
  background-position-y: 0;
  background-size: 175% 100%;
  background-position-x: 50%;
}
.participant-application-view.dark.teenager .participant-dashboard-view .center-view .welcome-box .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_gotomysession_new.svg) no-repeat !important;
  background-size: contain !important;
  position: relative;
  font-size: 2rem;
  color: #086778;
  background-repeat: no-repeat;
  text-decoration: none;
  border: none;
  width: 200px !important;
  height: 150px !important;
}
.participant-application-view.dark.teenager .participant-dashboard-view .center-view .welcome-box .go-to-session .go-to-session-text {
  display: none;
}
.participant-application-view.dark.teenager .participant-dashboard-view .welcome-name {
  color: #FFF;
  text-shadow: 0px 0px 5px #1A3A61;
}
.participant-application-view.dark.teenager .participant-dashboard-view .session-view {
  margin-top: 30px;
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage {
  background-image: none;
  transform: scale(2);
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage .links-description {
  display: none !important;
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage:hover {
  transform: scale(1.3) !important;
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign1 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_feelings_tracker.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign2 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_clue_calmers.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign3 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_power_thinking.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign4 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_climbing_plans.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign5 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_mood_boost_new.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign6 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_change_focus_new.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper {
  margin-top: 140px;
  background: none;
  background-size: 105%;
  background-position: center;
  min-height: 100px;
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-name {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_background_shape.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-copy {
  color: #fff;
}
.participant-application-view.dark .right-participant-view {
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_contrast/child_contrast_background_combined.png) #9BD7F5 no-repeat;
  background-position-y: 100%;
  background-size: cover;
}
.participant-application-view.dark .participant-dashboard-view .welcome-name {
  color: #1A3A61;
}
.participant-application-view.dark .participant-dashboard-view .center-view .welcome-box .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_contrast/ch_db_contrast_cloud_button_check_in.svg) no-repeat;
  background-size: contain;
  width: 325px;
  height: 125px;
  margin-bottom: 40px;
}
.participant-application-view.dark .participant-dashboard-view .center-view .welcome-box .go-to-session .go-to-session-text {
  display: block;
  font-family: "Moresugar", sans-serif;
  font-size: 25px;
  text-align: left;
  padding-left: 25px;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper {
  background: url(../assets/dashboards/child/main/ch_db_contrast_cloud_checking.svg);
  background-size: 105%;
  background-position: center;
  min-height: 100px;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-name {
  font-size: 22px;
  padding-top: 15px;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-copy {
  font-size: 15px;
}
.participant-application-view.dark .signimage {
  background-image: url(../assets/dashboards/child/main/ch_db_contrast_cloud.svg);
  transform: scale(2);
}
.participant-application-view.dark .signimage:hover {
  transform: scale(2.3) !important;
}
.participant-application-view.dark .signimage .links-description {
  display: block !important;
  margin-top: 42%;
  float: left;
  text-align: center;
  width: 100%;
  color: rgb(130, 46, 178);
  line-height: 1.5vh;
  margin-left: -5%;
  font-family: "Moresugar", sans-serif;
}
.participant-application-view .links-description {
  display: none;
}
.participant-application-view.dark .select-theme .profile-thumb-default {
  border: 2px solid #DDD;
  box-shadow: 5px 5px 5px #ccc;
}
.participant-application-view.dark.teenager .right-participant-view {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_background_1.png") #9BD7F5 no-repeat;
  background-position-y: 0;
  background-size: 175% 100%;
  background-position-x: 50%;
}
.participant-application-view.dark.teenager .participant-dashboard-view .center-view .welcome-box .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_gotomysession_new.svg) no-repeat !important;
  background-size: contain !important;
  position: relative;
  font-size: 2rem;
  color: #086778;
  background-repeat: no-repeat;
  text-decoration: none;
  border: none;
  width: 200px !important;
  height: 150px !important;
}
.participant-application-view.dark.teenager .participant-dashboard-view .center-view .welcome-box .go-to-session .go-to-session-text {
  display: none;
}
.participant-application-view.dark.teenager .participant-dashboard-view .welcome-name {
  color: #FFF;
  text-shadow: 0px 0px 5px #1A3A61;
}
.participant-application-view.dark.teenager .participant-dashboard-view .session-view {
  margin-top: 30px;
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage {
  background-image: none;
  transform: scale(2);
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage .links-description {
  display: none !important;
}
.participant-application-view.dark.teenager .participant-dashboard-view .signimage:hover {
  transform: scale(1.3);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign1 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_feelings_tracker.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign2 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_clue_calmers.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign3 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_power_thinking.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign4 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_climbing_plans.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign5 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_mood_boost_new.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .sign6 {
  background-image: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_main/teen_db_main_change_focus_new.svg");
  transform: scale(1.1);
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper {
  margin-top: 140px;
  background: none;
  background-size: 105%;
  background-position: center;
  min-height: 100px;
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-name {
  background: url("../assets/participantDashboard/all_dashboards/Teen/teen_dashboard_shared/menu_items_teen/menu_background_shape.svg") no-repeat;
  background-size: cover;
}
.participant-application-view.dark.teenager .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-copy {
  color: #fff;
}
.participant-application-view.dark .right-participant-view {
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_contrast/child_contrast_background_combined.png) #9BD7F5 no-repeat;
  background-position-y: 100%;
  background-size: cover;
}
.participant-application-view.dark .participant-dashboard-view .welcome-name {
  color: #1A3A61;
}
.participant-application-view.dark .participant-dashboard-view .center-view .welcome-box .go-to-session {
  float: right;
  background: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_contrast/ch_db_contrast_cloud_button_check_in.svg) no-repeat;
  background-size: contain;
  width: 325px;
  height: 125px;
}
.participant-application-view.dark .participant-dashboard-view .center-view .welcome-box .go-to-session .go-to-session-text {
  display: block;
  font-family: "Moresugar", sans-serif;
  font-size: 25px;
  text-align: left;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper {
  background: url(../assets/dashboards/child/main/ch_db_contrast_cloud_checking.svg);
  background-size: 105%;
  background-position: center;
  min-height: 100px;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-name {
  font-size: 22px;
  padding-top: 15px;
}
.participant-application-view.dark .participant-dashboard-view .right-view .daily-checkin .check-in-wrapper .welcome-copy {
  font-size: 15px;
}
.participant-application-view.dark .signimage {
  background-image: url(../assets/participantDashboard/all_dashboards/Child/child_dashboard_contrast/ch_db_contrast-cloud_button-nl.png);
  transform: scale(1.8);
}
.participant-application-view.dark .signimage:hover {
  transform: scale(2) !important;
}
.participant-application-view.dark .signimage .links-description {
  display: block !important;
  margin-top: 42%;
  float: left;
  text-align: center;
  width: 100%;
  color: rgb(130, 46, 178);
  line-height: 1.5vh;
  margin-left: -5%;
  font-family: "Moresugar", sans-serif;
}

.hide {
  display: none;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
  80% {
    opacity: 1;
    transform: scale(0.89);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}
.bounce {
  opacity: 0;
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.header-bar {
  background-color: #344D90;
  width: calc(100% - 20px);
  padding: 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
}
@media (max-width: 1300px) {
  .header-bar {
    position: fixed;
    top: 0px;
    z-index: 2;
    display: none;
  }
}
@media (max-width: 1300px) {
  .header-bar {
    flex-direction: column;
    justify-content: space-evenly;
    height: 100vh;
    overflow-y: scroll;
  }
}
.header-bar .close-button {
  position: absolute;
  top: 30px;
  right: 30px;
}
@media (min-width: 1300px) {
  .header-bar .close-button {
    display: none;
  }
}
.header-bar .close-button .close-icon {
  font-size: 25px;
  color: #FFFFFF;
}
.header-bar .logo {
  width: 180px;
  cursor: pointer;
  padding-left: 50px;
  padding-top: 10px;
}
@media (max-width: 1300px) {
  .header-bar .logo {
    display: none;
  }
}
.header-bar .profile-link {
  height: 41px;
  width: 41px;
  border-radius: 100%;
  margin: 10px 0px;
  margin-top: 14px;
  background-image: url("../assets/profile-picture.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: gray;
  cursor: pointer;
}
@media (max-width: 1300px) {
  .header-bar .profile-link {
    display: none;
  }
}
@media (min-width: 1300px) {
  .header-bar .profile-anchor {
    display: none;
  }
}
.header-bar .study-menu {
  padding-top: 10px;
}
.header-bar .study-menu .select-menu {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  position: absolute;
  background-color: #344D90;
  text-align: center;
  z-index: 10;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}
@media (max-width: 1300px) {
  .header-bar .study-menu .select-menu {
    position: relative;
  }
}
.header-bar .study-menu .select-menu a {
  font-size: 18px;
  opacity: 0.6;
  transition: 0.3s all ease;
}
.header-bar .study-menu .select-menu a:hover {
  opacity: 1;
}
.header-bar .study-menu .studymenuactive {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
.header-bar .study-menu:hover .select-menu999 {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
.header-bar .profile-menu {
  padding: 0px;
}
.header-bar .profile-menu .select-menu {
  width: 150px;
  transform: translateX(-50px);
}
@media (max-width: 1300px) {
  .header-bar .mid-sec {
    margin-top: 100px;
  }
}
.header-bar .middle-section {
  display: flex;
  flex-direction: row;
}
@media (max-width: 1300px) {
  .header-bar .middle-section {
    flex-direction: column;
    text-transform: uppercase;
  }
}
.header-bar .middle-section a {
  display: block;
  color: white;
  font-size: 20px;
  font-weight: 300;
  padding: 10px 20px;
  height: 30px;
  margin: auto 20px;
  cursor: pointer;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.header-bar .middle-section a:hover {
  opacity: 1;
}
.header-bar .middle-section a .down-arrow-icon {
  transform: translate(2px, 2px);
}
@media (max-width: 1200px) {
  .header-bar .middle-section a {
    font-size: 18px;
  }
}
@media (max-width: 1300px) {
  .header-bar .middle-section a {
    text-align: center;
    display: block;
    width: 300px;
    margin: 20px auto;
    font-size: 22px;
    opacity: 0;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
}
@media (max-width: 360px) {
  .header-bar .middle-section a {
    width: 250px;
  }
}
.header-bar .middle-section .belliconadmin {
  margin-top: 10px;
  transform: translateX(20px);
  display: flex;
  flex-direction: row;
}
@media (max-width: 1300px) {
  .header-bar .middle-section .belliconadmin {
    display: none;
  }
}
.header-bar .middle-section .belliconadmin .down-arrow-icon {
  font-size: 25px !important;
}
.header-bar .middle-section .belliconadmin p {
  font-size: 16px;
  background-color: white;
  color: #344D90;
  padding: 2px 5px;
  border-radius: 10px;
  position: absolute;
  font-weight: 600;
  top: 0px;
  right: -5px;
}
@media (min-width: 1300px) {
  .header-bar .middle-section .adminmobilemessage {
    display: none;
  }
}
.header-bar .right-section {
  padding-right: 50px;
}
@media (max-width: 1300px) {
  .header-bar .right-section {
    padding-right: 0px;
    margin: 0px auto !important;
  }
}

.mobile-header {
  width: 100vw;
  background-color: #344D90;
}
@media (min-width: 1300px) {
  .mobile-header {
    display: none;
  }
}
.mobile-header .logo {
  width: 120px;
  height: 50px;
  padding: 10px 0px;
  margin: auto;
  background-image: url("../assets/logo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.mobile-header .nav-bar-menu {
  height: 60px;
  background-color: white;
  position: relative;
}
.mobile-header .nav-bar-menu .menu-button {
  position: absolute;
  right: 20px;
  top: 8px;
  padding: 10px;
  font-size: 20px;
  background-color: #FFFFFF;
  border-radius: 10px;
  color: #344D90;
  cursor: pointer;
}

.container {
  padding: 50px;
  min-height: calc(100vh - 233px);
  background-color: #fff;
  padding-bottom: 80px;
}
@media (max-width: 1300px) {
  .container {
    min-height: 100vh;
    padding: 20px;
  }
}
@media (max-width: 500px) {
  .container {
    min-height: 100vh;
    padding: 10px;
  }
}

.globalinput {
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 30px 0px;
}

.globalselector {
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
}

.globalbutton {
  padding: 10px 0px;
  height: 20px;
  text-align: center;
  background-color: #344D90;
  color: white;
  border: none;
  border-radius: 29px;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.globalbutton:hover {
  opacity: 0.9;
}

.page-heading {
  font-size: 40px;
  font-weight: 600;
  padding: 0px 60px;
  color: #1E2B50;
}
@media (max-width: 500px) {
  .page-heading {
    padding: 20px;
    font-size: 30px;
  }
}

.rule-button {
  display: none;
  top: calc(50vh + 50px);
}

.draggable.dragging {
  opacity: 0.5;
}

.participant-left-navbar {
  height: calc(100vh - 60px);
  width: 270px;
  padding: 30px;
  background-color: white;
  position: relative;
}
@media (max-width: 1300px) {
  .participant-left-navbar {
    background-color: var(--secondary-color-2);
  }
}
@media (max-width: 1300px) {
  .participant-left-navbar {
    position: fixed;
    z-index: 100;
    width: calc(100vw - 60px);
    display: none;
  }
}
@media (min-width: 3000px) {
  .participant-left-navbar {
    width: 340px;
  }
}
@media (max-height: 800px) {
  .participant-left-navbar {
    overflow-y: scroll;
  }
}
.participant-left-navbar .logo {
  height: 150px;
  width: 100%;
  display: block;
  margin: 0px auto;
  margin-top: 0px;
  margin-bottom: 30px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-height: 950px) {
  .participant-left-navbar .logo {
    margin-bottom: 10px;
  }
}
.participant-left-navbar .logo1 {
  height: 80px;
  width: 80px;
  margin: 40px auto;
}
.participant-left-navbar .nav-buttons {
  padding: 0px 20px;
  padding-top: 10px;
  border-radius: 29px;
}
@media (max-width: 1300px) {
  .participant-left-navbar .nav-buttons {
    border: none;
  }
}
.participant-left-navbar .nav-buttons a {
  color: var(--font-inverted-white);
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  margin-bottom: 16px;
  position: relative;
  height: 65px;
  align-items: center;
  border-radius: var(--menu-border-radius);
  position: relative;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.participant-left-navbar .nav-buttons a .nav-icon-outer .nav-icon {
  font-size: 30px;
}
.participant-left-navbar .nav-buttons a .nav-title {
  font-size: 1.3rem;
  font-weight: 600;
  width: calc(100% - 50px);
  text-align: center;
  font-family: "Fredoka-One";
}
.participant-left-navbar .nav-buttons .clippath1 {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}
.participant-left-navbar .nav-buttons .clippath2 {
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}
.participant-left-navbar .nav-buttons a.active {
  opacity: 1;
}
.participant-left-navbar .nav-buttons .small-nav {
  width: 60px;
  border-radius: 10px !important;
  opacity: 0;
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.participant-left-navbar .nav-buttons .small-nav .nav-icon-outer {
  border-radius: 10px !important;
  clip-path: none;
}
.participant-left-navbar .menu-navigate-close {
  position: absolute;
  right: 40px;
  font-size: 25px;
  color: #FFF8DA;
  cursor: pointer;
}
@media (min-width: 1300px) {
  .participant-left-navbar .menu-navigate-close {
    display: none;
  }
}
.participant-left-navbar .close-nav {
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: var(--primary-color-1);
  border-radius: 100%;
  color: #FFF8DA;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1300px) {
  .participant-left-navbar .close-nav {
    display: none;
  }
}
.participant-left-navbar .close-nav:hover {
  opacity: 1;
}
.participant-left-navbar .close-nav .nav-icon {
  font-size: 18px;
  padding: 8px 14px;
}

.mobile-nav-bar-participant {
  width: 100vw;
  background-color: var(--primary-color-1);
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (min-width: 1300px) {
  .mobile-nav-bar-participant {
    display: none;
  }
}
.mobile-nav-bar-participant .logo {
  width: 70px;
  margin: auto 40px;
}
.mobile-nav-bar-participant .menu-navigate {
  font-size: 35px;
  padding: 30px 20px;
  color: var(--secondary-color-2);
  cursor: pointer;
}
.mobile-nav-bar-participant .right-side {
  display: flex;
  flex-direction: row;
}
.mobile-nav-bar-participant .menu-navigate1 {
  font-size: 25px;
  padding: 34px 20px;
  color: var(--secondary-color-2);
  cursor: pointer;
}
.mobile-nav-bar-participant .menu-navigate1 .mobile-menu-bar {
  background-color: white;
  padding: 5px;
  border-radius: 100%;
}

.participant-heading {
  font-size: 50px;
  font-weight: 700;
  padding: 0px 60px;
  color: var(--font-color-1);
}
@media (max-width: 500px) {
  .participant-heading {
    padding: 20px;
    font-size: 30px;
  }
}

.participant-button {
  width: 250px;
  background-color: #344D90;
  color: #FFFAF1;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  border-radius: 5px;
  height: 52px;
  bottom: 50px;
  margin: 10px auto;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}
.participant-button .background-layer {
  width: 0%;
  height: 100%;
  position: absolute;
  background-color: #FFFAF1;
}
.participant-button .nav-icon-outer {
  background-color: #FFFAF1;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-right: 30px;
  padding-left: 20px;
  clip-path: polygon(80% 38%, 100% 50%, 80% 62%, 80% 99%, 0 100%, 0 0, 80% 0);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.participant-button .nav-icon-outer .nav-icon {
  font-size: 30px;
  color: #344D90;
}
.participant-button .nav-title {
  padding: 14px;
  font-weight: 600;
}
.participant-button:hover {
  opacity: 1;
}

.researcher-primary {
  background-color: #344D90 !important;
}

.pagination-component {
  padding: 0px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 35px;
  position: absolute;
  width: calc(100% - 100px);
  transform: translateX(-20px);
  height: 20px;
  bottom: 50px;
  left: auto;
  right: auto;
}
@media (max-width: 500px) {
  .pagination-component {
    padding-bottom: 20px;
    font-size: 30px;
    transform: translateX(0px);
    width: calc(100% - 60px);
    bottom: 0px;
  }
}
.pagination-component span {
  position: absolute;
  cursor: pointer;
  transition: 0.3s all ease;
  opacity: 0.3;
}
.pagination-component span:hover {
  opacity: 1;
}
.pagination-component .meta1 {
  left: 0px;
}
.pagination-component .meta2 {
  right: 0px;
}
.pagination-component .showing_number_modules_surveys {
  text-align: center;
  margin: auto;
  font-weight: 300;
  opacity: 0.9;
  font-size: 16px;
  transform: translateY(10px);
}

.hideinput {
  border: none;
  height: 0px;
  padding: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
}

@media (min-width: 1300px) {
  .logout-mobile {
    display: none !important;
  }
}

.reset-password-component .center_box input.error,
.reset-password-component .center_box select.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
.reset-password-component .inner-box {
  width: 90%;
  height: 100%;
  margin: auto;
  position: relative;
}
.reset-password-component .inner-box .close {
  position: absolute;
  right: -30px;
  transform: translate(-40px, 40px);
  cursor: pointer;
  transition: 0.3s all ease;
}
.reset-password-component .inner-box .close:hover {
  color: #344D90;
}
.reset-password-component .inner-box .logo {
  margin: auto;
  margin-top: 0px;
  height: 150px;
  width: 300px;
  background-image: url("/assets/participantDashboard/logo1.svg");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
@media (max-width: 500px) {
  .reset-password-component .inner-box .logo {
    width: 250px;
  }
}
.reset-password-component .inner-box .head {
  margin: 0px 0px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #344D90;
  padding: 30px 20px;
}
@media (max-width: 500px) {
  .reset-password-component .inner-box .head {
    font-size: 25px;
  }
}
.reset-password-component .inner-box .login {
  display: flex;
  flex-direction: column;
}
.reset-password-component .inner-box .login input {
  width: 500px;
  border: none;
  background-color: white;
  padding: 10px 20px;
  margin: 20px auto;
  margin-top: 0px;
  border-bottom: 1px solid #344D90;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
@media (max-width: 700px) {
  .reset-password-component .inner-box .login input {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .reset-password-component .inner-box .login input {
    width: 230px;
  }
}
.reset-password-component .inner-box .login input.error {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em #344D90;
}
@keyframes shake {
  0% {
    transform: translateX(0rem);
  }
  25% {
    transform: translateX(0.5rem);
  }
  75% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.reset-password-component .inner-box .login-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: auto;
  width: 900px;
  margin-bottom: 20px;
}
@media (max-width: 1000px) {
  .reset-password-component .inner-box .login-box {
    flex-direction: column;
    width: 90%;
  }
}
.reset-password-component .inner-box .login-box .login-box-each {
  width: 50%;
  margin: auto;
}
@media (max-width: 1000px) {
  .reset-password-component .inner-box .login-box .login-box-each {
    width: 90%;
    margin: auto;
  }
}
@media (max-width: 500px) {
  .reset-password-component .inner-box .login-box .login-box-each {
    width: 99%;
    margin: auto;
  }
}
.reset-password-component .inner-box .login-box .login-box-each input {
  width: calc(100% - 40px);
}
.reset-password-component .inner-box .login-box .login-box-each select {
  width: 100%;
  border: none;
  background-color: white;
  padding: 10px 20px;
  margin: 20px auto;
  margin-top: 0px;
  border-bottom: 1px solid #344D90;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
}
.reset-password-component .inner-box .passwordmatch {
  color: red;
  font-size: 14px;
  transform: translateY(-10px);
  text-align: center;
}
.reset-password-component .inner-box .forgot-password {
  margin: auto;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}
@media (max-width: 400px) {
  .reset-password-component .inner-box .forgot-password {
    font-size: 14px;
  }
}
.reset-password-component .inner-box .forgot-password a {
  color: #344D90;
  cursor: pointer;
  opacity: 0.9;
  transition: 0.3s all ease;
}
.reset-password-component .inner-box .forgot-password a:hover {
  opacity: 1;
}
.reset-password-component .inner-box .incorrectuspassalert {
  display: none;
  text-align: center;
  transform: translateY(-20px);
  padding: 20px;
  padding-top: 0px;
  font-family: "Roboto", sans-serif;
  color: red;
  /*@media (max-height: 900px) {
         transform: translateY(-40px);
  }*/
}
.reset-password-component .inner-box .nouspassalert {
  display: none;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
  color: red;
  /*@media (max-height: 900px) {
         transform: translateY(-40px);
  }*/
}
.reset-password-component .inner-box .successful-login {
  display: none;
  text-align: center;
  padding: 20px;
  padding-top: 5px;
  font-family: "Roboto", sans-serif;
  color: #344D90;
}
@media (max-height: 900px) {
  .reset-password-component .inner-box .successful-login {
    transform: translateY(-20px);
  }
}
.reset-password-component .inner-box .loading_line {
  background-color: #344D90;
  width: 0px;
  height: 5px;
}
@media (max-height: 900px) {
  .reset-password-component .inner-box .loading_line {
    transform: translateY(-10px);
  }
}
.reset-password-component .inner-box .resetpassword-sent {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  border: 2px solid #344D90;
  padding: 20px;
  margin-bottom: 40px;
}
.reset-password-component .inner-box .update-button {
  padding: 10px 20px;
  text-align: center;
  width: calc(100% - 40px);
  background-color: #344D90;
  color: white;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  cursor: pointer;
  margin: auto;
  border-radius: 5px;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .reset-password-component .inner-box .update-button {
    margin: auto;
  }
}
@media (max-width: 400px) {
  .reset-password-component .inner-box .update-button {
    font-size: 18px;
    padding: 12px 20px;
  }
}
.reset-password-component .inner-box .update-button:hover {
  opacity: 1;
}
.reset-password-component .inner-box .margin-bottom {
  height: 50px;
  width: 100%;
}

#endOfModule, #nextSlide, #nextSurvey, #totalSlides {
  position: absolute;
  bottom: 0px;
  width: 0px;
  display: none;
}

#registrationBox, #registration_login_box, #login_part {
  display: none;
}

#registrationBox .login-box-each {
  padding: 20px;
  transform: translateX(-20px);
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
}
@media (min-width: 1000px) {
  #registrationBox .login-box-each {
    padding: 40px;
  }
}
#registrationBox .login-box-each input, #registrationBox .login-box-each select {
  width: calc(100% - 40px);
  text-align: center;
  margin-bottom: 7px;
  margin-top: 7px;
  border: 1px solid rgb(221, 221, 221);
}
#registrationBox .login-box-each select {
  width: 100%;
}

.center_box {
  max-width: 500px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 420px;
  padding: 20px;
  background-color: white;
  box-shadow: 1px 1px 10px rgb(228, 227, 227);
  border-radius: 10px;
}
.center_box.expanded-container {
  max-width: 1000px;
}
@media (min-width: 1000px) {
  .center_box {
    padding: 40px;
  }
}
.center_box.height-auto {
  height: auto;
}
.center_box img {
  height: 150px;
  display: block;
  margin: auto;
  margin-bottom: 40px;
}
.center_box input {
  width: calc(100% - 40px);
  text-align: center;
  margin-bottom: 5px;
  margin-top: 5px;
  background-color: #fafafa;
  border: 1px solid rgb(221, 221, 221);
}
.center_box button {
  padding: 10px 20px;
  text-align: center;
  width: 100%;
  background-color: #344D90;
  color: white;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.9;
  transition: 0.3s all ease;
  margin-top: 20px;
  border: none;
}
.center_box button:hover {
  opacity: 1;
}
.center_box .consent-item {
  margin: 5px 0;
  margin-left: 30px;
  text-indent: -30px;
  line-height: 1.5em;
}
.center_box .consent-item input {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.center_box .consent-radio {
  width: auto;
}
.center_box .consent-button {
  margin-top: 30px;
  line-height: 1.5em;
}
.center_box .globalselector {
  width: 100%;
  text-align: center;
}

.participant-help-button {
  display: none;
  position: fixed;
  top: 0 !important;
  right: 3% !important;
  height: 110px;
  width: 110px;
  margin: 2px auto;
  background-image: url("../assets/dashboards/shared/help_button.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 200;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1300px) {
  .participant-help-button {
    top: 100px;
    right: 20px;
  }
}
@media (max-width: 800px) {
  .participant-help-button {
    position: absolute;
    height: 70px;
    width: 70px;
    right: 15% !important;
    top: 10px !important;
  }
}
.participant-help-button:hover {
  transform: scale(1.2);
}

.sv-matrix-root tbody tr:nth-child(even) {
  background-color: white;
}

#showcollapsemenu {
  display: none;
}

#toast-container {
  font-family: "Roboto", sans-serif;
}

.not-found {
  text-align: center;
  background-color: #FAFAFA;
}
.not-found .icon {
  margin-top: 12vh;
}
.not-found h1 {
  margin-top: 8vh;
}
.not-found h3 {
  padding-bottom: 45vh;
}

.loading_c {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}
.loading_c .spinner1 {
  margin: 100px auto;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loading_c .spinner1 > div {
  background-color: #344D90;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay1 1.2s infinite ease-in-out;
  animation: sk-stretchdelay1 1.2s infinite ease-in-out;
}
.loading_c .spinner1 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loading_c .spinner1 .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.loading_c .spinner1 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.loading_c .spinner1 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay1 {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes sk-stretchdelay1 {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

.svgtypeerror, .svgtypeerror2, .svgtypeerror1, .svgtypeerror3 {
  display: none;
  color: red !important;
}

.logoutIframes {
  display: none;
}
.logoutIframes iframe {
  height: 2px;
  width: 2px;
  border: none;
}

#isLogoutClicked {
  display: none;
}

.viewingParticipantAccount {
  position: fixed;
  right: 20px;
  bottom: 10px;
  background-color: white;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 0.5em #344D90;
  font-family: "Roboto", sans-serif;
}

.viewingParticipantmessage {
  bottom: 55px;
}

.sidebar {
  position: fixed;
  top: 15%;
  right: 50px;
  width: 275px;
  font-weight: bold;
  font-family: "Dosis:wght@800" !important;
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/sidebar-teen-bg.svg") no-repeat;
  background-size: auto 100%;
  height: 765px;
}
.sidebar .stars-shine {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/sidebar-Teen-icon.svg") no-repeat;
  height: 125px;
  width: 125px;
  position: absolute;
  top: -30px;
  right: -50px;
}
.sidebar .child-ribon {
  display: none !important;
}
.sidebar h1 {
  margin-top: 70px;
  margin-left: 25px;
  margin-bottom: 15px;
  color: #D5B382;
  text-shadow: 1px 1px 3px #000;
}
.sidebar .lesson {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-flow: column;
  gap: 0;
  padding: 5px 5px;
  margin-left: 10px;
  margin-top: 5px;
  width: 100%;
}
.sidebar .starts {
  display: inline-block;
  background: #48A9A6;
  padding: 5px 5px;
  margin-top: 5px;
}
.sidebar .icon {
  width: 55px;
  height: 100%;
  background-size: contain;
  display: inline-block;
  margin-top: 10px;
  align-content: right;
  background-repeat: no-repeat;
}
.sidebar .start-icon {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/unfilled-star.svg");
  width: 25px;
  height: 25px;
  background-size: contain;
  display: inline-block;
  margin-top: 10px;
}
.sidebar .star-filled {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/filled-star.svg") !important;
  background-size: contain !important;
}
.sidebar .lesson-legend {
  width: 50%;
  margin-left: 25px;
  margin-top: 15px;
  font-size: smaller;
}
.sidebar .left-lesson {
  display: inline-block;
}
.sidebar .right-lesson {
  display: inline-block;
}

#next, #next_5 {
  cursor: pointer;
}

.sidebar .icon-cluecalmers {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/ch-cluecalmers.svg") no-repeat;
  background-position: right center;
}
.sidebar .icon-powerthinking {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/ch-powerthinking.svg") no-repeat;
  background-position: right center;
}
.sidebar .icon-changefocus {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/ch-changefocus.svg") no-repeat;
  background-position: right center;
}
.sidebar .icon-mtmomentum {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/ch-climbing.svg") no-repeat;
  background-position: right center;
}
.sidebar .icon-mood {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/ch-moodboost.svg") no-repeat;
  background-position: right center;
}

.teenager .sidebar .icon-cluecalmers {
  background: url("../assets/dashboards/teen/teen_db_main_clue_calmers.svg") no-repeat;
  background-position: right center;
}
.teenager .sidebar .icon-powerthinking {
  background: url("../assets/dashboards/teen/teen_db_main_power_thinking.svg") no-repeat;
  background-position: right center;
}
.teenager .sidebar .icon-changefocus {
  background: url("../assets/dashboards/teen/teen_db_main_change_focus.svg") no-repeat;
  background-position: right center;
}
.teenager .sidebar .icon-mtmomentum {
  background: url("../assets/dashboards/teen/teen_db_main_climbing_plans.svg") no-repeat;
  background-position: right center;
}
.teenager .sidebar .icon-mood {
  background: url("../assets/dashboards/teen/teen_db_main_mood_boost.svg") no-repeat;
  background-position: right center;
}

.child .sidebar {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/child-sidebar.svg") no-repeat !important;
}
.child .sidebar h1 {
  color: #28B4CC !important;
}
.child .sidebar .lesson-legend {
  display: none !important;
}
.child .sidebar .child-ribon {
  background: url("../assets/participantDashboard/all_dashboards/Shared/sidebar/waytogo.svg") no-repeat;
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: -30px;
  right: 75px;
  display: inline-block !important;
}
.child .stars-shine {
  display: none !important;
}

.cursor-pointer {
  cursor: pointer;
}

.stat-text.blue-background {
  background: #344D90;
  color: #fff !important;
}

.stat-text.grey-background {
  background: #ddd;
  border: 1px solid #666 !important;
  color: #666 !important;
  cursor: not-allowed;
}

.error-message {
  color: red !important;
  font-size: 18px;
  padding: 20px;
  text-align: center;
}

.participant-application-view.clinician .right-participant-view {
  background: #fff !important;
}

.full-width-table {
  width: 100%;
}

.link-in-blue {
  color: #98B3CE;
}

.disabled-button {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.bg-error {
  background-color: #F8D5D5;
  border: 1px solid #f00;
}

.display-flex {
  display: flex;
  flex: 1;
}

.justify-space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #ffffff;
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}

.ember-power-select-dropdown * {
  box-sizing: border-box;
}

.ember-power-select-trigger {
  position: relative;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-radius: 4px;
  background-color: #ffffff;
  line-height: 1.75;
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: 1.75em;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
  /* Minimum clearfix for modern browsers */
}
.ember-power-select-trigger:after {
  content: "";
  display: table;
  clear: both;
}

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  box-shadow: none;
}

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: #aaaaaa transparent transparent transparent;
}
.ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon {
  transform: rotate(180deg);
}

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer;
}

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: inline-block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  float: left;
  background-color: transparent;
  text-indent: 2px;
  /* There's a browser bug where this selectos cannot be chained with commas */
}
.ember-power-select-trigger-multiple-input:disabled {
  background-color: #eeeeee;
}
.ember-power-select-trigger-multiple-input::placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-multiple-options {
  padding: 0;
  margin: 0;
}

.ember-power-select-multiple-option {
  border: 1px solid gray;
  border-radius: 4px;
  color: #333333;
  background-color: #e4e4e4;
  padding: 0 4px;
  display: inline-block;
  line-height: 1.45;
  float: left;
  margin: 2px 0 2px 3px;
}

.ember-power-select-multiple-remove-btn {
  cursor: pointer;
}
.ember-power-select-multiple-remove-btn:not(:hover) {
  opacity: 0.5;
}

.ember-power-select-search {
  padding: 4px;
}

.ember-power-select-search-input {
  border: 1px solid #aaaaaa;
  border-radius: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px;
}
.ember-power-select-search-input:focus {
  border: 1px solid #aaaaaa;
  box-shadow: none;
}

.ember-power-select-dropdown {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  line-height: 1.75;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  color: inherit;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid #aaaaaa;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid #aaaaaa;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%;
}

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
.ember-power-select-options[role=listbox] {
  overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
  -webkit-overflow-scrolling: touch;
  max-height: 12.25em;
}

.ember-power-select-option {
  cursor: pointer;
  padding: 0 8px;
}

.ember-power-select-group[aria-disabled=true] {
  color: #999999;
  cursor: not-allowed;
}

.ember-power-select-group[aria-disabled=true] .ember-power-select-option,
.ember-power-select-option[aria-disabled=true] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed;
}

.ember-power-select-option[aria-selected=true] {
  background-color: #dddddd;
}

.ember-power-select-option[aria-current=true] {
  background-color: #5897fb;
  color: #ffffff;
}

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold;
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: #eeeeee;
}

.ember-power-select-trigger {
  padding: 0 16px 0 0;
}

.ember-power-select-selected-item, .ember-power-select-placeholder {
  margin-left: 8px;
}

.ember-power-select-status-icon {
  right: 5px;
}

.ember-power-select-clear-btn {
  right: 25px;
}

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px;
}
.ember-power-select-group .ember-power-select-option {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px;
}

.ember-power-select-trigger[dir=rtl] {
  padding: 0 0 0 16px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item, .ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
  margin-right: 8px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
  left: 5px;
  right: initial;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
  left: 25px;
  right: initial;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px;
}