@charset"utf-8";
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&subset=cyrillic-ext,latin-ext');

* {
    font-family: 'PT Sans', sans-serif;
}

:root {
    --dc-darkblue: #125687;
    --dc-lightblue: #8DB9E5;
    --dc-green: #128756;
    --dc-purple: #871256;
    --dc-red: #a00;
    --dc-gray: #DEDDE9;
    --dc-darktext: #333;
    --dc-lighttext: #777;
    --dc-whitetext: #fff;
    --dc-stroke: rgba(0, 0, 0, .2);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
table thead .th-wrap,
button>span,
.button>span,
#app .box[data-role="admins info"] b {
    font-family: 'PT Sans', sans-serif;
}

*::selection {
    color: #fff;
    background-color: #125687;
    text-shadow: 0 1px 0 #124;
}

html {
    background-color: #ddd !important;
}

body {
    background: transparent;
    text-align: center;
    /* padding: 0px 40px !important; */
    font-size: 14px !important;
    text-shadow: 0 1px 0 white;
}

.box.button,
a {
    transition: all .2s linear;
}

a.navbar-brand {
    display: inline-block;
}

a#navbarDropdown {
    border: 1px dotted #ccc;
    border-radius: 4px;
    padding: 10px 15px 10px 20px;
}

a#navbarDropdown>span {
    display: inline-block;
}

a#navbarDropdown #post {
    font-size: 11px;
    font-weight: bold;
}

.navbar-toggler {
    float: right;
}

#app {
    display: inline-block;
    vertical-align: top;
    background: #fefefe;
    color: var(--dc-darktext);
    width: calc(100% - 0px);
    /* max-width: 1400px; */
    margin: 0;
    text-align: left;
    border-bottom: 2px solid #ccc;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
}

#app input::placeholder,
#app textarea::placeholder {
    color: #555;
}

#app a.navbar-brand {
    display: inline-block;
    width: 158px;
    text-align: center;
}

#app table {}

#app table thead {
    background: #dedede;
}

#app table tbody {
    background: #fff;
}

#app table tfoot {
    font-size: 0.75em;
    line-height: 2em;
    color: var(--dc-lighttext);
}

#app table tfoot tr th {
    padding: 0;
}

#app>.m-3 {
    padding: 2rem 3rem 3rem;
    margin: 0 !important;
}

#app .box {
    border-radius: 0;
}

#app .column>.box {
    border-top: 2px solid var(--dc-darkblue);
}

.dropdown-menu {
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

[data-role="works"] {
    border-top: 1px dotted #aaa;
    margin: 20px 0 0;
    padding: 10px 0 0;
}

input[data-role='request search input'] {
    margin: 0 0 20px;
}

#app .box[data-role="requests"] {
    padding: 0;
    box-shadow: none;
    border: none;
}

#app .box[data-role="requests"] .title.is-5 {
    text-align: left;
    font-weight: bold;
    text-transform: none;
}

#app .box[data-role="requests"] [data-role="all requests"] .title {
    margin-top: 20px;
}

#app .box .box.button.request_button {
    display: block;
    background: linear-gradient(to bottom, #fefefe, #eee);
    white-space: normal;
    height: auto;
    line-height: 14px;
    font-size: 14px;
    margin: 5px 0 10px;
    padding: 8px 10px;
}

#app .box .request_list_link {
    color: var(--dc-lightblue);
    text-decoration: underline;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 4px;
    cursor: pointer;
    transition: color .2s linear;
}

#app .box .request_list_link:hover {
    color: var(--dc-darkblue);
}

#app .box .title {
    display: block;
    width: 100%;
    clear: both;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.service,
.accident,
.ready,
.closedApp {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    color: var(--dc-whitetext);
    font-weight: bold;
    text-align: center;
}

.service>span,
.accident>span,
.ready>span,
.closedApp>span {
    text-shadow:
        -0 -1px 0 var(--dc-stroke),
        0 -1px 0 var(--dc-stroke),
        -0 1px 0 var(--dc-stroke),
        0 1px 0 var(--dc-stroke),
        -1px -0 0 var(--dc-stroke),
        1px -0 0 var(--dc-stroke),
        -1px 0 0 var(--dc-stroke),
        1px 0 0 var(--dc-stroke),
        -1px -1px 0 var(--dc-stroke),
        1px -1px 0 var(--dc-stroke),
        -1px 1px 0 var(--dc-stroke),
        1px 1px 0 var(--dc-stroke),
        -1px -1px 0 var(--dc-stroke),
        1px -1px 0 var(--dc-stroke),
        -1px 1px 0 var(--dc-stroke),
        1px 1px 0 var(--dc-stroke);
}

/* boxs */
#app .box.header-box[data-role="admins info"] {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 14px;
    margin: 0;
    box-shadow: none;
    white-space: nowrap;
}

#app .box[data-role="admins info"]>div {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    line-height: 16px;
    font-size: 14px;
    width: 215px;
    height: auto;
    margin: 20px 10px 0 0;
    padding: 0;
}

#app .box[data-role="admins info"] b {
    color: var(--dc-lighttext);
    font-size: 14px;
    line-height: 12px;
}

