@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
html {
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  color: #344050;
  background: #edf2f9;
  background: powderblue;
}
p {
    white-space: pre-line;
}
a {
    text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
    color: #555;
}
#iFrame {
    width: 100%;
    height: 62rem;
}
input, button, textarea {
    font-family: inherit;
}
/* TEXTAREAS STARTS */
.fixed-textarea {
   resize: vertical;
   height: auto !important;
}
.expanding-textarea {
    width: 100%;
    resize: none; /* Disable manual resizing by users */
    /*overflow: hidden;  Hide scrollbars */
}
.expanding-textarea::-webkit-scrollbar {
  width: 0.7rem;
}
.expanding-textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2.5rem;
}
.expanding-textarea::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2.5rem;
}
.expanding-textarea::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}
/* TEXTAREAS ENDS */



.hidden {
    display: none;
}
.ac {
    align-items: center;
    text-align: center;
}
.ar {
    align-items: right;
    text-align: right;
}
.al {
    align-items: left;
    text-align: left;
}
.js {
    justify-items: stretch !important;
}
.mb {
    margin-bottom: 1rem;
}
.mb2 {
    margin-bottom: 2rem;
}
.mb3 {
    margin-bottom: 3rem;
}
.bb {
    border-bottom: 1px solid #555;
}
.sep {
  border-bottom: 1px solid #cacaca;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.pb {
    padding-bottom: 1rem;
}

/* LOADER STARTS */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.loader-tiny {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* LOADER ENDS */


/* OVERLAY */
.overlay-con {
  position: fixed;
  display: none;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
}
.overlay-in{
    position: absolute;
    max-width: 50rem;
    max-height: 68rem;
    width: 100%;
    top: 5rem;
    padding: 1rem;
    left: 50%;
    transform: translate(-50%);
  overflow-y: auto;
}

#overlay-in-alert {
  max-width: 45rem;
  width: 90%;
  top: 8rem;
}


.overlay-in::-webkit-scrollbar {
  width: 0.7rem;
}
.overlay-in::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2.5rem;
}
.overlay-in::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2.5rem;
}
.overlay-in::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

/* OVERLAY */

.separate-section {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    padding: 0.8rem;
    margin: 1rem 0;
}


.radius-shadow {
  box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1),
    0 3px 6px 0 rgba(0, 0, 0, 0.07);
  border-radius: 0.5rem;
  
  background-color: #fff;
}



