/*#region font-types*/
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('../Montserrat/static/Montserrat-SemiBold.ttf');
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: url('../Montserrat/static/Montserrat-Bold.ttf');
}

@font-face {
  font-family: 'Montserrat-Light';
  src: url('../Montserrat/static/Montserrat-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../Montserrat/static/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../Montserrat/static/Montserrat-Regular.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);
}
/*#endregion*/

/*#region softtec colors and Fonts*/
:root {
  --doc-height: 100vh;
  --softtec-blue-background: #1b3b58;
  --softtec-dark-blue: #00305e;
  --softtec-medium-blue1: #4c6e8e;
  --softtec-transparent-medium-blue: #4c6e8e99;
  --softtec-medium-blue2: #7b94ab;
  --softtec-light-blue1: #e5ebef;
  --softtec-light-blue2: #f2f5f7;
  --softtec-light-blue-shadow: #a5b7c6;
  --softtec-grey: #cfcfcf;
  --softtec-red: red;
  --softtec-green: #719772;
  --softtec-swtich-light-red: #dc8b80;
  --softtec-swtich-red: #cd695d;
  --softtec-swtich-light-green: #a5bda5;
  --softtec-white: #ffffff;
  --softtec-field-border-color: #dbe2e8;
  --font-regular: Montserrat-Regular, Helvetica, Arial, sans-serif;
  --font-medium: Montserrat-Medium, Montserrat-Regular, Helvetica, Arial, sans-serif;
  --font-light: Montserrat-Light, Montserrat-Regular,Helvetica, Arial, sans-serif;
  --font-semibold: Montserrat-SemiBold, Montserrat-Regular, Helvetica, Arial, sans-serif;
  --font-bold: Montserrat-Bold,Montserrat-Regular, Helvetica, Arial, sans-serif;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
}

.fa-solid, .fa-regular {
  font-family: 'FontAwesome' !important;
}
/*#endregion*/

/*#region General*/
* {
  letter-spacing: 0.5px;
}

html {
  font-size: .625rem;
}

html, body {
  height: 100vh;
  scrollbar-width: none;
  font-family: var(--font-regular);
  height: var(--doc-height);
  max-height: 100vh;
}

body {
  margin: 0;
  font-size: var(--font-size-12);
  position: relative;
  line-height: unset !important;
}

button, .btn, span, label, p, a {
  font-size: var(--font-size-12);
}

p {
  margin: 0;
}
/*#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 Loader*/
.loading {
  color: var(--softtec-dark-blue) !important;
  width: 100vw !important;
  font-family: var(--font-regular) !important;
  font-size: var(--font-size-12) !important;
  height: 12rem !important;
}

  .loading::after {
    border-color: var(--softtec-dark-blue) var(--softtec-light-blue2) var(--softtec-light-blue2) !important;
  }

.loadingWrapper {
  z-index: 98 !important;
}
/*#endregion*/

/*#region buttons*/
.btn {
  height: 3rem;
  align-content: center;
}

  .btn:disabled {
    cursor: not-allowed;
    pointer-events: initial;
  }

  .btn:hover {
    color: unset;
  }

  button:focus:not(:focus-visible),
  .btn:hover, .btn:focus, .btn-check:focus + .btn {
    outline: 0;
    box-shadow: unset;
  }

button.disabled, button:disabled, .k-editor.telerik-blazor .k-button-group .k-button-solid:disabled {
  background-color: var(--softtec-grey);
  border: none;
  color: var(--softtec-dark-blue);
  cursor: not-allowed;
  pointer-events: unset !important;
  opacity: .65;
}

.btn-darkblue {
  background-color: var(--softtec-dark-blue);
  color: var(--softtec-white);
}

.btn-lightblue {
  border-radius: 2rem;
  min-width: 12rem;
}

.btn-mediumblue, .btn-lightblue {
  background-color: var(--softtec-medium-blue1);
  color: var(--softtec-white);
}

  .btn-lightblue:not(:disabled):hover,
  .btn-mediumblue:not(:disabled):hover {
    color: var(--softtec-white);
    background-color: var(--softtec-dark-blue);
  }

.btn-darkblue:not(:disabled):hover {
  color: var(--softtec-white);
  background-color: var(--softtec-medium-blue1);
}

.btn-white {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border-color: var(--softtec-medium-blue1);
}

  .btn-white:not(:disabled):hover {
    color: var(--softtec-white);
    background-color: var(--softtec-medium-blue1);
    border-color: var(--softtec-medium-blue1);
  }

.btn-round {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.btn-small {
  border-radius: 25px;
  min-width: 5rem;
  width: 5rem;
  height: 3rem;
}

/*#endregion*/

/*#region Validation*/
.error-msg {
  color: var(--softtec-red) !important;
}

.valid,
.invalid,
.valid.modified:not([type=checkbox]) {
  outline: unset;
}

.validation-message {
  display: none;
}

.show-validation .form-fields .invalid-value.border,
.show-validation .form-fields .invalid-value .st-datepicker-input,
.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-datepicker:has(.validation-message:not(:empty)) .border:hover,
  .show-validation .position-relative:has(.validation-message:not(:empty)) .border:hover {
    border: 1px solid transparent !important;
  }

.show-validation .position-relative:has(.validation-message:not(:empty)) .st-checkbox-wrapper label:after,
.show-validation .st-checkbox:has(.validation-message:not(:empty)) label:after,
.show-validation .conditions-checkbox .st-checkbox-label.error-msg:after,
.show-validation .checkbox-invalid label: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: 1.6rem;
}

.conditions-checkbox .st-checkbox-label.error-msg {
  color: var(--softtec-medium-blue1) !important;
  display: flex;
  align-items: center;
}

.conditions-checkbox .st-checkbox-label > a.error-msg {
  color: var(--softtec-medium-blue1) !important;
}
/*#endregion*/

/*#region st-checkbox + conditions-checkbox*/
.st-checkbox {
  border: 1px solid var(--softtec-field-border-color);
  border-radius: .5rem;
  width: 100%;
  padding-left: 1rem;
}

.conditions-checkbox {
  padding-left: 2rem !important;
  width: 100%;
  padding-left: 1rem;
  padding: 1rem;
  background-color: #f2f5f7;
  border-radius: 1rem;
  color: #00305e;
  font-size: 14px !important;
  margin-top: 1rem;
}


  .conditions-checkbox .st-checkbox {
    border: none;
    border-radius: 0;
    width: fit-content;
    padding: 0;
    height: unset;
  }

.conditions-checkbox {
  min-height: 3rem;
}

  .conditions-checkbox .st-checkbox-label {
    padding: .5rem .5rem .5rem 0;
    white-space: pre-wrap;
    flex: 1;
  }

    .conditions-checkbox .st-checkbox-label:hover {
      cursor: pointer;
    }
/*#endregion*/
