@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)
}

#app .box[data-role="admins info"] b,
.button>span,
.title,
button>span,
h1,
h2,
h3,
h4,
h5,
h6,
table thead .th-wrap {
    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: 0 0;
    text-align: center;
    padding: 20px 40px !important;
    font-size: 14px !important;
    text-shadow: 0 1px 0 #fff
}

.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: 700
}

.navbar-toggler {
    float: right
}

#app {
    display: inline-block;
    vertical-align: top;
    background: #fefefe;
    color: var(--dc-darktext);
    width: calc(100% - 80px);
    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 thead {
    background: #dedede
}

#app table tbody {
    background: #fff
}

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

#app table tfoot tr th {
    padding: 0
}

nav.navbar {
    display: block;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 2rem 3rem
}

#app>.m-3 {
    padding: 2rem 3rem 3rem;
    background: #fff;
    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: 700;
    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;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

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

.accident>span,
.closedApp>span,
.ready>span,
.service>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)
}

#app .box.header-box[data-role="admins info"] {
    padding: 0;
    background: 0 0;
    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: 280px;
    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: 0 0;
    box-shadow: none;
    padding: 0
}

#app .box[data-role="requests content"] .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    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%
}

.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>footer,
.dialog .modal-card>section {
    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
}

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

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

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

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

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

#app .card .card-header {
    font-weight: 700;
    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
}

.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
}

.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
}

#app .box#workPanel {
    max-width: 800px
}

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

#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 .popup-window[data-role="request out frame"] {
    padding: 15px 30px 0
}

#app .popup-window[data-role="request out frame"] h2.request_header {
    font-weight: 700;
    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: 400;
    font-size: .7em;
    color: #777;
    text-transform: none
}

#app .popup-window[data-role="request out frame"] .request_creator {
    font-size: .9em;
    font-weight: 700;
    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"] .chat_message,
#app .popup-window[data-role="request out frame"] .request_description {
    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: 700
}

#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: 700
}

#app .popup-window[data-role="request out frame"] .chat_message_assets,
#app .popup-window[data-role="request out frame"] .request_creator_name {
    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"] .chat_message.customer:before,
#app .popup-window[data-role="request out frame"] .request_description: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;
    margin-bottom: -12px !important;
    /* right: 7px;
    bottom: 5px; */
    z-index: 4
}

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

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

#app .popup-window[data-role="request out frame"] table#workTable td {
    background: 0 0;
    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
}

#app .column>.box#starsContainer {
    background: 0 0;
    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
}

.attach_message_wrapper .field-label {
    padding-top: 10px !important
}

div[data-role="customers"]>a.button {
    margin-bottom: 20px;
}

@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
    }
}

@media (max-width: 900px) {
    .modal .animation-content .modal-card {
        width: 100% !important;
        box-sizing: border-box;
    }

    #app #infoOrgPanel,
    #app #newWorkerPanel,
    #app #assignResponsiblePanel,
    #app #newOrgPanel,
    #app .popup-window[data-role="request out frame"] {
        width: 100% !important;
        height: calc(100% - 50px);
        box-sizing: border-box;
        overflow-y: auto;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        transform: none;
    }

    #app #newWorkerPanel,
    #app #newOrgPanel,
    #app #assignResponsiblePanel {
        height: 100%;
    }

    #app .popup-window[data-role="request out frame"] .request_messages_scroller {
        height: auto;
        max-height: initial;
    }

    #app #newWorkerPanel {
        padding: 50px 0 10px;
    }
}

@media (max-width: 700px) {
    #applicationTable tbody tr {}

    #applicationTable table td:before {
        display: none;
    }

    #applicationTable table td {
        text-align: left !important;
        width: 100%;
        min-width: 100%;
    }

    div[data-role="requests"] {}

    .request_controls_row button {
        margin: 5px 0;
        width: 100%;
    }
}