body {
    background-color: #DDEBFF;
    background-color: #EBF3FA;
    color: #21272F;
    font-family: 'Inter', sans-serif;
}

.dn {
    display: none
}

a:hover {
    text-decoration: none;
}

select {
    font-size: 13px;
}

.btn-primary {
    padding: 8px 21px;
    border-radius: 6px;
    background-color: #004E9C;
    background: radial-gradient(315.18% 315.18% at -124.11% -101.79%, #004E9C 11.1%, #0368CD 85.21%);
    border: 1px #004E9C solid;
    font-size: 13px;
    color: white;
    filter: drop-shadow(4px 3px 5px rgba(136, 165, 191, 0.48));
}

.btn-primary:hover {
    background-color: #3d75ce;
    border: 1px #3d75ce solid;
}

button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

.btn-empty {
    display: inline-block;
    font-weight: 400;
    color: #004E9C;
    text-align: center;
    vertical-align: middle;
    padding: 7px 16px;
    user-select: none;
    border-radius: 6px;
    border: 1.2px #004E9C solid;
    background-color: transparent;
    font-size: 14px;
    cursor: pointer;
    background-color: white;
    filter: drop-shadow(4px 3px 5px rgba(136, 165, 191, 0.48));
}

input[type="file"] {
    display: none;
}

#pagination .file-value {
    margin-top: 40px;
    margin-bottom: 50px;
}

#pagination .pagination {
    display: inline-flex;
}

#content {
    transition: margin-left .5s;
    margin-left: 60px;
    font-size: 12px;
    position: inherit;
}

/****
***** login form
****/
.login-img {
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background: linear-gradient(129.58deg, #E6EEF8 0%, #FFFFFF 111.48%);
}

.login-img img {
    height: 100vh;
}

.login-form-wrap {
    height: 100vh;
}

.login-form-wrap .text-enter {
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 20px;
}

.login-form-wrap #login-form {
    width: 270px;
}

.login-form-wrap label {
    color: #546E7A;
    font-size: 13px;
    padding-bottom: 0px;
}

.login-form-wrap .login-logo {
    width: 189px;
    margin-bottom: 20px;
    height: 33px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../icon/systemator.svg);
}

.login-form-wrap input {
    background: #FFFFFF;
    border: 1px solid #ECEFF1;
    box-sizing: border-box;
    border-radius: 4px;
    height: 30px;
    padding: 6px;
    color: #4b4b4b;
}

.login-form-wrap .btn-primary {
    background: #3F51B5;
}

.login-form-wrap .form-block {
    padding: 50px 70px 40px 70px;
    background: white;
}

.login-form-wrap .rememberme label {
    line-height: 30px;
    padding-left: 7px;
}

.login-form-wrap #loginform-rememberme {
    width: 17px;
}

.login-img-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

/****
***** AJAX LOADER WHITE
****/
.lds-dual-ring-sm {
    display: inline-block;
    width: 22px;
    height: 22px;
}

.lds-dual-ring-sm:after {
    content: " ";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring-sm 1.2s linear infinite;
}

@keyframes lds-dual-ring-sm {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/****
***** AJAX LOADER GRAY
****/
.lds-dual-ring {
    display: inline-block;
    width: 35px;
    height: 35px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #a1a1a1;
    border-color: #A1A1A1 transparent #A1A1A1 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/****
***** Menu
****/

.left-menu {
    height: 100vh;
    position: fixed;
    width: 60px;
    z-index: 11;
    top: 0;
    left: 0;
    background-color: #5667DE;
    background: linear-gradient(to bottom, #566ADF, #5564C1);
    transition: 0.5s;
    display: flex;
    flex-direction: column;
}

.menu-btn {
    width: 3px;
    height: 60px;
    position: absolute;
    z-index: 4;
    right: 0px;;
}

.menu-round-img {
    width: 230px;
    height: 255px;
    position: absolute;
    background-color: white;
    z-index: 1;
    border-radius: 50%;
    opacity: 0.04;
    left: -124px;
    top: -141px;
    transform: rotate(73deg);
}

.dec {
    height: 1px;
}

.dec-img {
    width: 239px;
    height: 200px;
    background: white;
    border-radius: 50%;
    left: -51px;
    top: -74px;
    z-index: 1;
    opacity: 0.05;
    position: relative;
}

.left-menu mbt-r:after {
    content: "";
    position: fixed;
    bottom: -92px;
    width: 239px;
    height: 200px;
    background: white;
    border-radius: 50%;
    left: -51px;
    opacity: 0.05;
    z-index: 1;
}

.mh300x {
    max-height: 300px;
}

.menu-btn:before {
    content: "";
    background: url(../icon/left-right.svg) RIGHT CENTER NO-REPEAT;
    margin-left: 100%;
    height: 49px;
    background-color: #F1F1F1;
    margin-top: 5px;
    width: 13px;
    cursor: pointer;
    position: absolute;
    border: 2px solid #F1F1F1;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.left-menu.open .menu-btn:before {
    background-position: left;
    background-position-x: 1px;
}

.left-menu .logo {
    margin-top: 20px;
    position: relative;
    z-index: 3;
}

/*****NOTICE*********/
#notice-menu .no-gutters {
    padding: 14px;
    padding-left: 0px;
    -webkit-transition: background 0.5s ease, color 0.9s ease;
}

#notice-menu .new {
    background-color: #f7f7f7;
}

#notice-menu .modal-header {
    width: 100%;
    border-bottom: 0px;
    color: #828282;
}

