@charset "UTF-8";
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes animate-display-block {
  0% {
    opacity: 0;
  }
  80% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
0 - 480px:      Normal style
480px- 767px:   Phone landscape - small
768 - 1200px:   Tablet - desktop
1200 - 1600px:  Most desktops
1600+:          HD screens


$breakpoint argument choices:
- s
- m
- l
- xl

1em = 16px
*/
/* ==========================================================================
   # BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/subset-Roboto-Regular.woff2") format("woff2"), url("../fonts/subset-Roboto-Regular.ttf") format("truetype"), url("") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto Medium Regular"), local("Roboto-Medium"), url("../fonts/subset-Roboto-Medium.woff2") format("woff2"), url("../fonts/subset-Roboto-Medium.ttf") format("truetype"), url("") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/subset-Roboto-Bold.woff2") format("woff2"), url("../fonts/subset-Roboto-Bold.ttf") format("truetype"), url("") format("svg");
  font-weight: 700;
  font-style: normal;
}
/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 1em;
  /* [1] */
  line-height: 1.5;
  /* [1] */
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */
}

/* FLEX-BOX */
.o-flex {
  display: flex;
}

.o-flex--stretched {
  align-content: stretch;
}

/* CONTENT WRAPPER */
.o-wrapper {
  max-width: 1350px;
  padding: 0 75px;
  margin: 0 auto;
}
.o-wrapper--wide {
  max-width: 90%;
}

