a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    /*font: inherit;*/
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: "";
        content: none
    }

body {
    font: 100% Gilroy-Bold;
    color: #384643;
    background-color: #f1f4f4;
    -webkit-text-size-adjust: none;
    min-height: 100vh
}


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

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

.left {
    text-align: left !important
}

.center {
    text-align: center !important
}

.right {
    text-align: right !important
}

.top {
    vertical-align: top !important;
}

.middle {
    vertical-align: middle !important;
}

.bottom {
    vertical-align: bottom !important;
}

.alignleft {
    float: left
}

.aligncenter {
    margin: 0 auto
}

.alignright {
    float: right
}

.show {
    display: block !important
}

.hide {
    display: none !important
}

.cf:after, .cf:before, .container:after, .container:before, .widget:after, .widget:before, form ol > li:after, form ol > li:before {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden
}

.cf:after, .clear, .container:after, .widget:after, form ol > li:after {
    clear: both
}

.cf, .container, .widget, form ol > li {
    zoom: 1
}

html {
    /*font: normal 62.5% Gilroy-Bold;*/
    font: 16px Gilroy-Bold;
    color: #444;
    background-color: #fff
}

* {
    box-sizing: border-box
}

.normal-form textarea {
    overflow: auto
}

button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px 0 0;
    font: 700 14px/20px Gilroy-Bold;
    color: #fff;
    border: none;
    text-align: center;
    overflow: visible;
    cursor: pointer
}

.user-content dl, .user-content ol, .user-content ul, h1, h2, h3, h4, h5, h6, p, table {
    margin-bottom: 20px
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px
}

h1 {
    font: 400 32px/1.3 Gilroy-Bold
}

h2 {
    font: 400 24px/1.2 Gilroy-Bold
}

h3 {
    font: 400 22px/1.2 Gilroy-Bold
}

h4 {
    font: 400 20px/1.2 Gilroy-Bold
}

h5 {
    font: 400 16px/1.2 Gilroy-Bold
}

h6 {
    font: 400 14px/1.2 Gilroy-Bold
}

a {
    text-decoration: none
}

strong {
    font-weight: 700
}

em {
    font-style: italic
}

sup {
    vertical-align: text-top
}

sub, sup {
    font-size: 75%
}

sub {
    vertical-align: bottom
}

blockquote {
    font-style: italic
}

.user-content ul {
    list-style: disc;
    margin-left: 24px
}

    .user-content ul ul {
        margin-left: 20px;
        margin-bottom: 0
    }

    .user-content ul li {
        margin-bottom: 0
    }

.user-content ol {
    margin-left: 24px;
    list-style: decimal
}

    .user-content ol ol {
        list-style: lower-latin;
        margin-bottom: 0
    }

.user-content ul ul, .view ol ol {
    margin-bottom: 0
}

.user-content li li {
    font-size: 1em
}

table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0
}

    table td, table th {
        vertical-align: middle
    }

.normal-form input[type=color], .normal-form input[type=date], .normal-form input[type=datetime-local], .normal-form input[type=datetime], .normal-form input[type=email], .normal-form input[type=month], .normal-form input[type=number], .normal-form input[type=password], .normal-form input[type=search], .normal-form input[type=tel], .normal-form input[type=text], .normal-form input[type=time], .normal-form input[type=url], .normal-form input[type=week], .normal-form select, .normal-form textarea {
    -webkit-appearance: none
}

    .normal-form input[type=color]:focus, .normal-form input[type=date]:focus, .normal-form input[type=datetime-local]:focus, .normal-form input[type=datetime]:focus, .normal-form input[type=email]:focus, .normal-form input[type=month]:focus, .normal-form input[type=number]:focus, .normal-form input[type=password]:focus, .normal-form input[type=search]:focus, .normal-form input[type=tel]:focus, .normal-form input[type=text]:focus, .normal-form input[type=time]:focus, .normal-form input[type=url]:focus, .normal-form input[type=week]:focus, .normal-form select:focus, .normal-form textarea:focus {
        outline: none;
        box-shadow: none;
    }

.overflow-wrapper {
    position: relative;
    overflow: hidden
}

h1, h2, h3, h4, h5, h6, p {
    line-height: 1;
    margin-bottom: 0
}

a {
    color: #384643
}

img {
    max-width: 100%
}

button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    outline: none
}

.checklist-box, .error-ico, .status, .tasks-order-filter, .workflow-field, a, button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    user-select: none
}

.font-b {
    font-family: 'Gilroy-Bold' !important;
}

.font-2 {
    font-family: Chakra Petch,sans-serif
}

.font-3 {
    font-family: Gilroy-Medium
}

.text-color-2 {
    color: #b5b5b5
}

.text-color-3 {
    color: #48ac98
}

.text-color-4 {
    color: #4a9cb4
}

.text-color-6 {
    color: #495b70
}

.text-color-7 {
    color: #909090
}

.text-color-8 {
    color: #fff
}

.text-color-10 {
    color: #8ba7b9
}

.text-color-11 {
    color: #b2fff0
}

.text-color-13 {
    color: #000
}

.text-color-20 {
    color: #c8f4eb
}

.text-color-24 {
    color: #5eb5ce
}

.text-color-25 {
    color: #89d6c7
}

.text-color-29 {
    color: #cc3b3b
}

.text-color-31 {
    color: #84939d
}

.title-0 {
    font-size: 20px
}

.title-1 {
    font-size: 18px
}

.title-2 {
    font-size: 16px
}

.title-3 {
    font-size: 15px
}

.title-4 {
    font-size: 14px
}

.title-5 {
    font-size: 13px
}

.page-text {
    font-size: 14px
}

.page-text-2 {
    font-size: 16px
}

.page-text-3 {
    font-size: 13px
}

.page-text-4 {
    font-size: 12px
}

.grid-width-2 {
    width: 20%;
}

