:root {
    --component-bg: #FFFFFF; /* #0A0A13 */
    --employee-bg: #FFFFFF; /* #232429 */
    --text-color: black;
}

.inline-control {
    /* width: 100%;*/
}

span.dx-checkbox-icon {
    margin-right: 1px;
}

.wrap-text {
    word-break: break-all;
    white-space: normal;
}

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

.form-group-h label {
    margin-right: 0;
}

@media (max-width: 480px) {
    .radio-group {
        margin-bottom: 10px;
    }

        .radio-group + .radio-group {
            margin-left: 0;
        }
}

@media (max-width: 992px) {
    .flex, .valign {
        display: block;
    }
}


@media (max-width: 768px) {
    .halign-l {
        flex-wrap: wrap;
    }

    .form-group-h {
        flex: 0 0 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .halign-l {
        flex-wrap: wrap;
    }

    .form-group-h {
        flex: 0 0 32%;
        margin-right: 0;
        margin-bottom: 5px;
    }
}
<!-- -->


@font-face {
    font-family: "SegoeUI";
    src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot");
    src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUIRegular/SegoeUIRegular.woff") format("woff"), url("../fonts/SegoeUIRegular/SegoeUIRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Commissioner";
    src: url("../fonts/Commissioner/Commissioner-Regular.ttf");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "SegoeUI";
    src: url("/fonts/SegoeUIBold/SegoeUIBold.eot");
    src: url("../fonts/SegoeUIBold/SegoeUIBold.eot?#iefix")format("embedded-opentype"), url("../fonts/SegoeUIBold/SegoeUIBold.woff") format("woff"), url("../fonts/SegoeUIBold/SegoeUIBold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}

.btn-mg {
    margin: 5px;
}
/* 10px gutter */
.gutter-10.row,
.gutter-10.form-group {
    margin-right: -5px;
    margin-left: -5px;
}

.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.container-fluid {
    margin: 0 auto;
    padding-left: 5px;
    max-width: 2260px;
}

html, werha a body {
    height: 100%;
}

body {
    font-family: "SegoeUI", Helvetica, Arial, sans-serif;
    overflow-x: hidden !important;
}

h1, h2, h3 {
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "SegoeUI", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.1;
}

    h1.small {
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
    }

/* Custom radio buttons */
.radio-group {
    display: inline-block;
}

    .radio-group + .radio-group {
        margin-left: 20px;
    }

[type=radio] {
    position: absolute;
    left: -9999px;
}

    [type=radio] + label {
        display: inline-block;
        position: relative;
        font-weight: normal;
        line-height: 24px;
        padding-left: 28px;
        margin-bottom: 0;
        cursor: pointer;
    }

        [type=radio] + label:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 22px;
            height: 22px;
            background: #fff;
            border: 1px solid #7f7f7f;
            border-radius: 100%;
        }

        [type=radio] + label:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            background: #0e5583;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

    [type=radio]:not(:checked) + label:after {
        opacity: 0;
    }

    [type=radio]:checked + label:after {
        opacity: 1;
    }

.link {
    text-transform: uppercase;
}

.link {
    font-weight: bold;
    text-decoration: underline;
}

/* Custom button styles */
.btn {
    text-transform: uppercase;
    /*padding: 6px 30px;*/
}

.btn-login:focus {
    color: white !important;
}

.btn-danger {
    background-color: #600f0e;
    border-color: #600f0e;
}

.btn-primary {
    background-color: #1a4b83;
    border-color: #1a4b83;
}

.btn-success {
    background-color: #016d3b;
}

.btn-semi-transparent,
.btn-transparent {
    color: #fff;
    border-radius: 0;
}

    .btn-semi-transparent:hover,
    .btn-transparent:hover {
        color: #fff;
    }

.btn-semi-transparent {
    background: rgba(255,255,255,0.2);
}

.btn-transparent {
    background: transparent;
    border: 1px solid #fff;
    width: 225px;
    /* харкод для ровных кнопок*/
}


/* Override bootstrap forms */
.filter-control {
    color: #000;
    display: block;
    height: 24px;
    width: 100%;
    background: #aeb3af;
    border: 0;
    border-radius: 0;
}

    .filter-control:focus {
        outline: none;
    }

/* Override bootstrap tables */
.table-bordered > thead > tr > th {
    font-weight: normal;
    text-transform: uppercase;
    border-bottom-width: 1px;
}

.table-bordered > tbody > tr > td {
    font-weight: bold;
}

/* Custom select */
.select-style {
    border: 1px solid #bfbfbf;
    width: 100%;
    height: 36px;
    overflow: hidden;
    background: #fff url("/Content/images/icon-select.png") no-repeat 100% 50%;
}

    .select-style select {
        width: 100%;
        height: 36px;
        padding: 6px 12px;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
    }

        .select-style select:focus {
            outline: none;
        }

/* Override bootstrap modal styles */
/*.modal-header {
    padding: 20px 20px 0 20px;
    border: 0;
}*/

.modal-title, .bootstrap-dialog-title {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}

.modal-sub-title {
    text-transform: uppercase;
    margin: 0;
}

.modal-box {
    text-align: center;
    padding: 60px;
    border: 1px solid #cdcdcd;
    margin-bottom: 30px;
}

    .modal-box h2 {
        font-size: 50px;
    }

    .modal-box h4 {
        color: #888;
        font-size: 14px;
        text-transform: uppercase;
    }

@media screen and (min-width: 992px) {
    .modal-dialog-lg {
        width: 1000px;
    }
}
/* Helper classes */
.bold {
    font-weight: bold;
}

.uppercase {
    text-transform: uppercase;
}

.shadow {
}

.bold {
    font-weight: bold;
}

.underlined {
    text-decoration: underline;
}

.blue {
    color: #4f95d3 !important;
}

.block-label {
    display: block;
}

.pointer {
    cursor: pointer !important;
}

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

ol li {
    list-style-position: inside;
    margin-bottom: 4px;
}

/* Bootstrap tabs override */
.nav-tabs {
    border-bottom: 1px solid #979797;
}

    .nav-tabs > li > a {
        color: #000;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 0;
        border-radius: 10px 10px 0 0;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: #fff;
        background-color: #1a4b83;
        border: 1px solid #1a4b83;
        border-bottom-color: #1a4b83;
    }

.tab-content {
    padding: 10px 0 30px;
}

.tab-icon {
    padding: 12px 5px 5px 5px;
    z-index: 1000;
}

.nav-tabs > li.active {
    color: white;
}

/* Margin helper classes */
.mt40 {
    margin-top: 40px
}

.mr10 {
    margin-right: 10px
}

.mr20 {
    margin-right: 20px
}

.mr50 {
    margin-right: 50px;
}

.mb10 {
    margin-bottom: 10px
}

.mb20 {
    margin-bottom: 20px
}

.mb30 {
    margin-bottom: 30px
}

.mb40 {
    margin-bottom: 40px
}

.no-m {
    margin: 0 !important
}

.no-p {
    padding: 0 !important
}

.pl40 {
    padding-left: 70px
}

#header-top {
    background: url("/Content/images/header-bg1.png") 100% 0 no-repeat;
    background-size: contain;
    padding: 20px 0;
}

#logo {
    display: inline-block;
}

.headline {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
}

/* Navbar styles */
.navbar-default {
    background-color: #1a4b83;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

    .navbar-default .navbar-nav > li > a {
        font-family: "SegoeUI";
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: underline;
    }

a.menuLink:hover, a.menuLink:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
}

.langs-dropdown {
    min-width: inherit;
    /*background: #E7E7E7;*/
    padding: 2px 0;
    border: 2px solid #ccc;
    border-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: none;
}

    .langs-dropdown li a {
        color: #000;
        padding: 5px 17px 5px 17px;
        text-align: center;
    }

    .langs-dropdown .active a {
        background-color: #428bca;
    }

.client-header .langs-dropdown {
    background: white;
}

    .client-header .langs-dropdown li a {
        color: black;
        background-color: white;
    }

    .client-header .langs-dropdown .active {
        color: black;
        background-color: white;
    }

.sub-text-item {
    text-decoration: none !important;
}

.sub-text > span {
    text-decoration: underline;
}

