.redNavbar {
    top: 10px;
    margin-left: -16px;
    width: 317px;
    height: 53px;
    background: #D11632 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: right;
}

.orzelek {
    margin-top: 5px;
    margin-right: 5px;
}

.serif {
    font-family: "PT Serif", sans-serif;
}

.leftColumn {
    padding-left: 4rem !important;
}

.rightColumnWk {
    padding-right: 6rem !important;
    padding-left: 6rem !important;
}

.messages {
    max-width: 700px;
    margin-left: auto;
}

@media (max-width: 960px) {
    .leftColumn {
        padding-left: 1rem !important;
    }

    .rightColumnWk {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

.firaMedium {
    font-family: firaMedium;
}

.firaRegular {
    font-family: firaRegular;
}

.firaSemiBold {
    font-family: firaSemiBold;
}

.openSans {
    font-family: openSansRegular;
}

.line-height-normal {
    line-height: normal;
}

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

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

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

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

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

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

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

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

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

.font-size-28 {
    font-size: 24px;
}

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

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

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

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

.bgGray {
    background: #FAFAFA 0% 0% no-repeat padding-box !important;
}

.breadCumpHref {
    color: white;
    text-decoration: none;
}

.breadCumpHref:hover {
    text-decoration: underline !important;
    color: white !important;
}

.borderRadius0 {
    border-radius: 0px;
}

.mt6-px {
    margin-top: -6px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-10 {
    margin-top: 10px;
}

.logoNavbar {
    display: flex;
}

.color {
    color: #0064A3 !important;
}

.colorUrl {
    color: #0067d5;
}

.angleHelp {
    cursor: pointer;
    border: 1px solid white;
}

.angleHelp:active {
    border: 1px solid #0064A3;
}

#isPesel {
    cursor: pointer;
}

#peseltInfo {
    display: flex;
}

#documentInfo {
    display: none;
}

.banner {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    color: white;
    padding: 20px;
}

.btnRegisterGov {
    background-color: #0064a3 !important;
    height: 52px !important;
    width: 100% !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: white !important;
    width: 100% !important;
    border: none !important;
}

.btnRegisterGov:hover {
    background-color: #D13101 !important;
    color: white !important;
    border: none !important;
}

.btnRegisterGov:focus {
    outline: 2px solid #D13101 !important;
    outline-offset: 3px !important;
    text-decoration: none !important;
    color: white;
    !important border: none !important;
}

.btnLoginGov {
    background-color: #D13101 !important;
    height: 62px !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: white !important;
    width: 100% !important;
    border: none;
}

.btnLoginGov:hover {
    background-color: transparent !important;
    border: 1px solid white !important;
    color: white !important;
}

.btnLoginGov:focus {
    outline: 2px solid #D13101 !important;
    outline-offset: 3px !important;
    text-decoration: none !important;
    color: white;
    !important
}

.btnLoginGovCancel {
    background-color: transparent !important;
    height: 62px !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: white !important;
    width: 100% !important;
    border: 1px solid white !important;
}

.btnLoginGovCancel:hover {
    border: 1px solid #D13101 !important;
    color: white !important;
}

.btnLoginGovCancel:focus {
    outline: 2px solid #D13101 !important;
    outline-offset: 3px !important;
    text-decoration: none !important;
    border-color: #D13101 !important;
    color: white !important;
}

.btnEye {
    border: 1px solid #ced4da !important;
    background-color: white !important;
    border-left: none !important;
    border-radius: 0px 3px 3px 0px !important;
}

.btnEye:focus {
    border-left: none !important;
}

.errorTextRegistry {
    display: none;
}

.myAccount {
    text-decoration: none !important;
}

.btnEye2 {
    border: 1px solid #e8f0fe !important;
    background-color: #e8f0fe !important;
    border-left: none !important;
    border-radius: 0px 3px 3px 0px !important;
}

.btnEye2:focus {
    border-left: none !important;
}

.passwordQuestion {
    cursor: pointer;
}

.passwordQuestion:hover {
    transform: scale(1.2);
}

.tooltip-inner {
    background-color: #0061a3 !important;
    color: #fff !important;
}

.languageIcon {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    cursor: pointer;
}

.color-white {
    color: white;
}

