@font-face {
    font-family: 'Golos';
    src: url('../fonts/golos-regular.ttf');
}
@font-face {
    font-family: 'GolosM';
    src: url('../fonts/golos-medium.ttf');
}
@font-face {
    font-family: 'GolosDB';
    src: url('../fonts/golost-dbold.ttf');
}
@font-face {
    font-family: 'GolosUI';
    src: url('../fonts/golos-ul-regular.ttf');
}
@font-face {
    font-family: 'GolosUIM';
    src: url('../fonts/golos-ul-medium.ttf');
}

body.webbpm.account-applications {
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.webbpm.account-applications {
    --white: #fff;
    --color-text-primary: rgba(2, 12, 18, 0.9);
    --color-text-active: #107abc;
    --color-text-mute: rgba(2, 12, 18, 0.58);
    --color-link: #015e98;
    --color-text-secondary: #b1daea;
    --body-bg: #f8fbfc;
    --btn-border: rgba(1, 72, 116, 0.11);
    --btn-bg: rgba(25, 164, 233, 0.1);
    --btn-active-bg: linear-gradient(155deg, #1491cf 0%, #0f68a0 100%);
    --btn-shadow: 0 3px 8px 0 rgba(7, 46, 71, 0.12);

    --input-bg: rgba(219, 231, 242, 0.8);
    --input-border: rgba(53, 126, 172, 0.2);
    --panel-bg: rgba(53, 126, 172, 0.05);
    --page-bg: rgba(38, 117, 166, 0.03);
    --bg-blur-40: blur(20px);
    --bg-blur-20: blur(10px);
    --bg-shadow: 4px 4px 2px 0 rgba(3, 20, 36, 0.4);
    --color-primary-20: rgba(244, 252, 255, 0.2);
    --color-primary-5: rgba(244, 252, 255, 0.05);
    --color-success: #00db5d;
    --color-error: #f91e11;
    --color-dark: #070e1a;
    --color-dark-20: rgba(7, 14, 26, 0.2);
    --color-dark-40: rgba(7, 14, 26, 0.4);
    --color-tooltip: rgba(8, 40, 59, 0.8);
    --size-text-header: 32px;
    --size-text-title: 24px;
    --size-text-subtitle: 18px;
    --size-text-primary: 14px;
    --size-text-secondary: 12px;
    --size-text-mini: 10px;

    --indent-xlarge: 40px;
    --indent-large: 32px;
    --indent-medium: 24px;
    --indent-xbase: 20px;
    --indent-base: 16px;
    --indent-small: 12px;
    --indent-mini: 8px;
    --indent-xmini: 4px;
    --color-success: #00db5d;
    --color-dark-20: rgba(7, 14, 26, 0.2);
    --w-content: calc((100vw - 300px)/100);
    --indent-huge: min(calc(2.4*var(--w-content)), 3rem); /*48*/
    --w-screen: min(calc(2*var(--w-content)), 2.5rem); /*40*/
    --h-header: 60px;
}
.webbpm.account-applications [class*="ag-theme-"] {
    --ag-modal-overlay-background-color: transparent !important;
}

.webbpm.account-applications a {
    color: var(--color-link);
    text-decoration: none;
}
.webbpm.account-applications a:is(:hover, :focus, :active) {
    color: var(--color-link-hover);
}

.webbpm.account-applications .header {
    font-family: 'Golos';
    min-height: var(--h-header);
    border: 1px solid var(--btn-border);
    box-shadow: none;
}
.webbpm.account-applications .header .header-logo {
    margin-left: var(--w-screen);
}
.webbpm.account-applications .header .header-logo a {
    color: var(--white);
    font-family: 'Golos';
}
.webbpm.account-applications .header .header-logo .logo {
    position: relative;
    display: flex;
    align-items: center;
}
.webbpm.account-applications .header .header-logo .logo a {
    position: absolute;
    width: 62px;
    height: 40px;
    background: url(../img/svg/mil-logo.svg) no-repeat 0 50%;
}
.webbpm.account-applications .header .header-logo .main-page {
    color: var(--color-link);
    font-family: 'GolosM';
    font-size: var(--size-text-primary);
    margin-left: calc(62px + 16px);
}

.webbpm.account-applications .header-menu > * {
    margin-right: 20px;
}
.webbpm.account-applications .header-menu > *:last-child {
    margin-right: 0;
}
.webbpm.account-applications .header-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--size-text-primary);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background-color: var(--color-text-primary);
    outline: transparent;
}
.webbpm.account-applications .header-menu .nav-link::after {
    display: none; 
}
.webbpm.account-applications .header-menu .nav-link:hover,
.webbpm.account-applications .header-menu .nav-link:focus,
.webbpm.account-applications .header-menu .nav-link:active {
    background-color: var(--color-link);
}
.webbpm.account-applications .header-menu .logout .user-info {
    display: flex;
    flex-direction: column;    
    color: var(--black);
    padding: 4px 20px;
    background: transparent;
    cursor: default;
}
.webbpm.account-applications .header-menu .logout .user-info > * {
    display: flex;
    padding-bottom: 10px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.webbpm.account-applications .header-menu .logout .user-info > *:last-child {
    margin-bottom: 0;
}
.webbpm.account-applications .header-menu .logout .user-info .user-fio {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
.webbpm.account-applications .header-menu .logout .user-info .user-department {
    color: #a0b1bc;
    line-height: 1.2;
}

.webbpm.account-applications .header > div > * {
    position: relative;
    display: flex;
    align-items: center;
}
.webbpm.account-applications .header .dropdown-menu.show {
    top: 69px !important;
    right: 0px !important;
    left: auto !important;
    transform: none !important;
    margin: 0;    
    border: 0;
    border-radius: 0 0 10px 10px;
    background-color: var(--white);
    box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
}
.webbpm.account-applications .header .dropdown-menu.show .dropdown-menu-inner {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.webbpm.account-applications .header :is(process, admin-menu) .dropdown-menu.show {
    top: 49px !important;
}
.webbpm.account-applications .header .logout .dropdown-menu.show {
    width: 300px;
}
.webbpm.account-applications .dropdown-item {
    padding: 4px 20px;
}
.webbpm.account-applications .dropdown-item:hover,
.webbpm.account-applications .dropdown-item:focus,
.webbpm.account-applications .dropdown-item:active {
    color: var(--color-link);
    background-color: transparent;
    outline: transparent;
}

.webbpm.account-applications footer {
    height: var(--h-footer);
    border: 0;
    background-color: var(--color-text-primary);
}

.webbpm.account-applications .container {
    padding-top: var(--h-header);
    bottom: var(--h-footer);
}
.webbpm.account-applications .container-inside {
    display: flex;
    flex-direction: column;
    font-family: 'Golos';
    height: 100%;
    padding: 0;
    overflow: auto;
}
.webbpm.account-applications .container-inside > div {
    flex: 1;
    padding: var(--indent-huge) var(--w-screen);
}

/*----------------- Login ---------------- */
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) {
    color: var(--color-text-primary);
    font-size: var(--size-text-secondary);
    width: 500px;
    padding: 32px;
    margin: 30px auto;
    border: 1px solid var(--btn-border);
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: var(--bg-shadow);
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) :is(h1, h2) {
    color: var(--color-form);
    font-family: 'GolosM';
    font-size: var(--size-text-subtitle);
    text-align: left;
    margin-bottom: 0;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .logo {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 76px;
    padding: 0 0 0 128px;
    margin-bottom: 32px;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .logo::after {
    position: absolute;
    content: "";
    left: 0;
    width: 112px;
    height: 72px;
    background-image: url(../img/svg/form-logo.svg);
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .row {
    position: relative;
    margin-bottom: 0;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .row + .row {
    margin-top: 20px;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input {
     font-size: var(--size-text-primary) !important;
    height: 48px;
    padding-top: 20px;
    padding-left: 16px;
    border: 0;
    border-radius: 0 var(--indent-xmini) 0 0;
    background-color: var(--input-bg);
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input[type="password"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input[type="password"] ~ .input-group-append > .input-group-text {
    height: 48px !important;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input + label {
    position: absolute;
    top: 16px;
    left: 16px;
    pointer-events: none;
    transition: all 200ms;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input:focus + label,
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) input:not(:placeholder-shown) + label {
    top: 4px;
    font-size: var(--size-text-mini);
    z-index: 20;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .msg-text {
    margin-top: 12px;
}
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) .btn-box {
    margin-top: 32px;
}

.webbpm.account-applications .form-signin .row.registration > * + *,
.webbpm.account-applications .form-signin .login-btn-box .password,
.webbpm.account-applications .form-signin .login-btn-box .btn + .btn {
    margin-left: 32px;
}
/*--------------- end Login -------------- */

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-text-primary) transparent;
    }
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--color-text-mute);
}
::-webkit-scrollbar-track {
    height: 4px;
    background-color: transparent;
}

.webbpm.account-applications .progress {
    width: 64px;
    height: 64px;
    border: 5px dotted var(--color-link);
    border-radius: 100%;
    display: inline-block;
    position: relative;
    background: transparent;
    box-sizing: border-box;
    animation: rotation 2.5s linear infinite;
}
.webbpm.account-applications .loader.modal .modal-content {
    border: 0;
    background: transparent;
    box-shadow: none;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}