/* width */
::-webkit-scrollbar {
  width: 0.75rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #8ddcf9;
  border: 1px solid #000000b8;
  border-radius: 1rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
  transition: all 1.5s;
  background: #006ea582;
  border: 1px solid #00000080;
  border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  border: 1px solid black;
}

.w-30 {
  width: 30% !important;
}

.form-layout .row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.form-layout .row .col {
  width: 50% !important;
  display: flex;
  flex-direction: column;
  padding: 1rem 4rem;
}

.form-layout .row .col input.w-100 {
  width: 100%;
}


.pb-4 {
  padding-bottom: 4rem !important;
}

#root-body {
  background: #ececec;

  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

body {
  margin: 0px;
  overflow: hidden;
  user-select: none;
  height: 100%;
  width: 100%;
  font-family: sans-serif;

}

html {
  height: 100%;
  width: 100%;
}

.relative {
  position: relative;
}

.position-unset {
  position: unset !important;
  float: unset !important;
}

.m-auto {
  margin: auto !important;
}

.white {
  color: white;
}

.topnav {
  position: absolute;
  top: 0px;
  width: 100vw;
  color: grey;
  z-index: 1000;
  text-align: center;
}

.topnav .left {
  position: absolute;
  left: 15px;
  top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.topnav .center {
  position: absolute;
  top: 15px;
  right: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translateX(50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.topnav .right {
  position: absolute;
  right: 15px;
  top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.button {
  cursor: pointer;
}


.topnav .button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50px;
  height: 50px;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 2px;
  box-shadow: 0px 0px 10px 1px #fff;
  position: relative;
  line-height: 60px;
  font-size: 25px;
}

.topnav .button:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.topnav .button.selected:after {
  box-shadow: inset -3px -3px 7px #fff, inset 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.bottomnav {
  position: absolute;
  bottom: 0px;
  /* width:100vw; */
  width: 100%;
  z-index: 1000;
  color: grey;
  text-align: center;
}

.bottomnav .left {
  position: absolute;
  left: 15px;
  bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.bottomnav .center {
  position: absolute;
  bottom: 0px;
  right: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translateX(50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.bottomnav .right {
  position: absolute;
  right: 15px;
  bottom: 15px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.bottomnav .button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50px;
  height: 50px;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 2px;
  box-shadow: 0px 0px 10px 1px #fff;
  position: relative;
  line-height: 60px;
  font-size: 25px;
}

.bottomnav .button:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.bottomnav .button.selected:after {
  box-shadow: inset -3px -3px 7px #fff, inset 3px 3px 5px rgba(94, 104, 121, 0.712);
}

#logo {
  width: 319px;
  height: 70px;
  font-size: 18px;
  line-height: 70px;
  background-image: url("../images/rompa_logo.png");
  background-repeat: no-repeat;
  background-size: auto 70px;
  cursor: pointer;
  scale: 0.75;
  transform: translateY(-25%);
}

.Navx2 {
  width: 304px;
  height: 302px;
}

.Navx1 {
  width: 304px;
  height: 151px;
}



.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0);
  text-align: center;
}

.Navfull {
  width: 100%;
}

.nav .button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 200px;
  height: 200px;
  background: #dde1e7;
  border-radius: 15%;
  margin: 0 2px;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
  position: relative;
  line-height: 60px;
  font-size: 25px;
}

.nav .button:after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 15%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.nav .banner {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 700px;
  height: 350px;
  background: rgba(255, 255, 255, 0.5);
  padding-top: 15px;
  border-radius: 15px;
  position: relative;
  /* line-height: 60px;  */
  font-size: 25px;
}

.inputBox input {
  border: 5px solid rgba(167, 233, 245, 1);
  line-height: 50px;
  margin-bottom: 10px;
  padding-left: 5px;
  color: grey !important;
}

.inputBox textarea {
  border: 5px solid rgba(167, 233, 245, 1);
  line-height: 50px;
  margin-bottom: 10px;
  padding-left: 5px;
  color: grey !important;
  resize: none;
  margin-bottom: 0px;
}

.inputBox input:not([type="checkbox"]) {
  width: 600px;
}

.inputBox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}


.inputBox select {
  border: 5px solid rgba(167, 233, 245, 1);
  width: 616px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  color: grey !important;
  padding: 0px;
}

.inputBox table {
  /* border:5px solid rgba(167,233,245,1); */
  width: 600px;
  /* line-height: 50px;  */
  margin-bottom: 10px;
  padding-left: 5px;
  font-size: 18px;
  line-height: 18px;
  /* color:grey!important; */
}


.Navfull .button {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
}

/* //__________________________ */

.opacity-0 {
  opacity: 0 !important;
  display: none !important;
}

.Navfull .bottomnav {
  z-index: 0;
}

.Navfull .bottomnav .left {
  left: 15px;
}

/* .Navfull h2{ */
/* margin-left:40px; */
/* } */

.Navfull .bottomnav .button {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  height: 100vh;
  width: 50px;
  height: 50px;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 2px;
  box-shadow: 0px 0px 10px 1px #fff;
  position: relative;
  line-height: 60px;
  font-size: 25px;
}

.Navfull .bottomnav .button:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgb(94 104 121 / 71%);
}