.color-black {
    color: black;
}

.color-orange {
    color: #D13101;
}

.color-grey {
    color: #444444 !important;
}

.color-grey2 {
    color: #6F7181;
}

.color-red {
    color: red;
}

.alertIkp {
    border-left: 4px solid red;
    border-radius: 0px;
    padding: 0.4rem 1rem;
}

.alertNewsletter {
    border-radius: 0px;
    padding: 0.4rem 1rem;
    padding-right: 0 !important;
    background-color: #F7FAFC !important;
}

.iconNewsletter {
    color: #0064A3 !important;
}

.buttonNewsletter {
    border-radius: 0px !important;
    border-color: #0064A3 !important;
    color: #0064A3 !important;
    background-color: #F7FAFC !important;
    font-weight: 600 !important;
}

.buttonNewsletter:hover {
    border-radius: 0px !important;
    border-color: #0064A3 !important;
    color: #F7FAFC !important;
    background-color: #0064A3 !important;
    font-weight: 600 !important;
}

footer {
    position: relative;
    bottom: 0;
    width: 100%;
}

footer .light {
    fill: #a9e80f;
}

footer .dark {
    fill: #0052a0;
}

.footerContent {
    background: #17345D;
    padding: 1em 0 1em 0em;
    color: rgb(255, 255, 255);
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

footer img {
    max-width: 250px;
}

.footItem {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.footItem:hover {
    color: #17345D;
    background-color: white;
}

.footItem2 {
    height: 2px;
    border: 1px solid white;
    background-color: white;
    width: 100%;
    margin-top: 2px;
}

.footItem3:hover .footItem2 {
    background-color: #17345D;
    border: 1px solid #17345D;
}

.footItem3 {
    display: block;
    color: white;
}

.justifyDiv {
    text-align: justify;
    text-justify: inter-word;
}

.hrefLoginGov {
    color: white !important;
    cursor: pointer;
}

.hrefLoginGov:hover {
    color: white !important;
    background-color: #0061a3 !important;
}

.border-width {
    border-width: medium;
}

@media (max-width: 960px) {
    .redNavbar {
        width: 64px;
    }

    .logoNavbar {
        display: none;
    }
}

input,
select {
    font-family: firaRegular !important;
    font-size: 18px !important;
}

input:disabled,
select:disabled {
    background-color: white !important;
}

.bgError {
    background-color: #f8d7da !important;
}

.loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

.loading-image {
    margin: auto;
}

.noRightBorderInput {
    border-right: none !important;
}

#hcks {
    border-radius: 0 !important;
    background-color: #D13101 !important;
    height: 62px !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: white !important;
    width: 100% !important;
    border: none;
}

#hcks:hover {
    background-color: #0061a3 !important;
    border: 1px solid white !important;
    color: white !important;
}

#hcks:focus {
    outline: 2px solid #D13101 !important;
    outline-offset: 3px !important;
    text-decoration: none !important;
    color: white;
    !important
}

.input-container {
    display: flex;
    align-items: center;
}

.input-container span {
    margin-right: 10px;
}

:root {
    --black: #000000;
    --white: #ffffff;
    --focus: #0064a3;

    --yellow-100: #faf5ed;
    --yellow-150: #fbf9c5;
    --yellow-200: #ffdf89;
    --yellow-300: #ffd566;
    --yellow-400: #ffc33f;
    --yellow-500: #fea700;
    --yellow-600: #ff9d00;
    --yellow-700: #b76b00;
    --yellow-800: #935100;
    --yellow-900: #7a3e00;

    --green-100: #e3f2e8;
    --green-200: #a5f8a5;
    --green-300: #75eb80;
    --green-400: #50d86a;
    --green-500: #1fbf4d;
    --green-600: #16a44d;
    --green-700: #0f894a;
    --green-800: #096e44;
    --green-900: #055b40;

    --blue-100: #f7fafc;
    --blue-200: #f0f6fa;
    --blue-250: #c5e0f3;
    --blue-300: #78bada;
    --blue-400: #3196c7;
    --blue-500: #0064a3;
    --blue-600: #044d8c;
    --blue-700: #17345d;
    --blue-800: #01295e;
    --blue-900: #0b1e39;

    --red-100: #fff9f7;
    --red-200: #fac396;
    --red-300: #f19761;
    --red-400: #e36d39;
    --red-500: #d13101;
    --red-600: #d11632;
    --red-700: #a30000;
    --red-800: #790200;
    --red-900: #640005;
    --red-pol: #ce001f;

    --gray-100: #fcfdff;
    --gray-200: #fafafa;
    --gray-250: #ededed;
    --gray-300: #d0d1d3;
    --gray-400: #8a96a1;
    --gray-500: #6f7181;
    --gray-600: #5c5d69;
    --gray-700: #444444;
    --gray-800: #2e2e33;
    --gray-900: #1b1b1f;

    --none: 0;
    --xxs: 4;
    --xs: 8;
    --s: 16;
    --m: 24;
    --l: 32;
    --xl: 48;
    --xxl: 64;
    --xxxl: 80;
}

