@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('font-awesome/css/all.min.css');

/*#region general*/
@font-face {
  font-family: 'Montserrat-Bold';
  src: url(../Montserrat/static/Montserrat-Bold.ttf);
}

@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url(../Montserrat/static/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url(../Montserrat/static/Montserrat-Regular.ttf);
}

@font-face {
  font-family: 'Montserrat-Light';
  src: url(../Montserrat/static/Montserrat-Light.ttf);
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url(../Montserrat/static/Montserrat-Medium.ttf);
}

@font-face {
  font-family: 'FontAwesome';
  src: url(font-awesome/webfonts/fa-solid-900.woff2);
}

@font-face {
  font-family: 'FontAwesome-Regular';
  src: url(font-awesome/webfonts/fa-regular-400.woff2);
}

:root {
  --softtec-dark-blue: #00305e;
  --softtec-medium-blue1: #4c6e8e;
  --softtec-medium-blue2: #7b94ab;
  --softtec-light-blue1: #e5ebef;
  --softtec-light-blue2: #f2f5f7;
  --softtec-grey: #cfcfcf;
  --softtec-red: red;
  --softtec-green: #719772;
  --softtec-field-border-color: #dbe2e8;
}

html {
  font-size: 0.625rem;
}

html, body {
  font-family: 'Montserrat-Regular', sans-serif;
  overscroll-behavior: none;
}

body {
  line-height: 1.4;
}

button, .btn, input, p, a, textarea, label, span, table, tr, td, th, thead, tbody, b, ol, li, ul, select, .form-control, div, .div > * {
  font-family: 'Montserrat-Regular', sans-serif;
  font-size: 1.6rem;
}

.fa-solid {
  font-family: 'FontAwesome' !important;
}

.fa-regular {
  font-family: FontAwesome-Regular !important;
}
/*#endregion*/

/*#region Gap*/
.gap-05 {
  gap: 0.5rem !important;
}

.gap-1 {
  gap: 1rem !important;
}

.gap-2 {
  gap: 2rem !important;
}

.gap-3 {
  gap: 3rem !important;
}
/*#endregion*/

/*#region scrollbar*/
.scrollable {
  overflow: auto !important;
}

::-webkit-scrollbar {
  display: none !important;
}
/*#endregion*/

/*#region TEXT COLORS*/
.white-text {
  color: white !important;
}

.dark-blue {
  color: var(--softtec-dark-blue) !important;
}

.medium-blue1 {
  color: var(--softtec-medium-blue1) !important;
}

.medium-blue2 {
  color: var(--softtec-medium-blue2) !important;
}

.light-blue1 {
  color: var(--softtec-light-blue1) !important;
}

.light-blue2 {
  color: var(--softtec-light-blue2) !important;
}

.grey {
  color: var(--softtec-grey) !important;
}

.green {
  color: var(--softtec-green) !important;
}

.red {
  color: var(--softtec-red) !important;
}
/*#endregion*/

/*#region Text ellipsis when too long*/
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-break {
  white-space: break-spaces !important;
  word-break: break-all !important;
  word-wrap: break-word !important;
}

.text-wrap {
  white-space: normal !important;
}

.word-break {
  word-break: break-word;
}

.no-wrap {
  white-space: nowrap;
}
/*#endregion*/

/*#region display, flex*/
.d-flex-center {
  display: flex !important;
  align-items: center;
}

.flex-direction-column {
  flex-direction: column;
}

.hidden {
  visibility: hidden !important;
}

.none {
  display: none !important;
}
/*#endregion*/

/*#region Loader*/
.loading {
  color: var(--softtec-dark-blue) !important;
  width: 100vw !important;
  font-family: 'Montserrat-Regular', sans-serif !important;
  font-size: 1.8rem !important;
}

  .loading::after {
    border-color: var(--softtec-dark-blue) var(--softtec-light-blue1) var(--softtec-light-blue1) !important;
  }

/*#endregion*/

/*#region blazor-error*/

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
/*#endregion*/

/*#region Popups Modal*/
.modal-header {
  color: var(--softtec-dark-blue);
}

  .modal-header.st-popup-header h3 {
    margin-bottom: 0;
  }

.modal-header, .modal-footer, .modal-content {
  border-color: #a5b7c6;
  border: 0;
}

.modal-content {
  min-width: 200px;
}

.modal-body {
  overflow: auto;
  min-height: 100px !important;
  max-height: 80vh !important;
  color: var(--softtec-medium-blue1);
  border-radius: 8px;
}

.blazored-modal {
  max-height: 90vh;
  max-width: 90vw;
  min-width: 200px;
  min-height: 100px;
  padding: 1rem !important;
}

.small-popup.modal-content {
  max-height: 100% !important;
  width: 100% !important;
}

.popup-body {
  background-color: var(--softtec-dark-blue)0d !important;
}

.st-popup-header:empty, .st-popup-footer:empty, .st-popup-header .modal-title:empty {
  display: none;
}

.st-popup .k-header {
  font-weight: bold;
  color: var(--softtec-dark-blue);
}