.banner input[type="submit"]:not(.cancel) {
  position: absolute;
  bottom: 15px;
  right: 15px;
  color: white !important;
  line-height: 40px !important;
}

.nav .banner {
  background-color: rgb(76 148 211) !important;
}

.nav .banner span {
  padding-left: 5px;
  text-align: left;
  padding-bottom: 10px;
}

.nav .enabled-box {
  float:right;
  color:white;
  font-size: 1rem;
}

.enabled-box[type="checkbox" i] {
  margin: 0 3px 10px 4px;
}


.nav .banner span:not(.login) {
  width: 600px;
}

.nav form {
  width: 690px;
}

.nav form h2 {
  padding-left: 5%;
  padding-top: 15px;
}

.row {
  /* display: inline-block; */
  /* height: 130px; */
  /* position: absolute; */
  /* left: 0px; */
  /* background-color: #e4e4e4; */
  /* margin-top: 20px; */
  /* margin-bottom: 20px; */
  width: 620px;
  display: inline-block;
}

/* //__________________________ */

.button.selected {
  color: dodgerblue;
}

.button.selected:after {
  box-shadow: inset -3px -3px 7px #fff, inset 3px 3px 5px rgb(94 104 121 / 71%);
}

.Navfull .button img {
  width: 150px;
  height: 150px;
  padding: 15px;
}

.banner h2 {
  text-align: left;
  margin-bottom: 15px;
  margin-top: 0px;
  color: white;
}