.sub-text > small {
    display: block;
    font-size: 8px;
    line-height: 1;
    max-width: 190px;
}

.icon-menu {
    display: inline-block;
    width: 32px;
    height: 31px;
    margin-right: 6px;
}

.icon-journal {
    background: url("/Content/images/journal.png") 0 50% no-repeat;
}

.icon-base {
    background: url("/Content/images/base.png") 0 50% no-repeat;
}

.icon-phone {
    background: url("/Content/images/phone.svg") 0 50% no-repeat;
}

.icon-citizen {
    background: url("/Content/images/citizen.png") 0 50% no-repeat;
}

.icon-call-in {
    background: url("/Content/images/call-in.png") 0 50% no-repeat;
}

.icon-call-out {
    background: url("/Content/images/call-out.png") 0 50% no-repeat;
}

.icon-avatar {
    background: url("/Content/images/avatar-black.png") 0 50% no-repeat;
}

.icon-logout {
    background: url("/Content/images/login.png") 0 50% no-repeat;
}

.icon-logout {
    background: url("/Content/images/logout.png") 0 50% no-repeat;
}

.icon-globe {
    background: url("/Content/images/globe.png") 0 50% no-repeat;
}

.tultip {
    position: relative;
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1;
    cursor: pointer;
}

    .tultip span {
        position: absolute;
        bottom: 26px;
        left: 50%;
        color: #ff0200;
        background-color: #f2f4f3;
        width: 160px;
        padding: 6px 10px 10px;
        border: 1px solid #c4c6c5;
        border-radius: 4px;
        margin-left: -40px;
        z-index: 999;
        cursor: default;
    }

        .tultip span:before {
            content: "";
            position: absolute;
            left: 30px;
            bottom: -10px;
            border-top: 10px solid #c4c6c5;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 0;
            z-index: 1000;
        }

        .tultip span:after {
            content: "";
            position: absolute;
            left: 31px;
            bottom: -9px;
            border-top: 9px solid #f2f4f3;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 0;
            z-index: 1000;
        }

.export-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.export-text {
    color: black;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 10px;
}

.export-button {
    text-indent: -9999px;
    display: inline-block;
    width: 27px;
    height: 27px;
    margin-right: 10px;
}

.xls {
    background: url("/Content/images/xls.png") 0 50% no-repeat;
}

.pdf {
    background: url("/Content/images/pdf.png") 0 50% no-repeat;
}


/* Content styles */
#content-wrapper {
    max-width: 1260px;
    margin: 0 auto;
    background: url("/Content/images/top-uzor.png") 0 0 no-repeat;
    /*background: url("/Content/images/top-ornament.png") 0 0 no-repeat, 
                url("/Content/images/bottom-ornament.png") 100% 100% no-repeat;*/
    padding: 30px 0 40px;
}

.page-heading {
    padding: 10px 20px 10px 60px;
    color: var(--text-color);
    margin-top: 5rem;
}

    .page-heading h2 {
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    .page-heading h3 {
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 0;
    }

#content {
    min-height: 500px;
    padding: 0 0 40px 0;
}

    #content h2 {
        text-transform: uppercase;
    }

        #content h2 span {
            color: #194c81;
        }

.content-area {
    background: var(--component-bg);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 30px 20px 40px 20px;
    margin: 30px 20px 40px 20px;
}

/* Form styles */
.form-heading {
    color: var(--text-color);
    font-weight: bold;
    text-transform: uppercase;
    background: var(--component-bg);
    padding: 4px 20px;
    margin-bottom: 16px;
    text-align: center;
}

    .form-heading ~ .form-heading {
        margin-top: 10px;
    }

    .form-heading .editable {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: url("/Content/images/pen.png") 0 0 no-repeat;
        margin-left: 10px;
        cursor: pointer;
    }

.form-hint {
    display: block;
    color: #747577;
    margin-bottom: 4px;
}

.form-heading + .form-hint {
    margin-top: -10px;
    margin-bottom: 16px;
}

.control-label {
    text-align: left !important;
    font-weight: normal;
    padding-top: 0 !important;
    padding-top: 10px;
    color: var(--text-color);
}

.form-control-static {
    padding-top: 0;
}

.form-control {
    border-color: #c2c4c3;
    border-radius: 0;
}

.form-control.textarea{
    resize: vertical;
}

.inline-control {
    display: inline-block;
    /*width: auto;*/
    min-width: 150px;
}

    .inline-control + .ich {
        display: inline-block;
        /*width: auto;*/
        min-width: 75px !important;
    }

.category-list-item {
    margin-bottom: 14px;
}

.map-container {
    margin-bottom: 10px;
}

.flex,
.valign {
    /*display: flex;*/
    align-items: center;
}

.halign {
    display: flex;
    justify-content: center;
}

.halign-l {
    display: flex;
    justify-content: flex-start;
    ;
}

.form-group-h {
    margin-right: 20px;
}

    .form-group-h label {
        margin-right: 5px;
    }

.icon {
    display: inline-block;
}

.icon-exclamation {
    width: 68px;
    height: 30px;
    background: url("/Content/images/exclamation.png") 0 50% no-repeat;
}

.exclamation-text {
    text-transform: uppercase;
    line-height: 1;
    color: #000000;
}

.exclamation-img {
    left: 10%;
    top: 50%;
    transform: translate(-10%, -50%);
}

.employee-login .modal-dialog {
    background-color: var(--component-bg);
    border-radius: 16px;
}

.employee-login .modal-content {
    background-color: var(--component-bg);
    border-radius: 16px;
}

.employee-login .modal-header {
    background-color: var(--component-bg) !important;
    border-radius: 16px;
}

.employee-login .bootstrap-dialog-title {
    color: var(--text-color) !important;
    border-radius: 16px;
}

.employee-login .modal-body {
    background-color: var(--component-bg);
    color: var(--text-color);
    border-radius: 16px;
}

.employee-login .modal-footer {
    background-color: var(--component-bg);
    border-radius: 16px;
}

.exclamation-text-wrapper {
    margin-top: 3%;
    left: 10%;
    transform: translate(-10%, -10%);
}

.map-tooltip {
    background: rgba(255, 186, 196, 0.1);
    border-radius: 16px;
    height: 100px;
}

.file-upload-label {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    background: #1a4b83;
    padding: 6px 30px;
    border-radius: 4px;
    cursor: pointer;
}

    .file-upload-label [type=file],
    .file-upload-label-modal [type=file] {
        display: none;
    }

.file-upload-label-modal {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
}

.file-upload-add [type=file],
.file-upload-add [type=file] {
    display: none;
}

.file-upload-add {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
}

.icon-plus {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("/Content/images/plus.png") 0 50% no-repeat;
    margin-left: 20px;
}

.btn-attachments {
    margin-bottom: 15px;
}

.btn-attachment {
    display: flex;
    color: #000;
    font-size: 15px;
    margin-bottom: 4px;
}

.icon-remove {
    display: inline-block;
    width: 13px;
    height: 15px;
    background: url("/Content/images/remove.png") 0 50% no-repeat;
    margin-left: 5px;
    cursor: pointer;
}

.btn-call {
    display: inline-block;
    margin-left: 6px;
}

.btn-call-button {
    color: #fff;
    background: #057e39;
    border: 0;
    border-radius: 4px;
}

/* Form editable */
.form-editable .form-group {
    margin-bottom: 10px;
}

.form-editable .form-control-static {
    color: black;
    white-space: normal;
}

/* Bootstrap nav pills override */
.nav-pills > li > a {
    display: flex;
    align-items: center;
    color: black;
    text-transform: uppercase;
    background-color: #D5E0EB;
    padding: 6px 15px;
    cursor: pointer;
}

.nav-justified > li > a {
    margin-right: 20px;
    margin-bottom: 10px;
}

.nav-justified > li:last-child > a {
    margin-right: 0;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: #006b4b;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #006b4b;
}

.nav-stacked > li + li {
    margin-top: 20px;
}

.icon-submenu {
    display: inline-block;
    margin-right: 20px;
}

.icon-ticket {
    width: 29px;
    height: 29px;
    background: url("/Content/images/ticket.png") 0 50% no-repeat;
}