/* Common PAGE for most of the "front-page" file */
.o-page {
  min-height: calc(100vh - 180px);
  background-image: url("../images/kaz-map-dotted.svg"), linear-gradient(to bottom, #067CBE, #3fdde7 350px, white 350px);
  background-repeat: no-repeat;
  background-blend-mode: soft-light, normal;
  background-position: top right, center;
  padding-bottom: 2.5rem;
}

.o-page__title {
  height: 150px;
  display: flex;
  align-items: center;
  color: white;
  margin: 0;
  font-size: 32px;
  text-transform: unset;
  font-weight: 400;
}
.o-page__title--long {
  font-size: 20px;
}

.o-section {
  display: block;
}

.o-section--xxs {
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}

.o-section--xs {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.o-section--s {
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}

.o-section--m {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.o-section--l {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.o-section--xl {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.o-section--xxl {
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
}

/* ROW object */
.o-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.o-row--centered {
  justify-content: center;
}
.o-row--justified {
  justify-content: space-between;
}
.o-row--right {
  justify-content: flex-end;
}
.o-row--top {
  align-items: flex-start;
}
.o-row--middle {
  align-items: center;
}
.o-row--bottom {
  align-items: flex-end;
}

.o-row--xxs > .o-row__item:not(:last-child) {
  margin-right: 0.3125rem;
}

.o-row--xs > .o-row__item:not(:last-child) {
  margin-right: 0.625rem;
}

.o-row--s > .o-row__item:not(:last-child) {
  margin-right: 0.9375rem;
}

.o-row--m > .o-row__item:not(:last-child) {
  margin-right: 1.25rem;
}

.o-row--l > .o-row__item:not(:last-child) {
  margin-right: 1.875rem;
}

.o-row--xl > .o-row__item:not(:last-child) {
  margin-right: 2.5rem;
}

.o-row--xxl > .o-row__item:not(:last-child) {
  margin-right: 3.75rem;
}

.o-row__item--grow {
  flex: 1;
}

.o-row--equal > .o-row__item {
  flex: 1;
}

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

.o-column--justified {
  justify-content: space-between;
}

/* GRID SYSTEM */
.o-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.o-grid__cell {
  flex: 0 1 auto;
  width: 100%;
}
.o-grid__cell_child {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/**
 *  POSITION VARIATIONS:
 */
.o-grid--middle {
  align-items: center;
}

.o-grid--bottom {
  align-items: flex-end;
}

/**
 *  SIZE VARIATIONS:
 *
 *  This function will produce classes such as:
 *
 *  .o-grid--xs {
 *    margin-left: -10px;
 *  }
 *
 *  .o-grid--xs .o-grid__cell {
 *    padding-left: 10px;
 *  }
 */
.o-grid--xxs {
  margin-left: -0.3125rem;
}
.o-grid--xxs > .o-grid__cell {
  padding-left: 0.3125rem;
}

.o-grid--xs {
  margin-left: -0.625rem;
}
.o-grid--xs > .o-grid__cell {
  padding-left: 0.625rem;
}

.o-grid--s {
  margin-left: -0.9375rem;
}
.o-grid--s > .o-grid__cell {
  padding-left: 0.9375rem;
}

.o-grid--m {
  margin-left: -1.25rem;
}
.o-grid--m > .o-grid__cell {
  padding-left: 1.25rem;
}

.o-grid--l {
  margin-left: -1.875rem;
}
.o-grid--l > .o-grid__cell {
  padding-left: 1.875rem;
}

.o-grid--xl {
  margin-left: -2.5rem;
}
.o-grid--xl > .o-grid__cell {
  padding-left: 2.5rem;
}

.o-grid--xxl {
  margin-left: -3.75rem;
}
.o-grid--xxl > .o-grid__cell {
  padding-left: 3.75rem;
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets and any
 * indentation.
 *
 * Note: Declaring the item class might not be necessary everywhere,
 * but is for example in <dl> lists for the <dd> children.
 */
.o-list-bare {
  list-style: none;
  margin: 0;
}

.o-list-bare li,
.o-list-bare__item {
  margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
  margin: 0;
  list-style: none;
}

.o-list-inline__item {
  display: inline-block;
}

.o-dashboard .o-form__field,
.o-dashboard .o-faux-form-field,
.o-dashboard .o-form__field.ui-calendar input {
  height: 2.125rem;
}
.o-dashboard .o-faux-form-field {
  margin: 5px 0 15px;
  width: 100%;
}

.o-form__label {
  display: block;
  color: #8c95a0;
}
.o-form__label--inline {
  display: inline-block;
  margin-right: 20px;
}

.o-form__field {
  display: block;
  height: 34px;
  border: 1px solid #bbb;
  background-color: #f9fafc;
  border-radius: 5px;
  width: 100%;
  padding: 0 15px;
  font-size: 14px;
  line-height: 34px;
}
.o-form__field::placeholder {
  color: #bbb;
}
.o-form__field--disabled {
  background-color: #eff3fa;
  opacity: 1;
  color: #aaa;
}
.o-form__field, .o-form__field.ui-inputfield, .o-form__field.o-form-field--password {
  margin: 5px 0 15px;
}

.o-form__field.ui-calendar {
  padding: 0;
  margin-bottom: 0;
}
.o-form__field.ui-calendar input {
  height: 34px;
  width: 100%;
  padding: 0.625rem 0.9375rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

/* COMMON BUTTON object */
.o-btn,
.o-btn.ui-button {
  display: flex;
  align-items: center;
  padding: 0.9375rem;
  border-radius: 4px;
  background-color: #015986;
  color: white;
  font-size: 12px;
  transition: 0.3s all ease-out;
}
.o-btn:hover, .o-btn:focus,
.o-btn.ui-button:hover,
.o-btn.ui-button:focus {
  background-color: #006ba2;
  color: white;
}
.o-btn.is-disabled,
.o-btn.ui-button.is-disabled {
  background-color: #ccdee7;
}

.o-btn--centered {
  justify-content: center;
}

.o-btn .fa,
.o-btn__icon {
  margin: 0;
  margin-right: 0.625rem;
}

/* PANEL (BOX) object */
.o-panel {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.12);
}
.o-panel:hover {
  box-shadow: 0 10px 20px -6px #aac4f866;
}

.o-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.o-panel__title {
  font-size: 24px;
  font-weight: bold;
  color: #203179;
  margin: 0;
}
.o-panel__title--small {
  font-size: 14px;
}

.o-panel__help-text {
  color: #979797;
  margin-bottom: 20px;
  display: block;
  font-size: 14px;
  margin-top: -20px;
}
.o-panel__help-text,
.o-panel__help-text p {
  color: #63799f;
  font-size: 16px;
  line-height: 1.3;
}

.o-panel__help {
  background-color: #eff3fa;
  padding: 1.25rem;
  border-radius: 5px;
}

.o-panel__divider {
  margin: 0 -40px;
  padding: 0 40px;
}
.o-panel__divider--top {
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
.o-panel__divider--bottom {
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.o-panel--xxs {
  padding: 0.3125rem;
}
.o-panel--xxs .o-panel__header {
  margin: -0.3125rem -0.3125rem 0.3125rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}

.o-panel--xs {
  padding: 0.625rem;
}
.o-panel--xs .o-panel__header {
  margin: -0.625rem -0.625rem 0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.o-panel--s {
  padding: 0.9375rem;
}
.o-panel--s .o-panel__header {
  margin: -0.9375rem -0.9375rem 0.9375rem;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.o-panel--m {
  padding: 1.25rem;
}
.o-panel--m .o-panel__header {
  margin: -1.25rem -1.25rem 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.o-panel--l {
  padding: 1.875rem;
}
.o-panel--l .o-panel__header {
  margin: -1.875rem -1.875rem 1.875rem;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.o-panel--xl {
  padding: 2.5rem;
}
.o-panel--xl .o-panel__header {
  margin: -2.5rem -2.5rem 2.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.o-panel--xxl {
  padding: 3.75rem;
}
.o-panel--xxl .o-panel__header {
  margin: -3.75rem -3.75rem 3.75rem;
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

/* FLAG PANEL (panel with the sidebar) */
.o-flag-panel {
  display: flex;
  align-items: stretch;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  min-height: 30rem;
  color: #63799f;
}
.o-flag-panel:hover {
  box-shadow: 0 10px 20px -6px #aac4f866;
}
.o-flag-panel, .o-flag-panel__text {
  color: #63799f;
}

.o-flag-panel__body {
  flex: 1;
  border-radius: 0 10px 10px 0;
  padding: 2.5rem;
  background-color: white;
}

.o-flag-panel__sidebar {
  min-width: 15.625rem;
  max-width: 33%;
  border-radius: 10px 0 0 10px;
  background-color: #203179;
  background-image: linear-gradient(to right, #0b2656, #0b2656 60px, #203179 60px);
}

.o-flag-panel__sidebar--simple {
  background-image: none;
  background-color: #203179;
}

.o-flag-panel__sidebar--simple .o-flag-panel__tab {
  min-height: 3.75rem;
  height: 3.75rem;
  padding: 1.25rem;
}
.o-flag-panel__sidebar--simple .o-flag-panel__tab.active, .o-flag-panel__sidebar--simple .o-flag-panel__tab:hover {
  background-image: none;
  background-color: #51a4d2;
}

.o-flag-panel__tab {
  display: flex;
  align-items: center;
  color: #abbbff;
  border-bottom: 1px solid #0e1e5e;
}
.o-flag-panel__tab.active, .o-flag-panel__tab:hover {
  color: white;
  background-image: linear-gradient(to right, #0d63cb, #0d63cb 60px, #51a4d2 60px);
}
.o-flag-panel__tab:first-child {
  border-top-left-radius: 10px;
}

.o-flag-panel__tab--empty {
  min-height: 3.75rem;
  height: 3.75rem;
  padding: 1.25rem;
  background-color: #0b2656;
  text-transform: uppercase;
}
.o-flag-panel__tab--empty:hover {
  background-image: none;
  color: #abbbff;
}

.o-flag-panel__tab--dark {
  background-color: #0b2656;
}

.o-flag-panel__number {
  min-width: 3.75rem;
  width: 3.75rem;
  min-height: 3.75rem;
  height: 3.75rem;
  line-height: 3.75rem;
  text-align: center;
  font-size: 18px;
  color: inherit;
}

.o-flag-panel__link {
  padding: 0.625rem 1.25rem;
  font-size: 14px;
  color: inherit;
  transition: none;
}

.o-flag-panel__title {
  color: #203179;
  font-size: 32px;
  margin: 0 0 2.5rem;
}

.o-box {
  display: block;
  background-color: white;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.12);
}
.o-box:hover {
  box-shadow: 0 10px 20px -6px #aac4f866;
}

.o-box--xxs {
  padding: 0.3125rem;
}

.o-box--xs {
  padding: 0.625rem;
}

.o-box--s {
  padding: 0.9375rem;
}

.o-box--m {
  padding: 1.25rem;
}

.o-box--l {
  padding: 1.875rem;
}

.o-box--xl {
  padding: 2.5rem;
}

.o-box--xxl {
  padding: 3.75rem;
}

/* Buttons - Bootstrap overrides */
.form-control,
.input-group-addon {
  border-radius: 0 !important;
}

.btn:hover {
  background: transparent;
}

.btn.btn-default {
  text-align: left;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  background: #028cbb;
  text-shadow: none !important;
  display: inline-block;
  padding: 0 20px 0 0;
  overflow: hidden;
}

.btn.btn-default:hover {
  background: #029bcf !important;
  color: #fff !important;
}

.btn.btn-default:active {
  background: #02a3d9 !important;
  color: #fff !important;
  position: relative;
  top: 1px;
  box-shadow: none;
}

.btn.btn-default:active .fa {
  background: #02a3d9;
  transform: translateX(2px);
  transition: 0.3s ease all;
}

.btn.btn-default .fa {
  margin-right: 5px;
  margin-left: 0;
  background: #029bcf;
  padding: 14px;
  transform: translateX(0px);
  transition: 0.3s ease all;
}

.o-dashboard .btn-info {
  background-color: #0472c1;
  border-color: #0472c1;
}
.o-dashboard .btn-info:hover {
  background-color: #0363a8;
  border-color: #0363a8;
}

/****** end of Bootstrap overrides *********/
.loader-block {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f6f6f6;
  z-index: 999999;
}

.loader2 {
  text-indent: -9999em;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
}

.sk-circle {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #2FBCCD;
  border-radius: 100%;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
  transform: rotate(30deg);
}
.sk-circle .sk-circle2::before {
  animation-delay: -1.1s;
}

.sk-circle .sk-circle3 {
  transform: rotate(60deg);
}
.sk-circle .sk-circle3::before {
  animation-delay: -1s;
}

.sk-circle .sk-circle4 {
  transform: rotate(90deg);
}
.sk-circle .sk-circle4::before {
  animation-delay: -0.9s;
}

.sk-circle .sk-circle5 {
  transform: rotate(120deg);
}
.sk-circle .sk-circle5::before {
  animation-delay: -0.8s;
}

.sk-circle .sk-circle6 {
  transform: rotate(150deg);
}
.sk-circle .sk-circle6::before {
  animation-delay: -0.7s;
}

.sk-circle .sk-circle7 {
  transform: rotate(180deg);
}
.sk-circle .sk-circle7::before {
  animation-delay: -0.6s;
}

.sk-circle .sk-circle8 {
  transform: rotate(210deg);
}
.sk-circle .sk-circle8::before {
  animation-delay: -0.5s;
}

.sk-circle .sk-circle9 {
  transform: rotate(240deg);
}
.sk-circle .sk-circle9::before {
  animation-delay: -0.4s;
}

.sk-circle .sk-circle10 {
  transform: rotate(270deg);
}
.sk-circle .sk-circle10::before {
  animation-delay: -0.3s;
}

.sk-circle .sk-circle11 {
  transform: rotate(300deg);
}
.sk-circle .sk-circle11::before {
  animation-delay: -0.2s;
}

.sk-circle .sk-circle12 {
  transform: rotate(330deg);
}
.sk-circle .sk-circle12::before {
  animation-delay: -0.1s;
}

.itms-image {
  background: url("../images/03_itms.svg") no-repeat;
}

.cust-auth-image {
  background: url("../svg/02-customs_authorisation-01.svg") no-repeat;
}

.astana-image {
  background: url("../images/01-astana-1.svg") no-repeat;
}

.cust-reports-image {
  background: url("../svg/04-customs_reports_statistics.svg") no-repeat;
}

.astana-image2 {
  background: url("../images/astana-1-icon.svg") no-repeat;
}

.e-lic-image {
  background: url("../images/e-licenses.svg") no-repeat;
}

.e-customs-image {
  background: url("../images/e-customs.svg") no-repeat;
}

.cust-des-image {
  background: url("../images/customs_decisions.svg") no-repeat;
}

.e-services-image {
  background: url("../images/e-services.svg") no-repeat;
}

.itms2-image {
  background: url("../images/astana-1-icon.svg") no-repeat;
}

/******** TOP MENU NAVIGATION *******/
.top-menu {
  display: flex;
  height: 180px;
  background-color: #067CBE;
  position: relative;
  z-index: 20;
}

.top-menu__controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  padding: 30px 15px 0 15px;
  width: 350px;
  flex: 1 0 auto;
}

.top-menu__title {
  font-size: 14px;
  color: white;
  margin: 0;
  font-weight: 500;
}

.top-menu__button {
  height: 45px;
  background-color: #015986;
  display: flex;
  align-items: center;
  flex: 2;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s background-color ease-out;
}
.top-menu__button, .top-menu__button:visited, .top-menu__button a {
  color: white;
}
.top-menu__button:hover {
  background-color: #004C79;
}

.top-menu__button--inverse {
  background-color: #dce3ed;
  color: #015986;
}
.top-menu__button--inverse:hover {
  background-color: #CFD6E0;
  color: #015986;
}

.top-menu__button:not(.top-menu__button--square) .fa {
  margin-right: 5px;
}

.top-menu__button--square {
  justify-content: center;
  max-width: 45px;
}
.top-menu__button--square .fa {
  font-size: 20px;
}

.top-menu__button--dark {
  background-color: #153766;
  flex: 1;
}
.top-menu__button--dark:hover {
  background-color: #082A59;
}

.top-menu__button:not(.top-menu__button--dark) {
  margin-right: 10px;
}

/**
 * LEGISLATION AND REGULATION (legislation-regulation.xhtml)
 */
.filter-list-con {
  margin: 0;
  padding: 0;
}

.filter-list-con li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leg-filter-search {
  margin-bottom: 10px;
}

.leg-filter-search input[type=text] {
  height: 70px;
  width: 100%;
  padding: 15px;
  border: 1px solid #c8d3e7;
  border-radius: 5px;
  background-color: #f9fafc;
  color: #203179;
  font-size: 16px;
  position: relative;
}

.leg-filter-search input[type=text]::placeholder {
  font-size: 14px;
  color: #c8d3e7;
}

.link-btn {
  padding: 20px;
  min-height: 70px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  background-color: #eff3fa;
  color: #015986;
  border-radius: 5px;
}

.link-btn:hover {
  background: #E7EDF7;
  color: #015986;
}

.link-btn:hover .fa {
  color: inherit;
}

.link-btn .fa {
  font-size: 18px;
  color: inherit;
  margin-right: 12px;
}

.link-btn--tab {
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  background: rgba(47, 188, 205, 0.2);
  border-color: white;
}

@media screen and (min-width: 768px) {
  .link-btn--tab {
    width: 50%;
  }
}
.link-btn--tab.active {
  color: #edc44a;
  border-color: #edc44a;
  background: transparent;
}

.link-btn--tab.active .fa {
  transform: rotate(90deg);
  transition: transform 0.1s ease-in;
}

/************** END OF LEGISLATION AND REGULATION ************/
/**
 *  QUOTA TABLE
 *  (quota-information.xhtml)
 *
 *  TODO: re-write HTML and delete the following styles
 */
.quota-table {
  border: none;
}

.quota-table tbody tr td {
  background: #f0f0f0;
  border: 1px solid #fff;
  text-align: right;
}

.quota-table tbody tr td.text {
  text-align: left;
}

.quota-table tbody tr.head {
  font-weight: 700;
}

.quota-table tbody tr.head td {
  vertical-align: middle;
  font-weight: 700;
  background: #2fbccd !important;
  color: #fff;
}

@media (max-width: 1280px) {
  .quota-table tbody tr td {
    width: inherit !important;
  }
}
.blue-1 {
  color: #000;
  background: #c3cad0 !important;
}

.blue-1 strong {
  color: #000;
}

.blue-2 {
  color: #000;
  background: #aab1b7 !important;
}

.blue-2 strong {
  color: #000;
}

.blue-3 {
  color: #000;
  background: #8d97a0 !important;
}

.blue-3 strong {
  color: #000;
}

/***************** END OF QUOTA TABLE ***********************/
/************* FOOTER related styles ***********/
.footer {
  padding: 30px 0 10px;
  background-color: white;
  color: #4f4f4f;
}

.footer p {
  color: inherit;
}

.footer h5 {
  text-transform: uppercase;
  color: #00479a;
  font-weight: 700;
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  font-size: 14px;
}

.footer .btn {
  background-color: #153766;
  display: flex;
  align-items: center;
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
}

.footer .btn:not(:last-of-type) {
  margin-bottom: 10px;
  background-color: #015986;
}

.footer .btn .fa {
  color: white;
  padding: 0 10px 0 15px !important;
  background: none;
  font-size: 16px;
}

.footer .btn:hover .fa {
  color: #fff !important;
}

.footer-nav ul {
  margin-bottom: 0;
}

.footer__content {
  margin-bottom: 50px;
}

.footer__content a {
  color: #4f4f4f;
  font-size: 12px;
}

.footer__content a:hover {
  color: #015986;
}

.copyright {
  font-size: 10px;
  padding: 10px 0;
  display: inline-block;
  text-align: center;
  flex: 1;
  color: inherit;
}

.copyright a {
  color: inherit;
}

.footer__legal {
  border-top: 1px solid rgba(32, 32, 32, 0.1);
  padding-top: 10px;
}

@media screen and (min-width: 1024px) {
  .footer__legal {
    display: flex;
  }
}
.footer-nav {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .footer-nav {
    margin-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .footer-nav {
    justify-content: flex-start;
    align-items: center;
  }

  .copyright {
    text-align: left;
  }
}
.footer-nav__item {
  margin-bottom: 0;
}

.footer-nav__item:not(:last-child) {
  margin-right: 15px;
}

.footer-nav a {
  display: block;
  color: inherit;
  text-transform: capitalize;
  font-size: 10px;
  padding: 3px 3px;
  letter-spacing: -0.3px;
}

/************* END OF FOOTER ****************/
/*Top bar*/
.top-header {
  background: white;
  padding-top: 0;
  padding-bottom: 0;
  color: #1d3f5c;
  width: 100%;
  display: inline-block;
}

.top-header a {
  float: left;
  display: inline-block;
  color: #a6a6a6;
  text-decoration: none;
}

.top-header .welcome-msg span {
  float: left;
  display: inline-block;
}

.top-header .welcome-msg > span {
  padding-top: 10px;
  padding-right: 20px;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .top-header .welcome-msg > span {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 20px;
  }
}
.top-header .welcome-msg > span:first-child {
  margin-left: 30px;
}

@media (max-width: 1400px) {
  .top-header .welcome-msg > span:first-child {
    margin-left: 52px;
  }
}
.btn-top-holder {
  float: right;
  display: block;
}

@media (max-width: 1000px) {
  .btn-top-holder {
    width: 100%;
  }
}
/*Language switcher*/
.lang-switcher {
  float: right;
  display: block;
  width: auto;
  position: relative;
}

.lang-switcher .submenu {
  display: none;
}

.lang-switcher:hover .submenu {
  display: block;
}

@media (max-width: 1000px) {
  .lang-switcher {
    width: 10%;
  }
}
.lang-switcher .default {
  padding: 12px 20px 12px 14px;
  color: #1d3f5c !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.lang-switcher .submenu {
  text-align: center;
  position: absolute;
  top: 40px;
  background: #f2f2f2;
  left: 0;
  width: 66px;
  z-index: 9997;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.lang-switcher .submenu a {
  color: #1d3f5c !important;
  text-align: center;
  text-decoration: none;
  padding: 16px;
  width: inherit;
  font-size: 13px;
  font-weight: 700;
}

.lang-switcher .submenu a {
  color: #1d3f5c;
  transition: 0.3s all ease;
}

.lang-switcher .submenu a.ru {
  background: #d32f24;
}

.lang-switcher .submenu a.ru:hover {
  background: #E44338;
}

.lang-switcher .submenu a.kk {
  background: #25acc8;
}

.lang-switcher .submenu a.kk:hover {
  background: #2BBCDA;
}

/*Top bar Profile Button, Logout Button*/
.prof-btn .icon,
.prof-btn .text,
.my-logout-btn .icw-sidebaron,
.my-logout-btn .text {
  color: #1d3f5c;
  font-size: 14px;
  font-weight: 700;
}

.my-profile-btn,
.my-logout-btn {
  padding: 10px 20px 10px 0;
}

.my-profile-btn:focus,
.my-logout-btn:focus {
  text-decoration: none;
}

.my-profile-btn:hover,
.my-logout-btn:hover {
  box-shadow: 0 4px 0 #2fbccd;
}

.my-logout-btn:hover {
  box-shadow: 0 4px 0 #d4ea1d;
}

@media (max-width: 1000px) {
  .my-profile-btn, .my-logout-btn {
    width: 45%;
  }
}
.my-profile-btn .icon, .my-logout-btn .icon {
  margin-left: 10px;
  margin-right: 10px;
}

.my-profile-btn {
  color: #1d3f5c;
}

.my-logout-btn {
  color: #1d3f5c;
}

.prof-btn {
  display: block;
  color: #fff;
}

@media (max-width: 1400px) {
  .layout-content {
    margin-left: 0;
  }
}
/*Blue sidebar*/
.layout-left .menu {
  padding-left: 0;
  display: none;
  margin: 5px 0 5px 10px;
  border-left: 2px solid #0472c1;
}

.layout-left .menu li {
  margin-left: 0;
  list-style: none;
}

.layout-left .menu li ul {
  margin: 0;
  padding-left: 0;
}

.layout-left .menu li ul li,
.layout-left .menu li ul li ul li {
  margin-left: 0;
  border-bottom: 0;
}

.layout-left .menu li ul li a {
  border-left: 6px solid #0472c1;
  border-bottom: 0;
}

.layout-left .menu li ul li a:hover {
  border-left: 7px solid #0472c1;
  border-bottom: 0;
}

.layout-left .menu li ul li a.active,
.layout-left .menu li ul li a.active:hover {
  border-left: 6px solid #0472c1;
  border-bottom: 0;
}

.layout-left .menu li ul li ul li a,
.layout-left .menu li ul li ul li a:hover,
.layout-left .menu li ul li ul li a.active,
.layout-left .menu li ul li ul li a.active:hover {
  border-left: 8px solid #0472c1;
}

.layout-left .menu li ul li ul li ul li {
  border-bottom: 0;
}

.layout-left .menu li ul li ul li ul li a {
  border-left: 12px solid #142e44;
}

.layout-left .menu li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #1d3f5c;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: #c4c8cc;
  padding-left: 35px;
}

/*Lvl2 in sidebar*/
.sub-menu {
  display: none;
}

.sub-menu-link {
  cursor: pointer;
}

.sub-menu li a {
  text-decoration: none;
  padding: 10px 20px;
  color: #1d3f5c;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: #c4c8cc;
  padding-left: 45px !important;
  display: none;
  transition: 0.2s ease all;
}

.sub-menu li a:hover {
  padding-left: 42px;
  transition: 0.2s ease all;
  border-width: 1px;
}

.sub-menu-link .fa {
  margin-right: 7px !important;
}

.layout-left .menu li a:hover {
  background: #c4c8cc;
  color: #142e44;
  border-left: 3px solid #142e44;
}

.layout-left .menu li a.active {
  background: #dedede;
  font-weight: 700;
  color: #142e44;
  border-left: 3px solid #142e44;
}

.layout-left .menu li a.current {
  background-color: #ebebeb;
  color: #555555;
}

.layout-left .menu li a > .fa {
  margin-right: -11px !important;
  position: relative;
  left: -22px;
}

.layout-left .section-title {
  text-decoration: none;
  padding: 10px 15px;
  color: #1d3f5c;
  font-weight: 400;
  border: 0;
  text-transform: initial;
  background: #fff;
  cursor: pointer;
  padding-left: 37px;
  position: relative;
  font-size: 13px;
  display: flex;
  align-items: center;
  height: 70px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
}

.layout-left .section-title.active .fa-arrow-right {
  transform: rotate(90deg);
  color: #142e44;
}

.layout-left .section-title .fa {
  margin-left: 5px;
  margin-right: 5px;
  color: #96a2ae;
}

.layout-left .section-title > .fa {
  position: relative;
  top: -1px;
  left: -29px;
  margin-right: -20px;
}

.layout-left .section-title.active {
  background: #f1f1f1;
}

.menu-block-last {
  display: none;
  /* temporarily hide as part of task KS-421 */
  color: #1d3f5c;
  padding: 20px;
  background-color: #F9FBFD;
}

.menu-block-last .align-right {
  text-align: right;
  float: right;
  font-weight: 700;
}

.menu-block .badge {
  font-size: 0.75em;
  background-color: #fff;
  color: #142e44;
}

.menu-block .current .badge {
  color: #0472c1;
  background-color: #fff;
}

.menu-block .menu .section-title > .fa,
.menu-block .menu li .sub-menu-link > .fa,
.menu-block .menu li a > .fa {
  color: #0472c1;
}

.menu-block {
  border: 0;
  width: 90%;
  margin: 10px auto;
}

.menu-block .section-title.active,
.menu-block .section-title.active .fa {
  background-color: #0472c1;
  color: white;
}

.menu-block .section-title:hover {
  background-color: #eff3fa;
  color: #454545;
}

.menu-block .section-title.active:hover {
  background-color: #0472c1;
  color: white;
}

.menu-block .section-title > .fa {
  color: #0472c1;
}

.menu-block .menu .section-title,
.menu-block .menu li .sub-menu-link,
.menu-block .menu li a {
  background: #f1f1f1 !important;
}

.menu-block .menu .section-title:hover,
.menu-block .menu li .sub-menu-link:hover,
.menu-block .menu li a:hover {
  background: rgba(47, 188, 205, 0.08) !important;
}

.menu-block .menu li .sub-menu-link:hover,
.menu-block .menu li > a {
  border-bottom: 1px solid rgba(34, 135, 147, 0.1) !important;
}

.menu-disabled .section-title,
.menu-disabled .section-title .fa {
  color: #bcc1d7;
}

.menu-disabled .section-title:hover,
.menu-disabled .section-title:hover .fa {
  background-color: white;
  color: #bcc1d7;
  cursor: default;
}

/*Mega menu*/
.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  z-index: 4000;
  background: rgba(5, 22, 29, 0.7);
}

.menu > ul:before, .menu > ul:after {
  content: "";
  display: table;
}

.menu > ul:after {
  clear: both;
}

.menu > ul > li {
  float: left;
  padding: 0;
  margin: 0;
}

.menu > ul > li .fa {
  color: #fff;
  position: absolute;
  right: -5px;
  bottom: 17px;
  font-size: 10px;
}

.menu > ul > li a {
  text-decoration: none;
  padding: 15px 10px;
  display: flex;
  align-items: flex-start;
  color: #fff;
  margin: auto;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  position: relative;
}

@media screen and (max-width: 1550px) {
  .menu > ul > li a {
    font-size: 8px;
  }
}
@media screen and (max-width: 1380px) {
  .menu > ul > li a {
    font-size: 7px;
  }
}
.menu > ul > li:hover {
  background: rgba(5, 22, 29, 0.96);
  color: #fff;
}

.menu > ul > li > ul {
  display: none;
  width: 100%;
  background: rgba(5, 22, 29, 0.96);
  padding: 10px;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.menu > ul > li > ul:before, .menu > ul > li > ul:after {
  content: "";
  display: table;
}

.menu > ul > li > ul:after {
  clear: both;
}

.menu > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}

.menu > ul > li > ul > li a {
  color: #fff;
  padding: 5px 0;
  width: 95%;
  display: block;
  border-bottom: 1px solid #ccc;
  text-transform: none;
  font-size: 14px;
  font-weight: normal;
}

.menu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}

.menu > ul > li > ul > li > ul:after {
  clear: both;
}

.menu > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  padding: 0 0;
  margin: 0;
}

.menu > ul > li > ul > li > ul > li a {
  border: 0;
  background: rgba(5, 22, 29, 0.5);
  padding: 5px 10px;
}

.menu > ul > li > ul > li > ul > li a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.menu > ul > li > ul.normal-sub {
  width: 300px;
  left: auto;
  padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.menu > ul > li > ul.normal-sub > li {
  width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
  border: 0;
  padding: 1em 0;
  margin-left: 0;
  padding-left: 5px;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 959px) {
  .menu-container {
    width: 100%;
  }

  .menu-mobile {
    display: block;
  }

  .menu-dropdown-icon:before {
    display: block;
  }

  .menu > ul {
    display: none;
  }

  .menu > ul > li {
    width: 100%;
    float: none;
    display: block;
  }

  .menu > ul > li a {
    padding: 1.5em;
    width: 100%;
    display: block;
  }

  .menu > ul > li > ul {
    position: relative;
  }

  .menu > ul > li > ul.normal-sub {
    width: 100%;
  }

  .menu > ul > li > ul > li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }

  .menu > ul > li > ul > li:first-child {
    margin: 0;
  }

  .menu > ul > li > ul > li > ul {
    position: relative;
  }

  .menu > ul > li > ul > li > ul > li {
    float: none;
  }

  .menu .show-on-mobile {
    display: block;
  }
}
.homepage-panel {
  background-color: white;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 2px 2px 10px rgba(47, 83, 151, 0.2);
}
.homepage-panel .ui-column-title {
  font-size: 12px;
}

.homepage-panel__button {
  height: 34px;
  background-color: transparent;
  color: #0472c1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  text-transform: uppercase;
}
.homepage-panel__button.ui-button {
  border: 1px solid #0472c1;
}
.homepage-panel__button:not(:last-child) {
  margin-right: 5px;
}
.homepage-panel__button .ui-icon.fa {
  position: relative;
  margin: 0;
  color: #0472c1;
}
.homepage-panel__button .ui-button-text {
  padding: 0;
  padding-left: 20px;
}

.homepage-panel h2 {
  border-bottom: 1px solid rgba(29, 63, 92, 0.2);
  padding-left: 0;
  padding-bottom: 10px;
  font-size: 16px;
  color: #1d3f5c;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 15px;
  display: block;
}

.homepage-panel h2 a {
  color: #1d3f5c;
  text-decoration: none;
}

.homepage-panel h2 a:hover {
  text-decoration: underline;
  color: #027da7;
}

@media (max-width: 1445px) {
  .homepage-panel h2 {
    font-size: 14px;
  }
}
@media (max-width: 1280px) {
  .homepage-panel h2 {
    font-size: 12px;
  }
}
.homepage-panel-item {
  position: relative;
  padding: 10px 20px 10px 180px;
  background-color: #e0e0e1;
  color: #1d3f5c;
  border: 1px solid #1d3f5c;
  margin-bottom: -1px;
}

.homepage-panel-item:hover {
  background: #edebec;
}

.homepage-panel-item a {
  color: #1d3f5c;
}

.homepage-panel-item a:hover {
  color: #1d3f5c;
}

.homepage-panel-type {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #1d3f5c;
  color: #fff;
  padding: 10px;
  width: 30px;
  z-index: 114;
  border-right: 1px solid #1d3f5c;
}

.homepage-panel-type .glyphicon-check {
  color: #5ba238;
}

.homepage-panel-type .glyphicon-unchecked {
  color: #f09111;
}

.homepage-panel-type .glyphicon-exclamation-sign {
  color: #E20505;
}

.homepage-panel-type .glyphicon-time {
  color: #f09111;
}

.homepage-panel-type {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #c9ccd1;
  color: #fff;
  padding: 10px;
  width: 35px;
  z-index: 114;
  border-right: 1px solid #16252c;
}

.homepage-panel-type .glyphicon {
  font-size: 15px;
  top: 4px;
}

.homepage-panel-type .glyphicon-check {
  color: #5ba238;
}

.homepage-panel-type .glyphicon-unchecked {
  color: #f09111;
}

.homepage-panel-type .glyphicon-exclamation-sign {
  color: #E20505;
}

.homepage-panel-type .glyphicon-time {
  color: #f09111;
}

.homepage-panel-ref {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #c8ccd1;
  color: #555555;
  padding: 5px 15px 5px 40px;
  width: 175px;
  z-index: 111;
  border-right: 1px solid #16252c;
}

.homepage-panel-ref a {
  color: #1d3f5c;
  text-decoration: none;
  display: block;
  position: relative;
  top: 6px;
}

.homepage-panel-meta {
  color: #1d3f5c;
}

/*Dashboard table */
.kaz-datatable-dashboard {
  margin-bottom: 20px;
}

.kaz-datatable-dashboard .ui-widget-header .ui-datatable-scrollable-header-box table thead tr th,
.kaz-datatable-dashboard .ui-datatable-tablewrapper table thead tr th {
  color: #1d3f5c;
  text-align: left;
  border: 1px solid rgba(46, 91, 255, 0.08);
  font-weight: bold;
  background-color: #f6f6f6;
}

.kaz-datatable-dashboard .ui-paginator.ui-paginator-bottom {
  border: none;
  background: #fff;
  border-bottom: 1px solid rgba(46, 91, 255, 0.08);
  border-left: 1px solid rgba(46, 91, 255, 0.08);
  border-right: 1px solid rgba(46, 91, 255, 0.08);
  margin-right: 1px;
}

.kaz-datatable-dashboard .ui-datatable-tablewrapper {
  overflow: auto;
}

.kaz-datatable-dashboard table {
  border-collapse: collapse !important;
}

.kaz-datatable-dashboard table tbody tr {
  border-left: 1px solid rgba(46, 91, 255, 0.08) !important;
  border-right: 1px solid rgba(46, 91, 255, 0.08) !important;
}

.kaz-datatable-dashboard table tbody tr.ui-datatable-selectable:hover td {
  background-color: #eff3fa;
}

.kaz-datatable-dashboard table tbody tr td {
  border-bottom: 1px solid rgba(46, 91, 255, 0.08) !important;
  background-color: #f8fafd;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #1d3f5c;
  font-size: 11px;
  font-weight: 500;
  padding: 10px;
}

.go-to-top {
  position: fixed;
  bottom: 0;
  right: 18px;
  display: block;
  text-decoration: none;
}

.go-to-top:hover {
  text-decoration: none;
}

.go-to-top .fa {
  color: #1a5f84;
  padding: 10px;
  background: transparent;
  text-align: center;
  display: block;
  font-size: 36px;
}

.go-to-top:hover .fa {
  background: transparent;
  color: #436c84;
}

/**
 *  Primefaces fileUpload (ui-fileupload) component
 *  (https://primefaces.github.io/primefaces/8_0/#/components/fileupload)
 *
 */
.ui-fileupload .ui-fileupload-buttonbar {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.ui-fileupload .ui-fileupload-content {
  background-color: white;
  padding: 0;
}
.ui-fileupload .ui-fileupload-files {
  display: block;
  border-spacing: 0;
  margin: 0;
}
.ui-fileupload .ui-fileupload-row {
  display: flex;
  flex-direction: column;
  position: relative;
}
.ui-fileupload .ui-fileupload-row > div {
  display: block;
  padding: 4px 10px;
}
.ui-fileupload .ui-fileupload-preview {
  display: none;
}
.ui-fileupload .ui-fileupload-cancel {
  background-color: transparent;
  position: absolute;
  right: 0;
  bottom: -3px;
  color: red;
}
.ui-fileupload .ui-progressbar {
  width: calc(100% - 34px);
  top: 5px;
  overflow: hidden;
  background-color: #f7f7f7;
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  text-align: left;
  position: relative;
  height: 11px;
  margin-bottom: 5px;
}

.ui-fileupload .ui-button:not(.ui-fileupload-cancel) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0472c1;
  color: #fff;
  text-transform: uppercase;
  margin-right: 0;
  height: 34px;
  padding: 8px 15px !important;
  transition: 0.3s all ease;
  /**
   *  There is no way to control HTML that Primefaces produce for file upload button and we also cannot alter the icon.
   *  That's why:
   *    1. we will first hide it completely, and then
   *    2. use pseudo element before the button-text to get the desired look
   *    3. if attribute `auto` is not set to true, multiple buttons appear and we set icon for each of them individually
   */
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel):not(:last-child) {
  margin-right: 5px;
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel).ui-state-disabled, .ui-fileupload .ui-button:not(.ui-fileupload-cancel).ui-state-disabled:hover, .ui-fileupload .ui-button:not(.ui-fileupload-cancel).ui-state-disabled:active {
  background-color: #0472c1;
  color: white;
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel):hover {
  background-color: #0363a8;
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel):active {
  background-color: #03548f;
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel) .ui-button-text {
  padding: 0;
  font-weight: 700;
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel) .ui-icon {
  display: none;
  /* [1] */
}
.ui-fileupload .ui-button:not(.ui-fileupload-cancel) .ui-button-text::before {
  /* [2] */
  font-family: "FontAwesome";
  font-size: 14px;
  color: white;
  margin-right: 10px;
}

/* [3] */
.ui-fileupload-choose .ui-button-text::before {
  content: "";
}

.ui-fileupload-upload .ui-button-text::before {
  content: "";
}

.ui-fileupload-cancel .ui-button-text::before {
  content: "";
}

/**
 *  Primefaces calendar (datepicker) component
 *
 *  1.  [pf-style] - styles that were copied directly from Primefaces stylesheet. We do this because we want to avoid
 *      any visual changes even if Primefaces theme is removed (which is the end goal)
 */
.ui-datepicker {
  background-color: white;
  width: 18.75rem;
  padding: 1.25rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
  background-color: transparent;
  border: 0;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  font-weight: bold;
}
.ui-datepicker th {
  text-align: right;
  padding: 0.7em 0.3em;
}
.ui-datepicker td {
  padding: 1px;
  font-size: 12px;
}
.ui-datepicker td .ui-state-default {
  padding: 0.2em;
  text-align: right;
  display: block;
  color: #0472c1;
  line-height: 30px;
  min-height: 30px;
  border-radius: 4px;
  background-color: #f8fafd;
  border: 0;
  transition: background-color 0.3s ease-out;
}
.ui-datepicker td .ui-state-hover {
  background-color: #e4ecf7;
}
.ui-datepicker td .ui-state-active {
  background-color: #0472c1;
  color: white;
}
.ui-datepicker .ui-datepicker-unselectable {
  background-color: transparent;
}

.ui-datepicker .ui-icon {
  display: none !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  background-color: transparent;
}
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  font-family: "FontAwesome";
  font-size: 16px;
  color: #203179;
  margin: 0;
}
.ui-datepicker .ui-datepicker-prev {
  justify-content: flex-start;
}
.ui-datepicker .ui-datepicker-prev::after {
  content: "";
}
.ui-datepicker .ui-datepicker-next {
  justify-content: flex-end;
}
.ui-datepicker .ui-datepicker-next::after {
  content: "";
}

/**
 *  Primefaces pagination (ui-paginator) component
 *
 *  1.  [pf-style] - styles that were copied directly from Primefaces stylesheet. We do this because we want to avoid
 *      any visual changes even if Primefaces theme is removed (which is the end goal)
 */
.ui-paginator {
  margin: 0;
  padding: 2px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-paginator.ui-widget-header {
  background-color: transparent;
  border: 0;
}
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-pages,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-current {
  display: inline-block;
  padding: 2px 6px;
  zoom: 1;
  margin-left: 1px;
  margin-right: 1px;
  text-decoration: none;
  outline: 0;
}
.ui-paginator .ui-state-default {
  color: #0472c1;
  font-weight: normal;
  line-height: 26px;
  min-height: 26px;
  border-radius: 4px;
  background-color: #f8fafd;
  border: 0;
  transition: background-color 0.3s ease-out;
}
.ui-paginator .ui-state-hover:not(.ui-state-disabled) {
  background-color: #e4ecf7;
}
.ui-paginator .ui-state-active {
  background-color: #0472c1;
  color: white;
}

.ui-paginator .ui-paginator-page {
  width: 28px;
}

.ui-paginator .ui-paginator-rpp-options {
  margin-left: 1em;
  margin-right: 1em;
  cursor: pointer;
  width: 40px;
  height: 30px;
  outline: 0;
  color: #2e384d;
}

.ui-paginator .ui-icon {
  display: none !important;
}
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
  position: relative;
  width: 30px;
  font-family: "FontAwesome";
  font-size: 14px;
  color: #2e384d;
}
.ui-paginator .ui-paginator-first::after {
  content: "";
}
.ui-paginator .ui-paginator-prev::after {
  content: "";
}
.ui-paginator .ui-paginator-next::after {
  content: "";
}
.ui-paginator .ui-paginator-last::after {
  content: "";
}

.ui-paginator-current {
  font-size: 12px;
  color: #8c95a0;
}

.ui-timepicker-div .ui-slider-horizontal {
  height: 0.65em;
  background-color: #203179;
}
.ui-timepicker-div .ui-slider-handle.ui-state-default {
  border-radius: 100px;
  background-color: white;
  border: 1px solid #7b7b7b;
}
.ui-timepicker-div .ui-slider-handle:focus {
  outline: 0;
}
.ui-timepicker-div .ui-slider-handle.ui-state-active {
  border-color: #0472c1;
}

.ui-inputfield {
  cursor: text;
  margin: 0;
  font-weight: normal;
  transition: 0.3s all linear;
  color: #333;
}
.ui-inputfield.ui-widget.ui-state-default {
  display: block;
  width: 100%;
  background-color: #fff;
  border: var(--default-border-width) solid #939ea5;
  border-radius: 4px;
  box-shadow: none;
  padding: 6px;
  line-height: 20px;
  font-size: 12px;
  height: var(--dashboard-input-height);
}
.ui-inputfield.ui-widget.ui-state-disabled {
  opacity: 1;
  background-color: transparent;
  border-color: #c4c4c4;
}
.ui-inputfield:hover, .ui-inputfield.ui-widget.ui-state-hover {
  border-color: #1d3f5c;
}
.ui-inputfield:focus, .ui-inputfield.ui-widget.ui-state-focus {
  outline: 0;
  border-color: #0472c1;
  box-shadow: 0 0 8px rgba(4, 114, 193, 0.35);
}
.ui-inputfield.ui-widget.ui-inputtextarea {
  min-height: var(--dashboard-input-height);
  height: auto;
}

.ui-selectonemenu {
  padding: 0;
  height: var(--dashboard-input-height);
}
.ui-selectonemenu.ui-widget.ui-state-default {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  border: var(--default-border-width) solid #939ea5;
  border-radius: 4px;
  background-color: white;
  /**
   *  Unfortunately `!important` is necessary here because Primefaces sets inline width to the element,
   *  and there is no way to override it differently. This bug is documented in their GitHub issues page.
   */
  width: auto !important;
  min-width: auto !important;
}
.ui-selectonemenu .ui-selectonemenu-label {
  width: 100%;
  font-weight: normal;
  text-align: left;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  color: black;
  padding: 4px;
  /** We need to set the cursor again here because in Primefaces ui-selectonemenu-label element also has
   *  `.ui-inputfield` class (cursor is set to `text` there and we need to override it)
   */
  cursor: pointer;
  box-shadow: none;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  position: relative;
  text-align: center;
  background-color: transparent;
  line-height: calc(var(--dashboard-input-height) - 2* var(--default-border-width));
  padding: 0;
}

.ui-selectonemenu-panel {
  border: 0;
  color: #000;
  background: #fff;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
  overflow: auto;
}
.ui-selectonemenu-panel .ui-selectonemenu-filter-container {
  position: relative;
  margin: 0;
  padding: 0.4em;
  display: inline-block;
}
.ui-selectonemenu-panel .ui-selectonemenu-list {
  list-style: none;
  outline: 0;
  border: 0;
  text-decoration: none;
  line-height: 1.3;
  padding: 0.4em;
}
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
  padding: 6px 5px;
}
.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-hover {
  background-color: #e7ebee;
}
.ui-selectonemenu-panel .ui-selectonemenu-table {
  border-collapse: collapse;
  width: 100%;
}
.ui-selectonemenu-panel .ui-selectonemenu-table td {
  border: 1px solid #ebecef;
}

.c-asterix-required {
  color: #ef5350;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  margin-left: 0.3125rem;
}

.c-app-status {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 1.875rem;
  background-color: #eeba54;
  color: white;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px;
  max-width: 11.25rem;
  margin: 0 auto;
}

.c-app-status--rejected {
  background-color: #e45a73;
}

.c-app-status--draft {
  background-color: #808080;
}

.c-app-status--issued {
  background-color: #17ca7f;
}

.c-app-status--delayed {
  background-color: #ffbbba;
}

/** App section is what `ktmr-row-2-row` was before, but without need for a clearfix.
 *  It represents each individual application section/row
 */
.c-app-section {
  display: block;
  background-color: #f8fafd;
  border: 1px solid #ced5e0;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 6px;
  color: #1d3f5c;
  position: relative;
}
.c-app-section__header {
  margin-bottom: 0.625rem;
}
.c-app-section__title {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.c-app-section:focus-within {
  background-color: #ebeff5;
}

.c-app-section .c-app-section__title {
  margin: 0;
  padding: 0;
}

.c-doc-tracking {
  margin-bottom: 8px;
}

.c-doc-tracking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
}

.c-doc-tracking__search {
  margin-right: -15px;
  width: 180px;
}

.c-doc-tracking__input {
  display: block;
  width: 100%;
  height: 65px;
  background-color: #f9fafc;
  border: 1px solid #c8d3e7;
  border-radius: 4px;
  padding: 0.9375rem;
}

.c-doc-tracking__label {
  font-size: 14px;
  font-weight: bold;
  color: #8c95a0;
  margin-bottom: 0.625rem !important;
}

.c-doc-tracking__button {
  height: 65px;
  width: 145px;
  margin-left: 0.3125rem;
  background-color: #153766;
}
.c-doc-tracking__button:hover {
  background-color: #001E4D;
}
.c-doc-tracking__button .ui-button-text {
  text-align: center;
  padding: 0;
  margin: 0;
}

/* CTA HOMEPAGE CARDS */
.c-homepage-card {
  background-color: white;
  width: 100%;
  height: 24.375rem;
  padding: 1.875rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.c-homepage-card p,
.c-homepage-card a {
  color: white;
}

.c-homepage-card__img {
  min-width: 5rem;
  width: 5rem;
  min-height: 5rem;
  height: 5rem;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  margin-bottom: 1.875rem;
}
.c-homepage-card__img img {
  filter: saturate(0) brightness(10);
}

.c-homepage-card__title {
  color: white;
  font-size: 28px;
  font-weight: bold;
  min-height: 5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 0.625rem;
}
.lang-ru .c-homepage-card__title, .lang-kk .c-homepage-card__title {
  font-size: 20px;
}

.c-homepage-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.c-homepage-card__btn {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9375rem;
  height: 2.8125rem;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.3s background-color ease-out;
  cursor: pointer;
  margin-top: auto;
}

.c-homepage-card--first {
  background-image: linear-gradient(to bottom, #E39601, #F6C720);
}
.c-homepage-card--first .c-homepage-card__img {
  background-color: #C98500;
}
.c-homepage-card--first .c-homepage-card__btn {
  background-color: #d3910e;
}
.c-homepage-card--first .c-homepage-card__btn:hover {
  background-color: #E39601;
}

.c-homepage-card--second {
  background-image: linear-gradient(to bottom, #076194, #1EB8C1);
}
.c-homepage-card--second .c-homepage-card__img {
  background-color: #06496C;
}
.c-homepage-card--second .c-homepage-card__btn {
  background-color: #117A84;
}
.c-homepage-card--second .c-homepage-card__btn:hover {
  background-color: #046D77;
}

.c-homepage-card--third {
  background-image: linear-gradient(to bottom, #1B1A78, #025D8F);
}
.c-homepage-card--third .c-homepage-card__img {
  background-color: #101C4F;
}
.c-homepage-card--third .c-homepage-card__btn {
  background-color: #121F56;
}
.c-homepage-card--third .c-homepage-card__btn:hover {
  background-color: #051249;
}

.c-homepage-card--fourth {
  background-image: linear-gradient(to bottom, #061530, #0B2758);
}
.c-homepage-card--fourth .c-homepage-card__img {
  background-color: #000001;
}
.c-homepage-card--fourth .c-homepage-card__btn {
  background-color: #060D2D;
}
.c-homepage-card--fourth .c-homepage-card__btn:hover {
  background-color: #000020;
}

.c-lang-switch {
  position: relative;
}
.c-lang-switch__dropdown {
  z-index: 10;
  display: none;
  position: absolute;
  left: 0;
  top: 2.8125rem;
  min-width: 2.8125rem;
  width: 2.8125rem;
  min-height: 2.8125rem;
  height: 2.8125rem;
  text-align: center;
  padding-top: 0.3125rem;
}
.c-lang-switch:hover .c-lang-switch__dropdown {
  display: block;
}

.c-lang-switch__language {
  display: block;
  min-width: 2.8125rem;
  width: 2.8125rem;
  min-height: 2.8125rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
  text-align: center;
  background-color: #08257D;
}
.c-lang-switch__language.ru {
  border-radius: 4px 4px 0 0;
  background-color: #F00303;
}
.c-lang-switch__language.kk {
  background-color: #1DB5C0;
}
.c-lang-switch__language.en {
  border-radius: 0 0 4px 4px;
}

/* ACCORDION */
.c-accordion {
  width: 100%;
  transition: 0.2s all linear;
  overflow: hidden;
}

.c-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  border-radius: 5px;
  padding-left: 30px;
  width: 100%;
  background-color: #eff3fa;
  transition: inherit;
}

.c-accordion__handle {
  width: 52px;
  background-color: #dce3ed;
  line-height: 55px;
  text-align: center;
  color: #8c95a0;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.c-accordion.is-open .c-accordion__header {
  border-radius: 5px 5px 0 0;
}

.c-accordion.is-open .c-accordion__handle {
  transform: rotate(180deg);
  border-radius: 0 0 0 5px;
}

.c-accordion__title {
  margin: 0;
  font-size: 18px;
  color: #015986;
  font-weight: 700;
  flex: 1;
}

.c-accordion__body {
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 30px 52px 30px 30px;
  border-radius: 0 0 5px 5px;
  width: 100%;
  background-color: #eff3fa;
  line-height: 1.3;
}

/* Temporary accordion component */
.c-temp-accordion {
  height: 70px;
  width: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 20px 20px;
  background-color: #eff3fa;
  text-decoration: none;
  color: #015986;
  cursor: pointer;
}

.c-temp-accordion:hover {
  text-decoration: none;
  color: #015986;
}

.c-temp-accordion__handle {
  width: 52px;
  background-color: #dce3ed;
  line-height: 70px;
  text-align: center;
  color: #8c95a0;
  border-radius: 0 5px 5px 0;
}

.c-temp-accordion.collapsed .c-temp-accordion__handle {
  transform: rotate(180deg);
  border-radius: 5px 0 0 5px;
}

/* GOVERNMENT AGENCY PAGE */
.c-gov-agency {
  display: flex;
  align-items: center;
  height: 8.125rem;
  padding: 0.9375rem;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e6e9;
  cursor: pointer;
  color: #203179;
  transition: 0.3s all ease-out;
}
.c-gov-agency:hover {
  color: #51a4d2;
  transform: translateY(-1px);
}
.o-grid__cell:nth-last-child(n+3) .c-gov-agency {
  margin-bottom: 1.25rem;
}

.c-gov-agency__img {
  min-width: 90px;
  width: 90px;
  margin-right: 20px;
}

.c-gov-agency__text {
  font-size: 24px;
  font-weight: 600;
}

.c-help-box {
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

.c-help-box__icon {
  display: block;
  font-size: 24px;
  text-align: right;
  color: #015986;
  margin-left: auto;
}

.c-help-box__content {
  /*margin-top: -15px;*/
}

.c-help-box__text {
  display: block;
  color: #8c95a0;
  font-size: 14px;
  line-height: 1.5;
}

.c-help-box__text--main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

/*  SELF-REGISTRATION */
.c-self-registration {
  margin-top: 100px;
}

.c-self-registration__logo {
  width: 75px;
}

.c-self-registration__button,
.c-self-registration__button.ui-button.ui-state-default {
  width: 100%;
  height: 55px;
  border-radius: 10px;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

.c-self-registration__button .ui-icon.fa {
  position: relative;
  margin: 0;
  font-size: 16px;
  margin-right: 20px;
  overflow: visible;
}

.c-self-registration__button .ui-button-text {
  padding: 0;
  font-size: 16px;
}

.c-self-registration__button--disabled,
.c-self-registration__button.ui-state-disabled {
  background-image: none;
  border: 0;
  background-color: #ccdee7;
  opacity: 1;
}

.c-self-registration__toggle {
  margin-bottom: 8px;
}

.c-self-registration__notice {
  margin-bottom: 10px;
  font-size: 18px;
  color: #8c95a0;
  text-transform: uppercase;
  font-weight: 700;
}

.c-self-registration__login,
a.c-self-registration__login {
  /* ugly override for theme.css (.ui-widget a) */
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #203179;
  margin-top: 30px;
  text-align: center;
}

.c-self-registration__login:hover,
a.c-self-registration__login:hover {
  /* ugly override for theme.css (.ui-widget a) */
  font-weight: 700;
}

.c-self-registration__checkbox {
  margin-left: 10px;
  background-color: white;
  border: 1px solid #8c95a0;
  border-radius: 4px;
}

.c-self-registration__checkbox .ui-chkbox-box {
  background-color: white;
  background-image: none;
  box-shadow: none;
  border-radius: 4px;
}

.c-self-registration__description {
  display: none;
}

.c-dashboard {
  background-color: #ECF2F8;
  flex: 1;
}

.c-dashboard__title {
  color: #203179;
  font-size: 24px;
  text-transform: initial;
  margin: 0;
  padding: 0;
  margin-bottom: 1.25rem;
}

.c-dashboard__subtitle {
  font-size: 20px;
  color: #1d3f5c;
  padding: 0;
  font-weight: 400;
  margin: 0;
  margin-bottom: 0.625rem;
}

/*Dashboard main right side content holder*/
.layout-content {
  overflow: hidden;
  position: relative;
  padding: 20px;
}

.layout-content h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

.c-sidebar {
  min-width: 300px;
  width: 300px;
  min-height: 100vh;
  background-color: #F9FBFD;
  transition: 0.5s ease all;
  padding-bottom: 10px;
}

.c-sidebar__header {
  background-color: #0063ab;
  text-align: center;
  color: white;
  padding: 30px 20px 70px;
  margin-bottom: -50px;
}

.c-sidebar__title {
  font-size: 12px;
  color: white;
  font-weight: 400;
  letter-spacing: 0.4px;
  margin: 10px auto 0;
  padding: 0;
}

.c-sidebar__title--big {
  font-size: 16px;
  display: block;
  letter-spacing: 0.6px;
  font-weight: 500;
  line-height: 1.5;
}

/* FOOTER STATISTICS */
.c-footer-stats__value {
  font-size: 20px;
  color: #00479A;
  line-height: 1.2;
  margin-bottom: 5px;
}

.c-footer-stats__value:not(:first-child) {
  margin-top: 20px;
}

.c-footer-stats__description {
  font-size: 12px;
  margin-bottom: 3px;
}

.c-footer-stats__bar {
  display: block;
  height: 5px;
  background-color: #1A9FE1;
}

.c-footer-stats__bar--users-registered {
  background-color: #1A9FE1;
  width: 20%;
}

.c-footer-stats__bar--users-active {
  background-color: #F7C200;
  width: 70%;
}

.c-footer-stats__bar--companies-registered {
  background-color: #000914;
}

/* FORM VALIDATION MESSAGES */
.c-validation-message {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 14px;
  height: 30px;
  border-radius: 4px;
  margin: 10px 0;
  font-style: italic;
  color: #1c2023;
  animation-name: animate-display-block;
  animation-timing-function: ease-in;
  /*animation-delay: .2s;*/
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
}

.c-validation-message__icon,
.c-validation-message .fa {
  font-size: 16px;
  margin-right: 15px;
}

.c-validation-message.is-error {
  background-color: rgba(248, 60, 95, 0.15);
}

.c-validation-message.is-error .c-validation-message__icon {
  color: #df0830;
}

.c-compose-msg {
  background-color: white;
  color: #203179;
}
.c-compose-msg label {
  text-transform: uppercase;
  font-weight: normal;
}
.c-compose-msg .ui-autocomplete-input-token {
  width: 90%;
}

.c-compose-msg__btn {
  height: 34px;
  background-color: #0472c1;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
  text-transform: uppercase;
  border-radius: 4px;
}
.c-compose-msg__btn:not(:last-child) {
  margin-right: 5px;
}
.c-compose-msg__btn--centered {
  justify-content: center;
}
.c-compose-msg__btn--dark {
  background-color: #153766;
}
.c-compose-msg__btn .ui-icon.fa {
  position: relative;
  margin: 0;
}
.c-compose-msg__btn.ui-button-text-icon-left .ui-button-text {
  padding: 0 0 0 15px;
}
.c-compose-msg__btn .ui-button-icon-left {
  left: 0.3em;
}

.c-compose-msg .ui-widget-header {
  background-color: #203179;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 18px;
  height: 50px;
}

.c-delegation-confirm {
  margin-top: 20%;
}

.ui-icon-triangle-1-s::before {
  content: "";
  font-family: "FontAwesome";
  font-size: 16px;
  display: inline-block;
  color: #8c95a0;
}

.ui-resizable-handle.ui-resizable-se.ui-icon {
  position: absolute;
  right: 0;
  bottom: 0;
}

.c-opened-app {
  color: #015986;
}
.c-opened-app tr {
  height: 70px;
  background-color: #eff3fa;
}
.c-opened-app .ui-panelgrid-even {
  background-color: #f7fafd;
}
.c-opened-app .ui-panelgrid .ui-panelgrid-cell {
  border: 0;
}
.c-opened-app .head-column {
  background-color: #203179;
  color: #abbbff;
  width: 16.25rem;
  padding: 1.25rem;
  text-transform: uppercase;
}
.c-opened-app .head-column:not(:last-of-type) {
  border-bottom: 1px solid #0e1e5e;
}
.c-opened-app .body-column {
  padding: 1.25rem;
}

.c-selected-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.125rem;
  border: 1px solid #bbb;
  background-color: #f9fafc;
  border-radius: 5px;
  padding: 15px;
  margin: 0;
  font-size: 14px;
  color: #0b2656;
}
.c-selected-role button {
  background-color: transparent;
  display: flex;
  align-items: center;
}
.c-selected-role .ui-icon {
  overflow: visible;
  position: relative;
  transition: scale 0.3s ease-out;
  transform-origin: 50% 50%;
}
.c-selected-role .ui-icon::before, .c-selected-role .ui-icon::after {
  color: #0b2656;
}
.c-selected-role .ui-icon:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   #DOUBLE-LABEL
   ========================================================================== */
/**
 *  We are making the label fit two lines of text in order to accommodate long Russian translations.
 *  The "trick" is in using fixed height, which will prevent "jumping" input fields below such label
 *
 *  Note:
 *  This solution doesn't cover the cases where label length might go into three rows, but if that happens
 *  something else is probably wrong.
 *    - Labels should be short and informative
 *    - If they need more text for an explanation, we should use html `title` attribute
 */
.c-double-label {
  height: 30px;
  font-size: 12px;
  line-height: 1.25;
  display: flex;
  align-items: flex-end;
  margin-bottom: 3px;
}

/**
 *  Custom filter header implementation
 *  https://envisionari.atlassian.net/browse/KS-920 */
.c-custom-filter {
  position: relative;
  /* This is "fragile" solution, because we're setting the position of this icon according to the CURRENT padding
     of the `.kaz-data-table th` which is 20px 10px
  */
  /* The only reason for nesting this class under the main one was to override the specificity of the
     `.ui-datatable-scrollable-header label` selector from `global.css`
   */
}
.c-custom-filter .ui-column-filter {
  display: none !important;
}
.c-custom-filter .ui-sortable-column-icon {
  position: absolute;
  top: 20px;
  right: 10px;
}
.c-custom-filter .c-custom-filter__title {
  font-weight: 500;
  margin-bottom: 5px;
}

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left--large {}
 *   .u-margin-right--small {}
 *   .u-padding {}
 *   .u-padding-right--none {}
 *   .u-padding--horizontal {}
 *   .u-padding--vertical-small {}
 */
.u-padding--xxs {
  padding: 0.3125rem !important;
}

.u-padding--xs {
  padding: 0.625rem !important;
}

.u-padding--s {
  padding: 0.9375rem !important;
}

.u-padding--m {
  padding: 1.25rem !important;
}

.u-padding--l {
  padding: 1.875rem !important;
}

.u-padding--xl {
  padding: 2.5rem !important;
}

.u-padding--xxl {
  padding: 3.75rem !important;
}

.u-padding--none {
  padding: 0 !important;
}

.u-padding-top--xxs {
  padding-top: 0.3125rem !important;
}

.u-padding-top--xs {
  padding-top: 0.625rem !important;
}

.u-padding-top--s {
  padding-top: 0.9375rem !important;
}

.u-padding-top--m {
  padding-top: 1.25rem !important;
}

.u-padding-top--l {
  padding-top: 1.875rem !important;
}

.u-padding-top--xl {
  padding-top: 2.5rem !important;
}

.u-padding-top--xxl {
  padding-top: 3.75rem !important;
}

.u-padding-top--none {
  padding-top: 0 !important;
}

.u-padding-right--xxs {
  padding-right: 0.3125rem !important;
}

.u-padding-right--xs {
  padding-right: 0.625rem !important;
}

.u-padding-right--s {
  padding-right: 0.9375rem !important;
}

.u-padding-right--m {
  padding-right: 1.25rem !important;
}

.u-padding-right--l {
  padding-right: 1.875rem !important;
}

.u-padding-right--xl {
  padding-right: 2.5rem !important;
}

.u-padding-right--xxl {
  padding-right: 3.75rem !important;
}

.u-padding-right--none {
  padding-right: 0 !important;
}

.u-padding-bottom--xxs {
  padding-bottom: 0.3125rem !important;
}

.u-padding-bottom--xs {
  padding-bottom: 0.625rem !important;
}

.u-padding-bottom--s {
  padding-bottom: 0.9375rem !important;
}

.u-padding-bottom--m {
  padding-bottom: 1.25rem !important;
}

.u-padding-bottom--l {
  padding-bottom: 1.875rem !important;
}

.u-padding-bottom--xl {
  padding-bottom: 2.5rem !important;
}

.u-padding-bottom--xxl {
  padding-bottom: 3.75rem !important;
}

.u-padding-bottom--none {
  padding-bottom: 0 !important;
}

.u-padding-left--xxs {
  padding-left: 0.3125rem !important;
}

.u-padding-left--xs {
  padding-left: 0.625rem !important;
}

.u-padding-left--s {
  padding-left: 0.9375rem !important;
}

.u-padding-left--m {
  padding-left: 1.25rem !important;
}

.u-padding-left--l {
  padding-left: 1.875rem !important;
}

.u-padding-left--xl {
  padding-left: 2.5rem !important;
}

.u-padding-left--xxl {
  padding-left: 3.75rem !important;
}

.u-padding-left--none {
  padding-left: 0 !important;
}

.u-padding-horizontal--xxs {
  padding-left: 0.3125rem !important;
  padding-right: 0.3125rem !important;
}

.u-padding-horizontal--xs {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

.u-padding-horizontal--s {
  padding-left: 0.9375rem !important;
  padding-right: 0.9375rem !important;
}

.u-padding-horizontal--m {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.u-padding-horizontal--l {
  padding-left: 1.875rem !important;
  padding-right: 1.875rem !important;
}

.u-padding-horizontal--xl {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.u-padding-horizontal--xxl {
  padding-left: 3.75rem !important;
  padding-right: 3.75rem !important;
}

.u-padding-horizontal--none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-padding-vertical--xxs {
  padding-top: 0.3125rem !important;
  padding-bottom: 0.3125rem !important;
}

.u-padding-vertical--xs {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

.u-padding-vertical--s {
  padding-top: 0.9375rem !important;
  padding-bottom: 0.9375rem !important;
}

.u-padding-vertical--m {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.u-padding-vertical--l {
  padding-top: 1.875rem !important;
  padding-bottom: 1.875rem !important;
}

.u-padding-vertical--xl {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.u-padding-vertical--xxl {
  padding-top: 3.75rem !important;
  padding-bottom: 3.75rem !important;
}

.u-padding-vertical--none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-margin--xxs {
  margin: 0.3125rem !important;
}

.u-margin--xs {
  margin: 0.625rem !important;
}

.u-margin--s {
  margin: 0.9375rem !important;
}

.u-margin--m {
  margin: 1.25rem !important;
}

.u-margin--l {
  margin: 1.875rem !important;
}

.u-margin--xl {
  margin: 2.5rem !important;
}

.u-margin--xxl {
  margin: 3.75rem !important;
}

.u-margin--none {
  margin: 0 !important;
}

.u-margin-top--xxs {
  margin-top: 0.3125rem !important;
}

.u-margin-top--xs {
  margin-top: 0.625rem !important;
}

.u-margin-top--s {
  margin-top: 0.9375rem !important;
}

.u-margin-top--m {
  margin-top: 1.25rem !important;
}

.u-margin-top--l {
  margin-top: 1.875rem !important;
}

.u-margin-top--xl {
  margin-top: 2.5rem !important;
}

.u-margin-top--xxl {
  margin-top: 3.75rem !important;
}

.u-margin-top--none {
  margin-top: 0 !important;
}

.u-margin-right--xxs {
  margin-right: 0.3125rem !important;
}

.u-margin-right--xs {
  margin-right: 0.625rem !important;
}

.u-margin-right--s {
  margin-right: 0.9375rem !important;
}

.u-margin-right--m {
  margin-right: 1.25rem !important;
}

.u-margin-right--l {
  margin-right: 1.875rem !important;
}

.u-margin-right--xl {
  margin-right: 2.5rem !important;
}

.u-margin-right--xxl {
  margin-right: 3.75rem !important;
}

.u-margin-right--none {
  margin-right: 0 !important;
}

.u-margin-bottom--xxs {
  margin-bottom: 0.3125rem !important;
}

.u-margin-bottom--xs {
  margin-bottom: 0.625rem !important;
}

.u-margin-bottom--s {
  margin-bottom: 0.9375rem !important;
}

.u-margin-bottom--m {
  margin-bottom: 1.25rem !important;
}

.u-margin-bottom--l {
  margin-bottom: 1.875rem !important;
}

.u-margin-bottom--xl {
  margin-bottom: 2.5rem !important;
}

.u-margin-bottom--xxl {
  margin-bottom: 3.75rem !important;
}

.u-margin-bottom--none {
  margin-bottom: 0 !important;
}

.u-margin-left--xxs {
  margin-left: 0.3125rem !important;
}

.u-margin-left--xs {
  margin-left: 0.625rem !important;
}

.u-margin-left--s {
  margin-left: 0.9375rem !important;
}

.u-margin-left--m {
  margin-left: 1.25rem !important;
}

.u-margin-left--l {
  margin-left: 1.875rem !important;
}

.u-margin-left--xl {
  margin-left: 2.5rem !important;
}

.u-margin-left--xxl {
  margin-left: 3.75rem !important;
}

.u-margin-left--none {
  margin-left: 0 !important;
}

.u-margin-horizontal--xxs {
  margin-left: 0.3125rem !important;
  margin-right: 0.3125rem !important;
}

.u-margin-horizontal--xs {
  margin-left: 0.625rem !important;
  margin-right: 0.625rem !important;
}

.u-margin-horizontal--s {
  margin-left: 0.9375rem !important;
  margin-right: 0.9375rem !important;
}

.u-margin-horizontal--m {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

.u-margin-horizontal--l {
  margin-left: 1.875rem !important;
  margin-right: 1.875rem !important;
}

.u-margin-horizontal--xl {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}

.u-margin-horizontal--xxl {
  margin-left: 3.75rem !important;
  margin-right: 3.75rem !important;
}

.u-margin-horizontal--none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-margin-vertical--xxs {
  margin-top: 0.3125rem !important;
  margin-bottom: 0.3125rem !important;
}

.u-margin-vertical--xs {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}

.u-margin-vertical--s {
  margin-top: 0.9375rem !important;
  margin-bottom: 0.9375rem !important;
}

.u-margin-vertical--m {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.u-margin-vertical--l {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important;
}

.u-margin-vertical--xl {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.u-margin-vertical--xxl {
  margin-top: 3.75rem !important;
  margin-bottom: 3.75rem !important;
}

.u-margin-vertical--none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
  display: none !important;
}

/*Helper classes*/
*.clearfix {
  zoom: 1;
}

.clearfix {
  clear: both;
}

.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.center {
  text-align: center;
}

.relative {
  position: relative;
}

.float-left {
  float: left;
}

.flex {
  display: flex;
}

/* new styles? (Added by Blaz) */
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-uppercase {
  text-transform: uppercase;
}

/* PRIMEFACES OVERRIDES */
.ui-panel.ui-widget,
.ui-panel-content.ui-widget-content {
  padding: 0;
  margin: 0;
  border: 0;
}

.o-form__field.ui-inputfield.ui-widget {
  border: 1px solid #bbb;
}

.ui-corner-all {
  border-radius: 5px;
}

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: inherit;
  font-size: inherit;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  border: 0;
}

.ui-panel .ui-panel-content {
  width: 100%;
}

.ui-icon-check {
  position: relative;
  text-indent: initial;
}
.ui-icon-check::before {
  content: "";
  font-family: "FontAwesome";
  display: block;
  font-size: 18px;
  line-height: 1;
  color: #5ba238;
  position: absolute;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-message-error-icon {
  display: none !important;
}

/* UTILITY CLASSES */
.u-abs-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-type-normal {
  font-weight: 400 !important;
}

.u-type-bold {
  font-weight: 700 !important;
}

.u-type-uppercase {
  text-transform: uppercase !important;
}

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

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

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

.u-spaced-apart {
  justify-content: space-between !important;
}

.u-align-middle {
  align-items: center;
}

.u-align-bottom {
  align-items: flex-end;
}

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

.u-flex-grow {
  flex: 1;
}

.u-full-width {
  width: 100% !important;
}

.u-reset-text-transform {
  text-transform: initial !important;
}

.u-block {
  display: block !important;
}

.is-hidden-initially {
  display: none;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * This section will generate a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-row__item  u-1/2">
 *   or
 *   <div class="o-grid__cell  u-2/5">
 *
 * By default, we will also generate responsive variants of each of these
 * classes by using breakpoints configuration, e.g.:
 *
 *   <div class="o-row__item  u-1/1  u-1/2@m  u-1/3@l">
 *
 * Optionally, we can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-row__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$kazsw-fractions` list.
 */
.u-1\/1 {
  width: 100% !important;
}

.u-1\/2 {
  width: 50% !important;
}

.u-2\/2 {
  width: 100% !important;
}

.u-1\/3 {
  width: 33.3333333333% !important;
}

.u-2\/3 {
  width: 66.6666666667% !important;
}

.u-3\/3 {
  width: 100% !important;
}

.u-1\/4 {
  width: 25% !important;
}

.u-2\/4 {
  width: 50% !important;
}

.u-3\/4 {
  width: 75% !important;
}

.u-4\/4 {
  width: 100% !important;
}

.u-1\/5 {
  width: 20% !important;
}

.u-2\/5 {
  width: 40% !important;
}

.u-3\/5 {
  width: 60% !important;
}

.u-4\/5 {
  width: 80% !important;
}

.u-5\/5 {
  width: 100% !important;
}

.u-1\/6 {
  width: 16.6666666667% !important;
}

.u-2\/6 {
  width: 33.3333333333% !important;
}

.u-3\/6 {
  width: 50% !important;
}

.u-4\/6 {
  width: 66.6666666667% !important;
}

.u-5\/6 {
  width: 83.3333333333% !important;
}

.u-6\/6 {
  width: 100% !important;
}

.u-1\/7 {
  width: 14.2857142857% !important;
}

.u-2\/7 {
  width: 28.5714285714% !important;
}

.u-3\/7 {
  width: 42.8571428571% !important;
}

.u-4\/7 {
  width: 57.1428571429% !important;
}

.u-5\/7 {
  width: 71.4285714286% !important;
}

.u-6\/7 {
  width: 85.7142857143% !important;
}

.u-7\/7 {
  width: 100% !important;
}

.u-1\/8 {
  width: 12.5% !important;
}

.u-2\/8 {
  width: 25% !important;
}

.u-3\/8 {
  width: 37.5% !important;
}

.u-4\/8 {
  width: 50% !important;
}

.u-5\/8 {
  width: 62.5% !important;
}

.u-6\/8 {
  width: 75% !important;
}

.u-7\/8 {
  width: 87.5% !important;
}

.u-8\/8 {
  width: 100% !important;
}

.u-1\/9 {
  width: 11.1111111111% !important;
}

.u-2\/9 {
  width: 22.2222222222% !important;
}

.u-3\/9 {
  width: 33.3333333333% !important;
}

.u-4\/9 {
  width: 44.4444444444% !important;
}

.u-5\/9 {
  width: 55.5555555556% !important;
}

.u-6\/9 {
  width: 66.6666666667% !important;
}

.u-7\/9 {
  width: 77.7777777778% !important;
}

.u-8\/9 {
  width: 88.8888888889% !important;
}

.u-9\/9 {
  width: 100% !important;
}

.u-1\/10 {
  width: 10% !important;
}

.u-2\/10 {
  width: 20% !important;
}

.u-3\/10 {
  width: 30% !important;
}

.u-4\/10 {
  width: 40% !important;
}

.u-5\/10 {
  width: 50% !important;
}

.u-6\/10 {
  width: 60% !important;
}

.u-7\/10 {
  width: 70% !important;
}

.u-8\/10 {
  width: 80% !important;
}

.u-9\/10 {
  width: 90% !important;
}

.u-10\/10 {
  width: 100% !important;
}

.u-1\/11 {
  width: 9.0909090909% !important;
}

.u-2\/11 {
  width: 18.1818181818% !important;
}

.u-3\/11 {
  width: 27.2727272727% !important;
}

.u-4\/11 {
  width: 36.3636363636% !important;
}

.u-5\/11 {
  width: 45.4545454545% !important;
}

.u-6\/11 {
  width: 54.5454545455% !important;
}

.u-7\/11 {
  width: 63.6363636364% !important;
}

.u-8\/11 {
  width: 72.7272727273% !important;
}

.u-9\/11 {
  width: 81.8181818182% !important;
}

.u-10\/11 {
  width: 90.9090909091% !important;
}

.u-11\/11 {
  width: 100% !important;
}

.u-1\/12 {
  width: 8.3333333333% !important;
}

.u-2\/12 {
  width: 16.6666666667% !important;
}

.u-3\/12 {
  width: 25% !important;
}

.u-4\/12 {
  width: 33.3333333333% !important;
}

.u-5\/12 {
  width: 41.6666666667% !important;
}

.u-6\/12 {
  width: 50% !important;
}

.u-7\/12 {
  width: 58.3333333333% !important;
}

.u-8\/12 {
  width: 66.6666666667% !important;
}

.u-9\/12 {
  width: 75% !important;
}

.u-10\/12 {
  width: 83.3333333333% !important;
}

.u-11\/12 {
  width: 91.6666666667% !important;
}

.u-12\/12 {
  width: 100% !important;
}

/**
 * If we’re using responsive breakpoints, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@m">
 */
@media only screen and (min-width: 48em) {
  .u-1\/1\@m {
    width: 100% !important;
  }

  .u-1\/2\@m {
    width: 50% !important;
  }

  .u-2\/2\@m {
    width: 100% !important;
  }

  .u-1\/3\@m {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@m {
    width: 66.6666666667% !important;
  }

  .u-3\/3\@m {
    width: 100% !important;
  }

  .u-1\/4\@m {
    width: 25% !important;
  }

  .u-2\/4\@m {
    width: 50% !important;
  }

  .u-3\/4\@m {
    width: 75% !important;
  }

  .u-4\/4\@m {
    width: 100% !important;
  }

  .u-1\/5\@m {
    width: 20% !important;
  }

  .u-2\/5\@m {
    width: 40% !important;
  }

  .u-3\/5\@m {
    width: 60% !important;
  }

  .u-4\/5\@m {
    width: 80% !important;
  }

  .u-5\/5\@m {
    width: 100% !important;
  }

  .u-1\/6\@m {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@m {
    width: 33.3333333333% !important;
  }

  .u-3\/6\@m {
    width: 50% !important;
  }

  .u-4\/6\@m {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@m {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@m {
    width: 100% !important;
  }

  .u-1\/7\@m {
    width: 14.2857142857% !important;
  }

  .u-2\/7\@m {
    width: 28.5714285714% !important;
  }

  .u-3\/7\@m {
    width: 42.8571428571% !important;
  }

  .u-4\/7\@m {
    width: 57.1428571429% !important;
  }

  .u-5\/7\@m {
    width: 71.4285714286% !important;
  }

  .u-6\/7\@m {
    width: 85.7142857143% !important;
  }

  .u-7\/7\@m {
    width: 100% !important;
  }

  .u-1\/8\@m {
    width: 12.5% !important;
  }

  .u-2\/8\@m {
    width: 25% !important;
  }

  .u-3\/8\@m {
    width: 37.5% !important;
  }

  .u-4\/8\@m {
    width: 50% !important;
  }

  .u-5\/8\@m {
    width: 62.5% !important;
  }

  .u-6\/8\@m {
    width: 75% !important;
  }

  .u-7\/8\@m {
    width: 87.5% !important;
  }

  .u-8\/8\@m {
    width: 100% !important;
  }

  .u-1\/9\@m {
    width: 11.1111111111% !important;
  }

  .u-2\/9\@m {
    width: 22.2222222222% !important;
  }

  .u-3\/9\@m {
    width: 33.3333333333% !important;
  }

  .u-4\/9\@m {
    width: 44.4444444444% !important;
  }

  .u-5\/9\@m {
    width: 55.5555555556% !important;
  }

  .u-6\/9\@m {
    width: 66.6666666667% !important;
  }

  .u-7\/9\@m {
    width: 77.7777777778% !important;
  }

  .u-8\/9\@m {
    width: 88.8888888889% !important;
  }

  .u-9\/9\@m {
    width: 100% !important;
  }

  .u-1\/10\@m {
    width: 10% !important;
  }

  .u-2\/10\@m {
    width: 20% !important;
  }

  .u-3\/10\@m {
    width: 30% !important;
  }

  .u-4\/10\@m {
    width: 40% !important;
  }

  .u-5\/10\@m {
    width: 50% !important;
  }

  .u-6\/10\@m {
    width: 60% !important;
  }

  .u-7\/10\@m {
    width: 70% !important;
  }

  .u-8\/10\@m {
    width: 80% !important;
  }

  .u-9\/10\@m {
    width: 90% !important;
  }

  .u-10\/10\@m {
    width: 100% !important;
  }

  .u-1\/11\@m {
    width: 9.0909090909% !important;
  }

  .u-2\/11\@m {
    width: 18.1818181818% !important;
  }

  .u-3\/11\@m {
    width: 27.2727272727% !important;
  }

  .u-4\/11\@m {
    width: 36.3636363636% !important;
  }

  .u-5\/11\@m {
    width: 45.4545454545% !important;
  }

  .u-6\/11\@m {
    width: 54.5454545455% !important;
  }

  .u-7\/11\@m {
    width: 63.6363636364% !important;
  }

  .u-8\/11\@m {
    width: 72.7272727273% !important;
  }

  .u-9\/11\@m {
    width: 81.8181818182% !important;
  }

  .u-10\/11\@m {
    width: 90.9090909091% !important;
  }

  .u-11\/11\@m {
    width: 100% !important;
  }

  .u-1\/12\@m {
    width: 8.3333333333% !important;
  }

  .u-2\/12\@m {
    width: 16.6666666667% !important;
  }

  .u-3\/12\@m {
    width: 25% !important;
  }

  .u-4\/12\@m {
    width: 33.3333333333% !important;
  }

  .u-5\/12\@m {
    width: 41.6666666667% !important;
  }

  .u-6\/12\@m {
    width: 50% !important;
  }

  .u-7\/12\@m {
    width: 58.3333333333% !important;
  }

  .u-8\/12\@m {
    width: 66.6666666667% !important;
  }

  .u-9\/12\@m {
    width: 75% !important;
  }

  .u-10\/12\@m {
    width: 83.3333333333% !important;
  }

  .u-11\/12\@m {
    width: 91.6666666667% !important;
  }

  .u-12\/12\@m {
    width: 100% !important;
  }
}
@media only screen and (min-width: 75em) {
  .u-1\/1\@l {
    width: 100% !important;
  }

  .u-1\/2\@l {
    width: 50% !important;
  }

  .u-2\/2\@l {
    width: 100% !important;
  }

  .u-1\/3\@l {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@l {
    width: 66.6666666667% !important;
  }

  .u-3\/3\@l {
    width: 100% !important;
  }

  .u-1\/4\@l {
    width: 25% !important;
  }

  .u-2\/4\@l {
    width: 50% !important;
  }

  .u-3\/4\@l {
    width: 75% !important;
  }

  .u-4\/4\@l {
    width: 100% !important;
  }

  .u-1\/5\@l {
    width: 20% !important;
  }

  .u-2\/5\@l {
    width: 40% !important;
  }

  .u-3\/5\@l {
    width: 60% !important;
  }

  .u-4\/5\@l {
    width: 80% !important;
  }

  .u-5\/5\@l {
    width: 100% !important;
  }

  .u-1\/6\@l {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@l {
    width: 33.3333333333% !important;
  }

  .u-3\/6\@l {
    width: 50% !important;
  }

  .u-4\/6\@l {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@l {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@l {
    width: 100% !important;
  }

  .u-1\/7\@l {
    width: 14.2857142857% !important;
  }

  .u-2\/7\@l {
    width: 28.5714285714% !important;
  }

  .u-3\/7\@l {
    width: 42.8571428571% !important;
  }

  .u-4\/7\@l {
    width: 57.1428571429% !important;
  }

  .u-5\/7\@l {
    width: 71.4285714286% !important;
  }

  .u-6\/7\@l {
    width: 85.7142857143% !important;
  }

  .u-7\/7\@l {
    width: 100% !important;
  }

  .u-1\/8\@l {
    width: 12.5% !important;
  }

  .u-2\/8\@l {
    width: 25% !important;
  }

  .u-3\/8\@l {
    width: 37.5% !important;
  }

  .u-4\/8\@l {
    width: 50% !important;
  }

  .u-5\/8\@l {
    width: 62.5% !important;
  }

  .u-6\/8\@l {
    width: 75% !important;
  }

  .u-7\/8\@l {
    width: 87.5% !important;
  }

  .u-8\/8\@l {
    width: 100% !important;
  }

  .u-1\/9\@l {
    width: 11.1111111111% !important;
  }

  .u-2\/9\@l {
    width: 22.2222222222% !important;
  }

  .u-3\/9\@l {
    width: 33.3333333333% !important;
  }

  .u-4\/9\@l {
    width: 44.4444444444% !important;
  }

  .u-5\/9\@l {
    width: 55.5555555556% !important;
  }

  .u-6\/9\@l {
    width: 66.6666666667% !important;
  }

  .u-7\/9\@l {
    width: 77.7777777778% !important;
  }

  .u-8\/9\@l {
    width: 88.8888888889% !important;
  }

  .u-9\/9\@l {
    width: 100% !important;
  }

  .u-1\/10\@l {
    width: 10% !important;
  }

  .u-2\/10\@l {
    width: 20% !important;
  }

  .u-3\/10\@l {
    width: 30% !important;
  }

  .u-4\/10\@l {
    width: 40% !important;
  }

  .u-5\/10\@l {
    width: 50% !important;
  }

  .u-6\/10\@l {
    width: 60% !important;
  }

  .u-7\/10\@l {
    width: 70% !important;
  }

  .u-8\/10\@l {
    width: 80% !important;
  }

  .u-9\/10\@l {
    width: 90% !important;
  }

  .u-10\/10\@l {
    width: 100% !important;
  }

  .u-1\/11\@l {
    width: 9.0909090909% !important;
  }

  .u-2\/11\@l {
    width: 18.1818181818% !important;
  }

  .u-3\/11\@l {
    width: 27.2727272727% !important;
  }

  .u-4\/11\@l {
    width: 36.3636363636% !important;
  }

  .u-5\/11\@l {
    width: 45.4545454545% !important;
  }

  .u-6\/11\@l {
    width: 54.5454545455% !important;
  }

  .u-7\/11\@l {
    width: 63.6363636364% !important;
  }

  .u-8\/11\@l {
    width: 72.7272727273% !important;
  }

  .u-9\/11\@l {
    width: 81.8181818182% !important;
  }

  .u-10\/11\@l {
    width: 90.9090909091% !important;
  }

  .u-11\/11\@l {
    width: 100% !important;
  }

  .u-1\/12\@l {
    width: 8.3333333333% !important;
  }

  .u-2\/12\@l {
    width: 16.6666666667% !important;
  }

  .u-3\/12\@l {
    width: 25% !important;
  }

  .u-4\/12\@l {
    width: 33.3333333333% !important;
  }

  .u-5\/12\@l {
    width: 41.6666666667% !important;
  }

  .u-6\/12\@l {
    width: 50% !important;
  }

  .u-7\/12\@l {
    width: 58.3333333333% !important;
  }

  .u-8\/12\@l {
    width: 66.6666666667% !important;
  }

  .u-9\/12\@l {
    width: 75% !important;
  }

  .u-10\/12\@l {
    width: 83.3333333333% !important;
  }

  .u-11\/12\@l {
    width: 91.6666666667% !important;
  }

  .u-12\/12\@l {
    width: 100% !important;
  }
}
/* ==========================================================================
   #CONTEXT CURSORS
   ========================================================================== */
/**
 * Utility classes for specific context cursors. The full list can be found at:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
 */
.u-cursor-default {
  cursor: default;
}

.u-cursor-context-menu {
  cursor: context-menu;
}

.u-cursor-help {
  cursor: help;
}

.u-cursor-pointer {
  cursor: pointer;
}

.u-cursor-wait {
  cursor: wait;
}

.u-cursor-cell {
  cursor: cell;
}

.u-cursor-crosshair {
  cursor: crosshair;
}

.u-cursor-text {
  cursor: text;
}

.u-cursor-copy {
  cursor: copy;
}

.u-cursor-move {
  cursor: move;
}

.u-cursor-not-allowed {
  cursor: not-allowed;
}

/* Custom page section overrides. Custom hacks. To be used instead of inline styles when absolutely necessary. */
._pwia {
  --pwia-label-font-size: 12px;
  --pwia-line-height: 1.5;
  --label-3l-height: calc(3* (var(--pwia-line-height)) * var(--pwia-label-font-size));
}
._pwia__top {
  height: 70px;
}
._pwia__label-3l {
  height: var(--label-3l-height);
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
}
._pwia--empty {
  padding-top: 90px;
}


/*# sourceMappingURL=main.css.map */

/*# custom styles */

.excelCommandButton{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 30px;
  border-radius: 1px;
  height: 30px;
  border: none;
  cursor: pointer;
}
.excelCommandButton:hover{
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.excelCommandButton .ui-button-text{
  display: none;
}

.excelBigCommandButton{
  border-radius: 2px;
}

.excelBigCommandButton:hover{
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.justify-content-between {
  justify-content: space-between;
}