.st-popup .k-grid,
.st-popup .k-grid-aria-root {
  border-radius: 8px;
}

.st-popup .icon {
  height: 18px;
  margin-right: 10px;
}

.modal-body .k-grid .k-grid-aria-root, .k-grid:has(.k-toolbar) > .k-grid-aria-root {
  padding: 0 1rem 1rem 1rem;
}

.size-medium {
  max-width: 60vw !important;
  min-width: unset;
  width: fit-content;
}

.disabled {
  background-color: var(--softtec-grey) !important;
}

/*#endregion*/

/*#region BUTTONS*/
.btn-white {
  color: var(--softtec-medium-blue1);
  background-color: #fff;
  border: 1px solid var(--softtec-medium-blue1);
  min-height: 6rem;
  width: 14rem;
  border-radius: 3rem;
}

  .btn-white:hover {
    background-color: var(--softtec-medium-blue1);
    color: #fff;
    border-color: var(--softtec-medium-blue1);
  }

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: none;
}

.st-button {
  width: 180px;
  /*min-width: 180px;*/
  border-radius: 25px;
}

.btn-small {
  border-radius: 25px;
  min-width: 50px;
  width: 50px;
  height: 30px;
}

.btn-round {
  border-radius: 25px;
  width: 30px;
  height: 30px;
  min-width: 30px;
}

/*#endregion*/

/*#region PADDING STYLES*/
.padding-around {
  padding: 2rem !important;
}

.padding-around-10 {
  padding: 1rem !important;
}

.padding-x {
  padding: 0 2rem !important;
}

.padding-x-10 {
  padding: 0 1rem !important;
}

.padding-y {
  padding: 2rem 0 !important;
}

.padding-y-10 {
  padding: 1rem 0 !important;
}

.padding-left {
  padding-left: 2rem !important;
}

.padding-left-10 {
  padding-left: 1rem !important;
}

.padding-right {
  padding-right: 2rem !important;
}

.padding-right-10 {
  padding-right: 1rem !important;
}

.padding-top {
  padding-top: 2rem !important;
}

.padding-top-10 {
  padding-top: 1rem !important;
}

.padding-bottom {
  padding-bottom: 2rem !important;
}

.padding-bottom-10 {
  padding-bottom: 1rem !important;
}
/*#endregion*/

/*#region MARGIN STYLES*/
.margin-around {
  margin: 2rem !important;
}

.margin-around-10 {
  margin: 1rem !important;
}

.margin-x {
  margin: 0 2rem !important;
}

.margin-x-10 {
  margin: 0 1rem !important;
}

.margin-y-10 {
  margin: 1rem 0 !important;
}

.margin-left {
  margin-left: 2rem !important;
}

.margin-left-10 {
  margin-left: 1rem !important;
}

.margin-right {
  margin-right: 2rem !important;
}

.margin-right-10 {
  margin-right: 1rem !important;
}

.margin-top {
  margin-top: 2rem !important;
}

.margin-top-10 {
  margin-top: 1rem !important;
}

.margin-right {
  margin-right: 2rem !important;
}

.margin-bottom {
  margin-bottom: 2rem !important;
}

.margin-bottom-10 {
  margin-bottom: 1rem !important;
}

p {
  margin-bottom: 1rem;
}
/*#endregion*/

/*#region Validation*/
.error-msg-validation {
  text-align: center;
  color: var(--softtec-red);
}

.validation-message {
  display: none;
}

.show-validation .st-datepicker:has(.validation-message:not(:empty)) .border,
.show-validation .position-relative:has(.validation-message:not(:empty)) .border {
  border: 1px solid var(--softtec-red) !important;
}

.show-validation .st-checkbox:has(.validation-message:not(:empty)) label:after,
.show-validation .position-relative:has(.validation-message:not(:empty)) .st-checkbox-wrapper label:after,
.show-validation .conditions-checkbox .st-checkbox-label.error-msg:after,
.show-validation .checkbox-invalid label:after {
  font-family: 'FontAwesome';
  /*the calendar icon in FontAwesome */
  content: '\f071';
  color: var(--softtec-red);
  margin-left: 1rem;
  font-size: 2rem;
}

.st-checkbox-wrapper,
.st-checkbox {
  border: 1px solid var(--kiosk-input-border-color);
  border-radius: 3rem;
  width: 100%;
  padding-left: 2rem;
}

.form-check .form-check-input {
  margin-left: 0;
}

.conditions-checkbox .st-checkbox-label.error-msg {
  color: var(--softtec-medium-blue1) !important;
}

.conditions-checkbox {
  border: 1px solid var(--softtec-field-border-color);
  border-radius: .5rem;
  width: 100%;
  padding-left: 1rem;
}

 .invoice-services .conditions-checkbox .st-checkbox {
    border: none;
    border-radius: 0;
    width: fit-content;
    padding: 0;
  }

.show-validation .checkbox-invalid.st-checkbox,
.show-validation .checkbox-invalid .st-checkbox-wrapper {
  border: 1px solid var(--softtec-red) !important;
}
/*#endregion*/