.icon-queue {
    width: 33px;
    height: 33px;
    background: url("/Content/images/queue.png") 0 50% no-repeat;
}

.icon-out {
    width: 29px;
    height: 29px;
    background: url("/Content/images/out.png") 0 50% no-repeat;
}

.icon-in {
    width: 29px;
    height: 28px;
    background: url("/Content/images/in.png") 0 50% no-repeat;
}

.icon-statistics {
    width: 33px;
    height: 33px;
    background: url("/Content/images/statistics.png") 0 50% no-repeat;
}

.icon-archive {
    width: 36px;
    height: 29px;
    background: url("/Content/images/archive.png") 0 50% no-repeat;
}

/* Sidebar section */
#sidebar {
    background: rgba(255,255,255,0.8);
    padding: 18px 0;
}

/* Main Content styles */
#main-content {
    min-height: 500px;
    background: rgba(255,255,255,0.8);
    padding: 20px;
}

.table-data {
    width: 100%;
    table-layout: fixed;
}

    .table-data tr > td {
        padding: 4px 0;
    }

    .table-data.p16 tr > td {
        padding: 16px 0;
    }

    .table-data tr > td > label {
        margin-bottom: 0;
    }

/* Request comments */
.request-comments {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 20px;
    margin-bottom: 20px;
}

.request-comment-item {
    margin-bottom: 16px;
}

.request-comment-author {
    font-size: 22px;
}

.request-comment-body {
    background: rgba(255,255,255,0.6);
    padding: 4px 8px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
}

/* Timeline styles */
.timeline {
    position: relative;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 20px;
}

    .timeline::before {
        /* this is the vertical line */
        content: '';
        position: absolute;
        top: 0;
        left: 140px;
        height: 100%;
        width: 2px;
        background: #949494;
    }

.history-item {
    position: relative;
    margin-bottom: 30px;
}

    .history-item:last-child {
        margin-bottom: 0;
    }

.history-item-circle {
    position: absolute;
    top: 25px;
    left: 131px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #656565, inset 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 0 3px rgba(0, 0, 0, 0.05);
}

.history-item:nth-child(odd) .history-item-circle {
    background: #84ba6e;
}

.history-item:nth-child(even) .history-item-circle {
    background: #4e887c;
}

.history-item-content {
    color: #9d9d9d;
    position: relative;
    background: #e1e1e1;
    padding: 14px;
    margin-left: 190px;
}

    .history-item-content::before {
        content: '';
        position: absolute;
        top: 27px;
        right: 100%;
        height: 0;
        width: 0;
        border: 7px solid transparent;
        border-right: 7px solid #e1e1e1;
    }

.history-item-type,
.history-item-user {
    font-size: 12px;
    text-transform: uppercase;
}

.history-item-status {
    color: #000;
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.history-item-datetime {
    display: inline-block;
    position: absolute;
    top: 14px;
    left: -190px;
    color: #565656;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.history-item-date {
    font-size: 18px;
    font-weight: bold;
}

.history-item-day {
    font-size: 14px;
}

/* Related requests */
.related-requests {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 20px;
}

.related-request-item {
    position: relative;
    background: rgba(225,225,225,0.4) url("/Content/images/line.png") 12px 0 repeat-y;
    padding: 6px 100px 6px 24px;
    margin-bottom: 10px;
}

    .related-request-item:last-child {
        margin-bottom: 0;
    }

.related-request-title {
    font-size: 22px;
    text-transform: uppercase;
}

.related-request-body {
    color: #444;
}

.related-request-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: #00a245;
}

.arrow-right {
    display: inline-block;
    width: 93px;
    height: 100%;
    background: url("/Content/images/arrow-right.png") 50% 50% no-repeat;
}

/* Login Page */
.login-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("/Content/images/login-bg.png") 0 0 no-repeat;
    background-size: cover;
}

#logo {
    position: absolute;
    top: 40px;
    right: 30px;
    width: 120px;
    z-index: 9;
}

.login-wrapper {
    text-align: center;
    position: absolute;
    right: 0;
    width: 36%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.login-inner {
    height: 100%;
    position: relative;
}

/* Language switcher homepage */
.langs-switcher {
    list-style: none;
    font-size: 0;
    margin: 12px 0 0;
    padding: 0;
}

    .langs-switcher li {
        font-size: 14px;
        display: inline-block;
    }

        .langs-switcher li:after {
            content: "|";
            color: #fff;
            margin: 0 4px;
        }

        .langs-switcher li:last-child:after {
            content: none;
        }

        .langs-switcher li a {
            color: #fff;
            text-transform: uppercase;
        }

    .langs-switcher .active a {
        text-decoration: underline;
    }

.login-form,
.sms-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.sms-holder {
    display: none
}

.sms-wrap {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    padding: 20px 30px;
    border-radius: 20px;
}

.sms-icon {
    display: inline-block;
    width: 54px;
    height: 54px;
    background: url("/Content/images/sms.png") 0 0 no-repeat;
}

.sms-text {
    text-transform: uppercase;
    margin-left: 10px;
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    background: rgba(0,0,0,0.5);
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-control {
    color: #fff;
    text-transform: uppercase;
    width: 280px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    padding: 8px 0;
}

    .login-control:focus {
        outline: none;
    }

    .login-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #fff;
    }

    .login-control::-moz-placeholder { /* Firefox 19+ */
        color: #fff;
    }

    .login-control:-ms-input-placeholder { /* IE 10+ */
        color: #fff;
    }

    .login-control:-moz-placeholder { /* Firefox 18- */
        color: #fff;
    }

/* Duplicat modal */
.search-control {
    height: 40px;
    border-radius: 0;
}

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 60px;
    height: 80px;
    background: #00a245;
}

.modal-request {
    position: relative;
    overflow: hidden;
}

    .modal-request::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: transparent;
        transition: background .35s ease-out;
    }

    .modal-request:hover::before {
        background: rgba(0, 0, 0, .7);
    }

    .modal-request .modal-request-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        transition: all .35s ease-out;
        z-index: 100;
    }

    .modal-request:hover .modal-request-overlay {
        opacity: 1;
    }

.modal-request-overlay a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: underline;
}

/* Request statuses */
.request-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* new-styles.css !NEED REFACTOR */
.baseInfo {
    border-right: solid;
    padding: 10px;
    border-color: darkgrey;
}

legend {
    display: block;
    padding-left: 1px;
    padding-right: 1px;
    border-bottom: solid;
    border-width: 1px;
}

.baseInfo > .Row > label {
    opacity: 0.6;
}

.baseInfo {
    height: 200px;
}

.row.match-height {
    overflow: hidden;
}

    .row.match-height [class*="col-"] {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }

.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
    padding: 0 !important;
}

.dx-master-detail-row .dx-datagrid-group-space {
    width: 4px !important;
    min-width: 4px !important;
}

.table-gray {
    border-color: #c0c0c0;
}

    .table-gray > thead > tr > th {
        color: #888;
        text-transform: uppercase;
        font-weight: normal;
        border-bottom-width: 1px;
        border-color: #c0c0c0;
    }

    .table-gray > tbody > tr > td {
        font-weight: bold;
        border-color: #c0c0c0;
    }

.info-table {
    display: table;
}

.info-line {
    display: table-row;
}

.info-label {
    display: table-cell;
    word-wrap: break-word;
    white-space: normal;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    width: auto;
    max-width: 130px;
    padding: 3px 10px 3px 0;
}

.info-value {
    display: table-cell;
    word-wrap: break-word;
    white-space: normal;
    font-size: 13px;
    font-weight: bold;
    vertical-align: middle;
}

/* Content styles */
.main-content {
    min-height: 500px;
}

.page-head {
    background: var(--component-bg);
    padding: 10px 20px;
}

    .page-head h1 {
        text-transform: uppercase;
        margin-bottom: 0;
    }

.main-content-inner {
    min-height: 500px;
    padding: 15px;
}

.request-item-dropdown {
    position: relative;
    padding: 20px;
    white-space: normal;
    background-color: var(--component-bg);
    color: black;
}

    .request-item-dropdown .nav-tabs li a {
        white-space: nowrap;
    }