#notice-menu .close {
    position: absolute;
    left: 0px;
}

#notice-menu .content {
    color: #aaaaaa;
}

#notice-menu .noice-img {
    width: 35px;
    border-radius: 50%;
}

#notice-menu > .container {
    width: 300px;
}

#notice-menu .card-text {
    font-size: 13px;
    margin-bottom: 0.3rem;
    line-height: 17px;
}

/******SCROLL */
.notice-scroll-footer {
    position: absolute;
    bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.viewport-wrapper {
    height: 84vh;
    position: relative;
    overflow: hidden;
}

.viewport {
    width: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
}

.notice-content {
    position: absolute;
    left: 0;
    right: 0;
}

.notice-content-scroll, .helper-content-scroll {
    height: 100%;
    overflow-y: scroll;
    right: -17px;
}

.notice-content-list {
    padding: 0 20px 0 17px;
    -webkit-user-select: none;
    user-select: none;
}

.notice-content-list li + li {
    margin-top: 10px;
}

/* scroll bar */
.scrollbar, .scroller {
    width: 4px;
    position: absolute;
    top: 0;
}

.scrollbar {
    right: 0;
    bottom: 0;
}

.scroller {
    left: 0;
    border-radius: 2px;
    background: #ccc;
    cursor: pointer;
}

#notice-menu .notice-body {
    --margin-right: 10px;
}

/* Hacks */
_:-ms-input-placeholder, :root .notice-content-list {
    padding-left: 20px;
}

@media screen and (max-width: 670px) {
    h1 {
        text-align: center;
    }

    .wrap > div .notice-scroll + .notice-scroll {
        margin-left: auto;
    }

    .notice-scroll, .helper-scroll {
        float: none;
        margin: 0 auto 30px;
    }
}

/*************************/

.right-notice, .right-helper {
    right: 0px;
    width: 0px;
    overflow: hidden;
    background-color: white;
    height: 100%;
    position: fixed;
    z-index: 2005;
    top: 0;
    overflow-x: hidden;
    transition: 0.5s;
= padding-top: 20 px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 4px 1px rgba(0, 0, 0, .2);
}

.left-menu .mbt {
    flex-grow: 2;
    flex-wrap: wrap;
    height: 100%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.left-menu .link,
.left-menu .logout {
    padding: 12px 8px 12px 6px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
    white-space: nowrap;
    line-height: 17px;
}

.left-menu .link a,
.left-menu .logout {
    color: #ffffff;
}

.left-menu .logo a {
    padding: 0;
}

.left-menu .btn:active,
.left-menu .btn:focus {
    border: 1px transparent solid;
}

.btn:active, .btn:focus {
    outline: none;
}

.left-menu .btn::-moz-focus-inner {
    border: 0;
}

#left-menu::-webkit-scrollbar {
    display: none;
}

#left-menu {
    -ms-overflow-style: none;
}

#left-menu.open {
    width: 230px;
}

@media screen and (max-height: 450px) {
    .left-menu {
        padding-top: 15px;
    }

    .left-menu a {
        font-size: 18px;
    }
}

/*  !Menu */

/****
***** Nav
****/

#left-menu .ico {
    width: 18px;
    height: 20px;
    display: inline-flex;
    background-color: #d2d2d2;
    position: relative;
    cursor: pointer;
}

.logo_img,
#left-menu .user_img {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 25px;
    background: url(../icon/logo-default.svg) no-repeat center center;
    margin-left: 10px;
}

#left-menu .company_name {
    padding-left: 10px;
    font-size: 20px;
    font-weight: 600;
    color: white;
    visibility: hidden;
    opacity: 0;
    transition: .55s opacity, .55s visibility;
    transition-delay: .15s;
    overflow: hidden;
}

.company_name.hide::after {
    display: none
}

.mobile-menu .ico-ring-white .with-count::before {
    content: attr(ring-count);
    color: white;
    font-size: 10px;
    position: relative;
    border-radius: 3px;
    left: 14px;
    top: -21px;
    text-align: center;
    background-color: red;
    padding: 0px 2px;
}

#left-menu.open .logo .company_name {
    opacity: 1;
    visibility: visible;
}

#left-menu .line {
    color: white;
    height: 1px;
    width: 100%;
    border-top: 2px white solid;
    opacity: 0.2;
}

#left-menu .link.sub a:after {
    content: "";
    display: inline-block;
    background: url(../icon/up.svg) no-repeat center center;
    left: 8px;
    position: relative;
    width: 14px;
    top: 2px;
    height: 12px;
    transition: transform 0.4s ease;
}

#left-menu .sub a:not(.collapsed):after {
    transform: rotate(180deg);
}

#left-menu .sl {
    transition-duration: 1s;
    -webkit-transition: max-height .5s, padding .5s;
    transition: max-height .5s, padding .5s;
}

#left-menu .nmenu {
    height: 100%;
    border: 1px #ff000000 solid;
}

.nmenu-bottom {
    position: relative;
    z-index: 4;
}