.flex-layout {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.uppercase {
    text-transform: uppercase
}

.border-radius-1 {
    border-radius: 20px
}

.border-radius-2 {
    border-radius: 15px
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.margin-top-1 {
    margin-top: 10px;
}

.margin-top-2 {
    margin-top: 20px;
}

.margin-1 {
    margin-bottom: 10px
}

.margin-2 {
    margin-bottom: 20px
}

.margin-3 {
    margin-bottom: 30px
}

.margin-4 {
    margin-bottom: 40px
}

.margin-5 {
    margin-bottom: 50px
}

.margin-6 {
    margin-bottom: 60px
}

.margin-7 {
    margin-bottom: 70px
}

.margin-8 {
    margin-bottom: 80px
}

.margin-9 {
    margin-bottom: 90px
}

.margin-10 {
    margin-bottom: 100px
}

.padding-left-1 {
    padding-left: 10px;
}

.padding-left-2 {
    padding-left: 20px;
}

#main {
    padding-bottom: 1px
}

#page-header {
    padding-left: 268px;
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 200
}

    #page-header.header-2 {
        padding-left: 50px
    }

.site-logo-wrapper {
    display: block;
    max-width: 200px;
    padding: 16px 0 16px;
    width: 40%
}

.site-logo {
    display: block
}

.group-detail-wrapper {
    margin-left: auto;
    margin-right: -10px;
    background-color: #f0f4f7;
    border-radius: 0 0 0 20px;
    width: 20%;
    max-width: 300px;
    padding: 20px 20px 10px 25px
}

.header-user-account {
    max-width: 370px;
    width: 55%;
    background-color: #f0f4f7;
    padding: 5px 25px 10px
}

