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

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-ark: font-ark;
  --font-ark-bold: font-ark-bold;
  --font-ark-heavy: font-ark-heavy;
  --font-ali: font-ali;
  --font-ali-thin: font-ali-thin;
  --font-ali-light: font-ali-light;
  --font-ali-bold: font-ali-bold;
  --font-ali-heavy: font-ali-heavy;
  --font-raleway: font-raleway;
  --font-raleway-light: font-raleway-light;
  --font-roboto: font-roboto;
  --font-roboto-medium: font-roboto-medium;
  --font-dancing: font-dancing;
  --font-lobster: font-lobster;
  --font-pacifico: font-pacifico;
  --font-satisfy: font-satisfy;
  --font-fat: fat;
  --font-text: font-text;
  --curvy: curvy;
  --font-curvy: font-curvy;
  --font-heading: font-heading;
  --font-button: font-button;
  --serif-heading: serif-heading;
  --cl-work-base: #292e41;
  --cl-form-help: white;
  --cl-big_message-font: white;
  --cl-loader-border: #08104d;
  --cl-loader-border-hidden: transparent;
  --cl-loader-bg: transparent;
  --cl-loader-br: #08104d;
  --cl-loader-txt: #08104d;
  --wrong: #CA2525;
  --green: #76D67E;
  --cl-card-bg: white;
  --cl-card-heading-bg: #5144FF;
  --cl-card-heading-button-bg: #2f22e3;
  --form-light: #293abc;
  --ss-button-bg: #2f22e3;
  --th-focus-pink: #ed1548;
  --th-orange: #ff6900;
  --th-purple: #5144FF;
  --th-grey: #bab7b6;
  --th-red: #CA2525;
  --th-form-light: #3e4bad;
  --th-form: #08104d;
  --th-warn: #AFAC05;
  --th-grey-dark: #2e3540;
  --th-grey-border: #495e80;
  --th-pink-dark: #802152;
  --th-desert-dark: #b32716;
  --th-desert-light: #da291a;
  --work-cl-card-heading: rgba(0, 0, 0, 0.3);
  --work-cl-card-heading-button: var(--work-cl-card-heading-button);
  --work-cl-search-input: rgba(0, 0, 0, 0.3);
  --work-cl-search-input-border: rgba(0, 0, 0, 0.4);
  --work-cl-buttons: #110f2b;
  --work-cl-rows-help-color: var(--th-form);
  --work-cl-rows-help-icon-color: var(--th-purple);
  --work-cl-rows-background: rgba(255, 255, 255, 0.1);
  --work-cl-rows-row-border: transparent;
  --work-cl-rows-text: white;
  --work-rows-font-family: var(--font-ali);
  --work-rows-font-size: 14px;
  --work-cl-floating-background: rgba(0, 0, 0, 0.5);
  --work-cl-floating-text: white;
  --work-cl-floating-icon: --th-focus-pink;
  --work-cl-focus: #ed1548;
  --work-cl-menu-buttons: #110f2b;
  --br-fat-bottom: white;
  --cl-info-text: white;
  --cl-info-border: white;
  --cl-info-font: var(--font-ali);
  --cl-info-font-size: 14px;
  --func-router-color: #3e4bad;
  --ui-simple-border-background-color: rgba(0, 0, 0, 0.4);
  --ui-simple-border-background-height: 5px;
  --rows-empty-classes: bg-blur-deep-dark;
  --work-contacts-search-background-color: rgba(0, 0, 0, 0.4);
  --work-chat-profile-name-color: white;
  --work-chat-profile-email-color: white;
  --work-retryButton-text-color: white;
  --work-retryButton-class: card-dark bg-blur-deep-dark btn-focus-animated;
  --work-rows-add-color: var(--th-form);
  --work-rows-add-color-text: var(--th-grey-dark);
  --work-rows-add-font: var(--font-ali);
  --work-rows-add-font-size: 14px;
  --work-icon-home-color: var(--th-orange);
  --work-icon-delete-color: var(--th-red);
  --action-card-cl-icon: var(--th-purple);
  --form-button-font-family: var(--font-button);
  --form-button-font-size: 20px;
  --form-button-border-padding: 10px 10px 10px 10px;
  --form-button-margin: 10px 10px 10px 0px;
  --form-button-border-radius: 5px;
  --cl-form-button: #293abc;
  --cl-form-field: #293abc;
  --cl-form-placeholder: white;
  --cl-form-tag: white;
  --cl-form-tag-bg: transparent;
  --form-tag-padding: 0px 10px 10px 0px;
  --form-input-border-radius: 5px 5px 5px 5px;
  --form-tag-font: var(--font-heading);
  --form-input-font: var(--font-text);
  --form-input-padding: 10px;
}

.lookup-card {
  margin: 10px auto 10px auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  color: white;
  font-family: var(--font-heading);
  max-width: 600px;
  cursor: pointer;
}

.lookup-row {
  display: grid;
  grid-template-columns: 30px auto;
}

.lookup-row-tag {
  padding: 5px;
  font-size: 12px;
}

.lookup-row-value {
  padding: 5px;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  overflow: hidden;
}

.lookup-row-value-show {
  text-overflow: none;
  white-space: normal;
  overflow: none;
}

.lookup-row-body {
  padding: 5px;
}

.lookup-tag {
  margin: 3px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  background-color: var(--th-desert-dark);
  text-transform: capitalize;
  font-family: var(--font-roboto);
}

.business-plans-card {
  display: inline-block;
  width: 250px;
  min-height: 100px;
  background-color: var(--work-cl-rows-background);
  border-radius: 10px;
  margin: 10px;
  overflow: hidden;
  text-align: left;
}

.business-plans-card-top {
  background: linear-gradient(180deg, hsl(321deg, 42%, 48%) 0%, hsl(343deg, 80%, 65%) 100%);
}

.business-plans-card-name {
  font-family: var(--font-heading);
  color: white;
  font-size: 20px;
  padding: 10px;
}

.business-plans-card-price {
  font-family: var(--font-heading);
  color: white;
  font-size: 32px;
  padding: 10px;
}

.business-plans-card-tag {
  padding: 10px;
  grid-template-columns: 20px auto 80px;
  display: grid;
  font-family: var(--font-heading);
  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);
}

.doc-pm-cal-main {
  border: 1px solid var(--th-grey);
}

.doc-pm-cal-row-delete {
  border-bottom: 5px solid var(--th-red);
  position: absolute;
  background-color: var(--th-red);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  top: -35px;
  left: 10px;
  height: 35px;
  padding: 10px;
  color: white;
  font-family: var(--font-button);
  cursor: pointer;
}

.doc-pm-cal-row-delete:hover {
  border-bottom: 5px solid var(--th-red);
  background-color: var(--th-form);
}

.doc-pm-cal-row {
  margin-top: 40px;
  border: 1px solid var(--th-grey);
  position: relative;
}

.doc-pm-cal-slots-built {
  padding: 10px;
}

.doc-pm-cal-slot {
  margin: 5px 5px 0px 0px;
  width: 190px;
  background-color: var(--th-form);
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  display: inline-block;
}

.doc-pm-cal-slot-text {
  display: inline-block;
  width: 110px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: white;
}

.doc-pm-cal-slot-bookings {
  display: inline-block;
  width: 50px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: white;
}