/* SPACING */
.app-mb-0 {
    margin-bottom: 0!important;
}

.app-mb-4 {
    margin-bottom: 4px!important;
}

.app-mb-8 {
    margin-bottom: 8px!important;
}

.app-mb-10 {
    margin-bottom: 10px!important;
}

.app-mb-12 {
    margin-bottom: 12px!important;
}

.app-mb-16 {
    margin-bottom: 16px!important;
}

.app-mb-18 {
    margin-bottom: 18px!important;
}

.app-mb-20 {
    margin-bottom: 20px!important;
}

.app-mb-24 {
    margin-bottom: 24px!important;
}

.app-mb-28 {
    margin-bottom: 24px!important;
}

.app-mb-32 {
    margin-bottom: 24px!important;
}

.app-pl-32 {
    padding-left: 32px;
}

.app-mt-32 {
    margin-top: 32px;
}

.app-text-center {
    text-align: center!important;
}

/*360*/
.input-container {
    display: flex;
    align-items: center;
}

.input-container span {
    margin-right: 10px;
}

.app-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* APP LAYOUT */
.app-login-layout {
    width: 100%;
}

.app-login-layout-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
}

.app-login-layout-row-content {
    width: 100%;
    z-index: 1;
}

/*1024*/
@media (min-width: 769px) {
    .app-login-layout-row-content {
        max-width: 856px;
    }
}

/*1280*/
@media (min-width: 1201px) {
    .app-login-layout-row-content {
        max-width: 1112px;
    }
}

/*1440*/
@media (min-width: 1401px) {
    .app-login-layout-row-content {
        max-width: 1232px;
    }
}

.app-login-row {
    padding-top: 48px;
    padding-bottom: 40px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.app-default-row {
    background-color: #F5F5F5;
}

.app-login-tabs-row {
    padding-top: 16px;
    padding-bottom: 32px;
}

.app-navbar-fixed {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /* flex-direction: row; */
    /* align-items: center; */
    /* justify-content: flex-end; */
    width: 100%;
    background: transparent;
}

.app-navbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.app-navbar,
.navbar.app-navbar {
    padding: 0;
    height: 100%;
    justify-content: flex-end;
}

.app-navbar .navbar-nav {
    width: 100%;
    padding-right: 0!important;
}

.app-navbar .form-inline,
.app-navbar .nav-item,
.app-navbar .nav-item .nav-link {
    height: 100%;
}

.app-navbar .nav-item .nav-link {
    min-height: 48px;
}

.app-navbar .navbar-collapse {
    justify-content: flex-end;
}

.navbar-toggler-container {
    padding: 4px;
}

.app-navbar .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    height: 100%;
    text-underline-offset: 1px;
    cursor: pointer;
    padding: 0 24px!important;
    text-decoration: none!important;
    transition: color 0.3s ease;
    color: #FFFFFF!important;
    background-color: var(--blue-500)!important;
}

.app-navbar .nav-item .nav-link:visited,
.app-navbar .nav-item .nav-link:focus,
.app-navbar .nav-item .nav-link:hover {
    color: #FFFFFF!important;
}

.app-navbar .nav-item .nav-link.active {
    font-weight: 700;
}

.app-navbar .nav-item {
    box-sizing: border-box;
}

.app-navbar .nav-item:not(:last-child) {
    border-bottom: 1px solid var(--blue-400);
}