.panel-fullscreen {
    display: block;
    z-index: 1010;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
}

.toggle-fullscreen {
    position: absolute;
    top: 20px;
    right: 0;
}

.btn-gray {
    background-color: #ebebeb;
}

.no-shadow {
    box-shadow: none;
    border-color: #c8c8c8;
}

.line {
    position: relative;
    font-weight: bold;
    margin-bottom: 10px;
    z-index: 1;
}

    .line span {
        background: #fff;
        padding-right: 10px;
    }

    .line:after {
        border-top: 1px solid #c0c0c0;
        content: "";
        margin: 0 auto; /* this centers the line to the full width specified */
        position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
        top: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: -1;
    }

.border-right {
    border-right: 1px solid #c0c0c0;
}

/* Comment item */
.comment-items {
    border-bottom: 2px solid #cbcbcb;
    margin-bottom: 30px;
    overflow-x: hidden;
    max-height: 400px;
}

.comment-item {
    background: #f0f0f0;
    padding: 6px 12px;
    margin-bottom: 10px;
}

/* Footer styles */
.sub-footer {
    text-align: center;
    text-transform: uppercase;
    color: #bebebe;
    font-weight: bold;
    font-size: 20px;
    background: var(--component-bg);
    padding: 10px 0;
}

/*---------------------------------------*/
.overflowPrevention150px {
    width: 150px;
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

.overflowPrevention300px {
    width: 300px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.dropdownCompanent {
    position: relative;
    display: inline-block;
}

.dropdownCompanent-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 94%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /*margin: 0 -3%;*/
}
    /* Links inside the dropdown */
    .dropdownCompanent-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
    }

        .dropdownCompanent-content a:hover {
            box-shadow: inset 0 0 30px 3px #ccc;
        }

.dropdownCompanent:hover .dropdownCompanent-content {
    display: block;
}

/* Style The Dropdown Button */
.dropdownButton {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdownCompanent:hover .dropdownButton {
    background-color: #3e8e41;
}

#avatar-image :hover {
    box-shadow: inset -1px -1px 15px 5px #ccc;
    -ms-border-radius: 50%;
    border-radius: 50%;
}


/* Footer styles */
#footer {
    color: #bdbdbd;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--component-bg);
    padding: 10px 0;
    border-top: 1px solid #3d3d3d;
}

.dublicateDialog .modal-dialog {
    width: 95% !important;
}

/* 12px row gutter */
.gutter-12.row {
    margin-right: -6px;
    margin-left: -6px;
}

.gutter-12 > [class^="col-"], .gutter-12 > [class^=" col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.tablo-container {
    display: flex;
    justify-content: space-between;
    color: #fff;
    /*background: url("images/bg.png") 0 0 no-repeat;*/
    height: 100vh;
    padding: 50px 0;
}

.tablo-column-left {
    display: flex;
    flex-direction: column;
    flex: 0 1 58%;
}

.tablo-header {
    margin-bottom: 20px;
}

.tablo-logo {
    margin-right: 20px;
}

.tablo-main-heading {
    /*text-transform: uppercase;*/
    margin-bottom: 0;
}

.main-ticket {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    text-align: center;
    background: rgba(0,43,66,0.6);
}

.ticket-heading {
    color: #b4b4b4;
    font-size: 30px;
    text-transform: uppercase;
    margin: 0;
}

.main-ticket-value {
    font-size: 145px;
    line-height: 1;
    margin-bottom: 10px;
}

.tablo-column-right {
    display: flex;
    flex-direction: column;
    background: rgba(0,43,66,0.6);
    padding: 10px 25px;
    flex: 0 1 40%;
}

.tickets-list-header {
    display: flex;
}

.tickets-number,
.tickets-operator {
    text-align: center;
    flex-basis: 50%;
}

.tickets-list {
    flex-grow: 1;
}

.ticket-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 20%;
}

.ticket-value {
    font-size: 100px;
    line-height: 1;
}

.ticket-arrow {
    display: inline-block;
    width: 30px;
    height: 49px;
    background: url("images/tablo-arrow.png") 0 0 no-repeat;
}

.edit-cover-letter-dialog {
    z-index: 99999999999999999999999999999999999999 !important;
}

.default-filter-panel {
    width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}

.my-filter-panel.default-filter-panel {
    overflow-x: hidden;
    max-height: 390px;
}

.yt-uix-checkbox-on-off {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 30px;
    padding-right: 2px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

    .yt-uix-checkbox-on-off input[type=checkbox] {
        position: absolute;
        margin: 0;
        width: 70px;
        height: 30px;
        opacity: 0;
    }



        .yt-uix-checkbox-on-off input[type=checkbox]:checked + label {
            background-color: #167ac6;
        }

    .yt-uix-checkbox-on-off label {
        display: inline-block;
        border: 1px solid transparent;
        height: 30px;
        width: 100%;
        background: #b8b8b8;
        border-radius: 20px;
    }

    .yt-uix-checkbox-on-off .checked, .yt-uix-checkbox-on-off input[type=checkbox]:checked + label .unchecked {
        width: 0;
    }

    .yt-uix-checkbox-on-off .checked {
        text-align: center;
        line-height: 13px;
    }

    .yt-uix-checkbox-on-off label > * {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        -moz-transition: width .1s;
        -webkit-transition: width .1s;
        transition: width .1s;
    }

    .yt-uix-checkbox-on-off .checked:before {
        font-stretch: semi-expanded;
        content: '\2714';
        display: inline-block;
        vertical-align: middle;
        background-size: 548px 322px;
        width: 10px;
        height: 2px;
    }

    .yt-uix-checkbox-on-off .toggle {
        background: #fbfbfb;
        width: 30px;
        border-radius: 13px;
    }

    .yt-uix-checkbox-on-off label > * {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        -moz-transition: width .1s;
        -webkit-transition: width .1s;
        transition: width .1s;
    }

    .yt-uix-checkbox-on-off .unchecked, .yt-uix-checkbox-on-off input[type=checkbox]:checked + label .checked {
        width: 40px;
    }

    .yt-uix-checkbox-on-off label > * {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        -moz-transition: width .1s;
        -webkit-transition: width .1s;
        transition: width .1s;
    }



    /*
    Странная вещь
    hr, html, i, iframe, img, ins, kbd, label, legend, li, menu, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
}*/
    /*label {
    cursor: default;
}*/
    /*button, input, textarea {
    font: 12px "YouTube Noto",Roboto,arial,sans-serif;
}*/

    .yt-uix-checkbox-on-off .unchecked:before {
        font-stretch: semi-expanded;
        content: '\2718';
        display: inline-block;
        vertical-align: middle;
        background-size: 548px 322px;
        width: 10px;
        height: 30px;
        margin-left: 10px;
    }

.pulse {
    display: block;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
}

    .pulse:hover {
        animation: none;
    }

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(33, 69, 245, 0.99);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(33, 69, 245, 0.99);
        box-shadow: 0 0 0 0 rgba(33, 69, 245, 0.99);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

@-o-keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(33, 69, 245, 0.99);
        box-shadow: 0 0 0 0 rgba(33, 69, 245, 0.99);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

.editcoverletter .modal-dialog {
    height: 800px;
}

.categories .modal-dialog {
    width: 800px;
    height: 500px;
}

.cloneModal .modal-dialog {
    width: 100%;
    height: 500px;
}

.lop .modal-dialog {
    width: 800px;
    height: 500px;
}

.whiteInput {
    background: var(--employee-bg);
}

.form-control.white-form-control {
    background-color: white
}

.navbar-right .navbar-nav > li.dropdown:hover > a,
.navbar-right .navbar-nav > li.dropdown:hover > a:hover,
.navbar-right .navbar-nav > li.dropdown:hover > a:focus {
    background-color: rgb(231, 231, 231);
    color: rgb(85, 85, 85);
}

li.dropdown:hover > .dropdown-menu {
    display: block;
}

.loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.loader__image {
    margin-right: 16px;
}

.loader__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    background: rgba(255,255,255,0.84);
    padding: 28px 34px;
    z-index: 1;
}

/* prevent navbar from overlapping request fulscreen */
.dx-datagrid-rowsview.dx-scrollable .dx-scrollable-content {
    z-index: auto !important;
}