#left-menu .nmenu .m-row {
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 15px;
}

#left-menu .nmenu .m-row.active .h-lnk:before {
    content: "";
    width: 52px;
    height: 46px;
    position: absolute;
    margin-top: -2px;
    left: 8px;
    border-radius: 8px 0px 0px 8px;
    transition: 0.5s;
    background: #FAFBFF;
    box-shadow: inset 4px 4px 4px rgba(0, 18, 51, 0.07);
}

#left-menu.open .nmenu .m-row.active .h-lnk:before {
    width: 222px;
}

#left-menu .active .icon_orgchart, .mobile-menu .active .icon_orgchart {
    background: url(../icon/orgchrt-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_orgchart, .mobile-menu .icon_orgchart {
    background: url(../icon/orgchrt.svg);
}

#left-menu .icon_desktop, .mobile-menu .icon_desktop {
    background: url(../icon/desktop.svg);
}

#left-menu .active .icon_desktop, .mobile-menu .active .icon_desktop {
    background: url(../icon/desktop-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_plan, .mobile-menu .icon_plan {
    background: url(../icon/plan.svg);
}

.mobile-menu .ico-logout {
    background: url(../icon/logout-white.svg) no-repeat center center;
}

.mobile-menu .ico-profile {
    background: url(../icon/user-profile-white.svg) no-repeat center center;
}

#left-menu .active .icon_plan, .mobile-menu .active .icon_plan {
    background: url(../icon/plan-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_func, .mobile-menu .icon_func {
    background: url(../icon/func.svg);
}

#left-menu .active .icon_func, .mobile-menu .active .icon_func {
    background: url(../icon/func-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_docum, .mobile-menu .icon_docum {
    background: url(../icon/docum.svg);
}
#left-menu .active .icon_docum, .mobile-menu .active .icon_docum {
    background: url(../icon/docum-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_chart, .mobile-menu .icon_chart {
    background: url(../icon/chart.svg);
}

#left-menu .active .icon_chart, .mobile-menu .active .icon_chart {
    background: url(../icon/chart-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_cabinet {
    background: url(../icon/cabinet.svg);
}

#left-menu .icon_dashb {
    background: url(../icon/dashb.svg);
}

#left-menu .icon_board {
    background: url(../icon/board.svg);
}

#left-menu .icon_setting, .mobile-menu .icon_setting {
    background: url(../icon/setting.svg);
}

#left-menu .active .icon_setting, .mobile-menu .active .icon_setting {
    background: url(../icon/setting-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon_staff {
    background: url(../icon/staff.svg);
}

#left-menu .icon_job_descr {
    background: url(../icon/job_descr.svg);
}

.icon_ring {
    background: url(../icon/ring.svg);
}

#left-menu .icon_teach, .mobile-menu .icon_teach {
    background: url(../icon/teach.svg);
}

#left-menu .active .icon_teach, .mobile-menu .active .icon_teach {
    background: url(../icon/teach-h.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#left-menu .icon, .mobile-menu .icon {
    display: inline;
    padding: 10px 15px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 12px;
    border: 1px #ffffff00 solid;
}

#left-menu .link {
    padding-left: 5px;
    display: inline-block;
    font-size: 14px;
    transition: .55s opacity, .55s visibility;
    transition-delay: .15s;
    color: white;
    opacity: 0;
    visibility: hidden;
}

#left-menu .active .link a {
    color: #0466C8;
}

#left-menu .subm-body {
    overflow: hidden;
}

#left-menu .subm-body .link {
    font-size: 13px;
}

#left-menu.open .nmenu .link {
    opacity: 0.87;
    visibility: visible;
}

#left-menu .nmenu > .icon, #left-menu .nmenu > .link {
    -ms-flex-preferred-size: 0;
    -ms-flex-positive: 1;
    min-width: 0;
    max-width: 100%;
}

#left-menu .company-menu .dropdown-menu {
    background-color: transparent;
    border: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

#left-menu .company-menu .dropdown-menu .dropdown-item {
    color: white;
    background-color: #5E71DE;
    padding: 7px 11px;
    font-size: 13px;
}

#left-menu .company-menu .dropdown-menu .dropdown-item:hover {
    background-color: #6476dc;
}

/****************** ICON **************/
i.ico {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-flex;
    top: 3px;
}

.icon-btn {
    width: 30px;
    height: 30px;

    -webkit-box-shadow: 0 0 3px rgba(160, 166, 174, .7);
    box-shadow: 0 0 3px rgba(160, 166, 174, .7);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.5s;
    display: block;
    background-color: white;
}

.load-img {
    background: url(../icon/load-img.svg) no-repeat center center;
}

.ico-open {
    background: url(../icon/open.svg) no-repeat center center;
    background-size: 60%;
}

.ico-clip {
    background: url(../icon/clip.svg) no-repeat center center;
}

.ico-ring-white {
    background: url(../icon/ring-white.svg) no-repeat center center;
}

.ico-tr-clip {
    background: url(../icon/training-clip.svg) no-repeat center center;
}

.ico-tr-play {
    background: url(../icon/training-play.svg) no-repeat center center;
}

.ico-confirmed-plan {
    background: url(../icon/confirmed-plan.svg) no-repeat center center;
}

.ico-request {
    background: url(../icon/request.svg) no-repeat center center;
}