.app-navbar .navbar-toggler[aria-expanded="true"] {
    background-color: var(--blue-500)!important;
    border-radius: 0;
}

.app-navbar .navbar-toggler[aria-expanded="true"] .app-icon:before {
    color: #FFFFFF;
}

/*1280*/
@media (min-width: 1200px) {
    .app-navbar .nav-item .nav-link {
        color: var(--blue-500)!important;
        background-color: var(--white)!important;
    }

    .app-navbar .nav-item .nav-link:visited {
        color: var(--blue-500)!important;
    }

    .app-navbar .nav-item .nav-link:focus,
    .app-navbar .nav-item .nav-link:hover {
        color: #17345d!important;
    }

    .app-navbar .nav-item .nav-link.active {
        color: #17345d!important;
    }

    .app-navbar .nav-item:not(:last-child) {
        border-bottom: 0;
        margin-right: 4px;
    }
}

@media (min-width: 1024px) {
    .app-navbar-logo-container {
        position: relative;
        left: -84px;
    }
}

/*1280*/
@media (min-width: 1201px) {
    .app-navbar-logo-container {
        position: relative;
        left: 0;
    }
}

/*1280*/
@media (min-width: 1270px) {
    .app-navbar-logo-container {
        position: relative;
        left: -84px;
    }
}

.app-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99999;
}

.app-login-layout-navbar-row {
    position: sticky;
    top: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: var(--white);
    min-height: 48px;
    box-shadow: 0px 2px 3px 0px #00000021;
}

.app-login-layout-navbar-row:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 50%;
    background-color: var(--red-600);
}


/*1680*/
@media (min-width: 1601px) {
    .app-login-layout-navbar-row {
        padding: 10px 0;
    }

    .app-login-layout-navbar-row:before {
        top: 10px;
        bottom: 10px;
    }
}


.app-navbar-logo-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: var(--white);
    z-index: 999;
}

.app-navbar-logo-text {
    padding-left: 24px;
    line-height: 28px;
}

.app-navbar-logo-icon {
    height: 100%;
    background-color: var(--red-600);
    width: 48px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .app-navbar-logo-icon {
        width: 60px;
        padding: 0 12px;
    }
}

.app-navbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.app-navbar-content {
    display: flex;
    flex-direction: row;
    padding: 0 16px;
}

.app-navbar-container,
.app-login-layout-navbar-row-content {
    background-color: var(--white);
}

.app-navbar-logo-container .orzelek {
    height: 35px;
    margin: 0;
}

.app-navbar .navbar-toggler .app-icon:before {
    font-size: 32px;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: var(--blue-500);
    position: relative;
}

.app-navbar .navbar-toggler {
    border: 0;
    min-height: 48px;
}

.app-navbar .navbar-toggler-container {
    padding: 0;
}

/* APP LOGIN GRID */
.app-login-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 24px;
}

.app-login-grid-col {
    display: flex;
    flex-direction: column;
}

.app-login-grid-col .app-card {
    height: 100%;
}

/* APP LINK */
.app-link {
    font-family: firaSemiBold;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0em;
    background-color: transparent;
    border: none;
    color: var(--blue-500);
    min-width: auto;
    text-decoration: underline var(--blue-500);
}

.app-link.app-link--white {
    font-family: firaRegular;
    color: var(--white);
    text-decoration: underline var(--white);
}

.app-link:hover {
    text-decoration: none;
}

.app-link.app-link--inline-block {
    display: inline-block;
}

.app-link .fa-external-link {
    font-size: 14px;
}

/* APP CARD */
.app-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    background: var(--white);
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px #00000021;
    overflow: hidden;
}

.app-card__handler {
    position: relative;
    top: -120px;
}

.app-card__header {
    display: flex;
    flex-direction: row;
}

.app-card__element,
.app-card__header {
    width: 100%;
}

.app-card__element,
.app-card__header:not(.app-card__header--no-margin) {
    margin-bottom: 24px!important;
}

.app-card__content {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
}

.app-card__content-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.app-card__title {
    font-family: firaSemiBold;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    margin: 0;
}
.app-card__title.app-card__title--xl {
    font-size: 22px;
    line-height: 29px;
}

