/*???????????????????

please set all your env varibales in sass_varables file all lazy sass files in app use sass_variables to import your env variables automatically

while making sass files in app directory use

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

files starting without any of above characters compiles into main sass bundle

files in lazy modules are lazy css and are needed to be loaded with module loader sepratly.

???????????????????*/
:root {
  --font-text: font-text;
  --curvy: curvy;
  --serif-heading: serif-heading;
  --cl-pg-start-bt-img-bg: #4C40FF;
  --cl-pg-start-bt-txt-bg: #483BFD;
  --cl-pg-start-bt-txt: #FFFFFF;
  --cl-pg-start-title-txt: #FFFFFF;
  --cl-pg-start-title-bg: #483BFD;
  --cl-loader-bg: white;
  --cl-loader-br: #08104d;
  --cl-loader-txt: #08104d;
  --cl-h-1: #08104d;
  --cl-h-1-light: #293abc;
  --form-light: #293abc;
  --cl-h-2: #ff6900;
  --cl-loader: #08104d;
  --cl-loader-border: white;
  --cl-bd: #FFFFFF;
  --cl-sf-mn-bg: #5144FF;
  --cl-sf-mn-bt-bg: #2A2381;
  --cl-sf-mn-bt-bg-h: #14C262;
  --cl-sf-mn-lg-tc: #FCFCFC;
  --wrong: #CA2525;
  --green: #76D67E;
  --cl-bg-opaque: #256ef7;
  --cl-card-bg: white;
  --cl-card-heading-bg: #5144FF;
  --cl-card-heading-button-bg: #2f22e3;
  --ss-button-bg: #2f22e3;
  --th-orange: #ff6900;
  --th-purple: #5144FF;
  --th-grey: #bab7b6;
  --th-red: #CA2525;
  --th-form-light: #3e4bad;
  --th-form: #08104d;
  --th-warn: #AFAC05;
}

.gal-elements {
  width: 95%;
  border: 0px;
  background-color: var(--cl-sf-mn-bg);
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  font-family: font-text;
  color: white;
}

.fxsaozw-outer {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.fxsaozw-inner {
  max-width: 600px;
  width: 90%;
  margin: auto;
}

.fxsaozw-ff-str {
  display: grid;
  grid-template-columns: auto 100px;
}

.fxsaozw-fi {
  background-color: white;
}

.fxsaozw-ff {
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--th-purple);
  height: 50px;
}

.fxsaozw-e {
  display: inline-block !important;
  background-color: inherit;
  height: 100%;
}

.fxsaozw-input {
  border: 0px;
  font-size: 16px;
  color: white;
  padding-left: 10px;
}

.fxsaozw-btn:hover .fxsaozw-btn:focus {
  background-color: var(--green);
}

.fxsaozw-btn {
  border-left: 3px solid white;
  border-bottom: 5px solid var(--th-purple);
}

.fxsaozw-btn:hover {
  border-left: 3px solid white;
  border-bottom: 5px solid var(--green);
}

.fxsaozw-btn-in {
  height: 100%;
  text-align: center;
}

.fxsaozw-btn-icon {
  font-size: 24px;
  color: white;
}

.fxsaozw-opts {
  padding-top: 10px;
}

.fxsaozw-opts-s {
  float: right;
  background-color: var(--th-purple);
  min-width: 100px;
  max-width: 200px;
  color: white;
  border: 0px;
  border-radius: 5px;
  font-family: var(--font-text);
  font-size: 16px;
  padding: 10px;
  text-align: center;
  border-bottom: 5px solid var(--th-purple);
}

.fxsaozw-opts-s-b {
  float: left;
  margin-right: 10px;
}

.fxsaozw-opts-s:hover {
  border-bottom: 5px solid var(--green);
}

.files-main {
  background-color: var(--th-form);
  overflow: auto;
  width: 100%;
  display: table;
  padding: 0px;
  position: relative;
}

.files-message {
  position: absolute !important;
  bottom: 10px;
  right: 10px;
  border: 5px solid var(--th-red);
  background-color: var(--th-form);
  display: inline-block !important;
  max-width: 50%;
  width: auto;
  color: white;
  padding: 10px;
  font-family: var(--font-text);
  border-radius: 10px;
}