.ico-clock {
    background: url(../icon/clock.svg) no-repeat center center;
    top: 0px !important;
}

.ico-check {
    background: url(../icon/check.svg) no-repeat center center;
    width: 22px !important;
}

.ico-pc {
    background: url(../icon/pc.svg) no-repeat center center;
}

.ico-coube {
    background: url(../icon/coube.svg) no-repeat center center;
    background-size: contain;
}

.ico-download {
    background: url(../icon/download.svg) no-repeat center center;
    background-size: 60%;
}

.ico-user {
    background: url(../icon/user.svg) no-repeat center center;
    background-size: 60%;
}

.ico-busket {
    background: url(../icon/busket.svg) no-repeat center center;
}

.ico-cancel {
    background: url(../icon/close.svg) no-repeat center center;
}

.ico-helper {
    background: url(../icon/helper.svg) no-repeat center center;
    cursor: pointer;
}

.ico-helper-white {
    background: url(../icon/helper-white.svg) no-repeat center center;
    cursor: pointer;
}

.ico-excel {
    background: url(../icon/excel.svg) no-repeat center center;
}

.ico-profile {
    background: url(../icon/user-profile.svg) no-repeat center center;
}

.ico-logout {
    background: url(../icon/logout.svg) no-repeat center center;
}

.menu-icon {
    background: url(../icon/menu.svg) no-repeat center center;
    opacity: 1;
}

.sandwich-icon {
    background: url(../icon/sandwich.svg) no-repeat center center;
}

.ico-copy {
    background: url(../icon/copy.svg) no-repeat center center;
}

.ico-chart-calend {
    background: url(../icon/chart-calend.svg) no-repeat center center;
    background-size: contain;

}

.ico-eye {
    background: url(../icon/eye.svg) no-repeat center center;
}

.ico-company-select {
    background: url(../icon/company-select.svg) no-repeat center center;
}

.ico-eye-open {
    background: url(../icon/eye-open.svg) no-repeat center center;
}

.ico-share {
    background: url(../icon/share.svg) no-repeat center center;
}

i.ico-share {
    background-size: contain;
}

.ico-pencil {
    background: url(../icon/pencil.svg) no-repeat center center;
}

.ico-pause {
    background: url(../icon/pause.svg) no-repeat center center;
}

.ico-reset {
    background: url(../icon/reset.svg) no-repeat center center;
}

.ico-edit {
    background: url(../icon/edit.svg) no-repeat center center;
}

i.ico-edit {
    background-size: contain;
}

.ico-confirm {
    background: url(../icon/confirm.svg) no-repeat center center;
}

.ico-calendar {
    background: url(../icon/calendar.svg) no-repeat center center;
}

.ico-drag {
    background: url(../icon/drag.svg) no-repeat center center;
}

.ico-reload {
    background: url(../icon/reload.svg) no-repeat center center;
}

.ico-eff-chart {
    background: url(../icon/eff-chart.svg) no-repeat center center;
}

.ico-indicator {
    background: url(../icon/indicator.svg) no-repeat center center;
}

.icon-btn:hover {
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(160, 166, 174, .7);
}

.ico-eye-hiden {
    background: url(../icon/eye-hiden.svg) no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 20px;
}

.ico-document {
    background: url(../icon/document.svg) no-repeat center center;
    background-size: contain;
    width: 28px;
    height: 28px;
}

.ico-empty-folder {
    background: url(../icon/empty-folder.svg) no-repeat center center;
    background-size: contain;
}

.ico-dummy {
    background: url(../images/billing-dummy.png) no-repeat center center;
    background-size: contain;
}

.ico-bad {
    background: url(../images/bad-payment.png) no-repeat center center;
    background-size: contain;
}

.ico-done {
    background: url(../icon/done.svg) no-repeat center center;
}

.billing .ico-dummy, .billing .ico-bad {
    height: 230px;
    display: block;
}

.billing .center-page-item {
    margin: -220px 0 0 -180px;
    left: 42%;
    width: 600px;
    padding: 2% 7%;
    border-radius: 10px;
    background: white;
    height: auto;
}

.billing .empty-title {
    color: #407BFF;
    font-size: 24px;
    font-weight: 600;
}

.billing .empty-text {
    font-weight: 400;
    font-size: 14px;
}

.billing .billing-email {
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px
}

/*******************************/

/*input:focus {*/
/*    border: 0px;*/
/*}*/

/* display: none;
}
/*  !Nav */

.error {
    border: 1px #a94442 solid !important;
}

.help-block {
    color: #a94442;
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
}