.pagecover {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

.banner input[type="submit"] {
  width: 150px;
  height: 40px;
  border-radius: 25px;
  float: right;
  font-size: 20px;
  border-width: 0px;
  background-image: linear-gradient(#A9D349, #65AD4A);
  color: white;
  cursor: pointer;
}

.banner span {
  font-size: 14px;
  float: left;
  height: 10px;
  line-height: 12px;
  padding-right: 10px;
  padding-bottom: 5px;
  color: white;
}

.banner .navlink {
  cursor: pointer;
  color: blue;
}

input[type="file"] {
  display: inline-block;
  width: 617px;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-size: 60px 60px;
}

.banner a {
  font-size: 12px;
  line-height: 12px;
  float: left;
  height: 10px;
}

.active {
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.notactive {
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.banner .close_model {
  transition: color 1.5s ease-in-out;
  line-height: 20px;
  height: 20px;
  margin-right: 15px;
  float: right;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.banner .close_model:hover {
  color: #ff8000 !important;
  cursor: pointer !important;
}

canvas {
  position: absolute;
}

.content {
  height: 100%;
  width: 100vw;
  border: 0px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.container .body {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
}

.container .body .body-fill {
  position: absolute;
  left: 0%;
  right: 0%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container .footer {
  position: absolute;
  top: 100px;
  right: 10%;
  /* //bottom:40px;
	//left:50%; */
  transform: translateX(100%);
}

.container .footer .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 2px;
  box-shadow: 0px 0px 10px 1px #fff;
  position: relative;
  line-height: 60px;
  font-size: 25px;
  color: grey;
}

.container .footer .button:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.container .footer.selected .button:after {
  box-shadow: inset -3px -3px 7px #fff, inset 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.item {
  width: 19.7%;
  min-height: 100px;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(167, 233, 245, 1);
}


.item img {
  width: 100%;
  height: 100%;
  display: none;
}

.item video {
  width: 100%;
  height: 100%;
  display: none;
}

.item span {
  color: white;
  font-size: 20px;
  display: none;
}

.item p {
  color: white;
  font-size: 20px;
  display: none;
  margin: 5px;
  z-index: 999;
}


.transitionend .item video {
  display: block;
}

.transitionend .item img {
  display: block;
}

.transitionend .item span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.transitionend .item span::before {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.transitionend .item p {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

}

/* Custom styling below .table and .row selectors */

.table {
  width: 100%;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
}

.table td {
  border-bottom: 1px solid #dee2e6;
}

.table td,
.table th {
  padding: 0.75rem;
  vertical-align: top;
  width: 100%;
}

.row .left {
  position: relative;
  left: 0px;
  width: 310px;
  float: left;
  /* display: block; */
}

.row .right {
  position: absolute;
  right: 40px;
  width: 310px;
  /* width: 50%; */
  /* float: right; */
  /* display: block; */
  /* display: none; */
}

.row .right input {
  width: 93%;
  line-height: 12px;
  height: 100px;

}

.row .left input {
  /* margin-right:2px; */
  width: 93%;
  line-height: 12px;
  height: 100px;
}

.row .right textarea {
  width: 93%;
  line-height: 12px;
  height: 100px;

}

.row .left textarea {
  /* margin-right:2px; */
  width: 93%;
  line-height: 12px;
  height: 100px;
}

.row .right select {
  margin-left: 2px;
  width: 98%;
}

.row .left select {
  width: 98%;
}

/* CUSTOM TABLE STYLING */
/* Follow guidelines to layout table the same as region.ejs

<table class="table custom">
<thead class="custom">
<tr class="row custom (+row-0 or row-1)">

.row-0 and .row-1 used for alternating colors */

.table.custom {
  table-layout: fixed;
  width: -webkit-fill-available;
  background-color: #00000094;
  overflow-x: hidden;
  border-spacing: 0px 2px;
  border: 1px solid black;
  border-radius: 0.4rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

thead.custom {
  color: white;
  font-size: 1.2rem;
}

thead.custom i.fa-solid {
  transition: all 1.5s ease-in-out;
  margin: 0rem 0.5rem;
  font-size: 1rem;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
}

th:hover {
  cursor: pointer;
}

thead.custom th:hover i.fa-solid {
  margin: 0rem 0.5rem;
  font-size: 1rem;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: orange;
}

.row-0 {
  background-color: #e7f8ff;
}

.row-1 {
  background-color: #9dddf8;
}

/* .table.custom tbody:nth-child(odd) {
  background-color: #e7f8ff;
}

.table.custom tbody:nth-child(even) {
  background-color: #9dddf8;
} */

.row.custom {
  transition: all 1s;
  text-transform: capitalize;
  border: 1px solid black;
  border-radius: 0.2rem;
  display: table-row;
  font-weight: 600;
}

.row.custom:hover {
  background-color: #00b5ff;
  cursor: pointer;
}

.tfoot.custom {
  transition: all 1.5s ease-in-out;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.tfoot.custom:hover {
  cursor: pointer;
  background-color: #000;
  color: orange;
}

.tfoot.custom td {
  font-weight: 600;
}

/* END OF TABLE STYLING */

.filewrapper .background {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  width: 60px;
  background: url(../images/upload.png) center center no-repeat #e4e4e4;
  background-size: 60px 60px;
}

.filewrapper img {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  display: none;
}

.filewrapper video {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  display: none;
  background-color: #E4E4E4;
}

.filewrapper h1 {
  margin: 0px;
  font-size: 15px;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 100%;
  display: none;
  background-color: #E4E4E4;
  line-height: 60px;
}

.outline-hover:hover {
  transition: all 0.5s;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.tooltip.text {
  opacity: 0%;
  /* visibility: hidden; */
  /* opacity: 100% !important;
  visibility: visible !important; */
  padding: 0.3rem;
  font-size: 1rem;
  font-weight: normal;
  font-family: sans-serif;
  line-height: normal;
  width: auto;
  height: auto;
  background-color: #02416a;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  position: absolute;
  top: 3.5rem;
  z-index: 1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border: 1px solid black;
}

#home-bottomnav .tooltip.text {
  top: -2.5rem
}

.fa:hover .tooltip.text {
  transition: all 2s;
  opacity: 100%;
}

.fa:not(:hover) .tooltip.text {
  transition: all 1s;
  opacity: 0%;
}

.tooltip.text::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

#home-bottomnav .tooltip.text::after {
  top: 100%;
  border-color: black transparent transparent transparent;
}

.fade-in {
  opacity: 0%;
  transform: scale(1);
  animation: FadeIn 1.5s forwards ease-in-out;
}

@keyframes FadeIn {
  0% {
    opacity: 0%;
  }

  90% {
    opacity: 75%;
  }

  100% {
    opacity: 100%;
  }

}

.ds1 {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.ds2 {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.ds3 {
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.ds4 {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}


.default-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 2px;
  box-shadow: 0px 0px 10px 1px #fff;
  position: relative;
  line-height: 60px;
  font-size: 25px;
  color: grey;
}

.default-btn::before {
  content: "\2b";
}

.default-btn::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.banner.box-mod {
  /* max-height: 44rem !important; */
  max-height: 80% !important;

  border-radius: 1rem !important;
  /* box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px, rgb(10 37 64 / 35%) 0px -2px 6px 0px inset !important; */
  /* border: 2px solid #00000066 !important; */
  /* overflow-y: auto; */
  border: 1px solid black !important;
  box-shadow: none !important;
}

.inherit {
  position: inherit !important;
}

.fas.fa-spinner.fa-spin {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.btn-style {
  transition: all 0.5s;
  padding: 0.5rem 0.75rem;
  width: fit-content;
  height: fit-content;
  margin: 1rem auto;
}

input[type="submit"].btn-style {
  position: unset;
  bottom: unset;
  right: unset;
  background-image: linear-gradient(#31c954, #27a243);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
  border-radius: 0.5rem;
  border: 1px solid #00000085;
  margin: 2rem 0rem 0rem;
  font-size: 1.5rem;
  font-weight: 600;
  height: auto;
  color: var(--text-color) !important;
  cursor: pointer;
  width: fit-content;
  padding: 0rem 2.5rem;
}

.btn-style.red {
  background-image: linear-gradient(#ff3f52, #c52e3d) !important;
}

.btn-style.teal {
  background-image: linear-gradient(#1bb0c7, #1591a5) !important;
}

.btn-style.blue {
  background-image: linear-gradient(#1d85f5, #0261c7) !important;
}

.close-btn-right {
  margin: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

.checkbox-container {
  width: 100%;
  height: 21vh;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  overflow: hidden;
  margin-top: 0.5rem;
  background-color: white;
}

.checkbox-container .inner-checkbox {
  width: inherit;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
}

.checkbox-container .option {
  display: flex;
  white-space: nowrap;
  align-items: center;
  margin: 1rem;
}

.checkbox-container .option label {
  color: black !important;
}

.checkbox-container .option input {
  line-height: unset;
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.5rem;
  margin-left: 0.5rem;
}

.input-container.form-columns {
  display: flex;
  position: relative;
}

.input-container.form-columns .input-column {
  margin-top: 2rem;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.input-container.form-columns .input-column input,
.input-container.form-columns .input-column select {
  border: 5px solid rgb(0 155 255 / 56%);
  border-radius: 0.5rem;
  width: auto !important;
  line-height: 50px !important;
  height: 50px;
}

.input-container.form-columns .mr-1 {
  margin-right: 1rem;
}

.input-container.form-columns .ml-1 {
  margin-left: 1rem;
}

.input-container.form-columns .input-column select {
  height: 62px;
  margin: 0px 16px 0px 0px;
  padding: 1px 2px 1px 5px;
}

.privacy_holder{
	padding:0px 40px 40px 40px;
	margin-top:100px;
	overflow-y:auto;
	height:80vh;
}