@font-face {
    font-family: OpenSans-Regular;
    src: url(../fonts/OpenSans-Regular.ttf)
}

@font-face {
    font-family: OpenSans-Bold;
    src: url(../fonts/OpenSans-Bold.ttf)
}

@font-face {
    font-family: OpenSans-SemiBold;
    src: url(../fonts/OpenSans-SemiBold.ttf)
}

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fa-solid-900.woff2)
}

@font-face {
    font-family: FontAwesomeRegular;
    src: url(../fonts/fa-regular-400.woff2)
}

.fontAwesomeRegular {
    font-family: FontAwesomeRegular
}

.fontAwesome {
    font-family: FontAwesome
}

.fontRegular {
    font-family: OpenSans-Regular
}

.fontBold {
    font-family: OpenSans-Bold
}

.fontSemiBold {
    font-family: OpenSans-SemiBold
}

.menuScrollbar::-webkit-scrollbar {
    width: 2px;
    height: 0
}

.menuScrollbar::-webkit-scrollbar-track {
    background: #c9ced5;
    border: 2px solid #e8edf6
}

.menuScrollbar::-webkit-scrollbar-thumb {
    background: #aebace;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ie-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

    .menuScrollbar ::-webkit-scrollbar-thumb:hover {
        background: #8e9fbb
    }

@media (min-width:1200px) {
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .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-md-1, .col-md-10, .col-md-11, .col-md-12, .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-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .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-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        padding-left: 7px;
        padding-right: 7px
    }
}

@media (min-width:1200px) {
    .row {
        margin-right: -7px;
        margin-left: -7px
    }
}

.fa-solid {
    font-family: FontAwesome
}

.fa-regular {
    font-family: FontAwesomeRegular
}