.ico:before {
    position: relative;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

.history:before {
    background: url(../icon/history.svg) no-repeat;
}

.modal .line {
    border-bottom: 1px #dee2e6 solid;
    margin-top: 30px
}

.help-icon {
    background: url(../icon/help.svg) no-repeat center center;
    background-size: contain;
    min-width: 14px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    display: inline-block;
}

/****SWITH***/
.switch {
    position: relative;
    display: inline-block;
    width: 47px;
    min-width: 47px;
    height: 22px;
}

.switch input {
    visibility: hidden;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #71baf5;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.switch input:checked + .slider {
    background-color: #2196F3;
}

.switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    border-radius: 50%;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.drop-menu.show .drop-menu-body {
    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
    transform: scale3d(1, 1, 1);
}

.input-close {
    position: relative;
    z-index: 6;
    margin-left: 100%;
    bottom: 30px;
    right: 20px;
    text-align: center;
    display: flex;
}

.icon-up .up {
    transition: transform 0.4s ease;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    line-height: 4px;
    -font-family: cursive;
    border: 1px white solid;
    height: 11px;
    font-weight: bolder;
    padding-top: 1px;
    position: relative;
    font-size: 14px;
    top: 6px;
    cursor: pointer;
}

.dropdown-item {
    color: #5D6C80;
    font-size: 13px;
}

.wrap-body {
    margin: 30px 0 30px 22px;
    color: rgba(43, 54, 68, 0.8);
}

.wrap-body .content {
    padding: 20px;
    background-color: white;
    font-size: 13px;
    border-radius: 6px;
}

.wrap-body .header-body {
    font-weight: 600;
    font-size: 20px;
    color: #001233;
}

.header-menu {
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 27px;
}

.header-menu a {
    color: rgba(43, 54, 68, 0.8)
}

.header-menu a:hover {
    text-decoration: none;
}

.header-menu .item {
    margin-right: 36px;
    margin-bottom: 10px;
}

.header-menu .item.active a {
    color: #3984EA;
    display: block;
    width: min-content;
    white-space: nowrap;
}

.header-menu .item.active {
    border-bottom: 1px #3984EA solid;
    display: inline-table;
    padding-bottom: 3px;
}

.wrap-body .detail-row {
    margin-top: 15px;
}

#pagination {
    margin-bottom: 40px;
    text-align: center;
    margin-top: 40px;
}

.pagination > .active > a {
    background-color: #3984EA;
    border-color: #3984EA;
}

.bg-bl {
    background-color: #DDEBFF !important;
}

.drag-drop {
    width: 5px;
    height: 30px;
    cursor: pointer;
}

.ring {
    position: absolute;
}

.ring-count {
    color: white;
    font-size: 10px;
    position: relative;
    border-radius: 3px;
    left: 12px;
    top: -6px;
    text-align: center;
    background-color: red;
    padding: 0px 2px;
}

.icon_ring {
    cursor: pointer;
}

.icon-btn {
    margin-right: 5px;
}

.user-search-list {
    display: none;
    position: absolute;
    background-color: white;
    padding: 6px 0px;
    border: 1px #e3e3e3 solid;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    z-index: 7;
    border-radius: 5px;
    margin-top: -6px;
}

.user-search-list .item {
    cursor: pointer;
}

.menu-wrap {
    width: 40px;
}

.top-menu {
    background-color: white;
    height: 60px;
    box-shadow: -2.58065px -1.29032px 10.3226px rgba(255, 255, 255, 0.7), 2.58065px 1.29032px 10.3226px rgba(136, 165, 191, 0.38);
    position: relative;
    z-index: 10;
}

.user-ava {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2px;
}

.top-menu .notice-ring {
    background-image: url(../icon/ring.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 22px;
    height: 22px;
    margin-right: 20px;
}

.top-menu #notice {
    display: block;
    width: 22px;
    height: 22px;
}

.user-menu-wrap {
    padding: 0 0 15px 0px;
    background: #FAFAFC;
    border: 0px;
    margin-top: 20px;
    box-shadow: -2.58065px -1.29032px 10.3226px rgba(255, 255, 255, 0.7), 2.58065px 1.29032px 10.3226px rgba(136, 165, 191, 0.38);
    border-radius: 6px;
    width: 210px;
}

.user-menu-wrap .item {
    padding: 10px 20px 10px 30px;
    margin-top: 15px;
}

.user-menu-wrap .item {
    font-weight: 500;
    font-size: 14px;
    color: #263238;
}

.user-menu-wrap .item:hover {
    background: rgba(4, 102, 200, 0.05);
}

.user-menu-wrap .user {
    font-size: 14px;
    color: #546E7A;
    font-weight: 500;
    border-bottom: 1px #ECEFF1 solid;
    padding: 18px 10px 16px 20px;
    margin: 0 15px;
}

.user-menu-wrap .login form {
    display: inline-flex;
}

.user-menu-wrap .login button {
    padding: 0px;
    color: #263238;
    font-weight: 500;
    font-size: 14px;
}

.modal-header {
    border: 0px;

    color: rgba(43, 54, 68, 0.8);
}

.modal-header .modal-title {
    margin-top: 15px;
}

.modal-content .modal-body input,
.modal-content .modal-body textarea,
.modal-content .modal-body select {
    border: 0px;
    filter: drop-shadow(1px 1px 6px rgba(136, 165, 191, 0.2));
}

.modal-content label {
    color: #7d8597;
    font-size: 12px;
}

.modal-footer {
    border: 0px;
    padding-bottom: 30px;
    padding-top: 0px;
}

.modal-content .modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-content {
    margin: 0 40px;
    background-color: #FAFAFC;
}

.chosen-container {

}