/* Sidebar Filters */
.sidebar-filters {
    background: #D5E0EB;
    padding: 10px 0 25px;
}

    .sidebar-filters a {
        display: block;
        font-size: 14px;
        color: #000;
        background-position: 12px 50%;
        background-repeat: no-repeat;
        background-size: 18px auto;
        padding: 8px 12px 8px 42px;
        border-bottom: 1px solid #cdcdcd;
    }

        .sidebar-filters a.active {
            color: #fff;
            background-color: #004986;
            text-decoration: underline;
        }

.IncomingFilter {
    background-image: url("images/inbox.svg");
}

    .IncomingFilter.active {
        background-image: url("images/inbox-white.svg");
    }

.IncomingFilterForReception {
    background-image: url("images/inbox.svg");
}

    .IncomingFilterForReception.active {
        background-image: url("images/inbox-white.svg");
    }

.InWorkFilter {
    background-image: url("images/inwork.svg");
}

    .InWorkFilter.active {
        background-image: url("images/inwork-white.svg");
    }

.InWorkFilterForReception {
    background-image: url("images/inwork.svg");
}

    .InWorkFilterForReception.active {
        background-image: url("images/inwork-white.svg");
    }

.NoFilterVertical {
    background-image: url("images/all-requests.svg");
}

    .NoFilterVertical.active {
        background-image: url("images/all-requests-white.svg");
    }

.OvertimedFilter {
    background-image: url("images/late.svg");
}

    .OvertimedFilter.active {
        background-image: url("images/late-white.svg");
    }

.ArchiveFilter {
    background-image: url("images/archive-requests.svg");
}

    .ArchiveFilter.active {
        background-image: url("images/archive-requests-white.svg");
    }

.OnRatingFilter, .AnswerReceived {
    background-image: url("images/on-rate-blue.svg");
}

.IntermediateAnswerFilter {
    background-image: url("images/intermediate-answer-filter.svg");
}
.IntermediateAnswerFilter.active {
    background-image: url("images/intermediate-answer-filter-white.svg");
}

    .OnRatingFilter.active, .AnswerReceived.active {
        background-image: url("images/on-rate-white.svg");
    }

.OnRatingFilterForSocial, .AnswerReceived {
    background-image: url("images/on-rate-blue.svg");
}

    .OnRatingFilterForSocial.active, .AnswerReceived.active {
        background-image: url("images/on-rate-white.svg");
    }

.SentToIoFilter {
    background-image: url("images/on-rate-blue.svg");
}

    .SentToIoFilter.active {
        background-image: url("images/on-rate-white.svg");
    }

.SentToIoFilterForReception {
    background-image: url("images/on-rate-blue.svg");
}

    .SentToIoFilterForReception.active {
        background-image: url("images/on-rate-white.svg");
    }

.CanceledFilter {
    background-image: url("images/all-requests.svg");
}

    .CanceledFilter.active {
        background-image: url("images/all-requests-white.svg");
    }

.ExpiresFilter {
    background-image: url("images/inwork.svg");
}

    .ExpiresFilter.active {
        background-image: url("images/inwork-white.svg");
    }
/* My Filters */
.my-filters {
    color: black;
    padding: 10px 0 5px;
}

    .my-filters h4 {
        padding: 0 20px;
        margin: 0 0 10px 0;
    }

.my-filters-heading {
    color: black;
    margin-top: 20px;
}

.my-filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: black;
    padding: 8px 12px;
    border-bottom: 1px solid #cdcdcd;
}

    .my-filter.checked {
        font-weight: bold;
    }

.filter-btn {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background-size: cover;
}

.filter-check {
    background: url("images/filter.svg") 0 0 no-repeat;
    margin-right: 8px;
}

    .my-filter.checked .filter-check,
    .filter-check:hover {
        background: url("images/add-filter.svg") 0 0 no-repeat;
    }

.filter-name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

    .filter-name:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.filter-edit {
    width: 14px;
    height: 14px;
    background: url("images/edit-filter.svg") 0 0 no-repeat;
    margin-right: 8px;
}

.filter-remove {
    width: 14px;
    height: 14px;
    background: url("images/remove-filter.svg") 0 0 no-repeat;
}

.filter-edit:hover {
    background: url("images/edit-filter-hover.svg") 0 0 no-repeat;
}

.filter-remove:hover {
    background: url("images/remove-filter-hover.svg") 0 0 no-repeat;
}

/* Settings */
.settings {
    padding: 25px 20px;
    background: #E6E6E6;
}

    .settings input[type="button"] {
        text-align: left;
        font-size: 12px;
        white-space: normal;
        padding: 0;
    }


/* Top Filters */
.top-filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0;
}

    .top-filters a {
        -webkit-box-flex: 0;
        -ms-flex: 1;
        flex: 1;
        color: #000;
        background-color: #D5E0EB;
        background-position: 10px 50%;
        background-repeat: no-repeat;
        background-size: 18px auto;
        padding: 6px 10px 6px 38px;
    }

        .top-filters a.active {
            color: #fff;
            background-color: #004986;
            text-decoration: underline;
        }

.NoFilterHorizontal {
    background-image: url("images/all-requests.svg");
}

    .NoFilterHorizontal.active {
        background-image: url("images/all-requests-white.svg");
    }

.FrontOfficeFilter {
    background-image: url("images/fo-requests.svg");
}

    .FrontOfficeFilter.active {
        background-image: url("images/fo-requests-white.svg");
    }

.CallCenterFilter {
    background-image: url("images/contact-requests.svg");
}

    .CallCenterFilter.active {
        background-image: url("images/contact-requests-white.svg");
    }

.SocialNetworkFilter {
    background-image: url("images/social-requests.svg");
}

    .SocialNetworkFilter.active {
        background-image: url("images/social-requests-white.svg");
    }

.PortalFilter {
    background-image: url("images/portal-requests.svg");
}

    .PortalFilter.active {
        background-image: url("images/portal-requests-white.svg");
    }

.filter-container {
    background-color: var(--component-bg);
    padding: 5px;
    width: 100%;
    margin-bottom: 25px;
}

    .filter-container > .buttons {
        padding-top: 10px;
    }


/*Client profile*/
/* Panel heading */
#profile-accordion .panel-heading {
    padding: 0;
    border-bottom: 0 !important;
}

    #profile-accordion .panel-heading a {
        display: flex;
        align-items: center;
        color: #000;
        text-decoration: none;
        background-image: url("images/acc-arrow-up.svg");
        background-color: #d7e5ee;
        background-position: calc(100% - 15px) 50%;
        background-repeat: no-repeat;
        background-size: 30px auto;
        padding: 6px 15px;
    }

        #profile-accordion .panel-heading a.collapsed {
            background-image: url("images/acc-arrow-down.svg");
        }

        #profile-accordion .panel-heading a > img {
            flex: 0 0 30px;
            width: 30px;
            margin-right: 14px;
        }

        #profile-accordion .panel-heading a > h4 {
            font-size: 18px;
        }

            #profile-accordion .panel-heading a > h4 span {
                font-weight: bold;
            }

/* Panel body */
#profile-accordion .panel-body {
    background-color: #d7e5ee;
    padding: 15px 30px 40px;
}