.doc-pm-cal-slot-btn {
  display: inline-block;
  width: 30px;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.doc-pm-cal-slot-btn:hover {
  color: var(--th-red);
}

.doc-pm-cal-slots-maker {
  background-color: var(--th-form);
  display: inline-block !important;
  margin: 10px;
  height: 40px;
  overflow: hidden;
}

.doc-pm-cal-slots-input {
  display: inline-block;
  height: 100%;
  background-color: inherit;
  color: white;
  font-family: var(--font-text);
  vertical-align: middle;
  text-align: center;
  border: 0px;
}

.doc-pm-cal-slots-btn {
  display: inline-block;
  color: white;
  height: 100%;
  vertical-align: middle;
  font-size: 24px;
  padding-top: 7px;
  text-align: center;
  cursor: pointer;
}

.doc-pm-cal-days {
  border-top: 1px solid var(--th-grey);
  padding: 10px;
}

.doc-pm-cal-day-button {
  margin: 5px 5px 0px 0px;
  background-color: var(--th-form);
  font-family: var(--font-text);
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
  color: white;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}

.doc-pm-cal-day-button-selected {
  background-color: var(--green);
}

.doc-linked_var-vars-input {
  background-color: white;
  text-align: center;
  height: 100%;
  width: 100%;
  border: 0px;
  color: black;
  font-family: var(--font-text);
  font-size: 14px;
}

.calendar-booking-main {
  display: grid;
  grid-template-columns: 200px auto;
}

.calendar-booking-main-left {
  padding: 10px 0px 10px 0px;
  text-align: center;
}

.calendar-booking-main-left-image {
  width: 90%;
}

.calendar-booking-main-right {
  text-align: center;
}

.calendar-booking-main-info {
  width: 200px;
  margin: 10px;
  display: inline-block;
  overflow: hidden;
  padding: 5px 0px 5px 0px;
}

.calendar-booking-main-info-date {
  display: grid;
  grid-template-columns: auto 60px;
}

.calendar-booking-main-info-date-left {
  font-size: 48px;
  font-family: var(--font-fat);
}

.calendar-booking-main-info-date-right {
  font-family: var(--font-text);
  font-size: 16px;
}

.calendar-booking-main-info-date-right-month {
  font-family: var(--font-fat);
}

.calendar-booking-main-info-date-right-year {
  font-family: var(--font-fat);
}

.calendar-booking-main-slot {
  border-top: 1px solid rgb(197, 197, 197);
}

.calendar-booking-main-slot-rank {
  font-size: 48px;
  text-align: center;
}

.calendar-booking-main-slot-time {
  font-size: 20px;
  padding: 10px 0px 10px 0px;
  text-align: center;
}

.calendar-booking-main-slot-name {
  font-size: 14px;
  padding: 10px 0px 10px 0px;
  color: grey;
  text-align: center;
}

.extra-bg-color-card {
  height: 100px;
  width: 200px;
  margin: 10px;
  border-radius: 10px;
  font-family: var(--font-heading);
  color: white;
  padding: 10px;
  border: 5px solid white;
  align-content: center;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

.files-main {
  background-color: inherit;
  overflow: auto;
  width: 100%;
  display: table;
  padding: 0px;
  position: relative;
}

.files-empty {
  position: absolute !important;
  width: 100%;
  top: 0px;
  left: 0px;
  height: 100% !important;
  font-family: var(--font-text);
  color: white;
}

.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: minmax(50px, 100px) auto;
  font-size: 24px !important;
  font-family: var(--font-heading) !important;
  color: white !important;
  height: 50px;
}

.simpleForm-mobile-codes {
  padding: 10px;
  font-size: 18px !important;
  font-family: var(--font-heading) !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-heading) !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 {
  border-radius: 5px;
  background-color: var(--cl-form-field);
  border: 0px;
  margin: 0px 0px 15px 0px;
  height: 5px;
}

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

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

.simpleForm-address-input::placeholder {
  color: var(--cl-form-placeholder) !important;
  font-size: 12px;
}

.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;
  background-color: var(--cl-form-field);
}

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

.simpleForm-table-builder {
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--th-grey);
  border-radius: 10px;
  text-align: center;
}

.simpleForm-table-column {
  display: grid;
  grid-template-columns: 100px auto;
  border-top: 1px solid var(--th-grey);
}

.simpleForm-table-column-tag {
  height: 100%;
  font-family: var(--font-heading);
  padding: 10px 0px 10px 0px;
  word-wrap: break-word;
  color: white;
}

.simpleForm-table-column-body {
  border-left: 1px solid var(--th-grey);
}

.simpleForm-table-input {
  min-height: 50px;
  width: 100%;
  padding: 10px;
  font-family: var(--font-heading);
  border: 0px;
  outline: 0px;
  background-color: inherit;
  color: white;
}

.simpleForm-table-builder-column {
  border-left: 1px solid var(--th-grey);
  width: 150px;
  display: inline-block;
  position: relative;
  min-height: 100px;
  margin: 0px;
  margin-top: 40px;
  border-radius: 0px 10px 10px 10px !important;
}

.simpleForm-table-builder-column-tag {
  position: absolute;
  height: 30px;
  top: -30px;
  background-color: var(--th-form);
  font-family: var(--font-heading);
  color: white;
  padding: 5px;
  font-size: 14px;
  border-radius: 10px 10px 0px 0px;
}