.btn-left {
    position: relative;
    z-index: 5;
    fill: #023e7d;
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: block;
    cursor: pointer;
    font-size: 12px;
    border-radius: 50%;
    background: radial-gradient(315.18% 315.18% at -124.11% -81.79%, #B9CCE2 11.1%, #FFFFFF 91.21%), #E3EDF7;
    box-shadow: -3.51906px -1.75953px 14.0762px rgba(255, 255, 255, 0.7), 3.51906px 1.75953px 14.0762px rgba(136, 165, 191, 0.38);
}

.btn-left:hover {
    opacity: 0.7;
    -webkit-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s linear;
}

.btn-left:hover:before {
    opacity: 1;
}

.btn-left:before {
    content: url(../icon/arrow.svg);
    position: relative;
    top: 7px;
    left: 10px;
    font-size: 12px;
}

.btn-left.right:before {
    display: inline-block;
    display: inline-block;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 6px;
}

.slider-wrap {
    min-height: 19.2px;
}

.slider-block {
    display: none;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    transition: 1s;
    opacity: 0;
    padding-top: 5px;
    padding-right: 5px;
    overflow: hidden;
}

.slider-block.active {
    opacity: 1;
    transition: 1s;
}

.slider-block .title {
    font-size: 13px;
    font-weight: 700;
    color: #5C677D;
    padding-right: 10px;
}

.swiper-button.swiper-button-next {
    right: 0 !important;
}

.swiper-button.swiper-button-prev {
    left: 0 !important;
}

.tooltip-inner {
    max-width: 200px;
    color: #fff;
    text-align: center;
    background-color: #33415c;
    border-radius: .25rem;
    padding: 3px 16px 6px;
    padding-bottom-font-family: 'Inter', sans-serif;
    padding-bottom-font-weight: 400;
    padding-bottom-font-display: auto;
    padding-bottom--webkit-font-smoothing: antialiased;
    padding-bottom--moz-osx-font-smoothing: grayscale;
    padding-bottom-font-size: 12px
}

.site-error {
    margin-left: 20px;
}

.modal-backdrop {
    display: none !important;
}

.modal-open .modal {
    background: rgba(0, 0, 0, 0.5);
}

.center-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
}

.center-page-item {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -180px;
}

.u-chart .title {
    height: 8px;
    float: right;
    margin-right: 30px;
    line-height: 23px;
}

.chart-wrap .title p.red, .chart-wrap .title .red-sign {
    color: #c83156;
}

.chart-wrap .title {
    height: 0px;
    margin-right: 30px;
    line-height: 23px;
    text-align: right;
    position: relative;
    top: 23px;
}

.u-chart .title p, .chart-wrap .title p {
    FONT-WEIGHT: 700;
    color: rgba(51, 168, 164, 1);
    font-size: 28px;
    margin: 0px;
}

.chart-wrap .title p {
    font-size: 24px;
}

.u-chart .title div, .chart-wrap .title div {
    font-size: 14px;
    font-weight: 400;
    color: #BDBDBD;
    text-align: right;
}

.chart-wrap .title div {
    font-size: 12px;
}

.chart-menu {
    position: absolute;
    height: 77%;
    opacity: 0;
    width: 12px;
    transition: 0.6s;
}

.chart-menu .icon-btn {
    margin-right: 5px;
    background-color: white;
    margin-bottom: 14px;
}

.chart-menu-items {
    position: relative;
    left: -12px;
}

.chart-body:hover .chart-menu {
    opacity: 1;
}

.logout:hover {
    text-decoration: none;
}

.uchart .item {
    font-size: 12px;
    font-weight: 600;
    color: #33415C;
    margin: 5px 10px;
    cursor: pointer;
}

.uchart .item.active {
    color: #292929;
    border-bottom: 1px dashed #292929;
}

#oneChart .modal-body {
    padding-top: 0px;
}

.color-ava {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    justify-content: center !important;
    align-items: center !important;
    min-width: 40px;
    display: flex;
    color: white;
    font-weight: 500;
    text-align: center;
    font-size: 1.3em;
    letter-spacing: 1px;
}

.mobile-menu .color-ava {
    font-size: 14px;
}

.notice-scroll .color-ava {
    width: 35px;
    height: 35px;
    min-width: 30px;
    font-size: 0.9em;
}