.acc-heading {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.acc-subheading {
    font-size: 14px;
    text-transform: uppercase;
}

/* Accordion form */
.acc-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

    .acc-form label,
    .acc-password label {
        font-weight: normal;
        margin-bottom: 0;
    }

.acc-input {
    flex: 0 0 23%;
}

    .acc-input .add-row {
        display: inline-block;
        height: 24px;
        width: 24px;
        background: none;
        padding: 0;
        border: 1px solid #cdcdcd;
        border-radius: 50%;
    }

.acc-send-code {
    flex: 0 0 23%;
}

    .acc-send-code span {
        text-decoration: underline;
        cursor: pointer;
    }

    .acc-send-code img {
        width: 20px;
    }

.acc-code-input {
    flex: 0 0 23%;
}

.acc-status {
    flex: 0 0 23%;
}

    .acc-status img {
        width: 20px;
    }

/* Accordion password */
.acc-password {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
}

    .acc-password label {
        margin: 2px 10px 0 0;
    }

.password-group {
    position: relative;
    margin-right: 10px;
}

    .password-group input {
        width: 240px;
    }

    .password-group .glyphicon-eye-close,
    .password-group .glyphicon-eye-open {
        position: absolute;
        top: 6px;
        right: 8px;
        cursor: pointer;
    }

    .password-group .validationMessage {
        display: block;
        text-align: center;
        color: red;
        font-size: 12px;
    }

.confirm-password {
    color: #fff;
    background: #194c83;
    border: 1px solid #194c83;
}

/* Acc info */
.acc-info {
    margin-top: 10px;
}

.acc-info-text {
    margin-bottom: 20px;
}

    .acc-info-text img {
        width: 20px;
    }

/* Acc IIN form */
.iin-form {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.iin-form__inputs {
    flex: 0 0 30%;
    margin-right: 20px;
}

.iin-group {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

    .iin-group label {
        flex: 0 0 40px;
        margin-bottom: 0;
    }

    .iin-group input {
        flex: 1;
    }

.acc-info button,
.iin-form button {
    color: #fff;
    background: #194c83;
    border: 1px solid #194c83;
}

/* Confirmed */
.acc-confirmed {
    text-align: center;
}

.acc-confirmed__text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .acc-confirmed__text img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

.acc-confirmed__email,
.acc-confirmed__phone,
.acc-confirmed__iin {
    display: block;
    color: #194c83;
    font-size: 20px;
    font-weight: bold;
}





.mt0 {
    margin-top: 0 !important
}
/* Auth Modal */
.auth-modal .modal-header {
    display: none;
}

.auth-modal .modal-body {
    padding: 0;
    background: white;
    color: black;
}

.auth-modal .modal-content {
    background: white;
}

.auth-modal .nav-tabs {
    display: flex;
}

    .auth-modal .nav-tabs > li {
        flex: 1;
    }

        .auth-modal .nav-tabs > li > a {
            text-align: center;
            text-transform: uppercase;
            color: #888;
            background: rgba(255,255,255,0.87);
            border-radius: 0;
            border: 0;
            margin-right: 0;
            box-shadow: inset 3px -2px 6px rgba(0,0,0,0.3);
        }

        .auth-modal .nav-tabs > li.active > a {
            color: #fff;
            background: #1a4c82;
        }

        .auth-modal .nav-tabs > li > a:hover,
        .auth-modal .nav-tabs > li > a:focus {
            color: #fff;
            background: #1a4c82;
        }

        .auth-modal .nav-tabs > li.active > a,
        .auth-modal .nav-tabs > li.active > a:hover,
        .auth-modal .nav-tabs > li.active > a:focus {
            color: #fff;
            background: #1a4c82;
            border: 0;
        }

.auth-modal .tab-content {
    padding: 20px;
}

/* Auth Form */
.auth-modal__header {
    text-align: center;
    font-size: 18px;
    color: #1a4c82;
    margin-bottom: 10px;
}

.sms-modal .modal-content, .sms-modal .modal-body, .sms-modal .modal-footer, 
.success-appeal-modal .modal-body, .success-appeal-modal .modal-content, .success-appeal-modal .modal-footer {
    background: white;
    color: black;
}

.input-g {
    position: relative;
}

    .input-g .validationMessage {
        display: block;
        text-align: center;
        color: red;
        font-size: 12px;
    }

    .input-g .glyphicon-eye-close,
    .input-g .glyphicon-eye-open {
        position: absolute;
        top: 10px;
        right: 12px;
        cursor: pointer;
    }


/* Upload region */
.upload {
    display: flex;
    align-items: center;
    background: #f5f7f7;
    padding: 25px;
    border: 2px dashed #bfc4c4;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 40px;
}

.is-dragover {
    border: 2px solid #bfc4c4;
}

.upload__image {
    height: 50px;
    margin-right: 20px;
}

.upload__content {
    flex: 1;
}

.upload__text {
    color: #91afb9;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
}

.upload__filename {
    color: #91afb9;
    font-size: 20px;
    font-weight: bold;
}

.upload .progress {
    flex: 1;
    margin-bottom: 0;
}

.vote-question{
    margin: 15px;
}

.vote-answer {
    border: 1px solid lightgray;
    margin: 20px;
    padding: 15px;
}

.vote-table-detail-panel {
    margin: 30px;
}

.panel-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

.panel-heading a.collapsed:after {
    content: "\e080";
}

.suggestion-table-detail-panel {
    margin: 30px;
}

.slideshow {
    width: 400px;
    position: relative;
}

.slideshow-button-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}

.slideshow-button-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%,-50%);
}

.tooltip-vote-attachment {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

    .tooltip-vote-attachment .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: white;
        color: black;
        padding: 5px 10px;
        border: 1px solid black;
        border-radius: 6px;
        top: -5px;
        left: 105%;
        position: absolute;
        z-index: 100;
    }

    .tooltip-vote-attachment:hover .tooltiptext {
        visibility: visible;
    }


.c-page__aside {
    box-sizing: border-box;
    width: 280px;
    height: calc(100% - 60px);
    left: 0px;
    top: 0px;
    background: var(--employee-bg);
    border-right: 0px solid #404040;
    border: 0px solid rgba(64, 64, 64, 1);
    margin-top: 60px;
    position: fixed;
    overflow: auto;
}

.c-page__inner {
    background: var(--employee-bg);
}

.scroll-wrapper c-nav__outer scrollbar-inner {
    overflow: hidden !important;
    padding: 0 !important;
}

.c-nav__outer scrollbar-inner scroll-content scroll-scrolly_visible {
    height: auto;
    margin-bottom: 0px;
    margin-right: 0px;
    max-height: 909px;
}

ul.c-nav__outer, .c-nav__outer ul {
    padding-left: 0;
}

.c-nav__item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 26px 14px;
    gap: 16px;
    width: 266px;
    height: 40px;
    border-radius: 10px;
    margin: 10px;
}

.c-nav__item__active {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 26px 14px;
    gap: 16px;
    width: 266px;
    height: 40px;
    background: #3271AC;
    border-radius: 10px;
    margin: 10px;
}

.c-nav__link {
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 103.8%;
    color: black;
    display: flex;
}

.c-nav__item__active .c-nav__link{
    color: white;
}

.c-nav__icon svg-icon {
    left: 8.28%;
    right: 8.28%;
    top: 7.79%;
    bottom: 7.94%;
}

.c-header {
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 8%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 8%);
    position: fixed;
    min-width: 296px;
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
}

.c-header__inner {
    display: flex;
    align-items: center;
    -webkit-box-align: center;
}

.c-header__brand {
    background-color: var(--employee-bg);
    height: 60px;
    width: 290px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.c-header__collapse {
    background-color: var(--employee-bg);
    flex-basis: 100%;
    height: 66px;
}

.language-block {
    width: 91px;
    height: 38px;
    left: 1039px;
    top: 14px;
    background: var(--employee-bg);
    border-radius: 8px;
}

.language-block-text {
    color: black;
    display: inline-block;
}

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

.under_text {
    padding-left: 35px;
}


.dx-scrollview-content {
    max-height: 300px;
    overflow-y: scroll;
}

.dx-scrollable-scrollbar {
    position: static;
}

.c-page__container {
    padding-top: 60px;
    position: relative;
    margin-left: 285px;
    min-height: 100vh;
    transform: none;
    background: var(--employee-bg);
}

.container-fluid {
    padding-right: 0px
}

.dx-datagrid-rowsview .dx-row.dx-row-lines {
    background: var(--component-bg);
    color: black;
}

.dx-datagrid-content {
    background: var(--component-bg);
    color: black;
}

.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-texteditor-input, .dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-placeholder:before {
    background: var(--component-bg);
    color: black;
}

.dx-editor-cell .dx-texteditor .dx-texteditor-input {
    background: var(--component-bg);
    color: black;
}

.dx-datagrid-total-footer > .dx-datagrid-content {
    background: var(--employee-bg);
    color: black;
}

.dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
}

.main-block {
    width: 260px;
    height: 91px;
    background: #27272F;
    border-radius: 0px 0px 10px 10px;
    color: white;
    display: inline-block;
    margin-left: 8%;
    margin-top: 40px;
}

