@font-face {
    font-family: "montserrat";
    font-display: swap;
    src: url("../../../fonts/Montserrat-Bold/Montserrat-Bold.woff") format("woff"), url("../../../fonts/Montserrat-Bold/Montserrat-Bold.woff2") format("woff2"), url("../../../fonts/Montserrat-Bold/Montserrat-Bold.ttf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "montserrat";
    font-display: swap;
    src: url("../../../fonts/Montserrat-Light/Montserrat-Light.woff") format("woff"), url("../../../fonts/Montserrat-Light/Montserrat-Light.woff2") format("woff2"), url("../../../fonts/Montserrat-Light/Montserrat-Light.ttf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "montserrat";
    font-display: swap;
    src: url("../../../fonts/Montserrat-Medium/Montserrat-Medium.woff") format("woff"), url("../../../fonts/Montserrat-Medium/Montserrat-Medium.woff2") format("woff2"), url("../../../fonts/Montserrat-Medium/Montserrat-Medium.ttf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "montserrat";
    font-display: swap;
    src: url("../../../fonts/Montserrat-Regular/Montserrat-Regular.woff") format("woff"), url("../../../fonts/Montserrat-Regular/Montserrat-Regular.woff2") format("woff2"), url("../../../fonts/Montserrat-Regular/Montserrat-Regular.ttf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    line-height: normal;
    font-family: montserrat, sans-serif;
    font-size: 14px;
    color: #313131;
    background-color: #fff;
    z-index: 1;
}

/* =============================  Customise Bootstrap =============================*/
/* --------------------  Headers ------------------------*/
h1, h2, h3 {
    margin-top: 5px;
    margin-bottom: 15px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h1 {
    font-size: 18px;
    font-weight: bold;
}

h2 {
    font-size: 16px;
    font-weight: bold;
}

h3 {
    font-size: 14px;
    font-weight: bold;
}

a {
    color: #137ac9;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -5px;
    padding: 0 0 5px;
}

.wrap > .container-fluid {
    padding: 60px 15px 20px;
}


/* --------------------  Navbar ------------------------*/

.navbar-inverse {
    background-color: #479d6e;
    border-color: #479d6e;
}

.navbar-inverse .navbar-brand {
    color: #fff;
    font-size: 16px;
    padding-top: 16px;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:active {
    background-color: #479d6e;
    color: #fff;
}

.navbar-inverse .navbar-nav .open > a {
    color: #fff;
    background-color: #248657;
}

.navbar-inverse .navbar-nav .open > a:focus,
.navbar-inverse .navbar-nav .open > a:hover,
.navbar-inverse .navbar-nav .open > a:active {
    background-color: #248657;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #248657;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #248657;
}


/* --------------------  Table ------------------------*/

.table-striped > thead > tr > th {
    background-color: #f9f9f9;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fff;
}

a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings', serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e113";
}

a.desc:after {
    content: "\e114";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}


/* --------------------- breadcrumb ---------------------*/
.breadcrumb {
    margin-bottom: 5px;
    padding: 7px 0;
    background-color: #fff;
}

.breadcrumb li {
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb li:last-child, .breadcrumb li:last-child a {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.panel {
    border-radius: 0;
}

.panel-heading {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* =============================  /Customise Bootstrap =============================*/

/* =============================  YII2 CRUD Customise =============================*/
.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.auth-editor {
    margin-top: 10px;
}

.auth-editor select {
    width: 100%;
    height: 350px;
}

.auth-editor label {
    font-weight: 600;
}

.btn-create {
    margin-bottom: 5px;
    margin-right: 5px;
}

.form-horizontal {
    margin-top: 25px;
}

.form-horizontal .control-label {
    text-align: left;
}

.form-group {
    margin-bottom: 3px;
}

.modal-header {
    padding-bottom: 0;
    border: 0;
}

.modal-body {
    padding: 0 20px 20px 20px;
}

.modal-body h1 {
    margin-top: 0;
}

.modal-body .scroll {
    margin-bottom: 20px;
    padding: 15px;
    max-height: 550px;
    overflow-y: auto;
}

.required > label:after {
    content: " *";
    color: #c55;
}

.grid-view table {
    color: #000;
    margin-top: 5px;
    margin-bottom: 0;
}

.grid-view table thead tr th a:after {
    font-size: 14px;
    padding-left: 4px;
}

.grid-view table tbody tr.quick td:first-child {
    border-left: 5px solid #a52a2a;
}

.grid-view table tbody tr.selected td {
    background-color: #ffffdd;
}

.grid-view table tbody tr td {
    max-width: 400px;
}

.grid-view table tbody tr td.tbl-action {
    font-size: 14px;
    width: 1%;
}

.grid-view table tfoot {
    font-weight: bold;
}

.grid-view {
    margin-top: 5px;
}

.grid-view .action-column {
    width: 1%;
}

.grid-view .page-panel {
    position: fixed;
    bottom: 0;
}

.grid-view .navbar-fixed-bottom {
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    height: 50px;
}

.grid-view .navbar-fixed-bottom .summary {
    float: left;
    padding-top: 15px;
}

.grid-view .navbar-fixed-bottom .pagination {
    float: right;
    margin: 0;
    padding-top: 8px;
}

.detail-view {
    margin-top: 5px;
}

.detail-view th {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-block {
    margin-top: 2px;
    margin-bottom: 3px;
}

/* Search Form (filters) */
.search .search-field.active input, .search .search-field.active .select2-selection {
    background-color: #ffffdd;
}

.select2-container--krajee .select2-selection--single .select2-selection__clear {
    right: 2rem;
    top: 0.3rem;
}

.search > div {
    padding-left: 0;
    padding-right: 4px;
}

.search .form-group {
    padding-bottom: 5px;
}

/* =============================  /YII2 CRUD Customise =============================*/

/* Site Login */
@media (min-width: 768px) {
    .omb_row-sm-offset-3 div:first-child[class*="col-"] {
        margin-left: 25%;
    }
}

.omb_login .omb_authTitle {
    text-align: center;
    line-height: 300%;
    font-size: 25px;
}

.omb_login .omb_socialButtons a {
    color: white;
    opacity: 0.9;
}

.omb_login .omb_socialButtons a:hover {
    color: white;
    opacity: 1;
}

.omb_login .omb_socialButtons .omb_btn-facebook {
    background: #3b5998;
}

.omb_login .omb_socialButtons .omb_btn-twitter {
    background: #00aced;
}

.omb_login .omb_socialButtons .omb_btn-google {
    background: #c32f10;
}


.omb_login .omb_loginOr {
    position: relative;
    font-size: 1.5em;
    color: #aaa;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.omb_login .omb_loginOr .omb_hrOr {
    background-color: #cdcdcd;
    height: 1px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.omb_login .omb_loginOr .omb_spanOr {
    display: block;
    position: absolute;
    left: 50%;
    top: -0.6em;
    margin-left: -1.5em;
    background-color: white;
    width: 3em;
    text-align: center;
}

.omb_login .omb_loginForm .input-group.i {
    width: 2em;
}

.omb_login .omb_loginForm .help-block {
    color: red;
}

@media (min-width: 768px) {
    .omb_login .omb_forgotPwd {
        text-align: right;
        margin-top: 10px;
    }
}

#login-form .form-group .form-control {
    height: auto;
    padding: 10px 10px;
    font-size: 14px;
    margin-bottom: 15px;
}

.site-login,
.site-register,
.site-error
{
    height: calc(100% - 249px);
    min-height: 420px;
}

@media screen and (max-width: 768px) {
    .site-login,
    .site-register {
        height: calc(100% - 200px);
    }
}

/* Registration */
.site-register {
    padding-top: 80px;
}

.site-register h1 {
    font-size: 30px;
    margin-top: 20px;
    font-weight: 500;
}

/* Search Form (filters) */

.search .search-field.active input, .search .search-field.active .select2-selection {
    background-color: #ffffdd;
}

.search > div {
    padding-left: 0;
    padding-right: 4px;
}

.tab-content {
    margin-top: 15px;
}

.auth-editor {
    margin-top: 10px
}

.auth-editor select {
    height: 350px;
    width: 100%;
    overflow: auto;
    margin-top: 7px
}

.auth-editor label {
    font-weight: 600
}

.table-fixed-head thead th {
    position: sticky;
    top: 45px;
}

/* ----------- BM AUTO ------------*/

.bmauto_container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    width: 100%;
}
/* ----------- FOOTER ------------*/

.footer {
    padding-top: 55px;
    padding-bottom: 50px;
    background-color: #d0d0d0;
}

.footer .bmauto_container {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer__logo {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(25% - 30px);
}

.footer__logo svg {
    display: block;
    width: 236px;
    height: 144px;
}

.footer__info-block {
    margin-top: -5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(75% - 30px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.footer__about {
    padding: 0;
    margin: 0;
    max-width: 510px;
    font-weight: 300;
    font-size: 14px;
    color: #333333;
    line-height: 1.8;
}

.footer__important {
    margin-top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer__privacy {
    position: relative;
    font-weight: 300;
    font-size: 14px;
    color: #393939;
}

.footer__copy {
    margin: 0 0 0 66px;
    padding: 0;
    font-weight: 300;
    font-size: 14px;
    color: #393939;
}

.footer__contacts {
    margin-left: 147px;
    margin-right: 15px;
}

.footer__title {
    padding: 0;
    margin: 0;
    line-height: normal;
    font-weight: 300;
    font-size: 18px;
    color: #393939;
    text-transform: uppercase;
}

.footer__phone {
    margin-top: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700;
    font-size: 17px;
    color: #353535;
    text-decoration: none;
}

.footer__phone span {
    position: relative;
}

.footer__phone span::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0;
    bottom: 0;
    left: 0;
    background-color: #353535;
    -webkit-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

.footer__phone i {
    margin-right: 16px;
    background-image: url(../../../images/promo/sprite/xl.png);
    background-position: -777px -574px;
    width: 19px;
    height: 30px;
}

.footer__phone:hover,
.footer__phone:focus {
    text-decoration: none;
    color: #353535;
}

.footer__phone:hover span::after,
.footer__phone:focus span::after {
    width: 100%;
}

.footer__mail {
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 400;
    font-size: 17px;
    color: #353535;
    text-decoration: none;
}

.footer__mail span {
    position: relative;
}

.footer__mail span::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 0;
    bottom: 0;
    left: 0;
    background-color: #353535;
    -webkit-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

.footer__mail i {
    margin-right: 5px;
    background-image: url(../../../images/promo/sprite/xl.png);
    background-position: -777px -554px;
    width: 30px;
    height: 19px;
}

.footer__mail:hover,
.footer__mail:focus {
    text-decoration: none;
    color: #353535;
}

.footer__mail:hover span::after,
.footer__mail:focus span::after {
    width: 100%;
}

/* ----------- BM AUTO MEDIA ------------*/

@media screen and (max-width: 1200px) {
    .bmauto_container {
        padding-left: 26px;
        padding-right: 26px;
        max-width: 820px;
    }

    .footer__logo {
        margin-left: 14px;
        margin-right: 14px;
    }

    .footer__info-block {
        margin-left: 14px;
        margin-right: 14px;
    }

    .footer__logo svg {
        width: 173px;
        height: 106px;
    }

    .footer__title {
        margin-top: 48px;
    }

    .footer__contacts {
        margin-left: 0;
    }

    .footer__important {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .footer__privacy {
        margin-top: 12px;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .footer__copy {
        margin-left: 0;
    }

    .footer__about {
        max-width: initial;
    }

    .footer__info-block {
        margin-left: auto;
    }

    .footer__important {
        margin-left: auto;
    }

    .footer__phone i {
        background-image: url(../../../images/promo/sprite/lg.png);
        background-position: -194px -69px;
        width: 19px;
        height: 30px;
    }

    .footer__mail i {
        background-image: url(../../../images/promo/sprite/lg.png);
        background-position: -247px -168px;
        width: 30px;
        height: 19px;
    }
}

@media screen and (max-width: 768px) {
    .bmauto_container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer {
        padding: 20px 0;
    }

    .footer .bmauto_container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .footer__logo {
        width: 100%;
    }

    .footer__logo svg {
        margin: 0 auto;
        width: 129px;
        height: 79px;
    }

    .footer__info-block {
        margin-left: 0;
        margin-right: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .footer__contacts {
        margin-right: 0;
        text-align: center;
    }

    .footer__title {
        margin-top: 40px;
    }

    .footer__about {
        display: none;
    }

    .footer__phone {
        margin-top: 20px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .footer__phone i {
        margin-right: 8px;
        background-image: url(../../../images/promo/sprite/sm.png);
        background-position: -124px -52px;
        width: 19px;
        height: 30px;
    }

    .footer__mail {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .footer__mail i {
        background-image: url(../../../images/promo/sprite/sm.png);
        background-position: -340px -285px;
        width: 30px;
        height: 19px;
    }

    .footer__important {
        margin-top: 36px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
    }

    .footer__privacy {
        margin-top: 8px;
    }
}

@media screen and (max-width: 767px) {
    .bmauto_container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
/* ----------- ELAPSED TIME ------------*/

.elapsed-time {
    position: absolute;
    left: 20px;
    font-size: 12px;
    color: #aaa;
    z-index: 5000;
    display: none;
}

@media print {
    .elapsed-time {
        display: none
    }
}

/* ----------- LIST FILES ------------*/
.order-files {
    margin-bottom: 50px;
}

.order-files ul {
    margin: 0 0 0 28px;
    padding: 0;
}


@media (max-width: 767px) {
    .order-files ul {
        margin: 0
    }
}

.order-files ul li {
    position: relative;
    list-style: none;
    font-size: 16px;
    line-height: 23px;
    padding-left: 30px;
    margin-bottom: 10px
}

.order-files ul li:before {
    position: absolute;
    content: '';
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px
}

.order-files .row {
    margin-bottom: 15px
}

.order-files ul li.cdr:before {
    background: url(../../../images/file/cdr.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.indd:before, .order-files ul li.id:before {
    background: url(../../../images/file/indd-id.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.html:before {
    background: url(../../../images/file/html.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.css:before,
.order-files ul li.raw:before,
.order-files ul li.cr2:before,
.order-files ul li.crw:before,
.order-files ul li.nef:before,
.order-files ul li.pef:before {
    background: url(../../../images/file/raw,cr2,crw,nef,pef.svg) no-repeat;
    background-size: 16px auto;
    -webkit-background-size: 16px auto
}

.order-files ul li.mp3:before,
.order-files ul li.wav:before,
.order-files ul li.wma:before,
.order-files ul li.flac:before {
    background: url(../../../images/file/mp3,wav,wma,flac.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.mov:before,
.order-files ul li.avi:before,
.order-files ul li.mp4:before,
.order-files ul li.mkv:before {
    background: url(../../../images/file/mov,avi,mp4,mkv.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.ttf:before {
    background: url(../../../images/file/ttf.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.zip:before,
.order-files ul li.rar:before {
    background: url(../../../images/file/rar,zip.svg) no-repeat
}

.order-files ul li.DjVu:before {
    background: url(../../../images/file/DjVu.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.epub:before {
    background: url(../../../images/file/epub.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.flv:before {
    background: url(../../../images/file/flv.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.bak:before {
    background: url(../../../images/file/bak.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.lsp:before,
.order-files ul li.lisp:before {
    background: url(../../../images/file/lsp,lisp.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.ai:before {
    background: url(../../../images/file/ai.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.eps:before {
    background: url(../../../images/file/eps.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.psd:before {
    background: url(../../../images/file/psd.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.bmp:before {
    background: url(../../../images/file/bmp.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.db:before {
    background: url(../../../images/file/db.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.dwl2:before {
    background: url(../../../images/file/dwl2.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.dwl:before {
    background: url(../../../images/file/dwl.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.exe:before {
    background: url(../../../images/file/exe.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.tiff:before,
.order-files ul li.tif:before {
    background: url(../../../images/file/tiff,tif.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.xlsx:before,
.order-files ul li.xls:before,
.order-files ul li.csv:before {
    background: url(../../../images/file/xlsx,xls,csv.svg) no-repeat;
    background-size: 16px auto;
    -webkit-background-size: 16px auto
}

.order-files ul li.pdf:before {
    background: url(../../../images/file/pdf.svg) no-repeat;
    background-size: 16px auto;
    -webkit-background-size: 16px auto
}

.order-files ul li.dwg:before {
    background: url(../../../images/file/dwg.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.log:before {
    background: url(../../../images/file/log.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.jpeg:before,
.order-files ul li.jpg:before {
    background: url(../../../images/file/jpg.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.pptx:before,
.order-files ul li.ppt:before {
    background: url(../../../images/file/pptx,ppt.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.png:before {
    background: url(../../../images/file/png.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.gif:before {
    background: url(../../../images/file/gif.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li:before {
    background: url(../../../images/file/other.svg) no-repeat;
    -webkit-background-size: 16px 16px !important;
    background-size: 16px 16px !important
}

.order-files ul li.doc:before,
.order-files ul li.docx:before {
    background: url(../../../images/file/doc-word.svg) no-repeat;
    -webkit-background-size: 16px auto;
    background-size: 16px auto
}

.order-files ul li.txt:before {
    background: url(../../../images/file/txt.svg) no-repeat;
    -webkit-background-size: 12px auto;
    background-size: 12px auto;
    margin-left: 3px
}
/*-------------- Empty Block ----------*/
.empty-block {
    padding: 30px;
    background: #fafafa;
    border: 3px dashed #e6e6e6;
    text-align: center;
    font-size: 20px;
    color: #999
}

@media (max-width: 479px) {
    .empty-block {
        padding: 15px;
        font-size: 18px
    }
}

.empty-block p {
    margin: 0
}

.empty-block .btn {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 15px
}

@media (max-width: 479px) {
    .empty-block .btn {
        padding-left: 10px;
        padding-right: 10px
    }
}

/* ------------ Link dashed -----------*/
.link-dashed {
    font-size: 18px;
    border-bottom-width: 1px;
    border-bottom-style: dashed
}

.link-dashed:hover, .link-dashed:active, .link-dashed:focus {
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dashed
}

/* ---------- File Uplopad Correct --- */
.fileupload-progress .progress {
    margin-bottom: 10px;
    margin-top: 10px;
}

.fileupload-buttonbar .delete, .fileupload-buttonbar input[type="checkbox"],
.template-download td input[type="checkbox"] {
    display: none;
}

.fileupload-buttonbar .btn, .template-download .btn, .template-upload .btn{
    border-radius: 0;
}

/* ------- Hidden middle ------ */
@media (max-width: 767px) {
    .hidden-middle {
        display: none
    }
}

/* -------- Tabs ------------------ */
.nav-tab {
    display: flex;
    width: 100%;
    margin-bottom: 10px
}

.nav-tab > li {
    flex: 1 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden
}

.nav-tab > li a {
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 4px 4px 0 0;
    color: #8e8e8e;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #c1c1c1;
    overflow: hidden;
    text-overflow: ellipsis
}

.nav-tab > li a:hover, .nav-tab > li a:active, .nav-tab > li a:focus {
    color: #333333;
    background: none;
    border-bottom: 1px solid #c1c1c1
}

.nav-tab > li a .icon {
    font-size: 16px;
    margin-right: 7px;
    position: relative;
    display: inline-block;
    font-style: normal;
    line-height: 1;
}

@media (max-width: 767px) {
    .nav-tab > li a .icon {
        margin-right: 0;
        font-size: 22px
    }
}

.nav-tab > li a .count-label {
    position: relative;
    vertical-align: top;
    margin-left: 5px
}

.nav-tab > li.active a {
    color: #1E1E1E;
    border-top: 2px solid #045772;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-bottom: none
}

/* --------- Other ----- */
.break-word {
    word-break: break-all;
}

.scroll-y {
    overflow-y: auto;
}

.hide-long-text {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.deleted-item {
    text-decoration: line-through;
}

.nowrap {
    white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 941px){
    .fix-navbar-with {
        margin-top: 150px;
    }
}

@media (min-width: 940px) and (max-width: 1520px){
    .fix-navbar-with {
        margin-top: 50px;
    }
}

/* --------- Comments ------- */


.comment-wrapper .comments-list {
    margin-bottom: 0;
}

.comment-wrapper .panel-heading h2 {
    margin-bottom: 0;
}

.comment-wrapper .comments-list .comment .comment-content {
    position: relative;
    padding: 5px 0 5px 0;
}

.comment-wrapper .comments-list .comment .comment-content .comment-author-avatar {
    float: left;
    width: 34px;
    text-align: center;
}

.comment-wrapper .comments-list .comment .comment-content .comment-details {
    float: left;
    width: 100%;
    padding-left: 20px;
    margin-top: 6px;
}

.comment-wrapper .comments-list .comment .comment-content .comment-details .comment-author-name {
    font-style: italic;
    font-weight: 600;
    margin-bottom: 1px;
}

.comment-wrapper .comments-list .comment .comment-content .comment-details .comment-author-name .comment-date {
    font-size: 75%;
    font-weight: 400;
    line-height: 1;
    margin-left: 5px;
    color: #777;
}

.comment-wrapper .comments-list .comment .comment-content .comment-details .comment-author-name .comment-panel {
    float: right;
}

.comment-wrapper .comments-list .comment .comment-content .comment-details .comment-body {
    color: #777;
    word-break: break-word;
    margin-bottom: 8px;
}

.comment-wrapper .panel .panel-body {
    padding: 0;
}

/* ---------------------------------- Note ------------------------------ */

.note-container {
    position: relative;
    overflow: hidden;
    background-color: #FAF8DD;
    background: -webkit-gradient(linear, left bottom, left top, from(#e8e1b7), to(#FAF8DD));
    background: -moz-linear-gradient(bottom, #e8e1b7 0px, #FAF8DD 40px, #FAF8DD);
    background: -webkit-linear-gradient(bottom, #e8e1b7, #FAF8DD 40px, #FAF8DD);
    background: -o-linear-gradient(bottom, #e8e1b7 0px, #FAF8DD 40px, #FAF8DD);
    background: -ms-linear-gradient(bottom, #e8e1b7 0px, #FAF8DD 40px, #FAF8DD);
    background: linear-gradient(to top, #e8e1b7 0px, #FAF8DD 40px, #FAF8DD);
    padding: 10px;
    opacity: 0.9;
}

.note-container:before {
     content: "";
     background-image: url(../../../images/note_background.png);
     opacity: 0.3;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: -1;
     width: auto;
}

.note-container:after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     border-width: 0 0 16px 16px;
     border-style: solid;
     border-color: #EEE6B8 #fff;
 }

.note-text {
    color: #000;
    margin-left: 20px;
    font-size: 14px;
}

.note-form-section {
    float: right;
    width: 100%;
}

.note-form-field {
    padding: 0 80px 0 0;
}

.note-red {
    background-color: #FCEAE9;
    background: -webkit-gradient(linear, left bottom, left top, from(#ffcfcc), to(#FCEAE9));
    background: -moz-linear-gradient(bottom, #ffcfcc 0px, #FCEAE9 40px, #FCEAE9);
    background: -webkit-linear-gradient(bottom, #ffcfcc 0px, #FCEAE9 40px, #FCEAE9);
    background: -o-linear-gradient(bottom, #ffcfcc 0px, #FCEAE9 40px, #FCEAE9);
    background: -ms-linear-gradient(bottom, #ffcfcc 0px, #FCEAE9 40px, #FCEAE9);
    background: linear-gradient(to top, #ffcfcc 0px, #FCEAE9 40px, #FCEAE9);
    opacity: 0.9;
}

.note-red:after {
    border-color: #F5DAD9 #fff;
}

.header-alert {
    background: #FFFFCC;
    text-align: center;
    padding-top: 58px;
    padding-bottom: 8px;
    font-size: 14px;
    margin-bottom: -55px;
}
.header-alert span.icon-close {
    right: 5px;
    position: absolute;
    top: 9px;
    cursor: pointer;
}
.header-alert a {
    color: #3b86b4;
}