img.manager-photo {
    float: left;
    display: inline-block;
    margin: -9px 9px 0 0;
}

#app [data-role="filter"] .box {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 0 10px;
    box-shadow: none;
    font-size: .8em;
    line-height: 3.3em;
    text-align: left;
}

#app [data-role="filter"] .box .button.small-inline-button {
    margin: -8px 0 0 10px;
    width: 20px;
    height: 28px;
    vertical-align: middle;
}

#app .box[data-role="requests content"] {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#app .box[data-role="requests content"] .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    margin: 0 0 20px;
    text-align: left;
    text-transform: none;
}

#app .box[data-role="new request"] {
    font-size: 14px;
}

#app .box[data-role="management"] .button {
    width: 100%;
}

/* dialogs */
.dialog {}

.dialog .modal-background {
    box-shadow: inset 0 0 150px rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .4);
}

.dialog .modal-card {
    border-radius: 0;
    background: #fefefe;
    box-shadow: 0 3px 20px rgba(0, 0, 0, .2);
    border-bottom: 3px solid #ccc;
}

.dialog .modal-card>section,
.dialog .modal-card>footer {
    border-radius: 0;
}

.dialog .modal-card>section {
    padding: 20px;
    font-family: 18px;
    line-height: 22px;
}

.dialog .modal-card>footer {
    padding: 10px;
    background: #fefefe;
    border-top: 1px solid #eee;
}

/* login */
#app[data-role="login"] {
    margin-top: 7%;
    width: calc(100% - 20px);
    max-width: 500px;
}

#app div.container {
    margin-left: 20px;
    margin-right: 20px;
    max-width: 100%
}

#app[data-role="login"] .container {
    width: 100%;
}

#app[data-role="login"] .container .col-md-8 {
    flex: none;
    max-width: 100%;
}

#app .container [data-role="login form"] {}

#app .card,
#app .card .card-header,
#app .card .card-body {
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

#app .card {
    box-sizing: border-box;
    padding: 10px 0 30px;
}

#app .card .card-header {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
}

div[data-role="filter"] {
    position: relative;
    font-size: 16px;
}

div[data-role="period popup"] {
    display: block;
    box-sizing: border-box;
    position: relative;
    background: #fff;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    border-bottom: 2px solid #ccc;
    font-size: 14px;
    line-height: 22px;
    z-index: 3;
}

div[data-role="period popup"] .column {
    padding: 0;
}

/* buttons */
/*
.b-radio.radio input[type=radio]:checked + .check.is-info {
    border-color: var(--dc-darkblue) !important;
}

.b-radio.radio input[type=radio] + .check.is-info:before {
    background-color: var(--dc-darkblue) !important;
}
*/
.b-radio.radio:hover input[type=radio]+.check.is-danger {
    border-color: #FF4040;
}

.b-radio.radio:hover input[type=radio]+.check.is-danger:before {
    background: #FF4040;
}

.b-radio.radio input[type=radio]+.check,
.b-radio.radio input[type=radio]+.check:before {
    border-radius: 10%;
}

.button.is-info {
    background-color: var(--dc-darkblue) !important;
}

/* styles overlay */
.dropdown-menu {
    min-width: 0 !important;
    padding: 0 !important;
}

a.dropdown-item,
button.dropdown-item {
    box-sizing: border-box;
    padding: 5px 10px !important;
}

#infoOrgPanel {
    background: #fff;
    border-bottom: 3px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.box#infoOrgPanel>.title {
    font-size: 1.6em;
}

/* works */
#app .box#workPanel {
    max-width: 800px;
}

#app .box#workPanel>.title {
    font-size: 1.3em;
    line-height: 1.5em;
    font-weight: bold;
}

#app .box#workPanel .has-background-danger {
    background: var(--dc-red) !important;
}

#app .box#workPanel .has-background-danger .title {
    margin: 0;
}

#app .box#workPanel .title .title_row {
    font-size: 1em;
    line-height: 1.2em;
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

#app .box#workPanel .title.mini-title {
    font-size: .9em;
    line-height: 1em;
    text-align: left;
    text-transform: none;
}

#app .input,
#app .textarea {}

/* request rework */
#app .popup-window[data-role="request out frame"] {
    padding: 15px 30px 0;
}

#app .popup-window[data-role="request out frame"] h2.request_header {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.4em;
    text-transform: uppercase;
}

#app .popup-window[data-role="request out frame"] h2.request_header>span {
    display: inline-block;
    vertical-align: bottom;
    font-weight: normal;
    font-size: .7em;
    color: #777;
    text-transform: none;
}

#app .popup-window[data-role="request out frame"] .request_creator {
    font-size: .9em;
    font-weight: bold;
    text-transform: uppercase;
}

#app .popup-window[data-role="request out frame"] .request_messages_scroller {
    display: block;
    width: calc(100% + 60px);
    margin: 10px -30px 0;
    padding: 15px 30px;
    overflow: hidden;
    overflow-y: scroll;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #ccc;
    max-height: 330px;
}