.text-style {
    text-align: left;
    padding-left: 16px;
}

.text-sh {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.text-amout {
    color: var(--employee-bg);
    font-size: 32px;
}


.bootstrap-dialog.type-info .modal-header {
    background-color: var(--employee-bg);
    border-radius: 16px;
    color: var(--text-color);
    border: 1px solid #27272F;
}

.bootstrap-dialog.type-success .modal-header {
    background-color: var(--employee-bg);
    border-radius: 16px;
    color: var(--text-color);
    border: 1px solid #27272F;
}

.bootstrap-dialog.type-warning .modal-header {
    background-color: #fff;
    border-radius: 16px;
    color: var(--text-color);
    border: 1px solid #27272F;
}

.bootstrap-dialog.type-attention .modal-header {
    background-color: var(--employee-bg);
    border-radius: 16px;
    color: var(--text-color);
    border: 1px solid #27272F;
}

.bootstrap-dialog.type-danger .modal-header {
    background-color: var(--employee-bg);
    border-radius: 16px;
    color: var(--text-color);
    border: 1px solid #27272F;
}

.bootstrap-dialog.type-default .modal-header {
    background-color: var(--employee-bg);
    color: var(--text-color);
    border-radius: 16px;
    border: 1px solid #27272F;
}

.bootstrap-dialog .bootstrap-dialog-title {
    color: var(--text-color);
    display: inline-block;
    text-transform: initial;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    font-style: normal;
}

.modal-client .bootstrap-dialog .bootstrap-dialog-title {
    color: black;
}

.circulation_block {
    background: var(--employee-bg);
    border-radius: 16px;
    margin: 10px 10px;
    border: 2px solid rgba(153, 153, 154, 0.5);
    border-radius: 4px;
    padding: 20px;
    padding-bottom: 70px;
}

.dx-texteditor-input {
    background: var(--employee-bg);
    border-radius: 4px;
    color: var(--text-color);
}

.form-horizontal clearfix {
    padding: 10px;
    border-bottom: 1px solid rgba(153, 153, 154, 0.5);
}

.info-box {
    background: var(--component-bg);
    border: 2px solid rgba(153, 153, 154, 0.5);
    border-radius: 4px;
    padding: 10px;
}

.control-label {
    padding-top: 10px;
    color: var(--text-color);
}

.dx-field-item-label-text {
    color: black;
}

.dx-overlay-wrapper .dx-overlay-content .dx-datebox .dx-texteditor-input {
    color: black;
}

.dx-datagrid-headers .dx-texteditor-input, .dx-datagrid-rowsview .dx-texteditor-input {
    padding: 5px;
    min-height: 26px;
    background-color: var(--component-bg);
    color: black;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-group-space {
    border-right: none;
    vertical-align: middle;
    background-color: var(--component-bg);
    color: black;
}
.panel-default > .panel-heading {
    border-color: #ddd;
    background-color: var(--component-bg);
    color: black;
}

.dx-widget, .dx-widget:before, .dx-widget:after, .dx-widget *, .dx-widget *:before, .dx-widget *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dx-switch-on, .dx-switch-off {
    float: left;
    width: 50%;
    padding-right: 14px;
    line-height: 16px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #000000 !important;
}

.panel-default {
    border-color: #000;
    background-color: var(--component-bg);
    color: var(--text-color);
}

.panel-body {
    padding: 15px;
    background-color: var(--component-bg);
    color: var(--component-bg);
}

.clearfix {
    background-color: var(--employee-bg);
    color: black;
}

.input-group-addon:first-child {
    border-right: 0;
    background-color: var(--component-bg);
    color: var(--employee-bg);
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--component-bg);
    color: black;
}

.dx-datagrid-rowsview .dx-row.dx-edit-row:first-child > td {
    border-top-width: 0px;
    border-bottom: 1px solid #ddd;
    background: var(--component-bg);
}
.dx-overlay-shader {
    background-color: rgba(255, 255, 255, 0.2);
}

.dx-popup-wrapper > .dx-overlay-content {
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    background: var(--component-bg);
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background-color: var(--employee-bg);
    border: 1px solid #27272F;
    border-bottom-color: #27272F;
    color: black;
}

.nav-tabs > li > a {
    color: black;
}


.nav-tabs > li > a:hover {
    background: var(--employee-bg);
}

.input-group-addon {
    background: #0A0A13;
}

.input-group {
    color: white;
}


.dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-popup-title {
    background: var(--component-bg);
}


.dx-dialog-message {
    padding: 0;
    color: var(--text-color);
}

.dx-pager .dx-pages .dx-page {
    display: inline-block;
    cursor: pointer;
    padding: 7px 8px 8px;
    margin-left: 5px;
    margin-right: 1px;
    background-color: var(--component-bg);
    color: black;
}

.language-model {
    padding-top: 50px;
}

.auth-button {
    background: #0AC15F;
    border-radius: 10px;
    border-width: 0px;
    width: 335px;
    padding: 10px 18px;
    margin: 0px 10px;
    color: white;
    margin-bottom: 30px;
}

.input-auth-button {
    background: var(--employee-bg);
    border: 1px solid rgba(226, 229, 238, 0.5);
    border-radius: 10px;
    padding: 10px 18px;
    margin: 0px 10px;
    width: 335px;
    color: var(--text-color);
}

.modal_auth {
    background: var(--employee-bg);
    position: absolute;
    box-shadow: 0px 30px 50px rgba(36, 61, 85, 0.1);
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 355px;
}

.login-employee-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--component-bg) 0 0 no-repeat;
    background-size: cover;
}

.accordionItemHeading {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    color: #000 !important;
    text-shadow: 0 1px 0 #fff !important;
    filter: alpha(opacity=20) !important;
    opacity: 1 !important;
}

.open .accordionItemHeading {
    margin: 0px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.open .accordionItemContent {
    padding: 5px;
    margin: 0px 0px 10px 0px;
    display: block;
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease;
    -ms-transition: -ms-transform 0.4s ease;
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.close {
    color: var(--text-color);
    opacity: 1;
}

.close .accordionItemContent {
    height: 0px;
    transition: height 1s ease-out;
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    float: left;
    display: block;
}

.contacts {
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    align-items: center !important;
    margin-bottom: 10px;
}

.create-appeal-button {
    justify-content: center;
    padding: 8px 16px;
    background: #3271AC;
    border-radius: 10px;
    color: var(--employee-bg) !important;
    align-items: center;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 17px !important;
    text-align: center;
}

.top-panel {
    height: 50px;
    margin: 16px;
    display: inline;
    align-content: center;
}

.top-panel h1 {
    display: inline;
    margin-left: 37%;
}

.btn-file {
    position: relative;
    overflow: hidden;
    width: 150px;
    background: transparent;
    margin-left: 5px;
    box-shadow: none;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: transparent;
        cursor: inherit;
        display: block;
    }

.employee-auth-title {
    text-align: center;
    color: var(--text-color);
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.employee-auth-header {
    color: var(--text-color);
    display: inline-block;
}

.employee-main-header {
    color: var(--text-color);
    display: inline-block;
    font-size: 17px;
    padding-right: 40px;
}

.employee-main-text {
    color: var(--text-color);
}

.selectedFilter {
    background: #E0E6EB;
    border-radius: 8px;
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #3271AC;
    text-transform: initial;
    padding: 6px 15px 6px 15px;
    width: fit-content;
    height: fit-content;
}

.unselectedFilter {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: black;
    text-transform: initial;
    padding: 6px 15px 6px 15px;
    width: fit-content;
    height: fit-content;
}

#statusdrop, #adminDirections, #statusdropDefault, #additionalFunctions {
    display: flex;
    align-items: center;
    color: black;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: underline;
    padding: 15px;
}

    #statusdropDefault .dropdown-menu > li > a {
        white-space: normal;
        font-weight: bold;
    }

.transition-button {
    background-color: #3271AC;
    color: var(--employee-bg);
}

.dx-toolbar .dx-toolbar-items-container {
    height: 26px;
    background-color: var(--component-bg);
    overflow: visible;
    color: var(--text-color);
}

.c-page__container-admin {
    min-height: 100vh;
    transform: none;
    background: var(--employee-bg);
}

.dx-button-has-text .dx-button-content {
    background-color: #000;
    background-color: var(--employee-bg);
    color: var(--text-color);
    padding: 4px 10px 4px;
}

.form-control, dx-texteditor-container {
    background: var(--employee-bg);
    border: 1px solid #E2E5EE;
    border-radius: 4px;
    color: var(--text-color);
}

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    background: var(--employee-bg);
    color: var(--text-color);
}