.files-message-upload {
  background-color: var(--green);
  border: 0px;
}

.files-folder_path {
  border: 0px;
  border-bottom: 1px solid var(--th-grey);
  padding: 10px;
}

.files-folder_path-item {
  border: 0px;
  font-family: var(--font-text);
  font-size: 16px;
  color: white;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}

.files-main-input {
  display: none;
}

.files-items {
  padding: 10px;
}

.files-item {
  background-color: #1723a8;
  display: inline-block;
  width: 80px;
  border-radius: 10px;
  overflow: hidden !important;
  margin: 10px;
  font-family: var(--font-text);
}

.files-item-failed {
  border: 5px solid var(--th-red) !important;
}

.files-item-success {
  border: 5px solid var(--green) !important;
}

.files-item:hover .files-item-name {
  height: auto;
}
.files-item:hover .files-item-name-text {
  padding: 5px;
  white-space: nowrap;
  font-size: 14px !important;
  overflow: auto;
  text-overflow: inherit;
  white-space: normal;
  word-wrap: break-word;
}

.files-item-progress {
  position: relative;
  height: 70px;
}

.files-item-progress-perc-p {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.files-item-progress-perc {
  font-family: var(--font-text);
  font-weight: bold;
  color: white;
  height: 100%;
}

.files-item-progress-bar {
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  height: 10px;
  background-color: var(--green);
  z-index: 0;
}

.files-item-icon-o {
  height: 70px;
}

.files-item-icon {
  height: 100%;
}

.files-item-icon-img {
  font-size: 36px;
  color: white;
}

.files-item-quick {
  position: relative;
  border: 0px;
}

.files-item-quick-img {
  position: absolute;
  right: 0px;
  top: -25px;
  font-size: 32px;
  color: rgb(255, 36, 83);
}

.files-item-name {
  background-color: white;
  height: 30px;
}

.files-item-name-text {
  padding: 5px;
  white-space: nowrap;
  font-size: 14px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-item-actions {
  height: auto;
  background-color: white;
  width: 100%;
}

.files-item-actions-input {
  min-height: 60px;
  height: 100%;
  padding: 5px;
  width: 100%;
  resize: vertical;
}

.work-form-maker-input {
  position: relative;
}

.work-form-maker-row {
  margin-bottom: 10px;
}

.work-form-maker-textarea {
  height: 100%;
  width: 100%;
  background-color: inherit;
  color: white;
  font-family: inherit;
  border: none;
  padding: 10px;
  max-height: 100px;
}

.simpleForm-mobile {
  display: grid;
  grid-template-columns: 150px auto;
  font-size: 24px !important;
  font-family: var(--font-text) !important;
  color: white !important;
  height: 50px;
}

.simpleForm-mobile-codes {
  padding: 10px;
  font-size: 18px !important;
  font-family: var(--font-text) !important;
  color: white !important;
  border: 0px;
  text-align: center;
  height: 100%;
}

.simpleForm-mobile-input {
  color: white !important;
  font-size: 18px !important;
  font-family: var(--font-text) !important;
  padding-left: 10px;
  border: 0px;
  height: 100%;
  margin-right: 10px;
  user-select: none;
}

.simpleForm-address-cover {
  border-left: 5px solid var(--cl-h-1);
  padding: 0px;
  padding-left: 10px;
}

.simpleForm-address-tag {
  margin-top: 0px;
  border-bottom: 5px solid var(--th-form);
  border-bottom-left-radius: 5px;
  margin-bottom: 5px;
}

.simpleForm-address-tag-error {
  border-bottom: 5px solid var(--th-red) !important;
}

.simpleForm-address-input {
  background-color: var(--cl-h-1);
  border-radius: 5px 5px 5px 5px;
  height: 40px;
  width: 100% !important;
  margin-bottom: 5px;
  padding: 15px;
  font-family: var(--font-text);
  font-size: 16px;
  border: 0px;
  color: white;
  border-left: 10px solid var(--cl-h-1);
}

.simpleForm-address-input_raw {
  padding: 0px !important;
  min-height: 40px !important;
  height: auto !important;
  background-color: var(--cl-h-1);
  width: 100% !important;
  margin-bottom: 5px !important;
  margin-bottom: 50px;
}

.simpleForm-address-input:focus {
  outline: none;
}

.simpleForm-address-input:placeholder-shown {
  font-size: 16px !important;
}

.simpleForm-address-select {
  width: 100% !important;
  text-align: center;
  height: 40px;
  padding: 0px !important;
  box-sizing: border-box;
}

.simpleForm-address-input-error {
  border-left: 10px solid var(--th-red) !important;
}

.func-main {
  border: none;
}

.func-b-a {
  border: 1px solid var(--th-grey);
  min-height: 50px;
  overflow: hidden;
}

.func-b-b {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 100px auto;
  position: relative;
}

.func-b-b-e {
  height: 100%;
}

.func-b-b-i {
  border: 1px solid var(--th-grey);
  overflow: hidden;
  width: 100%;
}

.func-b-b-l {
  position: absolute;
  top: -10px;
  right: 20px;
  height: 20px;
  z-index: -1;
  border: 2px solid var(--th-form-light);
}

.func-canv-main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.starter-main-button {
  background-color: var(--th-purple);
  display: inline-block;
  color: white;
  padding: 10px;
  margin: 10px;
  min-width: 100px;
  text-align: center;
  border-radius: 10px;
  font-family: var(--font-text);
  font-size: 24px;
  text-transform: capitalize;
  cursor: pointer;
  user-select: none;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucfc-main-message {
  font-family: var(--curvy);
  font-size: 24px;
  padding: 10px;
  text-transform: capitalize;
  font-weight: bold;
}

.loader-background {
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  position: fixed;
  opacity: 0.2;
  background-color: var(--cl-loader-bg);
  z-index: 18;
}

.loader-box {
  position: fixed;
  min-height: 15vh;
  width: 50vw;
  top: 30vh;
  left: 25vw;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  z-index: 18;
}

.loader-loading-cont {
  width: 30%;
  height: 100%;
  float: left;
  box-sizing: border-box;
}

.loader-loading {
  border: 6px solid white;
  /* Light grey */
  border-top: 6px solid var(--cl-loader-br);
  border-radius: 75%;
  width: 35px;
  height: 35px;
  animation: spin 1.5s linear infinite;
  margin-top: 4vh;
  margin-left: 2.5vw;
}

.loader-text {
  width: 70%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  font-size: 24px;
  font-family: var(--font-text);
  color: var(--cl-loader-txt);
  text-transform: capitalize;
  padding-top: 5vh;
  padding-left: 5vw;
}

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

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.loaderAnimationComp {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.message {
  position: fixed;
  width: 80vw;
  left: 10vw;
  top: 12vh;
  border-radius: 5px;
  padding: 10px;
  z-index: 19;
}

.message-close-cont {
  text-align: right;
  padding-right: 10px;
}

.message-close-button {
  font-size: 20px;
  font-family: var(--font-text);
  color: white;
  background-color: inherit;
  border: 2px solid white;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 25px;
}

.message-text-cont {
  font-family: var(--font-text);
  color: white;
  padding: 10px;
}

.message-info {
  background-color: #004c4c;
}

.message-success {
  background-color: #89c61c;
}

.message-warning {
  background-color: #ebb329;
}

.message-danger {
  background-color: #ff3642;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucfcc-main {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
}

.ucfcc-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: black;
  opacity: 0.5;
}

.ucfcc-card_parent {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  height: 100%;
}

.ucfcc-card {
  max-height: 80%;
  min-width: 400px !important;
  max-width: 80%;
  background-color: var(--cl-card-bg);
  overflow: hidden;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.uccsc-main {
  height: 100%;
  display: grid;
}

.uccsc-body {
  min-height: 50px;
  overflow: auto;
}

.uccsc-header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: var(--cl-card-heading-bg);
}

.uccsc-title {
  padding: 10px;
  font-family: var(--font-text);
  color: white;
  font-size: 24px;
  padding-left: 20px;
}

.uccsc-buttons {
  padding-right: 10px;
}

.uccsc-button {
  float: right;
  background-color: var(--cl-card-heading-button-bg);
  font-family: var(--font-text);
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  margin: 10px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucgfc-message {
  font-family: var(--font-text);
  color: var(--th-orange);
  font-size: 32px;
}

.ucgfc-img {
  width: 400px;
  height: auto;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.indexRows-main {
  border-top: 2px solid var(--th-grey);
  border-left: 2px solid var(--th-grey);
  border-right: 2px solid var(--th-grey);
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  background-color: white;
}

.indexRows-rows {
  background-color: inherit;
}

.indexRows-row {
  height: 100%;
  display: grid;
  grid-template-columns: 60px auto;
  background-color: white;
}

.indexRows-row-left {
  height: 100%;
  text-align: center;
  padding-top: 10px;
}

.indexRows-row-left-icon {
  font-size: 24px;
}

.indexRows-row-right {
  height: 100%;
}

.indexRows-row-cover {
  border-bottom: 1px solid var(--th-grey);
}

.indexRows-row-empty-text {
  text-align: center;
  font-size: 24px;
  font-family: var(--font-text);
  height: 100%;
  padding-top: 5px;
  color: var(--th-purple);
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.simpleform-field {
  margin: auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.simpleform-tag {
  font-family: font-text;
  color: var(--cl-h-1);
  font-size: 16px;
  display: inline-block;
  padding: 10px 10px 0px 10px;
  color: white;
  background-color: var(--cl-h-1);
  padding-bottom: 0px;
  border-radius: 10px 10px 0px 0px;
  text-transform: capitalize;
}

.simpleform-tag-help-icon {
  font-size: 18px;
  margin: 0px 2px 0px 10px;
  cursor: pointer;
}

.simpleform-info {
  font-family: var(--font-text);
  padding: 10px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--cl-h-1);
}

.simpleform-field-msg-icon {
  padding-right: 10px;
}

.simpleform-input {
  background-color: var(--cl-h-1);
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
}

.simpleform-input-inherit {
  background-color: inherit;
}

.simpleform-input-elem-bg {
  background-color: var(--cl-h-1);
}

.simpleform-input-elem {
  background-color: inherit;
  height: 100%;
  width: 100%;
  padding: 15px;
  font-family: var(--font-text);
  font-size: 20px;
  border: 0px;
  color: white;
}

.simpleform-input:focus {
  outline: none;
}

.simpleform-input-tagged {
  border-radius: 0px 10px 10px 10px;
}

.simpleForm-input-snippet-main {
  display: inline-block;
  max-width: 30%;
  margin: 10px;
  overflow: hidden;
  background-color: var(--form-light);
  font-size: 16px;
  font-family: var(--font-text);
  color: white;
  border-radius: 10px;
  vertical-align: middle;
}

.simpleForm-input-snippet-text {
  max-width: 70%;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
}

.simpleForm-input-snippet-button {
  max-width: 20%;
  margin: 0px 5px 0px 20px;
  font-size: 18px;
  vertical-align: middle;
  margin-left: 10px;
}

.simpleForm-input-snippet-active {
  background-color: var(--green);
}

.simpleform-input-sbs-main {
  display: inline-block;
}

.simpleform-input-sbs {
  display: grid;
  grid-template-columns: auto 100px;
}

.simpleform-input-sbs-message {
  font-size: 18px;
  padding: 10px 5px 5px 10px;
}

.simpleform-input-sbs-textarea {
  font-size: 16px;
  font-family: var(--font-text);
  color: white;
  padding: 10px;
  background-color: inherit;
  width: 100%;
  border: 0px;
  margin-top: 10px;
}

.simpleform-input-sbs-actions {
  text-align: center;
}

.simpleform-input-sbs-actions-button {
  color: white;
  font-size: 24px;
}

.simpleform-input-checkbox {
  display: grid;
  grid-template-columns: auto 100px;
}

.simpleform-input-checkbox-input {
  transform: scale(2);
  margin-top: 20px;
}

.simpleform-input-options {
  font-family: var(--font-text) !important;
  font-size: 24px;
}

.simpleform-buttons {
  margin: auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.simpleform-button {
  margin: 10px 10px 10px 0px;
  padding: 10px;
  font-family: var(--font-text);
  font-size: 24px;
  min-width: 150px;
  border: 0px;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.simpleform-messenger-info {
  background-color: var(--th-purple);
  border-radius: 5px;
  color: white !important;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: normal !important;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.flbox-main {
  position: fixed;
  width: 200px !important;
  min-height: 100px;
  background-color: white;
  overflow: hidden;
}

.flbox-background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.fmenu-row {
  border-bottom: 1px solid var(--th-grey);
  padding: 10px;
  font-family: var(--font-text);
  cursor: pointer;
}

.fmenu-row:hover {
  background-color: var(--th-purple);
  color: white;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.cuibts-button {
  margin: 10px 10px 10px 0px;
  background-color: var(--th-purple);
  display: inline-block;
  max-width: 300px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 5px solid var(--th-purple);
  user-select: none;
  min-width: 100px;
}

.cuibts-button:hover {
  border-bottom: 5px solid var(--green);
}

.cuibts-button-icon {
  text-align: center;
  display: inline-block;
  padding: 10px;
  height: 100%;
  vertical-align: top;
}

.cuibts-button-icon-i {
  height: 24px;
  width: 24px;
  margin-top: 4px;
}

.cuibts-button-icon-r {
  font-size: 22px;
  display: block;
  margin-top: 3px !important;
  color: white;
}

.cuibts-button-txt {
  text-align: center;
  display: inline-block;
  font-family: var(--font-text);
  color: white;
  font-size: 16px;
  padding: 10px;
  padding-top: 15px;
  height: 100%;
  vertical-align: top;
}

.cuibts-button-wi {
  width: 100%;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.bx-h-m {
  width: 90%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 20px;
}

.bx-h-h {
  border-bottom: 5px solid #2f22e3;
  display: inline-block;
  color: var(--th-orange);
  font-size: 16px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-family: var(--curvy);
  text-transform: capitalize;
}

.bx-h-t {
  display: inline-block;
  color: var(--th-red);
  font-size: 12px;
  font-family: var(--font-text);
  padding-left: 10px;
  vertical-align: middle;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ask-txt {
  font-size: 20px;
  font-family: var(--font-text);
  background-color: var(--th-purple);
  padding: 10px;
  color: white;
  border-radius: 5px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucfc-main-message {
  font-family: var(--curvy);
  font-size: 24px;
  padding: 10px;
  text-transform: capitalize;
  font-weight: bold;
}

.loader-background {
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  position: fixed;
  opacity: 0.2;
  background-color: var(--cl-loader-bg);
  z-index: 18;
}

.loader-box {
  position: fixed;
  min-height: 15vh;
  width: 50vw;
  top: 30vh;
  left: 25vw;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  z-index: 18;
}

.loader-loading-cont {
  width: 30%;
  height: 100%;
  float: left;
  box-sizing: border-box;
}

.loader-loading {
  border: 6px solid white;
  /* Light grey */
  border-top: 6px solid var(--cl-loader-br);
  border-radius: 75%;
  width: 35px;
  height: 35px;
  animation: spin 1.5s linear infinite;
  margin-top: 4vh;
  margin-left: 2.5vw;
}

.loader-text {
  width: 70%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  font-size: 24px;
  font-family: var(--font-text);
  color: var(--cl-loader-txt);
  text-transform: capitalize;
  padding-top: 5vh;
  padding-left: 5vw;
}

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

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.loaderAnimationComp {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.message {
  position: fixed;
  width: 80vw;
  left: 10vw;
  top: 12vh;
  border-radius: 5px;
  padding: 10px;
  z-index: 19;
}

.message-close-cont {
  text-align: right;
  padding-right: 10px;
}

.message-close-button {
  font-size: 20px;
  font-family: var(--font-text);
  color: white;
  background-color: inherit;
  border: 2px solid white;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 25px;
}

.message-text-cont {
  font-family: var(--font-text);
  color: white;
  padding: 10px;
}

.message-info {
  background-color: #004c4c;
}

.message-success {
  background-color: #89c61c;
}

.message-warning {
  background-color: #ebb329;
}

.message-danger {
  background-color: #ff3642;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucfcc-main {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
}

.ucfcc-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: black;
  opacity: 0.5;
}

.ucfcc-card_parent {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  height: 100%;
}

.ucfcc-card {
  max-height: 80%;
  min-width: 400px !important;
  max-width: 80%;
  background-color: var(--cl-card-bg);
  overflow: hidden;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.uccsc-main {
  height: 100%;
  display: grid;
}

.uccsc-body {
  min-height: 50px;
  overflow: auto;
}

.uccsc-header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: var(--cl-card-heading-bg);
}

.uccsc-title {
  padding: 10px;
  font-family: var(--font-text);
  color: white;
  font-size: 24px;
  padding-left: 20px;
}

.uccsc-buttons {
  padding-right: 10px;
}

.uccsc-button {
  float: right;
  background-color: var(--cl-card-heading-button-bg);
  font-family: var(--font-text);
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  margin: 10px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ucgfc-message {
  font-family: var(--font-text);
  color: var(--th-orange);
  font-size: 32px;
}

.ucgfc-img {
  width: 400px;
  height: auto;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.indexRows-main {
  border-top: 2px solid var(--th-grey);
  border-left: 2px solid var(--th-grey);
  border-right: 2px solid var(--th-grey);
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  background-color: white;
}

.indexRows-rows {
  background-color: inherit;
}

.indexRows-row {
  height: 100%;
  display: grid;
  grid-template-columns: 60px auto;
  background-color: white;
}

.indexRows-row-left {
  height: 100%;
  text-align: center;
  padding-top: 10px;
}

.indexRows-row-left-icon {
  font-size: 24px;
}

.indexRows-row-right {
  height: 100%;
}

.indexRows-row-cover {
  border-bottom: 1px solid var(--th-grey);
}

.indexRows-row-empty-text {
  text-align: center;
  font-size: 24px;
  font-family: var(--font-text);
  height: 100%;
  padding-top: 5px;
  color: var(--th-purple);
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.simpleform-field {
  margin: auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.simpleform-tag {
  font-family: font-text;
  color: var(--cl-h-1);
  font-size: 16px;
  display: inline-block;
  padding: 10px 10px 0px 10px;
  color: white;
  background-color: var(--cl-h-1);
  padding-bottom: 0px;
  border-radius: 10px 10px 0px 0px;
  text-transform: capitalize;
}

.simpleform-tag-help-icon {
  font-size: 18px;
  margin: 0px 2px 0px 10px;
  cursor: pointer;
}

.simpleform-info {
  font-family: var(--font-text);
  padding: 10px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--cl-h-1);
}

.simpleform-field-msg-icon {
  padding-right: 10px;
}

.simpleform-input {
  background-color: var(--cl-h-1);
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
}

.simpleform-input-inherit {
  background-color: inherit;
}

.simpleform-input-elem-bg {
  background-color: var(--cl-h-1);
}

.simpleform-input-elem {
  background-color: inherit;
  height: 100%;
  width: 100%;
  padding: 15px;
  font-family: var(--font-text);
  font-size: 20px;
  border: 0px;
  color: white;
}

.simpleform-input:focus {
  outline: none;
}

.simpleform-input-tagged {
  border-radius: 0px 10px 10px 10px;
}

.simpleForm-input-snippet-main {
  display: inline-block;
  max-width: 30%;
  margin: 10px;
  overflow: hidden;
  background-color: var(--form-light);
  font-size: 16px;
  font-family: var(--font-text);
  color: white;
  border-radius: 10px;
  vertical-align: middle;
}

.simpleForm-input-snippet-text {
  max-width: 70%;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
}

.simpleForm-input-snippet-button {
  max-width: 20%;
  margin: 0px 5px 0px 20px;
  font-size: 18px;
  vertical-align: middle;
  margin-left: 10px;
}

.simpleForm-input-snippet-active {
  background-color: var(--green);
}

.simpleform-input-sbs-main {
  display: inline-block;
}

.simpleform-input-sbs {
  display: grid;
  grid-template-columns: auto 100px;
}

.simpleform-input-sbs-message {
  font-size: 18px;
  padding: 10px 5px 5px 10px;
}

.simpleform-input-sbs-textarea {
  font-size: 16px;
  font-family: var(--font-text);
  color: white;
  padding: 10px;
  background-color: inherit;
  width: 100%;
  border: 0px;
  margin-top: 10px;
}

.simpleform-input-sbs-actions {
  text-align: center;
}

.simpleform-input-sbs-actions-button {
  color: white;
  font-size: 24px;
}

.simpleform-input-checkbox {
  display: grid;
  grid-template-columns: auto 100px;
}

.simpleform-input-checkbox-input {
  transform: scale(2);
  margin-top: 20px;
}

.simpleform-input-options {
  font-family: var(--font-text) !important;
  font-size: 24px;
}

.simpleform-buttons {
  margin: auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.simpleform-button {
  margin: 10px 10px 10px 0px;
  padding: 10px;
  font-family: var(--font-text);
  font-size: 24px;
  min-width: 150px;
  border: 0px;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.simpleform-messenger-info {
  background-color: var(--th-purple);
  border-radius: 5px;
  color: white !important;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: normal !important;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.flbox-main {
  position: fixed;
  width: 200px !important;
  min-height: 100px;
  background-color: white;
  overflow: hidden;
}

.flbox-background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.fmenu-row {
  border-bottom: 1px solid var(--th-grey);
  padding: 10px;
  font-family: var(--font-text);
  cursor: pointer;
}

.fmenu-row:hover {
  background-color: var(--th-purple);
  color: white;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.cuibts-button {
  margin: 10px 10px 10px 0px;
  background-color: var(--th-purple);
  display: inline-block;
  max-width: 300px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 5px solid var(--th-purple);
  user-select: none;
  min-width: 100px;
}

.cuibts-button:hover {
  border-bottom: 5px solid var(--green);
}

.cuibts-button-icon {
  text-align: center;
  display: inline-block;
  padding: 10px;
  height: 100%;
  vertical-align: top;
}

.cuibts-button-icon-i {
  height: 24px;
  width: 24px;
  margin-top: 4px;
}

.cuibts-button-icon-r {
  font-size: 22px;
  display: block;
  margin-top: 3px !important;
  color: white;
}

.cuibts-button-txt {
  text-align: center;
  display: inline-block;
  font-family: var(--font-text);
  color: white;
  font-size: 16px;
  padding: 10px;
  padding-top: 15px;
  height: 100%;
  vertical-align: top;
}

.cuibts-button-wi {
  width: 100%;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.bx-h-m {
  width: 90%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 20px;
}

.bx-h-h {
  border-bottom: 5px solid #2f22e3;
  display: inline-block;
  color: var(--th-orange);
  font-size: 16px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-family: var(--curvy);
  text-transform: capitalize;
}

.bx-h-t {
  display: inline-block;
  color: var(--th-red);
  font-size: 12px;
  font-family: var(--font-text);
  padding-left: 10px;
  vertical-align: middle;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ask-txt {
  font-size: 20px;
  font-family: var(--font-text);
  background-color: var(--th-purple);
  padding: 10px;
  color: white;
  border-radius: 5px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.ui-in-rowsf-row {
  user-select: none;
  border-left: 5px solid white;
}

.ui-in-rowsf-row:hover {
  border-left: 5px solid var(--green);
}

.ui-in-rowsf-cols {
  display: flex;
  height: 100%;
}

.ui-in-rowsf-col {
  padding: 5px;
  font-family: var(--font-text);
  font-size: 14px;
  text-transform: capitalize;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-in-rowsf-acts {
  height: 100%;
}

.ui-in-rowsf-actcover {
  height: 100%;
  display: inline-block;
}

.ui-in-rowsf-act {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-in-rowsf-act-icon {
  font-size: 24px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.ui-in-rowsf-act-icon:hover {
  font-size: 28px;
  color: var(--th-form-light);
}

.ui-in-rowsf-act-text {
  font-family: var(--font-text);
}

.indexRows-row-empty-text {
  cursor: pointer;
  background-color: var(--th-form);
  color: white;
  font-size: 24px;
  padding-top: 10px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.uiinicoptcp-main {
  border-top: 1px solid var(--th-grey);
}

.uiinicoptcp-main-back {
  text-align: right;
}

.uiinicoptcp-main-buttons {
  text-align: center;
  padding: 20px 0px 20px 0px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.uiincoinfoc-row {
  display: flex;
  border-bottom: 1px solid var(--th-grey);
}

.uiincoinfoc-row-item {
  flex: 1;
  text-align: center;
}

.uiincoinfoc-row-item-value {
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: var(--font-text);
}

.uiincoinfoc-row-item-tag {
  color: var(--th-purple);
  font-family: var(--font-text);
  font-size: 12px;
  text-transform: capitalize;
  padding-bottom: 10px;
  padding-top: 10px;
}

.uiincoinfoc-row-snippets {
  flex: 1;
  border-right: 1px solid var(--th-grey);
}

.uiincoinfoc-row-snippets-tag {
  color: var(--th-purple);
  font-family: var(--font-text);
  font-size: 12px;
  text-transform: capitalize;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
}

.uiincoinfoc-row-snippets-body-snippet {
  background-color: var(--th-orange);
  font-family: var(--font-text);
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5px;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  display: inline-block;
}

.uiincoinfoc-row-image {
  display: grid;
  place-items: center;
  flex: 1;
  border-right: 1px solid var(--th-grey);
}

.uiincoinfoc-row-image-img {
  height: 100px;
  width: auto;
}

.uiincoinfoc-row-para-value {
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  font-family: var(--font-text);
  font-size: 12px;
  color: rgb(29, 28, 28);
}

.uiocs-menu {
  background-color: var(--cl-sf-mn-bg);
}

.uiocs-menu_button {
  font-family: var(--curvy);
  border-radius: 5px;
  background-color: var(--cl-sf-mn-bt-bg);
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.uiocs-menu_button:hover {
  background-color: var(--cl-sf-mn-bt-bg-h);
}

.uiocs-menu-logo {
  font-family: var(--curvy);
  color: var(--cl-sf-mn-lg-tc);
  font-size: 24px;
  padding-top: 10px;
  padding-left: 20px;
}

/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
/*???????????????????

"@" - for sub files in a sass tree structure, ignored in main sass compiler
example - "@sub_component.scss"
this file is compiled only when its parent is compiled and ignored if its parent-less

"!" - for files to ignore in main sass compiler
example - "!ignored_sass_file.scss"
this file is ignored

???????????????????*/
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin: auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.full-cover-parent {
  position: relative;
}

.full-cover-child {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.bg-orange {
  background-color: var(--th-orange) !important;
}

.txt-orange {
  color: var(--th-orange) !important;
}

.txt-purple {
  color: var(--th-purple) !important;
}

.center {
  text-align: center;
}

.pointer {
  cursor: pointer;
}

.no-user-select {
  user-select: none;
}

.padding-25 {
  padding: 25px;
}

.padding-10 {
  padding: 10px;
}

.padding-0 {
  padding: 0px;
}

.margin-25 {
  margin: 25px;
}

.margin-10 {
  margin: 10px;
}

.margin-0 {
  margin: 0px;
}

.button {
  font-family: var(--font-text);
  font-size: 24px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: var(--ss-button-bg);
  color: white;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.options-heading {
  font-family: var(--curvy);
  padding: 10px;
  padding-top: 20px;
  font-size: 32px;
  color: var(--th-purple);
  border-bottom: 3px solid var(--th-orange);
  margin: 10px;
  display: inline-block;
}

.rows-middle {
  border: 1px solid var(--th-grey);
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 90%;
  border-radius: 10px;
  overflow: hidden;
}

.middle {
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 90%;
}

.content-middle {
  height: 100%;
  display: grid;
  justify-content: center;
}

.center {
  text-align: center;
}

.h-100p {
  height: 100%;
}

.h-50 {
  height: 50px;
}

.h-25 {
  height: 25px;
}

.h-20 {
  height: 20px;
}

.inform {
  font-family: var(--font-text);
  font-size: 14px;
  padding: 10px 0px 20px 0px;
  color: rgb(65, 65, 65);
}

body {
  background-color: var(--cl-bd);
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}