#app .popup-window[data-role="request out frame"] .request_description,
#app .popup-window[data-role="request out frame"] .chat_message {
    display: block;
    padding: 15px 15px 20px 15px;
    font-size: 15px;
    line-height: 18px;
    width: 100%;
    box-sizing: border-box;
    background: #efefef;
    border-radius: 3px;
    position: relative;
    border-left: 2px solid #ccc;
    text-shadow: 0 1px 0 #fff;
}

#app .popup-window[data-role="request out frame"] .request_description {
    font-weight: bold;
}

#app .popup-window[data-role="request out frame"] .chat_message.dcompany {
    background: #dfdfdf;
    border-left: none;
    border-right: 2px solid #999;
}

#app .popup-window[data-role="request out frame"] .chat_message_sender_name,
#app .popup-window[data-role="request out frame"] .chat_message_sender_position {
    width: 100%;
    display: block;
    clear: both;
}

#app .popup-window[data-role="request out frame"] .chat_message_sender_name {
    font-size: 15px;
    font-weight: bold;
}

#app .popup-window[data-role="request out frame"] .request_creator_name,
#app .popup-window[data-role="request out frame"] .chat_message_assets {
    display: block;
    margin: 5px 7px 0 7px;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    padding: 0 0 0 35px;
}

#app .popup-window[data-role="request out frame"] .dcompany .chat_message_assets {
    text-align: right;
    padding: 0 35px 0 0;
}

#app .popup-window[data-role="request out frame"] .chat_message:before,
#app .popup-window[data-role="request out frame"] .request_description:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border: 15px solid transparent;
}

#app .popup-window[data-role="request out frame"] .request_description:before,
#app .popup-window[data-role="request out frame"] .chat_message.customer:before {
    bottom: -15px;
    left: 0;
    border-right-color: #efefef;
    z-index: 1;
}

#app .popup-window[data-role="request out frame"] .chat_message.dcompany:before {
    bottom: -15px;
    right: 0;
    border-left-color: #dfdfdf;
    z-index: 1;
}

#app .popup-window[data-role="request out frame"] .chat_message_date {
    font-size: .7em;
    color: #aaa;
    position: absolute;
    right: 7px;
    bottom: 5px;
    z-index: 4;
}

#app .popup-window[data-role="request out frame"] table#workTable {
    margin: 15px 0 0;
    background: transparent;
}

#app .popup-window[data-role="request out frame"] table#workTable tbody,
#app .popup-window[data-role="request out frame"] table#workTable tr {
    background: transparent;
}

#app .popup-window[data-role="request out frame"] table#workTable td {
    background: transparent;
    min-height: 0;
    padding: 0 0 15px;
    margin: 0;
}

#applicationTable table * {
    line-height: 22px;
}

td[data-label="Заявка"] span {
    font-size: 16px;
}

#app .popup-window[data-role="request out frame"] .attach_message_wrapper {
    position: relative;
    padding: 20px 30px 0;
    margin: 0 -30px;
    background: #eee;
}

#app .popup-window[data-role="request out frame"] .attach_message_wrapper textarea+span.icon {
    display: none;
    visibility: hidden;
}

#app .popup-window[data-role="request out frame"] .request_controls {
    position: relative;
    padding: 0 30px;
    margin: 13px -30px 0;
    background: #eee;
}

#app .popup-window[data-role="request out frame"] .attach_message_wrapper .send_button {
    position: absolute;
    right: 40px;
    bottom: 33px;
}

#app .popup-window[data-role="request out frame"] h2>span[data-role='request type indicator'] {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 20px;
    margin: -4px 7px 0 0;
    vertical-align: middle;
    background: #ccc;
    border: 1px solid #333;
}

#app .popup-window[data-role="request out frame"] span[data-role='request type indicator'].service {
    background: linear-gradient(to bottom, #75A5FF, #4688FF);
}

#app .popup-window[data-role="request out frame"] span[data-role='request type indicator'].accident {
    background: linear-gradient(to bottom, #FF7373, #FF4040);
}

#app .popup-window[data-role="request out frame"] span[data-role='request type indicator'].ready {
    background: linear-gradient(to bottom, #95F5A0, #43EB58);
}

#app .popup-window[data-role="request out frame"] span[data-role='request type indicator'].closedApp {
    background: linear-gradient(to bottom, #DEDDE9, #94949E);
}

#app .rating_wrapper {
    white-space: nowrap;
    text-align: center;
}

.notices.has-custom-container {
    position: fixed;
}

/* stars */
#app .column>.box#starsContainer {
    background: none;
    box-shadow: none;
    border: none;
    padding: 5px 0 0;
}

#app .column>.box#starsContainer>img {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 1));
}

#app .popup-window[data-role="request out frame"] .request_controls .confirmation_button {
    background-color: #23d160 !important;
}

#app .popup-window[data-role="request out frame"] .request_controls .returning_button {
    background: #aaa !important;
}

@media (max-width: 1150px) {
    body {
        /* padding: 5px !important; */
        min-width: 340px;
    }

    #app {
        width: 100%;
    }

    #app .button {
        white-space: normal;
        height: auto;
    }

    #app .box.header-box[data-role="admins info"] {
        margin: 20px 0;
        white-space: normal;
    }
}