.dx-lookup-field {
    outline: none;
    position: relative;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
    background: var(--component-background);
}

.dx-popup-wrapper > .dx-overlay-content {
    background: var(--component-bg);
}

.dx-popup-bottom.dx-toolbar {
    background: var(--component-bg);
}

.dx-popup-title.dx-toolbar {
    background: var(--component-bg);
}

.dx-popup-content {
    background: var(--component-bg);
    padding: 10px;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

    .dx-popup-content.dx-dialog-content {
        background: var(--component-bg);
    }

.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-bottom.dx-dialog-buttons {
    background: var(--component-bg);
}

.dx-overlay-wrapper input {
    background: var(--employee-bg);
    color: var(--text-color);
}

.dx-list-item-content {
    background: var(--component-bg);
    color: var(--text-color);
}

.dx-list-select-all-label {
    color: var(--text-color);
}

.dx-list-item,
.dx-list .dx-empty-message {
    color: var(--text-color);
    background: var(--employee-bg);
}

.dx-button-has-text .dx-button-content {
    background-color: #000;
    background-color: var(--employee-bg);
    color: var(--text-color);
    padding: 4px 10px 4px;
}

.dx-texteditor {
    background: #fff;
    border: 1px solid #E2E5EE;
    border-radius: 4px;
}

.dx-lookup {
    height: 26px;
    border: 1px solid #E2E5EE;
    background: var(--employee-bg);
}

.bootstrap-dialog.type-primary .modal-header {
    background: var(--employee-bg);
}

.success-appeal-modal.bootstrap-dialog.type-primary .modal-header {
    background: var(--employee-bg);
}

.modal-body {
    margin: 10px;
    position: relative;
    padding: 15px;
    background-color: var(--employee-bg);
    color: var(--text-color);
}

.modal-content {
    position: relative;
    background-color: var(--employee-bg);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0;
    color: var(--employee-bg);
}

.modal-footer {
    padding: 15px;
    text-align: right;
    background: var(--employee-bg);
    color: var(--employee-bg);
    border-radius: 10px;
    border: 1px transparent;
}

.dx-item-content {
    color: var(--text-color);
}

.report-editing-lookup .dx-lookup-field {
    border: 1px solid #808080;
    background: var(--component-bg);
}

.dx-tag-container {
    background: #FFF;
    padding: 0;
    padding-right: 4px;
    outline: none;
}

.dx-tagbox-popup-wrapper .dx-list-select-all {
    background: #FFF;
    border-bottom: 1px solid #404040;
    padding-bottom: 7px;
    margin-bottom: 1px;
    color: var(--text-color);
}

.dx-list-item-before-bag.dx-list-select-checkbox-container, .dx-list-item-before-bag.dx-list-select-radiobutton-container {
    width: 26px;
    background: #FFF;
}

.dx-datebox-wrapper-calendar .dx-popup-content {
    background: #fff;
}

.dx-datebox-wrapper-calendar .dx-calendar {
    background: #fff;
}

.dx-calendar-body td {
    color: var(--text-color);
}

.dx-datebox-calendar.dx-dropdowneditor-active .dx-texteditor-input {
    background: #fff;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.theme-switcher {
    list-style-type: none;
    padding-top: 18px;
    padding-right: 50px;
}

.theme-switcher-text {
    list-style-type: none;
    padding-top: 23px;
    padding-right: 15px;
    color: var(--text-color);
}

.dx-datagrid-pager.dx-widget {
    color: var(--text-color);
}

.dx-datagrid-borders > .dx-datagrid-headers {
    border: 1px solid #404040;
}

.dx-datagrid-headers {
    border: 1px solid #404040;
}

.dx-datagrid-rowsview {
    border: 1px solid #404040;
}

.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-toolbar-mini.dx-collection.dx-popup-title{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-bottom.dx-popup-cancel {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.filter-container .input-sm {
    width: 200px;
    margin-bottom: 10px;
}

async-grid-appeal-history .glyphicon{
    color: var(--text-color);
}

.filter-name.validationMessage{
    color: red;
    margin-left: 10px;
}

.report-data-display.form-group{
    margin-right: 10px;
}

.types-of-jobs-top {
    border-top: 1px solid var(--text-color);
    border-right: 1px solid var(--text-color);
    border-left: 1px solid var(--text-color);
    margin-right: 0px;
    padding-top: 20px;
}

.types-of-jobs-bottom {
    border-bottom: 1px solid var(--text-color);
    border-right: 1px solid var(--text-color);
    border-left: 1px solid var(--text-color);
    margin-right: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.dx-toolbar-text-auto-hide .dx-button .dx-icon{
    color: var(--text-color);
}

.appeal-edit-applicant .dx-list-item-content{
    background: white;
    color: black;
}

.modal-client .modal-content, .modal-client .modal-header, .modal-client .modal-body, .modal-client .modal-footer, .modal-client .close {
    background: white;
    color: black;
}

.nav > li > a:hover, .nav > li > a:focus, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background: transparent;
}

.navbar-nav > li > .dropdown-menu {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.client-appeal-input {
    margin-bottom: 20px;
}

.client-header a{
    color: black;
}

.employee-main-title {
    margin-left: 5px;
}

.error-message {
    color: red;
    display: none;
    text-align: center;
    margin-bottom: 5px;
}

#monitoring-asterisk h1 {
    text-align: center;
    margin: 35px 0px;
    font-size: 35px;
}

#monitoring-asterisk {
    margin-right: 28%;
    margin-left: calc(28% - 285px);
}

#monitoring-asterisk table {
    font-size: 30px;
    font-weight: bold;
}

#monitoring-asterisk td {
    width: 40%;
}

#monitoring-asterisk td.monitoring-arrow{
    width: 20%;
    text-align: center;
}

    #monitoring-asterisk .table-striped > tbody > tr:nth-child(odd) > td,
    #monitoring-asterisk .table-striped > tbody > tr:nth-child(odd) > th {
        background-color: var(--employee-bg);
    }

    #monitoring-asterisk .table-striped > tbody > tr:nth-child(even) > td,
    #monitoring-asterisk .table-striped > tbody > tr:nth-child(even) > th {
        background-color: #F2F9FF;
    }

    #monitoring-asterisk .table-striped > tbody > tr:nth-child(even) > td:first-child, #monitoring-asterisk .table-striped > thead > tr > th:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    #monitoring-asterisk .table-striped > tbody > tr:nth-child(even) > td:last-child, #monitoring-asterisk .table-striped > thead > tr > th:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    #monitoring-asterisk .table-striped > thead > tr > th {
        background-color: #F2F9FF;
        font-weight: normal;
        font-size: 18px;
    }

    #monitoring-asterisk .table thead tr th, #monitoring-asterisk .table tbody tr td, #monitoring-asterisk table {
        border: none;
    }

#monitoring-asterisk th:last-child, #monitoring-asterisk td:last-child {
    text-align: right;
}

.monitoring-not-specified, .monitoring-online, .monitoring-offline, .monitoring-registration, .monitoring-dinner, .monitoring-away {
    border-radius: 5px;
    padding-right: 8px;
    padding-left: 8px;
    font-weight: bold;
}

.monitoring-not-specified {
    background: #F1F1F1;
    color: #707070;
}

.monitoring-online {
    background: #DFF5F0;
    color: #39D26A;
}

.monitoring-offline {
    background: #FCECEC;
    color: #DE4343;
}

.monitoring-registration {
    background: #E6EBFC;
    color: #7A68E0;
}

.monitoring-dinner {
    background: #F3EFE6;
    color: #FC9604;
}

.monitoring-away {
    background: #ECF7F9;
    color: #3FB2C3;
}