/* APP LIST */
.app-list {
    padding: 0;
    margin-bottom: 0;
}

.app-list.app-list--left-padding {
    padding-left: 32px;
}

.app-list.app-list--flat > li {
    padding-left: 0!important;
}

.app-list.app-list--numeric > li {
    list-style-type: decimal;
    list-style-position: inside;
}

.app-list > li {
    list-style-type: none;
    padding-left: 20px;
    position: relative;
}

.app-list.app-list--items-indent {
    padding-left: 18px;
}

.app-list.app-list--items-indent > li {
    padding-left: 0;
    list-style-position: outside!important;
}

.app-list.app-list--bold-marker li::marker {
    font-weight: bold;
}

.app-list > li:not(:last-child) {
    margin-bottom: 8px;
}

.app-list:not(.app-list--no-style):not(.app-list.app-list--numeric) > li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--red-500);
    font-weight: bold;
    display: inline-block;
}

.app-list.app-list--no-style > li  {
    padding-left: 0;
}

/* APP LOGIN BUTTON */
a.app-button,
.app-button {
    display: block;
    width: 100%;
    padding: 15px 0px 15px 0px;
    font-family: firaRegular;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: center;
    border: 0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.app-button--bolded {
    font-family: firaMedium;
}

.app-button--inline {
    display: inline;
    width: auto;
    padding: 7px 32px;
    min-width: 168px;
}

.app-button--red {
    color: var(--white);
    background-color: var(--red-500);
}

a.app-button--red:hover,
.app-button--red:hover {
    color: var(--white);
    background-color: var(--red-700);
    text-decoration: none;
}

.app-button--blue {
    color: var(--white);
    background-color: var(--blue-500);
}

a.app-button--blue:hover,
.app-button--blue:hover {
    color: var(--white);
    background-color: var(--blue-700);
    text-decoration: none;
}

.app-button--white {
    background-color: var(--white);
    border: 1px solid var(--blue-500);
    color: var(--blue-500);
}

a.app-button--white:hover,
.app-button--white:hover {
    background-color: var(--blue-700);
    border-color: transparent;
    color: var(--white);
    text-decoration: none;
}

.app-button-icon,
.app-button.app-button-icon {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 32px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    padding: 0;
}

.app-button--no-border,
.app-button.app-button--no-border {
    border: 0;
}


/* APP FORM GROUP */
.app-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.app-form-group > label {
    font-family: firaSemiBold;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    margin-bottom: 5px;
    color: #444444;
}

.form-group .input-group > .form-control.app-form-input,
.app-form-input {
    display: flex;
    flex: 1;
    height: 34px;
    box-sizing: border-box;
    line-height: 32px;
    padding: 0 16px;
    border-radius: 3px;
    font-size: 15px;
    font-family: firaRegular;
    border: 1px solid var(--gray-500);
    background-color: var(--gray-100);
    color: #000;
}

.app-navbar .nav-item .nav-link:focus,
.app-tabs .nav-pills .nav-link:focus,
.app-logo-link:focus,
.app-link:focus,
.app-link:active,
.app-button:focus,
.app-checkbox input[type="checkbox"]:focus,
.form-group .input-group.input-group--with-button .app-form-input-button:focus,
.form-group .input-group.input-group--with-button .app-form-input-button:active,
.form-group .input-group > .form-control.app-form-input:focus,
.form-group .input-group > .form-control.app-form-input:active,
.app-form-input:active,
.app-form-input:focus {
    outline: none!important;
    border-color: #0064a3!important;
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.app-navbar .nav-item .nav-link:focus-visible,
.app-tabs .nav-pills .nav-link:focus-visible,
.app-logo-link:focus-visible,
.app-link:focus-visible,
.app-button:focus-visible,
.app-checkbox input[type="checkbox"]:focus-visible,
.form-group .input-group.input-group--with-button .app-form-input-button:focus-visible,
.form-group .input-group > .form-control.app-form-input:focus-visible,
.app-form-input:focus-visible {
    outline: none!important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0064a3;
}

.app-link.app-link--white:focus {
    outline: none!important;
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #ffffff !important;
}

.app-link.app-link--white:focus-visible {
    box-shadow: 0 0 0 2px #ffffff;
    outline: none;
}

.form-group .input-group.input-group--with-button .app-form-input-button:focus,
.form-group .input-group.input-group--with-button .app-form-input-button:active {
    border-left: 1px solid #0064a3!important;
}

.form-control.app-form-input::placeholder,
.app-form-input::placeholder {
    font-family: firaRegular;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
}

.form-group .input-group.input-group--with-button .form-control.app-form-input,
.input-group--with-button .form-control.app-form-input {
    border-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.form-group .input-group.input-group--with-button .app-form-input-button {
    background-color: white !important;
    border-left: none !important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 1px solid var(--gray-500)!important;
    border-bottom: 1px solid var(--gray-500)!important;
    border-right: 1px solid var(--gray-500)!important;
    z-index: 1;
}

.form-group .input-group.input-group--with-button .app-form-input-button:focus {
    border-left: none !important;
}

/* APP CHECKBOX */
.app-checkbox label {
    display: flex;
    flex-direction: row;
    color: #444444;
    font-family: firaRegular;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0;
    align-items: center;
    user-select: none;
}

.app-checkbox input[type="checkbox"]  {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);
    margin: 0;
    font: inherit;
    color: currentColor;
    transform: translateY(-0.075em);
    place-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 21px;
    min-width: 21px;
    height: 21px;
    border: 1px solid #6f7181;
    border-radius: 5px;
    margin-right: 8px;
}

.app-checkbox input[type="checkbox"]::before {
    content: "";
}

.app-checkbox input[type="checkbox"]:checked::before {
    content: "";
    display: flex;
    width: 13px;
    height: 13px;
    background-color: #17345d;
    border-radius: 3px;
}
    /* APP PARAGRAPH */
.app-paragraph {
    font-family: openSansRegular;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 0;
    max-width: 980px;
}

.app-paragraph.app-paragraph--white {
    color: var(--white);
}

.app-paragraph.app-paragraph--inline-block {
    display: inline-block;
}

.app-login-paragraph {
    display: flex;
    flex-direction: column;
}

/* APP ALERT */
.app-alert {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    gap: 8px;
    position: relative;
    background-color: var(--white);
    border-left: 4px solid var(--blue-500);
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px #00000021;
    transition: opacity 0.3s ease-in-out;
}

.app-alert__message .app-paragraph {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 18px;
    font-family: firaRegular;
}

.app-alert__content {
    display: flex;
    flex-direction: column;
}

.app-alert__icon-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.fa.app-alert__icon,
.app-alert__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 21px;
}

.app-alert__title {
    font-family: firaSemiBold;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    margin-top: 3px;
    margin-bottom: 8px;
}

.app-alert--error {
    border-color: var( --red-600);
    background: var(--white);
}

.app-alert--error .app-alert__icon {
    color: var(--red-600);
}

.app-alert--warning {
    border-color: var(--yellow-500);
    background: var(--white);
}

.app-alert--warning .app-alert__icon {
    color: var(--yellow-500);
}


.app-alert--primary {
    border-color: var(--blue-600);
    background: var(--white);
}

.app-alert--primary .app-alert__icon {
    color: var(--blue-600);
}

@media (max-width: 577px) {
    .app-alert .app-button {
        padding-left: 0!important;
        padding-right: 0!important;
        width: 100%!important;
    }

    .app-alert__icon-container.app-alert__icon-container--mobile {
        position: absolute;
        right: 0;
        padding: 12px 16px;
    }

    .app-alert {
        position: relative;
    }
}

.app-logo {
    height: 44px;
    margin-bottom: 34px;
}

.app-logo[src=""] {
    display:none;
}

.app-text-lead {
    font-family: firaMedium;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}

.app-list.app-welcome-list {
    padding-left: 32px;
    margin-bottom: 32px;
}

.app-welcome-list-title {
    margin-bottom: 8px;
}

.app-toast {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 999;
    top: 90px;
    right: 0;
    width: 100%;
    max-width: 682px;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 577px) {
    .app-toast {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.app-toast > * {
    margin-bottom: 24px;
}

.app-icon {
    font-family: cezIcons;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.app-icon--error:before {
    content: "\e91c";
}

.app-icon--close:before {
    content: "\e905";
}

.app-icon--warning:before {
    content: "\e91f";
}

.app-icon--info:before {
    content: "\e91d";
}

.app-icon--warning:before {
    content: "\e91f";
}

.app-icon--menu:before {
    content: "\e911";
}

.app-icon--small {
    font-size: 18px;
}

.app-icon--large {
    font-size: 32px;
}

/*680*/
@media (min-width: 577px) {
    .app-card {
        padding: 24px;
    }

    .app-login-paragraph{
        display: block;
        line-height: 21px;
    }
}

/*1024*/
@media (min-width: 769px) {
    .app-card {
        padding: 32px;
    }

    .app-login-row {
        background-position: right center;
    }

    .app-login-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-login-grid-col--full-width {
        grid-column: span 2;
    }
}

/*1280*/
@media (min-width: 1201px) {
    .app-login-row {
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    }
}

/*1440*/
@media (min-width: 1401px) {

}

/*1680*/
@media (min-width: 1601px) {

}

/*default*/
@media (min-width: 1901px) {

}

.app-header-1 {
     font-family: firaSemiBold;
     font-size: 26px;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: 0em;
     text-align: left;
     color: var(--black);
     margin: 0;
 }

.app-header-2 {
    font-family: firaSemiBold;
    font-size: 22px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: left;
}

.app-header-3 {
    font-family: firaSemiBold;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
}

.app-header-4 {
    font-family: firaSemiBold;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
}

.app-header-5 {
    font-family: firaSemiBold;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
}

.app-page-banner {
    height: 68px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.app-page-banner__image-container {
    display: flex;
    align-items: center;
}

.app-page-banner .app-page-banner__image {
    height: 28px;
}

.app-page-row-content {
    padding-top: 12px;
    padding-bottom: 80px;
}

.app-page-row-content.app-page-row-content--full-width-cards-mobile .app-card {
    margin-left: -16px;
    width: 100vw;
}

@media (min-width: 769px) {
    .app-page-row-content.app-page-row-content--full-width-cards-mobile .app-card {
        margin-left: 0;
        width: 100%;
    }
}

.app-image-mock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 600px;
    background-color: #e3e1e1;
    color: #929fa1;
}

.app-login-footer {
    background-color: var(--blue-700);
}

.app-footer-logo {
    height: 30px;
    color: var(--white);
}

.app-footer-grid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    gap: 24px;
}

.app-login-footer-content {
    padding-top: 32px;
    padding-bottom: 32px;
}

.app-footer-grid-column:not(:first-child):not(:last-child) {
    margin-bottom: 8px;
}

.app-login-footer-logo-content {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-cez-logo {
    height: 41px;
}

.app-login-logo-footer {
    background-color: var(--white);
}

.app-footer__version {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: var(--blue-700);
    font-size: 12px;
    padding: 0 2px;
}

/*1024*/
@media (min-width: 769px) {
    .app-footer-grid {
        grid-template-rows: auto 1fr;
        grid-template-columns: 0.3fr 0.3fr 0.4fr;
    }

    .app-footer-grid-logo-column {
        grid-column: span 3;
    }

    .app-footer-grid-column {
        margin-bottom: 0;
    }
}

/*1680*/
@media (min-width: 1601px) {
    .app-login-footer-logo-content {
        height: 80px;
    }
}

.app-tabs .nav-pills .nav-link.active {
    text-decoration: none!important;
    position: relative;
    font-family: firaSemiBold;
}

.app-tabs .nav-pills .nav-link.active:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-color: var(--blue-500);
}

.app-tabs .nav-pills .nav-item {
    flex: 1;
}

.app-tabs .nav-pills .nav-item:not(:last-child) {
    margin-right: 4px;
}

.app-tabs .nav-pills .nav-link {
    background-color: white !important;
    color: #0064A3 !important;
    text-decoration: underline !important;
    text-underline-position: under !important;
    padding: 10px 8px;
    font-family: firaRegular;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: center;
}

/*680*/
@media (min-width: 577px) {
    .app-tabs .nav-pills .nav-link {
        padding: 10px 24px;
    }

    .app-tabs .nav-pills .nav-item {
        flex: unset;
    }
}