.tiny-input {
    height: 1.8rem;
    width: 100%;
    outline: none;
    font-size: 1.3rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #B3B3B3;
    padding: 0 0.5rem;
}
.small-input {
    height: 2.4rem;
    width: 100%;
    outline: none;
    font-size: 1.5rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 0.1rem solid #B3B3B3;
}
.medium-input {
    height: 3rem;
    width: 100%;
    outline: none;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #B3B3B3;
    padding: 0 1rem;
}
.small-input-like {
    height: 2rem;
    width: 100%;
    outline: none;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #e5e5e5;
    padding: 0 1rem;
    display: flex;
    align-items:center;
    justify-content: center;
}
.medium-input-like {
    height: 3rem;
    width: 100%;
    outline: none;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #e5e5e5;
    padding: 0 1rem;
    display: flex;
    align-items:center;
    justify-content: center;
}
.big-input {
    height: 3.6rem;
    width: 100%;
    outline: none;
    font-size: 1.6rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #B3B3B3;
    padding: 0 1.2rem;
}
.small-input:focus, .medium-input:focus, .big-input:focus{
  border: 0.2rem solid #4285f4;
}
.small-input::placeholder, .medium-input::placeholder, .big-input::placeholder{
  color: #bfbfbf;
}
.app-img-btn {
  background-color: #fff;
  color: rgb(242, 242, 242);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.1rem 0.1rem;
  height: 2.7rem;
  width: 2.4rem;
  text-align: center;
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);

}
.small-app-like-btn {
  background-color: #efefef;
  color: #292929;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
  text-align: center;
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);

}
.small-app-like-btn:hover {
  background: #d6d6d6;
  color: #101010;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.app-img-btn:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.app-img-btn:active, .small-app-like-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}

.app-img {
  height: 2rem;
  width: 2rem;

}
.square-btn {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.2rem auto;
  height: 1.7rem;
  width: 1.7rem;
  text-align: center;
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.no-pad-btn {
  font-size: 0.9rem;
  cursor: pointer;
  border: 0.1rem solid;
  padding: 0.4rem 0.2rem;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.tiny-btn {
  font-size: 0.9rem;
  cursor: pointer;
  border: 0.1rem solid;
  height: 1.3rem;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.small-btn {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.medium-btn {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.big-btn {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.small-btn:hover, .medium-btn:hover, .big-btn:hover {
    background-color: rgba(0,0,0,0);
}
.yellow-pastel {
  background-color: #ffefca;
  border-color: #ffcc85;
  color: #bc3803;
}
.red-pastel {
  background-color: #ffc7c7;
  border-color: #ff9696;
  color: #850000;
}
.blue-pastel {
  background-color: #c7ebff;
  border-color: #96d9ff;
  color: #005585;
}
.purple-pastel {
  background-color: #fdc7ff;
  border-color: #ff96ff;
  color: #85007a;
}
.gray-pastel {
  background-color: #e4e4e4;
  border-color: #c4c4c4;
  color: #242424;
}
.green-pastel {
    background-color: #ddffca;
    border-color: #7dfc4a;
    color: #25bc03;
}
.blue-transparent {
    background-color: #caf5ff26;
    border-color: #85cfff;
    color: #039fbc;
}
.red-transparent {
    background-color: #ffcaf626;
    border-color: #ff8585;
    color: #bc0303;
}
.purple-transparent {
    background-color: #ffcaf626;
    border-color: #ff85f8;
    color: #bc0380;
}
.green-transparent {
    background-color: #ffcaf626;
    border-color: #7dfc4a;
    color: #25bc03;
}



.normal-title {
  font-size: 1.6rem;
  line-height: 1.7rem;
}
.small-title {
  font-size: 1rem;
  line-height: 1.1rem;
  font-weight: 600;
}
.medium-title {
  font-size: 1.4rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.big-title {
  font-size: 1.6rem;
  line-height: 1.8rem;
  font-weight: 600;
}
.large-title {
  font-size: 2.4rem;
  line-height: 2.6rem;
  font-weight: 600;
}
.small-detail {
  font-size: 1rem;
  line-height: 1.1rem;
  font-weight: 500;
}
.medium-detail {
  font-size: 1.4rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.big-detail {
  font-size: 1.6rem;
  line-height: 1.8rem;
  font-weight: 600;
}
.large-detail {
  font-size: 2rem;
  line-height: 2.1rem;
  font-weight: 500;
}
.huge-detail {
  font-size: 2.6rem;
  line-height: 2.8rem;
  font-weight: 500;
}

.divgroup {
  padding: 0.5rem 0;
    background-color: #f8f8f8;
      border-radius: 0.5rem;
      border: none;
      cursor: pointer;
}
.divgroup-clicked {
    color: #f8f8f8 !important;
    background-color: #555 !important;
}



.bottom-error-message {
    color: red;
    text-align: left !important;
}
.alert {
    grid-column: span 24;
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem;
}
.alert-success {
    color: #7CA47A;
    background-color: #DFF0D8;
    border: 0.1rem solid #D6E9C6;
}
.alert-warning {
    color: #836000;
    background-color: #fff6d7;
    border: 0.1rem solid #eec469;
}
.alert-error {
    color: #A94442;
    background-color: #F2DEDE;
    border: 0.1rem solid #EBCCD1; 
}


.up-down-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.small-select {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem 0;
  font-size: 1.4rem;
  background-color: #E6E6E6;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}
.medium-select {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem 0;
  font-size: 1.4rem;
  background-color: #E6E6E6;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
  transition-duration: 0.4s;
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: center;
    gap: 1rem;
}
.grid-same-height {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: stretch;
    gap: 1rem;
    grid-auto-rows: 1fr;
}
.flex {
    display: flex;
    gap:0.4rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
.flex-vertical {
    display: flex;
    flex-direction: column;
    gap:0.4rem;
    padding: 0.5rem 0;
}
.grid-sbs {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: center;
  gap: .1rem;
}

.gc1 {
    grid-column: span 1;
}
.gc2 {
    grid-column: span 2;
}
.gc3 {
    grid-column: span 3;
}
.gc4 {
    grid-column: span 4;
}
.gc5 {
    grid-column: span 5;
}
.gc6 {
    grid-column: span 6;
}
.gc7 {
    grid-column: span 7;
}
.gc8 {
    grid-column: span 8;
}
.gc9 {
    grid-column: span 9;
}
.gc10 {
    grid-column: span 10;
}
.gc11 {
    grid-column: span 11;
}
.gc12 {
    grid-column: span 12;
}
.gc13 {
    grid-column: span 13;
}
.gc14 {
    grid-column: span 14;
}
.gc15 {
    grid-column: span 15;
}
.gc16 {
    grid-column: span 16;
}
.gc17 {
    grid-column: span 17;
}
.gc18 {
    grid-column: span 18;
}
.gc19 {
    grid-column: span 19;
}
.gc20 {
    grid-column: span 20;
}
.gc21 {
    grid-column: span 21;
}
.gc22 {
    grid-column: span 22;
}
.gc23 {
    grid-column: span 23;
}
.gc24 {
    grid-column: span 24;
}


/* RADIO BUTTONS STARTS */
.button-label {
  display: inline-block;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
  cursor: pointer;
  color: #292929;
  border-radius: 0.25em;
  background: #efefef;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button-label p {
  font-size: 1rem;
  font-weight: 600;
}
.button-label:hover {
  background: #d6d6d6;
  color: #101010;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.button-label:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
#FA-button:checked + .button-label {
  background: #2ECC71;
  color: #efefef;
}
#FA-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}

#FR-button:checked + .button-label {
  background: #D91E18;
  color: #efefef;
}
#FR-button:checked + .button-label:hover {
  background: #c21b15;
  color: #e2e2e2;
}

#AR-button:checked + .button-label {
  background: #4183D7;
  color: #efefef;
}
#AR-button:checked + .button-label:hover {
  background: #2c75d2;
  color: #e2e2e2;
}

#EN-button:checked + .button-label {
  background: #4183D7;
  color: #efefef;
}
#EN-button:checked + .button-label:hover {
  background: #2c75d2;
  color: #e2e2e2;
}
#KU-button:checked + .button-label {
  background: #4183D7;
  color: #efefef;
}
#KU-button:checked + .button-label:hover {
  background: #2c75d2;
  color: #e2e2e2;
}
#TR-button:checked + .button-label {
  background: #4183D7;
  color: #efefef;
}
#TR-button:checked + .button-label:hover {
  background: #2c75d2;
  color: #e2e2e2;
}
#JS-button:checked + .button-label {
  background: #f5d556;
  color: #efefef;
}
#JS-button:checked + .button-label:hover {
  background: #cfb13a;
  color: #e2e2e2;
}

.hidden {
  display: none;
}
/* RADIO BUTTONS ENDS */