html {
    color: #222;
    font-size: 14px;
    line-height: 19px
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 17px 0;
    padding: 0
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

.hidden, [hidden] {
    display: none !important
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

    .sr-only.focusable:active, .sr-only.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        white-space: inherit;
        width: auto
    }

.invisible {
    visibility: hidden
}

.clearfix::after, .clearfix::before {
    content: " ";
    display: table
}

.clearfix::after {
    clear: both
}

body, html {
    min-height: 100%;
    font-family: OpenSans-Regular;
    background-color: #e8edf6
}

.logo {
    display: block;
    height: 43px;
    width: 136px;
    background-image: url(../img/logo.png);
    background-size: cover;
    margin: auto auto 70px
}

.dropdown, .dropup {
    background-color: transparent;
    display: inline-block;
    position: relative
}

    .dropdown button, .dropup button {
        background-color: transparent;
        border: none
    }

    .dropdown .la-angle-down, .dropup .la-angle-down {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.flexDcenter {
    display: flex;
    align-items: center;
    justify-content: center
}

.flexIcenter {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.page-wrapper {
    padding: 138px 50px 0 285px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    min-height: 100%
}

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper {
        padding-left: 25px;
        padding-top: 197px;
        padding-right: 25px
    }
}

@media (max-width:991px) {
    .page-wrapper {
        padding: 205px 15px 15px
    }
}

@media (max-width:767px) {
    .page-wrapper {
        padding-top: 198px;
        padding-left: 15px;
        padding-right: 15px
    }
}

.page-wrapper .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: #26264f;
    width: 235px;
    padding: 25px 17px 300px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .page-wrapper .menu .tooltip {
        z-index: 2
    }

        .page-wrapper .menu .tooltip .tooltip-inner {
            padding: 6px 10px;
            color: #fff;
            border: 1px solid #495285;
            background-color: rgba(38,38,79,.95);
            font-size: 14px
        }

        .page-wrapper .menu .tooltip.bottom .tooltip-arrow, .page-wrapper .menu .tooltip.left .tooltip-arrow, .page-wrapper .menu .tooltip.right .tooltip-arrow, .page-wrapper .menu .tooltip.top .tooltip-arrow {
            border: none !important
        }

    .page-wrapper .menu .collapse-menu-btn {
        position: absolute;
        top: 93px;
        right: -15px;
        width: 30px;
        height: 43px;
        border-radius: 15px;
        background: #e8edf6;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .page-wrapper .menu .collapse-menu-btn i {
            color: #000
        }

@media (max-width:1199px) {
    .page-wrapper .menu {
        width: 60%;
        padding-bottom: 260px;
        box-shadow: 0 3px 47px #181848
    }

        .page-wrapper .menu .menu-top {
            padding-top: 28px
        }

        .page-wrapper .menu .collapse-menu-btn {
            position: absolute;
            top: 30px;
            left: 30px;
            cursor: pointer
        }

        .page-wrapper .menu .hamburger-btn {
            position: relative;
            display: inline-block;
            top: 0;
            left: 0;
            width: auto;
            height: auto;
            background: 0 0;
            color: #fff;
            cursor: pointer
        }

            .page-wrapper .menu .hamburger-btn span:not(:last-of-type) {
                height: 2px;
                background-color: #fff;
                display: block;
                margin-bottom: 4px;
                width: 20px
            }

            .page-wrapper .menu .hamburger-btn span:nth-of-type(1) {
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg)
            }

            .page-wrapper .menu .hamburger-btn span:nth-of-type(2) {
                width: 20px;
                display: none
            }

            .page-wrapper .menu .hamburger-btn span:nth-of-type(3) {
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                top: 0;
                position: absolute;
                margin-bottom: 0
            }

            .page-wrapper .menu .hamburger-btn span:nth-of-type(4) {
                position: absolute;
                left: 35px;
                font-size: 16px;
                bottom: -3px;
                margin: auto;
                line-height: 16px
            }
}

@media (max-width:767px) {
    .page-wrapper .menu .menu-top {
        padding-top: 32px
    }
}

.page-wrapper .menu a {
    white-space: nowrap
}

    .page-wrapper .menu a:hover {
        text-decoration: none
    }

.page-wrapper .menu ul {
    margin: 0;
    list-style: none;
    padding-left: 0
}

@media (max-height:760px) and (min-width:1200px) {
    .page-wrapper .menu ul.menu-top {
        overflow: auto;
        height: calc(100% - 50px);
        padding-right: 10px
    }

        .page-wrapper .menu ul.menu-top::-webkit-scrollbar {
            width: 2px;
            height: 0
        }

        .page-wrapper .menu ul.menu-top::-webkit-scrollbar-track {
            background: #c9ced5;
            border: 2px solid #e8edf6
        }

        .page-wrapper .menu ul.menu-top::-webkit-scrollbar-thumb {
            background: #aebace;
            -webkit-border-radius: 2px;
            -khtml-border-radius: 2px;
            -moz-border-radius: 2px;
            -ie-border-radius: 2px;
            -o-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px
        }

            .page-wrapper .menu ul.menu-top ::-webkit-scrollbar-thumb:hover {
                background: #8e9fbb
            }
}

.page-wrapper .menu ul > li {
    position: relative
}

    .page-wrapper .menu ul > li > a {
        display: flex;
        justify-content: flex-start;
        padding: 10px 30px 10px 53px;
        cursor: pointer;
        color: #aab4ec;
        position: relative;
        margin-top: 10px;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        min-height: 42px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -ie-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

@media (max-height:840px) {
    .page-wrapper .menu ul > li > a {
        padding: 6px 30px 6px 53px
    }
}

.page-wrapper .menu ul > li > a .item-text {
    opacity: 1;
    width: auto;
    font-family: OpenSans-Regular;
    -webkit-animation: .4s ease 0s normal forwards 1 fadein;
    animation: .4s ease 0s normal forwards 1 fadein;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.page-wrapper .menu ul > li > a svg {
    width: 22px;
    fill: #abb4ec;
    position: absolute;
    left: 18px
}

.page-wrapper .menu ul > li > a .icon {
    display: block;
    width: 22px;
    height: 22px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 18px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.page-wrapper .menu ul > li > a.dashboard-icon .icon {
    background-image: url(../img/Dashboard.svg)
}

.page-wrapper .menu ul > li > a.dashboard-icon.active .icon, .page-wrapper .menu ul > li > a.dashboard-icon:hover .icon {
    background-image: url(../img/Dashboard-active.svg)
}

.page-wrapper .menu ul > li > a.problems-icon .icon {
    background-image: url(../img/Problems.svg)
}

.page-wrapper .menu ul > li > a.problems-icon.active .icon, .page-wrapper .menu ul > li > a.problems-icon:hover .icon {
    background-image: url(../img/Problems_active.svg)
}

.page-wrapper .menu ul > li > a.ppap-icon .icon {
    background-image: url(../img/PPAP.svg)
}

.page-wrapper .menu ul > li > a.ppap-icon.active .icon, .page-wrapper .menu ul > li > a.ppap-icon:hover .icon {
    background-image: url(../img/PPAP_active.svg)
}

.page-wrapper .menu ul > li > a.equipment-icon .icon {
    background-image: url(../img/Equipment.svg)
}

.page-wrapper .menu ul > li > a.equipment-icon.active .icon, .page-wrapper .menu ul > li > a.equipment-icon:hover .icon {
    background-image: url(../img/Equipment_active.svg)
}

.page-wrapper .menu ul > li > a.documents-icon .icon {
    background-image: url(../img/Documents.svg)
}

.page-wrapper .menu ul > li > a.documents-icon.active .icon, .page-wrapper .menu ul > li > a.documents-icon:hover .icon {
    background-image: url(../img/Documents_active.svg)
}

.page-wrapper .menu ul > li > a.records-icon .icon {
    background-image: url(../img/Records.svg)
}

.page-wrapper .menu ul > li > a.records-icon.active .icon, .page-wrapper .menu ul > li > a.records-icon:hover .icon {
    background-image: url(../img/Records_active.svg)
}

.page-wrapper .menu ul > li > a.performance-icon .icon {
    background-image: url(../img/Performance.svg)
}

.page-wrapper .menu ul > li > a.performance-icon.active .icon, .page-wrapper .menu ul > li > a.performance-icon:hover .icon {
    background-image: url(../img/Performance_active.svg)
}

.page-wrapper .menu ul > li > a.audits-icon .icon {
    background-image: url(../img/Audits.svg)
}

.page-wrapper .menu ul > li > a.audits-icon.active .icon, .page-wrapper .menu ul > li > a.audits-icon:hover .icon {
    background-image: url(../img/Audits_active.svg)
}

.page-wrapper .menu ul > li > a.development-icon .icon {
    background-image: url(../img/Development.svg)
}

.page-wrapper .menu ul > li > a.development-icon.active .icon, .page-wrapper .menu ul > li > a.development-icon:hover .icon {
    background-image: url(../img/Development_active.svg)
}

.page-wrapper .menu ul > li > a.settings-icon .icon {
    background-image: url(../img/Settings.svg)
}

.page-wrapper .menu ul > li > a.settings-icon.active .icon, .page-wrapper .menu ul > li > a.settings-icon:hover .icon {
    background-image: url(../img/Settings_active.svg)
}

.page-wrapper .menu ul > li > a.discussion-icon .icon {
    background-image: url(../img/Discussion.svg)
}

.page-wrapper .menu ul > li > a.discussion-icon.active .icon, .page-wrapper .menu ul > li > a.discussion-icon:hover .icon {
    background-image: url(../img/Discussion_active.svg)
}

.page-wrapper .menu ul > li > a.users-icon .icon {
    background-image: url(../img/UsersAndRoles.svg)
}

.page-wrapper .menu ul > li > a.users-icon.active .icon, .page-wrapper .menu ul > li > a.users-icon:hover .icon {
    background-image: url(../img/UsersAndRoles_actve.svg)
}

.page-wrapper .menu ul > li > a:hover {
    color: #fff
}

.page-wrapper .menu ul > li > a.active {
    background-color: #38386a;
    color: #fff;
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .page-wrapper .menu ul > li > a.active svg {
        fill: #24a0e9
    }

    .page-wrapper .menu ul > li > a.active:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: #24a0e9;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-right: 2px solid #38386a
    }

.page-wrapper .menu ul > li.has-dropdown > a:after {
    content: "\f054";
    color: #a9b3ec;
    display: block;
    width: 6px;
    height: 6px;
    font-family: FontAwesome;
    line-height: 12px;
    font-size: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (max-width:991px) {
    .page-wrapper .menu ul > li.has-dropdown > a:after {
        right: auto;
        margin: auto auto auto 10px;
        position: relative
    }
}

.page-wrapper .menu ul > li.has-dropdown .dropdown-list {
    position: absolute;
    left: 196px;
    top: 0;
    right: 0;
    background: rgba(38,38,79,.95);
    width: 143px;
    padding: 15px 10px;
    z-index: 2;
    border-radius: 5px;
    display: none;
    opacity: 0;
    border: 1px solid #495285;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .page-wrapper .menu ul > li.has-dropdown .dropdown-list li a {
        font-size: 14px;
        font-family: OpenSans-Regular
    }

    .page-wrapper .menu ul > li.has-dropdown .dropdown-list:before {
        left: 10px;
        top: 15px;
        bottom: 15px;
        height: auto
    }

.page-wrapper .menu ul > li.has-dropdown.open .dropdown-list {
    display: block;
    opacity: 1;
    margin: 0 10px
}

.page-wrapper .menu ul > li .badge {
    padding: 1px 11px;
    margin-left: 10px;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    font-family: OpenSans-SemiBold;
    width: 28px;
    min-width: 28px
}

.page-wrapper .menu ul > li .dropdown-list {
    position: relative;
    margin: 20px auto 20px 54px
}

    .page-wrapper .menu ul > li .dropdown-list > li > a {
        min-height: auto;
        color: rgba(170,180,236,.85)
    }

    .page-wrapper .menu ul > li .dropdown-list > li:last-of-type a {
        padding-bottom: 0
    }

    .page-wrapper .menu ul > li .dropdown-list:before {
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        background-color: rgba(84,97,151,.75);
        height: 100%;
        position: absolute
    }

    .page-wrapper .menu ul > li .dropdown-list > li > a {
        padding: 15px 0 14px 15px;
        margin: 0;
        line-height: 14px
    }

        .page-wrapper .menu ul > li .dropdown-list > li > a:first-of-type {
            padding-top: 0
        }

        .page-wrapper .menu ul > li .dropdown-list > li > a:last-of-type {
            padding-top: 0
        }

.page-wrapper .menu .settings-part {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

    .page-wrapper .menu .settings-part ul {
        margin: 0 25px;
        border-top: 1px solid #546197
    }

@media (max-width:1199px) {
    .page-wrapper .menu .settings-part ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 18px
    }
}

.page-wrapper .menu .settings-part ul > li {
    position: relative
}

    .page-wrapper .menu .settings-part ul > li > a {
        padding: 12px 20px 12px 43px
    }

        .page-wrapper .menu .settings-part ul > li > a .icon, .page-wrapper .menu .settings-part ul > li > a svg {
            left: 7px
        }

    .page-wrapper .menu .settings-part ul > li ul {
        margin: 0
    }

    .page-wrapper .menu .settings-part ul > li .dropdown-list {
        margin: 0;
        background-color: #fff;
        padding: 20px 25px 17px;
        border: none;
        box-shadow: 0 3px 46px rgba(0,0,0,.16);
        border-radius: 5px;
        max-width: 250px;
        width: 187px
    }

        .page-wrapper .menu .settings-part ul > li .dropdown-list:before {
            display: none
        }

        .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card {
            text-align: center
        }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card::before {
                content: "";
                display: block;
                position: absolute;
                left: -8px;
                bottom: 22px;
                z-index: 2;
                width: 0;
                height: 0;
                top: auto;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid #fff;
                background: 0 0
            }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .mail {
                color: rgba(0,0,0,.45);
                font-size: 14px;
                line-height: 19px;
                padding: 3px 20px 4px;
                margin-bottom: 3px;
                display: inline-block
            }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .user {
                padding-left: 0;
                margin: auto;
                width: 51px;
                height: 51px
            }

                .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .user .badge {
                    width: 20px;
                    height: 20px;
                    padding: 0;
                    min-width: initial
                }

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .user {
        margin: 0
    }
}

.page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .initials {
    width: 51px;
    height: 51px;
    font-family: OpenSans-Bold;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%
}

@media (max-width:767px) {
    .page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .initials {
        left: 0
    }
}

.page-wrapper .menu .settings-part ul > li .dropdown-list.user-card .btn-outline {
    margin-top: 17px
}

.page-wrapper .menu .settings-part ul > li .dropdown-list.user-card a {
    width: auto
}

.page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card {
    min-width: 290px
}

    .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .form-group {
        margin-bottom: 0
    }

    .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list {
        display: flex
    }

        .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list input[type=color] {
            padding: 0;
            overflow: hidden;
            border: 3px solid #fff !important;
            outline: #fff solid 1px;
            margin-left: 3px
        }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list input[type=color].active {
                outline-color: #108ed8
            }

        .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list input[type=color] {
            -webkit-appearance: none;
            width: 21px;
            height: 21px;
            border-radius: 50%
        }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list input[type=color]::-webkit-color-swatch-wrapper {
                padding: 0;
                -webkit-appearance: none;
                border: none;
                width: 21px;
                height: 21px
            }

            .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card .colors-list input[type=color]::-webkit-color-swatch {
                -webkit-appearance: none;
                border: none;
                width: 21px;
                height: 21px
            }

    .page-wrapper .menu .settings-part ul > li .dropdown-list.theme-card::before {
        content: "";
        display: block;
        position: absolute;
        left: -8px;
        bottom: 22px;
        z-index: 2;
        width: 0;
        height: 0;
        top: auto;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
        background: 0 0
    }

.page-wrapper .menu .settings-part ul > li .dropdown-list h4 {
    font-size: 16px;
    line-height: 22px;
    margin-top: 8px;
    text-transform: uppercase;
    font-family: OpenSans-Bold;
    margin-bottom: 0
}

.page-wrapper .menu .settings-part ul > li.open .dropdown-list {
    bottom: calc(100% - 50px);
    top: auto;
    margin: 0
}

@media (max-height:767px) {
    .page-wrapper .menu .settings-part ul > li.open .dropdown-list {
        bottom: auto;
        top: auto;
        margin: 0;
        width: 100%;
        min-width: initial;
        position: relative;
        left: 0
    }
}

@media (max-width:991px) {
    .page-wrapper .menu .settings-part ul {
        flex-wrap: wrap
    }

        .page-wrapper .menu .settings-part ul li {
            width: 100%
        }
}

.page-wrapper .menu .settings-part .settings-icon:after {
    display: none
}

.page-wrapper .menu .settings-part .user {
    min-height: 42px;
    display: flex;
    padding-left: 60px;
    align-items: center;
    margin: 14px 0 16px
}

    .page-wrapper .menu .settings-part .user:after {
        display: none
    }

    .page-wrapper .menu .settings-part .user .initials {
        width: 42px;
        height: 42px;
        background-color: #3e3e72;
        color: #57c1ff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: -3px;
        border-radius: 50%
    }

@media (max-width:767px) {
    .page-wrapper .menu .settings-part .user .initials {
        left: 0
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper .menu .settings-part .user {
        margin: 0
    }
}

.page-wrapper .menu .settings-part .copyright {
    background-color: #1f1f47;
    display: block;
    padding: 14px 36px;
    text-align: center;
    margin-top: 7px;
    color: rgba(170,180,236,.65);
    font-size: 12px
}

    .page-wrapper .menu .settings-part .copyright strong {
        font-weight: 400;
        font-family: OpenSans-SemiBold;
        color: rgba(255,255,255,.75);
        font-size: 14px;
        margin-left: 5px;
        display: inline-block
    }

@media (max-height:700px) {
    .page-wrapper .menu .settings-part {
        position: relative;
        padding-bottom: 60px
    }

        .page-wrapper .menu .settings-part ul {
            margin: 0 12px
        }
}

@media (max-height:850px) {
    .page-wrapper .menu ul li a {
        margin-top: 0
    }
}

@media (max-width:767px) {
    .page-wrapper .menu {
        width: 50%;
        min-width: 230px
    }
}

@media (max-height:700px) {
    .page-wrapper .menu {
        overflow: auto;
        padding-bottom: 0
    }

        .page-wrapper .menu .copyright {
            position: absolute;
            left: -15px;
            bottom: 0
        }
}

.page-wrapper .logo {
    display: block;
    height: 53px;
    width: 100%;
    background-image: url(../img/IntellaQuest-logo.png);
    background-size: contain;
    margin: auto auto 66px;
    background-repeat: no-repeat;
    background-position: center
}

.page-wrapper .main-content {
    min-height: 100%
}

    .page-wrapper .main-content .dropdown-menu {
        box-shadow: 0 3px 6px rgba(0,0,0,.16);
        border-radius: 5px;
        opacity: .98;
        border: none;
        padding: 6px 0
    }

        .page-wrapper .main-content .dropdown-menu li a {
            padding: 8px 17px;
            color: #333
        }

        .page-wrapper .main-content .dropdown-menu li.active a {
            background-color: transparent;
            color: rgba(51,51,51,.39)
        }

        .page-wrapper .main-content .dropdown-menu li.active:hover a {
            cursor: default
        }

        .page-wrapper .main-content .dropdown-menu li:hover a {
            background-color: transparent;
            cursor: pointer
        }

    .page-wrapper .main-content header {
        padding: 15px 50px;
        height: 138px;
        position: fixed;
        top: 0;
        right: 0;
        left: 235px;
        line-height: 20px;
        display: block;
        background: #e8edf6;
        z-index: 1;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .page-wrapper .main-content header:after {
            display: block;
            position: absolute;
            bottom: 0;
            content: "";
            height: 1px;
            background-color: rgba(112,112,112,.25);
            left: 50px;
            right: 50px
        }

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper .main-content header:after {
        left: 20px;
        right: 20px
    }
}

@media (max-width:991px) {
    .page-wrapper .main-content header:after {
        left: 20px;
        right: 20px
    }
}

@media (max-width:767px) {
    .page-wrapper .main-content header:after {
        left: 0;
        right: 0
    }
}

.page-wrapper .main-content header .header-wrapper {
    min-height: 63px;
    display: flex;
    align-items: center
}

@media (max-width:991px) {
    .page-wrapper .main-content header .header-wrapper.problem-details-header .header-segments {
        display: block
    }
}

@media (max-width:1199px) {
    .page-wrapper .main-content header {
        left: 0;
        padding: 0;
        height: 156px
    }

        .page-wrapper .main-content header .xs-header {
            background-color: #26264f;
            position: relative;
            color: #fff;
            padding: 13px 20px;
            display: flex;
            align-items: center
        }

            .page-wrapper .main-content header .xs-header .logo {
                height: 43px;
                width: 136px;
                display: inline-block;
                background-image: url(../img/logo.png);
                margin: 0 auto
            }

            .page-wrapper .main-content header .xs-header .hamburger-btn {
                position: relative;
                display: inline-block;
                cursor: pointer
            }

                .page-wrapper .main-content header .xs-header .hamburger-btn span:not(:last-of-type) {
                    height: 2px;
                    background-color: #fff;
                    display: block;
                    margin-bottom: 4px
                }

                .page-wrapper .main-content header .xs-header .hamburger-btn span:nth-of-type(1) {
                    width: 10px
                }

                .page-wrapper .main-content header .xs-header .hamburger-btn span:nth-of-type(2) {
                    width: 20px
                }

                .page-wrapper .main-content header .xs-header .hamburger-btn span:nth-of-type(3) {
                    width: 15px;
                    margin-bottom: 0
                }

                .page-wrapper .main-content header .xs-header .hamburger-btn span:nth-of-type(4) {
                    position: absolute;
                    left: 40px;
                    font-size: 16px;
                    bottom: 0;
                    margin: auto;
                    line-height: 16px
                }

        .page-wrapper .main-content header .header-wrapper {
            padding: 14px 20px
        }
}

@media (max-width:1199px) and (max-width:1199px) {
    .page-wrapper .main-content header .header-wrapper {
        align-items: center;
        display: flex
    }
}

@media (max-width:1199px) and (max-width:767px) {
    .page-wrapper .main-content header .header-wrapper {
        padding: 14px 25px
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper .main-content header {
        height: 192px
    }
}

@media (max-width:991px) and (min-width:768px) {
    .page-wrapper .main-content header {
        height: auto
    }
}

@media (max-width:991px) {
    .page-wrapper .main-content header .tabs-filter-wrapper {
        height: 55px
    }
}

@media (min-width:1200px) {
    .page-wrapper .main-content header .tabs-filter.affix {
        right: 50px;
        width: auto
    }
}

@media (max-width:767px) {
    .page-wrapper .main-content header, .page-wrapper .main-content header .tabs-filter-wrapper {
        height: auto
    }

        .page-wrapper .main-content header .tabs-filter-wrapper .tabs-filter {
            margin-bottom: 0;
            margin-top: -2px
        }
}

@media (min-width:1200px) {
    .page-wrapper .main-content header.affix {
        left: 235px;
        right: 0
    }
}

.page-wrapper .main-content header .header-segments {
    display: flex;
    align-items: center;
    width: 100%
}

    .page-wrapper .main-content header .header-segments > div {
        display: block
    }

        .page-wrapper .main-content header .header-segments > div:first-of-type {
            max-width: 75%
        }

@media (max-width:1399px) and (min-width:1200px) {
    .page-wrapper .main-content header .header-segments > div:first-of-type {
        max-width: 45%
    }
}

@media (max-width:991px) {
    .page-wrapper .main-content header .header-segments > div:first-of-type {
        max-width: 100%
    }
}

.page-wrapper .main-content header .header-segments > div.status-segment {
    min-width: 190px
}

@media (max-width:1399px) and (min-width:1200px) {
    .page-wrapper .main-content header .header-segments > div.status-segment {
        padding-left: 20px;
        margin-left: 20px
    }
}

@media (max-width:991px) {
    .page-wrapper .main-content header .header-segments > div.status-segment .status {
        margin-top: 5px;
        display: inline-block
    }
}

@media (max-width:767px) {
    .page-wrapper .main-content header .header-segments > div.status-segment {
        min-width: 240px;
        white-space: nowrap
    }

        .page-wrapper .main-content header .header-segments > div.status-segment .status {
            margin-top: 5px;
            display: inline-block
        }
}

@media (min-width:1200px) {
    .page-wrapper .main-content header .header-segments {
        padding-left: 20px
    }
}

.page-wrapper .main-content header .header-segments .dropdown button {
    color: rgba(0,0,0,.65);
    letter-spacing: .27px;
    font-size: 16px;
    padding: 0;
    line-height: 1.2;
    font-family: OpenSans-Regular
}

@media (max-width:1199px) and (min-width:768px) {
    .page-wrapper .main-content header .header-segments .dropdown button {
        font-size: 13px;
        line-height: 13px
    }
}

@media (max-width:767px) {
    .page-wrapper .main-content header .header-segments .dropdown button {
        font-size: 12px;
        line-height: 17px
    }
}

.page-wrapper .main-content header .header-segments .dropdown button > span {
    color: rgba(0,0,0,.85);
    display: inline-block;
    margin-left: 5px;
    font-size: 12px
}

.page-wrapper .main-content header .right-part .btn {
    margin-left: 13px
}

.page-wrapper .main-content header .right-part .dropdown-menu {
    min-width: 110px !important;
    left: 15px;
    right: 0;
    width: auto
}

@media (min-width:1200px) {
    .page-wrapper .main-content header .right-part {
        margin-top: 8px
    }
}

.page-wrapper .main-content header h1 {
    font-size: 27px;
    margin: 0;
    font-family: OpenSans-SemiBold;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    line-height: 34px
}

@media (max-width:1300px) and (min-width:1200px) {
    .page-wrapper .main-content header h1 {
        font-size: 23px;
        line-height: 30px
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .page-wrapper .main-content header h1 {
        font-size: 18px;
        line-height: 25px
    }
}

@media (max-width:767px) {
    .page-wrapper .main-content header h1 {
        font-size: 19px;
        line-height: 23px;
        letter-spacing: .32px
    }
}

.page-wrapper .main-content header .achievments, .page-wrapper .main-content header .status-segment {
    padding-left: 30px;
    margin-left: 30px;
    border-left: 1px solid rgba(84,97,151,.45);
    position: relative;
    cursor: pointer
}

    .page-wrapper .main-content header .status-segment .due-date {
        display: block;
        margin-top: 10px
    }

@media (max-width:991px) {
    .page-wrapper .main-content header .status-segment {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        display: block
    }

        .page-wrapper .main-content header .status-segment .due-date {
            display: inline-block;
            margin-left: 15px;
            margin-top: 5px
        }
}

@media (max-width:991px) {
    .page-wrapper .main-content header .status-segment .due-date {
        margin-left: 8px
    }
}

.page-wrapper .main-content header .achievments .achievments-icon {
    position: relative
}

    .page-wrapper .main-content header .achievments .achievments-icon:after {
        position: absolute;
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #24a0e9;
        top: -7px;
        right: 2px
    }

@media (max-width:767px) {
    .page-wrapper .main-content header .achievments {
        padding-left: 13px;
        margin-left: 13px
    }
}

@media (max-width:400px) {
    .page-wrapper .main-content header .achievments {
        padding-left: 10px;
        margin-left: 10px
    }
}

.page-wrapper .main-content header .notification-dropdown {
    margin-right: 15px
}

    .page-wrapper .main-content header .notification-dropdown button {
        padding: 7px 0
    }

        .page-wrapper .main-content header .notification-dropdown button img {
            position: relative;
            top: 3px
        }

    .page-wrapper .main-content header .notification-dropdown .badge {
        font-size: 12px;
        line-height: 15px;
        border-radius: 50%;
        font-weight: 400;
        font-family: OpenSans-SemiBold;
        padding: 0;
        width: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        position: absolute;
        top: 2px;
        right: -7px;
        background: #24a0e9
    }

@media (max-width:1300px) and (min-width:1200px) {
    .page-wrapper .main-content header .notification-dropdown {
        margin-right: 8px
    }
}

@media (max-width:1199px) {
    .page-wrapper .main-content header .notification-dropdown {
        position: fixed;
        top: 13px;
        right: 15px
    }

        .page-wrapper .main-content header .notification-dropdown img {
            filter: invert(1)
        }
}

.page-wrapper .main-content > .content {
    position: relative;
    z-index: 0;
    min-height: 100%;
    padding-bottom: 20px
}

@media (max-width:991px) {
    .page-wrapper .main-content > .content {
        padding-top: 5px
    }
}

.page-wrapper .main-content > .content .dashboard, .page-wrapper .main-content > .content .discussion, .page-wrapper .main-content > .content .profile-content {
    min-height: 100%;
    margin-top: 0;
    padding-top: 40px;
    position: relative;
    padding-bottom: 40px
}

@media (max-width:1199px) {
    .page-wrapper .main-content > .content .dashboard, .page-wrapper .main-content > .content .discussion, .page-wrapper .main-content > .content .profile-content {
        padding-top: 25px
    }
}

@media (max-width:991px) {
    .page-wrapper .main-content > .content .dashboard, .page-wrapper .main-content > .content .discussion, .page-wrapper .main-content > .content .profile-content {
        padding-top: 10px
    }
}

.page-wrapper .main-content > .content .dashboard > .row > .col-lg-6:first-of-type, .page-wrapper .main-content > .content .discussion > .row > .col-lg-6:first-of-type {
    padding-right: 27px
}

@media (max-width:991px) {
    .page-wrapper .main-content > .content .dashboard > .row > .col-lg-6:first-of-type, .page-wrapper .main-content > .content .discussion > .row > .col-lg-6:first-of-type {
        padding-right: 15px
    }
}

.page-wrapper .main-content > .content .dashboard > .row > .col-lg-6:last-of-type, .page-wrapper .main-content > .content .discussion > .row > .col-lg-6:last-of-type {
    padding-left: 27px
}

@media (max-width:991px) {
    .page-wrapper .main-content > .content .dashboard > .row > .col-lg-6:last-of-type, .page-wrapper .main-content > .content .discussion > .row > .col-lg-6:last-of-type {
        padding-left: 15px
    }
}

@media (min-width:1200px) {
    .page-wrapper .main-content > .content > .row > .col-lg-6:first-of-type {
        padding-right: 30px
    }

    .page-wrapper .main-content > .content > .row > .col-lg-6:last-of-type {
        padding-left: 30px
    }
}

.page-wrapper.closed {
    padding-left: 142px
}

@media (max-width:1199px) {
    .page-wrapper.closed {
        padding-left: 25px
    }
}

@media (max-width:991px) {
    .page-wrapper.closed {
        padding-left: 15px
    }
}

.page-wrapper.closed .menu {
    width: 92px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (max-height:760px) and (min-width:1200px) {
    .page-wrapper.closed .menu {
        padding: 25px 17px 260px
    }
}

.page-wrapper.closed .menu .collapse-menu-btn img {
    transform: rotate(180deg)
}

.page-wrapper.closed .menu li a {
    padding: 10px 10px 10px 13px;
    width: 52px
}

    .page-wrapper.closed .menu li a .icon {
        left: 15px
    }

    .page-wrapper.closed .menu li a .item-text {
        width: 0;
        opacity: 0;
        display: none
    }

    .page-wrapper.closed .menu li a .badge {
        position: absolute;
        top: 0;
        right: -7px
    }

.page-wrapper.closed .menu li.has-dropdown > a:after {
    display: none
}

.page-wrapper.closed .menu li.has-dropdown .dropdown-list {
    position: absolute;
    left: 52px;
    right: 0;
    z-index: 2;
    display: none;
    opacity: 0
}

    .page-wrapper.closed .menu li.has-dropdown .dropdown-list li a {
        font-size: 14px
    }

    .page-wrapper.closed .menu li.has-dropdown .dropdown-list:before {
        left: 10px;
        top: 15px;
        bottom: 15px;
        height: auto
    }

.page-wrapper.closed .menu li.has-dropdown.open .dropdown-list {
    display: block;
    opacity: 1;
    margin: 0 11px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.page-wrapper.closed .menu .copyright {
    display: none
}

.page-wrapper.closed .menu .user .initials {
    left: 0
}

@media (max-width:1199px) {
    .page-wrapper.closed .menu {
        display: none;
        width: 0;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }
}

.page-wrapper.closed .main-content header {
    left: 92px;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (max-width:1199px) {
    .page-wrapper.closed .main-content header {
        left: 0
    }
}

.page-wrapper.closed .logo {
    background-image: url(../img/logo-short.png)
}

.page-wrapper.closed .scrollspy-wrapper .scrollspy-content .alert-wrapper.affix {
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (min-width:1200px) {
    .page-wrapper.closed .scrollspy-wrapper .scrollspy-content .alert-wrapper.affix {
        left: 444px
    }
}

@media (min-width:1500px) and (max-width:1699px) {
    .page-wrapper.closed .scrollspy-wrapper .scrollspy-content .alert-wrapper.affix {
        left: 399px
    }
}

@media (max-width:1499px) and (min-width:1200px) {
    .page-wrapper.closed .scrollspy-wrapper .scrollspy-content .alert-wrapper.affix {
        left: 359px
    }
}

.page-wrapper .user {
    position: relative
}

    .page-wrapper .user .badge {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 10px;
        border: 2px solid #fff;
        position: absolute;
        right: -5px;
        bottom: -2px;
        padding: 0;
        min-width: initial
    }

        .page-wrapper .user .badge.badge-green {
            background: #04c466;
            color: #fff
        }

    .page-wrapper .user.user-large {
        width: 84px;
        height: 84px
    }

        .page-wrapper .user.user-large .initials {
            font-size: 32px;
            font-family: OpenSans-Bold;
            width: 84px;
            height: 84px
        }

        .page-wrapper .user.user-large .badge {
            right: 1px;
            bottom: 1px;
            width: 22px;
            height: 22px
        }

@media (max-width:1199px) and (min-width:992px) {
    .page-wrapper .user {
        margin: 0
    }
}

.initials {
    width: 42px;
    height: 42px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #a8d1f0;
    color: #1d61c6
}

a {
    cursor: pointer
}

.dropdown-menu {
    left: auto;
    right: 0;
    width: auto
}

    .dropdown-menu > li > a {
        white-space: normal
    }

        .dropdown-menu > li > a:hover {
            background-color: #fffbc5 !important
        }

    .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover {
        color: rgba(0,0,0,.35);
        cursor: default;
        background-color: transparent !important
    }

.btn {
    padding: 3px 20px 3px 3px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: OpenSans-SemiBold;
    font-size: 14px;
    line-height: 19px;
    position: relative
}

    .btn i:first-of-type {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        margin-right: 15px;
        font-size: 16px !important
    }

    .btn i:last-of-type:not(:first-of-type) {
        position: absolute;
        right: 15px;
        font-size: 13px !important
    }

    .btn.btn-default, .btn.btn-default span, .btn.btn-default:focus, .btn.btn-default:focus span, .btn.btn-default:hover, .btn.btn-default:hover span {
        color: #fff
    }

        .btn.btn-default.disabled, .btn.btn-default:disabled {
            color: #5c6177
        }

            .btn.btn-default.disabled span, .btn.btn-default:disabled span {
                color: #5c6177
            }

@media (min-width:768px) {
    .btn.btn-blue {
        padding-right: 22px !important
    }
}

.btn.btn-default, .btn.btn-outline {
    padding: 7px 20px 8px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: OpenSans-SemiBold;
    position: relative
}

    .btn.btn-default.btn-icon, .btn.btn-outline.btn-icon {
        padding: 7px 15px 8px
    }

    .btn.btn-default.btn-green-default, .btn.btn-outline.btn-green-default {
        background-color: #04a859;
        border-color: #04a859;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .btn.btn-default.btn-green-default:hover, .btn.btn-outline.btn-green-default:hover {
            background-color: #03934e;
            border-color: #03934e;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .btn.btn-default.btn-green-default.disabled, .btn.btn-default.btn-green-default:disabled, .btn.btn-outline.btn-green-default.disabled, .btn.btn-outline.btn-green-default:disabled {
            background-color: #dbdee3;
            color: #5c6177;
            border-color: #dbdee3
        }

    .btn.btn-default.btn-red-default, .btn.btn-outline.btn-red-default {
        background-color: #ec5366;
        border-color: #ec5366;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .btn.btn-default.btn-red-default:hover, .btn.btn-outline.btn-red-default:hover {
            background-color: #ce3e50;
            border-color: #ce3e50;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .btn.btn-default.btn-red-default.disabled, .btn.btn-default.btn-red-default:disabled, .btn.btn-outline.btn-red-default.disabled, .btn.btn-outline.btn-red-default:disabled {
            background-color: #dbdee3;
            color: #5c6177;
            border-color: #dbdee3
        }

    .btn.btn-default.btn-blue-default, .btn.btn-outline.btn-blue-default {
        background-color: #0467b2;
        border-color: #0467b2;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .btn.btn-default.btn-blue-default:hover, .btn.btn-outline.btn-blue-default:hover {
            background-color: #00589a;
            border-color: #00589a;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .btn.btn-default.btn-blue-default.disabled, .btn.btn-default.btn-blue-default:disabled, .btn.btn-outline.btn-blue-default.disabled, .btn.btn-outline.btn-blue-default:disabled {
            background-color: #dbdee3;
            color: #5c6177;
            border-color: #dbdee3
        }

    .btn.btn-default.btn-red-outline, .btn.btn-outline.btn-red-outline {
        background-color: transparent;
        border-color: #ec5366;
        color: #ec5366;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .btn.btn-default.btn-red-outline:hover, .btn.btn-outline.btn-red-outline:hover {
            background-color: #fdedef;
            border-color: #ec5366;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .btn.btn-default.btn-red-outline.disabled, .btn.btn-default.btn-red-outline:disabled, .btn.btn-outline.btn-red-outline.disabled, .btn.btn-outline.btn-red-outline:disabled {
            background-color: #dbdee3;
            color: #5c6177;
            border-color: #dbdee3
        }

    .btn.btn-default.btn-blue-outline, .btn.btn-outline.btn-blue-outline {
        background-color: transparent;
        border-color: #0467b2;
        color: #00589a;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .btn.btn-default.btn-blue-outline:hover, .btn.btn-outline.btn-blue-outline:hover {
            background-color: rgba(4,103,178,.15);
            border-color: #00589a;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .btn.btn-default.btn-blue-outline.disabled, .btn.btn-default.btn-blue-outline:disabled, .btn.btn-outline.btn-blue-outline.disabled, .btn.btn-outline.btn-blue-outline:disabled {
            background-color: #dbdee3;
            color: #5c6177;
            border-color: #dbdee3
        }

.btn.btn-ghost {
    padding: 8px 20px 9px;
    background-color: transparent;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .btn.btn-ghost:hover {
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .btn.btn-ghost.btn-ghost-blue {
        color: #0467b2
    }

        .btn.btn-ghost.btn-ghost-blue:hover {
            background-color: rgba(4,103,178,.15)
        }

    .btn.btn-ghost.btn-ghost-red {
        color: #ec5366
    }

        .btn.btn-ghost.btn-ghost-red:hover {
            background-color: #ec5366
        }

    .btn.btn-ghost.disabled, .btn.btn-ghost:disabled {
        color: #8a8a8a;
        background-color: transparent;
        border-color: transparent
    }

.btn.btn-dropdown {
    padding-right: 40px
}

    .btn.btn-dropdown:active, .btn.btn-dropdown:active:focus, .btn.btn-dropdown:focus {
        outline: 0;
        border: none
    }

.btn.btn-green {
    background: #04a859;
    color: #fff;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .btn.btn-green i:first-of-type {
        background: #fff;
        color: #04a859
    }

    .btn.btn-green:hover {
        background-color: #03934e;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.btn.btn-blue {
    background: #0467b2;
    color: #fff;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .btn.btn-blue i:first-of-type {
        background: #fff;
        color: #0467b2
    }

    .btn.btn-blue:hover {
        background-color: #00589a;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.btn.btn-loading {
    background: #dbdee3;
    color: #5c6177;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .btn.btn-loading i:first-of-type {
        background: #fff;
        color: #5c6177
    }

    .btn.btn-loading:hover {
        background-color: #dbdee3;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.btn.btn-blue-default, .btn.btn-blue-outline, .btn.btn-green-default, .btn.btn-green-outline {
    box-shadow: none
}

    .btn.btn-blue-default i:first-of-type, .btn.btn-blue-outline i:first-of-type, .btn.btn-green-default i:first-of-type, .btn.btn-green-outline i:first-of-type {
        margin-right: 10px
    }

@media (min-width:768px) {
    .btn.btn-blue-default i, .btn.btn-blue-outline i, .btn.btn-green-default i, .btn.btn-green-outline i {
        padding: 0;
        width: auto;
        height: auto
    }
}

@media (max-width:767px) {
    .btn.btn-blue-default, .btn.btn-blue-outline, .btn.btn-green-default, .btn.btn-green-outline {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        margin-right: 0;
        font-size: 14px !important;
        padding: 7px 10px 8px
    }

        .btn.btn-blue-default span, .btn.btn-blue-outline span, .btn.btn-green-default span, .btn.btn-green-outline span {
            display: none
        }

        .btn.btn-blue-default i:first-of-type, .btn.btn-blue-outline i:first-of-type, .btn.btn-green-default i:first-of-type, .btn.btn-green-outline i:first-of-type {
            margin-right: 0
        }
}

.btn.btn-blue-default:active, .btn.btn-blue-default:focus, .btn.btn-blue-default:focus:active, .btn.btn-blue-default:focus:hover, .btn.btn-blue-default:hover, .btn.btn-blue-outline:active, .btn.btn-blue-outline:focus, .btn.btn-blue-outline:focus:active, .btn.btn-blue-outline:focus:hover, .btn.btn-blue-outline:hover, .btn.btn-green-default:active, .btn.btn-green-default:focus, .btn.btn-green-default:focus:active, .btn.btn-green-default:focus:hover, .btn.btn-green-default:hover, .btn.btn-green-outline:active, .btn.btn-green-outline:focus, .btn.btn-green-outline:focus:active, .btn.btn-green-outline:focus:hover, .btn.btn-green-outline:hover {
    outline: 0;
    box-shadow: none
}

.btn.btn-blue-default.btn-blue-outline:active, .btn.btn-blue-default.btn-blue-outline:focus, .btn.btn-blue-default.btn-blue-outline:focus:active, .btn.btn-blue-default.btn-blue-outline:focus:hover, .btn.btn-blue-default.btn-blue-outline:hover, .btn.btn-blue-default.btn-green-outline:active, .btn.btn-blue-default.btn-green-outline:focus, .btn.btn-blue-default.btn-green-outline:focus:active, .btn.btn-blue-default.btn-green-outline:focus:hover, .btn.btn-blue-default.btn-green-outline:hover, .btn.btn-blue-outline.btn-blue-outline:active, .btn.btn-blue-outline.btn-blue-outline:focus, .btn.btn-blue-outline.btn-blue-outline:focus:active, .btn.btn-blue-outline.btn-blue-outline:focus:hover, .btn.btn-blue-outline.btn-blue-outline:hover, .btn.btn-blue-outline.btn-green-outline:active, .btn.btn-blue-outline.btn-green-outline:focus, .btn.btn-blue-outline.btn-green-outline:focus:active, .btn.btn-blue-outline.btn-green-outline:focus:hover, .btn.btn-blue-outline.btn-green-outline:hover, .btn.btn-green-default.btn-blue-outline:active, .btn.btn-green-default.btn-blue-outline:focus, .btn.btn-green-default.btn-blue-outline:focus:active, .btn.btn-green-default.btn-blue-outline:focus:hover, .btn.btn-green-default.btn-blue-outline:hover, .btn.btn-green-default.btn-green-outline:active, .btn.btn-green-default.btn-green-outline:focus, .btn.btn-green-default.btn-green-outline:focus:active, .btn.btn-green-default.btn-green-outline:focus:hover, .btn.btn-green-default.btn-green-outline:hover, .btn.btn-green-outline.btn-blue-outline:active, .btn.btn-green-outline.btn-blue-outline:focus, .btn.btn-green-outline.btn-blue-outline:focus:active, .btn.btn-green-outline.btn-blue-outline:focus:hover, .btn.btn-green-outline.btn-blue-outline:hover, .btn.btn-green-outline.btn-green-outline:active, .btn.btn-green-outline.btn-green-outline:focus, .btn.btn-green-outline.btn-green-outline:focus:active, .btn.btn-green-outline.btn-green-outline:focus:hover, .btn.btn-green-outline.btn-green-outline:hover {
    border: 1px solid
}

.btn.btn-gray {
    background-color: #dbdee3;
    color: #5c6177
}

.btn.btn-green-default, .btn.btn-green-outline {
    border-color: #04a859
}

    .btn.btn-green-default:active, .btn.btn-green-default:focus, .btn.btn-green-default:focus:active, .btn.btn-green-default:focus:hover, .btn.btn-green-default:hover, .btn.btn-green-outline:active, .btn.btn-green-outline:focus, .btn.btn-green-outline:focus:active, .btn.btn-green-outline:focus:hover, .btn.btn-green-outline:hover {
        border: 1px solid
    }

.btn.btn-green-outline {
    color: #04a859;
    background: 0 0
}

    .btn.btn-green-outline i, .btn.btn-green-outline:focus {
        color: #04a859
    }

@media (max-width:767px) {
    .btn.btn-green-outline {
        background-color: #04a859
    }

        .btn.btn-green-outline i {
            color: #fff
        }
}

.btn.btn-green-default {
    background-color: #04a859;
    border: 1px solid #04a859 !important;
    color: #fff
}

    .btn.btn-green-default:focus {
        color: #fff
    }

.btn:active, .btn:active:focus, .btn:focus {
    outline: 0;
    box-shadow: none
}

@media (max-width:767px) {
    .btn {
        margin-left: 2px !important;
        padding: 3px
    }

        .btn i:first-of-type {
            margin-right: 0
        }

        .btn i:last-of-type:not(:first-of-type) {
            display: none
        }

        .btn span {
            display: none
        }

        .btn.btn-dropdown {
            padding-right: 3px
        }

        .btn.btn-blue i:first-of-type, .btn.btn-green i:first-of-type {
            width: 35px;
            height: 35px;
            background-color: transparent;
            color: #fff
        }

        .btn.no-icon span {
            display: block
        }
}

@media (max-width:400px) {
    .btn.btn-blue, .btn.btn-green {
        width: 33px;
        height: 33px
    }
}

.btn.big-text-btn {
    padding-left: 15px;
    padding-right: 15px
}

.nav-tabs {
    border-bottom: none;
    margin-bottom: 18px
}

@media (min-width:992px) {
    .nav-tabs {
        padding-left: 20px
    }
}

.nav-tabs > li {
    margin: 0 21px 0 0;
    border: none
}

    .nav-tabs > li > a {
        font-size: 20px;
        line-height: 27px;
        font-family: OpenSans-SemiBold;
        color: #92a2be;
        padding: 0;
        margin: 0;
        border: none
    }

@media (max-width:1400px) and (min-width:1200px) {
    .nav-tabs > li > a {
        font-size: 16px
    }
}

@media (max-width:1199px) {
    .nav-tabs > li > a {
        padding-bottom: 7px;
        font-size: 16px;
        line-height: 22px
    }
}

@media (max-width:400px) {
    .nav-tabs > li > a {
        font-size: 15px;
        line-height: 21px;
        letter-spacing: -1px
    }
}

.nav-tabs > li > a:hover {
    border: none;
    background-color: transparent
}

.nav-tabs > li.active {
    margin: 0 21px 0 0;
    border: none
}

    .nav-tabs > li.active a {
        margin: 0;
        color: #333;
        background: 0 0;
        border: none;
        font-family: OpenSans-Bold
    }

        .nav-tabs > li.active a:hover {
            border: none;
            background-color: transparent;
            color: #333
        }

        .nav-tabs > li.active a:focus, .nav-tabs > li:focus {
            outline: 0;
            border: none;
            background-color: transparent
        }

@media (max-width:1199px) {
    .nav-tabs > li.active a {
        position: relative;
        font-family: OpenSans-Bold
    }

        .nav-tabs > li.active a:after {
            content: "";
            height: 3px;
            background-color: #1995ae;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0
        }
}

.nav-tabs .dropdown-list {
    float: right;
    color: #108ed8;
    font-size: 14px;
    font-family: OpenSans-SemiBold;
    min-height: 27px;
    display: inline-flex;
    align-items: flex-end;
    margin-right: 0
}

@media (max-width:767px) {
    .tabs-wrapper .nav-tabs {
        margin-bottom: 10px
    }
}

.table-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.table-scrollbar::-webkit-scrollbar-track {
    background: #c9ced5;
    border: 2px solid #e8edf6
}

.table-scrollbar::-webkit-scrollbar-thumb {
    background: #aebace;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ie-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

    .table-scrollbar ::-webkit-scrollbar-thumb:hover {
        background: #8e9fbb
    }

.table-wrapper {
    height: 342px;
    overflow: auto;
    padding-right: 20px
}

    .table-wrapper .table-striped td:first-of-type {
        width: 60%
    }

@media (max-width:767px) {
    .table-wrapper .table-striped td:first-of-type {
        width: 50%
    }
}

.table-wrapper::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.table-wrapper::-webkit-scrollbar-track {
    background: #c9ced5;
    border: 2px solid #e8edf6
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #aebace;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ie-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

    .table-wrapper ::-webkit-scrollbar-thumb:hover {
        background: #8e9fbb
    }

@media (max-width:1199px) {
    .table-wrapper {
        height: auto
    }
}

@media (max-width:991px) {
    .table-wrapper {
        margin-right: -15px
    }
}

@media (max-width:767px) {
    .table-wrapper {
        margin-right: -15px
    }
}

a {
    color: #0467b2;
    font-family: OpenSans-SemiBold
}

@keyframes fadein {
    0%,66% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    0%,66% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.table-striped {
    overflow: auto;
    height: 100px
}

    .table-striped thead tr th {
        top: 0
    }

    .table-striped tfoot > tr > th {
        padding: 0 18px 8px;
        border-top: 1px solid #8ca9be
    }

    .table-striped tbody > tr th, .table-striped thead > tr th {
        background-color: #e8edf6
    }

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

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

    .table-striped tbody > tr:nth-of-type(even), .table-striped thead > tr:nth-of-type(even) {
        background-color: #e8edf6
    }

        .table-striped tbody > tr:nth-of-type(even) td, .table-striped tbody > tr:nth-of-type(even) th, .table-striped thead > tr:nth-of-type(even) td, .table-striped thead > tr:nth-of-type(even) th {
            background-color: #e8edf6
        }

        .table-striped tbody > tr:nth-of-type(even) .users-list img, .table-striped thead > tr:nth-of-type(even) .users-list img {
            border-color: #e8edf6
        }

        .table-striped tbody > tr:nth-of-type(even) .img-number, .table-striped thead > tr:nth-of-type(even) .img-number {
            border-color: #e8edf6
        }

    .table-striped tbody > tr > th, .table-striped thead > tr > th {
        border-bottom: none;
        color: rgba(0,0,0,.45)
    }

        .table-striped tbody > tr > th .sort, .table-striped thead > tr > th .sort {
            opacity: 0;
            color: rgba(0,0,0,.45);
            cursor: pointer;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

            .table-striped tbody > tr > th .sort:hover, .table-striped thead > tr > th .sort:hover {
                color: rgba(0,0,0,.45)
            }

        .table-striped tbody > tr > th:hover .sort, .table-striped thead > tr > th:hover .sort {
            opacity: 1;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .table-striped tbody > tr > th.active-sort .sort, .table-striped thead > tr > th.active-sort .sort {
            opacity: 1;
            color: #000;
            cursor: pointer;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

    .table-striped tbody > tr > td, .table-striped tbody > tr > th, .table-striped thead > tr > td, .table-striped thead > tr > th {
        padding: 12px 18px;
        font-size: 14px;
        border-top: none;
        line-height: 19px;
        font-family: OpenSans-SemiBold;
        vertical-align: middle
    }

        .table-striped tbody > tr > td a, .table-striped tbody > tr > th a, .table-striped thead > tr > td a, .table-striped thead > tr > th a {
            color: #0467b2
        }

        .table-striped tbody > tr > td:first-of-type, .table-striped tbody > tr > th:first-of-type, .table-striped thead > tr > td:first-of-type, .table-striped thead > tr > th:first-of-type {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px
        }

        .table-striped tbody > tr > td:last-of-type, .table-striped tbody > tr > th:last-of-type, .table-striped thead > tr > td:last-of-type, .table-striped thead > tr > th:last-of-type {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px
        }

    .table-striped th:last-of-type {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important
    }

    .table-striped th:first-of-type {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important
    }

    .table-striped.full-table > tbody > tr > td, .table-striped.full-table > tbody > tr > th, .table-striped.full-table > thead > tr > td, .table-striped.full-table > thead > tr > th {
        padding: 7px 25px
    }

@media (max-width:767px) {
    .table-striped.full-table > tbody > tr > td, .table-striped.full-table > tbody > tr > th, .table-striped.full-table > thead > tr > td, .table-striped.full-table > thead > tr > th {
        padding: 7px 10px
    }
}

.table-striped.full-table > tbody > tr > td .simple-checkbox input + label, .table-striped.full-table > tbody > tr > th .simple-checkbox input + label, .table-striped.full-table > thead > tr > td .simple-checkbox input + label, .table-striped.full-table > thead > tr > th .simple-checkbox input + label {
    min-width: initial
}

.table-striped.full-table > tbody > tr > th, .table-striped.full-table > thead > tr > th {
    font-family: OpenSans-Bold;
    color: #000
}

.table-striped.full-table tbody tr:nth-of-type(even) td {
    background-color: #e8edf6
}

.table-striped.full-table thead tr th {
    border-bottom: 1px solid #8ca9be
}

    .table-striped.full-table thead tr th:first-of-type, .table-striped.full-table thead tr th:last-of-type {
        border-radius: 0 !important
    }

.table-add-information {
    margin: 0 auto;
    padding-top: 5px;
    position: relative;
    color: #000;
    display: flex;
    align-items: center
}

    .table-add-information .paging-part {
        display: flex;
        flex-flow: row;
        justify-content: end
    }

    .table-add-information .see-more {
        text-align: right
    }

    .table-add-information .dropdown button, .table-add-information .dropup button {
        line-height: initial
    }

@media (max-width:767px) {
    .table-add-information {
        margin: -3px -15px 0
    }

        .table-add-information .text-right {
            text-align: left;
            margin-top: 10px
        }
}

@media (max-width:991px) {
    .table-add-information {
        margin: 0
    }
}

.pagination {
    margin: 0 auto
}

    .pagination li a {
        color: #7f8287;
        background-color: transparent;
        border: none;
        padding: 0 12px
    }

        .pagination li a:hover {
            background-color: transparent;
            color: #000
        }

    .pagination li.active a, .pagination li.active a:hover {
        background-color: transparent;
        color: #0467b2
    }

    .pagination li.disabled a {
        background-color: transparent !important;
        opacity: .5
    }

    .pagination li:not(.next,.previous) a {
        padding: 0 5px
    }

.dataTables_paginate {
    margin-left: 40px
}

.dataTables_info .items-info {
    display: inline-block
}

    .dataTables_info .items-info:first-of-type:not(:last-of-type) {
        padding-right: 15px;
        margin-right: 10px;
        border-right: 1px solid #ddd
    }

    .dataTables_info .items-info strong {
        margin-left: 6px
    }

.text-red {
    color: #ec5366
}

.text-yellow {
    color: #c9a917
}

.text-orange {
    color: #ecd053
}

.text-green {
    color: #04a859
}

h2 {
    font-size: 20px;
    line-height: 27px;
    padding: 0 18px;
    font-family: OpenSans-Bold;
    margin: 40px 0 21px;
    color: #000
}

@media (max-width:767px) {
    h2 {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 22px;
        padding: 0;
        margin-top: 20px
    }
}

.equipment-row .col-xs-6:first-of-type {
    padding-right: 7px
}

.equipment-row .col-xs-6:last-of-type {
    padding-left: 7px
}

.problem-details-btns {
    display: inline-block
}

@media (max-width:767px) {
    .problem-details-btns {
        box-shadow: 0 -3px 25px rgba(0,0,0,.2);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: #fff;
        padding: 13px 20px
    }

        .problem-details-btns .btn {
            width: auto;
            margin-left: 0 !important
        }

            .problem-details-btns .btn:last-of-type {
                margin-left: 8px !important
            }

            .problem-details-btns .btn span {
                display: block
            }
}

@media (max-width:420px) {
    .problem-details-btns {
        padding: 15px
    }

        .problem-details-btns .btn {
            padding: 7px 10px 8px;
            white-space: normal;
            word-break: break-word;
            width: 48%;
            height: 51px;
            line-height: 16px
        }

            .problem-details-btns .btn:last-of-type {
                margin-left: 5px !important
            }
}

@media (max-width:991px) {
    .shadow-scroll {
        margin-right: -15px;
        position: relative
    }

        .shadow-scroll:after {
            content: "";
            background: linear-gradient(180deg,rgba(232,237,246,.15) 0,#e8edf6 100%);
            position: absolute;
            right: -45px;
            height: 50px;
            width: 140px;
            transform: matrix(0,-1,1,0,0,0);
            top: 0
        }
}

.status-progress {
    background: #fff;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    padding: 25px 2% 14px;
    color: #363636;
    margin: 25px auto 0
}

    .status-progress ul {
        display: table;
        width: 100%;
        table-layout: fixed;
        position: relative;
        margin: 0
    }

        .status-progress ul li {
            display: table-cell;
            text-align: center;
            vertical-align: top;
            overflow: visible;
            position: relative;
            font-size: 14px;
            color: rgba(54,54,54,.45);
            font-weight: 700;
            padding-top: 32px;
            line-height: 17px;
            font-family: OpenSans-Bold
        }

            .status-progress ul li:not(:last-child):before {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                top: 13px;
                background-color: #e5e6e7;
                height: 3px;
                width: 100%
            }

            .status-progress ul li .node {
                display: inline-block;
                border: 3px solid #e5e6e7;
                background-color: #e5e6e7;
                border-radius: 18px;
                height: 29px;
                width: 29px;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%)
            }

            .status-progress ul li.complete {
                color: #363636
            }

                .status-progress ul li.complete:before {
                    background-color: #37cd64
                }

                .status-progress ul li.complete .node {
                    border-color: #37cd64;
                    background-color: #37cd64
                }

                    .status-progress ul li.complete .node:before {
                        font-family: FontAwesome;
                        content: "\f00c";
                        color: #fff;
                        top: 3px;
                        position: absolute;
                        left: 6px;
                        font-size: 12px
                    }

            .status-progress ul li.in-progress {
                color: #363636
            }

                .status-progress ul li.in-progress:before {
                    background: #e5e6e7
                }

                .status-progress ul li.in-progress .node {
                    border-color: #37cd64;
                    background-color: #ffff
                }

                    .status-progress ul li.in-progress .node:after {
                        content: "";
                        display: block;
                        width: 11px;
                        height: 11px;
                        background: #37cd64;
                        border-radius: 50%;
                        position: absolute;
                        left: 6px;
                        top: 6px
                    }

@media (max-width:991px) {
    .status-progress ul li {
        min-width: 200px
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .status-progress {
        padding: 25px 25px 14px
    }
}

.status-progress .scrollbar-invisible::-webkit-scrollbar {
    width: 0;
    height: 0
}

.status-progress .scrollbar-invisible::-webkit-scrollbar-track {
    background: 0 0;
    border: none
}

.status-progress .scrollbar-invisible::-webkit-scrollbar-thumb {
    background: 0 0;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ie-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

@media (max-width:991px) {
    .status-progress {
        padding: 25px 25px 14px;
        overflow: auto
    }

        .status-progress::-webkit-scrollbar {
            width: 0;
            height: 0
        }

        .status-progress::-webkit-scrollbar-track {
            background: 0 0;
            border: none
        }

        .status-progress::-webkit-scrollbar-thumb {
            background: 0 0;
            -webkit-border-radius: 2px;
            -khtml-border-radius: 2px;
            -moz-border-radius: 2px;
            -ie-border-radius: 2px;
            -o-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px
        }

        .status-progress ul {
            display: flex;
            padding: 0
        }

            .status-progress ul li {
                line-height: 22px;
                font-family: OpenSans-Bold;
                white-space: nowrap;
                padding-right: 30px
            }
}

.scrollDropdownAffix.affix {
    position: fixed;
    top: 137px;
    background: #fff;
    z-index: 2;
    left: 0;
    right: 0;
    padding: 14px 0 5px;
    box-shadow: 0 0 20px rgba(0,0,0,.1)
}

.blue-card, .white-card {
    background-color: #fff;
    padding: 33px 30px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    height: 100%;
    position: relative
}

    .blue-card .action-btn, .white-card .action-btn {
        position: absolute;
        right: 30px;
        top: 33px;
        z-index: 1
    }

@media (max-width:767px) {
    .blue-card .action-btn, .white-card .action-btn {
        right: 15px;
        top: 15px
    }
}

@media (max-width:1300px) and (min-width:1200px) {
    .blue-card, .white-card {
        padding: 23px 15px
    }
}

.blue-card h2, .white-card h2 {
    margin: 0 0 35px;
    padding: 0 60px 0 0;
    font-size: 20px;
    line-height: 27px;
    display: inline-flex;
    font-family: OpenSans-SemiBold;
    font-weight: 400;
    align-items: center
}

@media (max-width:1300px) {
    .blue-card h2, .white-card h2 {
        font-size: 16px
    }
}

.blue-card h2 img, .white-card h2 img {
    margin-right: 17px
}

@media (max-width:1300px) and (min-width:1200px) {
    .blue-card h2 img, .white-card h2 img {
        margin-right: 10px;
        width: 20px
    }
}

.blue-card .badge, .white-card .badge {
    min-width: 29px;
    margin-left: 15px
}

.blue-card .form-group, .white-card .form-group {
    margin-bottom: 40px
}

    .blue-card .form-group label, .white-card .form-group label {
        margin-bottom: 0;
        line-height: 22px;
        font-family: OpenSans-Regular;
        color: #363636
    }

    .blue-card .form-group.mb0, .white-card .form-group.mb0 {
        margin-bottom: 0
    }

@media (max-width:767px) {
    .blue-card .form-group, .white-card .form-group {
        margin-bottom: 23px
    }
}

.blue-card .impact-level, .white-card .impact-level {
    padding: 10px 0;
    display: flex;
    list-style: none;
    margin: 0
}

    .blue-card .impact-level li, .white-card .impact-level li {
        width: 38px;
        height: 4px;
        background: #e8edf6;
        margin-right: 3px
    }

        .blue-card .impact-level li:first-of-type, .white-card .impact-level li:first-of-type {
            border-radius: 3px 0 0 3px
        }

        .blue-card .impact-level li:last-of-type, .white-card .impact-level li:last-of-type {
            border-radius: 0 3px 3px 0
        }

        .blue-card .impact-level li.yes, .white-card .impact-level li.yes {
            background-color: #04a859
        }

.blue-card .risk-card h2, .blue-card.details-card h2, .white-card .risk-card h2, .white-card.details-card h2 {
    margin-bottom: 35px
}

.blue-card.risk-card .risk-comment, .white-card.risk-card .risk-comment {
    line-height: 17px
}

.blue-card.risk-card .progress-wrapper, .white-card.risk-card .progress-wrapper {
    display: flex;
    align-items: center
}

.blue-card.risk-card .progress, .white-card.risk-card .progress {
    background-color: #e8e8e8;
    border-radius: 5px;
    height: 4px;
    box-shadow: none;
    border: none;
    width: 100%;
    margin: auto 23px auto 0
}

    .blue-card.risk-card .progress .progress-bar, .white-card.risk-card .progress .progress-bar {
        box-shadow: none;
        border: none
    }

        .blue-card.risk-card .progress .progress-bar.bg-warning, .white-card.risk-card .progress .progress-bar.bg-warning {
            background-color: #fdcd47
        }

.blue-card.status-card h2, .white-card.status-card h2 {
    margin-bottom: 65px
}

@media (max-width:1199px) {
    .blue-card.status-card h2, .white-card.status-card h2 {
        margin-bottom: 0
    }
}

.blue-card.status-card .progress-card, .white-card.status-card .progress-card {
    margin: auto auto 55px
}

    .blue-card.status-card .progress-card .txt, .white-card.status-card .progress-card .txt {
        max-width: 142px;
        white-space: normal;
        word-break: break-word;
        margin: auto;
        transform: none;
        display: flex;
        align-items: center;
        flex-flow: column;
        color: #363636;
        height: 142px;
        justify-content: center;
        font-family: OpenSans-Regular;
        font-size: 15px;
        line-height: 1
    }

@media (max-width:1460px) and (min-width:1199px) {
    .blue-card.status-card .progress-card .txt, .white-card.status-card .progress-card .txt {
        font-size: 12px
    }
}

.blue-card.status-card .progress-card .bigtext, .white-card.status-card .progress-card .bigtext {
    font-size: 17px;
    line-height: 29px;
    margin-bottom: 8px;
    font-family: OpenSans-Bold
}

@media (max-width:1460px) and (min-width:1199px) {
    .blue-card.status-card .progress-card .bigtext, .white-card.status-card .progress-card .bigtext {
        font-size: 12px;
        line-height: 15px
    }
}

.blue-card.status-card .progress-card strong, .white-card.status-card .progress-card strong {
    font-size: 32px;
    line-height: 19px;
    display: block
}

@media (max-width:1460px) and (min-width:1199px) {
    .blue-card.status-card .progress-card strong, .white-card.status-card .progress-card strong {
        font-size: 27px;
        line-height: 18px
    }
}

.blue-card.status-card .progress-card svg, .white-card.status-card .progress-card svg {
    width: 155px;
    height: 155px
}

@media (max-width:1460px) and (min-width:1199px) {
    .blue-card.status-card .progress-card svg, .white-card.status-card .progress-card svg {
        width: 100px;
        height: 100px
    }
}

.blue-card.status-card .status, .white-card.status-card .status {
    margin-top: 7px;
    display: inline-block
}

.blue-card.status-card p.red-text, .white-card.status-card p.red-text {
    color: #ec5366
}

.blue-card.status-card .form-group, .white-card.status-card .form-group {
    margin-bottom: 35px
}

.blue-card.status-card .status-info, .white-card.status-card .status-info {
    text-align: center
}

@media (max-width:1199px) and (min-width:768px) {
    .blue-card.status-card .status-info, .white-card.status-card .status-info {
        text-align: left
    }
}

.blue-card hr.hr040, .white-card hr.hr040 {
    margin-top: 0;
    margin-bottom: 25px
}

.blue-card hr.hr25, .white-card hr.hr25 {
    margin-top: 25px;
    margin-bottom: 25px
}

.scrollspy-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%
}

    .scrollspy-wrapper .nav-pills {
        position: sticky;
        width: 285px;
        padding: 0;
        margin-right: 17px;
        top: 153px;
        margin-top: 18px
    }

@media (max-width:1700px) and (min-width:1500px) {
    .scrollspy-wrapper .nav-pills {
        width: 240px
    }
}

@media (max-width:1499px) and (min-width:1200px) {
    .scrollspy-wrapper .nav-pills {
        width: 200px
    }
}

@media (max-width:1199px) {
    .scrollspy-wrapper .nav-pills {
        display: none
    }
}

.scrollspy-wrapper .nav-pills > li + li {
    margin-top: 7px
}

.scrollspy-wrapper .nav-pills > li a {
    font-size: 18px;
    line-height: 22px;
    min-height: 76px;
    display: flex;
    align-items: center;
    color: rgba(0,0,0,.45);
    padding-right: 43px;
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    font-family: OpenSans-Bold
}

    .scrollspy-wrapper .nav-pills > li a .badge {
        min-width: 29px;
        margin-left: 15px;
        height: 19px;
        line-height: 14px
    }

    .scrollspy-wrapper .nav-pills > li a:after {
        content: "\f061";
        font-family: FontAwesome;
        position: absolute;
        right: 30px;
        font-size: 16px;
        opacity: 0;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        height: 24px
    }

    .scrollspy-wrapper .nav-pills > li a:focus, .scrollspy-wrapper .nav-pills > li a:hover {
        background-color: transparent !important
    }

.scrollspy-wrapper .nav-pills > li:hover a {
    background-color: transparent;
    color: #000;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .scrollspy-wrapper .nav-pills > li:hover a:after {
        right: 15px;
        opacity: 1;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.scrollspy-wrapper .nav-pills > li.active > a {
    background-color: rgba(4,103,178,.15);
    color: #000;
    line-height: 22px;
    text-transform: uppercase;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .scrollspy-wrapper .nav-pills > li.active > a:after {
        right: 15px;
        opacity: 1;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.scrollspy-wrapper .scrollspy-dropdown {
    position: relative;
    margin-top: 15px;
    margin-bottom: 0
}

    .scrollspy-wrapper .scrollspy-dropdown button {
        font-size: 16px;
        color: #000;
        line-height: 22px;
        margin-bottom: 0;
        margin-left: 30px;
        padding: 0;
        font-family: OpenSans-Bold
    }

        .scrollspy-wrapper .scrollspy-dropdown button i {
            margin-left: 15px
        }

@media (max-width:767px) {
    .scrollspy-wrapper .scrollspy-dropdown button {
        margin-left: 20px
    }
}

.scrollspy-wrapper .scrollspy-dropdown .dropdown-menu {
    left: 30px;
    right: auto;
    width: auto;
    min-width: 210px
}

    .scrollspy-wrapper .scrollspy-dropdown .dropdown-menu a .badge {
        margin-left: 10px
    }

.scrollspy-wrapper .scrollspy-content {
    flex: 4
}

@media (min-width:768px) {
    .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading {
        display: none
    }
}

.scrollspy-wrapper .scrollspy-content .collapse-btn i, .scrollspy-wrapper .scrollspy-content .panel-title a i {
    margin-left: 15px;
    font-size: 12px
}

.scrollspy-wrapper .scrollspy-content .collapse-btn, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading {
    font-size: 17px;
    line-height: 23px;
    display: block;
    text-decoration: none;
    font-family: OpenSans-Bold;
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
    padding: 25px 70px 25px 65px;
    position: relative;
    background-color: #fff;
    color: #000
}

    .scrollspy-wrapper .scrollspy-content .collapse-btn img, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading img {
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .scrollspy-wrapper .scrollspy-content .collapse-btn:after, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading:after {
        content: "\f068";
        font-family: FontAwesome;
        color: #0467b2;
        position: absolute;
        right: 30px;
        top: 26px
    }

@media (max-width:767px) {
    .scrollspy-wrapper .scrollspy-content .collapse-btn:after, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading:after {
        right: 20px
    }
}

.scrollspy-wrapper .scrollspy-content .collapse-btn.collapsed, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading.collapsed {
    padding: 25px 70px 25px 65px;
    margin-bottom: 15px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px
}

    .scrollspy-wrapper .scrollspy-content .collapse-btn.collapsed:after, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading.collapsed:after {
        content: "\2b"
    }

@media (max-width:767px) {
    .scrollspy-wrapper .scrollspy-content .collapse-btn.collapsed, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading.collapsed {
        margin-bottom: 0
    }
}

@media (max-width:767px) {
    .scrollspy-wrapper .scrollspy-content .collapse-btn, .scrollspy-wrapper .scrollspy-content .panel-default > .panel-heading {
        padding: 25px 52px 25px 65px
    }
}

@media (max-width:991px) {
    .scrollspy-wrapper .scrollspy-content .flex-boxes {
        padding: 0
    }
}

.flex-boxes {
    display: flex;
    flex-flow: row;
    margin-right: -9px;
    margin-left: -9px;
    margin-bottom: 18px
}

    .flex-boxes .row {
        margin-right: -9px;
        margin-left: -9px
    }

    .flex-boxes .collapse {
        height: 100%
    }

@media (min-width:768px) {
    .flex-boxes .collapse {
        margin-bottom: 15px
    }
}

@media (max-width:767px) {
    .flex-boxes .collapse .white-card {
        border-radius: 0 0 5px 5px;
        padding-top: 0
    }
}

@media (max-width:767px) {
    .flex-boxes .collapse .white-card {
        padding-top: 10px
    }
}

@media (max-width:1199px) {
    .flex-boxes {
        flex-flow: column;
        margin-bottom: 0
    }
}

.flex-boxes .flex-row {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap
}

@media (min-width:1200px) {
    .flex-boxes .flex-row > div {
        padding-right: 60px
    }
}

@media (max-width:1500px) and (min-width:1200px) {
    .flex-boxes .flex-row > div.col-lg-4 {
        width: 50%;
        max-width: 50%
    }
}

@media (max-width:767px) {
    .flex-boxes .flex-row > div {
        padding: 0
    }
}

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

@media (max-width:767px) {
    .flex-boxes {
        margin: 0 auto
    }
}

@media (max-width:767px) {
    .flex-boxes {
        padding: 25px 0
    }

        .flex-boxes > div {
            padding-right: 0 !important;
            padding-left: 0 !important;
            padding-bottom: 18px
        }
}

.white-box {
    background: #fff;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    padding: 40px
}

    .white-box.equipment-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 30px 35px 30px 100px;
        background-repeat: no-repeat;
        background-size: auto;
        background-position: left 100% top;
        position: relative;
        box-shadow: 0 3px 27px rgba(0,0,0,0);
        cursor: pointer;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .white-box.equipment-box h3 {
            font-size: 14px;
            line-height: 19px;
            margin: 0;
            font-weight: 400;
            font-family: OpenSans-Regular
        }

            .white-box.equipment-box h3 strong {
                display: block;
                font-weight: 400;
                font-family: OpenSans-Bold
            }

@media (max-width:767px) {
    .white-box.equipment-box h3 {
        font-size: 14px;
        line-height: 19px
    }
}

@media (max-width:400px) {
    .white-box.equipment-box h3 {
        font-size: 12px;
        line-height: 17px
    }
}

.white-box.equipment-box .number {
    font-size: 40px;
    line-height: 40px;
    font-weight: 400;
    font-family: OpenSans-SemiBold
}

@media (max-width:767px) {
    .white-box.equipment-box .number {
        font-size: 30px
    }
}

@media (max-width:400px) {
    .white-box.equipment-box .number {
        font-size: 25px;
        position: absolute;
        left: 70px;
        top: 19px
    }
}

.white-box.equipment-box:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 30px;
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat
}

.white-box.equipment-box.equipment-red {
    background-image: url(../img/equipment-red-bck.png)
}

    .white-box.equipment-box.equipment-red:before {
        background-image: url(../img/equipment-icon-red.png)
    }

    .white-box.equipment-box.equipment-red .number {
        color: #ec5366
    }

.white-box.equipment-box.equipment-blue {
    background-image: url(../img/equipment-blue-bck.png)
}

    .white-box.equipment-box.equipment-blue:before {
        background-image: url(../img/equipment-icon-blue.png)
    }

.white-box.equipment-box:hover {
    box-shadow: 0 3px 27px rgba(0,0,0,.15);
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (max-width:1240px) and (min-width:1200px) {
    .white-box.equipment-box {
        min-height: 118px
    }
}

@media (max-width:1430px) and (min-width:1200px) {
    .white-box.equipment-box {
        padding: 30px 20px 30px 70px
    }

        .white-box.equipment-box:before {
            left: 20px;
            background-size: 30px;
            width: 30px;
            height: 30px
        }

        .white-box.equipment-box .number {
            font-size: 35px;
            line-height: 35px
        }
}

@media (max-width:767px) {
    .white-box.equipment-box {
        padding: 65px 20px 20px;
        background-position: left 70px top 0
    }

        .white-box.equipment-box:before {
            top: 18px;
            left: 20px
        }

        .white-box.equipment-box strong {
            font-family: OpenSans-Bold
        }
}

.white-box.white-circle-box {
    padding: 20px 30px
}

.white-box h3 {
    font-size: 14px;
    margin: 0 0 20px;
    font-family: OpenSans-SemiBold
}

.white-box.ppap-white-box {
    padding: 25px
}

@media (max-width:767px) {
    .white-box {
        margin: 15px auto
    }
}

.circle-box {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer
}

@media (min-width:1600px) {
    .circle-box {
        padding: 27px 0
    }
}

@media (min-width:1200px) and (max-width:1600px) {
    .circle-box {
        flex-flow: column;
        text-align: center;
        padding: 10px 0
    }

        .circle-box .circle-text {
            margin-top: 7px;
            margin-left: 0 !important
        }
}

@media (max-width:767px) {
    .circle-box {
        flex-flow: column;
        text-align: center;
        padding: 10px 0
    }

        .circle-box .circle-text {
            margin-top: 7px;
            margin-left: 0 !important
        }
}

.circle-box .circle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    position: relative;
    font-family: OpenSans-SemiBold;
    width: 77px;
    height: 77px;
    font-size: 36px;
    line-height: 49px
}

    .circle-box .circle-badge:after {
        content: "";
        position: absolute;
        display: block;
        width: 77px;
        height: 77px;
        border: 5px solid transparent;
        border-radius: 50%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .circle-box .circle-badge.red-background {
        background: rgba(236,83,102,.15);
        color: #ec5366
    }

    .circle-box .circle-badge.gray-background {
        background-color: #e8edf6;
        color: #000
    }

.circle-box .circle-text {
    margin-left: 13px;
    color: rgba(0,0,0,.85)
}

    .circle-box .circle-text strong {
        display: block;
        font-family: OpenSans-Bold;
        font-weight: 400
    }

.circle-box:hover .circle-badge:after {
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: absolute;
    width: 67px;
    height: 67px;
    border: 5px solid #fff
}

@media (max-width:1199px) and (min-width:992px) {
    .circle-box {
        flex-flow: column
    }

        .circle-box .circle-text {
            margin-left: 0;
            text-align: center
        }
}

.dropdown button, .dropup button {
    color: #0467b2;
    font-size: 14px;
    line-height: 28px;
    font-family: OpenSans-SemiBold
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 60px 0 20px;
    padding-right: 0
}

    .dropdown-header h2 {
        margin: 0;
        padding: 0
    }

@media (max-width:767px) {
    .dropdown-header h2 {
        white-space: normal;
        line-height: 22px;
        font-size: 16px
    }
}

@media (max-width:1199px) {
    .dropdown-header {
        margin: 40px 0 20px
    }
}

@media (max-width:767px) {
    .dropdown-header {
        margin: 30px 0 0;
        justify-content: space-between;
        align-items: flex-end;
        padding-left: 0
    }
}

.chart-container {
    height: 150px
}

    .chart-container canvas {
        height: 100% !important
    }

.chart-containerPPaP, .pieChart-container {
    max-height: 200px;
    position: relative
}

@media (max-width:1500px) and (min-width:1200px) {
    .chart-containerPPaP {
        max-height: 70px
    }
}

@media (max-width:1500px) and (min-width:1200px) {
    .pieChart-container {
        max-height: 70px
    }
}

.chart-containerPPaP span, .pieChart-container span {
    position: absolute;
    width: 100px;
    border-radius: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    overflow: hidden;
    font-size: 12px;
    line-height: 15px;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    display: flex;
    z-index: 0;
    background: #fff;
    flex-flow: column;
    font-family: OpenSans-SemiBold
}

    .chart-containerPPaP span strong, .pieChart-container span strong {
        font-size: 36px;
        display: block;
        line-height: 40px
    }

@media (max-width:1250px) and (min-width:1200px) {
    .chart-containerPPaP span strong, .pieChart-container span strong {
        font-size: 20px;
        display: block;
        line-height: 30px
    }
}

.white-box-chart {
    padding: 22px
}

    .white-box-chart h3 {
        color: #000
    }

@media (max-width:1199px) and (min-width:992px) {
    .white-box-chart {
        display: flex;
        flex-flow: column;
        padding: 22px
    }

        .white-box-chart > div {
            max-height: 200px;
            position: relative;
            margin: 33px
        }
}

.percents-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 30px;
    padding: 0 0 0 20px
}

    .percents-header h2 {
        margin: 0;
        padding: 0
    }

    .percents-header a {
        margin: 5px 0 0;
        display: inline-block;
        font-family: OpenSans-SemiBold;
        color: #0467b2
    }

    .percents-header .percents-box {
        color: #0467b2;
        font-size: 14px;
        background-color: #fff;
        position: relative;
        overflow: hidden;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -ie-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        padding: 11px 20px 15px 25px
    }

        .percents-header .percents-box strong {
            color: #edce43;
            font-size: 29px;
            line-height: 30px;
            display: block;
            text-align: center;
            font-weight: 400;
            font-family: OpenSans-SemiBold
        }

            .percents-header .percents-box strong small {
                color: #edce43;
                font-size: 50%;
                line-height: 1
            }

        .percents-header .percents-box small {
            text-transform: uppercase;
            color: rgba(0,0,0,.65);
            letter-spacing: -.65px;
            font-size: 12px;
            font-family: OpenSans-SemiBold
        }

        .percents-header .percents-box:before {
            content: "";
            background-color: #edce43;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px
        }

@media (max-width:1199px) {
    .percents-header {
        margin: 40px 0 30px
    }
}

.table-striped {
    width: 100%;
    overflow-x: scroll;
    overflow-y: visible;
    padding: 0;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0
}

    .table-striped td, .table-striped th {
        margin: 0;
        white-space: nowrap
    }

        .table-striped td:first-of-type, .table-striped th:first-of-type {
            position: sticky;
            width: 25vw;
            left: 0;
            top: 0
        }

            .table-striped td:first-of-type a, .table-striped th:first-of-type a {
                text-overflow: ellipsis;
                max-width: 20vw;
                overflow: hidden;
                white-space: nowrap;
                width: auto;
                line-height: 18px;
                display: list-item
            }

@media (max-width:991px) {
    .table-striped td:first-of-type, .table-striped th:first-of-type {
        width: 50vw;
        max-width: 50vw
    }

        .table-striped td:first-of-type a, .table-striped th:first-of-type a {
            width: 100%;
            max-width: 100%
        }
}

.table-striped td:not(:first-of-type), .table-striped th:not(:first-of-type) {
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.table-striped td .checkbox-wrapper, .table-striped th .checkbox-wrapper {
    margin: auto 22px -3px auto
}

.table-striped td .simple-checkbox, .table-striped th .simple-checkbox {
    margin-right: 0
}

    .table-striped td .simple-checkbox input + label, .table-striped th .simple-checkbox input + label {
        padding-left: 38px;
        height: 20px
    }

        .table-striped td .simple-checkbox input + label a, .table-striped th .simple-checkbox input + label a {
            line-height: 23px
        }

        .table-striped td .simple-checkbox input + label:before, .table-striped th .simple-checkbox input + label:before {
            top: 2px
        }

    .table-striped td .simple-checkbox input:checked + label:after, .table-striped th .simple-checkbox input:checked + label:after {
        top: 5px
    }

    .table-striped td .simple-checkbox label {
        text-overflow: ellipsis;
        overflow: hidden;
        width: 20vw
    }

@media (max-width:1199px) {
    .table-striped td .simple-checkbox label {
        width: calc(50vw - 30px)
    }
}

.table-striped th {
    background-color: #e8edf6;
    z-index: 1;
    position: sticky
}

    .table-striped th .checkbox-wrapper {
        height: 15px
    }

    .table-striped th:first-of-type {
        z-index: 2;
        position: sticky
    }

.table-striped th {
    overflow: visible !important
}

@media (min-width:768px) {
    .table-striped::-webkit-scrollbar {
        width: 0;
        height: 4px
    }

    .table-striped::-webkit-scrollbar-track {
        background: 0 0;
        border: none
    }

    .table-striped::-webkit-scrollbar-thumb {
        background: 0 0;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }
}

@media (max-width:767px) {
    ::-webkit-scrollbar {
        width: 0;
        height: 5px
    }

    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,.15);
        border: 2px solid transparent
    }

    ::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        ::-webkit-scrollbar-thumb:hover {
            background: #aebace
        }
}

.management-box {
    display: flex;
    justify-content: space-between
}

    .management-box .col-sm-4, .management-box .col-sm-8 {
        float: none
    }

@media (max-width:1700px) and (min-width:1200px) {
    .management-box .col-sm-4 .white-box, .management-box .col-sm-8 .white-box {
        padding: 20px
    }
}

.management-box .col-sm-4 .white-box, .management-box .col-sm-8 .white-box {
    height: 100%;
    margin: 0
}

@media (max-width:767px) {
    .management-box .col-sm-4 .white-box, .management-box .col-sm-8 .white-box {
        margin: 15px 0
    }
}

@media (min-width:768px) {
    .management-box .col-sm-8 {
        padding-right: 7px
    }

    .management-box .col-sm-4 {
        padding-left: 7px
    }
}

@media (max-width:767px) {
    .management-box {
        display: block
    }
}

@media (max-width:991px) {
    .modal-backdrop.in {
        opacity: 0
    }
}

.modal {
    overflow-x: hidden;
    max-height: 95vh;
    margin: auto
}

@media (max-width:991px) {
    .modal {
        top: 70px
    }
}

@media (max-width:991px) {
    .modal {
        padding-right: 0 !important
    }
}

.modal .modal-content {
    box-shadow: 0 5px 69px rgba(15,15,16,.15)
}

.modal .modal-header {
    padding: 40px 0 25px;
    margin: 0 50px 30px;
    border-bottom: 1px solid #ddd
}

    .modal .modal-header .modal-title, .modal .modal-header h3, .modal .modal-header h4 {
        font-family: OpenSans-Regular;
        font-size: 20px;
        line-height: 27px
    }

        .modal .modal-header .modal-title strong, .modal .modal-header h3 strong, .modal .modal-header h4 strong {
            font-family: OpenSans-Bold
        }

@media (max-width:767px) {
    .modal .modal-header .modal-title, .modal .modal-header h3, .modal .modal-header h4 {
        padding-right: 40px
    }
}

@media (max-width:767px) {
    .modal .modal-header {
        margin: 0
    }
}

.modal .modal-header .mark-read-icon {
    margin-top: 10px;
    display: inline-block
}

.modal .modal-header .close {
    font-size: 28px;
    top: 40px;
    right: 50px;
    position: absolute;
    opacity: 1
}

@media (max-width:767px) {
    .modal .modal-header .close {
        top: 26px;
        right: 30px;
        z-index: 99
    }
}

.modal .modal-header .close:before {
    content: "\f00d";
    font-family: FontAwesome;
    color: #869fb3;
    font-size: 23px
}

.modal .modal-header .close span {
    display: none;
    font-size: 34px
}

.modal .modal-header .dropdown-notifications {
    margin-top: 28px;
    margin-bottom: -28px
}

@media (max-width:767px) {
    .modal .modal-header .dropdown-notifications {
        margin-top: 5px;
        margin-bottom: 0
    }
}

.modal .modal-header .tabs-filter {
    margin: 10px -15px -26px;
    padding: 20px 15px 0;
    border-bottom: none;
    background-color: transparent
}

    .modal .modal-header .tabs-filter li {
        margin-right: 30px
    }

        .modal .modal-header .tabs-filter li a {
            padding-bottom: 10px
        }

    .modal .modal-header .tabs-filter .tooltip {
        top: 15px !important
    }

@media (max-width:767px) {
    .modal .modal-header .tabs-filter {
        margin: 10px -15px -20px
    }
}

.modal .modal-header .wizard {
    margin-bottom: -25px
}

@media (max-width:767px) {
    .modal .modal-header {
        padding: 27px 35px 20px;
        position: sticky;
        top: 0;
        z-index: 4;
        background: #fff
    }
}

.modal .modal-body {
    margin: 0 25px 0 0;
    display: block;
    overflow-y: auto;
    max-height: 60vh;
    padding-left: 50px;
    padding-right: 25px;
    min-height: initial;
    padding-top: 0
}

    .modal .modal-body .alert {
        margin-bottom: 25px
    }

    .modal .modal-body::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .modal .modal-body::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #fff
    }

    .modal .modal-body::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .modal .modal-body ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

    .modal .modal-body .opacity-text {
        opacity: .45
    }

@media (max-width:767px) {
    .modal .modal-body {
        padding: 20px 35px
    }
}

.modal .modal-body .simple-accordions {
    margin-left: -20px
}

@media (max-width:767px) {
    .modal .modal-body .simple-accordions {
        margin-left: 0
    }
}

.modal .modal-body .form-group {
    margin-bottom: 25px
}

    .modal .modal-body .form-group.mb0 {
        margin-bottom: 0
    }

    .modal .modal-body .form-group label {
        margin-bottom: 5px
    }

    .modal .modal-body .form-group input .disabled, .modal .modal-body .form-group input:disabled {
        font-family: OpenSans-SemiBold;
        background-color: #e3e6eb;
        border-color: #869fb3
    }

        .modal .modal-body .form-group input .disabled::-webkit-input-placeholder, .modal .modal-body .form-group input:disabled::-webkit-input-placeholder {
            color: rgba(0,0,0,.5);
            font-family: OpenSans-Regular;
            font-style: normal
        }

        .modal .modal-body .form-group input .disabled:-ms-input-placeholder, .modal .modal-body .form-group input:disabled:-ms-input-placeholder {
            color: rgba(0,0,0,.5);
            font-family: OpenSans-Regular;
            font-style: normal
        }

        .modal .modal-body .form-group input .disabled::placeholder, .modal .modal-body .form-group input:disabled::placeholder {
            color: rgba(0,0,0,.5);
            font-family: OpenSans-Regular;
            font-style: normal
        }

    .modal .modal-body .form-group.error-form-group input {
        border-color: #ce3e50
    }

    .modal .modal-body .form-group.error-form-group .error-message {
        position: absolute
    }

    .modal .modal-body .form-group .datepicker::-webkit-input-placeholder, .modal .modal-body .form-group .datepicker:disabled::-webkit-input-placeholder, .modal .modal-body .form-group input::-webkit-input-placeholder, .modal .modal-body .form-group input[type=date]::-webkit-input-placeholder, .modal .modal-body .form-group textarea::-webkit-input-placeholder {
        color: #7f8287;
        font-family: OpenSans-Regular;
        font-style: italic
    }

    .modal .modal-body .form-group .datepicker:-ms-input-placeholder, .modal .modal-body .form-group .datepicker:disabled:-ms-input-placeholder, .modal .modal-body .form-group input:-ms-input-placeholder, .modal .modal-body .form-group input[type=date]:-ms-input-placeholder, .modal .modal-body .form-group textarea:-ms-input-placeholder {
        color: #7f8287;
        font-family: OpenSans-Regular;
        font-style: italic
    }

    .modal .modal-body .form-group .datepicker::placeholder, .modal .modal-body .form-group .datepicker:disabled::placeholder, .modal .modal-body .form-group input::placeholder, .modal .modal-body .form-group input[type=date]::placeholder, .modal .modal-body .form-group textarea::placeholder {
        color: #7f8287;
        font-family: OpenSans-Regular;
        font-style: italic
    }

    .modal .modal-body .form-group .icon {
        color: #869fb3;
        font-size: 16px;
        position: absolute;
        right: 36px;
        top: 9px;
        background: 0 0;
        border: none;
        z-index: 0
    }

    .modal .modal-body .form-group.uploading-process .not-selected-file, .modal .modal-body .form-group.uploading-process input {
        display: none
    }

    .modal .modal-body .form-group.uploading-process .document-name {
        color: #000;
        padding: 0 10px;
        font-family: OpenSans-SemiBold
    }

@media (max-width:767px) {
    .modal .modal-body .form-group.uploading-process .document-name {
        padding: 0
    }
}

.modal .modal-body .form-group.uploading-process .upload-wrapper {
    background-color: transparent;
    border: none;
    height: auto
}

.modal .modal-body .form-group.uploading-process .progress {
    height: 3px;
    margin: 5px 0;
    box-shadow: none;
    background-color: #d5dce8
}

.modal .modal-body .form-group.uploading-process .document-progress-upload {
    padding-right: 27px;
    position: relative
}

    .modal .modal-body .form-group.uploading-process .document-progress-upload .icon {
        right: 2px;
        top: -9px
    }

.modal .modal-body .form-group.uploading-process .document-progress-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 37px 0 10px
}

@media (max-width:767px) {
    .modal .modal-body .form-group.uploading-process .document-progress-info {
        padding: 0 28px 0 0
    }
}

.modal .modal-body .form-group.uploading-process .file-size {
    color: #7f8287
}

.modal .modal-body .form-group.uploading-process .upload-status {
    font-family: OpenSans-SemiBold
}

.modal .modal-body .form-group.uploading-process.started .progress .progress-bar, .modal .modal-body .form-group.uploading-process.uploading .progress .progress-bar {
    background-color: #0097ae;
    box-shadow: none
}

.modal .modal-body .form-group.uploading-process.started .upload-status, .modal .modal-body .form-group.uploading-process.uploading .upload-status {
    color: #0467b2
}

.modal .modal-body .form-group.uploading-process.completed .document-progress-info {
    justify-content: flex-end
}

.modal .modal-body .form-group.uploading-process.completed .progress .progress-bar {
    background-color: #03934e;
    box-shadow: none
}

.modal .modal-body .form-group.uploading-process.completed .upload-status {
    color: #03934e
}

    .modal .modal-body .form-group.uploading-process.completed .upload-status i {
        margin-right: 10px
    }

.modal .modal-body .form-group.uploading-process.completed .icon {
    color: #d54355
}

.modal .modal-body .row {
    margin-right: -15px;
    margin-left: -15px;
    display: flex;
    flex-flow: wrap
}

    .modal .modal-body .row .col-lg-1, .modal .modal-body .row .col-lg-10, .modal .modal-body .row .col-lg-11, .modal .modal-body .row .col-lg-12, .modal .modal-body .row .col-lg-2, .modal .modal-body .row .col-lg-3, .modal .modal-body .row .col-lg-4, .modal .modal-body .row .col-lg-5, .modal .modal-body .row .col-lg-6, .modal .modal-body .row .col-lg-7, .modal .modal-body .row .col-lg-8, .modal .modal-body .row .col-lg-9, .modal .modal-body .row .col-md-1, .modal .modal-body .row .col-md-10, .modal .modal-body .row .col-md-11, .modal .modal-body .row .col-md-12, .modal .modal-body .row .col-md-2, .modal .modal-body .row .col-md-3, .modal .modal-body .row .col-md-4, .modal .modal-body .row .col-md-5, .modal .modal-body .row .col-md-6, .modal .modal-body .row .col-md-7, .modal .modal-body .row .col-md-8, .modal .modal-body .row .col-md-9, .modal .modal-body .row .col-sm-1, .modal .modal-body .row .col-sm-10, .modal .modal-body .row .col-sm-11, .modal .modal-body .row .col-sm-12, .modal .modal-body .row .col-sm-2, .modal .modal-body .row .col-sm-3, .modal .modal-body .row .col-sm-4, .modal .modal-body .row .col-sm-5, .modal .modal-body .row .col-sm-6, .modal .modal-body .row .col-sm-7, .modal .modal-body .row .col-sm-8, .modal .modal-body .row .col-sm-9, .modal .modal-body .row .col-xs-1, .modal .modal-body .row .col-xs-10, .modal .modal-body .row .col-xs-11, .modal .modal-body .row .col-xs-12, .modal .modal-body .row .col-xs-2, .modal .modal-body .row .col-xs-3, .modal .modal-body .row .col-xs-4, .modal .modal-body .row .col-xs-5, .modal .modal-body .row .col-xs-6, .modal .modal-body .row .col-xs-7, .modal .modal-body .row .col-xs-8, .modal .modal-body .row .col-xs-9 {
        padding-right: 15px;
        padding-left: 15px
    }

@media (max-width:991px) {
    .modal .modal-body {
        height: 100%
    }
}

@media (max-width:767px) {
    .modal .modal-body {
        margin-left: 0;
        margin-right: 20px;
        padding-right: 20px;
        overflow: auto;
        height: 100%;
        min-height: 70vh;
        max-height: initial;
        padding-bottom: 0
    }
}

.modal .modal-footer {
    padding: 24px 50px;
    border-top: none;
    position: relative;
    background: #fff;
    border-radius: 0 0 6px 6px
}

    .modal .modal-footer:before {
        content: "";
        display: block;
        left: 50px;
        right: 50px;
        height: 1px;
        background: rgba(0,0,0,.15);
        top: 0;
        position: absolute
    }

@media (max-width:767px) {
    .modal .modal-footer:before {
        left: 0;
        right: 0
    }
}

.modal .modal-footer .row {
    display: flex;
    align-items: center
}

@media (max-width:767px) {
    .modal .modal-footer .row {
        flex-wrap: wrap
    }

        .modal .modal-footer .row > div.col-xs-12 {
            width: 100% !important
        }
}

.modal .modal-footer .btn {
    padding: 8px 27px 9px;
    border: none
}

    .modal .modal-footer .btn.btn-default {
        width: auto
    }

    .modal .modal-footer .btn.btn-ghost {
        opacity: .7
    }

@media (max-width:767px) {
    .modal .modal-footer .btn {
        padding: 11px 10px
    }
}

@media (max-width:767px) {
    .modal .modal-footer {
        padding: 20px 35px
    }
}

.modal .modal-footer .required-sign {
    font-size: 13px;
    line-height: 18px;
    position: relative;
    padding-left: 23px;
    display: block
}

    .modal .modal-footer .required-sign i {
        position: absolute;
        left: 0;
        top: 3px
    }

@media (min-width:1200px) {
    .modal#notificationModal .modal-dialog {
        margin: 61px 160px 30px auto
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .modal#notificationModal .modal-dialog {
        margin: 61px 70px 30px auto
    }
}

@media (max-width:991px) {
    .modal#notificationModal .modal-dialog {
        margin-top: 0
    }
}

.modal#notificationModal .modal-body {
    overflow-y: visible;
    margin: 0 25px 0 0
}

@media (min-width:1200px) {
    .modal#notificationModal .modal-body {
        max-height: 55vh;
        margin-bottom: 40px !important
    }
}

@media (max-width:1199px) {
    .modal#notificationModal .modal-body {
        margin-bottom: 40px !important
    }
}

.modal#notificationModal .modal-body .tab-content {
    margin-left: -25px;
    max-height: 55vh;
    overflow: auto;
    display: block;
    margin-right: -25px;
    padding-right: 25px
}

    .modal#notificationModal .modal-body .tab-content::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .modal#notificationModal .modal-body .tab-content::-webkit-scrollbar-track {
        background: #c9ced5
    }

    .modal#notificationModal .modal-body .tab-content::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .modal#notificationModal .modal-body .tab-content ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

    .modal#notificationModal .modal-body .tab-content::-webkit-scrollbar-track {
        border: 2px solid #fff
    }

@media (max-width:767px) {
    .modal#notificationModal .modal-body .tab-content {
        margin: auto 0 auto -25px
    }
}

@media (max-width:767px) {
    .modal#notificationModal .modal-body {
        margin: 0
    }

    .modal#notificationModal .tab-content {
        margin-left: 0
    }
}

@media (max-width:991px) {
    .modal {
        min-height: auto;
        margin: 0
    }

        .modal .flexDcenter {
            justify-content: start
        }

        .modal .modal-dialog {
            margin: 0;
            position: relative;
            min-height: 100%;
            width: 100%;
            background: #e8edf6;
            -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
            box-shadow: 0 5px 15px rgba(0,0,0,.5);
            height: 100%;
            max-height: 100%
        }

        .modal .modal-content {
            min-height: 100%;
            border: none;
            border-radius: 0;
            box-shadow: none
        }

            .modal .modal-content input {
                height: 36px
            }

        .modal .modal-footer {
            left: 0;
            right: 0;
            position: sticky;
            bottom: 0;
            z-index: 4;
            background: #fff;
            top: auto
        }
}

@media (max-width:991px) and (max-width:767px) {
    .modal .modal-dialog {
        max-height: initial;
        height: 100%
    }
}

@media (min-width:991px) {
    .modal.w-950 .modal-dialog, .modal.w-role .modal-dialog {
        min-width: 85vw
    }

    .modal.profile-pictrue-modal .modal-dialog {
        width: 412px
    }

        .modal.profile-pictrue-modal .modal-dialog .modal-body {
            min-height: 170px
        }

            .modal.profile-pictrue-modal .modal-dialog .modal-body .flexDcenter {
                justify-content: start
            }
}

@media (min-width:1200px) {
    .modal.w-950 .modal-dialog {
        min-width: 950px
    }

    .modal.w-role .modal-dialog {
        min-width: 572px
    }

    .modal.profile-pictrue-modal .modal-dialog {
        width: 412px
    }

        .modal.profile-pictrue-modal .modal-dialog .modal-body {
            min-height: 170px
        }
}

@media (max-width:767px) {
    .modal.w-950 .modal-dialog {
        width: 100%
    }

    .modal.profile-pictrue-modal .modal-dialog, .modal.w-role .modal-dialog {
        min-width: 100%
    }

        .modal.profile-pictrue-modal .modal-dialog .modal-body {
            min-height: 170px
        }
}

@media (min-width:992px) {
    #notificationModal .close {
        top: -5px;
        right: -40px;
        position: absolute;
        opacity: 1;
        line-height: 1;
        text-shadow: none
    }

        #notificationModal .close:before {
            color: #fff
        }
}

.tooltip {
    z-index: 2
}

    .tooltip .tooltip-inner {
        padding: 6px 7px
    }

.checkbox-wrapper {
    position: relative;
    display: inline-block;
    height: 18px;
    cursor: pointer;
    width: 18px;
    top: 0;
    bottom: 0;
    margin: auto 22px auto auto;
    line-height: 23px
}

    .checkbox-wrapper input[type=checkbox] {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 18px;
        opacity: 0;
        margin: 0;
        cursor: pointer;
        z-index: 2
    }

        .checkbox-wrapper input[type=checkbox] + label {
            border: 1px solid #6a88a0;
            border-radius: 3px;
            margin: 0 !important;
            height: 18px;
            position: absolute;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0
        }

        .checkbox-wrapper input[type=checkbox]:checked + label {
            background: #0467b2
        }

            .checkbox-wrapper input[type=checkbox]:checked + label:before {
                content: "";
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                width: 5px;
                height: 11px;
                transform: rotate(45deg);
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 3px;
                margin: auto
            }

.users-list {
    justify-content: start;
    display: flex;
    flex-flow: row-reverse;
    padding-left: 7px
}

    .users-list img {
        border: 3px solid #fff;
        border-radius: 50%;
        width: 29px;
        height: 29px;
        margin-left: -11px
    }

    .users-list .img-number {
        border: 3px solid #fff;
        border-radius: 50%;
        background-color: #0467b2;
        color: #fff;
        width: 29px;
        height: 29px;
        margin-left: -8px;
        display: inline-flex;
        align-items: center;
        justify-content: end;
        padding-right: 3px;
        font-size: 11px
    }

.status {
    padding: 0 10px;
    border-radius: 3px;
    font-family: OpenSans-SemiBold
}

    .status.status-yellow {
        background-color: rgba(255,212,90,.2);
        color: #dfc200
    }

    .status.status-blue {
        background-color: #cceef5;
        color: #00accc
    }

    .status.status-green {
        background-color: rgba(160,211,222,.55);
        color: #1a7285
    }

    .status.status-red {
        background-color: rgba(247,184,192,.45);
        color: #d54355
    }

    .status.status-not-yet-due {
        background-color: rgba(167,234,150,.35);
        color: #05b422
    }

    .status.status-saleable {
        background-color: rgba(67,4,178,.2);
        color: #7806b3
    }

    .status.status-non-saleable {
        background-color: rgba(178,4,178,.2);
        color: #b204a0
    }

    .status.status-pending {
        background-color: rgba(0,172,204,.2);
        color: #00accc
    }

    .status.status-default-device, .status.status-in-calibration {
        background-color: rgba(4,168,89,.2);
        color: #03934e
    }

.form-group label {
    color: #7f8287;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 19px;
    font-size: 14px;
    min-height: 14px
}

    .form-group label i {
        margin-left: 10px;
        color: rgba(0,0,0,.45)
    }

@media (max-width:767px) {
    .form-group label {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 5px
    }

        .form-group label .required-sign {
            display: inline-block;
            margin-bottom: 0;
            line-height: initial
        }
}

.form-group .dropdown button, .form-group .dropup button {
    line-height: 15px
}

.form-group .form-control, .form-group input {
    border: 1px solid #869fb3;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    box-shadow: none;
    color: #000;
    font-family: OpenSans-SemiBold;
    padding: 7px 9px;
    height: 36px;
    display: flex;
    align-items: center;
    background-color: #fff
}

.error {
    border: 1px solid #dc3545 !important;
}


    .form-group .form-control:focus, .form-group input:focus {
        box-shadow: none;
        border-color: #0467b2
    }

@media (max-width:767px) {
    .form-group .form-control, .form-group input {
        font-size: 13px;
        line-height: 18px
    }
}

.form-group .form-control::-webkit-input-placeholder, .form-group input::-webkit-input-placeholder {
    color: #7f8287;
    font-family: OpenSans-Regular;
    font-style: italic
}

.form-group .form-control:-ms-input-placeholder, .form-group input:-ms-input-placeholder {
    color: #7f8287;
    font-family: OpenSans-Regular;
    font-style: italic
}

.form-group .form-control::placeholder, .form-group input::placeholder {
    color: #7f8287;
    font-family: OpenSans-Regular;
    font-style: italic
}

.form-group p {
    color: #363636;
    font-family: OpenSans-Bold;
    line-height: 22px;
    margin-bottom: 0
}

.form-group .status-wrapper {
    height: 36px;
    display: flex;
    align-items: start;
    padding-top: 2px
}

@media (max-width:767px) {
    .form-group {
        margin-bottom: 20px
    }
}

.form-group.mb0 {
    margin-bottom: 0
}

.filter.affix {
    position: fixed;
    left: 230px;
    right: 0;
    padding: 40px 50px 0;
    background: #e8edf6;
    z-index: 4;
    top: 80px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.25);
    margin-top: -1px
}

.closed .filter.affix {
    left: 90px
}

.tabs-filter-wrapper {
    height: 73px;
    position: relative
}

@media (max-width:767px) {
    .tabs-filter-wrapper:after {
        content: "";
        background: linear-gradient(89deg,rgba(232,237,246,.15) 0,#e8edf6 100%);
        position: absolute;
        height: 46px;
        width: 46px;
        top: -2px;
        z-index: 9;
        right: 0;
        transform: none;
        bottom: 1px
    }
}

.tabs-filter {
    display: flex;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding: 20px 20px 0;
    list-style: none;
    margin-bottom: 15px;
    z-index: 9;
    position: relative;
    -webkit-transition: .25s .4s ease-in-out;
    -khtml-transition: .25s .4s ease-in-out;
    -moz-transition: .25s .4s ease-in-out;
    -ie-transition: .25s .4s ease-in-out;
    -o-transition: .25s .4s ease-in-out;
    -ms-transition: .25s .4s ease-in-out;
    transition: .25s .4s ease-in-out;
    background: #e8edf6
}

    .tabs-filter.affix {
        z-index: 2;
        position: fixed;
        background: #e8edf6;
        left: 285px;
        padding-left: 20px;
        -webkit-transition: .25s .4s ease-in-out;
        -khtml-transition: .25s .4s ease-in-out;
        -moz-transition: .25s .4s ease-in-out;
        -ie-transition: .25s .4s ease-in-out;
        -o-transition: .25s .4s ease-in-out;
        -ms-transition: .25s .4s ease-in-out;
        transition: .25s .4s ease-in-out
    }

@media (max-width:1199px) and (min-width:992px) {
    .tabs-filter.affix {
        z-index: 2;
        position: fixed;
        background: #e8edf6;
        left: 0;
        padding-left: 40px
    }
}

@media (max-width:991px) {
    .tabs-filter.affix {
        z-index: 3;
        position: fixed;
        background: #e8edf6;
        left: 0;
        padding-left: 25px
    }
}

@media (max-width:767px) {
    .tabs-filter.affix {
        padding-left: 20px
    }
}

@media (max-width:767px) {
    .tabs-filter {
        position: relative
    }
}

.tabs-filter li {
    margin-right: 50px
}

    .tabs-filter li a {
        padding-bottom: 15px;
        position: relative;
        display: flex;
        color: rgba(0,0,0,.45);
        font-size: 16px;
        line-height: 24px;
        align-items: center;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        font-family: OpenSans-SemiBold;
        text-decoration: none
    }

        .tabs-filter li a .badge {
            padding: 1px 11px;
            margin-left: 10px;
            border-radius: 5px;
            font-size: 12px;
            line-height: 17px
        }

        .tabs-filter li a:hover {
            text-decoration: none
        }

        .tabs-filter li a:before {
            content: "";
            height: 3px;
            width: 0;
            background-color: #1995ae;
            position: absolute;
            bottom: 0;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

    .tabs-filter li.active a {
        color: #000;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        font-family: OpenSans-Bold
    }

        .tabs-filter li.active a:before {
            width: 100%;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

@media (max-width:1199px) and (min-width:992px) {
    .tabs-filter {
        padding: 15px 20px 0 !important
    }
}

@media (max-width:991px) {
    .tabs-filter {
        overflow: auto;
        padding: 15px 20px 0 !important;
        margin-right: -20px
    }

        .tabs-filter::-webkit-scrollbar {
            height: 0
        }

        .tabs-filter::-webkit-scrollbar-track {
            background: #c9ced5;
            border: 2px solid #e8edf6
        }

        .tabs-filter::-webkit-scrollbar-thumb {
            background: 0 0;
            -webkit-border-radius: 2px;
            -khtml-border-radius: 2px;
            -moz-border-radius: 2px;
            -ie-border-radius: 2px;
            -o-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px
        }

            .tabs-filter ::-webkit-scrollbar-thumb:hover {
                background: #8e9fbb
            }

        .tabs-filter li {
            margin-right: 30px
        }

            .tabs-filter li a {
                white-space: nowrap
            }
}

@media (min-width:1200px) {
    .closed .tabs-filter.affix {
        left: 142px;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }
}

.filtersModal .modal-content, .filtersModal .modal-footer {
    background-color: #e8edf6
}

.filtersModal .modal-header {
    border-bottom: none;
    margin-bottom: 0
}

@media (max-width:767px) {
    .filtersModal .modal-header {
        background-color: #e8edf6
    }
}

.filtersModal .modal-body {
    height: calc(100vh - 220px);
    max-height: initial
}

@media (max-width:991px) {
    .filtersModal .modal-body::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #e8edf6
    }
}

.filtersModal .modal-footer {
    background-color: #e8edf6
}

    .filtersModal .modal-footer:before {
        display: none
    }

.input-filters {
    padding: 0 20px 8px;
    border-bottom: 1px solid #c5cad1;
    margin-bottom: 17px
}

    .input-filters.no-border {
        border-bottom: none
    }

@media (max-width:1199px) {
    .input-filters {
        padding: 0;
        border-bottom: none
    }
}

.input-filters .col-lg-filter {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 20%
}

    .input-filters .col-lg-filter .dropdown button {
        color: #000
    }

    .input-filters .col-lg-filter label {
        color: #7f8287;
        font-weight: 400;
        margin-bottom: 8px;
        line-height: 10px;
        font-size: 13px;
        text-indent: 5px
    }

    .input-filters .col-lg-filter input {
        border: 1px solid #869fb3;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -ie-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        box-shadow: none
    }

        .input-filters .col-lg-filter input:focus {
            box-shadow: none;
            border-color: #0467b2
        }

@media (min-width:1199px) {
    .input-filters .col-lg-filter {
        padding-left: 12px;
        padding-right: 12px
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .input-filters .col-lg-filter {
        width: 33%;
        margin-right: 0;
        padding-right: 5px
    }
}

@media (max-width:767px) {
    .input-filters .col-lg-filter {
        width: 80%;
        padding-right: 7px
    }

        .input-filters .col-lg-filter.col-xs-6 {
            width: 50%;
            padding-right: 7px
        }
}

.input-filters .col-lg-filter-btns {
    float: left;
    padding-left: 12px;
    padding-right: 12px
}

@media (min-width:1200px) {
    .input-filters .col-lg-filter-btns {
        width: 380px
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .input-filters .col-lg-filter-btns {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media (max-width:991px) and (min-width:768px) {
    .input-filters .col-lg-filter-btns {
        margin-right: 0;
        padding-right: 5px
    }
}

@media (max-width:767px) {
    .input-filters .col-lg-filter-btns {
        width: 20%;
        padding-left: 10px
    }

        .input-filters .col-lg-filter-btns .btn {
            padding: 7px 10px 8px;
            text-align: center;
            margin: 27px 0 15px;
            display: block;
            height: auto;
            width: auto
        }
}

.input-filters .hidden-filter {
    display: none
}

    .input-filters .hidden-filter.in {
        display: block
    }

.input-filters .dropdown, .input-filters .dropup, .input-filters .form-control, .input-filters input {
    height: 36px;
    color: #000;
    font-family: OpenSans-SemiBold;
    border: 1px solid #869fb3
}

    .input-filters .dropdown.open, .input-filters .dropdown:focus, .input-filters .dropup.open, .input-filters .dropup:focus, .input-filters .form-control.open, .input-filters .form-control:focus, .input-filters input.open, .input-filters input:focus {
        border-color: #0467b2
    }

.input-filters .dropdown, .input-filters .dropup {
    box-shadow: none;
    line-height: 19px;
    display: flex;
    background: #fff
}

    .input-filters .dropdown button, .input-filters .dropup button {
        width: 100%;
        display: block;
        text-align: left;
        padding-right: 20px
    }

    .input-filters .dropdown i, .input-filters .dropdown span, .input-filters .dropup i, .input-filters .dropup span {
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 11px;
        color: #869fb3
    }

    .input-filters .dropdown .dropdown-menu, .input-filters .dropup .dropdown-menu {
        left: 0
    }

.input-filters .btn {
    margin-top: 27px;
    margin-bottom: 15px
}

    .input-filters .btn i {
        background-color: transparent !important;
        color: #fff !important;
        height: auto;
        width: auto;
        margin-right: 10px
    }

    .input-filters .btn:not(:last-of-type) {
        margin-right: 10px
    }

@media (max-width:991px) {
    .input-filters .btn:not(:last-of-type) {
        margin-right: 12px
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .input-filters .btn {
        margin-top: 10px;
        margin-bottom: 0
    }
}

@media (max-width:767px) {
    .input-filters .btn {
        padding: 8px 7px;
        text-align: center;
        margin: 0
    }

        .input-filters .btn i {
            margin-right: 0
        }

        .input-filters .btn.btn-outline {
            width: auto
        }
}

.input-filters .btn-ghost-blue .more {
    display: block
}

.input-filters .btn-ghost-blue .less, .input-filters .btn-ghost-blue.in .more {
    display: none
}

.input-filters .btn-ghost-blue.in .less {
    display: block
}

.filter.open .col-lg-filter-btns {
    float: right;
    flex-flow: row-reverse;
    display: flex
}

    .filter.open .col-lg-filter-btns .btn {
        margin-right: 0;
        margin-left: 10px
    }

.table-content {
    overflow: auto;
    height: calc(100vh - 290px);
    padding-right: 20px;
    margin-right: -25px;
    position: relative
}

    .table-content table {
        margin-bottom: 0
    }

@media (max-width:991px) {
    .table-content {
        margin-right: -15px
    }
}

.table-content::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.table-content::-webkit-scrollbar-track {
    background: #c9ced5;
    border: 2px solid #e8edf6
}

.table-content::-webkit-scrollbar-thumb {
    background: #aebace;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ie-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

    .table-content ::-webkit-scrollbar-thumb:hover {
        background: #8e9fbb
    }

@media (max-width:1199px) {
    .table-content {
        height: calc(100vh - 375px)
    }
}

@media (max-width:991px) {
    .table-content {
        height: calc(100vh - 360px)
    }
}

@media (max-width:767px) {
    .table-content {
        height: calc(100vh - 390px)
    }
}

.filter-wrapper {
    position: relative;
    z-index: 2;
    background: #e8edf6;
    padding-top: 15px
}

.badge {
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    color: #fff
}

    .badge.badge-danger {
        background-color: #ec5366
    }

    .badge.badge-info {
        background-color: #1995ae
    }

    .badge.badge-success {
        background-color: #00994f
    }

.country {
    position: relative;
    margin: 0 auto;
    width: 100%
}

    .country .select {
        position: relative;
        padding: 0 35px 0 15px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #869fb3;
        background: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        border-radius: 5px;
        display: flex;
        align-items: center
    }

        .country .select .flagstrap-icon {
            box-sizing: border-box;
            display: inline-block;
            margin-right: 13px;
            width: 30px;
            min-width: 30px;
            height: 17px;
            background-image: url(../img/macedonia-flag.png);
            background-repeat: no-repeat;
            background-color: #e3e5e7;
            border-radius: 3px;
            overflow: hidden;
            background-position: center;
            background-size: cover
        }

        .country .select + .dropdown ul {
            display: none
        }

        .country .select.open + .dropdown {
            display: block !important
        }

            .country .select.open + .dropdown ul {
                display: block;
                position: absolute;
                background: #fff;
                padding: 0 15px;
                border: none;
                height: 170px;
                overflow: auto;
                box-shadow: 1px 9px 8px 1px rgba(0,0,0,.07);
                min-width: 240px;
                border-radius: 5px
            }

        .country .select .flagstrap-icon + span {
            padding-left: 10px;
            position: relative
        }

            .country .select .flagstrap-icon + span::before {
                content: "";
                display: block;
                width: 1px;
                height: 70%;
                top: 0;
                bottom: 0;
                left: 0;
                background-color: #e3e5e7;
                position: absolute;
                margin: auto
            }

    .country .dropdown .flagstrap-icon {
        box-sizing: border-box;
        display: inline-block;
        margin-right: 13px;
        width: 30px;
        height: 17px;
        background-image: url(../img/macedonia-flag.png);
        background-repeat: no-repeat;
        background-color: #e3e5e7;
        border-radius: 3px;
        overflow: hidden;
        background-position: center;
        background-size: cover
    }

    .country .dropdown li {
        padding: 0;
        line-height: 34px;
        font-size: 13px;
        font-weight: 400;
        color: #828282;
        cursor: pointer;
        display: flex;
        align-items: center
    }

        .country .dropdown li i {
            margin: 11px 7px 11px 0
        }

        .country .dropdown li span {
            display: inline-block;
            vertical-align: middle
        }

        .country .dropdown li:first-child {
            margin-top: 12px
        }

        .country .dropdown li:last-child {
            margin-bottom: 12px
        }

        .country .dropdown li:hover {
            background: #dedede;
            color: #454545
        }

        .country .dropdown li.open {
            display: block
        }

.breadcrumb {
    background-color: transparent;
    padding: 6px 0 0;
    margin-bottom: 0;
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis
}

    .breadcrumb a {
        color: rgba(0,0,0,.65);
        font-size: 16px;
        line-height: 22px;
        letter-spacing: .27px;
        font-family: OpenSans-Regular
    }

    .breadcrumb > li + li:before {
        content: "\f054";
        font-family: FontAwesome;
        font-size: 12px;
        color: rgba(0,0,0,.85);
        margin-right: 2px;
        padding: 0 7px
    }

@media (max-width:991px) {
    .breadcrumb {
        display: none
    }
}

.alert-wrapper {
    margin-top: 0;
    padding: 18px 0;
    background: #e8edf6
}

@media (max-width:1199px) {
    .alert-wrapper {
        padding: 18px 0
    }
}

.alert-wrapper .alert, .alert-wrapper .alert-icon {
    margin-bottom: 0
}

.alert-wrapper.affix {
    z-index: 2;
    position: fixed;
    top: 134px;
    right: 50px;
    border-left: none;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

@media (min-width:1700px) {
    .alert-wrapper.affix {
        left: 587px
    }
}

@media (min-width:1500px) and (max-width:1699px) {
    .alert-wrapper.affix {
        left: 542px
    }
}

@media (max-width:1499px) and (min-width:1200px) {
    .alert-wrapper.affix {
        left: 502px
    }
}

@media (max-width:1199px) {
    .alert-wrapper.affix {
        top: 194px;
        border-radius: 0;
        right: 15px;
        left: 15px
    }
}

.alert, .alert-icon {
    overflow: hidden;
    margin-bottom: 18px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    font-family: OpenSans-SemiBold
}

    .alert i, .alert-icon i {
        position: absolute;
        left: 22px;
        width: 19px;
        text-align: center;
        top: 0;
        bottom: 0;
        font-size: 19px;
        height: 19px;
        border-radius: 50%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .alert h3, .alert-icon h3 {
        font-size: 17px;
        line-height: 21px;
        margin: 0;
        padding: 0;
        font-weight: 400;
        font-family: OpenSans-SemiBold
    }

    .alert p, .alert-icon p {
        line-height: 17px;
        margin-bottom: 0;
        color: rgba(0,0,0,.85)
    }

    .alert-icon.alert-danger, .alert.alert-danger {
        background-color: rgba(236,83,102,.15);
        color: #000;
        border: 1px solid #e8d6e0
    }

    .alert-icon.alert-info, .alert.alert-info {
        background-color: rgba(4,103,178,.15);
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }

        .alert-icon.alert-info:before, .alert.alert-info:before {
            background-color: #0467b2
        }

    .alert-icon.alert-success, .alert.alert-success {
        background-color: rgba(4,168,89,.15);
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }

        .alert-icon.alert-success:before, .alert.alert-success:before {
            background-color: #04a859
        }

    .alert-icon.alert-warning, .alert.alert-warning {
        background-color: rgba(201,169,23,.15);
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }

        .alert-icon.alert-warning:before, .alert.alert-warning:before {
            background-color: #c9a917
        }

    .alert em, .alert-icon em {
        font-style: italic;
        font-family: OpenSans-Bold
    }

.alert-icon {
    padding: 13px 20px 12px 55px
}

.alert {
    padding: 13px 20px 12px 31px
}

@media (max-width:1199px) {
    .alert {
        top: 25px;
    }

        .alert-icon.alert-danger, .alert.alert-danger {
            top: 25px;
        }
}

.percircle {
    float: none;
    font-size: 155px;
    width: 155px;
    height: 155px;
    margin: auto auto 55px
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle {
        width: 100px;
        height: 100px
    }
}

.percircle > span {
    max-width: 142px;
    white-space: normal;
    word-break: break-word;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: none;
    display: flex;
    align-items: center;
    flex-flow: column;
    color: #363636;
    height: 142px;
    justify-content: center;
    font-family: OpenSans-Regular;
    font-size: 15px;
    line-height: 1
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle > span {
        font-size: 12px
    }
}

.percircle > span .bigtext {
    font-size: 17px;
    line-height: 29px;
    margin-bottom: 8px;
    font-family: OpenSans-Bold
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle > span .bigtext {
        font-size: 12px;
        line-height: 15px
    }
}

.percircle > span strong {
    font-size: 32px;
    line-height: 19px;
    display: block
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle > span strong {
        font-size: 27px;
        line-height: 18px
    }
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle > span {
        width: 100px;
        height: 100px
    }
}

.percircle.gt50 .bar, .percircle.gt50 .fill {
    border: 4px solid #307bbb;
    width: 147px;
    height: 147px
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle.gt50 .bar, .percircle.gt50 .fill {
        width: 92px;
        height: 92px
    }
}

.percircle .slice {
    position: absolute;
    width: 155px;
    height: 155px;
    clip: rect(0,1em,1em,.5em);
    margin: auto;
    left: 0
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle .slice {
        max-width: 87;
        height: 87
    }
}

.percircle:after {
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    content: " ";
    border-radius: 50%;
    background-color: #fff;
    width: 147px;
    height: 147px
}

@media (max-width:1460px) and (min-width:1199px) {
    .percircle:after {
        width: 92px;
        height: 92px
    }
}

.percircle.red-circle:before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: red;
    position: absolute;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    top: -4px
}

.percircle.red-circle.gt50 .bar, .percircle.red-circle.gt50 .fill {
    border-color: #ff3f3f
}

.percircle.red-circle:hover span {
    color: #363636
}

.percircle:hover {
    background-color: #fff
}

    .percircle:hover > span {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .percircle:hover:after {
        opacity: 0
    }

@media (max-width:1199px) {
    .percircle {
        margin: 35px auto auto
    }
}

@media (max-width:767px) {
    .percircle {
        margin-bottom: 30px
    }
}

.green-text {
    color: #04a859
}

.only-icon-btn {
    padding: 9px 11px;
    width: 36px;
    height: 36px;
    border: 1px solid;
    border-radius: 5px;
    background-color: transparent
}

    .only-icon-btn.blue-icon-btn {
        border-color: #0467b2;
        color: #0467b2
    }

@media (max-width:767px) {
    .right-part {
        padding-left: 0;
        padding-right: 5px
    }

    .left-part {
        padding-right: 0;
        padding-left: 5px
    }

    .filter-wrapper {
        width: 100%;
        display: block;
        position: static;
        height: 198px
    }

    .page-wrapper {
        height: 100%
    }
}

@media (max-width:767px) and (max-width:767px) {
    .filter-wrapper {
        height: auto
    }
}

.red-text, .required {
    color: #ec5366
}

.error-message {
    font-size: 13px;
    color: #ce3e50
}

.required-sign {
    color: #ce3e50
}

    .required-sign i {
        margin-right: 10px;
        font-size: 14px
    }

@media (max-width:767px) {
    .required-sign {
        margin: 0 0 15px;
        display: block
    }
}

.single-selection-dd {
    position: relative
}

    .single-selection-dd .single-selection-dd select {
        display: none
    }

.select-selected {
    background-color: #fff
}

    .select-selected:after {
        content: "\f00d";
        font-family: FontAwesome
    }

.select-arrow-active:after {
    border-color: transparent transparent #fff;
    top: 7px
}

.select-items div, .select-selected {
    color: #fff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0,0,0,.1);
    cursor: pointer;
    user-select: none
}

.select-items {
    position: absolute;
    background-color: #1e90ff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99
}

.select-hide {
    display: none
}

.same-as-selected, .select-items div:hover {
    background-color: rgba(0,0,0,.1)
}

.problem-details {
    padding-bottom: 85px !important
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.dropdown-remove, .dropdown-single {
    position: relative
}

    .dropdown-remove::before, .dropdown-single::before {
        content: "\f078";
        display: block;
        position: absolute;
        right: 15px;
        color: #869fb3;
        top: 8px;
        font-family: FontAwesome;
        z-index: 0
    }

    .dropdown-remove select, .dropdown-single select {
        z-index: 1;
        background: 0 0;
        position: relative
    }

        .dropdown-remove select::-ms-expand, .dropdown-single select::-ms-expand {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none
        }

    .dropdown-single option:first-of-type {
        color: #7f8287;
        font-style: italic
    }

.datepicker-wrapper {
    position: relative
}

    .datepicker-wrapper input {
        padding-right: 40px
    }

    .datepicker-wrapper:before {
        content: "\f133";
        font-family: FontAwesome;
        position: absolute;
        right: 1px;
        top: 1px;
        color: #869fb3;
        padding: 7px 10px;
        border-radius: 0 6px 6px 0
    }

    .datepicker-wrapper.disabled:before, .datepicker-wrapper:disabled:before {
        background: #e3e6eb
    }

.ui-datepicker {
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    background: #fff;
    padding: 20px 17px 15px;
    border-radius: 5px;
    min-width: 270px
}

    .ui-datepicker .ui-datepicker-header {
        text-align: right;
        margin-bottom: 20px;
        color: #0467b2
    }

    .ui-datepicker select {
        border: none;
        margin-left: 20px;
        -webkit-appearance: initial !important;
        -moz-appearance: initial !important;
        appearance: initial !important;
        font-family: OpenSans-SemiBold
    }

    .ui-datepicker table {
        width: 100%
    }

        .ui-datepicker table th {
            color: rgba(0,0,0,.45);
            font-size: 9px;
            text-transform: uppercase;
            text-align: center
        }

        .ui-datepicker table td a {
            padding: 8px 2px;
            text-align: center;
            display: inline-block;
            color: #000;
            font-size: 12px;
            letter-spacing: -.18px;
            line-height: 15px;
            font-family: OpenSans-SemiBold;
            height: 30px;
            width: 30px
        }

            .ui-datepicker table td a.ui-state-active {
                -webkit-border-radius: 5px;
                -khtml-border-radius: 5px;
                -moz-border-radius: 5px;
                -ie-border-radius: 5px;
                -o-border-radius: 5px;
                -ms-border-radius: 5px;
                border-radius: 5px;
                background-color: #00accc;
                color: #fff
            }

            .ui-datepicker table td a:hover {
                text-decoration: none
            }

.ui-datepicker-next, .ui-datepicker-prev {
    display: none
}

.ui-datepicker-buttonpane.ui-widget-content {
    display: flex;
    flex-flow: row-reverse
}

    .ui-datepicker-buttonpane.ui-widget-content button {
        padding: 7px 20px 8px;
        height: 36px;
        border: none;
        margin-left: 10px;
        border-radius: 5px
    }

        .ui-datepicker-buttonpane.ui-widget-content button:first-of-type {
            background-color: transparent;
            border: 1px solid #0467b2;
            color: #00589a
        }

        .ui-datepicker-buttonpane.ui-widget-content button:last-of-type {
            background-color: transparent;
            border-color: transparent;
            color: #6b6b6b
        }

.ui-selectmenu-button.ui-button {
    border: 1px solid #869fb3;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    box-shadow: none;
    color: #000;
    font-family: OpenSans-SemiBold;
    padding: 7px 30px 7px 9px;
    height: 36px;
    background-color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer
}

    .ui-selectmenu-button.ui-button.ui-selectmenu-button-open {
        border-color: #0467b2
    }

    .ui-selectmenu-button.ui-button .ui-selectmenu-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        word-break: normal;
        display: block;
        overflow: hidden
    }

    .ui-selectmenu-button.ui-button .disabled, .ui-selectmenu-button.ui-button:disabled {
        background-color: #e3e6eb
    }

    .ui-selectmenu-button.ui-button.ui-selectmenu-disabled {
        font-family: OpenSans-SemiBold;
        background-color: #e3e6eb;
        border-color: #869fb3
    }

.avatar {
    border-radius: 50%
}

    .avatar.avatar-small {
        width: 24px;
        margin: 0 8px
    }

.radio-wrapper {
    position: relative;
    display: inline-flex;
    margin-right: 30px
}

    .radio-wrapper input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        opacity: 0;
        margin: 0;
        width: 100%;
        cursor: pointer
    }

        .radio-wrapper input + label {
            display: flex;
            align-items: center;
            color: #000;
            height: 36px;
            font-family: OpenSans-SemiBold
        }

            .radio-wrapper input + label:before {
                border: 1px solid;
                border-color: #869fb3;
                content: "";
                display: inline-flex;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                align-items: center;
                margin-right: 15px
            }

            .radio-wrapper input + label:after {
                position: absolute;
                background-color: #0467b2;
                content: "";
                display: inline-flex;
                width: 0;
                height: 0;
                border-radius: 50%;
                align-items: center;
                opacity: 0;
                left: 3px
            }

        .radio-wrapper input:checked + label:before {
            border-color: #0467b2
        }

        .radio-wrapper input:checked + label:after {
            width: 14px;
            height: 14px;
            opacity: 1
        }

        .radio-wrapper input.disabled + label:before, .radio-wrapper input:disabled + label:before {
            background-color: #e3e6eb
        }

        .radio-wrapper input.disabled + label:after, .radio-wrapper input:disabled + label:after {
            background-color: #6a88a0
        }

.toggle-button {
    position: relative;
    margin-left: 25px;
    display: inline-block
}

    .toggle-button input {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        margin: 0;
        z-index: 3;
        cursor: pointer
    }

        .toggle-button input + label {
            width: 32px;
            height: 9px;
            border-radius: 13px;
            position: relative;
            background-color: rgba(82,82,82,.3);
            margin: auto 4px;
            top: 0;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
            min-height: initial;
            margin-bottom: 0 !important
        }

            .toggle-button input + label:after {
                content: "";
                display: inline-block;
                width: 18px;
                height: 18px;
                position: absolute;
                left: -4px;
                right: auto;
                border-radius: 50%;
                background-color: #979797;
                top: -4px;
                -webkit-transition: all .4s ease-in-out;
                -khtml-transition: all .4s ease-in-out;
                -moz-transition: all .4s ease-in-out;
                -ie-transition: all .4s ease-in-out;
                -o-transition: all .4s ease-in-out;
                -ms-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out
            }

        .toggle-button input:checked + label {
            background: rgba(4,168,89,.35)
        }

            .toggle-button input:checked + label:after {
                left: 20px;
                right: auto;
                background: #04a859;
                -webkit-transition: all .4s ease-in-out;
                -khtml-transition: all .4s ease-in-out;
                -moz-transition: all .4s ease-in-out;
                -ie-transition: all .4s ease-in-out;
                -o-transition: all .4s ease-in-out;
                -ms-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out
            }

        .toggle-button input .disabled + label, .toggle-button input:disabled + label {
            opacity: .45
        }

.simple-accordions .simple-accordion_heading {
    color: #000;
    display: block;
    position: relative;
    text-decoration: none
}

    .simple-accordions .simple-accordion_heading:hover {
        text-decoration: none;
        cursor: pointer
    }

    .simple-accordions .simple-accordion_heading span {
        text-transform: uppercase;
        font-family: OpenSans-Bold;
        z-index: 2;
        position: relative;
        padding-right: 15px;
        padding-left: 23px;
        background-color: #fff
    }

    .simple-accordions .simple-accordion_heading:before {
        content: "\f078";
        display: block;
        position: absolute;
        left: 0;
        background-color: #fff;
        font-family: FontAwesome;
        z-index: 3
    }

    .simple-accordions .simple-accordion_heading:after {
        content: "";
        display: block;
        background: rgba(0,0,0,.15);
        height: 1px;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        width: 100%;
        position: absolute;
        z-index: 0
    }

    .simple-accordions .simple-accordion_heading.collapsed + .collapse-wrapper {
        margin-bottom: 35px
    }

.simple-accordions .simple-accordion_body {
    padding: 23px 23px 33px
}

@media (max-width:767px) {
    .simple-accordions .simple-accordion_body {
        padding: 20px 0 33px
    }
}

.simple-accordions .simple-accordion_body table {
    width: 100%;
    padding: 5px
}

    .simple-accordions .simple-accordion_body table .required-sign {
        margin-bottom: 0
    }

    .simple-accordions .simple-accordion_body table th {
        color: #7f8287;
        font-family: OpenSans-Regular;
        font-weight: 400;
        padding-bottom: 5px
    }

    .simple-accordions .simple-accordion_body table td {
        font-family: OpenSans-SemiBold;
        color: #000;
        font-weight: 400
    }

        .simple-accordions .simple-accordion_body table td .unit-calculations {
            display: flex;
            align-items: center;
            flex-flow: row;
            justify-content: flex-start
        }

            .simple-accordions .simple-accordion_body table td .unit-calculations .form-group {
                margin-bottom: 0;
                width: 50%
            }

                .simple-accordions .simple-accordion_body table td .unit-calculations .form-group input {
                    font-family: OpenSans-Bold
                }

            .simple-accordions .simple-accordion_body table td .unit-calculations span {
                padding-left: 10px
            }

@media (max-width:767px) {
    .simple-accordions .simple-accordion_body table td .unit-calculations span {
        padding-left: 3px
    }
}

.simple-accordions .simple-accordion_body table td .unit-calculations input {
    min-width: initial;
    width: 100%
}

.simple-accordions .simple-accordion_body .gray-bg {
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    padding: 6px;
    background-color: #ecf4f7
}

    .simple-accordions .simple-accordion_body .gray-bg td, .simple-accordions .simple-accordion_body .gray-bg th {
        padding: 3px
    }

.simple-accordions .simple-accordion_body .transparent-bg {
    height: 100%;
    display: flex;
    align-items: center
}

@media (max-width:991px) {
    .simple-accordions .simple-accordion_body .transparent-bg {
        margin-top: 20px
    }
}

.simple-accordions .simple-accordion_body .transparent-bg td {
    font-family: OpenSans-Bold
}

    .simple-accordions .simple-accordion_body .transparent-bg td .danger-text, .simple-accordions .simple-accordion_body .transparent-bg td .success-text {
        font-family: OpenSans-SemiBold
    }

    .simple-accordions .simple-accordion_body .transparent-bg td .simple-checkbox input + label {
        font-family: OpenSans-Regular;
        color: #7f8287;
        font-weight: 400
    }

@media (max-width:767px) {
    .simple-accordions .simple-accordion_body .transparent-bg td .simple-checkbox {
        margin-right: 0
    }

        .simple-accordions .simple-accordion_body .transparent-bg td .simple-checkbox input + label {
            min-width: 85px;
            padding-left: 25px
        }
}

.simple-accordions .simple-accordion_body .transparent-bg td .unit-calculations span:first-of-type {
    padding-left: 0
}

.simple-accordions .simple-accordion_body .transparent-bg td .unit-calculations span:not(:first-of-type) {
    padding-left: 30px
}

.simple-accordions .simple-accordion_body .transparent-bg td .unit-calculations .form-group + span:first-of-type {
    padding-left: 10px
}

.danger-text {
    color: #ec5366
}

.success-text {
    color: #04a859
}

.simple-checkbox {
    position: relative;
    display: inline-block;
    margin-right: 30px
}

    .simple-checkbox input {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        margin: 0;
        z-index: 3;
        height: 100%;
        cursor: pointer
    }

        .simple-checkbox input + label {
            min-width: 94px;
            padding-left: 28px;
            margin-bottom: 0;
            position: relative
        }

            .simple-checkbox input + label:before {
                content: "";
                display: block;
                width: 18px;
                height: 18px;
                border: 1px solid;
                -webkit-border-radius: 3px;
                -khtml-border-radius: 3px;
                -moz-border-radius: 3px;
                -ie-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                border-radius: 3px;
                border-color: #869fb3;
                position: absolute;
                left: 0
            }

        .simple-checkbox input:checked + label:before {
            border-color: #0467b2;
            background-color: #0467b2
        }

        .simple-checkbox input:checked + label:after {
            content: "";
            display: block;
            width: 5px;
            height: 10px;
            transform: rotate(45deg);
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
            position: absolute;
            left: 7px;
            top: 3px
        }

        .simple-checkbox input:checked.disabled + label:before, .simple-checkbox input:checked:disabled + label:before {
            background-color: #6a88a0;
            border-color: #6a88a0
        }

        .simple-checkbox input.disabled + label:before, .simple-checkbox input:disabled + label:before {
            background-color: #e3e6eb
        }

@media (max-width:767px) {
    .simple-checkbox {
        min-height: 36px;
        display: inline-flex;
        align-items: center
    }
}

.external-link {
    padding-right: 0;
    position: relative
}

    .external-link:after {
        content: "\f08e";
        font-family: FontAwesome;
        margin-left: 10px;
        position: relative;
        top: -3px
    }

.mark-read-icon {
    position: relative
}

    .mark-read-icon:before {
        content: "\f560";
        font-family: FontAwesome;
        margin-right: 10px;
        position: relative;
        top: -1px
    }

.download-link {
    position: relative
}

    .download-link:before {
        content: "\f019";
        font-family: FontAwesome;
        margin-right: 10px;
        position: relative;
        top: -3px
    }

.collapse-link {
    position: relative
}

    .collapse-link:before {
        content: "\f422";
        font-family: FontAwesome;
        margin-right: 10px;
        position: relative;
        top: -3px
    }

.expand-link {
    position: relative
}

    .expand-link:before {
        content: "\f424";
        font-family: FontAwesome;
        margin-right: 10px;
        position: relative;
        top: -3px
    }

.previous-link i {
    margin-right: 10px
}

.wizard {
    padding: 20px 0 10px
}

    .wizard ul {
        display: table;
        width: 100%;
        table-layout: fixed;
        position: relative;
        margin: 0 auto;
        padding-left: 0
    }

        .wizard ul li {
            display: table-cell;
            text-align: center;
            vertical-align: top;
            overflow: visible;
            position: relative;
            font-size: 11px;
            color: rgba(54,54,54,.45);
            font-weight: 700;
            padding-top: 19px;
            line-height: 15px;
            font-family: OpenSans-Bold
        }

            .wizard ul li:not(:last-child):before {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                top: 7px;
                background-color: #e5e6e7;
                height: 1px;
                width: 100%
            }

            .wizard ul li .node {
                display: inline-block;
                border: 1px solid #e5e6e7;
                background-color: #e5e6e7;
                border-radius: 18px;
                height: 16px;
                width: 16px;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%)
            }

            .wizard ul li.complete {
                color: #363636
            }

                .wizard ul li.complete:before {
                    background-color: #37cd64
                }

                .wizard ul li.complete .node {
                    border-color: #37cd64;
                    background-color: #37cd64
                }

                    .wizard ul li.complete .node:before {
                        font-family: FontAwesome;
                        content: "\f00c";
                        color: #fff;
                        top: 0;
                        position: absolute;
                        left: 2px;
                        font-size: 10px
                    }

            .wizard ul li.in-progress {
                color: #363636
            }

                .wizard ul li.in-progress:before {
                    background: #e5e6e7
                }

                .wizard ul li.in-progress .node {
                    border-color: #37cd64;
                    background-color: #ffff
                }

                    .wizard ul li.in-progress .node:after {
                        content: "";
                        display: block;
                        width: 6px;
                        height: 6px;
                        background: #37cd65;
                        border-radius: 50%;
                        position: absolute;
                        left: 4px;
                        top: 4px
                    }

@media (max-width:991px) {
    .wizard ul li {
        min-width: 200px
    }
}

.circle-progress-bar {
    width: 155px;
    height: 155px;
    border: 4px solid #e3e3e3;
    border-radius: 50%;
    margin: auto;
    position: relative
}

    .circle-progress-bar p {
        background-color: #fff;
        width: 147px;
        height: 147px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        color: #363636;
        font-family: OpenSans-Regular;
        font-size: 15px;
        line-height: 1;
        text-align: center
    }

        .circle-progress-bar p .bigtext {
            font-size: 17px;
            line-height: 29px;
            margin-bottom: 8px;
            font-family: OpenSans-Bold
        }

        .circle-progress-bar p strong {
            font-size: 32px;
            line-height: 19px;
            display: block
        }

    .circle-progress-bar.not-yet-due:after {
        content: "";
        width: 155px;
        height: 155px;
        border: 4px solid green;
        border-radius: 50%;
        position: absolute;
        top: -4px;
        clip: rect(0,159px,120px,75px);
        left: -4px
    }

    .circle-progress-bar.not-yet-due::before {
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        position: absolute;
        top: 106px;
        left: auto;
        right: 4px;
        background: GREEN;
        z-index: 2
    }

    .circle-progress-bar.until-due:after {
        content: "";
        width: 155px;
        height: 155px;
        border: 4px solid #dcc600;
        border-radius: 50%;
        position: absolute;
        top: -4px;
        clip: rect(0,190px,310px,10px);
        left: -4px;
        transform: rotate(63deg)
    }

    .circle-progress-bar.until-due::before {
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        position: absolute;
        top: 22px;
        left: 7px;
        right: 34px;
        background: #dcc600;
        z-index: 2
    }

    .circle-progress-bar.day-until-due:after {
        content: "";
        width: 155px;
        height: 155px;
        border: 4px solid #ffa000;
        border-radius: 50%;
        position: absolute;
        top: -4px;
        clip: rect(0,190px,310px,10px);
        left: -4px;
        transform: rotate(63deg)
    }

    .circle-progress-bar.day-until-due::before {
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        position: absolute;
        top: 22px;
        left: 7px;
        right: 34px;
        background: #ffa000;
        z-index: 2
    }

.ui-selectmenu-menu.ui-front {
    display: none
}

    .ui-selectmenu-menu.ui-front.ui-selectmenu-open {
        display: inline-block;
        background: rgba(255,255,255,.95);
        width: auto !important;
        border-radius: 5px;
        z-index: 1050;
        box-shadow: 0 3px 6px rgba(0,0,0,.16);
        border: 1px solid #eaeaea
    }

        .ui-selectmenu-menu.ui-front.ui-selectmenu-open ul {
            list-style: none;
            padding: 6px 0
        }

            .ui-selectmenu-menu.ui-front.ui-selectmenu-open ul li {
                display: block;
                padding: 3px 20px;
                clear: both;
                font-weight: 400;
                line-height: 1.42857143;
                color: #333;
                white-space: nowrap;
                cursor: pointer;
                font-family: OpenSans-SemiBold
            }

                .ui-selectmenu-menu.ui-front.ui-selectmenu-open ul li:hover {
                    background-color: #fffbc5
                }

                    .ui-selectmenu-menu.ui-front.ui-selectmenu-open ul li:hover .ui-state-active {
                        color: #000
                    }

canvas {
    max-width: 100%
}

.no-tabs.page-wrapper {
    padding-top: 85px
}

@media (max-width:1199px) and (min-width:992px) {
    .no-tabs.page-wrapper {
        padding-top: 143px
    }
}

@media (max-width:991px) and (min-width:768px) {
    .no-tabs.page-wrapper {
        padding-top: 142px
    }
}

@media (max-width:768px) {
    .no-tabs.page-wrapper {
        padding-top: 142px
    }
}

.no-tabs.page-wrapper .main-content header {
    height: 95px
}

@media (max-width:1199px) and (min-width:992px) {
    .no-tabs.page-wrapper .main-content header {
        height: 143px
    }
}

@media (max-width:991px) and (min-width:768px) {
    .no-tabs.page-wrapper .main-content header {
        height: 142px
    }
}

@media (max-width:768px) {
    .no-tabs.page-wrapper .main-content header {
        height: 142px
    }
}

.no-tabs.page-wrapper .main-content header .right-part {
    margin-top: 0
}

.multiple-selection {
    border: 1px solid #869fb3;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    box-shadow: none;
    color: #000;
    font-family: OpenSans-SemiBold;
    padding: 7px 9px 1px;
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap
}

    .multiple-selection .arrow, .multiple-selection .clear {
        top: 10px;
        line-height: 1
    }

    .multiple-selection .clear {
        right: 35px;
        content: "\f00d";
        font-family: FontAwesome
    }

    .multiple-selection .arrow {
        content: "\f078";
        font-family: FontAwesome;
        right: 15px
    }

    .multiple-selection .selected-item {
        background-color: rgba(4,103,178,.15);
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -ie-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        padding: 3px 35px 3px 8px;
        display: inline-block;
        white-space: nowrap;
        margin: 0 6px 6px 0;
        position: relative
    }

        .multiple-selection .selected-item .clear {
            color: #869fb3;
            position: absolute;
            right: 8px;
            top: 7px
        }

    .multiple-selection .arrow, .multiple-selection .clear {
        color: #869fb3;
        position: absolute
    }

@media (min-width:1200px) {
    .two-columns-modal .modal-dialog .modal-body {
        overflow-y: visible
    }
}

.two-columns-modal .modal-dialog .modal-body h5 {
    padding: 0;
    color: #000;
    font-size: 14px;
    line-height: 19px
}

@media (min-width:1200px) {
    .two-columns-modal .modal-dialog .modal-body .pr30 {
        padding-right: 30px
    }

    .two-columns-modal .modal-dialog .modal-body .pl30 {
        padding-left: 30px
    }
}

.two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part {
    height: calc(44vh - 60px);
    overflow: auto;
    padding-right: 20px
}

    .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part::-webkit-scrollbar-track {
        background: #c9ced5
    }

    .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

    .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part::-webkit-scrollbar-track {
        border: 2px solid #fff
    }

@media (max-width:1199px) {
    .two-columns-modal .modal-dialog .modal-body .two-columns-scroll-part {
        height: auto
    }
}

@media (min-width:992px) {
    .two-columns-modal .modal-dialog {
        width: 65vw
    }
}

@media (min-width:1400px) {
    .two-columns-modal .modal-dialog {
        width: 56vw
    }
}

.two-columns-modal .modal-title, .two-columns-modal .modal-title h3, .two-columns-modal .modal-title h4 {
    font-family: OpenSans-Bold;
    font-size: 20px;
    line-height: 27px
}

    .two-columns-modal .modal-title .dropdown {
        border: none;
        display: inline-block;
        width: auto;
        box-shadow: none;
        margin-left: 15px;
        padding-left: 15px;
        position: relative
    }

        .two-columns-modal .modal-title .dropdown i {
            padding-left: 10px;
            color: #869fb3
        }

        .two-columns-modal .modal-title .dropdown:before {
            content: "";
            display: block;
            width: 1px;
            top: 9px;
            bottom: 3px;
            background-color: rgba(0,0,0,.15);
            position: absolute;
            left: 0
        }

@media (max-width:767px) {
    .two-columns-modal .modal-title .dropdown {
        margin-left: 0;
        padding-left: 0;
        display: block
    }

        .two-columns-modal .modal-title .dropdown button {
            padding: 0
        }

        .two-columns-modal .modal-title .dropdown:before {
            display: none
        }
}

.two-columns-modal .modal-title .dropdown-menu {
    box-shadow: 0 3px 6px rgba(0,0,0,.161);
    border-radius: 5px;
    opacity: .95;
    border: none
}

    .two-columns-modal .modal-title .dropdown-menu > li > a {
        padding: 5px 20px;
        line-height: 1.2
    }

.two-columns-modal h5 {
    text-transform: uppercase;
    font-family: OpenSans-Bold;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    display: flex;
    align-items: center;
    margin-bottom: 25px
}

    .two-columns-modal h5:after {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background: rgba(0,0,0,.15);
        margin-left: 20px
    }

.upload-wrapper {
    border: 1px dashed #869fb3;
    background-color: #eef3f8;
    border-radius: 5px;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column
}

    .upload-wrapper input {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 2;
        opacity: 0;
        cursor: pointer
    }

    .upload-wrapper .not-selected-file {
        color: rgba(0,151,174,.75);
        padding-left: 30px;
        position: relative;
        line-height: 17px;
        font-size: 12px;
        font-family: OpenSans-SemiBold
    }

        .upload-wrapper .not-selected-file:before {
            content: "\f093";
            font-family: FontAwesome;
            font-size: 18px;
            position: absolute;
            left: 0
        }

@media (max-width:767px) {
    .upload-wrapper {
        height: 90px
    }

        .upload-wrapper .not-selected-file {
            padding: 30px 10px 0 !important;
            text-align: center
        }

            .upload-wrapper .not-selected-file::before {
                right: 0;
                top: 0;
                margin: auto;
                text-align: center
            }
}

textarea {
    min-height: 75px;
    height: auto
}

    textarea.large-textarea {
        min-height: 75px
    }

input[type=date]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none
}

.user-avatar-list .user-avatar-info {
    display: inline-block
}

@media (max-width:767px) {
    .user-avatar-list .user-avatar-info {
        display: block;
        min-height: 36px
    }

        .user-avatar-list .user-avatar-info img {
            margin-left: 0
        }
}

.user-avatar-list .user-avatar-info + .user-avatar-info {
    margin-left: 20px
}

@media (max-width:767px) {
    .user-avatar-list .user-avatar-info + .user-avatar-info {
        margin-left: 0
    }
}

.uploaded-files-list {
    display: flex;
    position: relative;
    flex-wrap: wrap
}

    .uploaded-files-list .uploaded-file {
        display: flex;
        flex-flow: column;
        margin-right: 10px;
        position: relative;
        margin-bottom: 10px
    }

        .uploaded-files-list .uploaded-file .file {
            position: relative;
            cursor: pointer
        }

            .uploaded-files-list .uploaded-file .file:before {
                content: "";
                background-color: rgba(143,145,164,.55);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                -webkit-transition: all .4s ease-in-out;
                -khtml-transition: all .4s ease-in-out;
                -moz-transition: all .4s ease-in-out;
                -ie-transition: all .4s ease-in-out;
                -o-transition: all .4s ease-in-out;
                -ms-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out
            }

        .uploaded-files-list .uploaded-file button {
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 5px;
            border: none;
            padding: 7px 8px;
            background-color: rgba(255,255,255,.85);
            opacity: 0;
            color: #0467b2;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .uploaded-files-list .uploaded-file .file-name {
            font-family: OpenSans-Bold;
            font-size: 13px
        }

        .uploaded-files-list .uploaded-file .file-date {
            font-size: 11px
        }

        .uploaded-files-list .uploaded-file:hover .file:before {
            opacity: 1;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        .uploaded-files-list .uploaded-file:hover button {
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
            opacity: 1
        }

.search-bar {
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: OpenSans-SemiBold;
    font-size: 14px;
    line-height: 19px;
    position: relative;
    top: 0
}

    .search-bar .input-group {
        margin-bottom: 0;
        width: 70%;
        display: none;
        position: fixed
    }

        .search-bar .input-group.opened {
            display: inline-table;
            position: absolute
        }

@media (min-width:768px) {
    .search-bar .input-group.opened {
        left: auto;
        width: 350px
    }
}

@media (min-width:1200px) {
    .search-bar .input-group.opened {
        right: 120px
    }
}

@media (max-width:1199px) {
    .search-bar .input-group.opened {
        right: 114px
    }
}

@media (max-width:767px) {
    .search-bar .input-group.opened {
        left: 15px;
        right: 65px;
        position: fixed;
        width: auto
    }
}

.search-bar .input-group input {
    border-right: none !important;
    padding: 7px 9px 7px 15px
}

.search-bar .input-group .input-group-btn button.btn {
    margin-left: 0 !important;
    background: #fff;
    padding: 7px 12px 8px;
    border-top: 1px solid #869fb3;
    border-bottom: 1px solid #869fb3;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: end
}

    .search-bar .input-group .input-group-btn button.btn i {
        height: auto;
        width: auto;
        color: #869fb3;
        margin: 0
    }

    .search-bar .input-group .input-group-btn button.btn:last-of-type {
        border-right: 1px solid #869fb3;
        color: #6b6b6b;
        padding: 7px 15px 8px 12px
    }

    .search-bar .input-group .input-group-btn button.btn:not(:last-of-type) {
        padding: 8px 12px 7px 15px
    }

    .search-bar .input-group .input-group-btn button.btn:not(:first-of-type) {
        position: relative
    }

        .search-bar .input-group .input-group-btn button.btn:not(:first-of-type):before {
            content: "";
            background-color: #869fb3;
            top: 10px;
            bottom: 10px;
            width: 1px;
            display: inline-block;
            position: absolute;
            left: 0
        }

@media (max-width:767px) {
    .search-bar .input-group .input-group-btn button.btn:not(:first-of-type) span {
        display: block
    }
}

@media (max-width:991px) and (min-width:768px) {
    .search-bar .input-group {
        right: 135px
    }
}

@media (max-width:767px) {
    .search-bar .input-group {
        right: 61px
    }
}

.search-bar > button {
    float: right
}

@media (max-width:767px) {
    .search-bar {
        top: 1px
    }

        .search-bar.second-btn .input-group.opened {
            left: 15px;
            right: 100px
        }
}

.user-full-message {
    display: flex;
    align-items: start;
    margin-bottom: 15px
}

@media (max-width:991px) {
    .user-full-message {
        margin-bottom: 20px
    }
}

.user-full-message .initials {
    min-width: 42px
}

.user-full-message .sender-name {
    color: #000;
    font-family: OpenSans-Bold;
    margin-right: 7px
}

.user-full-message .messages {
    display: block
}

.user-full-message .message-time {
    color: #7f8287;
    font-size: 12px;
    line-height: 17px
}

.user-full-message .message-text {
    padding: 9px 15px;
    background-color: #fff;
    margin-top: 4px;
    margin-bottom: 0;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    display: inline;
    clear: both
}

.user-full-message.admin-message {
    justify-content: start
}

    .user-full-message.admin-message .initials {
        background-color: #b6c2d9;
        color: #fff
    }

    .user-full-message.admin-message .message-info {
        margin-left: 15px
    }

@media (max-width:991px) {
    .user-full-message.admin-message .message-info {
        margin-left: 10px;
        margin-right: 15px
    }
}

.user-full-message.admin-message .message-text {
    float: left
}

.user-full-message.others-message {
    justify-content: end;
    text-align: right;
    flex-direction: row-reverse
}

    .user-full-message.others-message .initials {
        background-color: #3d93d4;
        color: #fff
    }

    .user-full-message.others-message .message-info {
        margin-right: 15px
    }

@media (max-width:991px) {
    .user-full-message.others-message .message-info {
        margin-right: 10px;
        margin-left: 15px
    }
}

.user-full-message.others-message .message-text {
    float: right;
    background-color: #d2ddf1
}

.user-full-message.others-message.green-message .initials {
    background-color: #1eb8a1
}

.user-full-message.others-message.green-message .message-text {
    background-color: rgba(199,228,223,.65)
}

.user-full-message.others-message.blue-message .initials {
    background-color: #3d93d4
}

.user-full-message.others-message.blue-message .message-text {
    background-color: #d2ddf1
}

.unread-messages {
    color: #0467b2;
    font-family: OpenSans-SemiBold
}

    .unread-messages:before {
        background: #0467b2
    }

.date-messages {
    color: rgba(107,107,107,.65);
    font-family: OpenSans-SemiBold
}

    .date-messages:before {
        background: #c7ccd3
    }

.date-messages, .unread-messages {
    position: relative;
    display: block;
    text-align: center;
    margin: 50px auto 35px
}

    .date-messages:before, .unread-messages:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .date-messages > span, .unread-messages > span {
        background: #e8edf6;
        padding: 10px 25px;
        z-index: 2;
        position: relative
    }

@media (max-width:991px) {
    .date-messages > span, .unread-messages > span {
        padding: 10px
    }
}

@media (max-width:991px) {
    .date-messages, .unread-messages {
        margin: 30px auto 40px
    }
}

.send-message-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 35px 50px;
    background: #e8edf6;
    z-index: 2
}

@media (min-width:1200px) {
    .send-message-wrapper {
        left: 234px
    }
}

@media (max-width:1199px) {
    .send-message-wrapper {
        padding: 22px 15px;
        left: 0
    }
}

.send-message-wrapper:before {
    content: "";
    height: 1px;
    left: 50px;
    right: 50px;
    background-color: rgba(0,0,0,.15);
    top: 0;
    position: absolute
}

@media (max-width:991px) {
    .send-message-wrapper:before {
        left: 15px;
        right: 15px
    }
}

.send-message-wrapper .form-group {
    position: relative;
    margin-bottom: 0
}

    .send-message-wrapper .form-group textarea.form-control {
        height: 58px !important;
        justify-content: center;
        align-items: center !important;
        display: flex !important;
        padding: 18px 22px !important;
        min-height: initial
    }

@media (max-width:991px) {
    .send-message-wrapper .form-group textarea.form-control {
        height: 47px !important;
        padding: 12px 22px !important
    }
}

.send-message-wrapper .form-group > .btn.btn-icon-only {
    position: absolute;
    right: 0;
    top: 0;
    background: #0467b2;
    color: #fff;
    height: 58px;
    border-radius: 0 5px 5px 0;
    width: 58px;
    padding: 0
}

    .send-message-wrapper .form-group > .btn.btn-icon-only i {
        margin: 0
    }

@media (max-width:991px) {
    .send-message-wrapper .form-group > .btn.btn-icon-only {
        height: 47px;
        width: 47px
    }
}

.chat {
    height: 100%;
    padding-bottom: 100px
}

@media (max-width:767px) {
    .chat {
        padding-bottom: 40px
    }
}

.chat .chat-messages {
    height: calc(100% - 88px);
    margin-right: -25px;
    padding-right: 25px;
    overflow: auto
}

    .chat .chat-messages::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .chat .chat-messages::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #e8edf6
    }

    .chat .chat-messages::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

@media (max-width:991px) {
    .chat .chat-messages {
        margin-right: -15px;
        padding-right: 15px;
        height: calc(100% - 58px)
    }

        .chat .chat-messages::-webkit-scrollbar {
            width: 0;
            height: 0
        }
}

@media (min-width:1200px) {
    .closed .send-message-wrapper {
        left: 92px
    }
}

.user-profile-card {
    display: flex;
    align-items: center;
    margin-bottom: 60px
}

@media (max-width:767px) {
    .user-profile-card {
        margin-bottom: 35px
    }
}

.user-profile-card .add-photo {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .user-profile-card .add-photo input {
        width: 84px;
        height: 84px;
        position: absolute;
        z-index: 3;
        opacity: 0;
        cursor: pointer
    }

    .user-profile-card .add-photo .upload-image {
        background: rgba(0,0,0,.55);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        cursor: pointer
    }

.user-profile-card .user:hover .add-photo {
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.user-profile-card .user-info {
    display: flex;
    flex-flow: column;
    margin-left: 30px
}

    .user-profile-card .user-info h2 {
        font-size: 24px;
        font-family: OpenSans-Bold;
        line-height: 33px;
        margin: 0;
        padding: 0;
        text-transform: uppercase
    }

@media (max-width:767px) {
    .user-profile-card .user-info h2 {
        font-size: 18px;
        line-height: 23px
    }
}

.user-profile-card .user-info .mail {
    color: rgba(0,0,0,.65);
    font-size: 15px;
    line-height: 22px;
    text-decoration: none
}

@media (max-width:767px) {
    .user-profile-card .user-info .mail {
        font-size: 14px;
        line-height: 19px
    }
}

@media (max-width:767px) {
    .user-profile-card .user-info {
        margin-left: 20px
    }
}

.form-group-icon label {
    padding-left: 25px
}

    .form-group-icon label i {
        position: absolute;
        left: 0;
        top: 4px;
        color: #000
    }

.form-group-icon p {
    padding-left: 25px
}

.table-responsive {
    margin-bottom: 15px
}

    .table-responsive::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .table-responsive::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #e8edf6
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .table-responsive ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

@media (max-width:767px) {
    .table-responsive {
        border: none
    }
}

.table-border {
    margin-bottom: 0
}

    .table-border td:first-of-type, .table-border th:first-of-type {
        width: auto;
        z-index: 2
    }

    .table-border thead tr > th {
        border-bottom: 1px solid #8ca9be;
        border-radius: 0;
        background-color: #fff;
        color: #000;
        font-family: OpenSans-Bold
    }

        .table-border thead tr > th:last-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .table-border thead tr > th:first-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

    .table-border tbody tr td .table-action {
        background: 0 0;
        border: none;
        font-family: OpenSans-Bold
    }

        .table-border tbody tr td .table-action.delete, .table-border tbody tr td .table-action.remove {
            color: #d54355
        }

        .table-border tbody tr td .table-action.edit {
            color: #0467b2
        }

        .table-border tbody tr td .table-action i {
            margin-right: 10px
        }

    .table-border tbody tr td .toggle-button {
        margin-left: 0
    }

    .table-border tbody tr:nth-of-type(even) td {
        background-color: #fff
    }

    .table-border tbody tr:nth-of-type(odd) td {
        background-color: #e8edf6
    }

        .table-border tbody tr:nth-of-type(odd) td:first-of-type {
            background-color: #e8edf6
        }

    .table-border tbody tr:last-of-type td {
        border-bottom: none
    }

        .table-border tbody tr:last-of-type td:last-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .table-border tbody tr:last-of-type td:first-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

    .table-border tfoot:nth-of-type(even) th {
        background-color: #e8edf6
    }

    .table-border tfoot:nth-of-type(odd) th {
        background-color: #fff
    }

        .table-border tfoot:nth-of-type(odd) th:first-of-type {
            background-color: #fff
        }

.total-items {
    font-family: OpenSans-Regular;
    display: inline-block;
    padding: 10px 0;
    font-weight: 400
}

    .total-items strong {
        font-weight: 400;
        font-family: OpenSans-Bold;
        margin-left: 2px
    }

.btn.btn-transparent {
    background: 0 0;
    border: none;
    font-family: OpenSans-SemiBold;
    color: rgba(0,0,0,.65)
}

    .btn.btn-transparent i {
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .btn.btn-transparent.delete, .btn.btn-transparent.remove {
        color: #d54355
    }

    .btn.btn-transparent.edit {
        color: #0467b2
    }

    .btn.btn-transparent i {
        margin-right: 10px
    }

    .btn.btn-transparent:hover.hover-red i {
        color: #eb5266;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .btn.btn-transparent:hover.hover-blue i {
        color: #0467b2;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

.profile-picture-actions {
    margin-left: 40px
}

.user.user-extra-large .initials {
    width: 123px;
    height: 123px;
    font-size: 50px;
    line-height: 68px
}

    .user.user-extra-large .initials.gray-bg {
        background-color: #e8edf6;
        color: #57c1ff
    }

@media (max-width:1199px) and (min-width:992px) {
    .profile-content .flex-boxes {
        flex-flow: row;
        margin-bottom: 18px
    }
}

@media (max-width:991px) {
    .profile-content .flex-boxes {
        margin-bottom: 0;
        padding: 0
    }

        .profile-content .flex-boxes > div {
            padding-bottom: 15px
        }
}

@media (max-width:767px) {
    .profile-content .flex-boxes > div {
        padding: 0 0 15px
    }
}

@media (max-width:767px) {
    .profile-content .flex-boxes .white-card {
        padding: 25px 15px
    }

        .profile-content .flex-boxes .white-card .table-responsive {
            margin-right: -15px;
            min-width: 100%;
            width: auto
        }
}

@media (max-width:767px) {
    .profile-content .flex-boxes .flex-row > div {
        padding-left: 9px;
        padding-right: 9px
    }
}

@media (max-width:767px) {
    .profile-content .form-group, .profile-content .form-group.mb0 {
        margin-bottom: 20px
    }

        .profile-content .form-group.mb0-xs {
            margin-bottom: 0
        }
}

.carousel {
    padding-bottom: 30px
}

    .carousel h2 {
        margin: 0 0 40px;
        padding: 0 0 20px;
        display: block;
        border-bottom: 1px solid #d6d9dc
    }

    .carousel .carousel-control.left, .carousel .carousel-control.right {
        background-image: none;
        text-shadow: none;
        background-color: #e8edf6;
        height: 66px;
        width: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #89a7b2;
        top: 0;
        bottom: 50px;
        margin: auto;
        opacity: 1;
        opacity: .45;
        font-size: 33px;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

        .carousel .carousel-control.left:hover, .carousel .carousel-control.right:hover {
            opacity: 1;
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

@media (min-width:1200px) {
    .carousel .carousel-control.left {
        left: 0
    }

    .carousel .carousel-control.right {
        right: 0
    }
}

.carousel .white-card {
    min-height: 310px
}

.carousel .carousel-indicators {
    bottom: 10px;
    margin: 0 auto;
    left: 0;
    right: 0
}

    .carousel .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        text-indent: -999px;
        cursor: pointer;
        border: none;
        border-radius: 10px;
        background: rgba(25,149,174,.15);
        margin: 0
    }

        .carousel .carousel-indicators li.active {
            width: 10px;
            height: 10px;
            margin: 0;
            background-color: #1995ae
        }

.ppap-details .input-filters {
    border-bottom: none
}

@media (max-width:767px) {
    .ppap-details .input-filters .row {
        margin: auto -10px
    }

        .ppap-details .input-filters .row .col-xs-6 {
            padding-left: 10px;
            padding-right: 10px
        }
}

.ppap-details h2 {
    margin-top: 0;
    margin-bottom: 20px
}

@media (max-width:1199px) and (min-width:992px) {
    .ppap-details .flex-boxes {
        flex-flow: row;
        margin-bottom: 18px
    }
}

@media (max-width:991px) {
    .ppap-details .flex-boxes {
        margin-bottom: 0;
        padding: 0
    }

        .ppap-details .flex-boxes > div {
            padding-bottom: 15px
        }
}

@media (max-width:767px) {
    .ppap-details .flex-boxes > div {
        padding: 0 0 15px
    }
}

@media (max-width:767px) {
    .ppap-details .flex-boxes .white-card {
        padding: 25px 20px
    }

        .ppap-details .flex-boxes .white-card .table-responsive {
            margin-right: -20px;
            min-width: 100%;
            width: auto
        }
}

@media (max-width:767px) {
    .ppap-details .input-filters {
        margin-bottom: 0
    }
}

.table-scroll {
    overflow: auto;
    padding-right: 15px
}

    .table-scroll::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .table-scroll::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #e8edf6
    }

    .table-scroll::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .table-scroll ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

@media (max-width:767px) {
    .table-scroll {
        margin-right: -15px
    }
}

.blue-card {
    padding-bottom: 0;
    background-color: #ebf2ff;
    border-radius: 5px;
    height: auto
}

    .blue-card h3 {
        font-size: 16px;
        line-height: 22px;
        margin-top: 0;
        margin-bottom: 12px;
        font-family: OpenSans-Bold;
        padding-right: 30px;
        color: #000
    }

    .blue-card p {
        color: rgba(0,0,0,.65);
        font-family: OpenSans-SemiBold
    }

    .blue-card .card-footer {
        border-top: 1px solid rgba(0,0,0,.15);
        padding: 13px 0;
        margin-top: 20px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center
    }

        .blue-card .card-footer .date {
            font-family: OpenSans-SemiBold
        }

        .blue-card .card-footer .user-initials-list {
            display: inline-flex
        }

            .blue-card .card-footer .user-initials-list .initials {
                margin-left: 5px
            }

        .blue-card .card-footer .users-list img {
            border: 3px solid #ebf2ff;
            width: 32px;
            height: 32px
        }

    .blue-card + .blue-card {
        margin-top: 18px
    }

@media (max-width:1199px) {
    .blue-card + .blue-card {
        margin-top: 10px
    }
}

.blue-card .dropdown {
    background-color: transparent;
    display: inline-block;
    position: relative;
    position: absolute;
    top: 26px;
    right: 15px;
    left: auto
}

    .blue-card .dropdown button {
        padding: 0 13px;
        background: rgba(165,165,165,0);
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        border-radius: 5px;
        color: #000
    }

        .blue-card .dropdown button:hover {
            background: rgba(165,165,165,.19);
            -webkit-transition: all .4s ease-in-out;
            -khtml-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -ie-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

    .blue-card .dropdown li {
        padding: 0
    }

        .blue-card .dropdown li a {
            text-align: left;
            color: #333
        }

            .blue-card .dropdown li a i {
                color: #989ca5;
                width: auto
            }

            .blue-card .dropdown li a:hover {
                background-color: transparent !important
            }

@media (min-width:992px) {
    .mt--15 {
        margin-top: -15px
    }
}

.dev-white-card {
    margin-top: 0;
    padding: 0 20px 25px
}

    .dev-white-card .action-btn {
        right: 20px;
        top: 20px
    }

@media (max-width:1199px) {
    .dev-white-card {
        margin-top: 0;
        padding: 0 10px 20px;
        min-width: 100%
    }

        .dev-white-card .action-btn {
            right: 10px;
            top: 20px
        }

        .dev-white-card h2 {
            margin: 0 50px 27px 0;
            font-size: 16px;
            line-height: 23px
        }

        .dev-white-card .blue-card {
            padding: 15px 10px 0
        }

        .dev-white-card .dropdown {
            top: 16px;
            right: 10px
        }
}

@media (max-width:767px) {
    .dev-white-card .action-btn {
        right: 10px;
        top: 15px
    }
}

.dev-white-card .initials {
    color: #fff
}

    .dev-white-card .initials.green-bg {
        background-color: #1eb8a1
    }

    .dev-white-card .initials.blue-bg {
        background-color: #3d93d4
    }

.dev-white-card h2:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    min-width: 10px
}

.dev-white-card.not-started h2:before {
    background: #2898d9
}

.dev-white-card.not-started .badge {
    background-color: rgba(87,193,255,.25);
    color: #2898d9
}

.dev-white-card.in-progress h2::before {
    background: #e5be4f
}

.dev-white-card.in-progress .badge {
    background-color: rgba(234,212,150,.35);
    color: #c8a030
}

.dev-white-card.completed h2::before {
    background: #04c466
}

.dev-white-card.completed .badge {
    background-color: rgba(4,196,102,.15);
    color: #04c466
}

.dev-white-card .date {
    margin-right: 10px;
    font-family: OpenSans-SemiBold;
    white-space: nowrap
}

    .dev-white-card .date i {
        margin-right: 7px;
        display: inline-block
    }

    .dev-white-card .date.start-date {
        color: rgba(0,0,0,.45);
        font-family: OpenSans-Bold
    }

    .dev-white-card .date.info-due-date {
        color: #2898d9
    }

    .dev-white-card .date.danger-due-date {
        color: #ec5366;
        font-family: OpenSans-Bold
    }

    .dev-white-card .date.warning-due-date {
        color: #e5be4f
    }

    .dev-white-card .date.success-completion-date {
        color: #04c466
    }

svg {
    height: 76px;
    transform: rotate(-90deg);
    width: 76px
}

.progress-bar__background {
    fill: none;
    stroke: #e2eff0;
    stroke-width: 1
}

.progress-bar__progress {
    fill: none;
    stroke: red;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    stroke-linecap: round;
    stroke-width: 1;
    transition: stroke-dashoffset 1s ease-in-out
}

.progress-card.yellow-circular .progress-bar__progress {
    stroke: #ecdc02
}

.progress-card.na-circular {
    color: #363636
}

    .progress-card.na-circular i {
        color: rgba(54,54,54,.25)
    }

.progress-card.orange-circular .progress-bar__progress {
    stroke: #f90
}

.progress-card.green-circular .progress-bar__progress {
    stroke: #04a859
}

.progress-card.red-circular .progress-bar__progress {
    stroke: #ec5366
}

.progress-card.late .bigtext {
    margin: auto !important
}

.progress-card.late i {
    width: 50px;
    height: 50px;
    border: 2px dashed #a6a6a6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 25px;
    color: #a6a6a6
}

.progress-card.ontime .bigtext {
    margin: auto !important
}

.progress-card.ontime i {
    width: 50px;
    height: 50px;
    border: 2px dashed #04a859;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 25px;
    color: #04a859
}

.circular {
    height: 76px;
    width: 76px;
    position: relative;
    transform: scale(1)
}

    .circular .inner {
        position: absolute;
        z-index: 6;
        top: 50%;
        left: 50%;
        height: 70px;
        width: 70px;
        margin: -35px 0 0 -35px;
        background: #fff;
        border-radius: 100%
    }

    .circular .number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 10;
        font-size: 32px;
        color: #000;
        font-family: OpenSans-Bold
    }

    .circular .circle .bar {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #e8edf6;
        -webkit-border-radius: 100%;
        clip: rect(0,76px,76px,38px)
    }

        .circular .circle .bar .progress {
            position: absolute;
            height: 100%;
            width: 100%;
            -webkit-border-radius: 100%;
            clip: rect(0,38px,76px,0);
            background: #4158d0
        }

    .circular .circle .left .progress {
        z-index: 1;
        animation: left 4s linear both
    }

    .circular .circle .right {
        transform: rotate(180deg);
        z-index: 3
    }

        .circular .circle .right .progress {
            animation: right 4s linear both;
            animation-delay: 4s
        }

    .circular.yellow-circular .circle .progress {
        background-color: #ecdc02
    }

    .circular.orange-circular .circle .progress {
        background-color: #f90
    }

    .circular.green-circular .circle .progress {
        background-color: #04a859
    }

    .circular.red-circular .circle .progress {
        background-color: #ec5366
    }

@keyframes left {
    100% {
        transform: rotate(180deg)
    }
}

@keyframes right {
    100% {
        transform: rotate(180deg)
    }
}

.text-card p {
    position: relative;
    padding-left: 25px;
    font-size: 14px;
    letter-spacing: -.6px
}

.text-card i {
    color: #0467b1;
    margin-right: 15px;
    position: absolute;
    left: 0;
    top: 4px
}

.progress-card {
    padding: 0;
    position: relative;
    text-align: center
}

    .progress-card > span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        font-size: 32px;
        color: #000;
        font-family: OpenSans-Bold;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

.development {
    padding-bottom: 40px
}

    .development .development-dd-affix {
        padding-top: 14px;
        padding-bottom: 15px
    }

@media (min-width:992px) {
    .development .development-dd-affix .dropdown button {
        padding: 0
    }
}

@media (min-width:1200px) {
    .development .development-dd-affix {
        padding-top: 25px
    }
}

@media (max-width:1199px) {
    .development .development-dd-affix {
        padding-top: 15px;
        position: fixed;
        top: 142px;
        background: #e8edf6;
        z-index: 2;
        left: 0;
        right: 0;
        padding-right: 15px
    }
}

.development .development-dd-affix.affix {
    position: fixed;
    top: 85px;
    background: #e8edf6;
    z-index: 2;
    left: 291px;
    right: 50px;
    padding-right: 0
}

@media (max-width:1199px) {
    .development .development-dd-affix.affix {
        left: 0;
        right: 0;
        z-index: 4;
        margin: 0;
        top: 142px;
        padding-right: 0
    }
}

.development .development-titles {
    padding-top: 25px
}

    .development .development-titles h2 {
        margin: 0 0 28px
    }

@media (max-width:1199px) {
    .development .development-titles .action-btn {
        right: 0
    }
}

.development .development-titles.affix {
    position: sticky;
    background: #fff;
    z-index: 3;
    width: 100%;
    left: 0;
    right: 0;
    top: 153px;
    display: flex;
    align-items: center;
    padding: 25px 0 0
}

@media (min-width:1200px) {
    .development .development-titles.affix .action-btn {
        right: 0
    }
}

@media (max-width:1199px) {
    .development .development-titles.affix {
        position: static
    }
}

@media (max-width:1199px) {
    .development .development-titles {
        position: sticky !important;
        background-color: #fff;
        z-index: 2
    }
}

@media (max-width:1199px) and (min-width:992px) {
    .development .development-titles {
        top: 2px !important
    }
}

@media (max-width:991px) {
    .development .development-titles {
        top: 0 !important
    }
}

.development .development-boxes .row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0
}

@media (max-width:1199px) and (min-width:768px) {
    .development .development-boxes .row > .col-lg-4 {
        width: 500px;
        min-width: 500px
    }
}

@media (max-width:767px) {
    .development .development-boxes .row > .col-lg-4 {
        width: 90%;
        min-width: 90%
    }
}

@media (min-width:1200px) {
    .development .development-boxes .row {
        margin-right: -8px;
        margin-left: -8px
    }

        .development .development-boxes .row > .col-lg-4 {
            padding-left: 8px;
            padding-right: 8px
        }
}

@media (max-width:1199px) {
    .development .development-boxes .row {
        margin-right: -4px;
        margin-left: -4px;
        overflow: visible;
        margin-bottom: 0
    }

        .development .development-boxes .row > .col-lg-4 {
            padding-left: 4px;
            padding-right: 4px
        }
}

@media (max-width:1199px) {
    .development .development-boxes {
        margin-right: -20px;
        margin-bottom: 40px;
        padding-top: 55px;
        height: calc(100vh - 180px);
        overflow: auto;
        padding-right: 15px
    }

        .development .development-boxes::-webkit-scrollbar {
            width: 5px;
            height: 5px
        }

        .development .development-boxes::-webkit-scrollbar-track {
            background: #c9ced5;
            border: 2px solid #e8edf6
        }

        .development .development-boxes::-webkit-scrollbar-thumb {
            background: #aebace;
            -webkit-border-radius: 2px;
            -khtml-border-radius: 2px;
            -moz-border-radius: 2px;
            -ie-border-radius: 2px;
            -o-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px
        }

            .development .development-boxes ::-webkit-scrollbar-thumb:hover {
                background: #8e9fbb
            }
}

@media (max-width:1199px) and (max-width:767px) {
    .development .development-boxes {
        margin-right: -15px
    }
}

@media (max-width:991px) {
    .development .development-boxes {
        margin-right: -15px;
        margin-bottom: 0;
        padding-right: 0 !important
    }
}

@media (max-width:1199px) {
    .development {
        height: calc(100vh - 210px);
        padding-bottom: 0
    }
}

@media (min-width:1200px) {
    .closed .development .development-dd-affix.affix {
        left: 148px
    }
}

.score-cards > .row {
    padding: 40px 0 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .score-cards > .row > div {
        height: 100%;
        flex-wrap: wrap
    }

        .score-cards > .row > div .score-card {
            height: 100%
        }

    .score-cards > .row .score-card {
        padding: 15px 24px;
        background-color: #fff;
        border-radius: 5px
    }

        .score-cards > .row .score-card h2 {
            color: rgba(0,0,0,.85);
            font-size: 14px;
            margin: 0;
            padding: 0;
            font-family: OpenSans-Regular;
            font-weight: 400
        }

            .score-cards > .row .score-card h2 strong {
                font-family: OpenSans-Bold
            }

        .score-cards > .row .score-card .score-info {
            display: flex;
            align-items: center;
            justify-content: start;
            margin-top: 10px
        }

            .score-cards > .row .score-card .score-info .progress-card {
                margin: auto 15px auto 0;
                position: relative
            }

                .score-cards > .row .score-card .score-info .progress-card > span {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 10;
                    font-size: 32px;
                    color: #000;
                    font-family: OpenSans-Bold;
                    bottom: 0;
                    margin: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

@media (max-width:1400px) and (min-width:768px) {
    .score-cards > .row {
        flex-wrap: wrap
    }

        .score-cards > .row > div {
            width: 50%;
            margin-bottom: 18px
        }
}

@media (max-width:768px) {
    .score-cards {
        overflow: auto;
        padding-bottom: 12px
    }

        .score-cards > .row {
            display: table;
            margin: 0
        }

            .score-cards > .row > div {
                min-width: 348px;
                display: table-cell;
                padding: 0 8px
            }
}

.heading-dropdowns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 247px;
    z-index: 3;
    background: #e8edf6
}

    .heading-dropdowns .dropdowns-list {
        margin: 40px 0 21px;
        text-align: right;
        padding: 0 30px 0 0
    }

@media (max-width:767px) {
    .heading-dropdowns .dropdowns-list {
        margin: 20px 0;
        width: 100%;
        padding: 0
    }
}

.heading-dropdowns .dropdowns-list .dropdown, .heading-dropdowns .dropdowns-list .toggle-buttons {
    float: right;
    margin-left: 30px
}

@media (max-width:1199px) and (min-width:992px) {
    .heading-dropdowns {
        top: 302px;
        right: 0;
        width: auto;
        margin: 0 -25px;
        padding: 0 10px
    }
}

@media (max-width:991px) and (min-width:768px) {
    .heading-dropdowns {
        top: 302px;
        right: 0;
        width: auto;
        margin: 0 -15px;
        padding: 0 10px
    }
}

@media (max-width:767px) {
    .heading-dropdowns {
        flex-flow: column;
        justify-content: start;
        align-items: start
    }

        .heading-dropdowns h2 {
            margin-top: 30px
        }
}

.accordions-table {
    background-color: #fff;
    padding: 0 15px 25px 10px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    height: 100%;
    position: relative;
    z-index: 0;
    overflow: auto;
    max-height: calc(100vh - 310px)
}

    .accordions-table thead {
        z-index: 4
    }

    .accordions-table::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    .accordions-table::-webkit-scrollbar-track {
        background: #c9ced5;
        border: 2px solid #e8edf6
    }

    .accordions-table::-webkit-scrollbar-thumb {
        background: #aebace;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        -moz-border-radius: 2px;
        -ie-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px
    }

        .accordions-table ::-webkit-scrollbar-thumb:hover {
            background: #8e9fbb
        }

@media (max-width:767px) {
    .accordions-table {
        margin-right: -15px
    }
}

@media (max-width:1199px) {
    .accordions-table {
        margin-right: -25px
    }
}

@media (max-width:991px) {
    .accordions-table {
        margin-right: -15px
    }
}

.accordions-table td {
    font-family: OpenSans-SemiBold;
    line-height: 1.2
}

@media (max-width:1300px) {
    .accordions-table th {
        width: 60px
    }
}

.accordions-table th:nth-of-type(2) {
    z-index: 5 !important
}

.accordions-table th:nth-of-type(3) {
    position: sticky;
    z-index: 5 !important;
    left: 182px !important
}

@media (max-width:1300px) {
    .accordions-table td table td {
        width: 60px
    }
}

.accordions-table .total-row table td {
    border-top: 0;
    background-color: rgba(0,172,204,.15)
}

    .accordions-table .total-row table td:first-of-type {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        font-family: OpenSans-Bold;
        position: sticky;
        left: -12px;
        top: 0;
        z-index: 2;
        background-color: #d9f3f7
    }

    .accordions-table .total-row table td:nth-of-type(2) {
        position: sticky;
        left: 178px;
        z-index: 2;
        background-color: #d9f3f7
    }

    .accordions-table .total-row table td:last-of-type {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

.accordions-table .final-row table {
    border-collapse: separate;
    border-spacing: 0 5px
}

    .accordions-table .final-row table td {
        border-top: 0;
        background-color: rgba(0,172,204,.3)
    }

        .accordions-table .final-row table td:first-of-type {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            position: sticky;
            z-index: 2;
            left: -12px;
            top: 0;
            background-color: #b2e6f0;
            font-family: OpenSans-Bold
        }

        .accordions-table .final-row table td:nth-of-type(2) {
            position: sticky;
            left: 178px;
            z-index: 2;
            background-color: #b2e6f0
        }

            .accordions-table .final-row table td:nth-of-type(2):after {
                top: -4px;
                height: auto
            }

        .accordions-table .final-row table td:last-of-type {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            position: relative
        }

            .accordions-table .final-row table td:last-of-type:after {
                content: "";
                display: block;
                width: 1px;
                height: auto;
                border-right: 1px solid rgba(112,112,112,.2);
                left: 0;
                position: absolute;
                top: -4px;
                bottom: 0
            }

.accordions-table > table > thead > tr > th {
    padding: 26px 20px;
    font-family: OpenSans-Bold;
    background-color: #fff;
    position: sticky;
    z-index: 5
}

    .accordions-table > table > thead > tr > th:first-of-type {
        left: -12px;
        top: 0
    }

    .accordions-table > table > tbody > tr > td:first-of-type, .accordions-table > table > tbody > tr > th:first-of-type, .accordions-table > table > thead > tr > td:first-of-type, .accordions-table > table > thead > tr > th:first-of-type {
        z-index: 2
    }

    .accordions-table > table > tbody > tr > td:nth-of-type(1), .accordions-table > table > tbody > tr > th:nth-of-type(1), .accordions-table > table > thead > tr > td:nth-of-type(1), .accordions-table > table > thead > tr > th:nth-of-type(1) {
        width: 30px;
        padding: 0
    }

    .accordions-table > table > tbody > tr > td:nth-of-type(2), .accordions-table > table > tbody > tr > th:nth-of-type(2), .accordions-table > table > thead > tr > td:nth-of-type(2), .accordions-table > table > thead > tr > th:nth-of-type(2) {
        width: 200px;
        padding-left: 20px;
        white-space: normal;
        word-break: break-word;
        background-color: #fff;
        position: sticky;
        z-index: 6 !important;
        left: -10px
    }

    .accordions-table > table > tbody > tr > td:nth-of-type(3), .accordions-table > table > tbody > tr > th:nth-of-type(3), .accordions-table > table > thead > tr > td:nth-of-type(3), .accordions-table > table > thead > tr > th:nth-of-type(3) {
        width: 100px;
        text-align: center;
        position: sticky;
        left: 178px;
        z-index: 6 !important
    }

    .accordions-table > table > tbody > tr > td:last-of-type, .accordions-table > table > tbody > tr > th:last-of-type, .accordions-table > table > thead > tr > td:last-of-type, .accordions-table > table > thead > tr > th:last-of-type {
        width: 100px
    }

.accordions-table > table > tbody > tr > td {
    border-top: none
}

.accordions-table > table > tbody > tr.main-row > td {
    padding: 25px 10px !important;
    cursor: pointer;
    font-family: OpenSans-Bold
}

    .accordions-table > table > tbody > tr.main-row > td > i {
        margin-right: 10px
    }

    .accordions-table > table > tbody > tr.main-row > td:first-of-type {
        position: sticky;
        top: 0;
        left: -18px;
        z-index: 3
    }

    .accordions-table > table > tbody > tr.main-row > td:last-of-type {
        position: relative;
        z-index: 1 !important
    }

.accordions-table > table > tbody > tr.main-row[aria-expanded=false] td > i {
    min-width: 10px
}

    .accordions-table > table > tbody > tr.main-row[aria-expanded=false] td > i:before {
        content: "\f105"
    }

.accordions-table > table > tbody > tr:not(.main-row) > td {
    padding: 0 0 0 30px !important
}

.accordions-table .panel-collapse, .accordions-table .panel-collapse.in {
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.accordions-table table {
    table-layout: fixed
}

    .accordions-table table th {
        line-height: 1.2 !important
    }

    .accordions-table table table {
        margin-bottom: 0
    }

        .accordions-table table table tbody > tr > td, .accordions-table table table tbody > tr > th {
            padding: 12px 20px
        }

            .accordions-table table table tbody > tr > td:nth-of-type(1), .accordions-table table table tbody > tr > th:nth-of-type(1) {
                width: 200px;
                white-space: normal;
                word-break: break-word;
                position: sticky;
                left: -12px;
                top: 0;
                z-index: 2
            }

            .accordions-table table table tbody > tr > td:nth-of-type(2), .accordions-table table table tbody > tr > th:nth-of-type(2) {
                width: 100px;
                max-width: 100px;
                color: #04a859;
                position: sticky;
                left: 178px;
                z-index: 3;
                text-align: center
            }

                .accordions-table table table tbody > tr > td:nth-of-type(2):after, .accordions-table table table tbody > tr > th:nth-of-type(2):after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    border-right: 1px solid rgba(112,112,112,.2);
                    right: 0;
                    position: absolute;
                    top: 0;
                    bottom: 0
                }

            .accordions-table table table tbody > tr > td:last-of-type, .accordions-table table table tbody > tr > th:last-of-type {
                width: 100px;
                max-width: 100px;
                position: relative
            }

                .accordions-table table table tbody > tr > td:last-of-type:after, .accordions-table table table tbody > tr > th:last-of-type:after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    border-right: 1px solid rgba(112,112,112,.2);
                    left: 0;
                    position: absolute;
                    top: 0;
                    bottom: 0
                }

        .accordions-table table table.table-striped {
            border-collapse: separate;
            border-spacing: 0 0
        }

            .accordions-table table table.table-striped tr td {
                font-family: OpenSans-SemiBold
            }

            .accordions-table table table.table-striped tr:nth-of-type(odd) td {
                background-color: #e8edf6
            }

            .accordions-table table table.table-striped tr:nth-of-type(even) td {
                background-color: #fff
            }

.mt0 {
    margin-top: 0 !important
}

.toggle-buttons {
    float: right;
    margin-left: 30px
}

    .toggle-buttons .btn {
        padding: 0;
        width: 36px;
        height: 36px;
        margin: 0;
        text-align: center;
        background: 0 0;
        border: 1px solid #0467b2;
        color: #0467b2
    }

        .toggle-buttons .btn:focus {
            outline: 0
        }

        .toggle-buttons .btn i {
            margin-right: 0
        }

        .toggle-buttons .btn:first-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .toggle-buttons .btn:last-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .toggle-buttons .btn.active {
            background-color: #0467b2;
            color: #fff
        }

div#performance-affix.affix {
    top: 138px;
    position: fixed;
    left: 285px;
    right: 50px;
    z-index: 3
}

.closed div#performance-affix.affix {
    left: 142px
}

@media (max-width:1199px) {
    .closed div#performance-affix {
        position: relative;
        z-index: 2;
        background: #e8edf6;
        padding-top: 15px;
        top: -15px
    }

        .closed div#performance-affix.affix {
            margin-top: 0;
            position: fixed;
            left: 0;
            right: 0;
            padding-left: 15px;
            padding-right: 15px;
            top: 195px;
            z-index: 4
        }
}

@media (max-width:767px) {
    .closed div#performance-affix.affix {
        top: 188px
    }
}

.filter-height {
    min-height: 101px
}

.login-page {
    display: flex;
    height: auto;
    min-height: 100vh;
}

.logo-part img {
    height: 60px;
    position: relative;
    z-index: 1000;
}

@media (max-width:1199px) {
    .login-page {
        flex-flow: column;
        background: linear-gradient(36deg,#675588 0,#19bdc1 100%);
        height: auto
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .login-page {
        padding: 30px 15px 70px
    }
}

@media (max-width:767px) {
    .login-page {
        padding: 30px 15px 70px
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .login-page {
        background: linear-gradient(321deg,#675588 0,#19bdc1 100%) no-repeat
    }
}


.login-page .portal-bg {
    background: linear-gradient(36deg,#675588 0,#19bdc1 100%);
    padding: 110px 10% 90px 6%;
    width: 40%;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    flex-grow: 2;
}

.reset-password-page .portal-bg:before, .login-page .portal-bg:before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    height: 60%;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: bottom -110px center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1199px) {
    .login-page .portal-bg {
        flex-flow: column;
        padding: 0;
        width: 100%;
        background: 0 0;
        justify-content: center;
        text-align: center
    }
}

@media (max-width:767px) {
    .login-page .portal-bg {
        padding: 0;
        justify-content: center;
        text-align: center
    }
}

.login-page .portal-bg h1 {
    color: #fff;
    font-size: 45px;
    line-height: 49px;
    font-family: OpenSans-Bold;
    margin: 35px auto 15px;
    z-index: 1;
    position: relative
}

@media (max-width:1199px) and (min-width:768px) {
    .login-page .portal-bg h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .hidden-xs {
        width: 70%;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 2%;
    }
}

@media (max-width:767px) {
    .login-page .portal-bg h1 {
        font-size: 27px;
        line-height: 30px;
        margin-top: 22px;
        margin-bottom: 25px
    }

    .hidden-xs {
        display: none;
    }
}

.login-page .portal-bg p {
    color: rgba(255,255,255,.85);
    z-index: 1;
    position: relative
}

.login-page .portal-login-form {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

    .login-page .portal-login-form h2 {
        padding-left: 0
    }

    .login-page .portal-login-form .info-text {
        margin-bottom: 25px;
        color: rgba(0,0,0,.75);
        font-family: OpenSans-SemiBold
    }

    .login-page .portal-login-form .disclaimer {
        line-height: 15px;
        font-size: 12px;
        display: inline-block
    }

    .login-page .portal-login-form .form-wrapper {
        max-width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        gap: 30px;
        padding-top: 80px;
        padding-bottom: 24px;
    }

        .login-page .portal-login-form .form-wrapper h2 {
            text-transform: uppercase;
            margin: 40px 0
        }

        .login-page .portal-login-form .form-wrapper .form-group {
            margin-bottom: 25px
        }

            .login-page .portal-login-form .form-wrapper .form-group label {
                margin-left: 10px;
                margin-bottom: 5px
            }

            .login-page .portal-login-form .form-wrapper .form-group .simple-checkbox label {
                color: #000;
                font-family: OpenSans-SemiBold;
                margin-left: 0
            }

            .login-page .portal-login-form .form-wrapper .form-group .form-control[type=password] {
                /*background-image: url(../img/password.svg);
                background-position: right 15px center;
                background-repeat: no-repeat;
                background-size: 16px*/
            }

        .login-page .portal-login-form .form-wrapper .btn {
            background-color: #0467b2;
            color: #fff;
            margin-bottom: 25px
        }

@media (max-width:1199px) {
    .login-page .portal-login-form .form-wrapper {
        margin-top: 0;
        padding-bottom: 60px
    }

        .login-page .portal-login-form .form-wrapper h2 {
            margin: 70px 0 40px;
            font-size: 20px;
            line-height: 27x
        }
}

@media (max-width:767px) {
    .login-page .portal-login-form .form-wrapper {
        margin: 0 20px;
        padding-bottom: 20px
    }

        .login-page .portal-login-form .form-wrapper h2 {
            margin: 30px auto 20px
        }
}

@media (max-width:1199px) {
    .login-page .portal-login-form {
        width: auto;
        margin: 0;
        border-radius: 5px;
        z-index: 1000;
    }
}

.login-page .terms {
    display: FLEX;
    justify-content: space-between
}

    .login-page .terms label {
        color: #7f8287;
        font-size: 12px;
        line-height: 18px;
        font-family: OpenSans-Regular;
        font-weight: 400
    }

    .login-page .terms .dropdown button {
        line-height: 18px
    }

.login-page .disclaimer {
    color: rgba(0,0,0,.85)
}

.login-page .created-by {
    margin: 0;
    text-align: center;
    color: #7f8287;
    font-size: 12px;
    line-height: 17px
}

.login-alert-wrapper{
    height: auto;
}

.login-alert-wrapper .hide{
    display: none;
}

.login-alert-wrapper .show{
    display: block;
}

@media (max-width:1199px) {
    .login-page .created-by {
        bottom: -34px;
        color: rgba(255,255,255,.5)
    }

        .login-page .created-by a {
            color: #fff
        }
}

.login-page hr {
    margin: 26px auto;
    border-top: 1px solid rgba(0,0,0,.25)
}

@media (max-width:767px) {
    .login-page hr {
        margin: 35px auto 20px
    }

    .login-page .dropdown-menu {
        min-width: 10rem !important;
    }
}

.login-page .dropdown-menu {
    min-width: 14rem;

}

    .login-page .dropdown-menu > li > a {
        padding: 3px 10px
    }

.reset-password-page {
    display: flex;
    height: 100vh !important;
}

@media (max-width:1199px) {
    .reset-password-page {
        flex-flow: column;
        background: linear-gradient(36deg,#675588 0,#19bdc1 100%);
        height: auto
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .reset-password-page {
        padding: 30px 15px 70px
    }
}

@media (max-width:767px) {
    .reset-password-page {
        padding: 30px 15px 70px
    }

}

@media (max-width:1199px) and (min-width:768px) {
    .reset-password-page {
        background: linear-gradient(321deg,#675588 0,#19bdc1 100%) no-repeat
    }
}

.reset-password-page .portal-bg {
    background: linear-gradient(36deg, #675588 0, #19bdc1 100%);
    padding: 110px 10% 90px 6%;
    width: 40%;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    flex-grow: 2;
}

@media (max-width:1199px) {
    .reset-password-page .portal-bg {
        flex-flow: column;
        padding: 0;
        width: 100%;
        background: 0 0;
        height: auto;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width:767px) {
    .reset-password-page .portal-bg {
        padding: 0;
        justify-content: center;
        text-align: center
    }
}

.reset-password-page .portal-bg h1 {
    color: #fff;
    font-size: 45px;
    line-height: 49px;
    font-family: OpenSans-Bold;
    margin: 35px auto 15px;
    z-index: 1;
    position: relative
}

@media (max-width:1199px) and (min-width:768px) {
    .reset-password-page .portal-bg h1 {
        font-size: 30px;
        line-height: 36px
    }

    .hidden-xs {
        width: 70%;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 2%;
    }
}

@media (max-width:767px) {
    .reset-password-page .portal-bg h1 {
        font-size: 27px;
        line-height: 30px;
        margin-top: 22px;
        margin-bottom: 25px
    }
}

.reset-password-page .portal-bg p {
    color: rgba(255,255,255,.85);
    z-index: 1;
    position: relative
}

.reset-password-page .portal-login-form {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

    .reset-password-page .portal-login-form h2 {
        padding-left: 0
    }

    .reset-password-page .portal-login-form .info-text {
        margin-bottom: 25px;
        color: rgba(0,0,0,.75);
        font-family: OpenSans-SemiBold
    }

    .reset-password-page .portal-login-form .disclaimer {
        line-height: 15px;
        font-size: 12px;
        display: inline-block
    }

    .reset-password-page .portal-login-form .form-wrapper {
        max-width: 500px;
        margin-top: -95px
    }

        .reset-password-page .portal-login-form .form-wrapper h2 {
            text-transform: uppercase;
            margin: 40px 0
        }

        .reset-password-page .portal-login-form .form-wrapper .form-group {
            margin-bottom: 25px
        }

            .reset-password-page .portal-login-form .form-wrapper .form-group label {
                margin-left: 10px;
                margin-bottom: 5px
            }

            .reset-password-page .portal-login-form .form-wrapper .form-group .simple-checkbox label {
                color: #000;
                font-family: OpenSans-SemiBold;
                margin-left: 0
            }

            .reset-password-page .portal-login-form .form-wrapper .form-group .form-control[type=password] {
                /*background-image: url(../img/password.svg);
                background-position: right 15px center;
                background-repeat: no-repeat;
                background-size: 16px*/
            }

        .reset-password-page .portal-login-form .form-wrapper .btn {
            background-color: #0467b2;
            color: #fff;
            margin-bottom: 25px
        }

@media (max-width:1199px) {
    .reset-password-page .portal-login-form .form-wrapper {
        margin-top: 0;
        padding-bottom: 60px
    }

        .reset-password-page .portal-login-form .form-wrapper h2 {
            margin: 70px 0 40px;
            font-size: 20px;
            line-height: 27x
        }
}

@media (max-width:767px) {
    .reset-password-page .portal-login-form .form-wrapper {
        margin: 0 20px;
        padding-bottom: 20px
    }

        .reset-password-page .portal-login-form .form-wrapper h2 {
            margin: 30px auto 20px
        }
}

@media (max-width:1199px) {
    .reset-password-page .portal-login-form {
        width: auto;
        margin: 0;
        border-radius: 5px;
        z-index: 1000;
    }
}

.reset-password-page .terms {
    display: FLEX;
    justify-content: space-between
}

    .reset-password-page .terms label {
        color: #7f8287;
        font-size: 12px;
        line-height: 18px;
        font-family: OpenSans-Regular;
        font-weight: 400
    }

    .reset-password-page .terms .dropdown button {
        line-height: 18px
    }

.reset-password-page .disclaimer {
    color: rgba(0,0,0,.85)
}

.reset-password-page .created-by {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: #7f8287;
    font-size: 12px;
    line-height: 17px
}

@media (max-width:1199px) {
    .reset-password-page .created-by {
        bottom: -34px;
        color: rgba(255,255,255,.5)
    }

        .reset-password-page .created-by a {
            color: #fff
        }
}

.reset-password-page hr {
    margin: 26px auto;
    border-top: 1px solid rgba(0,0,0,.25)
}

@media (max-width:767px) {
    .reset-password-page hr {
        margin: 35px auto 20px
    }
}

.reset-password-page .dropdown-menu {
    min-width: initial
}

    .reset-password-page .dropdown-menu > li > a {
        padding: 3px 10px
    }

.loading-line {
    display: inline-block;
    height: 10px;
    width: 75%;
    border-radius: 10px;
    background-color: #ebeff7
}

.loading-badge, .loading-circle {
    background-color: #ebeff7
}

.loading-skeleton .table-wrapper {
    overflow: hidden
}

.loading-skeleton .table-striped tbody > tr:nth-of-type(odd) td .loading-line, .loading-skeleton .table-striped tbody > tr:nth-of-type(odd) th .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(odd) td .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(odd) th .loading-line {
    background: #e8edf6
}

.loading-skeleton .table-striped tbody > tr:nth-of-type(even) td .loading-line, .loading-skeleton .table-striped tbody > tr:nth-of-type(even) th .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(even) td .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(even) th .loading-line {
    background: #dbe2f0
}

.loading-skeleton .table-striped tbody > tr:nth-of-type(even) td:first-of-type .loading-line, .loading-skeleton .table-striped tbody > tr:nth-of-type(even) th:first-of-type .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(even) td:first-of-type .loading-line, .loading-skeleton .table-striped thead > tr:nth-of-type(even) th:first-of-type .loading-line {
    width: 65%
}

.loading-skeleton .percents-box:before {
    display: none
}

.loading-skeleton .skeleton-chart {
    position: relative
}

    .loading-skeleton .skeleton-chart .lines hr {
        border-top: 1px solid #d7dce4
    }

        .loading-skeleton .skeleton-chart .lines hr:not(:last-of-type) {
            margin-bottom: 30px
        }

    .loading-skeleton .skeleton-chart .bars {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0 40px;
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0
    }

        .loading-skeleton .skeleton-chart .bars .loading-bar {
            display: inline-block;
            width: 65px;
            height: 100px;
            background-color: #fff;
            border-radius: 5px 5px 0 0
        }

            .loading-skeleton .skeleton-chart .bars .loading-bar:nth-of-type(even) {
                height: 65px
            }

@media (max-width:767px) {
    .loading-skeleton .skeleton-chart .bars .loading-bar {
        width: 25px
    }
}

@media (max-width:767px) {
    .loading-skeleton .skeleton-chart .bars {
        padding: 0 10px
    }
}

.loading-skeleton .circle-box .loading-badge {
    background-color: #ebeff7
}

.loading-skeleton .circle-box .circle-badge:after {
    border: none !important
}

.loading-skeleton .circle-box .circle-text {
    width: 100%
}

    .loading-skeleton .circle-box .circle-text strong .loading-line {
        width: 54%
    }

.loading-skeleton .white-box-chart h3 {
    margin: 20px auto 0
}

    .loading-skeleton .white-box-chart h3 .loading-line {
        width: 100%
    }

.loading-skeleton .white-box-chart .loadingChart-container {
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex
}

    .loading-skeleton .white-box-chart .loadingChart-container .loading-circle {
        position: relative;
        width: 130px;
        height: 130px;
        background: #ebeff7
    }

@media (max-width:1500px) and (min-width:1200px) {
    .loading-skeleton .white-box-chart .pieChart-container {
        max-height: 260px
    }

        .loading-skeleton .white-box-chart .pieChart-container .loading-circle {
            width: 90px;
            height: 90px
        }
}

.loading-skeleton .dataTables_info .items-info {
    width: 90px
}

    .loading-skeleton .dataTables_info .items-info .loading-line {
        background-color: #dae0ec;
        width: 100%
    }

.loading-skeleton .paging-part > div {
    width: 150px
}

    .loading-skeleton .paging-part > div .loading-line {
        background-color: #dae0ec;
        width: 100%
    }

.loading-skeleton .equipment-box.loading-equipment-box {
    padding: 30px 35px 30px 60px
}

    .loading-skeleton .equipment-box.loading-equipment-box::before {
        background-image: none !important
    }

    .loading-skeleton .equipment-box.loading-equipment-box h3 {
        width: 100%
    }

        .loading-skeleton .equipment-box.loading-equipment-box h3 strong span {
            width: 54%
        }

@media (max-width:767px) {
    .loading-skeleton .equipment-box.loading-equipment-box h3 {
        width: 60%
    }
}

.loading-skeleton .equipment-box.loading-equipment-box .number {
    display: block;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: #ebeff7;
    min-width: 60px
}

@media (max-width:767px) {
    .loading-skeleton .equipment-box.loading-equipment-box .number {
        left: auto;
        right: 20px
    }
}

@media (max-width:767px) {
    .loading-skeleton .equipment-box.loading-equipment-box {
        padding: 30px 20px
    }
}

@keyframes ssc-loading {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(100%)
    }
}

.loading-skeleton .loading-badge:after {
    content: "";
    display: block
}

.loading-skeleton .circle-badge, .loading-skeleton .circle-box .loading-badge, .loading-skeleton .loading-circle, .loading-skeleton .loading-line, .loading-skeleton .number {
    position: relative;
    overflow: hidden
}

    .loading-skeleton .circle-badge:after, .loading-skeleton .circle-box .loading-badge:after, .loading-skeleton .loading-circle:after, .loading-skeleton .loading-line:after, .loading-skeleton .number:after {
        content: "";
        display: block;
        -webkit-animation: ssc-loading 1.3s infinite;
        animation: ssc-loading 1.3s infinite;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 1;
        background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,.3)),to(transparent));
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)
    }

.news-list .news, .news-list .notification, .notifications-list .news, .notifications-list .notification {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer
}

    .news-list .news .read-btn, .news-list .notification .read-btn, .notifications-list .news .read-btn, .notifications-list .notification .read-btn {
        width: 3px;
        min-width: 3px;
        height: 20px;
        -webkit-transition: all .4s ease-in-out;
        -khtml-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ie-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        background-color: #fff;
        margin: auto 10px auto 0
    }

@media (max-width:767px) {
    .news-list .news .read-btn, .news-list .notification .read-btn, .notifications-list .news .read-btn, .notifications-list .notification .read-btn {
        margin: 15px 0 auto
    }
}

.news-list .news .news-body, .news-list .news .notification-body, .news-list .notification .news-body, .news-list .notification .notification-body, .notifications-list .news .news-body, .notifications-list .news .notification-body, .notifications-list .notification .news-body, .notifications-list .notification .notification-body {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 18px 10px;
    border-radius: 5px;
    background-color: transparent;
    color: #000;
    font-family: OpenSans-SemiBold;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .news-list .news .news-body .notification-text, .news-list .news .notification-body .notification-text, .news-list .notification .news-body .notification-text, .news-list .notification .notification-body .notification-text, .notifications-list .news .news-body .notification-text, .notifications-list .news .notification-body .notification-text, .notifications-list .notification .news-body .notification-text, .notifications-list .notification .notification-body .notification-text {
        width: 100%
    }

    .news-list .news .news-body .notification-type, .news-list .news .notification-body .notification-type, .news-list .notification .news-body .notification-type, .news-list .notification .notification-body .notification-type, .notifications-list .news .news-body .notification-type, .notifications-list .news .notification-body .notification-type, .notifications-list .notification .news-body .notification-type, .notifications-list .notification .notification-body .notification-type {
        color: #8c8c8c
    }

    .news-list .news .news-body .notification-description, .news-list .news .notification-body .notification-description, .news-list .notification .news-body .notification-description, .news-list .notification .notification-body .notification-description, .notifications-list .news .news-body .notification-description, .notifications-list .news .notification-body .notification-description, .notifications-list .notification .news-body .notification-description, .notifications-list .notification .notification-body .notification-description {
        display: inline
    }

    .news-list .news .news-body .icon, .news-list .news .notification-body .icon, .news-list .notification .news-body .icon, .news-list .notification .notification-body .icon, .notifications-list .news .news-body .icon, .notifications-list .news .notification-body .icon, .notifications-list .notification .news-body .icon, .notifications-list .notification .notification-body .icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        min-width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 17px auto 0
    }

        .news-list .news .news-body .icon.danger-icon, .news-list .news .notification-body .icon.danger-icon, .news-list .notification .news-body .icon.danger-icon, .news-list .notification .notification-body .icon.danger-icon, .notifications-list .news .news-body .icon.danger-icon, .notifications-list .news .notification-body .icon.danger-icon, .notifications-list .notification .news-body .icon.danger-icon, .notifications-list .notification .notification-body .icon.danger-icon {
            background: rgba(247,184,192,.45);
            color: #d54355
        }

        .news-list .news .news-body .icon.warning-icon, .news-list .news .notification-body .icon.warning-icon, .news-list .notification .news-body .icon.warning-icon, .news-list .notification .notification-body .icon.warning-icon, .notifications-list .news .news-body .icon.warning-icon, .notifications-list .news .notification-body .icon.warning-icon, .notifications-list .notification .news-body .icon.warning-icon, .notifications-list .notification .notification-body .icon.warning-icon {
            background-color: rgba(234,212,150,.35);
            color: #c8a030
        }

        .news-list .news .news-body .icon.info-icon, .news-list .news .notification-body .icon.info-icon, .news-list .notification .news-body .icon.info-icon, .news-list .notification .notification-body .icon.info-icon, .notifications-list .news .news-body .icon.info-icon, .notifications-list .news .notification-body .icon.info-icon, .notifications-list .notification .news-body .icon.info-icon, .notifications-list .notification .notification-body .icon.info-icon {
            background-color: #e8edf6;
            color: #474788
        }

@media (max-width:767px) {
    .news-list .news .news-body .icon, .news-list .news .notification-body .icon, .news-list .notification .news-body .icon, .news-list .notification .notification-body .icon, .notifications-list .news .news-body .icon, .notifications-list .news .notification-body .icon, .notifications-list .notification .news-body .icon, .notifications-list .notification .notification-body .icon {
        margin: 0 17px auto 0
    }
}

.news-list .news .news-body .date, .news-list .news .notification-body .date, .news-list .notification .news-body .date, .news-list .notification .notification-body .date, .notifications-list .news .news-body .date, .notifications-list .news .notification-body .date, .notifications-list .notification .news-body .date, .notifications-list .notification .notification-body .date {
    font-size: 12px;
    letter-spacing: .2px;
    line-height: 17px;
    color: rgba(0,0,0,.65);
    min-width: 40px;
    margin-left: 10px;
    font-family: OpenSans-SemiBold;
    text-align: right
}

@media (max-width:767px) {
    .news-list .news .news-body, .news-list .news .notification-body, .news-list .notification .news-body, .news-list .notification .notification-body, .notifications-list .news .news-body, .notifications-list .news .notification-body, .notifications-list .notification .news-body, .notifications-list .notification .notification-body {
        padding: 10px
    }
}

.news-list .news.notification-unread .read-btn, .news-list .notification.notification-unread .read-btn, .notifications-list .news.notification-unread .read-btn, .notifications-list .notification.notification-unread .read-btn {
    background-color: #24a0e9;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.news-list .news.notification-read:hover .read-btn, .news-list .notification.notification-read:hover .read-btn, .notifications-list .news.notification-read:hover .read-btn, .notifications-list .notification.notification-read:hover .read-btn {
    background-color: #d9e1ef
}

.news-list .news.notification-read:hover .notification-body, .news-list .notification.notification-read:hover .notification-body, .notifications-list .news.notification-read:hover .notification-body, .notifications-list .notification.notification-read:hover .notification-body {
    background-color: #e8edf6;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.news-list .news .news-body, .news-list .notification .news-body, .notifications-list .news .news-body, .notifications-list .notification .news-body {
    padding-bottom: 30px;
    margin-bottom: 10px;
    border-radius: 0;
    position: relative;
    font-family: OpenSans-Regular
}

    .news-list .news .news-body:after, .news-list .notification .news-body:after, .notifications-list .news .news-body:after, .notifications-list .notification .news-body:after {
        content: "";
        display: block;
        left: 10px;
        right: 10px;
        height: 1px;
        position: absolute;
        bottom: 0;
        background-color: #cfd4dc
    }

    .news-list .news .news-body h5, .news-list .notification .news-body h5, .notifications-list .news .news-body h5, .notifications-list .notification .news-body h5 {
        font-size: 17px;
        line-height: 20px;
        font-family: OpenSans-Bold;
        margin: 0 0 10px;
        padding-right: 80px
    }

    .news-list .news .news-body .news-description, .news-list .notification .news-body .news-description, .notifications-list .news .news-body .news-description, .notifications-list .notification .news-body .news-description {
        margin-bottom: 15px
    }

    .news-list .news .news-body img, .news-list .notification .news-body img, .notifications-list .news .news-body img, .notifications-list .notification .news-body img {
        max-width: 100%
    }

@media (max-width:767px) {
    .news-list .news .news-body .notification-body, .news-list .notification .news-body .notification-body, .notifications-list .news .news-body .notification-body, .notifications-list .notification .news-body .notification-body {
        padding: 0 0 15px
    }
}

.news-list .news.news-unread .read-btn, .news-list .notification.news-unread .read-btn, .notifications-list .news.news-unread .read-btn, .notifications-list .notification.news-unread .read-btn {
    background-color: #24a0e9;
    -webkit-transition: all .4s ease-in-out;
    -khtml-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ie-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.news-list .news.news-unread .news-description, .news-list .notification.news-unread .news-description, .notifications-list .news.news-unread .news-description, .notifications-list .notification.news-unread .news-description {
    color: #000
}

    .news-list .news.news-unread .news-description b, .news-list .notification.news-unread .news-description b, .notifications-list .news.news-unread .news-description b, .notifications-list .notification.news-unread .news-description b {
        font-family: OpenSans-Bold
    }

.news-list .news.news-read .news-body .news-description, .news-list .notification.news-read .news-body .news-description, .notifications-list .news.news-read .news-body .news-description, .notifications-list .notification.news-read .news-body .news-description {
    color: #8c8c8c
}

.news-list .news.news-read:hover .read-btn, .news-list .notification.news-read:hover .read-btn, .notifications-list .news.news-read:hover .read-btn, .notifications-list .notification.news-read:hover .read-btn {
    background-color: #d9e1ef
}

.news-list .news .read-btn, .notifications-list .news .read-btn {
    margin: 25px 10px auto 0
}

.no-notification {
    color: #8c8c8c;
    font-family: OpenSans-Regular;
    padding: 10px 20px 0;
    display: block
}

.empty-row {
    width: auto;
    height: calc(100vh - 290px);
    margin: 0;
    display: flex;
    position: relative;
    flex-flow: column;
    justify-content: center;
    align-items: center
}

@media (max-width:1199px) {
    .empty-row {
        height: calc(100vh - 375px)
    }
}

@media (max-width:991px) {
    .empty-row {
        height: calc(100vh - 335px)
    }
}

@media (max-width:767px) {
    .empty-row {
        height: calc(100vh - 370px)
    }
}

.empty-row img {
    max-width: 100%;
    margin: 0 auto 45px
}

@media (max-width:1199px) {
    .empty-row img {
        max-width: 70%;
        margin: 0 auto 45px
    }
}

.empty-row h3 {
    font-family: OpenSans-SemiBold;
    margin-bottom: 30px;
    margin-top: 0
}

.empty-row p {
    margin-bottom: 0
}

.empty-row button.btn-green-default {
    margin-top: 30px
}

@media (max-width:767px) {
    .empty-row button.btn-green-default {
        padding: 7px 15px 8px;
        width: auto
    }

        .empty-row button.btn-green-default i {
            margin-right: 10px
        }

        .empty-row button.btn-green-default span {
            display: block
        }
}

table tfoot, table thead {
    position: sticky;
    z-index: 3
}

    table tfoot th:first-of-type, table thead th:first-of-type {
        position: sticky
    }

table thead {
    inset-block-start: 0
}

table tfoot {
    inset-block-end: 0
}

    table tfoot > tr > th {
        border-top: 1px solid #8ca9be
    }

.ppap-laser-content .table {
    margin-bottom: 0
}

@media (max-width:767px) {
    .pr0-xs {
        padding-right: 0 !important
    }
}

.toast, .toast-icon {
    overflow: hidden;
    margin-bottom: 18px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    font-family: OpenSans-SemiBold
}

    .toast i, .toast-icon i {
        position: absolute;
        left: 22px;
        width: 19px;
        text-align: center;
        top: 0;
        bottom: 0;
        font-size: 19px;
        height: 19px;
        border-radius: 50%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .toast h3, .toast-icon h3 {
        font-size: 17px;
        line-height: 21px;
        margin: 0;
        padding: 0;
        font-weight: 400;
        font-family: OpenSans-SemiBold
    }

    .toast p, .toast-icon p {
        line-height: 17px;
        margin-bottom: 0;
        color: rgba(0,0,0,.85);
        padding: 10px;
    }

    .toast-icon.toast-danger, .toast.toast-danger {
        background-color: #FBC6C5;
        color: #000;
        border: 1px solid #e8d6e0
    }

    .toast-icon.toast-info, .toast.toast-info {
        background-color: #C8E7F5;
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }


    .toast-icon.toast-success, .toast.toast-success {
        background-color: #C7F3D6;
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }


    .toast-icon.toast-warning, .toast.toast-warning {
        background-color: #F6EDC7;
        border-color: transparent;
        color: rgba(0,0,0,.85)
    }


    .toast em, .toast-icon em {
        font-style: italic;
        font-family: OpenSans-Bold
    }

.toast-icon {
    padding: 13px 20px 12px 55px
}

.toast {
    padding: 13px 20px 12px 31px
}

@media (max-width:1199px) {
    .toast {
        top: 25px
    }

    .toast-icon {
        top: 25px;
    }

        .toast-icon-icon.toast-icon-danger, .toast-icon.toast-icon-danger {
            top: 25px;
        }
}

.eye-image {
}


::-ms-reveal {
    display: none;
}
.like-anchor {
    align-items: normal;
    border-color: rgb(0, 0, 238);
    border-style: none;
    box-sizing: content-box;
    color: #0467b2;
    font-family: OpenSans-SemiBold !important;
    cursor: pointer;
    display: inline;
    font: inherit;
    height: auto;
    padding: 0;
    perspective-origin: 0 0;
    text-align: start;
    text-decoration: underline;
    transform-origin: 0 0;
    width: auto;
    outline: 1 solid red;
    -moz-appearance: none;
    -webkit-logical-height: 1em;
    -webkit-logical-width: auto;
    background-color: transparent;
    text-decoration: none;
}

    .like-anchor:hover {
        text-decoration: underline;
    }

@supports (-moz-appearance:none) {
    .like-anchor::-moz-focus-inner {
        border: none;
        padding: 0;
    }

    .like-anchor:focus {
        outline-style: dotted;
        outline-width: 1px;
    }
}

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

.input-validation-error {
    border: 1px solid #ce3e50 !important;
}