.color-ava.green {
    background: linear-gradient(93.28deg, #2DC58E 47.36%, #34D06F 100%);
}

.color-ava.blue {
    background: linear-gradient(85.86deg, #32B3FF 0%, #6BD1F5 100%);
}

.color-ava.red {
    background: linear-gradient(85.86deg, #FF3A4D 0%, #FF6174 100%);
}

.color-ava.dark-blue {
    background: linear-gradient(85.86deg, #3F51B5 0%, #4C66FC 100%);
}

.color-ava.grey {
    background: linear-gradient(85.86deg, #757575 0%, #AFAFAF 100%);
}

.color-ava.dark-grey {
    background: linear-gradient(85.86deg, #546E7A 0.01%, #6C8895 100%);
}

.color-ava.past-red {
    background: #EB5757;
}

.color-ava.braun {
    background: linear-gradient(85.86deg, #8D6E63 0.01%, #BB8D7D 100%);
}

.color-ava.past-green {
    background: linear-gradient(85.86deg, #009688 0.01%, #61D7B9 100%);
}

.color-ava.salat {
    background: linear-gradient(85.86deg, #AFB42B 0%, #D4D94D 100%);
}

.color-ava.orange {
    background: linear-gradient(85.86deg, #FF5722 0.01%, #FE7B51 100%);
}

.add-task-wrapppwer_mb {
    margin-bottom: 20px;
}

.chart-body-wrap .chart-value .board-title,
.u-chart .chart-value .board-title {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 2.44937px;
    text-transform: uppercase;
    color: #33415C;
}

.chart-body-wrap .chart-value .board-title {
    font-size: 15px;
}

.u-chart .chart-value .board-value {
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 0.163291px;
    color: #001233;
}

.chart-body-wrap .chart-value .board-value {
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 0.163291px;
    color: #001233;
}

.chart-body-wrap .board-table .col
.u-chart .board-table .col {
    padding-right: 0px;
    padding-left: 0px;
}

.u-chart .table_chart {
    font-size: 1.2vw;
}

.chart-body-wrap .board-table,
.u-chart .board-table {
    text-align: center;
    min-width: 180px;
}

.chart-body-wrap .board-table .col:first-child {
    min-width: 30px;
}

.chart-body-wrap .board-table.b-title,
.u-chart .board-table.b-title {
    margin-top: 20px;
}

.chart-body-wrap .board-table div:nth-child(2) {
    padding-left: 8px;
}

.u-chart .board-table.b-title .col,
.chart-body-wrap .board-table.b-title .col {
    font-weight: 400;
    -font-size: 11px;
    text-transform: uppercase;
}

.u-chart .board-table.b-row .col,
.chart-body-wrap .board-table.b-row .col {
    font-weight: 400;
    -font-size: 13px;
}

.u-chart .board-table.b-data .col,
.chart-body-wrap .board-table.b-data .col {
    font-weight: 600;
    -font-size: 16px;
}

.u-chart .board-table.b-row .col:first-child,
.u-chart .board-table.b-data .col:first-child,
.chart-body-wrap .board-table.b-row .col:first-child,
.chart-body-wrap .board-table.b-data .col:first-child {
    font-weight: 400;
    -font-size: 11px;
    text-transform: uppercase;
    align-self: center !important;
    text-align: right;
}

.chart-body-wrap {
    width: 100%;
    height: 100%;
}

.select-type-chart {
    height: 33px;
}

.mobile-menu {
    position: relative;
    z-index: 6;
    transition: 0.5s;
    margin-bottom: 15px;
}

.mobile-menu .header {
    height: 50px;
    background: #566ADF;
    padding-bottom: 0px;
}

.mobile-menu.open .header .ico-ring-white {
    display: none;
    transition: 0.5s;
}

.mobile-menu .user-mob-icon {
    border-radius: 50%;
    display: none;
}

.mobile-menu .user-mob-icon .user-ava {
    width: 38px;
    height: 38px;
}

.mobile-menu.open .user-mob-icon {
    display: block;
}

.mobile-menu .body {
    height: 0px;
    min-height: 0px;
    margin-top: 50px;
    background: linear-gradient(180deg, #566ADF 0%, #5564C1 100%);
    position: absolute;
    z-index: 3;
    transition: 0.5s;
    overflow: hidden;
}

.mobile-menu .m-row .h-lnk {
    height: 50px;
}

.mobile-menu .body.open {
    min-height: calc(100vh - 100px);
    transition: 0.5s;
}

.mobile-menu a {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.mobile-menu .m-row .link {
    margin-left: 13px;
}

.mobile-menu .m-row.active .h-lnk {
    border-radius: 8px;
    transition: 0.5s;
    background: #FAFBFF;
    box-shadow: inset 4px 4px 4px rgba(0, 18, 51, 0.07);
}

table.hover-tab tbody tr:not(er):hover {
    background: #f8f9fc;
}

.mobile-menu .m-row.active .h-lnk a {
    color: #0466C8;
}

/***-- Mobile detect ---*/

@media (min-width: 719px) {
    .mobile-menu {
        display: none;
    }
}

.txah {
    overflow: hidden;
    min-height: unset;
    max-height: unset;
    resize: none;
    cursor: default;
    width: calc(100% - 16px) !important;
    color: #212121;
    padding: 7px 8px;
}

.dropdown-menu {
    box-shadow: -2.58065px -1.29032px 10.3226px rgba(255, 255, 255, 0.7), 2.58065px 1.29032px 10.3226px rgba(136, 165, 191, 0.38);
    border: 0px;
}

.modal iframe, .modal .content {
    width: 100%;
    height: 100%;
}

.modal .modal-dialog.func-user-display .modal-content .gr {
    background-color: #EBF3FA !important;
}

#modalUserFuncDetail .modal-header {
    background-color: #EBF3FA;
}

.user-history .log-table {
    background: white;
}

.user-history .header {
    font-weight: 500;
    font-size: 18px;
    padding-top: 9px;
}

.user-history .message-block {
    margin: 0 20px;
}

.user-history .log-row {
    padding: 20px;
    border-bottom: 1px solid #CADCFE;
}

.user-history .time-block {
    color: #3984EA;
}

@media (max-width: 720px) {

    #left-menu, #notice-menu, .top-menu, .wrapperMini {
        display: none !important;
    }

    .mobile-menu .logo_img {
        margin-left: 0px;
    }

    .wrap-body {
        margin: 30px 0 30px 0px;
    }

    .mobile-menu .company_name {
        text-transform: uppercase;
        color: white;
        font-weight: 600;
        max-width: 180px;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 1rem;
    }

    .company_name.hide::after {
        display: none
    }

    .mobile-menu .ico-ring-white {
        --margin-right: 60px;
    }

    #content {
        margin-left: 0px;
    }

    .wrapper {
        padding: 34px 18px 34px 18px !important;
    }

    .u-chart-d {
        min-height: auto !important;
    }

    .mobile-menu .sandwich-btn {
        margin-right: 10px;
    }

    .user-history .log-row {
        padding: 10px;
    }

    .user-history .log-row .message-block {
        margin: 0 10px;
    }

    .user-history .log-row .inline {
        white-space: normal;
    }
}

#firstEnter .title {
    color: #407BFF;
    font-size: 19px;
    font-weight: 600;
}

#firstEnter .title-two {
    font-size: 16px;
    font-weight: 600;
    color: #2B3644;
}

#firstEnter img {
    max-width: 200px;
}

#firstEnter .text-body {

    margin: 20px 8% 0;
    color: #696974;
    font-size: 14px;
    font-weight: 400;
}

#firstEnter .modal-footer .btn-primary {
    color: white;
}

#firstEnter .text-body p {
    margin-bottom: 10px;
}

#firstEnter .btn-outline-primary:hover {
    color: #004e9c !important;
    background-color: transparent !important;
    border-color: #007bff !important;
}

.ButtonsTry a:hover {
    color: white;
}

#firstEnter .modal-footer {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-top: none;
}

.swiper-wrapper .blue {
    background: linear-gradient(85.86deg, #32B3FF 0%, #6BD1F5 100%);
    color: #fff;
}

.swiper-wrapper .maroon {
    background: linear-gradient(251.35deg, #CA3C3C 0%, #bb2d2d 40.62%, #A91C1C 100%);
    color: #fff;
}

.swiper-wrapper .darkSlateBlue {
    background: linear-gradient(251.35deg, #7268B1 0%, #5B5196 40.62%, #413879 100%);
    color: #fff;
}

.swiper-wrapper .crimson {
    background: linear-gradient(251.35deg, #F53A60 0%, #EB2C52 40.62%, #DF1840 100%);
    color: #fff;
}

.swiper-wrapper .mediumPurple {
    background: linear-gradient(251.35deg, #B095E5 0%, #A587E2 40.62%, #9674DD 100%);
    color: #fff;
}

.swiper-wrapper .purple {
    background: linear-gradient(85.86deg, #9C27B0 0%, #D15AE6 100%);
}

.swiper-wrapper .yellow {
    background: linear-gradient(94.48deg, #F39526 41.08%, #FFBD13 99.39%);
}

.swiper-wrapper .orange {
    background: linear-gradient(94.48deg, #F39526 41.08%, #FFBD13 99.39%);
}

.swiper-wrapper .blueGrey {
    background: linear-gradient(85.86deg, #546E7A 0.01%, #6C8895 100%);
}

.swiper-wrapper .darkblue {
    background: linear-gradient(85.86deg, #3F51B5 0%, #4C66FC 100%);
}

.swiper-wrapper .darkGreen {
    background: linear-gradient(85.86deg, #009688 0.01%, #61D7B9 100%);
}

.swiper-wrapper .red {
    background: linear-gradient(
            85.86deg, #FF3A4D 0%, #FF6174 100%);
}

.swiper-wrapper .green {
    background: linear-gradient(
            93.28deg, #2DC58E 47.36%, #34D06F 100%);
}

.swiper-wrapper .lime {
    background: linear-gradient(85.86deg, #2F4F4F 0.01%, #577575 100%);
}

.swiper-wrapper .salmon {
    background: linear-gradient(251.35deg, #F69E94 0%, #F89287 40.62%, #FA8477 100%);
    color: #fff;
}

.swiper-wrapper .darkCyan {
    background: linear-gradient(251.35deg, #19B0B0 0%, #0FA1A1 40.62%, #038F8F 100%);
    color: #fff;
}

.swiper-wrapper .brown {
    background: linear-gradient(85.86deg, #8D6E63 0.01%, #BB8D7D 100%);

}

.swiper-wrapper .grey {
    background: linear-gradient(85.86deg, #757575 0%, #AFAFAF 100%);
}

#helper .close {
    float: inherit;
}

#helper iframe {
    margin: 10px 0;
}

#helper .text {
    line-height: 27px;
    font-size: 13px;
    max-height: 100%;
}

.accordeon-title .ico-helper {
    top: -23px;
    right: -31px;
}

.billing-attent-panel{
    background: #F8C1C1;
    box-shadow: 5px 0px 20px rgb(159 161 165);
    border-radius: 5px;
    position: absolute;
    padding: 17px 20px 15px;
    right: 13px;
    top: 58px;
}

.billing-attent-panel::after {
    content: '';
    position: absolute;
    right: 24px;
    bottom: 49px;
    border: 10px solid transparent;
    border-bottom: 10px solid #F8C1C1;
}

.billing-attent-panel .close{
    position: absolute;
    right: 6px;
    top: 1px;
    font-size: 18px;
}

.el-dialog.el-dialog--center {
    width: 80% !important;
}