.header-user-account, .header-user-info {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-user-info {
    width: -webkit-calc(100% - 145px);
    width: calc(100% - 145px);
    /*padding-right: 60px*/
}

.header-user-name {
    background-color: #48ac98;
    width: 60px;
    height: 60px;
    line-height: 30px;
    font-size: 30px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 1px 3px 10px 0 #48ac98
}

.header-user-info-text {
    width: -webkit-calc(100% - 70px);
    width: calc(100% - 70px);
    padding-left: 18px;
    line-height: 1.4;
}

.header-user-login-wrapper {
    width: 120px
}

.header-user-login {
    width: 50px;
    height: 50px;
    background-color: rgba(179,195,204,.18);
    cursor: pointer
}

    .header-user-login:hover .header-user-login-ico {
        fill: #48ac98
    }

.header-user-login-ico {
    width: 30px;
    height: 30px;
    fill: #8ba7b9;
    -webkit-transition: fill .5s;
    transition: fill .5s
}

.header-user-login-ico, .login-border {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.login-border {
    width: 1px;
    height: 100%;
    background-color: #eaeaea
}

.sidebar {
    position: fixed;
    width: 165px;
    height: -webkit-calc(95vh - 40px);
    height: calc(95vh - 40px);
    background-color: #1a5c6f;
    border-radius: 0 100px 100px 100px;
    left: 45px;
    top: 45px;
    padding: 20px 0;
    /*    padding-bottom: 160px;*/
    z-index: 201;
    min-height: 600px;
}

.sidebar-home {
    display: block;
    width: 40px;
    height: 40px;
    /*   background-color: #0c404e;*/
    margin: auto;
    /* margin-bottom: 70px*/
}

    .sidebar-home:hover .sidebar-house-ico {
        fill: #fff
    }

.sidebar-house-ico {
    width: 17px;
    height: 17px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    fill: #adcbc4;
    -webkit-transition: fill .5s;
    transition: fill .5s
}

.sidebar-nav {
    height: 73%
}

    .sidebar-nav .optiscroll-vtrack {
        opacity: 1;
        width: 3px;
        background-color: #4a9cb4;
        right: 10px
    }

.sidebar-nav-box {
    display: block;
    padding: 0 20px
}

    .sidebar-nav-box .page-text {
        line-height: 1.125;
        -webkit-transition: color .5s;
        transition: color .5s
    }

    .sidebar-nav-box:hover .page-text {
        color: #fff
    }

    .sidebar-nav-box:hover .sidebar-nav-ico {
        fill: #fff
    }

    .sidebar-nav-box.active .page-text {
        color: #fff
    }

    .sidebar-nav-box.active .sidebar-nav-ico {
        fill: #fff
    }

.sidebar-nav-ico {
    width: 35px;
    height: 31px;
    fill: #4a9cb4;
    -webkit-transition: fill .5s;
    transition: fill .5s;
    margin-bottom: 5px
}

.sidebar-chat {
    width: 111px;
    height: 111px;
    border-radius: 100px 0 100px 100px;
    background-color: #48ac98;
    bottom: 25px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 0 40px 50px rgba(0,0,0,.49);
    -webkit-transition: box-shadow .5s,color .5s;
    transition: box-shadow .5s,color .5s
}

    .sidebar-chat:hover {
        box-shadow: 0 10px 10px rgba(0,0,0,.49);
        color: #fff
    }

        .sidebar-chat:hover .sidebar-chat-ico {
            fill: #fff
        }

.sidebar-chat-ico {
    width: 37px;
    height: 33px;
    fill: #c8f4eb;
    display: block;
    margin: auto;
    margin-bottom: 10px;
    -webkit-transition: fill .5s;
    transition: fill .5s
}

.offset-container {
    width: -webkit-calc(100% - 268px);
    width: calc(100% - 268px);
    margin-left: auto
}

.container-2 {
    padding: 0 50px
}

.offset-1 {
    padding-top: 100px
}

.offset-2 {
    padding-top: 240px
}

.upcoming-tasks-wrapper {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.upcoming-tasks-filter {
    background-color: #dfeaed;
    border-radius: 10px 10px 0 0;
    padding: 10px
}

.custom-select ~ select {
    display: none
}

.upcoming-tasks-table {
    width: 69.5%
}

.upcoming-tasks-filter-wrapper .title-2 {
    width: 40%;
    padding-right: 20px
}

.upcoming-tasks-filter {
    width: 52%
}

.dk-select {
    color: #495b70;
    font-size: 13px;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    user-select: none
}

    .dk-select.dk-select-open-down .dk-select-options, .dk-select.dk-select-open-up .dk-select-options {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .dk-select.dk-select-open-down ~ .select-ico, .dk-select.dk-select-open-up ~ .select-ico {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.dk-selected {
    background-color: #fff;
    position: relative;
    z-index: 1;
    outline: none;
    border-radius: 6px;
    padding: 9px 40px 9px 17px
}

.dk-select-options {
    position: absolute;
    z-index: 4;
    top: 92%;
    left: 0;
    width: 100%;
    opacity: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-transition: opacity .5s,visibility .5s,-webkit-transform .5s;
    transition: opacity .5s,visibility .5s,-webkit-transform .5s;
    transition: opacity .5s,visibility .5s,transform .5s;
    transition: opacity .5s,visibility .5s,transform .5s,-webkit-transform .5s;
    padding: 10px 17px;
    border-radius: 0 0 6px 6px;
    box-shadow: 10px 40px 34px -17px rgba(0,0,0,.25)
}

    .dk-select-options .hidden-option {
        display: none
    }

.dk-option {
    margin-bottom: 10px;
    -webkit-transition: color .5s;
    transition: color .5s
}

    .dk-option:hover {
        color: #4a9cb4
    }

.tasks-border {
    border-right: 1px solid #ccdaea;
    padding-right: 19px
}

.tasks-filter {
    color: #495b70
}

.tasks-filter-1 {
    width: 36.8%
}

.tasks-filter-2 {
    width: 32%
}

.tasks-filter-3 {
    width: 24%
}

.select-ico {
    position: absolute;
    width: 13px;
    height: 13px;
    right: 37px;
    top: 13px;
    fill: #565b67;
    z-index: 2;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
    pointer-events: none
}

.page-size-text {
    width: -webkit-calc(100% - 70px);
    width: calc(100% - 70px);
    padding-right: 14px
}

.page-size-filter {
    width: 70px
}

    .page-size-filter .select-ico {
        right: 30px
    }

.tasks-pag-next .tasks-pag-ico {
    -webkit-transform: translate(-50%,-50%) rotate(180deg);
    transform: translate(-50%,-50%) rotate(180deg)
}

.tasks-pag-btn {
    border-radius: 6px;
    background-color: #70abbc;
    width: 36px;
    height: 36px;
    -webkit-transition: background-color .5s;
    transition: background-color .5s
}

    .tasks-pag-btn:hover {
        background-color: #1a5c6f
    }

.tasks-pag-ico {
    width: 13px;
    height: 13px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    fill: #fff
}

.tasks-page-indicator {
    width: -webkit-calc(100% - 76px);
    width: calc(100% - 76px);
    padding: 0 5px;
    color: #b3c3cc
}

    .tasks-page-indicator .current-task-page {
        color: #495b70
    }

.upcoming-tasks-table-wrapper {
    font-size: 14px;
    border-radius: 10px 10px 10px 10px;
    position: relative;
}

.table-box {
    font-size: 17px;
    border-radius: 10px 0 10px 10px;
    background-color: #dfeaed;
    padding: 15px 10px 15px
}

.table-wrapper-1 table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 20px
}

.table-wrapper-1 tr td {
    padding: 0 2px 0px;
    margin-bottom: 10px;
    position: relative
}

/*.table-wrapper-1 tr:not(:first-child) td {
    color: #b5b5b5;
    padding: 5px 3px;
    background-color: #fff
}*/
.table-wrapper-1 tbody tr td {
    color: #84939d;
    padding: 5px 3px;
    background-color: #dfeaed;
}

/*table tr td{
    padding-left: 15px;
    padding-right: 15px;
}*/

.table-wrapper-1 .table tbody tr td {
    /*color: #b5b5b5;*/
    padding: 0px 8px;
    background-color: #fff
}

.table-wrapper-1 tr td:first-child {
    border-radius: 6px 0 0 6px
}

.table-wrapper-1 tr td:last-child {
    border-radius: 0 6px 6px 0
}

/*.table-wrapper-1 tr .table-text-color-1 {
    color: #384643;
}*/


.tasks-order-filter {
    position: relative;
    padding-right: 45px;
    cursor: pointer;
    display: inline-block
}

    .tasks-order-filter.active .task-order-arrow-up {
        fill: #495b70
    }

    .tasks-order-filter.active .task-order-arrow-down {
        fill: #b3c3cc
    }

.tasks-order-filter-arrows-wrapper {
    position: absolute;
    width: 31px;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.task-order-arrow {
    width: 13px;
    height: 11px;
    fill: #b3c3cc;
    -webkit-transition: fill .5s;
    transition: fill .5s
}

.task-order-arrow-down {
    -webkit-transform-origin: 50% 57%;
    transform-origin: 50% 57%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    fill: #495b70
}

.td-border {
    position: absolute;
    width: 1px;
    height: -webkit-calc(100% - 36px);
    height: calc(100% - 36px);
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #eaeaea
}

.tasks-indicator-wrapper {
    width: 28%;
    border-radius: 0 0 0 80px;
    background: -webkit-gradient(linear,left top,left bottom,from(#1a5c6f),to(#2f89a3));
    background: linear-gradient(#1a5c6f,#2f89a3);
    box-shadow: 0 40px 50px rgba(40,124,147,.39)
}

.tasks-indicator {
    width: 47%;
    padding: 45px 35px
}

.tasks-num {
    font-size: 36px
}

.list-ico {
    fill: #4a9cb4;
    width: 30px;
    height: 30px
}

.app-que {
    width: 53%;
    padding: 35px;
    background-color: #48ac98;
    border-radius: 0 0 0 80px
}

.suitcase-ico {
    width: 30px;
    height: 30px;
    fill: #89d6c7
}

.upcoming-tasks-wrapper-2 .upcoming-tasks-filter {
    width: 32%
}

.upcoming-tasks-wrapper-2 .tasks-filter-2 {
    width: 53%
}

.upcoming-tasks-wrapper-2 .tasks-filter-3 {
    width: 41%
}

.app-list-link {
    text-align: right;
    width: 100%;
    padding-right: 20px;
    -webkit-transition: color .5s;
    transition: color .5s;
    z-index: 999;
}

    .app-list-link .page-text-2 {
        text-decoration: underline
    }

    .app-list-link:hover {
        color: #5eb5ce
    }

.workflow-wrapper {
    width: 28%;
    padding-right: 35px
}

.workflow-box {
    padding-left: 22px;
    position: relative;
    padding-bottom: 50px
}

    .workflow-box.active .workflow-check {
        opacity: 0
    }

    .workflow-box.active .workflow-status-dot {
        opacity: 1
    }


    .workflow-box.active .workflow-dashed-border {
        opacity: 1
    }

    .workflow-box.completed .workflow-check {
        opacity: 1
    }

    .workflow-box.completed .workflow-status-dot {
        opacity: 0
    }

    .workflow-box.completed .workflow-status-circle {
        background-color: #384643;
        border: 5px solid #f0f4f7
    }

    .workflow-box.completed .workflow-dashed-border {
        opacity: 0
    }

    .workflow-box .workflow-line {
        border: 1px solid #8ba7b9;
    }

    .workflow-box:last-child .workflow-line {
        display: none
    }

.workflow-box-status {
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 2
}

.workflow-field {
    color: #acb9c1;
    border-radius: 10px;
    padding: 17px 20px 17px 30px;
    background-color: hsla(0,0%,100%,.32);
    cursor: pointer
}

    .workflow-field .title-4 {
        margin-bottom: 5px
    }

    .workflow-field.active, .workflow-field.completed {
        background-color: #1a5c6f;
        color: #fff
    }

    .workflow-field.active {
        opacity: .3
    }

        .workflow-field.active.owner {
            opacity: .5
        }

.workflow-field-1 {
    width: 50%
}

.workflow-field-2 {
    width: 48%;
    padding: 17px 15px
}

.workflow-status-circle {
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 50%;
    margin-top: 20px;
    background-color: #f0f4f7;
    border: 5px solid #f0f4f7
}

.workflow-status-dot {
    width: 7px;
    height: 7px;
    background-color: #f0f4f7;
    border-radius: 50%
}

.workflow-check, .workflow-status-dot {
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0
}

.workflow-check {
    width: 13px;
    height: 10px;
    fill: #48ac98;
    stroke: #48ac98
}

.workflow-line {
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    top: 50px;
    left: 47%;
    border: 1px dashed #8ba7b9
}

.workflow-dashed-border {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px dashed #8ba7b9
}

.checklist-wrapper {
    padding: 110px 50px 25px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 10
}

    .checklist-wrapper .page-text {
        -webkit-transition: color .5s;
        transition: color .5s
    }

.checklist-box {
    padding: 8px 0px 0;
    width: 7%;
    border-radius: 10px;
    cursor: pointer
}

    .checklist-box.completed .checklist-ico {
        fill: #000
    }

    .checklist-box.completed .checklist-dotted {
        opacity: 0
    }

    .checklist-box.completed .checklist-check {
        opacity: 1
    }

    .checklist-box.active {
        z-index: 1;
        background-color: #1a5c6f;
        -webkit-transition: background-color .5s;
        transition: background-color .5s
    }

        .checklist-box.active .checklist-ico {
            fill: #fff
        }

        .checklist-box.active .checklist-dotted {
            opacity: 1
        }

        .checklist-box.active .checklist-check {
            opacity: 0
        }

        .checklist-box.active .page-text {
            color: #fff
        }

    .checklist-box:first-child .checklist-border {
        display: none
    }

.checklist-ico {
    width: 24px;
    height: 30px;
    fill: #909090
}

.checklist-border {
    position: absolute;
    width: 20px;
    height: 90px;
    top: 0;
    left: -15px
}

.checklist-circle {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -20px;
    background-color: #f0f4f7;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%
}

.checklist-check, .checklist-dotted {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: fill .5s,opacity .5s;
    transition: fill .5s,opacity .5s
}

.checklist-check {
    opacity: 0
}

.status-wrapper {
    border-bottom: 1px solid #a2b9bf
}

.status {
    background-color: #dfeaed;
    border-radius: 10px 0 0 0;
    max-width: 250px;
    width: -webkit-calc(20% - 5px);
    width: calc(20% - 5px);
    margin-right: 5px;
    padding: 18px 20px;
    cursor: pointer;
    -webkit-transition: background-color .5s,box-shadow .5s;
    transition: background-color .5s,box-shadow .5s
}

    .status .title-1 {
        display: inline-block;
        padding-right: 30px;
        color: #8ba7b9;
        -webkit-transition: color .5s;
        transition: color .5s
    }

    .status.active {
        background-color: #1a5c6f;
        box-shadow: 10px 0 20px rgba(26,92,111,.36)
    }

        .status.active .title-1 {
            color: #fff
        }

        .status.active .status-check {
            border: none;
            background-color: #48ac98
        }

        .status.active .status-check-ico {
            opacity: 1
        }

.status-check {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 4px;
    right: 0;
    -webkit-transition: border .5s,background-color .5s;
    transition: border .5s,background-color .5s;
    border: 1px dashed #8ba7b9;
    border-radius: 50%
}

.status-check-ico {
    position: absolute;
    width: 11px;
    height: 8px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    stroke: #fff;
    fill: #fff;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.credit-info-wrapper {
    background-color: #48ac98;
    border-radius: 10px;
    padding: 12px 16px;
    color: white;
    display: none
}

    .credit-info-wrapper.active {
        display: block
    }

        .credit-info-wrapper.active span {
            font-weight: 700;
        }

.credit-error-wrapper {
    background-color: #efdfdf;
    border-radius: 10px;
    padding: 26px 80px;
    display: none
}

    .credit-error-wrapper.active {
        display: block
    }

.error-ico {
    fill: #cc3b3b;
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.info-ico {
    left: 30px
}

.credit-error-close {
    right: 30px;
    cursor: pointer
}

.application-info {
    background-color: #dfeaed;
    border-radius: 10px;
    padding: 40px
}

.app-info-box {
    width: 25%;
    margin-bottom: 10px;
    position: relative
}

    /* .app-info-box:nth-last-child(-n+4) {
        margin-bottom: 0
    }*/

    .app-info-box.error .dla-error-text {
        display: block
    }

    .app-info-box.disabled .btn-1 {
        opacity: .3;
        pointer-events: none
    }

.select-type-2 .dk-select {
    height: 100%
}

.select-type-2 .dk-selected {
    padding: 29px 70px 9px 17px;
    border-radius: 10px;
    color: #000;
    height: 100%
}

.select-type-2 .dk-select-options {
    color: #000;
    border-radius: 0 0 10px 10px
}

.select-type-2 .select-ico {
    right: 25px;
    top: 25px
}

.app-info-box-select-text {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 0 70px 0 17px;
    pointer-events: none;
    letter-spacing: .2em
}

.app-info-select-border {
    display: block;
    position: absolute;
    width: 1px;
    height: -webkit-calc(100% - 20px);
    height: calc(100% - 20px);
    right: 58px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #eaeaea;
    z-index: 2
}

.has-dla {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.dla-checkbox {
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0;
    top: -3px;
    opacity: 0;
    z-index: 2;
    margin: 0;
    cursor: pointer
}

    .dla-checkbox:checked + .dla-checkbox-label .dla-info-check {
        opacity: 1
    }

.dla-checkbox-label {
    padding-right: 30px;
    padding-left: 30px;
    display: inline-block
}

    .dla-checkbox-label:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: -3px;
        width: 25px;
        height: 25px;
        border-radius: 4px;
        background-color: #8ba7b9
    }

    .dla-checkbox-label.active .dla-info-tooltip {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

.dla-info-check {
    position: absolute;
    width: 15px;
    height: 15px;
    fill: #fff;
    stroke: #fff;
    left: 5px;
    top: 2px;
    z-index: 1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0
}

.dla-checkbox-wrapper, .dla-text {
    width: 50%;
    padding-right: 20px
}

.dla-info {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer
}

.dla-info-tooltip {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,.49);
    padding: 20px;
    color: #384643;
    bottom: 30px;
    width: 210px;
    left: 105%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: opacity .5s,visibility .5s,-webkit-transform .5s;
    transition: opacity .5s,visibility .5s,-webkit-transform .5s;
    transition: opacity .5s,visibility .5s,transform .5s;
    transition: opacity .5s,visibility .5s,transform .5s,-webkit-transform .5s;
    z-index: 2
}

.dla-error-text {
    width: 100%;
    margin-top: 15px;
    display: none
}

.app-info-input-wrapper {
    height: 60px;
    border-radius: 10px;
    padding: 1px 0;
    background-color: #fff
}

.app-info-input {
    border: none;
    font-size: 18px;
    font-family: Gilroy-Bold;
    padding: 0 17px;
    outline: none;
    display: block;
    width: 100%;
    padding-top: 30px;
    border-radius: 10px
}

    .app-info-input::-webkit-input-placeholder {
        color: #b5b5b5
    }

    .app-info-input::-moz-placeholder {
        color: #b5b5b5
    }

    .app-info-input:-ms-input-placeholder {
        color: #b5b5b5
    }

    .app-info-input::placeholder {
        color: #b5b5b5
    }

    .app-info-input.input-color-2::-webkit-input-placeholder {
        color: #384643
    }

    .app-info-input.input-color-2::-moz-placeholder {
        color: #384643
    }

    .app-info-input.input-color-2:-ms-input-placeholder {
        color: #384643
    }

    .app-info-input.input-color-2::placeholder {
        color: #384643
    }

.workflow-detail-content {
    background-color: #dfeaed;
    border-radius: 10px;
    padding: 40px
}

/*.workflow-detail-inner {
    width: 73%
}*/

.workflow-detail-inner .app-info-box {
    width: 33.333333%;
    padding-right: 10px;
}

.workflow-form-wrapper .app-info-box {
    padding-right: 10px;
}

.app-info-box-pr .app-info-box {
    padding-right: 0 !important;
}

.workflow-detail-inner hr {
    width: 100%;
    border-bottom: 1px solid #b4cad0;
    opacity: .2;
    margin-top: 30px
}

.btn-1 {
    display: block;
    background-color: #48ac98;
    border-radius: 10px 0 10px 10px;
    padding: 20px;
    font-size: 16px;
    text-align: center;
    width: 100%;
    -webkit-transition: background-color .5s,box-shadow .5s;
    transition: background-color .5s,box-shadow .5s;
    box-shadow: 0 20px 40px rgba(72,172,152,.36)
}

    .btn-1:hover {
        background-color: #3f9886;
        box-shadow: 0 10px 10px rgba(72,172,152,.36)
    }

/*.workflow-form-wrapper {
    margin-bottom: 25px
}*/

.workflow-form-wrapper .app-info-box.padding-offset {
    padding-left: 7.5%
}

.next-stage-worflow-top {
    margin-left: -12px;
    margin-right: -15px
}

    .next-stage-worflow-top .app-info-box {
        width: -webkit-calc(33.3333333% - 25px);
        width: calc(33.3333333% - 25px);
        margin: 0 12px 28px
    }

.next-stage-worflow-bottom .app-info-box {
    width: -webkit-calc(66.666663% - 8px);
    width: calc(66.666663% - 8px)
}

.next-stage-worflow-bottom .btn-1 {
    width: 26%
}

.workflow-detail-wrapper .workflow-wrapper {
    padding-right: 0;
    width: 25%
}

.transfer-application-wrapper {
    width: 73%;
    padding: 27px 40px;
    background-color: #dfeaed;
    border-radius: 10px
}

    .transfer-application-wrapper .btn-1 {
        width: 26%
    }

.transfer-application-input {
    width: -webkit-calc(66.666663% - -17px);
    width: calc(66.666663% - -17px)
}

    .transfer-application-input .app-info-box {
        width: -webkit-calc(50% - 25px);
        width: calc(50% - 25px);
        margin-right: 25px
    }

.time-log-table {
    border-radius: 10px
}

    .time-log-table tr td:last-child {
        /*width: 40%*/
    }

.optiscroll {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

    .optiscroll.is-enabled {
        overflow: hidden
    }

        .optiscroll.is-enabled > .optiscroll-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            overflow: scroll;
            -webkit-overflow-scrolling: touch
        }

.optiscroll-h, .optiscroll-v {
    position: absolute;
    visibility: hidden;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.optiscroll-v {
    right: 0
}

.optiscroll-h {
    bottom: 0
}

.optiscroll.has-htrack > .optiscroll-h, .optiscroll.has-vtrack > .optiscroll-v {
    visibility: visible
}

.optiscroll.is-rtl > .optiscroll-v {
    left: 0;
    right: auto
}

.optiscroll-htrack, .optiscroll-vtrack {
    display: block;
    position: absolute;
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-transition: height .2s ease 0s,width .2s ease 0s,opacity .2s ease 0s;
    transition: height .2s ease 0s,width .2s ease 0s,opacity .2s ease 0s;
    box-sizing: border-box
}

.optiscroll-v {
    top: 4px;
    bottom: 4px;
    width: 0
}

.optiscroll-h {
    left: 4px;
    right: 4px;
    height: 0
}

.optiscroll.has-vtrack.has-htrack > .optiscroll-v {
    bottom: 8px
}

.optiscroll.has-vtrack.has-htrack > .optiscroll-h {
    right: 8px
}

.optiscroll-htrack, .optiscroll-vtrack {
    background: rgba(0,0,0,.3);
    border-radius: 2px;
    box-shadow: 0 0 1px #fff;
    opacity: 0
}

.optiscroll-vtrack {
    width: 3px;
    right: 4px
}

.optiscroll-htrack {
    height: 3px;
    bottom: 4px
}

.optiscroll:hover > .optiscroll-h .optiscroll-htrack, .optiscroll:hover > .optiscroll-v .optiscroll-vtrack {
    opacity: 1
}

.optiscroll.has-vtrack.has-htrack.is-rtl > .optiscroll-h {
    right: 4px;
    left: 8px
}

.optiscroll.is-rtl > .optiscroll-v .optiscroll-vtrack {
    right: auto;
    left: 4px
}

@media only screen and (max-width:1800px) {
    .upcoming-tasks-filter {
        width: 59%
    }

    .upcoming-tasks-filter-wrapper .title-2 {
        width: 35%;
        font-size: 20px
    }

    .app-list-link {
        width: 23%
    }

    .upcoming-tasks-wrapper-2 .upcoming-tasks-filter {
        width: 49%
    }

    .tasks-num {
        font-size: 50px
    }

    .tasks-indicator .title-5 {
        font-size: 18px
    }

    .tasks-indicator-wrapper, .workflow-wrapper {
        width: 29%
    }

    .workflow-wrapper {
        padding-right: 20px
    }

    .offset-container {
        width: -webkit-calc(100% - 200px);
        width: calc(100% - 200px)
    }

    .sidebar {
        left: 20px
    }

    #page-header {
        padding-left: 200px
    }
}

@media only screen and (max-width:1600px) {
    .upcoming-tasks-filter {
        width: 71%
    }

    .workflow-field .title-4 {
        font-size: 14px
    }

    .workflow-field .page-text-3 {
        font-size: 12px
    }

    .app-info-box .title-1 {
        font-size: 20px
    }

    .transfer-application-wrapper {
        width: 100%
    }

    .transfer-application-input {
        width: 73%
    }
}

@media only screen and (max-width:1400px) {
    .tasks-indicator-wrapper, .workflow-wrapper {
        width: 25%
    }

    .upcoming-tasks-table {
        width: 73%
    }

    .tasks-indicator {
        padding: 45px 15px
    }

        .tasks-indicator .title-5 {
            font-size: 14px
        }

    .tasks-num {
        font-size: 40px
    }

    .app-que {
        padding: 35px 10px
    }

    .app-que, .tasks-indicator-wrapper {
        border-radius: 0 0 0 30px
    }

    .workflow-field {
        width: 100%;
        margin-bottom: 10px
    }

    .checklist-box {
        width: 10%;
        padding-bottom: 10px
    }

        .checklist-box .page-text {
            font-size: 14px
        }

        .checklist-box:nth-child(10n+1) .checklist-border {
            display: none
        }

    .checklist-circle {
        bottom: 5px
    }

    .dla-text {
        margin-bottom: 20px
    }

    .dla-checkbox-wrapper, .dla-text {
        width: 100%
    }

    .time-log-table tr td:last-child {
        width: auto
    }

    .app-info-input, .dk-select {
        font-size: 16px
    }

    .select-ico {
        top: 12px
    }

    .select-type-2 .select-ico {
        top: 22px
    }
}

@media only screen and (max-width:1200px) {
    .tasks-indicator-wrapper, .workflow-wrapper {
        width: 100%
    }

    .upcoming-tasks-table {
        width: 100%;
        margin-bottom: 20px
    }

    .offset-container {
        padding-right: 20px;
        width: -webkit-calc(100% - 160px);
        width: calc(100% - 160px);
        margin-bottom: 0
    }

    .workflow-wrapper {
        padding-right: 0
    }

    .sidebar {
        width: 125px
    }

    #page-header {
        padding-left: 160px
    }

    .site-logo-wrapper {
        max-width: 130px;
        padding: 10px 0
    }

        .site-logo-wrapper .page-text {
            font-size: 12px
        }

    .offset-1 {
        padding-top: 120px
    }

    .header-user-name {
        width: 50px;
        height: 50px;
        font-size: 22px;
        border-radius: 10px
    }

    .header-user-info-text {
        width: -webkit-calc(100% - 50px);
        width: calc(100% - 50px)
    }

        .header-user-info-text .title-3 {
            font-size: 14px;
            margin-bottom: 5px
        }

        .header-user-info-text .title-1 {
            font-size: 20px
        }

    .header-user-login {
        width: 40px;
        height: 40px;
        border-radius: 10px
    }

    .header-user-login-ico {
        width: 20px;
        height: 20px
    }

    .header-user-login-wrapper {
        width: 105px
    }

    .header-user-info {
        width: -webkit-calc(100% - 105px);
        width: calc(100% - 105px);
        padding-right: 20px
    }

    .sidebar-chat {
        width: 90px;
        height: 90px
    }

    .workflow-field-1 {
        width: 59%
    }

    .workflow-field-2 {
        width: 39%
    }

    .sidebar-nav-box .page-text {
        font-size: 14px
    }

    .group-detail-wrapper {
        padding: 20px 20px 10px 25px;
        width: 30%
    }

        .group-detail-wrapper .page-text-2 {
            font-size: 14px
        }

        .group-detail-wrapper .title-2 {
            font-size: 20px
        }

    .header-2 .header-user-account {
        width: 45%
    }

    #page-header.header-2 {
        padding-left: 20px
    }

    .checklist-wrapper {
        padding: 100px 20px 0
    }

    .checklist-box {
        width: 20%
    }

        .checklist-box:nth-child(5n+1) .checklist-border {
            display: none
        }

    .container-2 {
        padding: 0 20px
    }

    .status {
        width: -webkit-calc(30% - 5px);
        width: calc(30% - 5px)
    }

    .application-info, .workflow-detail-content {
        padding: 20px 10px
    }

    .application-information-wrapper .app-info-box {
        width: 50%
    }

        .application-information-wrapper .app-info-box:nth-last-child(-n+4) {
            margin-bottom: 40px
        }

        .application-information-wrapper .app-info-box:nth-last-child(-n+2) {
            margin-bottom: 0
        }

    .app-info-box {
        padding: 0 10px
    }

    .workflow-detail-inner {
        width: 100%;
        margin-bottom: 20px
    }

    .workflow-detail-wrapper .workflow-wrapper {
        width: 100%
    }

    .app-info-box-select-text {
        padding: 0 70px 0 27px
    }

    .next-stage-worflow-top {
        margin-left: 0;
        margin-right: 0
    }

        .next-stage-worflow-top .app-info-box {
            width: 33.333333%;
            margin: 0 0 20px
        }

    .next-stage-worflow-bottom {
        padding-right: 10px
    }

        .next-stage-worflow-bottom .app-info-box {
            width: -webkit-calc(66.666663% - -7px);
            width: calc(66.666663% - -7px)
        }

    .select-type-2 .select-ico {
        right: 30px
    }

    .transfer-application-wrapper {
        padding: 20px 20px 20px 10px
    }

    .transfer-application-input .app-info-box {
        width: 50%;
        margin-right: 0
    }

    .workflow-status-circle {
        margin-top: 17px
    }

    .checklist-wrapper {
        position: static
    }

    .offset-2 {
        padding-top: 0
    }
}

@media only screen and (max-width:1000px) {
    .task-page-border, .task-pages-length {
        display: none
    }

    .page-size-text, .upcoming-tasks-table-wrapper {
        font-size: 14px
    }

    .status .title-1 {
        font-size: 20px
    }

    .status-check {
        top: 1px
    }

    .workflow-detail-inner .app-info-box.padding-offset {
        padding-left: 10px
    }

    .next-stage-worflow-top .app-info-box {
        width: 50%;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }

    .next-stage-worflow-bottom {
        padding-right: 0
    }

        .next-stage-worflow-bottom .app-info-box {
            margin: 0;
            width: 50%
        }

        .next-stage-worflow-bottom .btn-1 {
            width: -webkit-calc(50% - 21px);
            width: calc(50% - 21px);
            margin: 0 10px
        }

    .app-info-box-select-text {
        font-size: 10px
    }

    .app-list-link .page-text-2 {
        font-size: 16px
    }

    .upcoming-tasks-filter {
        width: 72%
    }

    .upcoming-tasks-filter-wrapper .title-2 {
        font-size: 18px
    }

    .app-info-input, .btn-1, .dk-select {
        font-size: 14px
    }
}

@media only screen and (max-width:800px) {
    .tasks-page-indicator {
        font-size: 14px;
        padding: 0
    }
}

.nav-tag a, .btn-save, .btn-cancel, .btn-normal {
    background-color: #48ac98; /*background-color: #70abbb;*/
    border-radius: 10px;
    padding: 7px 12px 9px 12px;
    font-size: 14px;
    text-align: center;
    -webkit-transition: none;
    transition: none;
    box-shadow: none;
    display: inline-block;
    color: white;
    margin: 0.2em;
}

.link {
    color: #48ac98;
    font-size: 13px;
    margin: 0.2em;
    text-decoration: underline;
}

a.link:hover {
    color: #389c88;
    text-decoration: underline;
}


.btn-normal {
    line-height: initial;
}

    .btn-save:hover, .btn-cancel:hover, .btn-normal:hover {
        /*background-color: #1a5c6f;
    box-shadow: none;*/
        background-color: #3f9886;
        box-shadow: 0 7px 7px rgb(72 172 152 / 36%);
    }
/*
.btn-save:hover {
    background-color: #1a5c6f;
    box-shadow: none;
}

.btn-cancel:hover {
    background-color: #70abbb;
    box-shadow: none;
}*/

/* remove border for input */
input:focus {
    box-shadow: none;
    outline: none;
}

textarea:focus {
    box-shadow: none;
    outline: none;
}


/*.section-box {
    font-size: 17px;
    border-radius: 10px 0 10px 10px;
    background-color: #dfeaed;
    padding: 5px 10px 5px;
    margin-top: 20px;
}
    .section-box:last-child {
        margin-bottom: 20px;
    }*/



.general {
    padding: 20px 20px 10px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.general-info {
    margin-right: 30px;
}

    .general-info .label {
        font-size: calc(14px + 2px);
        min-width: 60px;
        margin-bottom: 8px;
    }




.right-col1 tr td:nth-child(1) {
    text-align: right;
}

.right-col2 tr td:nth-child(2) {
    text-align: right;
}

.right-col3 tr td:nth-child(3) {
    text-align: right;
}

.right-col4 tr td:nth-child(4) {
    text-align: right;
}

.right-col5 tr td:nth-child(5) {
    text-align: right;
}

.right-col6 tr td:nth-child(6) {
    text-align: right;
}

.right-col7 tr td:nth-child(7) {
    text-align: right;
}

.right-col8 tr td:nth-child(8) {
    text-align: right;
}


.tr-group {
    background-color: initial !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    display: block;
}

    .tr-group.hightlignt td {
        color: #1a5c6f !important; /*color: #495b70;*/
    }

    .tr-group td {
        color: #888888 !important; /*color: #495b70;*/
        background-color: initial !important;
        text-decoration: underline;
    }


.group-item {
    padding-right: 20px;
}



input {
    border: 0px;
}

table a, k-grid a {
    color: #1a5c6f !important;
    text-decoration: underline;
}

    table a:hover, k-grid a:hover {
        color: #48ac98 !important;
        text-decoration: underline;
    }

.icon-edit {
    display: block;
    width: 18px;
    height: 18px;
    padding: 2px;
    cursor: pointer;
    background-image: url("/img/icons/icon-edit.svg");
}

    .icon-edit:hover {
        cursor: pointer;
        background-image: url("/img/icons/icon-edit.svg");
    }

.icon-delete {
    display: block;
    width: 16px;
    height: 18px;
    padding: 2px;
    cursor: pointer;
    background-image: url("/img/icons/icon-trash.svg");
}

    .icon-delete:hover {
        cursor: pointer;
        background-image: url("/img/icons/icon-trash-pink.svg");
    }

.layui-layer {
    overflow: hidden;
    border-radius: 10px !important;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: #48ac98 !important;
    background-color: #48ac98 !important;
    color: #fff !important;
}

.layui-layer-btn a {
    border-radius: 10px;
}

.layui-layer-title {
    color: #000 !important;
    background-color: #fff !important;
}

.layui-layer-dialog .layui-layer-content {
    background-color: #f2f3f4;
    color: #000;
}

.layui-layer-msg .layui-layer-content {
    background-color: #dfeaed !important;
    color: #000;
    border: none;
    box-shadow: none !important;
}

.layui-layer-hui {
    background-color: transparent !important;
}

.layui-layer-dialog .layui-layer-content .layui-layer-ico {
    border-radius: 15px;
}

.content {
    width: 100%;
    overflow: auto;
    position: absolute;
    top: 0px;
    bottom: 60px;
    padding: 0px 15px 15px 15px;
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 60px;
    background: #fff; /*#fff;*/
    border-top: 1px solid #ddddeb;
    line-height: 60px;
}

input, button, select, optgroup, textarea {
    line-height: initial;
}

    button:focus {
        outline: none;
    }


.card {
    border: none;
}

.card-header {
    background-color: rgba(0, 0, 0, 0);
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.125);*/
    border-bottom: none;
    font-weight: 700;
    color: #495b70;
    padding-bottom: 0px;
}

    .card-header div {
        background-color: rgba(0, 0, 0, 0);
        border-bottom: 1px solid #495b70;
        padding-bottom: 0.75rem;
        margin-bottom: 0;
    }

.card-body {
    font-size: 13px;
}

.container {
    padding-right: initial;
    padding-left: initial;
    margin-right: initial;
    margin-left: initial;
}

table {
    margin-bottom: 0px;
}

    table.table-edit > tbody > tr:not(:first-child) > td {
        vertical-align: middle;
        padding-top: 18px;
    }

    table.table-edit > tbody > tr > td:not(:last-child) {
        vertical-align: middle;
        padding-right: 16px;
    }

.input-item div:first-child {
    margin-bottom: 2px;
    font-weight: 700;
}

.row {
    padding-left: 8px;
    padding-right: 8px;
}

    .row > div > .card, .card-top {
        margin-top: 15px;
    }


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-right: 8px;
    padding-left: 8px;
}

div.required {
    position: relative;
}

    div.required:after {
        color: red;
        content: '*';
        position: relative;
        left: 5px;
        top: 2px;
    }

.k-pager-numbers .k-link.k-state-selected {
    font-size: 16px;
}

.summary-loan-info {
    height: 50px;
    background-color: #dfeaed;
    display: flex;
    padding: 15px 20px 20px 20px;
    border-radius: 10px;
    font-family: Gilroy-Bold;
}

    .summary-loan-info .label {
        font-size: 15px !important
    }

.summary-collateral-info {
    height: 50px;
    background-color: #dfeaed;
    display: flex;
    padding: 15px 20px 20px 20px;
    border-radius: 10px;
    font-family: Gilroy-Bold;
}

    .summary-collateral-info .label {
        font-size: 15px !important
    }

.tbCollateralAssignmentTable {
    /*width: auto;*/
}

div.rg-content-data-table table.tbCollateralAssignmentTable > tbody > tr > th, td {
    padding: 5px;
}

div.rg-content-data-table table.tbCollateralAssignmentTable .rgHeader {
    margin-bottom: 0px;
    height: 40px;
    font-family: Gilroy-Bold !important;
}

    div.rg-content-data-table table.tbCollateralAssignmentTable .rgHeader td.autoCol {
        vertical-align: top;
        max-width: 220px;
        min-width: 220px;
    }

div.wrapperAssignItem {
    position: relative;
}

    div.wrapperAssignItem .chboxIsTicked {
        left: 8px;
        position: absolute;
        top: 8px;
        z-index: 2;
    }

    div.wrapperAssignItem .textboxAssignValue input {
        text-align: right;
        width: 100%;
    }

.k-list-horizontal .k-radio-item {
    display: inline-block;
    margin: 0 10px 0 0;
}

.SimpleTextBoxAlignRight {
    border: solid 1px #cdcdcd !important;
    background: White /*url('../images/simpleTextBoxBG.gif')*/ repeat-x !important;
    height: 12px !important;
    font-size: 10px !important;
    text-align: right;
}

.DropDownTreeGuarantee .k-button {
    height: auto;
    text-align: left;
}

table.detail tr:nth-child(odd) {
    background-color: #f2f2f2;
}

table.detail tr:nth-child(even) {
    background-color: #ffffff;
}

table.detail tr td {
    padding: 10px;
}

    table.detail tr td:first-child {
        border-radius: 10px 0 0 10px;
    }

    table.detail tr td:last-child {
        border-radius: 0 10px 10px 0;
    }