.func_builder-list-act_form-search {
  padding: 10px;
  margin: 10px 10px 0px 0px;
  font-family: var(--font-heading);
  color: white;
  background-color: var(--cl-form-field);
  display: inline-block;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.func_builder-list-act_form-selected_button {
  margin: 10px 10px 0px 0px;
  font-family: var(--font-heading);
  display: inline-block;
  border-radius: 5px;
  font-size: 18px;
  overflow: hidden;
  color: white;
  background-color: var(--cl-form-field);
}

.func_builder-list-act_form-selected_button-text {
  display: inline-block;
  padding: 10px;
}

.func_builder-list-act_form-selected_button-icon {
  display: inline-block;
  padding: 10px;
  color: var(--th-red);
  cursor: pointer;
}

.func-success {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.func-success-img {
  width: 80%;
  max-width: 200px;
}

.home-quick_access-cover {
  display: inline-block;
  margin: 10px;
}

.home-quick_access-main {
  display: grid;
  grid-template-columns: max-content max-content;
  border-radius: 10px;
  overflow: hidden;
  max-height: 100px;
  cursor: pointer;
}

.home-quick_access-left {
  padding: 10px;
}

.home-quick_access-left-image {
  height: 25px;
  width: 25px;
}

.home-quick_access-right {
  display: inline-block;
}

.home-quick_access-right-name {
  font-family: var(--font-ali-thin);
  text-transform: capitalize;
  color: white;
  height: 100%;
  padding: 0px 15px 0px 15px;
  font-size: 16px;
}

.home-section_heading-split {
  display: grid;
  grid-template-columns: auto 100px;
}

.home-section_heading-heading-text {
  color: white;
  font-family: var(--font-heading);
  text-transform: capitalize;
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.home-section_heading-buttons {
  text-align: center;
}

.home-section_heading-buttons-button {
  border-radius: 5px;
  display: inline-block;
  padding: 8px;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
}

.home-section_message-text {
  padding: 20px 10px 20px 10px;
  font-family: var(--font-heading);
  color: white;
  font-size: 18px;
}

.login-custom-buttons {
  background-image: linear-gradient(to left top, #cb83c9, #e975af, #fc6d8a, #ff7060, #f17e32);
  padding: 10px;
  border-radius: 5px;
  font-family: var(--font-button);
  color: white;
  display: inline-block;
  font-size: 20px;
  margin: 10px 10px 0px 0px;
}

.executer-page-main {
  min-width: 300px;
}

.executer-page-pc-title {
  font-size: 24px;
  font-family: var(--font-heading);
  text-transform: capitalize;
  padding: 10px 20px 10px 20px;
  color: white;
}

.executer-page-pc-button {
  text-align: center;
  display: inline-block;
  border-radius: 5px;
  font-family: var(--font-button);
  text-transform: capitalize;
  color: white;
  font-size: 28px;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.executer-page-mobile-no_back {
  min-height: 50px;
}

.executer-page-mobile-no_back-icon {
  font-size: 24px;
  color: white;
  cursor: pointer;
}

.executer-page-mobile-no_back-title {
  font-size: 16px;
  color: white;
  font-family: var(--font-ark);
  text-align: center;
  padding: 10px 0px 10px 0px;
  text-transform: capitalize;
}

.executer-page-mobile-back {
  height: 50px;
}

.executer-page-mobile-back-title {
  font-family: var(--font-ark);
  text-transform: capitalize;
  color: white;
  font-size: 14px;
  padding: 10px 0px 10px 0px;
}

.executer-page-mobile-back-icon {
  font-size: 20px;
  color: white;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
}

@media only screen and (max-width: 665px) {
  .executer-page-pc {
    display: none !important;
  }

  .executer-page-mobile-no_back {
    display: grid !important;
  }

  .executer-page-mobile-back {
    display: grid !important;
  }

  .executer-page-main {
    display: grid;
    grid-template-rows: 60px auto;
    height: 100vh;
  }

  .executer-page-body {
    overflow: auto;
    height: 100%;
  }
}
@media only screen and (min-width: 665px) {
  .executer-page-pc {
    display: block;
  }

  .executer-page-mobile-no_back {
    display: none !important;
  }

  .executer-page-mobile-back {
    display: none !important;
  }

  .executer-page-main {
    width: 90%;
    margin: 10px auto 10px auto;
    border-radius: 10px;
    overflow: hidden;
    max-width: 800px;
    background-color: var(--cl-work-base) !important;
    filter: brightness(1);
  }
}
.starter-profiles-list {
  margin: auto;
  width: 90%;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.starter-profiles-list-button {
  font-size: 18px;
  color: rgb(238, 5, 83);
  font-family: var(--font-button);
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.profile-row-n {
  border-top: 1px solid var(--th-grey);
}

.profile-row {
  padding: 5px 0px 5px 0px;
  display: grid;
  grid-template-columns: 100px 50px auto 50px;
  border-top: 1px solid var(--th-grey);
  cursor: pointer;
}

.profile-row:hover .profile-row-icon {
  color: var(--th-purple);
}

.profile-row-image {
  text-align: right !important;
  padding: 5px 0px 0px 0px;
}

.profile-row-icon {
  text-align: center;
  font-size: 24px;
  color: rgb(238, 5, 83);
}

.profile-row-image-img {
  width: auto;
  height: 30px;
  border-radius: 100%;
  border: 1px solid var(--th-grey);
}

.profile-row-name-top {
  font-size: 14px;
  font-family: var(--font-raleway);
  font-weight: 100;
  text-transform: capitalize;
  text-align: left !important;
  color: white;
  text-overflow: ellipsis;
}

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

.ui-platform-mobile-portrait {
  aspect-ratio: 9/16;
  height: 90vh;
  max-height: 800px;
  position: fixed;
  top: 5vh;
  left: 5px;
  border: 5px solid black;
  border-radius: 10px;
  overflow: auto;
}

.ui-platform-mobile-landscape {
  aspect-ratio: 16/9;
  position: fixed;
  top: 10px;
  left: 10px;
  max-width: 800px;
  width: 80vw;
  border: 5px solid black;
  border-radius: 10px;
  overflow: auto;
}

.ui-platform-tablet-portrait {
  aspect-ratio: 14/16;
  height: 95vw;
  max-height: 600px;
  position: fixed;
  top: 1vh;
  left: 5px;
  border: 5px solid rgba(74, 61, 252, 0.87);
  border-radius: 10px;
  overflow: auto;
}

.ui-platform-tablet-landscape {
  aspect-ratio: 24/16;
  position: fixed;
  top: 10px;
  left: 10px;
  width: 800px;
  border: 5px solid rgba(74, 61, 252, 0.87);
  border-radius: 10px;
  overflow: auto;
}

.ui-main {
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.ui-row-empty {
  font-family: var(--font-text);
  color: rgb(3, 67, 184);
  text-align: center;
}

.ui-block {
  position: relative;
}

.ui-block-opts-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 24px;
  color: rgb(235, 0, 78);
  cursor: pointer;
  z-index: 1;
}

.ui-content-button {
  font-size: 16px;
  display: inline-block;
  padding: 3px;
  color: white;
  background-color: var(--th-form-light);
  border-radius: 3px;
  margin-right: 3px;
  cursor: pointer;
}

.ui-close-editor_menu {
  text-align: right;
  padding: 10px;
}

.ui-close-button {
  background-color: var(--th-red);
  font-size: 14px;
  font-family: var(--font-text);
  display: inline-block;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
  color: white;
  cursor: pointer;
}

.ui-styles-group {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--th-grey);
}

.ui-styles-group-menu {
  padding: 10px;
  display: grid;
  grid-template-columns: auto 20px;
  border-bottom: 1px solid var(--th-grey);
  user-select: none;
  cursor: pointer;
}

.ui-styles-group-menu-text {
  font-family: var(--curvy);
  font-size: 18px;
  color: var(--th-form);
}

.ui-styles-group-menu-icon {
  color: var(--th-orange);
  font-size: 24px;
}

.ui-styles-group-rows {
  padding: 10px;
}

.ui-styles-row {
  padding: 10px;
  display: grid;
  grid-template-columns: 50% 50%;
}

.ui-styles-row-tag {
  font-family: var(--curvy);
  font-size: 16px;
  color: var(--th-form);
  height: 100%;
}

.ui-styles-row-input {
  height: 100%;
  text-align: center;
  vertical-align: top;
}

.ui-styles-row-input-string {
  width: 90%;
  background-color: var(--th-form);
  border: 0px;
  padding: 10px;
  font-family: var(--font-text);
  color: white;
  border-radius: 5px;
}

.ui-styles-row-input-select {
  width: 70%;
  display: inline-block;
  background-color: var(--th-form);
  border: 0px;
  padding: 10px;
  font-family: var(--font-text);
  color: white;
  border-radius: 5px;
}

.ui-styles-row-input-button {
  color: var(--th-red);
  margin: 0px 10px 0px 10px;
  display: inline-block;
  font-size: 24px;
  vertical-align: top;
}

.ui-styles-row-input-checkbox {
  height: 18px;
  width: 18px;
}

.ui-styles-row-input-color {
  width: 100px;
  border-radius: 5px;
  width: 70%;
}

.ui-simple-menu-cover {
  text-align: right;
  width: 90%;
  margin: auto;
}

.ui-simple-menu {
  margin: 10px;
  display: inline-block;
  background-color: var(--th-purple);
  border-radius: 10px;
  overflow: hidden;
}

.ui-simple-menu-row {
  display: grid;
  grid-template-columns: 50% 50%;
}

.ui-simple-menu-row-text {
  font-size: 14px;
  font-family: var(--font-text);
  color: white;
  text-transform: capitalize;
  padding: 10px;
  padding-top: 13px;
}

.ui-simple-menu-row-input {
  text-align: center;
  padding: 10px;
}

.ui-simple-menu-row-checkbox {
  height: 20px;
  width: 20px;
}

.some {
  vertical-align: middle;
}

.ui-mobile-portrait {
  visibility: visible;
}

.ui-mobile-landscape {
  visibility: visible;
}

.ui-mobile {
  visibility: visible;
}

.ui-tablet-portrait {
  visibility: visible;
}

.ui-tablet-landscape {
  visibility: visible;
}

.ui-tablet {
  visibility: visible;
}

.ui-pc {
  visibility: visible;
}

@media only screen and (max-width: 900px) and (orientation: landscape) {
  .ui-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile {
    visibility: visible;
  }

  .ui-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-landscape {
    visibility: visible;
  }

  .ui-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (max-height: 900px) and (orientation: portrait) {
  .ui-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile {
    visibility: visible;
  }

  .ui-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-portrait {
    visibility: visible;
  }

  .ui-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-height: 900px) and (max-height: 1180px) and (min-width: 820px) and (orientation: portrait) {
  .ui-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet {
    visibility: visible;
  }

  .ui-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-portrait {
    visibility: visible;
  }

  .ui-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
  .ui-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet {
    visibility: visible;
  }

  .ui-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-landscape {
    visibility: visible;
  }
}
@media only screen and (min-width: 1180px) and (orientation: landscape) {
  .ui-pc {
    visibility: visible;
  }

  .ui-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-height: 1180px) and (orientation: portrait) {
  .ui-pc {
    visibility: visible;
  }

  .ui-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .ui-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
.ui-runner-footer {
  background-color: rgb(44, 44, 44);
  min-height: 100px;
  padding: 10px 0px 10px 0px;
}

.ui-runner-footer-card {
  max-width: 300px;
  width: 90%;
  margin: auto;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  color: white;
  font-family: var(--font-heading);
}

.ui-runner-footer-card-title {
  font-size: 16px;
}

.ui-runner-footer-card-tag-key {
  font-size: 16px;
  padding: 5px 5px 0px 0px;
}

.ui-runner-footer-card-tag-val {
  font-size: 12px;
  padding: 0px 5px 0px 0px;
}

.ui-runner-footer-card-tag-link {
  font-size: 16px;
  padding: 10px 5px 10px 0px;
  color: white;
  text-decoration: underline;
  display: block;
}

.chat-contacts-search {
  text-align: center;
  border: 0px;
  font-family: var(--font-ali-thin);
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  width: 90%;
  color: white;
}

.chat-contacts-list-parent {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.chat-contacts-more-button {
  display: inline-block;
  padding: 10px;
  font-family: var(--font-button);
  font-size: 14px;
  text-align: center;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.chat-contacts-list-parent::-webkit-scrollbar {
  display: none;
}

.chat-contacts-profile-name {
  font-family: var(--font-heading);
  padding: 5px 0px 5px 0px;
  color: var(--work-chat-profile-name-color);
  word-wrap: break-word;
}

.chat-contacts-profile-email {
  font-family: var(--font-heading);
  padding: 5px 0px 5px 0px;
  font-size: 12px;
  color: var(--work-chat-profile-email-color);
  word-wrap: break-word;
}

.chat-contacts-profile-noti {
  background-color: var(--th-red);
  color: white;
  margin: 5px;
  margin-right: 10px;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  font-family: var(--font-heading);
}

.user_space-chat-menu-back_button {
  color: white;
  margin: 0px;
  cursor: pointer;
  padding: 5px;
}

.user_space-chat-menu-chat_name {
  font-family: var(--font-button);
  text-transform: capitalize;
  font-size: 14px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 0px 10px 0px 10px;
}

.user_space-chat-input {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  color: white;
  font-family: var(--font-ali);
  font-size: 14px;
  overflow: auto;
  padding: 10px;
  border: 0px;
  outline: 0px;
  background-color: transparent;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.user_space-chat-send_button {
  position: absolute;
  bottom: 2px;
  right: 2px;
  height: 32px;
  width: 32px;
  padding: 7px 0px 0px 7px;
  color: white;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  background-color: transparent;
}

.user_space-chat-message {
  display: inline-block;
  padding: 10px;
  max-width: 90%;
  margin: 0px auto 0px auto;
  word-wrap: break-word;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 12px;
  color: white;
}

.user_space-chat-message-tag-name {
  font-family: var(--font-ali-thin);
  padding: 5px;
  text-transform: capitalize;
  display: inline-block;
  vertical-align: middle;
  color: white;
  font-size: 12px;
}

.user_space-chat-message-tag-time {
  padding: 0px 15px 5px 15px;
  font-family: var(--font-ali-thin);
  color: white;
  font-size: 10px;
}

.user_space-chat-message-tag-image {
  height: 17px;
  width: 17px;
  vertical-align: middle;
  border-radius: 75px;
  background-color: var(--th-focus-pink);
}

.user_space-chat_list-retry {
  text-align: center;
  font-family: var(--font-text);
  text-transform: capitalize;
  color: white;
  border-radius: 5px;
  margin: 10px auto 10px auto;
  text-align: center;
}

.user_space-chat_list-header {
  text-align: center;
  font-family: var(--font-heading);
  text-transform: capitalize;
  color: white;
  border-radius: 5px;
  margin: 10px auto 10px auto;
}

.user_space-chat_list-header-global {
  text-align: center;
  font-family: var(--font-heading);
  text-transform: capitalize;
  color: white;
  border-radius: 5px;
  margin: 10px auto 10px auto;
  display: grid;
  grid-template-columns: auto 50px 40px;
}

.user_space-chat_list-close-icon {
  font-size: 20px;
}

.user_space-chat_list-title {
  text-transform: capitalize;
  color: white;
  border-radius: 5px;
}

.user_space-chat_list-header-icon {
  font-size: 24px;
}

.user_space-todo-add-todo {
  margin: 10px auto 10px auto;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  width: 90%;
  font-family: var(--font-heading);
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.user_space-todo-list-day-title {
  padding: 10px;
  font-size: 12px;
  font-family: var(--font-heading);
  color: white;
  text-align: right;
}

.user_space-todo-list-list-todo {
  margin: 10px auto 10px auto;
  padding: 10px;
  border-radius: 5px;
  width: 90%;
  font-family: var(--font-heading);
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.user_space-todo-list-list-todo-info {
  padding: 10px;
  font-size: 12px;
}

.user_space-todo-list-list-todo-info-date {
  padding: 5px;
}

.user_space-todo-list-list-todo-info-desc {
  padding: 5px;
}

.user-space-main {
  background-color: var(--cl-work-base);
}

@media only screen and (max-width: 900px) and (orientation: landscape) {
  .user-space-main {
    border-radius: 0px !important;
    background-color: rgb(19, 19, 19);
  }
}
@media only screen and (max-height: 900px) and (orientation: portrait) {
  .user-space-main {
    border-radius: 0px !important;
    background-color: rgb(19, 19, 19);
  }
}
.user_space-menu-button {
  display: inline-block;
  font-size: 24px;
  padding: 10px;
  border-radius: 10px;
  margin: 10px;
  color: white;
  cursor: pointer;
}

@media only screen and (min-width: 1050px) and (orientation: landscape) {
  .user_space-close-icon {
    display: none;
    color: red;
  }
}
.info {
  padding: 10px 0px 10px 0px;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  color: var(--cl-info-text);
  font-family: var(--cl-info-font);
  font-size: var(--cl-info-font-size);
}

.silver_ui-big_message {
  text-align: center;
  font-family: var(--font-heading);
  padding: 10px;
  border-radius: 10px;
  color: var(--cl-big_message-font);
}

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

"@" - 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;
}

.ucfc-only_error-message {
  color: var(--th-red);
  font-family: var(--font-text);
  font-size: 18px;
  text-align: center;
  padding: 10px;
  background-color: var(--th-red);
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.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 {
  font-size: 20px;
  font-family: var(--font-heading);
  color: var(--cl-loader-txt);
  text-transform: capitalize;
  padding: 10px;
}

@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%;
  overflow: hidden;
  align-content: center;
}

.ucfcc-card {
  min-height: 10vh;
  max-height: 80%;
  width: 90%;
  max-width: 800px;
  background-color: var(--cl-card-bg);
  display: block;
  overflow: auto;
  margin: 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

???????????????????*/
.uccsc-main {
  height: 100%;
  overflow: auto;
}

.uccsc-header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: var(--work-cl-card-heading);
  overflow: hidden;
  max-height: 60px;
}

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

.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: 1px solid var(--work-cl-rows-row-border);
  border-left: 1px solid var(--work-cl-rows-row-border);
  border-right: 1px solid var(--work-cl-rows-row-border);
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}

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

.indexRows-row {
  height: 100%;
  display: grid;
  grid-template-columns: 60px auto;
  border-bottom: 2px solid var(--th-grey);
}

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

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

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

.indexRows-row-cover-only {
  border-bottom: 1px solid var(--work-cl-rows-row-border) !important;
  background-color: var(--work-cl-rows-background);
}

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

"@" - 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;
  text-align: left;
}

.simpleform-tag {
  font-family: var(--form-tag-font);
  color: var(--cl-h-1);
  font-size: 16px;
  display: inline-block;
  padding: var(--form-tag-padding);
  color: var(--cl-form-tag);
  background-color: var(--cl-form-tag-bg);
  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-heading);
  padding: 5px 0px 10px 0px;
  width: 100%;
  color: var(--cl-form-help);
}

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

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

.simpleform-input-border {
  border-radius: var(--form-input-border-radius);
  overflow: hidden;
}

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

.simpleform-input-elem-bg {
  background-color: var(--cl-form-field) !important;
}

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

.simpleform-input-elem::placeholder {
  color: var(--cl-form-placeholder) !important;
  font-size: 14px;
}

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

.simpleform-input-tagged {
  border-radius: var(--form-input-border-radius);
}

.simpleform-input-elem-error {
  border-bottom: 5px solid var(--th-red) !important;
}

.simpleform-mobile-otp {
  background-color: var(--cl-form-field) !important;
  height: 50px;
  font-family: var(--form-input-font);
  font-size: 16px;
  border: 0px;
  color: white;
  margin-right: 5px;
  border-radius: 10px;
  text-align: center;
  vertical-align: top;
  display: inline-block;
}

.simpleform-mobile-otp-button {
  padding: 15px;
  cursor: pointer;
  user-select: none;
  border-bottom: 5px solid var(--cl-form-button);
}

.simpleform-mobile-otp-button:hover {
  border-bottom: 5px solid var(--green) !important;
}

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

.simpleform-input-color-cover {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin-top: 10px;
  overflow: hidden;
}

.simpleform-input-color-input {
  border-radius: 5px;
  height: 30px;
  width: 30px;
  margin-top: 12px;
  overflow: hidden;
  border: 2px solid white;
}

.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 {
  padding: var(--form-button-border-padding);
  font-family: var(--form-button-font-family);
  font-size: var(--form-button-font-size);
  display: inline;
  min-width: 150px;
  border: 0px;
  color: white;
  border-radius: var(--form-button-border-radius);
  margin: var(--form-button-margin);
  cursor: pointer;
  user-select: none;
  background-color: var(--cl-form-button);
}

.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;
  max-width: 90vw;
  min-height: 10px;
  background-color: var(--work-cl-floating-background);
  overflow: auto;
  z-index: 10;
}

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

.flbox-main-row {
  display: grid;
  grid-template-columns: 50px auto;
  padding: 10px;
  cursor: pointer;
}

.flbox-main-row-icon {
  text-align: center;
  font-size: 20px;
}

.flbox-main-row-text {
  padding-top: 3px;
  font-family: var(--font-button);
  font-size: 16px;
  color: var(--work-cl-floating-text);
  text-transform: capitalize;
}

.flbox-main-row:hover .flbox-main-row-icon {
  font-size: 24px;
  font-weight: bold;
}

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

"@" - 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-main-card {
  background-color: var(--work-cl-menu-buttons);
  width: 90%;
  display: inline-block;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.cuibts-button {
  background-color: var(--work-cl-menu-buttons);
  display: inline-block;
  max-width: 300px;
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 5px solid transparent;
  user-select: none;
  min-width: 100px;
}

.cuibts-button-danger {
  background-color: var(--th-red);
  border-bottom: 5px solid var(--th-red);
}
.cuibts-button-danger .cuibts-button:hover {
  border-bottom: 5px solid var(--th-purple);
}

.cuibts-button-icon {
  text-align: center;
  display: inline-block;
  padding: 5px 10px 0px 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: 0px 10px 0px 10px;
  padding-top: 10px;
  height: 100%;
  vertical-align: top;
}

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

.ui-bts-st_br-main {
  width: 90%;
  margin: auto;
  border-top-left-radius: 5px;
  overflow: hidden;
}

.ui-bts-st_br-buttons {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  display: inline-block;
  margin: 0px;
  vertical-align: bottom;
}

.ui-bts-st_br-button {
  background-color: inherit;
  font-family: var(--font-button);
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin: 0px !important;
  cursor: pointer;
}

.ui-bts-st_br-button:hover {
  border-bottom: 5px solid var(--green) !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

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

.bx-h-h {
  display: inline-block;
  color: var(--th-orange);
  height: 100%;
  font-size: 16px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-family: var(--curvy);
  text-transform: capitalize;
  vertical-align: bottom;
}

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

.bx-h-a-c {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  padding-left: 10px;
}

.bx-h-a-cb {
  display: grid;
  place-items: center;
  height: 100%;
}

.bx-h-a {
  font-size: 24px;
  cursor: pointer;
}

.bx-h-a:hover {
  font-size: 28px;
}

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

"@" - 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

???????????????????*/
.dialog-text {
  padding-top: 20px;
  color: white;
  font-family: var(--font-heading);
  font-size: 18px;
  text-transform: capitalize;
}

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

.comp-menu-opener {
  position: fixed;
  z-index: 9;
  height: 100vh;
  width: 10vw;
  max-width: 20px;
  top: 0px;
  left: 0px;
}

.comp-menu-main {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 8;
}

.comp-menu-main-menu {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  user-select: none;
  overflow: hidden;
}

.comp-menu-main-slider {
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
}

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

"@" - 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

???????????????????*/
.action-card-cover {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
  border-radius: 10px;
  overflow: hidden;
  margin: 5px;
  cursor: pointer;
}

.action-card-main {
  display: grid;
  grid-template-rows: 50px 60px;
}

.action-card-icon {
  font-size: 32px;
}

.action-card-image {
  height: 32px;
  width: 32px;
}

.action-card-bottom {
  padding: 3px;
  text-overflow: ellipsis;
  font-family: var(--font-ark);
  text-transform: capitalize;
  font-size: 12px;
  color: white;
  text-align: 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

???????????????????*/
.info2-pc-heading {
  font-size: 24px;
  font-family: var(--font-heading);
  color: white;
  text-align: left;
  padding: 10px;
  width: 90%;
  display: inline-block;
}

.info2-pc-description {
  font-size: 14px;
  font-family: var(--font-heading);
  color: white;
  text-align: left;
  padding: 10px;
  width: 90%;
  display: inline-block;
}

.info2-info-tag {
  font-size: 16px;
  font-family: var(--font-heading);
  word-wrap: break-word;
  padding: 10px 10px 10px 0px;
  text-transform: capitalize;
  color: white;
}

.info2-info-text {
  font-size: 18px;
  font-family: var(--font-heading);
  word-wrap: break-word;
  padding: 10px 10px 10px 10px;
  text-transform: capitalize;
  color: white;
}

.info2-mobile {
  display: none !important;
  padding: 5px 0px 20px 0px;
}

@media only screen and (max-width: 600px) {
  .info2-pc {
    display: none !important;
  }

  .info2-mobile {
    display: grid !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

???????????????????*/
.retryButton-button {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  color: var(--work-retryButton-text-color);
  font-family: var(--font-button);
  display: inline-block;
  cursor: pointer;
}

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

"@" - 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

???????????????????*/
.common-tabs-button {
  display: inline-block;
  font-family: var(--font-button);
  font-size: 14px;
  color: white;
  padding: 0px 20px 0px 20px;
  border-bottom: 5px solid transparent;
  cursor: pointer;
}

.common-tabs-button-active {
  border-bottom: 5px solid var(--th-focus-pink);
}

.common-tabs-main {
  scrollbar-width: 10px;
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}

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

"@" - 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

???????????????????*/
.alert-card-main {
  padding: 10px;
}

.alert-card-message {
  font-family: var(--font-button);
  padding: 10px;
  font-size: 16px;
}

.alert-card-buttons {
  padding: 10px 0px 40px 0px;
}

.alert-card-button {
  float: left;
  margin: 10px;
  font-size: 16px;
  font-family: var(--font-button);
  color: rgb(255, 1, 77);
  vertical-align: top;
  margin-right: 20px;
  cursor: pointer;
}

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

"@" - 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;
}

.ucfc-only_error-message {
  color: var(--th-red);
  font-family: var(--font-text);
  font-size: 18px;
  text-align: center;
  padding: 10px;
  background-color: var(--th-red);
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.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 {
  font-size: 20px;
  font-family: var(--font-heading);
  color: var(--cl-loader-txt);
  text-transform: capitalize;
  padding: 10px;
}

@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%;
  overflow: hidden;
  align-content: center;
}

.ucfcc-card {
  min-height: 10vh;
  max-height: 80%;
  width: 90%;
  max-width: 800px;
  background-color: var(--cl-card-bg);
  display: block;
  overflow: auto;
  margin: 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

???????????????????*/
.uccsc-main {
  height: 100%;
  overflow: auto;
}

.uccsc-header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: var(--work-cl-card-heading);
  overflow: hidden;
  max-height: 60px;
}

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

.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: 1px solid var(--work-cl-rows-row-border);
  border-left: 1px solid var(--work-cl-rows-row-border);
  border-right: 1px solid var(--work-cl-rows-row-border);
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}

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

.indexRows-row {
  height: 100%;
  display: grid;
  grid-template-columns: 60px auto;
  border-bottom: 2px solid var(--th-grey);
}

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

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

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

.indexRows-row-cover-only {
  border-bottom: 1px solid var(--work-cl-rows-row-border) !important;
  background-color: var(--work-cl-rows-background);
}

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

"@" - 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;
  text-align: left;
}

.simpleform-tag {
  font-family: var(--form-tag-font);
  color: var(--cl-h-1);
  font-size: 16px;
  display: inline-block;
  padding: var(--form-tag-padding);
  color: var(--cl-form-tag);
  background-color: var(--cl-form-tag-bg);
  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-heading);
  padding: 5px 0px 10px 0px;
  width: 100%;
  color: var(--cl-form-help);
}

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

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

.simpleform-input-border {
  border-radius: var(--form-input-border-radius);
  overflow: hidden;
}

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

.simpleform-input-elem-bg {
  background-color: var(--cl-form-field) !important;
}

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

.simpleform-input-elem::placeholder {
  color: var(--cl-form-placeholder) !important;
  font-size: 14px;
}

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

.simpleform-input-tagged {
  border-radius: var(--form-input-border-radius);
}

.simpleform-input-elem-error {
  border-bottom: 5px solid var(--th-red) !important;
}

.simpleform-mobile-otp {
  background-color: var(--cl-form-field) !important;
  height: 50px;
  font-family: var(--form-input-font);
  font-size: 16px;
  border: 0px;
  color: white;
  margin-right: 5px;
  border-radius: 10px;
  text-align: center;
  vertical-align: top;
  display: inline-block;
}

.simpleform-mobile-otp-button {
  padding: 15px;
  cursor: pointer;
  user-select: none;
  border-bottom: 5px solid var(--cl-form-button);
}

.simpleform-mobile-otp-button:hover {
  border-bottom: 5px solid var(--green) !important;
}

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

.simpleform-input-color-cover {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin-top: 10px;
  overflow: hidden;
}

.simpleform-input-color-input {
  border-radius: 5px;
  height: 30px;
  width: 30px;
  margin-top: 12px;
  overflow: hidden;
  border: 2px solid white;
}

.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 {
  padding: var(--form-button-border-padding);
  font-family: var(--form-button-font-family);
  font-size: var(--form-button-font-size);
  display: inline;
  min-width: 150px;
  border: 0px;
  color: white;
  border-radius: var(--form-button-border-radius);
  margin: var(--form-button-margin);
  cursor: pointer;
  user-select: none;
  background-color: var(--cl-form-button);
}

.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;
  max-width: 90vw;
  min-height: 10px;
  background-color: var(--work-cl-floating-background);
  overflow: auto;
  z-index: 10;
}

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

.flbox-main-row {
  display: grid;
  grid-template-columns: 50px auto;
  padding: 10px;
  cursor: pointer;
}

.flbox-main-row-icon {
  text-align: center;
  font-size: 20px;
}

.flbox-main-row-text {
  padding-top: 3px;
  font-family: var(--font-button);
  font-size: 16px;
  color: var(--work-cl-floating-text);
  text-transform: capitalize;
}

.flbox-main-row:hover .flbox-main-row-icon {
  font-size: 24px;
  font-weight: bold;
}

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

"@" - 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-main-card {
  background-color: var(--work-cl-menu-buttons);
  width: 90%;
  display: inline-block;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.cuibts-button {
  background-color: var(--work-cl-menu-buttons);
  display: inline-block;
  max-width: 300px;
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 5px solid transparent;
  user-select: none;
  min-width: 100px;
}

.cuibts-button-danger {
  background-color: var(--th-red);
  border-bottom: 5px solid var(--th-red);
}
.cuibts-button-danger .cuibts-button:hover {
  border-bottom: 5px solid var(--th-purple);
}

.cuibts-button-icon {
  text-align: center;
  display: inline-block;
  padding: 5px 10px 0px 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: 0px 10px 0px 10px;
  padding-top: 10px;
  height: 100%;
  vertical-align: top;
}

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

.ui-bts-st_br-main {
  width: 90%;
  margin: auto;
  border-top-left-radius: 5px;
  overflow: hidden;
}

.ui-bts-st_br-buttons {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  display: inline-block;
  margin: 0px;
  vertical-align: bottom;
}

.ui-bts-st_br-button {
  background-color: inherit;
  font-family: var(--font-button);
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin: 0px !important;
  cursor: pointer;
}

.ui-bts-st_br-button:hover {
  border-bottom: 5px solid var(--green) !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

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

.bx-h-h {
  display: inline-block;
  color: var(--th-orange);
  height: 100%;
  font-size: 16px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-family: var(--curvy);
  text-transform: capitalize;
  vertical-align: bottom;
}

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

.bx-h-a-c {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  padding-left: 10px;
}

.bx-h-a-cb {
  display: grid;
  place-items: center;
  height: 100%;
}

.bx-h-a {
  font-size: 24px;
  cursor: pointer;
}

.bx-h-a:hover {
  font-size: 28px;
}

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

"@" - 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

???????????????????*/
.dialog-text {
  padding-top: 20px;
  color: white;
  font-family: var(--font-heading);
  font-size: 18px;
  text-transform: capitalize;
}

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

.comp-menu-opener {
  position: fixed;
  z-index: 9;
  height: 100vh;
  width: 10vw;
  max-width: 20px;
  top: 0px;
  left: 0px;
}

.comp-menu-main {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 8;
}

.comp-menu-main-menu {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  user-select: none;
  overflow: hidden;
}

.comp-menu-main-slider {
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
}

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

"@" - 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

???????????????????*/
.action-card-cover {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
  border-radius: 10px;
  overflow: hidden;
  margin: 5px;
  cursor: pointer;
}

.action-card-main {
  display: grid;
  grid-template-rows: 50px 60px;
}

.action-card-icon {
  font-size: 32px;
}

.action-card-image {
  height: 32px;
  width: 32px;
}

.action-card-bottom {
  padding: 3px;
  text-overflow: ellipsis;
  font-family: var(--font-ark);
  text-transform: capitalize;
  font-size: 12px;
  color: white;
  text-align: 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

???????????????????*/
.info2-pc-heading {
  font-size: 24px;
  font-family: var(--font-heading);
  color: white;
  text-align: left;
  padding: 10px;
  width: 90%;
  display: inline-block;
}

.info2-pc-description {
  font-size: 14px;
  font-family: var(--font-heading);
  color: white;
  text-align: left;
  padding: 10px;
  width: 90%;
  display: inline-block;
}

.info2-info-tag {
  font-size: 16px;
  font-family: var(--font-heading);
  word-wrap: break-word;
  padding: 10px 10px 10px 0px;
  text-transform: capitalize;
  color: white;
}

.info2-info-text {
  font-size: 18px;
  font-family: var(--font-heading);
  word-wrap: break-word;
  padding: 10px 10px 10px 10px;
  text-transform: capitalize;
  color: white;
}

.info2-mobile {
  display: none !important;
  padding: 5px 0px 20px 0px;
}

@media only screen and (max-width: 600px) {
  .info2-pc {
    display: none !important;
  }

  .info2-mobile {
    display: grid !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

???????????????????*/
.retryButton-button {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  color: var(--work-retryButton-text-color);
  font-family: var(--font-button);
  display: inline-block;
  cursor: pointer;
}

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

"@" - 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

???????????????????*/
.common-tabs-button {
  display: inline-block;
  font-family: var(--font-button);
  font-size: 14px;
  color: white;
  padding: 0px 20px 0px 20px;
  border-bottom: 5px solid transparent;
  cursor: pointer;
}

.common-tabs-button-active {
  border-bottom: 5px solid var(--th-focus-pink);
}

.common-tabs-main {
  scrollbar-width: 10px;
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}

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

"@" - 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

???????????????????*/
.alert-card-main {
  padding: 10px;
}

.alert-card-message {
  font-family: var(--font-button);
  padding: 10px;
  font-size: 16px;
}

.alert-card-buttons {
  padding: 10px 0px 40px 0px;
}

.alert-card-button {
  float: left;
  margin: 10px;
  font-size: 16px;
  font-family: var(--font-button);
  color: rgb(255, 1, 77);
  vertical-align: top;
  margin-right: 20px;
  cursor: pointer;
}

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

"@" - 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

???????????????????*/
.data-search-rows-pagination {
  display: inline-block;
  border-radius: 5px;
  height: 35px;
  background-color: var(--work-cl-rows-background);
  overflow: hidden;
}

.data-search-rows-pagination-button {
  width: 50px;
  display: inline-grid;
  color: white;
  place-items: center;
  font-size: 20px;
  height: 100%;
  cursor: pointer;
}

.data-search-input-main {
  display: grid;
  grid-template-columns: minmax(60px, auto) 100px !important;
  border-radius: 5px;
  background-color: var(--work-cl-search-input);
  height: 50px;
  min-width: 300px;
  overflow: hidden !important;
  margin: 10px 0px 10px 0px;
}

.data-search-input-input {
  display: inline-block;
  background: inherit;
  font-family: var(--font-ali-thin);
  font-size: 20px;
  padding: 10px;
  border: 0px;
  color: white;
  height: 100%;
  padding: 0px 10px 0px 10px;
}

.data-search-input-input-with-icon {
  padding-left: 40px;
}

.data-search-input-input::placeholder {
  color: white;
}

.data-search-input-search-button {
  display: inline-block;
  font-size: 24px;
  color: white;
  background-color: inherit;
  color: hidden;
  height: 100%;
}

.data-search-options-button {
  display: inline-block;
  font-family: var(--font-button);
  padding: 10px;
  font-size: 18px;
  color: white;
  border: 0px;
  background-color: var(--work-cl-buttons) !important;
  border-radius: 5px;
  margin: 5px 10px 5px 0px;
  cursor: pointer;
  border-bottom: 5px solid transparent;
}

.data-search-options-select {
  display: inline-block;
  font-family: var(--font-button);
  padding: 10px;
  font-size: 18px;
  color: white;
  border: 0px;
  background-color: var(--work-cl-buttons) !important;
  border-radius: 5px;
  margin: 5px 10px 5px 0px;
  cursor: pointer;
  border-bottom: 5px solid transparent;
}

.data-search-options-select option {
  font-family: var(--font-button);
}

.data-search-options-compact {
  display: none;
}

.data-search-options-compact-button {
  padding: 10px;
  font-size: 24px;
  color: white;
  display: inline-block;
  border-radius: 5px;
  min-width: 100px;
  text-align: center;
  cursor: pointer;
}

@media only screen and (max-width: 400px) {
  .data-search-input-main {
    min-width: 200px !important;
    grid-template-columns: minmax(50px, auto) 50px !important;
  }

  .data-search-options-full {
    display: none;
  }

  .data-search-options-compact {
    display: block;
  }
}
.deUi-siComp-table-search-box {
  width: 90%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.deUi-siComp-table-search-input {
  background-color: var(--th-form);
  font-family: var(--font-text);
  color: white;
  font-size: 16px;
  border: 0px;
  height: 100%;
  padding: 0px 10px 0px 10px;
  border-right: 1px solid var(--th-grey);
}

.deUi-siComp-table-search-button {
  background-color: var(--th-form);
  font-size: 24px;
  color: white;
  height: 100%;
  padding-top: 10px;
  border-bottom: 5px solid var(--th-form);
}

.deUi-siComp-table-search-button:focus {
  border-bottom: 5px solid var(--green);
  outline: 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

???????????????????*/
.ui-in-rowsf-main:focus {
  border-left: 5px solid var(--work-cl-focus);
  outline: 0px;
}

.ui-in-rowsf-row {
  user-select: none;
  background-color: var(--work-cl-rows-background);
  border-left: 5px solid transparent;
}

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

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

.ui-in-rowsf-col {
  padding: 5px;
  text-transform: capitalize;
  height: 100%;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--work-cl-rows-text);
  font-family: var(--work-rows-font-family);
  font-size: var(--work-rows-font-size);
  text-overflow: hidden !important;
  word-wrap: break-word;
  overflow: hidden;
}

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

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

.ui-in-rowsf-act {
  height: 100%;
  width: 50px;
  display: inline-block;
}

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

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

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

.indexRows-row-cover {
  border: 0px;
}

.indexRows-row-empty-cover {
  background-color: var(--work-cl-rows-background);
}

.indexRows-row-empty-text {
  cursor: pointer;
  background-color: var(--work-rows-add-color) !important;
  color: var(--work-rows-add-color-text);
  font-size: var(--work-rows-add-font-size);
  font-family: var(--work-rows-add-font);
  text-transform: capitalize;
}

.indexRows-row-help {
  display: grid;
  grid-template-columns: 30px auto;
  vertical-align: middle;
}

.indexRows-row-help-buttons {
  color: var(--work-cl-rows-help-icon-color);
  font-size: 24px;
  cursor: pointer;
  text-align: center;
}

.indexRows-row-help-message {
  font-family: var(--font-heading);
  color: var(--work-cl-rows-help-color);
  padding: 4px;
  font-weight: 400;
  font-size: 14px;
}

.ui-in-rowsf-acts-mobile {
  display: none;
}

.ui-in-rowsf-row {
  user-select: none;
  background-color: var(--work-cl-rows-background);
  border-left: 5px solid transparent;
}

.ui-in-rowsf-row-icon_only {
  display: grid;
  grid-template-columns: 50px auto;
}

.ui-in-rowsf-row-icon_actions {
  display: grid;
  grid-template-columns: 50px auto min-content;
}

.ui-in-rowsf-row-actions_only {
  display: grid;
  grid-template-columns: auto min-content;
}

.ui-in-rowsf-row-heading {
  background-color: var(--th-form);
  border-left: var(--th-form);
  color: white;
}

.ui-in-rowsf-cols-mobile {
  display: none;
}

@media only screen and (max-width: 500px) {
  .ui-in-rowsf-acts-pc {
    display: none !important;
  }

  .ui-in-rowsf-acts-mobile {
    display: block !important;
  }

  .ui-in-rowsf-cols-pc {
    display: none !important;
  }

  .ui-in-rowsf-cols-mobile {
    display: flex !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

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

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

"@" - 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

???????????????????*/
.outer-menu {
  display: grid;
  grid-template-columns: 100px 150px auto;
  height: 60px;
  overflow: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
}

.outer-menu-scrolled {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

.outer-menu-image {
  height: 100%;
  overflow: hidden;
}

.outer-menu-image-img {
  max-height: 90%;
  width: 60%;
}

.outer-menu-text {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ark) !important;
  font-size: 20px;
  color: rgb(255, 5, 67);
}

.outer-menu-buttons {
  height: 100%;
  overflow: hidden;
}

.outer-menu-buttons-pc {
  height: 100%;
  text-align: right;
  padding-right: 20px;
}

.outer-menu-buttons-pc-button-c {
  display: inline-block;
  height: 100%;
  margin-right: 30px;
}

.outer-menu-buttons-pc-button-p {
  height: 100%;
}

.outer-menu-buttons-pc-button {
  display: inline-block;
  font-family: var(--font-button);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 14px;
  text-align: center;
  color: white;
  cursor: pointer;
}

.outer-menu-buttons-mobile {
  display: none;
  text-align: right;
  height: 100%;
}

.outer-menu-buttons-mobile-c {
  height: 100%;
}

.outer-menu-buttons-mobile-button {
  font-size: 24px;
  color: white;
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .outer-menu {
    grid-template-columns: 80px auto 60px;
  }

  .outer-menu-buttons-pc {
    display: none;
  }

  .outer-menu-buttons-mobile {
    display: block;
  }

  .outer-menu-image-img {
    width: 80%;
    max-height: 80%;
  }
}
.outer-menu-ui-bg1 {
  position: fixed !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(5deg, rgb(0, 0, 0) 70%, rgb(9, 17, 121) 95%, rgb(255, 0, 215) 100%);
  z-index: -2;
  backdrop-filter: blur(10px);
}

.outer-menu-ui-bg2 {
  position: fixed !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
  backdrop-filter: blur(600000000px);
}

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

"@" - 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

???????????????????*/
.outer-footer {
  color: white;
  background-color: black;
}

.outer-links {
  text-align: center;
  padding: 10px;
}

.outer-link {
  display: inline-block;
  padding: 10px;
  font-family: var(--font-heading);
  color: rgb(0, 110, 255);
  font-size: 14px;
  text-transform: capitalize;
}

.outer-copywrite {
  color: white;
  font-family: var(--font-heading);
  padding: 10px;
  font-size: 12px;
  text-align: 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

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

"@" - 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-cal-slots-not {
  font-family: var(--font-heading);
  color: var(--th-red);
  width: 90%;
  margin: auto;
}

.ui-cal-menu {
  margin: auto;
  width: 90%;
}

.ui-cal-menu-where {
  display: inline-block;
  margin: 10px;
  border-radius: 5px;
  background-color: var(--th-purple);
  height: 30px !important;
  overflow: hidden;
  font-family: var(--font-text);
  color: white;
  font-size: 20px;
  font-family: var(--font-button);
  text-align: center;
}

.ui-cal-menu-month {
  vertical-align: top;
  width: 100px;
  height: 100%;
  background-color: inherit;
  border: 0px;
  font-family: var(--font-text);
  color: white;
  font-size: 16px;
}

.ui-cal-menu-year {
  vertical-align: top;
  width: 80px;
  height: 100%;
  background-color: inherit;
  border: 0px;
  font-family: var(--font-button);
  color: white;
  font-size: 16px;
  text-align: center;
}

.ui-cal-menu-button {
  vertical-align: top;
  width: 50px;
  height: 100%;
  display: inline-block;
  padding-top: 3px;
}

.ui-cal-slots {
  width: 90%;
  margin: auto;
}

.ui-cal-slot {
  border: 1px solid var(--th-grey);
  border-radius: 5px;
  display: inline-block !important;
  font-family: var(--font-button);
  margin-top: 10px;
  margin-right: 10px;
  overflow: hidden;
  cursor: pointer;
}

.ui-cal-slot:hover {
  background-color: var(--th-purple);
  color: white;
}
.ui-cal-slot:hover .ui-cal-slot-time {
  color: white !important;
}

.ui-cal-slot-time {
  font-size: 16px;
  padding: 10px;
}

.ui-cal-slot-booking {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--serif-heading);
  padding: 10px;
}

.ui-cal-days {
  width: 90%;
  margin: auto;
}

.ui-cal-day {
  display: inline-block;
  width: 100px;
  font-family: var(--font-button);
  border: 1px solid var(--th-grey);
  border-radius: 5px;
  user-select: none;
  text-align: center;
  cursor: pointer;
}

.ui-cal-day-blocked {
  color: var(--th-red) !important;
}

.ui-cal-day-open {
  color: var(--th-form) !important;
}

.ui-cal-day:hover .ui-cal-day-blocked {
  background-color: var(--th-red) !important;
  color: white !important;
}

.ui-cal-day:hover .ui-cal-day-open {
  background-color: var(--th-purple) !important;
  color: white !important;
}

.ui-cal-day:hover {
  background-color: var(--th-purple);
  color: white !important;
}

.ui-cal-day-date {
  padding: 5px;
}

.ui-cal-day-day {
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--font-fat);
  font-size: 12px;
}

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

"@" - 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

???????????????????*/
.page_middle_ui-main {
  display: grid;
  grid-template-rows: 50px auto;
}

.page_middle_ui-body {
  display: grid;
  grid-template-columns: 50% 50%;
}

.page_middle_ui-body-body_card {
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  min-height: 100px;
  max-width: 400px;
}

.page_middle_ui-body-card {
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  min-height: 100px;
  max-width: 400px;
}

.page_middle_ui-menu {
  height: 100% !important;
  display: grid;
  grid-template-columns: 250px auto;
  overflow: hidden;
}

.page_middle_ui-menu-tag {
  height: 100% !important;
  color: rgb(255, 5, 67);
}

.page_middle_ui-menu-tag-text {
  display: inline-block !important;
  font-family: var(--font-ark) !important;
  font-size: 20px;
  padding-top: 1px;
  vertical-align: top;
}

.page_middle_ui-menu-tag-image {
  display: inline-block !important;
  height: 30px;
  width: auto;
  vertical-align: top;
  margin-right: 10px;
}

.page_middle_ui-menu-buttons {
  text-align: right !important;
  padding-right: 50px;
}

.page_middle_ui-menu-button {
  font-family: var(--font-button);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 14px;
  color: rgb(0, 0, 0);
  text-align: center;
  min-width: 100px;
  color: white;
  cursor: pointer;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
}

.page_middle_ui-info {
  padding: 10px;
}

.page_middle_ui-info-title {
  font-family: var(--font-ark);
  color: white;
  font-size: 32px;
  padding: 10px;
}

.page_middle_ui-info-info {
  font-family: var(--font-ali-thin);
  font-size: 24px;
  color: white;
  padding: 20px 0px 20px 10px;
}

.page_middle_ui-info-image {
  width: 80%;
  height: auto;
  margin: auto;
}

.page_middle_ui-body_card-title {
  color: pink;
  background: -webkit-linear-gradient(#2af598, #009efd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.page_middle_ui-body_card-title-name {
  font-family: var(--font-ark);
  text-align: center;
  padding: 10px 0px 10px 0px;
  font-size: 32px;
}

.page_middle_ui-body_card-title-message {
  font-family: var(--font-ark);
  text-align: center;
  font-size: 18px;
  padding: 10px 0px 20px 0px;
}

.page_middle_ui-single-info {
  font-size: 14px;
  padding: 10px;
  font-family: var(--font-ali);
  color: rgb(161, 159, 159);
}

.page_middle_ui-single-title {
  text-align: center;
}

.page_middle_ui-single-body {
  display: grid;
  grid-template-columns: 400px auto;
  max-width: 800px;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 50px;
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background-color: rgba(56, 49, 49, 0.15);
}

.page_middle_ui-single-body-left {
  background-image: linear-gradient(90deg, #e01646 0%, #a83289 100%);
}

.page_middle_ui-single-body-right {
  backdrop-filter: blur(10px);
  background-color: rgba(56, 49, 49, 0.15);
}

.page_middle_ui-single-title {
  text-align: center;
}

.page_middle_ui-single-title-image {
  height: 30px;
  display: inline;
  vertical-align: middle;
}

.page_middle_ui-single-title-text {
  font-family: var(--font-pacifico);
  font-size: 28px;
  display: inline;
  vertical-align: middle;
  margin-left: 10px;
  background: -webkit-linear-gradient(#ff51c5, #3c0de4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_middle_ui-mobile-menu {
  height: 100% !important;
  display: grid;
  grid-template-columns: 250px auto;
  overflow: hidden;
}

.page_middle_ui-mobile-menu-tag {
  height: 100% !important;
  color: rgb(255, 5, 67);
}

.page_middle_ui-mobile-menu-text {
  display: inline-block !important;
  font-family: var(--font-ark) !important;
  font-size: 20px;
  padding-top: 1px;
  vertical-align: top;
  background: -webkit-linear-gradient(#ff51c5, #3c0de4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_middle_ui-mobile-menu-tag-image {
  display: inline-block !important;
  height: 30px;
  width: auto;
  vertical-align: top;
  margin-right: 10px;
}

.page_middle_ui-mobile-menu-buttons {
  text-align: right !important;
  padding-right: 50px;
}

.page_middle_ui-mobile-menu-button {
  display: inline-block !important;
  font-family: var(--font-roboto-medium);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 14px;
  color: rgb(0, 0, 0);
  margin-right: 20px;
  min-width: 100px;
  color: rgb(255, 0, 64);
  cursor: pointer;
}

.page_middle_ui-single-info {
  font-size: 14px;
  padding: 10px;
  font-family: var(--font-ali);
  color: rgb(161, 159, 159);
}

.page_middle_ui-single-title {
  text-align: center;
}

.page_middle_ui-single-body {
  display: grid;
  grid-template-columns: 400px auto;
  max-width: 800px;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 50px;
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background-color: rgba(56, 49, 49, 0.15);
}

.page_middle_ui-single-body-left {
  background-image: linear-gradient(90deg, #e01646 0%, #a83289 100%);
}

.page_middle_ui-single-body-right {
  backdrop-filter: blur(10px);
  background-color: rgba(56, 49, 49, 0.15);
}

.page_middle_ui-single-title {
  text-align: center;
}

.page_middle_ui-single-title-image {
  height: 30px;
  display: inline;
  vertical-align: middle;
}

.page_middle_ui-single-title-text {
  font-family: var(--font-pacifico);
  font-size: 28px;
  display: inline;
  vertical-align: middle;
  margin-left: 10px;
  background: -webkit-linear-gradient(#ff51c5, #3c0de4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll-bar-none {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scroll-bar-none::-webkit-scrollbar {
  display: none;
}

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

.card-only {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.card-on-focus:focus {
  border: 1px solid black;
}

.bg-white {
  background-color: white;
}

.no-border {
  border: 0px !important;
}

.btn-focus:focus {
  outline: none;
  border-bottom: 5px solid var(--work-cl-focus) !important;
}

.inline {
  display: inline;
}

.inline-top {
  display: inline-block;
  vertical-align: top;
}

.font-text {
  font-family: var(--font-text);
}

.font-button {
  font-family: var(--font-button);
  text-transform: capitalize;
}

.font-heading {
  font-family: var(--font-heading);
}

.font-white {
  color: white;
}

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

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

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

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

.pointer {
  cursor: pointer;
}

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

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

.bg-black {
  background-color: black !important;
}

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

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

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

.txt {
  padding: 5px;
  font-family: var(--font-text);
}

.center {
  text-align: center;
}

.pointer {
  cursor: pointer;
}

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

.br-top {
  border-top: 1px solid var(--th-grey);
}

.br-left {
  border-left: 1px solid var(--th-grey);
}

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

.br-right {
  border-right: 1px solid var(--th-grey);
}

.br-r-5 {
  border-radius: 5px;
}

.br-r-10 {
  border-radius: 10px;
}

.card-dark {
  box-shadow: 0 4px 30px rgba(255, 255, 255, 0.1);
}

.bg-blur {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
}

.bg-blur-deep {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(500px);
}

.bg-blur-deep-dark {
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(500px);
}

.bg-blur-only {
  backdrop-filter: blur(5px);
}

@media only screen and (max-width: 665px) and (orientation: landscape) {
  .bg-blur-deep {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
  }

  .bg-blur-deep-dark {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
  }
}
@media only screen and (max-width: 665px) and (orientation: portrait) {
  .bg-blur-deep {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
  }

  .bg-blur-deep-dark {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
  }
}
.font-24 {
  font-size: 24px;
}

.font-12 {
  font-size: 12px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.padding-25 {
  padding: 25px;
}

.padding-10 {
  padding: 10px;
}

.padding-5 {
  padding: 5px;
}

.padding-0 {
  padding: 0px;
}

.margin-25 {
  margin: 25px;
}

.margin-10 {
  margin: 10px;
}

.margin-5 {
  margin: 5px;
}

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

.border-grey-border {
  border: 1px solid var(--th-grey-border) !important;
}

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

.h-10 {
  height: 10px;
}

.h-15 {
  height: 15px;
}

.h-5 {
  height: 5px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-left-20 {
  padding-left: 20px;
}

.padding-right-5 {
  padding-right: 5px;
}

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

.padding-right-20 {
  padding-right: 20px;
}

.padding-top-5 {
  padding-top: 5px;
}

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

.padding-top-20 {
  padding-top: 20px;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

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

.br-purple-bottom {
  border-bottom: 5px solid #2f22e3;
}

.br-fat-bottom {
  border-bottom: 5px solid var(--br-fat-bottom);
}

.section-border-top {
  border-top: 5px solid #2f22e3;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
}

.platform-mobile-portrait {
  visibility: visible;
}

.platform-mobile-landscape {
  visibility: visible;
}

.platform-mobile {
  visibility: visible;
}

.platform-mobile-tablet {
  visibility: visible;
}

.platform-tablet-portrait {
  visibility: visible;
}

.platform-tablet-landscape {
  visibility: visible;
}

.platform-tablet {
  visibility: visible;
}

.platform-pc {
  visibility: visible;
}

@media only screen and (max-width: 900px) and (orientation: landscape) {
  .platform-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile {
    visibility: visible !important;
  }

  .platform-mobile-tablet {
    visibility: visible !important;
  }

  .platform-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-landscape {
    visibility: visible;
    height: auto !important;
  }

  .platform-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (max-height: 900px) and (orientation: portrait) {
  .platform-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile {
    visibility: visible !important;
  }

  .platform-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-portrait {
    visibility: visible;
  }

  .platform-mobile-tablet {
    visibility: visible !important;
  }

  .platform-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-height: 900px) and (max-height: 1180px) and (min-width: 820px) and (orientation: portrait) {
  .platform-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet {
    visibility: visible !important;
  }

  .platform-mobile-tablet {
    visibility: visible !important;
  }

  .platform-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-portrait {
    visibility: visible;
  }

  .platform-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
  .platform-pc {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet {
    visibility: visible !important;
  }

  .platform-mobile-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-landscape {
    visibility: visible;
  }
}
@media only screen and (min-width: 1180px) and (orientation: landscape) {
  .platform-mobile-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-pc {
    visibility: visible !important;
  }

  .platform-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
@media only screen and (min-height: 1180px) and (orientation: portrait) {
  .platform-mobile-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-pc {
    visibility: visible !important;
  }

  .platform-mobile {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-mobile-landscape {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-portrait {
    visibility: hidden;
    height: 0px !important;
  }

  .platform-tablet-landscape {
    visibility: hidden;
    height: 0px !important;
  }
}
.homePage-ui-bg1 {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(5deg, rgb(0, 0, 0) 70%, rgb(9, 17, 121) 95%, rgb(255, 0, 215) 100%);
  z-index: -2;
  backdrop-filter: blur(10px);
}

.homePage-ui-bg2 {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
  backdrop-filter: blur(600000000px);
}

.homePage-ui-light-bg1 {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(180deg, rgb(10, 7, 55) 1%, rgb(255, 198, 228) 100%, rgb(255, 0, 9) 100%);
  z-index: -2;
  backdrop-filter: blur(10px);
}

.homePage-ui-light-bg2 {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
  backdrop-filter: blur(600000000px);
}

.dark-logo-gradient {
  background: linear-gradient(100deg, #ff143f, #ff00f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark-logo-text {
  background: linear-gradient(100deg, #ff143f, #ff00f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-ark);
}

.background-gradient-animation {
  background: linear-gradient(100deg, #F0009F, #E70101);
  background-size: 500% auto;
  animation: text-gradien 5s ease-in-out infinite alternate;
}

.background-gradient-animation-full {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  animation: animatedgradient 5s ease alternate infinite;
}

.background-gradient-animation-full-fast {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  animation: animatedgradient 3s ease alternate infinite;
}

.btn-focus-animated:focus {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  animation: animatedgradient 5s ease alternate infinite;
  outline: 0px !important;
  border: 0px !important;
}

.btn-focus-animated:hover {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  animation: animatedgradient 5s ease alternate infinite;
  border: 0px !important;
}

.background-gradient-animation-hover:hover {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  animation: animatedgradient 5s ease alternate infinite;
}

.text-gradient-animation {
  background: linear-gradient(100deg, #F0009F, #E70101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500% auto;
  animation: text-gradien 5s ease-in-out infinite alternate;
}

.text-gradient-animation-full {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedgradient 5s ease alternate infinite;
  background-size: 300% 300%;
}

.text-gradient-animation-full-fast {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

.text-gradient-animation-hover:hover {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedgradient 5s ease alternate infinite;
  background-size: 300% 300%;
}

.text-gradient-animation-hover:focus {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedgradient 5s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes text-gradien {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes bot-jump-short {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 3px;
    background: linear-gradient(100deg, #F0009F, #E70101);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes bot-jump {
  0% {
    margin-top: 10px;
  }
  50% {
    margin-top: 20px;
  }
  100% {
    margin-top: 10px;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: "block";
  }
}
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
  0% {
    opacity: 1;
    display: "block";
  }
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.gradient-border:focus {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:hover {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}