/* Minification failed. Returning unminified contents.
(173,43): run-time error CSS1046: Expect comma, found '255'
(173,51): run-time error CSS1046: Expect comma, found '/'
(935,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(936,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(937,29): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(938,27): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(4401,41): run-time error CSS1046: Expect comma, found '38'
(4401,47): run-time error CSS1046: Expect comma, found '/'
 */

html, body, form {
    height: 100%;
}

.pagelist-body, .pagelist-from {
    height: 100%;
}

.ps-pagelist-nav-bar {
    width: 100%;
    z-index: 100; /*กำหนดเป็น 100 เพราะ dialog เป็น 101 */
    position: fixed;
    top: 0;
    left: 0;
}

.pagelist-navbar-top {
    display: block;
    z-index: 3;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
}

    .pagelist-navbar-top a[href$='SkipLink'] {
        display: none;
    }

    .pagelist-navbar-top .menu-file {
        float: left;
    }

    .pagelist-navbar-top .menu-lang {
        float: right;
        margin-right: 10px;
    }

    .pagelist-navbar-top .menu-theme {
        float: right;
    }

.pagelist-body .pagelist-navbar-top {
    position: fixed;
    width: 100%;
    z-index: 1020;
}

@media(max-width: 767px) {
    .pagelist-body .pagelist-navbar-top > .navbar-collapse {
        max-height: 400px;
        overflow: auto;
    }
}

.pagelist-navbar-top .navbar-brand {
    font-size: 16px;
}

.pagelist-body.no-youareat .ps-pagelist-nav-bar > .toolbar-container {
    display: none;
}

.pagelist-body.no-youareat .pagelist-main-container {
    padding-top: 59px;
}

#navtools li[data-keyvalue=Print] {
    display: none;
}


@media (min-width:768px) {
    .pagelist-navbar-top {
        padding-left: 8px;
        padding-right: 0;
    }

    #navtools li[data-keyvalue=Print] {
        display: block;
    }

    #navtools.navbar-collapse {
        padding-right: 0;
    }
}

#navtools > ul > li[data-keyvalue="HappyBirthday"] > a {
    cursor: default !important;
}

    #navtools > ul > li[data-keyvalue="HappyBirthday"] > a:focus,
    #navtools > ul > li[data-keyvalue="HappyBirthday"] > a:hover {
        background-color: transparent;
    }

    #navtools > ul > li[data-keyvalue="HappyBirthday"] > a > .menu-text {
        display: inline-block;
        margin-left: 4px;
    }


#navmentions > ul > li > a > i:first-child {
    font-size: 15px;
}

@media (min-width:540px) and (max-width:768px) {


    #navtools > ul > li[data-keyvalue="HappyBirthday"] > a {
        cursor: default !important;
    }

        #navtools > ul > li[data-keyvalue="HappyBirthday"] > a:focus,
        #navtools > ul > li[data-keyvalue="HappyBirthday"] > a:hover {
            background-color: transparent;
        }

        #navtools > ul > li[data-keyvalue="HappyBirthday"] > a > .menu-text {
            display: inline-block;
            margin-left: 4px;
        }
}

@media (max-width: 539px) {
    #navtools > ul > li {
        border-right: none;
    }
}

@media (min-width: 768px) {
    /*
    .pagelist-navbar-top .navbar-nav {
        float: left;
        margin: 0;
    }*/

    pagelist-navbar-top .navbar-nav > li {
        float: left;
        margin-right: 5px;
    }

    .pagelist-navbar-top .navbar-nav > li > a {
        padding-top: 5px;
        padding-bottom: 4px;
    }

    .pagelist-body .pagelist-navbar-top {
        height: 50px;
    }

        .pagelist-body .pagelist-navbar-top .navbar-nav > li > a {
            padding: 1rem .5rem;
        }

        .pagelist-body .pagelist-navbar-top .logon-user-image {
            padding: 5px !important;
            background-color: transparent;
        }

        .pagelist-body .pagelist-navbar-top .logon-user-name {
            padding: 0.625rem .25rem !important;
        }

        .pagelist-body .pagelist-navbar-top .navbar-nav > li > a {
            background-color: transparent;
        }

            .pagelist-body .pagelist-navbar-top .navbar-nav > li > a:hover,
            .pagelist-body .pagelist-navbar-top .navbar-nav > li > a:active,
            .pagelist-body .pagelist-navbar-top .navbar-nav > li > a:focus {
                background-color: rgb(255 255 255 / 10%);
                border-radius: 8px;
                color: white;
            }

    /* Let's get this party started */
    .navbar-nav .last-submenu > ul::-webkit-scrollbar {
        width: 6px;
    }

    /* Track */
    .navbar-nav .last-submenu > ul::-webkit-scrollbar-track {
        background-color: #E7E7E7;
    }

    /* Handle */
    .navbar-nav .last-submenu > ul::-webkit-scrollbar-thumb {
        background: #a0a0a4;
    }

        .navbar-nav .last-submenu > ul::-webkit-scrollbar-thumb:window-inactive {
            background: #e5e5e5;
        }
}

@media (min-width:768px) {
    .navbar-nav .open .dropdown-menu {
        position: absolute;
        float: left;
        width: auto;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    }

    .navbar-nav .last-submenu > ul:last-child {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 200px
    }
}

@media (min-width:541px) and (max-width:768px) {
    #navtools.navbar-collapse.collapse {
        z-index: 1;
        position: absolute;
        top: 100%;
        right: 0px;
        padding-right: 0px;
    }

    .pagelist-body .pagelist-navbar-top #navtools .navbar-nav > li > a {
        padding-top: 9px;
        padding-bottom: 10px;
    }

    .pagelist-body .pagelist-navbar-top #navtools .navbar-nav .dropdown-menu {
        left: auto;
        right: 0;
    }

        .pagelist-body .pagelist-navbar-top #navtools .navbar-nav .dropdown-menu.dropdown-caret:before,
        .pagelist-body .pagelist-navbar-top #navtools .navbar-nav .dropdown-menu.dropdown-caret:before {
            left: auto;
            right: 9px;
        }

        .pagelist-body .pagelist-navbar-top #navtools .navbar-nav .dropdown-menu.dropdown-caret:after,
        .pagelist-body .pagelist-navbar-top #navtools .navbar-nav .dropdown-menu.dropdown-caret:after {
            left: auto;
            right: 10px;
        }

    .user-info-position {
        z-index: 2;
    }

        .user-info-position > .current-position[data-toggle=dropdown] {
            padding-bottom: 8px;
        }
}

.menu-theme {
    display: none;
}

.pagelist-navbar-top nav > .navbar-nav > li.open {
    border-color: rgba(255, 255, 255, .11);
}

.pagelist-navbar-top nav > .nav > li > a:hover,
.pagelist-navbar-top nav > .nav > li > a:focus {
    background-color: rgba(255, 255, 255, .11);
}

.pagelist-navbar-top nav > .nav > .open > a,
.pagelist-navbar-top nav > .nav > .open > a:hover,
.pagelist-navbar-top nav > .nav > .open > a:focus {
    background-color: rgba(255, 255, 255, .11);
}

.pagelist-navbar-top .navbar-nav > li > a {
    font-size: 12px;
    color: #fff;
}

    .pagelist-navbar-top .navbar-nav > li > a > .fa:first-child {
        text-align: center;
        padding: 0;
        font-size: 13px;
        vertical-align: middle;
        margin-right: .25rem;
        width: 16px;
    }

    .pagelist-navbar-top .navbar-nav > li > a .menu-text {
        vertical-align: middle;
    }

.pagelist-navbar-top .menu-signout {
    float: right;
}

.pagelist-navbar-top .navbar-nav > li > a > .fa:first-child,
.pagelist-navbar-top .navbar-nav > li > a > img:first-child {
    margin-right: 8px !important;
    width: 16px;
    height: 16px;
}

@media(max-width: 767px) {
    .pagelist-navbar-top nav > .nav > li > a {
        background-color: transparent;
    }

        .pagelist-navbar-top nav > .nav > li > a:hover,
        .pagelist-navbar-top nav > .nav > li > a:focus {
            background-color: rgba(255,255,255,50%);
        }

    .pagelist-navbar-top nav > .nav > .open > a,
    .pagelist-navbar-top nav > .nav > .open > a:hover,
    .pagelist-navbar-top nav > .nav > .open > a:focus {
        background-color: #f1f5f9;
    }
}

.TopMenuItemStyle a {
    color: #fff !important;
}

.SubMenuItemStyle a {
    color: #000 !important;
}

.pagelist-navbar-title {
    display: block;
    height: 34px;
    min-height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #fff;
    z-index: 2;
    top: 40px;
    width: 100%;
}

    .pagelist-navbar-title .title-left {
        display: block;
        height: 34px;
        /*padding-left: 17px;*/
        line-height: 34px;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        float: left;
    }

        .pagelist-navbar-title .title-left .tooltip {
            white-space: normal;
        }

    .pagelist-navbar-title .title-right {
        height: 34px;
        font-size: 13px !important;
        float: right;
        padding-right: 10px;
        padding-left: 10px;
    }

.toolbar-container {
    display: block;
    /*margin-top: 34px;*/
}

.toolbar-inner-container {
    display: block;
}

.pagelist-navbar-toolbar {
    display: block;
    color: #555;
}

    .pagelist-navbar-toolbar .toolbar-position {
        float: left;
        display: block;
        vertical-align: baseline;
        /* Dont need this toolbar in 2018 design*/
        display: none !important;
    }

        .pagelist-navbar-toolbar .toolbar-position > * {
            line-height: 20px;
            vertical-align: baseline;
        }

        .pagelist-navbar-toolbar .toolbar-position span, .pagelist-navbar-toolbar .toolbar-position select {
            margin-left: 5px;
            padding-top: 0;
            padding-bottom: 0;
        }

.current-position {
    position: relative;
    display: block;
    width: 100%;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caption-current-position {
    display: table-cell;
    width: 100px;
}

.dropdown-current-position {
    display: table-cell;
}

    .dropdown-current-position select {
        width: 100%;
    }

.pagelist-main-container {
    padding-top: 50px;
    padding-bottom: 56px;
}

/*------------------------------------------------------------------*/


.toolbar-position {
    width: 40%;
    line-height: 10px;
}

.current-position-container {
    display: table-row;
    line-height: 10px;
}

@media (max-width: 757px) {
    .pagelist-navbar-title {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: calc(100% - 76px);
        background-color: transparent !important;
        overflow: hidden;
        white-space: nowrap;
    }

        .pagelist-navbar-title .title-left {
            line-height: 36px;
            width: 100%;
            height: 100%;
        }

        .pagelist-navbar-title .title-right {
            display: inline;
            line-height: 0;
            height: 100%;
        }

    .pagelist-navbar-top {
        /*position: absolute;*/
        z-index: 1;
        width: 100%;
    }

    /*    .pagelist-navbar-top,
    .pagelist-body .pagelist-navbar-top {
        padding: 0;
    }
*/
    .toolbar-container {
        margin-top: 0;
    }

    .navbar-menu {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        /*background-color: #fafafa;*/
        border-top: none;
        /*max-height: 240px;*/
    }

        .navbar-menu > .navbar-nav {
            margin: 0;
        }

            .navbar-menu > .navbar-nav > li > a {
                /*color: #585858;*/
                background-color: #223941;
                color: white;
            }


            .navbar-menu > .navbar-nav > li > .dropdown-menu li {
                border-width: 1px 0 0;
                border-style: dotted;
                border-color: #e5e5e5;
            }

                .navbar-menu > .navbar-nav > li > .dropdown-menu li:first-of-type {
                    border: none;
                }

                .navbar-menu > .navbar-nav > li > .dropdown-menu li.divider {
                    border: none !important;
                }

                    .navbar-menu > .navbar-nav > li > .dropdown-menu li.divider + li {
                        border: none;
                    }

                .navbar-menu > .navbar-nav > li > .dropdown-menu li > a {
                    padding: 10px 15px;
                    margin: 0;
                }

        .navbar-menu .dropdown-menu > li.dropdown-submenu > ul.dropdown-menu > li > a {
            padding-left: 30px;
        }

        .navbar-menu .dropdown-menu > li.dropdown-submenu > ul.dropdown-menu > li.dropdown-submenu > ul.dropdown-menu > li > a {
            padding-left: 45px;
        }

    .navbar-nav .open .dropdown-menu {
        /*background-color: #fff;*/
        padding: 0;
    }

    /*    .navbar-menu .caret {
        float: right;
        margin-top: 12px;
        border-top: 6px solid transparent;
        border-right: none;
        border-bottom: 6px solid transparent;
        border-left: 6px dashed;
    }*/

    .navbar-menu li.open > a > .caret {
        border-top: 6px dashed;
        border-right: 6px solid transparent;
        border-bottom: none;
        border-left: 6px solid transparent;
    }

    .dropdown-menu.dropdown-caret:before,
    .dropdown-menu.dropdown-caret:after {
        display: none !important;
    }

    #navtools {
        border-top: 2px solid #e5e5e5;
        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1) !important;
        box-shadow: 0 2px 2px rgba(0,0,0,.1) !important;
    }
}


@media (max-width: 767px) {
    .pagelist-body.no-youareat .ps-pagelist-nav-bar {
        min-height: 59px;
    }

    .ps-pagelist-nav-bar {
        position: fixed;
        top: 0;
        min-height: 36px;
    }

    .pagelist-navbar-toolbar .toolbar-position {
        float: none;
        display: block;
        width: 100%;
        white-space: normal;
    }


    .current-position-container {
        line-height: 40px;
    }

    .pagelist-navbar-toolbar {
        line-height: normal;
    }

    .toolbar-position.toolbar-position {
        line-height: 40px;
    }
}

@media (min-width: 480px) {
    .dropdown-current-position select {
        max-width: 180px;
    }
}

.pagelist-main-container:before {
    display: block;
    content: "";
    position: absolute;
    z-index: -2;
    width: 100%;
    max-width: inherit;
    bottom: 0;
    top: 0;
}

.pagelist-main-container.container {
    padding-left: 0;
    padding-right: 0;
}

.pagelist-main-container .pagelist-page-content {
    position: relative;
    margin: 0;
    padding: 1rem;
}

/* begin AjaxStyle.css */
.watermarked {
    border: 1px solid #7B9EBD;
    font-size: 11px;
    color: gray;
    padding: 2px 0 0 2px;
    background-color: #FFFFCC;
    width: 100%;
}

.popupExtender {
    background-color: #DCDFE5;
    position: absolute;
    visibility: hidden;
    border: 1px dashed Black;
}

/* end AjaxStyle.css */

/* GridView.css */
.GridViewDataMappingResult {
    border-color: #CDD4E3;
    font-size: 11px;
    background-color: #FFFFFF;
    overflow: scroll;
}

table.GridViewDataMappingResult {
    font-size: small;
    border: solid 1px #000000;
    color: #000000;
    width: 90%;
    table-layout: auto;
    margin: 0;
}

.GridViewDataMappingResult td {
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    padding: 3px 8px;
    vertical-align: middle;
    text-align: left;
    cursor: default;
    border-bottom: solid 1px #d0d0d0;
    background-color: #FFFFFF;
}

.GridViewDataMappingResult th {
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-align: left;
    text-decoration: none;
    vertical-align: top;
    border-right: solid 1px #a0a0a4;
    border-bottom: solid 1px #a0a0a4;
    background-color: #E0E3E8;
    height: 20px;
}

.GridViewDataMappingResultHeaderStyle {
    white-space: normal;
    font-size: 11px;
    background-color: #E0E3E8;
    text-decoration: none;
    color: #000000;
    border: solid 1px #a0a0a4;
    font-weight: normal;
}

.GridViewDataMappingResultRowStyle {
    background-color: #FFFFFF;
    font-size: 11px;
    border-bottom: solid 1px #A0A0A4;
}

/* end GridView.css */

/* Progress.css */

.system-progress {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

    .system-progress > .modal-dialog {
        min-width: 250px;
    }

    .system-progress .modal-body {
        padding: 30px 15px;
    }

    .system-progress .modal-content {
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .system-progress .modal-dialog-center { /* Edited classname 10/03/2014 */
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
    }

/*Hack for ie 8 only*/
@media \0screen {
    .modal-dialog {
        width: 300px;
        margin: 30px auto;
    }
}



.progress-icon {
    display: inline-block;
    width: 30px;
}

.progress-label {
    display: inline-block;
}

.report-progress-container {
    padding-top: 100px;
    text-align: center;
}

.report-progress {
    font-size: 3em;
}

    .report-progress .loading {
        font-size: 0.8em;
        margin-top: 15px;
    }

/* end Progress.css */

.c-SizerBar {
    opacity: 0;
    background: #888;
    position: absolute;
    bottom: 0;
    z-index: 3;
}

    .c-SizerBar.sizerBarX {
        width: 100%;
        height: 3px;
        cursor: row-resize;
    }

    .c-SizerBar.sizerBarY {
        top: 0;
        height: 100%;
        width: 3px;
        cursor: col-resize;
    }

        .c-SizerBar.sizerBarY.masterSizerBar {
            width: 3px;
        }

.SizerBarActive {
    opacity: 1;
}

/*----------------------- Sub-Menu -----------------------*/

.marginBottom-0 {
    margin-bottom: 0;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

.dropdown-menu-right .dropdown-submenu > .dropdown-menu {
    left: auto;
    right: 100%;
    width: 200px;
}

@media(max-width: 767px) {
    .dropdown-menu-right .dropdown-submenu > .dropdown-menu {
        width: 100%;
    }
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}

.dropdown-menu-right .dropdown-submenu > a:after {
    float: left;
    border-width: 5px 5px 5px 0px;
    border-right-color: #cccccc;
}

.dropdown-submenu.pull-left {
    float: none;
}

    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }

@media (max-width:540px) {
    .navbar-menu .dropdown-submenu > a:after {
        margin-top: 12px;
        border-width: 6px 0 6px 6px;
        margin-right: 0 !important;
    }

    .navbar-menu .dropdown-submenu.open > a:after {
        border-width: 6px 6px 0 6px;
        border-top-color: #cccccc;
        border-left-color: transparent;
        margin-right: 0 !important;
    }

    .dropdown-submenu.open:hover > a:after {
        border-left-color: transparent;
        border-top-color: #555;
    }
}

li[data-keyvalue='mnuFile'] li[data-keyvalue='mnuPrint'] {
    display: none;
}

.navbar-nav > li > a.logon-user-image {
    padding: 0.3125rem 0.625rem;
}

    .navbar-nav > li > a.logon-user-image > .avatar {
        height: 2.5rem;
        width: 2.5rem;
    }

.navbar-nav > li > a.logon-user-name {
    padding: 0.5625rem 0.625rem;
}

#menuleft.navbar-toggle {
    position: relative;
    float: left;
    border: 1px solid transparent;
    background-color: transparent;
    background-image: none;
    height: 100%;
    position: relative;
    margin: 0;
    border-radius: .325rem;
    margin: .5rem 0;
}

    #menuleft.navbar-toggle:hover {
        background-color: rgba(255,255,255,.11);
    }

.avatar.navbar-toggle {
    padding: 0;
    margin: 5px 10px;
    border: none;
}

/* Right card menu */

.card-right-menu > .row {
    display: flex !important;
    flex-wrap: wrap;
    --bs-gutter-x: 0;
    margin-left: calc(var(--bs-gutter-x)/-2);
    margin-right: calc(var(--bs-gutter-x)/-2);
    margin-top: calc(var(--bs-gutter-y)*-1);
}

    .card-right-menu > .row > * {
        flex: 0 0 auto;
    }

.card-right-menu .card-avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.33333rem;
}

.card-right-menu .card {
    transition: 0.2s;
    cursor: pointer;
}

.card-right-menu:not(.card-right-menu-sunmenu) .card:hover {
    background-color: #d9705d;
}

    .card-right-menu:not(.card-right-menu-sunmenu) .card:hover .card-title,
    .card-right-menu:not(.card-right-menu-sunmenu) .card:hover .card-text {
        color: white !important;
    }

.searchtag-input {
    border-left: 0;
    border-collapse: collapse !important;
}
.searchtag-input-group {
    display: table;
   
}

.searchtag-input-search {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;

    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


.searchtag-button-search {
    /* padding: 0.5rem 0.75rem; */
    font-size: 12px;
    /* font-weight: 400; */
    line-height: 1;
    color: #12263f;
    text-align: center;
    background-color: #ffffff;
    /* border: 1px solid #d2ddec; */
    border-radius: 0.375rem;
    padding: 0px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}


/*------------------------- Element box -------------*/

.element-box-container .element-box {
    margin-bottom: 10px;
}

    .element-box-container .element-box:last-of-type {
        margin-bottom: 0;
    }

.element-box {
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC;
    border-radius: .5rem;
}

.element-header {
    position: relative;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    min-height: 38px;
    border-bottom: 1px solid #DDD;
    padding-left: 12px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

    .element-header[aria-expanded="false"] {
        border-radius: .5rem;
    }

.element-no-header .element-header {
    display: none;
}

.element-header-small {
    min-height: 31px;
    padding-left: 10px;
}

    .element-header-small > .element-title {
        line-height: 30px;
        font-size: 12px !important;
    }

        .element-header-small > .element-title > .fa:first-child {
            font-size: 16px;
            margin-right: 4px;
        }

.element-header[data-toggle=collapse] {
    cursor: pointer;
    padding-right: 42px;
}

    .element-header[data-toggle=collapse]:after {
        display: inline-block;
        font-family: "Font Awesome 5 Pro";
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #555;
        margin-right: 3px;
        position: absolute;
        right: 12px;
        top: 12px;
    }

    .element-header[data-toggle=collapse][aria-expanded=false]:after {
        content: "\f078";
    }

    .element-header[data-toggle=collapse][aria-expanded=true]:after {
        content: "\f077";
    }

.element-box[class*=element-color-] > .element-header[data-toggle=collapse]:after {
    color: #fff;
}

.element-title {
    line-height: 36px;
    display: inline;
    padding: 0;
    margin: 0;
    font-size: 17px;
    color: #478fca;
}

.element-body {
    padding: 12px;
}

.member.member-2 .user {
    padding: 13px 8px 8px 15px;
}

    .member.member-2 .user > img,
    .member.member-2 .user > .avatar {
        top: 8px;
        left: 5px;
        height: 55px;
        width: 55px;
    }

    .member.member-2 .user > .avatar {
        position: absolute;
    }

.member.member-2 .user-profile {
    padding-left: 54px;
}

.element-color-white {
    border-color: white;
}

    .element-color-white > .element-header {
        background: #307ecc;
        border-color: #307ecc;
    }

        .element-color-white > .element-header > .element-title {
            color: #fff;
        }

.element-color-blue {
    border-color: #307ecc;
}

    .element-color-blue > .element-header {
        background: #307ecc;
        border-color: #307ecc;
    }

        .element-color-blue > .element-header > .element-title {
            color: #fff;
        }

.element-color-blue2 {
    border-color: #5090c1;
}

    .element-color-blue2 > .element-header {
        background: #5090c1;
        border-color: #5090c1;
    }

        .element-color-blue2 > .element-header > .element-title {
            color: #fff;
        }

.element-color-blue3 {
    border-color: #6379aa;
}

    .element-color-blue3 > .element-header {
        background: #6379aa;
        border-color: #6379aa;
    }

        .element-color-blue3 > .element-header > .element-title {
            color: #fff;
        }

.element-color-blue-rc {
    border-color: #307ECC;
}

    .element-color-blue-rc > .element-header {
        background: #307ECC;
        border-color: #307ECC;
    }

        .element-color-blue-rc > .element-header > .element-title {
            color: #fff;
        }



.element-color-green {
    border-color: #82af6f;
}

    .element-color-green > .element-header {
        background: #82af6f;
        border-color: #82af6f;
    }

        .element-color-green > .element-header > .element-title {
            color: #fff;
        }

.element-color-green2 {
    border-color: #2e8965;
}

    .element-color-green2 > .element-header {
        background: #2e8965;
        border-color: #2e8965;
    }

        .element-color-green2 > .element-header > .element-title {
            color: #fff;
        }

.element-color-green3 {
    border-color: #4ebc30;
}

    .element-color-green3 > .element-header {
        background: #4ebc30;
        border-color: #4ebc30;
    }

        .element-color-green3 > .element-header > .element-title {
            color: #fff;
        }

.element-color-green-rc {
    border-color: #6ab43e;
}

    .element-color-green-rc > .element-header {
        background: #6ab43e;
        border-color: #6ab43e;
    }

        .element-color-green-rc > .element-header > .element-title {
            color: #fff;
        }

.element-color-red {
    border-color: #e2755f;
}

    .element-color-red > .element-header {
        background: #e2755f;
        border-color: #e2755f;
    }

        .element-color-red > .element-header > .element-title {
            color: #fff;
        }

.element-color-red2 {
    border-color: #e04141;
}

    .element-color-red2 > .element-header {
        background: #e04141;
        border-color: #e04141;
    }

        .element-color-red2 > .element-header > .element-title {
            color: #fff;
        }

.element-color-red3 {
    border-color: #d15b47;
}

    .element-color-red3 > .element-header {
        background: #d15b47;
        border-color: #d15b47;
    }

        .element-color-red3 > .element-header > .element-title {
            color: #fff;
        }

.element-color-purple {
    border-color: #7e6eb0;
}

    .element-color-purple > .element-header {
        background: #7e6eb0;
        border-color: #7e6eb0;
    }

        .element-color-purple > .element-header > .element-title {
            color: #fff;
        }

.element-color-pink {
    border-color: #ce6f9e;
}

    .element-color-pink > .element-header {
        background: #ce6f9e;
        border-color: #ce6f9e;
    }

        .element-color-pink > .element-header > .element-title {
            color: #fff;
        }

.element-color-pink-rc {
    border-color: #f8bbd0;
}

    .element-color-pink-rc > .element-header {
        background: #f8bbd0;
        border-color: #f8bbd0;
    }

        .element-color-pink-rc > .element-header > .element-title {
            color: #fff;
        }

.element-color-orange {
    border-color: #e8b10d;
}

    .element-color-orange > .element-header {
        color: #855d10 !important;
        border-color: #e8b10d;
        background: #ffc657;
    }

        .element-color-orange > .element-header > .element-title {
            color: #fff;
        }

.element-color-dark {
    border-color: #5a5a5a;
}

    .element-color-dark > .element-header {
        border-color: #666;
        background: #404040;
    }

        .element-color-dark > .element-header > .element-title {
            color: #fff;
        }

.element-color-dark-rc {
    border-color: #1f1f1f;
}

    .element-color-dark-rc > .element-header {
        border-color: #666;
        background: #1f1f1f;
    }

        .element-color-dark-rc > .element-header > .element-title {
            color: #fff;
        }

.element-color-grey {
    border-color: #9e9e9e;
}

    .element-color-grey > .element-header {
        border-color: #aaa;
        background: #848484;
    }

        .element-color-grey > .element-header > .element-title {
            color: #fff;
        }

.element-color-grey2 {
    border-color: #eee;
}

    .element-color-grey2 > .element-header {
        border-color: #ccc;
        background: #eee;
    }

        .element-color-grey2 > .element-header > .element-title {
            color: #333;
        }

.element-box.transparent {
    border-width: 0;
}

    .element-box.transparent > .element-header {
        background: 0 0;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        border-width: 0;
        border-bottom: 1px solid #DCE8F1;
        color: #4383B4;
        padding-left: 3px;
    }

    .element-box.transparent > .element-header-large {
        padding-left: 5px;
    }

    .element-box.transparent > .element-header-small {
        padding-left: 1px;
    }

    .element-box.transparent > .element-body {
        border-width: 0;
        background-color: transparent;
    }

.element-box[class*=widget-color-] > .element-header {
    color: #FFF;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.element-box.element-box-form-normal .element-body {
    padding: 1px;
}

    .element-box.element-box-form-normal .element-body .form-normal {
        margin: 0;
        width: 100%;
        border: none;
    }

/*--------------*/
.box-color-white {
    background: #307ecc;
    border-color: #307ecc;
}

.box-color-blue {
    background: #307ecc;
    border-color: #307ecc;
}

.box-color-blue2 {
    background: #5090c1;
    border-color: #5090c1;
}

.box-color-blue3 {
    background: #6379aa;
    border-color: #6379aa;
}


.box-color-blue-rc {
    background: #307ECC;
    border-color: #307ECC;
}

.box-color-green {
    background: #82af6f;
    border-color: #82af6f;
}

.box-color-green2 {
    background: #2e8965;
    border-color: #2e8965;
}

.box-color-green3 {
    background: #4ebc30;
    border-color: #4ebc30;
}

.box-color-green-rc {
    background: #6ab43e;
    border-color: #6ab43e;
}

.box-color-red {
    background: #e2755f;
    border-color: #e2755f;
}

.box-color-red2 {
    background: #e04141;
    border-color: #e04141;
}

.box-color-red3 {
    background: #d15b47;
    border-color: #d15b47;
}

.box-color-purple {
    background: #7e6eb0;
    border-color: #7e6eb0;
}

.box-color-pink {
    background: #ce6f9e;
    border-color: #ce6f9e;
}

.box-color-pink-rc {
    background: #f8bbd0;
    border-color: #f8bbd0;
}

.box-color-orange {
    border-color: #ffc657;
    background: #ffc657;
}

.box-color-dark {
    border-color: #404040;
    background: #404040;
}

.box-color-dark-rc {
    border-color: #1f1f1f;
    background: #1f1f1f;
}

.box-color-grey {
    border-color: #aaa;
    background: #848484;
}

.box-color-grey2 {
    border-color: #eee;
    background: #eee;
}

/*-------------------------------- Header -----------------------------------*/
.header {
    line-height: 28px;
    margin-bottom: 8px;
    margin-top: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCC;
}

    .header.blue {
        border-bottom-color: #d5e3ef;
    }

    .header.green {
        border-bottom-color: #cce2c1;
    }

    .header.purple {
        border-bottom-color: #e0d1ea;
    }

    .header.orange {
        border-bottom-color: #fdd0ac;
    }

    .header.orange2 {
        border-bottom-color: #fbd36b;
    }

    .header.red {
        border-bottom-color: #f3cdc6;
    }

    .header.grey {
        border-bottom-color: #c3c3c3;
    }

    .header.pink {
        border-bottom-color: #f2e0eb;
    }

    .header.pink2 {
        border-bottom-color: #e69eb9;
    }

    .header.light-blue {
        border-bottom-color: #dceefc;
    }

    .header.light-red {
        border-bottom-color: #fec5c5;
    }

    .header.light-green {
        border-bottom-color: #d2e7b5;
    }

    .header.brown {
        border-bottom-color: #df9393;
    }

    .header > i {
        margin-right: 8px;
    }

.element-box .header {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-bottom: 0;
}

.control-group {
    padding: 0;
    margin: 0px;
}

    .control-group + .control-group {
        margin-top: 10px;
    }

    .control-group p + p {
        margin-top: 10px;
    }

/*---------------- Button -----------------*/

.btn[class*=btn-outline-] {
    background-color: transparent;
}

.btn-outline-primary {
    border-color: #2c7be5;
    color: #2c7be5
}

    .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
        box-shadow: 0 0 0 .15rem rgba(44,123,229,.5);
        color: #2c7be5;
    }

    .btn-outline-primary:hover {
        background-color: #2c7be5;
        border-color: #2c7be5;
        color: #fff
    }

    .btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
        background-color: #2c7be5;
        border-color: #2c7be5;
        color: #fff
    }

        .btn-check:active + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
            box-shadow: 0 0 0 .15rem rgba(44,123,229,.5)
        }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        background-color: transparent;
        color: #2c7be5
    }

.btn-outline-secondary {
    border-color: #6e84a3;
    color: #6e84a3
}

    .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
        box-shadow: 0 0 0 .15rem rgba(110,132,163,.5);
        color: #6e84a3;
    }

    .btn-outline-secondary:hover {
        background-color: #6e84a3;
        border-color: #6e84a3;
        color: #fff
    }

    .btn-check:active + .btn-outline-secondary, .btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
        background-color: #6e84a3;
        border-color: #6e84a3;
        color: #fff
    }

        .btn-check:active + .btn-outline-secondary:focus, .btn-check:checked + .btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active:focus {
            box-shadow: 0 0 0 .15rem rgba(110,132,163,.5)
        }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        background-color: transparent;
        color: #6e84a3
    }

.btn-outline-success {
    border-color: #00d97e;
    color: #00d97e
}

    .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
        box-shadow: 0 0 0 .15rem rgba(0,217,126,.5);
        color: #00d97e;
    }

    .btn-outline-success:hover {
        background-color: #00d97e;
        border-color: #00d97e;
        color: #fff
    }

    .btn-check:active + .btn-outline-success, .btn-check:checked + .btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active {
        background-color: #00d97e;
        border-color: #00d97e;
        color: #fff
    }

        .btn-check:active + .btn-outline-success:focus, .btn-check:checked + .btn-outline-success:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus, .btn-outline-success:active:focus {
            box-shadow: 0 0 0 .15rem rgba(0,217,126,.5)
        }

    .btn-outline-success.disabled, .btn-outline-success:disabled {
        background-color: transparent;
        color: #00d97e
    }

.btn-outline-info {
    border-color: #39afd1;
    color: #39afd1
}

    .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
        box-shadow: 0 0 0 .15rem rgba(57,175,209,.5);
        color: #39afd1;
    }

    .btn-outline-info:hover {
        background-color: #39afd1;
        border-color: #39afd1;
        color: #fff
    }

    .btn-check:active + .btn-outline-info, .btn-check:checked + .btn-outline-info, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show, .btn-outline-info:active {
        background-color: #39afd1;
        border-color: #39afd1;
        color: #fff
    }

        .btn-check:active + .btn-outline-info:focus, .btn-check:checked + .btn-outline-info:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus, .btn-outline-info:active:focus {
            box-shadow: 0 0 0 .15rem rgba(57,175,209,.5)
        }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        background-color: transparent;
        color: #39afd1
    }

.btn-outline-warning {
    border-color: #f6c343;
    color: #f6c343
}

    .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
        box-shadow: 0 0 0 .15rem rgba(246,195,67,.5);
        color: #f6c343;
    }

    .btn-outline-warning:hover {
        background-color: #f6c343;
        border-color: #f6c343;
        color: #283e59
    }

    .btn-check:active + .btn-outline-warning, .btn-check:checked + .btn-outline-warning, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show, .btn-outline-warning:active {
        background-color: #f6c343;
        border-color: #f6c343;
        color: #283e59
    }

        .btn-check:active + .btn-outline-warning:focus, .btn-check:checked + .btn-outline-warning:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus, .btn-outline-warning:active:focus {
            box-shadow: 0 0 0 .15rem rgba(246,195,67,.5)
        }

    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
        background-color: transparent;
        color: #f6c343
    }

.btn-outline-danger {
    border-color: #e63757;
    color: #e63757
}

    .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
        box-shadow: 0 0 0 .15rem rgba(230,55,87,.5);
        color: #e63757;
    }

    .btn-outline-danger:hover {
        background-color: #e63757;
        border-color: #e63757;
        color: #fff
    }

    .btn-check:active + .btn-outline-danger, .btn-check:checked + .btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:active {
        background-color: #e63757;
        border-color: #e63757;
        color: #fff
    }

        .btn-check:active + .btn-outline-danger:focus, .btn-check:checked + .btn-outline-danger:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus, .btn-outline-danger:active:focus {
            box-shadow: 0 0 0 .15rem rgba(230,55,87,.5)
        }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        background-color: transparent;
        color: #e63757
    }

.btn-outline-light {
    border-color: #edf2f9;
    color: #edf2f9
}

    .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
        box-shadow: 0 0 0 .15rem rgba(237,242,249,.5);
        color: #edf2f9;
    }

    .btn-outline-light:hover {
        background-color: #edf2f9;
        border-color: #edf2f9;
        color: #283e59
    }

    .btn-check:active + .btn-outline-light, .btn-check:checked + .btn-outline-light, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show, .btn-outline-light:active {
        background-color: #edf2f9;
        border-color: #edf2f9;
        color: #283e59
    }

        .btn-check:active + .btn-outline-light:focus, .btn-check:checked + .btn-outline-light:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus, .btn-outline-light:active:focus {
            box-shadow: 0 0 0 .15rem rgba(237,242,249,.5)
        }

    .btn-outline-light.disabled, .btn-outline-light:disabled {
        background-color: transparent;
        color: #edf2f9
    }

.btn-outline-dark {
    border-color: #12263f;
    color: #12263f
}

    .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
        box-shadow: 0 0 0 .15rem rgba(18,38,63,.5);
        color: #12263f;
    }

    .btn-outline-dark:hover {
        background-color: #12263f;
        border-color: #12263f;
        color: #fff
    }

    .btn-check:active + .btn-outline-dark, .btn-check:checked + .btn-outline-dark, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show, .btn-outline-dark:active {
        background-color: #12263f;
        border-color: #12263f;
        color: #fff
    }

        .btn-check:active + .btn-outline-dark:focus, .btn-check:checked + .btn-outline-dark:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus, .btn-outline-dark:active:focus {
            box-shadow: 0 0 0 .15rem rgba(18,38,63,.5)
        }

    .btn-outline-dark.disabled, .btn-outline-dark:disabled {
        background-color: transparent;
        color: #12263f
    }

.btn-outline-white {
    border-color: #fff;
    color: #fff
}

    .btn-check:focus + .btn-outline-white, .btn-outline-white:focus {
        box-shadow: 0 0 0 .15rem hsla(0,0%,100%,.5);
        color: #fff;
    }

    .btn-outline-white:hover {
        background-color: #fff;
        border-color: #fff;
        color: #283e59
    }

    .btn-check:active + .btn-outline-white, .btn-check:checked + .btn-outline-white, .btn-outline-white.active, .btn-outline-white.dropdown-toggle.show, .btn-outline-white:active {
        background-color: #fff;
        border-color: #fff;
        color: #283e59
    }

        .btn-check:active + .btn-outline-white:focus, .btn-check:checked + .btn-outline-white:focus, .btn-outline-white.active:focus, .btn-outline-white.dropdown-toggle.show:focus, .btn-outline-white:active:focus {
            box-shadow: 0 0 0 .15rem hsla(0,0%,100%,.5)
        }

    .btn-outline-white.disabled, .btn-outline-white:disabled {
        background-color: transparent;
        color: #fff
    }

.btn.btn-white {
    border-width: 1px;
}

.btn.btn-bold {
    border-bottom-width: 2px;
}

.btn.btn-round {
    border-bottom-width: 2px;
    border-radius: 4px !important;
}

.btn.btn-app {
    display: inline-block;
    width: 100px;
    font-size: 18px;
    font-weight: 400;
    color: #FFF;
    text-align: center;
    text-shadow: 0 -1px -1px rgba(0,0,0,.2) !important;
    border: none;
    border-radius: 12px;
    padding: 12px 0 8px;
    margin: 2px;
    line-height: 1.7;
    position: relative;
}

.btn-app, .btn-app.btn-default, .btn-app.no-hover:hover, .btn-app.btn-default.no-hover:hover, .btn-app.disabled:hover, .btn-app.btn-default.disabled:hover {
    background-position: 0% 0%;
    background-repeat: repeat-x !important;
    background-image: linear-gradient(to bottom,#bcc9d5 0,#abbac3 100%) !important;
    background-color: #b4c2cc !important;
    background-attachment: scroll !important;
}

    .btn-app:hover, .btn-app.btn-default:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#a3b5c5 0,#93a6b2 100%) !important;
        background-color: #9baebc !important;
        background-attachment: scroll !important;
    }

    .btn-app.btn-primary, .btn-app.btn-primary.no-hover:hover, .btn-app.btn-primary.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#3b98d6 0,#197ec1 100%) !important;
        background-color: #2a8bcb !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-primary:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#267eb8 0,#136194 100%) !important;
            background-color: #1d6fa6 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-info, .btn-app.btn-info.no-hover:hover, .btn-app.btn-info.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#75b5e6 0,#5ba4d5 100%) !important;
        background-color: #68adde !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-info:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#4a9ede 0,#348dc9 100%) !important;
            background-color: #3f96d4 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-success, .btn-app.btn-success.no-hover:hover, .btn-app.btn-success.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#8ebf60 0,#7daa50 100%) !important;
        background-color: #85b558 !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-success:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#74a844 0,#648740 100%) !important;
            background-color: #6c9842 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-danger, .btn-app.btn-danger.no-hover:hover, .btn-app.btn-danger.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#d55b52 0,#d12723 100%) !important;
        background-color: #d3413b !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-danger:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#c43a30 0,#a51f1c 100%) !important;
            background-color: #b52c26 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-warning, .btn-app.btn-warning.no-hover:hover, .btn-app.btn-warning.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#ffbf66 0,#ffa830 100%) !important;
        background-color: #ffb44b !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-warning:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#fa3 0,#fc9200 100%) !important;
            background-color: #fe9e19 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-purple, .btn-app.btn-purple.no-hover:hover, .btn-app.btn-purple.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#a696ce 0,#8a7cb4 100%) !important;
        background-color: #9889c1 !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-purple:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#8973be 0,#6d5ca1 100%) !important;
            background-color: #7b68af !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-pink, .btn-app.btn-pink.no-hover:hover, .btn-app.btn-pink.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#db5e8c 0,#ce3970 100%) !important;
        background-color: #d54c7e !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-pink:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#d2346e 0,#aa2a59 100%) !important;
            background-color: #be2f64 !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-inverse, .btn-app.btn-inverse.no-hover:hover, .btn-app.btn-inverse.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#555 0,#333 100%) !important;
        background-color: #444 !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-inverse:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#3b3b3b 0,#1a1a1a 100%) !important;
            background-color: #2b2b2b !important;
            background-attachment: scroll !important;
        }

    .btn-app.btn-grey, .btn-app.btn-grey.no-hover:hover, .btn-app.btn-grey.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#898989 0,#696969 100%) !important;
        background-color: #797979 !important;
        background-attachment: scroll !important;
    }

        .btn-app.btn-grey:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#7c7c7c 0,#5c5c5c 100%) !important;
            background-color: #6c6c6c !important;
            background-attachment: scroll !important;
        }

.btn.btn-app.btn-light {
    color: #5a5a5a !important;
    text-shadow: 0 1px 1px #EEE !important;
}

    .btn.btn-app.btn-light, .btn.btn-app.btn-light.no-hover:hover, .btn.btn-app.btn-light.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#f4f4f4 0,#e6e6e6 100%) !important;
        background-color: #ededed !important;
        background-attachment: scroll !important;
    }

        .btn.btn-app.btn-light:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#e7e7e7 0,#d9d9d9 100%) !important;
            background-color: #e0e0e0 !important;
            background-attachment: scroll !important;
        }

.btn.btn-app.btn-yellow {
    color: #963 !important;
    text-shadow: 0 -1px 0 rgba(255,255,255,.4) !important;
}

    .btn.btn-app.btn-yellow, .btn.btn-app.btn-yellow.no-hover:hover, .btn.btn-app.btn-yellow.disabled:hover {
        background-position: 0% 0%;
        background-repeat: repeat-x !important;
        background-image: linear-gradient(to bottom,#ffe8a5 0,#fcd76a 100%) !important;
        background-color: #fee088 !important;
        background-attachment: scroll !important;
    }

        .btn.btn-app.btn-yellow:hover {
            background-position: 0% 0%;
            background-repeat: repeat-x !important;
            background-image: linear-gradient(to bottom,#ffe18b 0,#fbd051 100%) !important;
            background-color: #fdd96e !important;
            background-attachment: scroll !important;
        }

.btn.btn-app > .glyphicon,
.btn.btn-app > .fa {
    opacity: .88;
}

.btn.btn-app:hover > .glyphicon,
.btn.btn-app:hover > .fa {
    opacity: 1;
}

.btn.btn-app.btn-sm {
    width: 80px;
    font-size: 16px;
    border-radius: 10px;
    line-height: 1.5;
}

.btn.btn-app.btn-xs {
    width: 64px;
    font-size: 15px;
    border-radius: 8px;
    padding-bottom: 7px;
    padding-top: 8px;
    line-height: 1.45;
}

.btn.btn-app > .glyphicon,
.btn.btn-app > .fa {
    display: block;
    font-size: 42px;
    margin: 0 0 4px;
    line-height: 36px;
    min-width: 0;
    padding: 0;
}

.btn.btn-app.btn-sm > .glyphicon,
.btn.btn-app.btn-sm > .fa {
    display: block;
    font-size: 32px;
    line-height: 30px;
    margin: 0 0 3px;
}

.btn.btn-app.btn-xs > .glyphicon,
.btn.btn-app.btn-xs > .fa {
    display: block;
    font-size: 24px;
    line-height: 24px;
    margin: 0;
}

.btn.btn-app.no-radius {
    border-radius: 0;
}

.btn.btn-app.radius-4 {
    border-radius: 4px;
}

.btn.btn-app > .badge, .btn.btn-app > .label {
    position: absolute !important;
    top: -2px;
    right: -2px;
    padding: 1px 3px;
    text-align: center;
    font-size: 12px;
    color: #FFF;
}

    .btn.btn-app > .badge.badge-left, .btn.btn-app > .label.badge-left, .btn.btn-app > .badge.label-left, .btn.btn-app > .label.label-left {
        right: auto;
        left: -2px;
    }

.btn.btn-app > .badge-yellow, .btn.btn-app > .label-yellow {
    color: #963;
}

.btn.btn-app > .badge-light, .btn.btn-app > .label-light {
    color: #888;
}

.btn.btn-app > .label {
    padding: 1px 6px 3px;
    font-size: 13px;
}

.btn.btn-app.radius-4 > .badge, .btn.btn-app.no-radius > .badge {
    border-radius: 3px;
}

    .btn.btn-app.radius-4 > .badge.no-radius, .btn.btn-app.no-radius > .badge.no-radius {
        border-radius: 0;
    }

.btn.btn-app.active {
    color: #fff;
}

    .btn.btn-app.active:after {
        display: none;
    }

    .btn.btn-app.active.btn-yellow {
        color: #963;
        border-color: #fee188;
    }

    .btn.btn-app.active.btn-light {
        color: #515151;
    }

.btn-group > .btn-app:first-child:not(:last-child):not(.dropdown-toggle) {
    margin-right: 24px;
}

.btn-group > .btn-app + .btn-app.dropdown-toggle {
    position: absolute;
    width: auto;
    height: 100%;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: -23px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    right: 0;
}

.btn.btn-app.btn-light, .btn.btn-app.btn-yellow {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset !important;
}


.navbar-nav > li > a.btn-white {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    margin-right: 4px;
}

@media (min-width: 480px) {

    .btn-sm > .glyphicon,
    .btn-sm > .fa {
        margin-right: 3px;
    }

        .btn-sm > .glyphicon.icon-on-right,
        .btn-sm > .fa.icon-on-right {
            margin-right: 0;
            margin-left: 3px;
        }

    .btn > .glyphicon,
    .btn > .fa {
        margin-right: 4px;
    }

        .btn > .glyphicon.icon-on-right,
        .btn > .fa.icon-on-right {
            margin-right: 0;
            margin-left: 4px;
        }
}


/*   --------------------  End : Button    ------------------------     */


/*   --------------------  End : Button Input Type    ------------------------     */
/* enable absolute positioning */
.btn-addon {
    position: relative !important;
    display: inline-block;
}

    /* style glyph */
    .btn-addon .glyphicon, .btn-addon .fa {
        position: absolute !important;
        pointer-events: none !important;
        cursor: pointer;
        z-index: 1;
        color: #fff;
        top: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: inherit;
    }

.btn-addon-lg .glyphicon, .btn-addon-lg .fa {
    font-size: 150% !important;
    padding-top: 12px;
    padding-bottom: 15px;
}

/* align glyph */
.left-addon .glyphicon, .left-addon .fa {
    left: 0px !important;
    padding-left: 13px !important;
    padding-right: 10px !important;
}

.right-addon .glyphicon, .right-addon .fa {
    right: 0px !important;
    padding-left: 10px !important;
    padding-right: 13px !important;
}

/* add padding  */
.left-addon input, .left-addon a, .left-addon button, .left-addon span {
    padding-left: 30px !important;
}

.right-addon input, .right-addon a, .right-addon button, .right-addon span {
    padding-right: 30px !important;
}

.btn-addon input, .btn-addon a, .left-addon button, .left-addon span {
    height: auto;
}

@media (max-width: 320px) {
    .btn-addon {
        display: inline-block;
    }

        .btn-addon .btn {
            display: block;
            text-align: left;
        }
}

/*   --------------------  End : Button Input Type    ------------------------     */



/*------------------------------------- Well -----------------------------------*/
.well {
    border-radius: 0;
}

    .well.inline {
        padding: 2px;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .well h1,
    .well h2,
    .well h3,
    .well h4,
    .well h5,
    .well h6 {
        margin-top: 0;
    }

    .well h1,
    .well h2,
    .well h3 {
        line-height: 36px;
    }

/*------------------------------------- Form control -----------------------------------*/

.radio.inline + .radio.inline {
    margin-left: 10px;
}

.checkbox.inline + .checkbox.inline {
    margin-left: 10px;
}

.control-horizontal .radio input[type="radio"], .control-horizontal .radio-inline input[type="radio"],
.control-horizontal .checkbox input[type="checkbox"], .control-horizontal .checkbox-inline input[type="checkbox"] {
    position: static;
    margin-left: 0;
}

.control-horizontal .radio label, .control-horizontal .checkbox label {
    padding-left: 5px;
    /*vertical-align: middle;*/
}

.control-horizontal .radio, .control-horizontal .checkbox, .control-horizontal .textbox, .control-horizontal .select {
    margin-left: 10px;
}

    .control-horizontal .textbox > input[type=text] + span,
    .control-horizontal .select > select + span {
        margin-left: 5px;
        /*vertical-align: middle;*/
    }

    .control-horizontal .textbox > span + input[type=text],
    .control-horizontal .select > span + select {
        margin-left: 5px;
        margin-right: 0px;
    }

.textbox, .select {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .textbox + .textbox,
    .select + .select {
        margin-top: -5px;
    }


/*------------------------------------------ Form Inline ------------------------------------------*/
.form-search .radio [type=radio] + label,
.form-inline .radio [type=radio] + label,
.form-search .checkbox [type=checkbox] + label,
.form-inline .checkbox [type=checkbox] + label {
    float: left;
    margin-left: -20px;
}

.form-search .form-search .radio [type=radio] + label,
.form-search .form-inline .radio [type=radio] + label,
.form-search .form-search .checkbox [type=checkbox] + label,
.form-search .form-inline .checkbox [type=checkbox] + label,
.form-inline .form-search .radio [type=radio] + label,
.form-inline .form-inline .radio [type=radio] + label,
.form-inline .form-search .checkbox [type=checkbox] + label,
.form-inline .form-inline .checkbox [type=checkbox] + label {
    margin-left: 0;
    margin-right: 3px;
}

label.inline {
    margin-bottom: 3px;
}

.form-inline .auto-lookup .autolookup {
    display: inline;
}

.inline-space {
    margin: 0 15px;
}

@media (max-width: 480px) {
    .form-inline label.inline {
        display: block;
    }

    .inline-space {
        margin: 0;
    }
}

/*------------------------------------------ Control collapse ------------------------------------------*/

.control.control-collapse .well {
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 24px;
}


/*------------------------------ Call out ------------------------------*/
.callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.callout-standard {
    background-color: white;
}

.callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout code {
    border-radius: 3px;
}

.callout + .bs-callout {
    margin-top: -5px;
}

.callout-danger {
    border-left-color: #ce4844;
}

    .callout-danger h4 {
        color: #ce4844;
    }

.callout-warning {
    border-left-color: #aa6708;
}

    .callout-warning h4 {
        color: #aa6708;
    }

.callout-info {
    border-left-color: #1b809e;
}

    .callout-info h4 {
        color: #1b809e;
    }


/*----------------------- Dropdown ---------------------------------*/
.dropdown-default > li:hover > a,
.dropdown-default > li > a:focus,
.dropdown-default > li > a:active,
.dropdown-default > li.active > a,
.dropdown-default > li.active:hover > a {
    background: #abbac3;
    color: #fff;
}

.dropdown-info > li:hover > a,
.dropdown-info > li > a:focus,
.dropdown-info > li > a:active,
.dropdown-info > li.active > a,
.dropdown-info > li.active:hover > a {
    background: #6fb3e0;
    color: #fff;
}

.dropdown-primary > li:hover > a,
.dropdown-primary > li > a:focus,
.dropdown-primary > li > a:active,
.dropdown-primary > li.active > a,
.dropdown-primary > li.active:hover > a {
    background: #428bca;
    color: #fff;
}

.dropdown-success > li:hover > a,
.dropdown-success > li > a:focus,
.dropdown-success > li > a:active,
.dropdown-success > li.active > a,
.dropdown-success > li.active:hover > a {
    background: #87b87f;
    color: #fff;
}

.dropdown-warning > li:hover > a,
.dropdown-warning > li > a:focus,
.dropdown-warning > li > a:active,
.dropdown-warning > li.active > a,
.dropdown-warning > li.active:hover > a {
    background: #ffa24d;
    color: #fff;
}

.dropdown-danger > li:hover > a,
.dropdown-danger > li > a:focus,
.dropdown-danger > li > a:active,
.dropdown-danger > li.active > a,
.dropdown-danger > li.active:hover > a {
    background: #d15b47;
    color: #fff;
}

.dropdown-inverse > li:hover > a,
.dropdown-inverse > li > a:focus,
.dropdown-inverse > li > a:active,
.dropdown-inverse > li.active > a,
.dropdown-inverse > li.active:hover > a {
    background: #555;
    color: #fff;
}

.dropdown-purple > li:hover > a,
.dropdown-purple > li > a:focus,
.dropdown-purple > li > a:active,
.dropdown-purple > li.active > a,
.dropdown-purple > li.active:hover > a {
    background: #9585bf;
    color: #fff;
}

.dropdown-pink > li:hover > a,
.dropdown-pink > li > a:focus,
.dropdown-pink > li > a:active,
.dropdown-pink > li.active > a,
.dropdown-pink > li.active:hover > a {
    background: #d6487e;
    color: #fff;
}

.dropdown-grey > li:hover > a,
.dropdown-grey > li > a:focus,
.dropdown-grey > li > a:active,
.dropdown-grey > li.active > a,
.dropdown-grey > li.active:hover > a {
    background: #a0a0a0;
    color: #fff;
}

.dropdown-light > li:hover > a,
.dropdown-light > li > a:focus,
.dropdown-light > li > a:active,
.dropdown-light > li.active > a,
.dropdown-light > li.active:hover > a {
    background: #e7e7e7;
    color: #333;
}

.dropdown-lighter > li:hover > a,
.dropdown-lighter > li > a:focus,
.dropdown-lighter > li > a:active,
.dropdown-lighter > li.active > a,
.dropdown-lighter > li.active:hover > a {
    background: #efefef;
    color: #444;
}

.dropdown-lightest > li:hover > a,
.dropdown-lightest > li > a:focus,
.dropdown-lightest > li > a:active,
.dropdown-lightest > li.active > a,
.dropdown-lightest > li.active:hover > a {
    background: #f3f3f3;
    color: #444;
}

.dropdown-yellow > li:hover > a,
.dropdown-yellow > li > a:focus,
.dropdown-yellow > li > a:active,
.dropdown-yellow > li.active > a,
.dropdown-yellow > li.active:hover > a {
    background: #fee188;
    color: #444;
}

.dropdown-yellow2 > li:hover > a,
.dropdown-yellow2 > li > a:focus,
.dropdown-yellow2 > li > a:active,
.dropdown-yellow2 > li.active > a,
.dropdown-yellow2 > li.active:hover > a {
    background: #f9e8b3;
    color: #444;
}




/*----------------------- normal form ------------------*/

.form-column {
    padding: 0 !important;
    margin: 0 !important;
}

    .form-column .form-normal {
        width: 100%;
    }

.form-normal {
    display: table;
    border-collapse: collapse;
    width: 98%;
    width: calc(100% - 24px);
    margin: 0 auto;
}

.form-normal-info-detail {
    display: table;
    border-collapse: collapse;
    margin: 0 auto;
}

.form-normal.form-justified {
    table-layout: fixed;
}

.form-normal-header {
    background-color: #eee;
    padding: 10px;
}

.form-normal-row {
    display: table-row;
}

    .form-normal-row.disallow {
        background-color: #eee !important;
        border-color: #ccc !important;
    }

        .form-normal-row.disallow > .form-normal-name {
            background-color: #abbac3 !important;
            border-color: #abbac3 !important;
            color: #7D7D7D;
        }

        .form-normal-row.disallow + .form-normal-row > .form-normal-name {
            border-color: #abbac3 !important;
        }

.form-normal-name,
.form-normal-name-left,
.form-normal-value {
    display: table-cell;
}

.form-normal-name {
    text-align: right;
    padding: 6px 10px 6px 4px;
    font-weight: 400;
    color: #667E99;
    background-color: transparent;
    border-top: 1px dotted #D5E4F1;
    width: 120px;
    vertical-align: top;
}

    .form-normal-name.name-130 {
        width: 130px;
    }

    .form-normal-name.name-150 {
        width: 150px;
    }

.form-normal-name-left {
    padding: 6px 10px 6px 4px;
    font-weight: 400;
    color: #667E99;
    background-color: transparent;
    border-top: 1px dotted #D5E4F1;
    /*display: table-cell;*/
    width: 120px;
    vertical-align: top;
}

.form-normal-value {
    padding: 6px 4px 6px 6px;
    border-top: 1px dotted #D5E4F1;
}

.halve .form-normal-value {
    width: 50%;
}

.halve .form-normal-name {
    white-space: nowrap;
}

.form-normal-value > span + span:before {
    display: inline;
    content: ",";
    margin-left: 1px;
    margin-right: 3px;
    color: #666;
    border-bottom: 1px solid #FFF;
}

.form-normal-value > span + span.editable-container:before {
    display: none;
}

.form-normal-row:first-child .form-normal-name {
    border-top: none;
}

.form-normal-row:first-child .form-normal-value {
    border-top: none;
}

.form-normal-striped {
    border: 1px solid #a4caea;
}

    .form-normal-striped .form-normal-name {
        color: #336199;
        background-color: #EDF3F4;
        border-top: 1px solid #F7FBFF;
    }

    .form-normal-striped .form-normal-value {
        border-top: 1px dotted #a4caea;
        padding-left: 12px;
    }


@media only screen and (max-width:767px) {
    .form-normal-name {
        width: 80px;
    }

    /*.form-normal .form-normal-name,*/
    .form-normal-striped .form-normal-name {
        float: none;
        width: auto;
        text-align: left;
        padding: 6px 4px 6px 10px;
        display: block;
    }

    /*.form-normal .form-normal-value,*/
    .form-normal-striped .form-normal-value {
        margin-left: 10px;
        display: block;
        border-top: none;
    }
}


/*Label & budget*/
.label {
    border-radius: 8px;
    text-shadow: none;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    background-color: #abbac3;
}

    .label[class*=col-][class*=arrow] {
        min-height: 0;
    }

    .label.arrowed, .label.arrowed-in {
        position: relative;
        z-index: 1;
    }

        .label.arrowed:before, .label.arrowed-in:before {
            display: inline-block;
            content: "";
            position: absolute;
            top: 0;
            z-index: -1;
            border: 1px solid transparent;
            border-right-color: #abbac3;
            -moz-border-right-colors: #abbac3;
        }

        .label.arrowed-in:before {
            border-color: #abbac3;
            border-left-color: transparent;
            -moz-border-left-colors: none;
        }

    .label.arrowed-right, .label.arrowed-in-right {
        position: relative;
        z-index: 1;
    }

        .label.arrowed-right:after, .label.arrowed-in-right:after {
            display: inline-block;
            content: "";
            position: absolute;
            top: 0;
            z-index: -1;
            border: 1px solid transparent;
            border-left-color: #abbac3;
            -moz-border-left-colors: #abbac3;
        }

        .label.arrowed-in-right:after {
            border-color: #abbac3;
            border-right-color: transparent;
            -moz-border-right-colors: none;
        }

.label-info.arrowed:before {
    border-right-color: #3a87ad;
    -moz-border-right-colors: #3a87ad;
}

.label-info.arrowed-in:before {
    border-color: #3a87ad #3a87ad #3a87ad transparent;
    -moz-border-right-colors: #3a87ad;
}

.label-info.arrowed-right:after {
    border-left-color: #3a87ad;
    -moz-border-left-colors: #3a87ad;
}

.label-info.arrowed-in-right:after {
    border-color: #3a87ad transparent #3a87ad #3a87ad;
    -moz-border-left-colors: #3a87ad;
}

.label-primary.arrowed:before {
    border-right-color: #428bca;
    -moz-border-right-colors: #428bca;
}

.label-primary.arrowed-in:before {
    border-color: #428bca #428bca #428bca transparent;
    -moz-border-right-colors: #428bca;
}

.label-primary.arrowed-right:after {
    border-left-color: #428bca;
    -moz-border-left-colors: #428bca;
}

.label-primary.arrowed-in-right:after {
    border-color: #428bca transparent #428bca #428bca;
    -moz-border-left-colors: #428bca;
}

.label-success.arrowed:before {
    border-right-color: #82af6f;
    -moz-border-right-colors: #82af6f;
}

.label-success.arrowed-in:before {
    border-color: #82af6f #82af6f #82af6f transparent;
    -moz-border-right-colors: #82af6f;
}

.label-success.arrowed-right:after {
    border-left-color: #82af6f;
    -moz-border-left-colors: #82af6f;
}

.label-success.arrowed-in-right:after {
    border-color: #82af6f transparent #82af6f #82af6f;
    -moz-border-left-colors: #82af6f;
}

.label-warning.arrowed:before {
    border-right-color: #f89406;
    -moz-border-right-colors: #f89406;
}

.label-warning.arrowed-in:before {
    border-color: #f89406 #f89406 #f89406 transparent;
    -moz-border-right-colors: #f89406;
}

.label-warning.arrowed-right:after {
    border-left-color: #f89406;
    -moz-border-left-colors: #f89406;
}

.label-warning.arrowed-in-right:after {
    border-color: #f89406 transparent #f89406 #f89406;
    -moz-border-left-colors: #f89406;
}

.label-important.arrowed:before {
    border-right-color: #d15b47;
    -moz-border-right-colors: #d15b47;
}

.label-important.arrowed-in:before {
    border-color: #d15b47 #d15b47 #d15b47 transparent;
    -moz-border-right-colors: #d15b47;
}

.label-important.arrowed-right:after {
    border-left-color: #d15b47;
    -moz-border-left-colors: #d15b47;
}

.label-important.arrowed-in-right:after {
    border-color: #d15b47 transparent #d15b47 #d15b47;
    -moz-border-left-colors: #d15b47;
}

.label-danger.arrowed:before {
    border-right-color: #d15b47;
    -moz-border-right-colors: #d15b47;
}

.label-danger.arrowed-in:before {
    border-color: #d15b47 #d15b47 #d15b47 transparent;
    -moz-border-right-colors: #d15b47;
}

.label-danger.arrowed-right:after {
    border-left-color: #d15b47;
    -moz-border-left-colors: #d15b47;
}

.label-danger.arrowed-in-right:after {
    border-color: #d15b47 transparent #d15b47 #d15b47;
    -moz-border-left-colors: #d15b47;
}

.label-inverse.arrowed:before {
    border-right-color: #333;
    -moz-border-right-colors: #333;
}

.label-inverse.arrowed-in:before {
    border-color: #333 #333 #333 transparent;
    -moz-border-right-colors: #333;
}

.label-inverse.arrowed-right:after {
    border-left-color: #333;
    -moz-border-left-colors: #333;
}

.label-inverse.arrowed-in-right:after {
    border-color: #333 transparent #333 #333;
    -moz-border-left-colors: #333;
}

.label-pink.arrowed:before {
    border-right-color: #d6487e;
    -moz-border-right-colors: #d6487e;
}

.label-pink.arrowed-in:before {
    border-color: #d6487e #d6487e #d6487e transparent;
    -moz-border-right-colors: #d6487e;
}

.label-pink.arrowed-right:after {
    border-left-color: #d6487e;
    -moz-border-left-colors: #d6487e;
}

.label-pink.arrowed-in-right:after {
    border-color: #d6487e transparent #d6487e #d6487e;
    -moz-border-left-colors: #d6487e;
}

.label-purple.arrowed:before {
    border-right-color: #9585bf;
    -moz-border-right-colors: #9585bf;
}

.label-purple.arrowed-in:before {
    border-color: #9585bf #9585bf #9585bf transparent;
    -moz-border-right-colors: #9585bf;
}

.label-purple.arrowed-right:after {
    border-left-color: #9585bf;
    -moz-border-left-colors: #9585bf;
}

.label-purple.arrowed-in-right:after {
    border-color: #9585bf transparent #9585bf #9585bf;
    -moz-border-left-colors: #9585bf;
}

.label-yellow.arrowed:before {
    border-right-color: #fee188;
    -moz-border-right-colors: #fee188;
}

.label-yellow.arrowed-in:before {
    border-color: #fee188 #fee188 #fee188 transparent;
    -moz-border-right-colors: #fee188;
}

.label-yellow.arrowed-right:after {
    border-left-color: #fee188;
    -moz-border-left-colors: #fee188;
}

.label-yellow.arrowed-in-right:after {
    border-color: #fee188 transparent #fee188 #fee188;
    -moz-border-left-colors: #fee188;
}

.label-light.arrowed:before {
    border-right-color: #e7e7e7;
    -moz-border-right-colors: #e7e7e7;
}

.label-light.arrowed-in:before {
    border-color: #e7e7e7 #e7e7e7 #e7e7e7 transparent;
    -moz-border-right-colors: #e7e7e7;
}

.label-light.arrowed-right:after {
    border-left-color: #e7e7e7;
    -moz-border-left-colors: #e7e7e7;
}

.label-light.arrowed-in-right:after {
    border-color: #e7e7e7 transparent #e7e7e7 #e7e7e7;
    -moz-border-left-colors: #e7e7e7;
}

.label-grey.arrowed:before {
    border-right-color: #a0a0a0;
    -moz-border-right-colors: #a0a0a0;
}

.label-grey.arrowed-in:before {
    border-color: #a0a0a0 #a0a0a0 #a0a0a0 transparent;
    -moz-border-right-colors: #a0a0a0;
}

.label-grey.arrowed-right:after {
    border-left-color: #a0a0a0;
    -moz-border-left-colors: #a0a0a0;
}

.label-grey.arrowed-in-right:after {
    border-color: #a0a0a0 transparent #a0a0a0 #a0a0a0;
    -moz-border-left-colors: #a0a0a0;
}

.label {
    font-size: 12px;
    line-height: 15px;
    height: 20px;
}

    .label.arrowed {
        margin-left: 5px;
    }

        .label.arrowed:before {
            left: -10px;
            border-width: 10px 5px;
        }

    .label.arrowed-in {
        margin-left: 5px;
    }

        .label.arrowed-in:before {
            left: -5px;
            border-width: 10px 5px;
        }

    .label.arrowed-right {
        margin-right: 5px;
    }

        .label.arrowed-right:after {
            right: -10px;
            border-width: 10px 5px;
        }

    .label.arrowed-in-right {
        margin-right: 5px;
    }

        .label.arrowed-in-right:after {
            right: -5px;
            border-width: 10px 5px;
        }

.label-lg {
    padding: .3em .6em .4em;
    font-size: 13px;
    line-height: 1.1;
    height: 24px;
}

    .label-lg.arrowed {
        margin-left: 6px;
    }

        .label-lg.arrowed:before {
            left: -12px;
            border-width: 12px 6px;
        }

    .label-lg.arrowed-in {
        margin-left: 6px;
    }

        .label-lg.arrowed-in:before {
            left: -6px;
            border-width: 12px 6px;
        }

    .label-lg.arrowed-right {
        margin-right: 6px;
    }

        .label-lg.arrowed-right:after {
            right: -12px;
            border-width: 12px 6px;
        }

    .label-lg.arrowed-in-right {
        margin-right: 6px;
    }

        .label-lg.arrowed-in-right:after {
            right: -6px;
            border-width: 12px 6px;
        }

.label-xlg {
    padding: .3em .7em .4em;
    font-size: 14px;
    line-height: 1.3;
    height: 28px;
}

    .label-xlg.arrowed {
        margin-left: 7px;
    }

        .label-xlg.arrowed:before {
            left: -14px;
            border-width: 14px 7px;
        }

    .label-xlg.arrowed-in {
        margin-left: 7px;
    }

        .label-xlg.arrowed-in:before {
            left: -7px;
            border-width: 14px 7px;
        }

    .label-xlg.arrowed-right {
        margin-right: 7px;
    }

        .label-xlg.arrowed-right:after {
            right: -14px;
            border-width: 14px 7px;
        }

    .label-xlg.arrowed-in-right {
        margin-right: 7px;
    }

        .label-xlg.arrowed-in-right:after {
            right: -7px;
            border-width: 14px 7px;
        }

.label-sm {
    padding: .2em .4em .3em;
    font-size: 11px;
    line-height: 1;
    height: 18px;
}

    .label-sm.arrowed {
        margin-left: 4px;
    }

        .label-sm.arrowed:before {
            left: -8px;
            border-width: 9px 4px;
        }

    .label-sm.arrowed-in {
        margin-left: 4px;
    }

        .label-sm.arrowed-in:before {
            left: -4px;
            border-width: 9px 4px;
        }

    .label-sm.arrowed-right {
        margin-right: 4px;
    }

        .label-sm.arrowed-right:after {
            right: -8px;
            border-width: 9px 4px;
        }

    .label-sm.arrowed-in-right {
        margin-right: 4px;
    }

        .label-sm.arrowed-in-right:after {
            right: -4px;
            border-width: 9px 4px;
        }

.label > span, .label > i {
    line-height: 1;
    vertical-align: bottom;
}

.label.label-white {
    color: #879da9;
    border: 1px solid #abbac3;
    background-color: #f2f5f6;
    border-right-width: 1px;
    border-left-width: 2px;
}

.label-white.label-success {
    color: #7b9e6c;
    border-color: #9fbf92;
    background-color: #edf3ea;
}

.label-white.label-warning {
    color: #d9993e;
    border-color: #e4ae62;
    background-color: #fef6eb;
}

.label-white.label-primary {
    color: #6688a6;
    border-color: #8aafce;
    background-color: #eaf2f8;
}

.label-white.label-danger {
    color: #bd7f75;
    border-color: #d28679;
    background-color: #fcf4f2;
}

.label-white.label-info {
    color: #4e7a8f;
    border-color: #7aa1b4;
    background-color: #eaf3f7;
}

.label-white.label-inverse {
    color: #404040;
    border-color: #737373;
    background-color: #ededed;
}

.label-white.label-pink {
    color: #af6f87;
    border-color: #d299ae;
    background-color: #fbeff4;
}

.label-white.label-purple {
    color: #7d6fa2;
    border-color: #b7b1c6;
    background-color: #efedf5;
}

.label-white.label-yellow {
    color: #cfa114;
    border-color: #ecd181;
    background-color: #fdf7e4;
}

.label-white.label-grey {
    color: #878787;
    border-color: #cecece;
    background-color: #ededed;
}

@media screen and (-webkit-min-device-pixel-ratio:1.08) and (-webkit-max-device-pixel-ratio:1.15),screen and (min--moz-device-pixel-ratio:1.08) and (max--moz-device-pixel-ratio:1.15) {
    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed:before {
        border-width: 10.5px 6px;
        left: -11px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-right:after {
        border-width: 10.5px 6px;
        right: -11px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in:before {
        border-width: 10.5px 5px 10px;
        left: -6px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in-right:after {
        border-width: 10.5px 5px 10px;
        right: -6px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.3) and (-webkit-max-device-pixel-ratio:1.4),screen and (min--moz-device-pixel-ratio:1.3) and (max--moz-device-pixel-ratio:1.4) {
    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed:before {
        border-width: 10px 6px 10px;
        left: -12px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-right:after {
        border-width: 10px 6px 10px;
        right: -12px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in:before {
        border-width: 10px 5px 10px;
        left: -6px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in-right:after {
        border-width: 10px 5px 10px;
        right: -6px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.6),screen and (min--moz-device-pixel-ratio:1.5) and (max--moz-device-pixel-ratio:1.6) {
    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed:before {
        border-width: 10px 6px;
        left: -12px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-right:after {
        border-width: 10px 6px;
        right: -12px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.7) and (-webkit-max-device-pixel-ratio:1.8),screen and (min--moz-device-pixel-ratio:1.7) and (max--moz-device-pixel-ratio:1.8) {
    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed:before {
        border-width: 10px 6px;
        left: -11.5px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-right:after {
        border-width: 10px 6px;
        right: -11.5px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in:before {
        border-width: 10px 5px;
        left: -6px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in-right:after {
        border-width: 10px 5px;
        right: -6px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:.8) and (-webkit-max-device-pixel-ratio:.9),screen and (min--moz-device-pixel-ratio:.8) and (max--moz-device-pixel-ratio:.9) {
    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed:before {
        border-width: 11px 6px;
        left: -11.5px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-right:after {
        border-width: 11px 6px;
        right: -11.5px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in:before {
        border-width: 11px 5px;
        left: -6px;
    }

    .label:not(.label-lg):not(.label-xlg):not(.label-sm).arrowed-in-right:after {
        border-width: 11px 5px;
        right: -6px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.08) and (-webkit-max-device-pixel-ratio:1.15),screen and (min--moz-device-pixel-ratio:1.08) and (max--moz-device-pixel-ratio:1.15) {
    .label-lg.arrowed:before {
        left: -11px;
    }

    .label-lg.arrowed-right:after {
        right: -11px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.7) and (-webkit-max-device-pixel-ratio:1.8),screen and (min--moz-device-pixel-ratio:1.7) and (max--moz-device-pixel-ratio:1.8) {
    .label-lg.arrowed:before {
        left: -11.5px;
    }

    .label-lg.arrowed-right:after {
        right: -11.5px;
    }

    .label-lg.arrowed-in:before {
        border-width: 12.5px 6px 12px;
        left: -6px;
    }

    .label-lg.arrowed-in-right:after {
        border-width: 12.5px 6px 12px;
        right: -6px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.08) and (-webkit-max-device-pixel-ratio:1.15),screen and (min--moz-device-pixel-ratio:1.08) and (max--moz-device-pixel-ratio:1.15) {
    .label-xlg.arrowed:before {
        left: -13px;
    }

    .label-xlg.arrowed-right:after {
        right: -13px;
    }

    .label-xlg.arrowed-in:before {
        border-width: 14px 7px 14.5px;
    }

    .label-xlg.arrowed-in-right:after {
        border-width: 14px 7px 14.5px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.2) and (-webkit-max-device-pixel-ratio:1.3),screen and (min--moz-device-pixel-ratio:1.2) and (max--moz-device-pixel-ratio:1.3) {
    .label-xlg.arrowed:before {
        border-width: 14.5px 7px;
        left: -13.5px;
    }

    .label-xlg.arrowed-right:after {
        border-width: 14.5px 7px;
        right: -13.5px;
    }

    .label-xlg.arrowed-in:before {
        border-width: 14.5px 7px 14.5px;
    }

    .label-xlg.arrowed-in-right:after {
        border-width: 14.5px 7px 14.5px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.3) and (-webkit-max-device-pixel-ratio:1.4),screen and (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.6),screen and (min--moz-device-pixel-ratio:1.3) and (max--moz-device-pixel-ratio:1.4),screen and (min--moz-device-pixel-ratio:1.5) and (max--moz-device-pixel-ratio:1.6) {
    .label-xlg.arrowed:before {
        border-width: 14.5px 7.5px;
        left: -14.5px;
    }

    .label-xlg.arrowed-right:after {
        border-width: 14.5px 7.5px;
        right: -14.5px;
    }

    .label-xlg.arrowed-in:before {
        border-width: 14.5px 7px;
    }

    .label-xlg.arrowed-in-right:after {
        border-width: 14.5px 7px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.08) and (-webkit-max-device-pixel-ratio:1.15),screen and (min--moz-device-pixel-ratio:1.08) and (max--moz-device-pixel-ratio:1.15) {
    .label-sm.arrowed:before {
        border-width: 9px 5px;
        left: -9px;
    }

    .label-sm.arrowed-right:after {
        border-width: 9px 5px;
        right: -9px;
    }

    .label-sm.arrowed-in:before {
        border-width: 10px 4px;
    }

    .label-sm.arrowed-in-right:after {
        border-width: 10px 4px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.2) and (-webkit-max-device-pixel-ratio:1.3),screen and (min--moz-device-pixel-ratio:1.2) and (max--moz-device-pixel-ratio:1.3) {
    .label-sm.arrowed:before {
        border-width: 9.5px 5px;
        left: -10px;
    }

    .label-sm.arrowed-right:after {
        border-width: 9.5px 5px;
        right: -10px;
    }

    .label-sm.arrowed-in:before {
        border-width: 9.5px 4px;
    }

    .label-sm.arrowed-in-right:after {
        border-width: 9.5px 4px;
    }
}



/*  Step circle */
.steps {
    list-style: none;
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

    .steps li {
        display: table-cell;
        text-align: center;
        width: 1%;
    }

        .steps li .step {
            border: 5px solid #ced1d6;
            color: #546474;
            font-size: 15px;
            border-radius: 100%;
            background-color: #FFF;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 30px;
            text-align: center;
        }

        .steps li:before {
            display: block;
            content: "";
            width: 100%;
            height: 1px;
            font-size: 0;
            overflow: hidden;
            border-top: 4px solid #CED1D6;
            position: relative;
            top: 21px;
            z-index: 1;
        }

        .steps li.last-child:before {
            max-width: 50%;
            width: 50%;
        }

        .steps li:last-child:before {
            max-width: 50%;
            width: 50%;
        }

        .steps li:first-child:before {
            max-width: 51%;
            left: 50%;
        }

        .steps li.active:before, .steps li.complete:before, .steps li.active .step, .steps li.complete .step {
            border-color: #5293c4;
        }

        .steps li.complete .step {
            cursor: default;
            color: #FFF;
            -webkit-transition: transform ease .1s;
            -o-transition: transform ease .1s;
            transition: transform ease .1s;
        }

            .steps li.complete .step:before {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                line-height: 30px;
                text-align: center;
                border-radius: 100%;
                content: "\f00c";
                background-color: #FFF;
                z-index: 3;
                font-family: "Font Awesome 5 Pro";
                font-size: 17px;
                color: #87ba21;
            }

        .steps li.complete:hover .step {
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
            border-color: #80afd4;
        }

        .steps li.complete:hover:before {
            border-color: #80afd4;
        }

        .steps li .title {
            display: block;
            margin-top: 4px;
            max-width: 100%;
            color: #949ea7;
            font-size: 14px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            word-wrap: break-word;
        }

        .steps li.complete .title, .steps li.active .title {
            color: #2b3d53;
        }

.step-content {
    position: relative;
}

    .step-content .step-pane {
        display: none;
        min-height: 200px;
        padding: 4px 8px 12px;
    }

        .step-content .step-pane.active {
            display: block;
        }

.wizard-actions {
    text-align: right;
}

@media only screen and (max-width:767px) {
    .steps li .step {
        width: 30px;
        height: 30px;
        line-height: 24px;
        border-width: 3px;
    }

    .steps li:before, .steps li:after {
        border-width: 3px;
    }

    .steps li.complete .step:before {
        line-height: 24px;
        font-size: 13px;
    }

    .steps li:before {
        top: 16px;
    }

    .step-content .step-pane {
        padding: 4px 4px 6px;
        min-height: 150px;
    }
}


/*-------------- Info box -------------------*/
.infobox-container {
    text-align: center;
    font-size: 0;
}

.infobox {
    display: inline-block;
    width: 210px;
    color: #555;
    background-color: #FFF;
    box-shadow: none;
    border-radius: 0;
    margin: -1px 0 0 -1px;
    padding: 8px 3px 6px 9px;
    border: 1px dotted;
    border-color: #D8D8D8 !important;
    vertical-align: middle;
    text-align: left;
    position: relative;
}

    .infobox > .infobox-icon {
        display: inline-block;
        vertical-align: top;
        width: 44px;
        /*----*/
        position: absolute;
    }

        .infobox > .infobox-icon > i {
            display: inline-block;
            height: 42px;
            margin: 0;
            padding: 1px 1px 0 2px;
            background-color: transparent;
            border-width: 0;
            text-align: center;
            position: relative;
            border-radius: 100%;
            -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2);
            box-shadow: 1px 1px 0 rgba(0,0,0,.2);
        }

            .infobox > .infobox-icon > i:before {
                font-size: 24px;
                display: block;
                padding: 6px 0 7px;
                width: 40px;
                text-align: center;
                border-radius: 100%;
                color: #FFF;
                color: rgba(255,255,255,.9);
                background-color: transparent;
                background-color: rgba(255,255,255,.2);
                text-shadow: 1px 1px 1px rgba(0,0,0,.14);
            }

        .infobox > .infobox-icon > .infobox-icon-image-container {
            border-radius: 100%;
            display: inline-block;
            height: 42px;
            width: 42px;
            margin: 0;
            padding: 1px 1px 0 2px;
            border-width: 0;
            text-align: center;
            position: relative;
            border-radius: 100%;
            -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2);
            box-shadow: 1px 1px 0 rgba(0,0,0,.2);
        }

            .infobox > .infobox-icon > .infobox-icon-image-container > .infobox-icon-image-inner {
                display: block;
                padding: 10px 0 7px;
                height: 36px;
                text-align: center;
                border-radius: 100%;
                color: #FFF;
                color: rgba(255,255,255,.9);
                background-color: transparent;
                background-color: rgba(255,255,255,.2);
                text-shadow: 1px 1px 1px rgba(0,0,0,.14);
            }

    .infobox .infobox-content {
        color: #555;
        max-width: 140px;
    }

        .infobox .infobox-content:first-child {
            font-weight: 700;
        }

    .infobox > .infobox-data {
        display: inline-block;
        border-width: 0;
        border-top-width: 0;
        font-size: 13px;
        text-align: left;
        line-height: 21px;
        min-width: 130px;
        padding-left: 8px;
        position: relative;
        top: 0;
        /*---*/
        max-width: 100%;
        margin-left: 45px;
    }

        .infobox > .infobox-data > .infobox-data-number {
            display: block;
            font-size: 22px;
            margin: 2px 0 4px;
            position: relative;
            text-shadow: 1px 1px 0 rgba(0,0,0,.15);
        }

        .infobox > .infobox-data > .infobox-text {
            display: block;
            font-size: 16px;
            margin: 2px 0 4px;
            position: relative;
            text-shadow: none;
        }

    .infobox.no-border {
        border-width: 0 !important;
    }

@media only screen and (max-width:479px) {
    .infobox {
        min-width: 95%;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

.infobox-purple {
    color: #6f3cc4;
    border-color: #6f3cc4;
}

    .infobox-purple > .infobox-icon > i,
    .infobox-purple > .infobox-icon > .infobox-icon-image-container {
        background-color: #6f3cc4;
    }

    .infobox-purple.infobox-dark {
        background-color: #6f3cc4;
        border-color: #6f3cc4;
    }

.infobox-purple2 {
    color: #5f47b0;
    border-color: #5f47b0;
}

    .infobox-purple2 > .infobox-icon > i,
    .infobox-purple2 > .infobox-icon > .infobox-icon-image-container {
        background-color: #5f47b0;
    }

    .infobox-purple2.infobox-dark {
        background-color: #5f47b0;
        border-color: #5f47b0;
    }

.infobox-pink {
    color: #cb6fd7;
    border-color: #cb6fd7;
}

    .infobox-pink > .infobox-icon > i,
    .infobox-pink > .infobox-icon > .infobox-icon-image-container {
        background-color: #cb6fd7;
    }

    .infobox-pink.infobox-dark {
        background-color: #cb6fd7;
        border-color: #cb6fd7;
    }

.infobox-blue {
    color: #6fb3e0;
    border-color: #6fb3e0;
}

    .infobox-blue > .infobox-icon > i,
    .infobox-blue > .infobox-icon > .infobox-icon-image-container {
        background-color: #6fb3e0;
    }

    .infobox-blue.infobox-dark {
        background-color: #6fb3e0;
        border-color: #6fb3e0;
    }

.infobox-blue2 {
    color: #3983c2;
    border-color: #3983c2;
}

    .infobox-blue2 > .infobox-icon > i,
    .infobox-blue2 > .infobox-icon > .infobox-icon-image-container {
        background-color: #3983c2;
    }

    .infobox-blue2.infobox-dark {
        background-color: #3983c2;
        border-color: #3983c2;
    }

.infobox-blue3 {
    color: #1144eb;
    border-color: #1144eb;
}

    .infobox-blue3 > .infobox-icon > i,
    .infobox-blue3 > .infobox-icon > .infobox-icon-image-container {
        background-color: #1144eb;
    }

    .infobox-blue3.infobox-dark {
        background-color: #1144eb;
        border-color: #1144eb;
    }

.infobox-red {
    color: #d53f40;
    border-color: #d53f40;
}

    .infobox-red > .infobox-icon > i,
    .infobox-red > .infobox-icon > .infobox-icon-image-container {
        background-color: #d53f40;
    }

    .infobox-red.infobox-dark {
        background-color: #d53f40;
        border-color: #d53f40;
    }

.infobox-brown {
    color: #c67a3e;
    border-color: #c67a3e;
}

    .infobox-brown > .infobox-icon > i,
    .infobox-brown > .infobox-icon > .infobox-icon-image-container {
        background-color: #c67a3e;
    }

    .infobox-brown.infobox-dark {
        background-color: #c67a3e;
        border-color: #c67a3e;
    }

.infobox-wood {
    color: #7b3f25;
    border-color: #7b3f25;
}

    .infobox-wood > .infobox-icon > i,
    .infobox-wood > .infobox-icon > .infobox-icon-image-container {
        background-color: #7b3f25;
    }

    .infobox-wood.infobox-dark {
        background-color: #7b3f25;
        border-color: #7b3f25;
    }

.infobox-light-brown {
    color: #cebea5;
    border-color: #cebea5;
}

    .infobox-light-brown > .infobox-icon > i,
    .infobox-light-brown > .infobox-icon > .infobox-icon-image-container {
        background-color: #cebea5;
    }

    .infobox-light-brown.infobox-dark {
        background-color: #cebea5;
        border-color: #cebea5;
    }

.infobox-orange {
    color: #e8b110;
    border-color: #e8b110;
}

    .infobox-orange > .infobox-icon > i,
    .infobox-orange > .infobox-icon > .infobox-icon-image-container {
        background-color: #e8b110;
    }

    .infobox-orange.infobox-dark {
        background-color: #e8b110;
        border-color: #e8b110;
    }

.infobox-orange2 {
    color: #f79263;
    border-color: #f79263;
}

    .infobox-orange2 > .infobox-icon > i,
    .infobox-orange2 > .infobox-icon > .infobox-icon-image-container {
        background-color: #f79263;
    }

    .infobox-orange2.infobox-dark {
        background-color: #f79263;
        border-color: #f79263;
    }

.infobox-green {
    color: #9abc32;
    border-color: #9abc32;
}

    .infobox-green > .infobox-icon > i,
    .infobox-green > .infobox-icon > .infobox-icon-image-container {
        background-color: #9abc32;
    }

    .infobox-green.infobox-dark {
        background-color: #9abc32;
        border-color: #9abc32;
    }

.infobox-green2 {
    color: #0490a6;
    border-color: #0490a6;
}

    .infobox-green2 > .infobox-icon > i,
    .infobox-green2 > .infobox-icon > .infobox-icon-image-container {
        background-color: #0490a6;
    }

    .infobox-green2.infobox-dark {
        background-color: #0490a6;
        border-color: #0490a6;
    }

.infobox-grey {
    color: #999;
    border-color: #999;
}

    .infobox-grey > .infobox-icon > i,
    .infobox-grey > .infobox-icon > .infobox-icon-image-container {
        background-color: #999;
    }

    .infobox-grey.infobox-dark {
        background-color: #999;
        border-color: #999;
    }

.infobox-black {
    color: #393939;
    border-color: #393939;
}

    .infobox-black > .infobox-icon > i,
    .infobox-black > .infobox-icon > .infobox-icon-image-container {
        background-color: #393939;
    }

    .infobox-black.infobox-dark {
        background-color: #393939;
        border-color: #393939;
    }

.infobox-dark {
    margin: 1px 1px 0 0;
    border-color: transparent !important;
    border-width: 0;
    color: #FFF;
    padding: 4px;
}

    .infobox-dark > .infobox-icon > i, .infobox-dark > .infobox-icon > i:before {
        background-color: transparent;
        box-shadow: none !important;
        text-shadow: none;
        border-radius: 0;
        font-size: 30px;
    }

        .infobox-dark > .infobox-icon > i:before {
            opacity: 1;
            filter: alpha(opacity=100);
        }

    .infobox-dark .infobox-content {
        color: #FFF;
    }

.infobox > .infobox-progress {
    padding-top: 0;
    display: inline-block;
    vertical-align: top;
    width: 44px;
    position: absolute;
}

.infobox > .infobox-chart {
    padding-top: 0;
    display: inline-block;
    vertical-align: text-bottom;
    width: 44px;
    text-align: center;
    position: absolute;
}

    .infobox > .infobox-chart > .sparkline {
        font-size: 24px;
    }

    .infobox > .infobox-chart canvas {
        vertical-align: middle !important;
    }

.infobox > .stat {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 11px;
    text-shadow: none;
    color: #ABBAC3;
    font-size: 13px;
    font-weight: 700;
    padding-right: 18px;
    padding-top: 3px;
}

    .infobox > .stat:before {
        display: inline-block;
        content: "";
        width: 8px;
        height: 11px;
        background-color: #ABBAC3;
        position: absolute;
        right: 4px;
        top: 7px;
    }

    .infobox > .stat:after {
        display: inline-block;
        content: "";
        position: absolute;
        right: 1px;
        top: -8px;
        border: 12px solid transparent;
        border-width: 8px 7px;
        border-bottom-color: #ABBAC3;
    }

    .infobox > .stat.stat-success {
        color: #77C646;
    }

        .infobox > .stat.stat-success:before {
            background-color: #77C646;
        }

        .infobox > .stat.stat-success:after {
            border-bottom-color: #77C646;
        }

    .infobox > .stat.stat-important {
        color: #E4564F;
    }

        .infobox > .stat.stat-important:before {
            background-color: #E4564F;
            top: 3px;
        }

        .infobox > .stat.stat-important:after {
            border-top-color: #E4564F;
            border-bottom-color: transparent;
            bottom: -6px;
            top: auto;
        }

.infobox.infobox-dark > .stat {
    color: #FFF;
}

    .infobox.infobox-dark > .stat:before {
        background-color: #E1E5E8;
    }

    .infobox.infobox-dark > .stat:after {
        border-bottom-color: #E1E5E8;
    }

    .infobox.infobox-dark > .stat.stat-success {
        color: #FFF;
    }

        .infobox.infobox-dark > .stat.stat-success:before {
            background-color: #D0E29E;
        }

        .infobox.infobox-dark > .stat.stat-success:after {
            border-bottom-color: #D0E29E;
        }

    .infobox.infobox-dark > .stat.stat-important {
        color: #FFF;
    }

        .infobox.infobox-dark > .stat.stat-important:before {
            background-color: #FF8482;
            top: 3px;
        }

        .infobox.infobox-dark > .stat.stat-important:after {
            border-top-color: #FF8482;
            border-bottom-color: transparent;
            bottom: -6px;
            top: auto;
        }

.infobox > .badge {
    position: absolute;
    right: 5px;
    top: 5px;
    text-shadow: none;
    color: #FFF;
    font-size: 11px;
}

.infobox.infobox-dark > .badge {
    color: #FFF;
    background-color: rgba(255,255,255,.2) !important;
    border: 1px solid #F1F1F1;
    top: 2px;
    right: 2px;
}

    .infobox.infobox-dark > .badge.badge-success > i {
        color: #C6E9A1;
    }

    .infobox.infobox-dark > .badge.badge-important > i {
        color: #ECB792;
    }

    .infobox.infobox-dark > .badge.badge-warning > i {
        color: #ECB792;
    }

.infobox-small {
    width: 135px;
    height: 52px;
    text-align: left;
    padding-bottom: 5px;
}

    .infobox-small > .infobox-icon, .infobox-small > .infobox-chart, .infobox-small > .infobox-progress {
        display: inline-block;
        width: 40px;
        max-width: 40px;
        height: 42px;
        line-height: 38px;
        vertical-align: middle;
    }

    .infobox-small > .infobox-data {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        max-width: 72px;
        min-width: 0;
    }

    .infobox-small > .infobox-chart > .sparkline {
        font-size: 14px;
        margin-left: 2px;
    }

.percentage,
.thumbnail-percentage {
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
}

.infobox-small .percentage {
    font-size: 13px;
    font-weight: 400;
    margin-top: 2px;
    margin-left: 2px;
}

.infobox-data-caption {
    display: block;
    width: 100%;
    padding: 10px 0;
    color: #555;
}


/* ----------------- Dropdown menu ---------------------*/
.dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%) !important;
    border-color: #edf2f9 !important;
}

    .dropdown-menu > li > a {
        padding-left: 11px;
        padding-right: 11px;
        padding-bottom: 4px;
        margin-bottom: 1px;
        margin-top: 1px;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

        .dropdown-menu > li > a > i:first-child,
        .dropdown-menu > li > a > img:first-child {
            margin-right: 8px;
            vertical-align: middle;
        }

        .dropdown-menu > li > a > img:first-child {
            height: 16px;
            width: 16px;
        }

        .dropdown-menu > li > a > span {
            vertical-align: middle;
        }

    .dropdown-menu.dropdown-only-icon {
        min-width: 50px;
    }

        .dropdown-menu.dropdown-only-icon > li {
            margin: 0 4px;
        }

            .dropdown-menu.dropdown-only-icon > li > a .ace-icon {
                width: 18px;
                display: inline-block;
                text-align: center;
            }

            .dropdown-menu.dropdown-only-icon > li > a .icon-2x {
                width: 36px;
            }



.dropdown-default > li:hover > a, .dropdown-default > li > a:focus, .dropdown-default > li > a:active, .dropdown-default > li.active > a, .dropdown-default > li.active:hover > a {
    background: #abbac3;
    color: #fff;
}

.dropdown-info > li:hover > a, .dropdown-info > li > a:focus, .dropdown-info > li > a:active, .dropdown-info > li.active > a, .dropdown-info > li.active:hover > a {
    background: #6fb3e0;
    color: #fff;
}

.dropdown-primary > li:hover > a, .dropdown-primary > li > a:focus, .dropdown-primary > li > a:active, .dropdown-primary > li.active > a, .dropdown-primary > li.active:hover > a {
    background: #428bca;
    color: #fff;
}

.dropdown-success > li:hover > a, .dropdown-success > li > a:focus, .dropdown-success > li > a:active, .dropdown-success > li.active > a, .dropdown-success > li.active:hover > a {
    background: #87b87f;
    color: #fff;
}

.dropdown-warning > li:hover > a, .dropdown-warning > li > a:focus, .dropdown-warning > li > a:active, .dropdown-warning > li.active > a, .dropdown-warning > li.active:hover > a {
    background: #ffa24d;
    color: #fff;
}

.dropdown-danger > li:hover > a, .dropdown-danger > li > a:focus, .dropdown-danger > li > a:active, .dropdown-danger > li.active > a, .dropdown-danger > li.active:hover > a {
    background: #d15b47;
    color: #fff;
}

.dropdown-inverse > li:hover > a, .dropdown-inverse > li > a:focus, .dropdown-inverse > li > a:active, .dropdown-inverse > li.active > a, .dropdown-inverse > li.active:hover > a {
    background: #555;
    color: #fff;
}

.dropdown-purple > li:hover > a, .dropdown-purple > li > a:focus, .dropdown-purple > li > a:active, .dropdown-purple > li.active > a, .dropdown-purple > li.active:hover > a {
    background: #9585bf;
    color: #fff;
}

.dropdown-pink > li:hover > a, .dropdown-pink > li > a:focus, .dropdown-pink > li > a:active, .dropdown-pink > li.active > a, .dropdown-pink > li.active:hover > a {
    background: #d6487e;
    color: #fff;
}

.dropdown-grey > li:hover > a, .dropdown-grey > li > a:focus, .dropdown-grey > li > a:active, .dropdown-grey > li.active > a, .dropdown-grey > li.active:hover > a {
    background: #a0a0a0;
    color: #fff;
}

.dropdown-light > li:hover > a, .dropdown-light > li > a:focus, .dropdown-light > li > a:active, .dropdown-light > li.active > a, .dropdown-light > li.active:hover > a {
    background: #e7e7e7;
    color: #333;
}

.dropdown-lighter > li:hover > a, .dropdown-lighter > li > a:focus, .dropdown-lighter > li > a:active, .dropdown-lighter > li.active > a, .dropdown-lighter > li.active:hover > a {
    background: #efefef;
    color: #444;
}

.dropdown-lightest > li:hover > a, .dropdown-lightest > li > a:focus, .dropdown-lightest > li > a:active, .dropdown-lightest > li.active > a, .dropdown-lightest > li.active:hover > a {
    background: #f3f3f3;
    color: #444;
}

.dropdown-yellow > li:hover > a, .dropdown-yellow > li > a:focus, .dropdown-yellow > li > a:active, .dropdown-yellow > li.active > a, .dropdown-yellow > li.active:hover > a {
    background: #fee188;
    color: #444;
}

.dropdown-yellow2 > li:hover > a, .dropdown-yellow2 > li > a:focus, .dropdown-yellow2 > li > a:active, .dropdown-yellow2 > li.active > a, .dropdown-yellow2 > li.active:hover > a {
    background: #f9e8b3;
    color: #444;
}


.dropdown-menu.dropdown-close {
    top: 92%;
    left: -5px;
}

    .dropdown-menu.dropdown-close.dropdown-menu-right {
        left: auto;
        right: -5px;
    }

.dropdown-menu.dropdown-closer {
    top: 80%;
    left: -10px;
}

    .dropdown-menu.dropdown-closer.dropdown-menu-right {
        right: -10px;
        left: auto;
    }

.dropup > .dropdown-menu, .navbar-fixed-bottom .dropdown > .dropdown-menu {
    top: auto !important;
    bottom: 100%;
}

    .dropup > .dropdown-menu.dropdown-close, .navbar-fixed-bottom .dropdown > .dropdown-menu.dropdown-close {
        bottom: 92%;
    }

    .dropup > .dropdown-menu.dropdown-closer, .navbar-fixed-bottom .dropdown > .dropdown-menu.dropdown-closer {
        bottom: 80%;
    }

.dropdown-submenu > .dropdown-menu {
    box-shadow: 0 .75rem 1.5rem rgba(255,255,255, .97);
    border-color: #edf2f9;
    border-radius: 8px;
}

.dropdown-submenu > a:after {
    margin-right: -5px;
}

.dropdown-menu-right .dropdown-submenu > a:after {
    margin-right: 10px;
}

.dropdown-50 {
    min-width: 50px;
}

.dropdown-75 {
    min-width: 75px;
}

.dropdown-100 {
    min-width: 100px;
}

.dropdown-125 {
    min-width: 125px;
}

.dropdown-150 {
    min-width: 150px;
}

.dropdown-hover {
    position: relative;
}

    .dropdown-hover:before {
        display: block;
        content: "";
        position: absolute;
        top: -2px;
        bottom: -2px;
        left: -2px;
        right: -2px;
        background-color: transparent;
    }

    .dropdown-hover:hover > .dropdown-menu {
        display: block;
    }

.dropdown-menu > .dropdown-hover > .dropdown-menu {
    top: -5px;
    left: 99%;
    right: auto;
}

    .dropdown-menu > .dropdown-hover > .dropdown-menu.dropdown-menu-right {
        left: auto;
        right: 99%;
    }

.dropup .dropdown-menu > .dropdown-hover > .dropdown-menu, .dropdown-menu > .dropdown-hover.dropup > .dropdown-menu {
    top: auto;
    bottom: -5px;
}

@media (min-width:768px) {
    .dropdown-menu.dropdown-caret:before {
        border-bottom: 7px solid rgba(0,0,0,.2);
        -moz-border-bottom-colors: rgba(0,0,0,.2);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        content: "";
        display: inline-block;
        left: 9px;
        position: absolute;
        top: -7px;
    }

    .dropdown-menu.dropdown-caret:after {
        border-bottom: 6px solid #FFF;
        -moz-border-bottom-colors: #FFF;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        content: "";
        display: inline-block;
        left: 10px;
        position: absolute;
        top: -6px;
    }
}



.dropdown-menu.dropdown-menu-right.dropdown-caret:before, .dropdown-menu.dropdown-caret-right.dropdown-caret:before {
    left: auto;
    right: 9px;
}

.dropdown-menu.dropdown-menu-right.dropdown-caret:after, .dropdown-menu.dropdown-caret-right.dropdown-caret:after {
    left: auto;
    right: 10px;
}


.dropdown-submenu .dropdown-menu.dropdown-caret:before {
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-right: 7px solid rgba(0,0,0,.2);
    -moz-border-right-colors: rgba(0,0,0,.2);
    left: -14px;
    top: 12px;
}

.dropdown-submenu .dropdown-menu.dropdown-caret:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #fff;
    -moz-border-right-colors: #FFF;
    left: -12px;
    top: 11px;
}

.dropdown-submenu .dropdown-menu.dropdown-menu-right.dropdown-caret:before {
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-right: 7px solid transparent;
    border-left: 7px solid rgba(0,0,0,.2);
    -moz-border-right-colors: rgba(0,0,0,.2);
}

.dropdown-submenu .dropdown-menu.dropdown-caret:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: 6px solid #fff;
    -moz-border-right-colors: #FFF;
}

.dropdown-submenu .dropdown-menu.dropdown-menu-right.dropdown-caret:before,
.dropdown-submenu .dropdown-menu.dropdown-caret-right.dropdown-caret:before {
    left: auto;
    right: -14px;
}

.dropdown-submenu .dropdown-menu.dropdown-menu-right.dropdown-caret:after,
.dropdown-submenu .dropdown-menu.dropdown-caret-right.dropdown-caret:after {
    left: auto;
    right: -12px;
}

.dropup > .dropdown-menu.dropdown-caret:before, .navbar-fixed-bottom .dropdown > .dropdown-menu.dropdown-caret:before {
    border-bottom-width: 0;
    border-top: 7px solid rgba(0,0,0,.2);
    -moz-border-top-colors: rgba(0,0,0,.2);
    bottom: -7px;
    top: auto;
}

.dropup > .dropdown-menu.dropdown-caret:after, .navbar-fixed-bottom .dropdown > .dropdown-menu.dropdown-caret:after {
    border-bottom-width: 0;
    border-top: 6px solid #FFF;
    -moz-border-top-colors: #FFF;
    bottom: -6px;
    top: auto;
}

.menu-text + .caret {
    margin-left: 4px;
}

.checkbox-top > * {
    display: block;
}


.msg {
    background: #fefefe;
    color: #666666;
    padding: 12px;
    border-top: solid 3px #307ecc;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
    -moz-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
    box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
}

@media (max-width: 539px) {
    /*   .dropdown-menu > li > a {
        font-size: 18px;
    }*/

    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 32px;
    }
}

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

.navbar-toggle.navbar-toggle-icon {
    position: relative;
}

    .navbar-toggle.navbar-toggle-icon .icon-bar {
        width: 16px;
        margin-left: 6px;
    }

        .navbar-toggle.navbar-toggle-icon .icon-bar.icon-dot {
            position: absolute;
            left: 10px;
            top: 0;
            margin-top: 9px;
            width: 0.4em;
            margin-left: 0;
        }

            .navbar-toggle.navbar-toggle-icon .icon-bar.icon-dot + .icon-dot {
                position: absolute;
                left: 10px;
                top: 0;
                margin-top: 15px;
                width: 0.4em;
                margin-left: 0;
            }

                .navbar-toggle.navbar-toggle-icon .icon-bar.icon-dot + .icon-dot + .icon-dot {
                    position: absolute;
                    left: 10px;
                    top: 0;
                    margin-top: 21px;
                    width: 0.4em;
                    margin-left: 0;
                }



/*============= Data from - to format  ===============*/
.data-from-to {
    /*padding: 0 5px;*/
    /*report padding มีอยู่แล้ว*/
}

    .data-from-to > .data-form {
        display: inline-block;
        margin-right: 80px;
    }

    .data-from-to > .data-to {
        display: inline-block;
        position: relative;
    }

    .data-from-to .data-text,
    .data-from-to .data-control {
        display: inline-block;
        vertical-align: middle;
    }

.data-text70 {
    width: 52px;
}

.data-text110 {
    width: 92px;
}

.data-text150 {
    width: 132px;
}

.data-text190 {
    width: 172px;
}

.data-text230 {
    width: 213px;
}

.data-text250 {
    width: 232px;
}

/*.data-from-to .data-control {
    margin-left: 15px;
}*/

.data-from-to.from-to-icon .data-to:before {
    content: "\f061";
    position: absolute;
    left: 0;
    margin-left: -50px;
    font-family: "Font Awesome 5 Pro";
    vertical-align: middle;
    line-height: 20px;
    color: #ffb752;
}

@media (max-width:767px) {
    .data-from-to > .data-form,
    .data-from-to > .data-to {
        margin: 0;
    }

    .data-from-to > .data-form {
        margin-right: 80px;
    }

    .data-from-to .data-text,
    .data-from-to .data-control {
        display: block;
        margin-left: 0;
    }

    .data-from-to .data-text {
        margin-bottom: 5px;
    }

    .data-from-to.from-to-icon .data-to:before {
        bottom: 0;
    }
}

@media (max-width:480px) {
    .data-from-to {
        text-align: left;
        width: 100%;
        display: inline-block;
        position: relative;
        padding: 0;
    }

        .data-from-to > .data-form,
        .data-from-to > .data-to {
            display: block;
        }

        .data-from-to > .data-form {
            margin-right: 0;
            margin-bottom: 30px;
        }

            .data-from-to > .data-form:after {
                content: "";
                border-bottom: 1px dotted #D8D8D8;
                width: 100%;
                position: absolute;
                text-align: center;
                bottom: 48px;
                z-index: 10;
            }

        .data-from-to .data-control > input,
        .data-from-to .data-control > select,
        .data-from-to .data-control > .NormalCalendar {
            width: 100%;
        }
        /*มี textbox time ต่อหลัง calendar*/
        .data-from-to .calendar-time > input,
        .data-from-to .calendar-time > select,
        .data-from-to .calendar-time > .NormalCalendar {
            width: 80%;
        }

    .rpt-group-detail.calendar-from-to {
        text-align: center;
    }

    .data-from-to.from-to-icon .data-to:before {
        content: "\f063";
        left: 50%;
        top: 0;
        margin-top: -20px;
        margin-left: -20px;
        z-index: 10;
        background-color: #fff;
        width: 40px;
        height: 20px;
        text-align: center;
    }
}

/*   --------------------  Start : Form-control    --------------------------     */
.resp-row.padding-top0 > .resp-col > .resp-colgroup > .resp-group-detail > .resp-caption,
.resp-row.padding-top0 > .resp-col > .resp-colgroup > .resp-group-detail > .resp-control,
.resp-row.padding-top0 > .resp-col > .resp-control {
    padding-top: 0px !important;
}

.resp-form {
    width: 100%;
    /*padding-left: 15px;
    padding-right: 15px;*/
}

.resp-row {
    width: 100%;
    clear: both;
}

    .resp-row:before, .resp-row:after {
        display: table;
        content: " ";
        clear: both;
    }

.resp-form .resp-row + .resp-row {
    margin-top: 10px;
}

    .resp-form .resp-row + .resp-row.no-margin {
        margin: 0px;
    }
/* ---------------- column* ---------------- */
.resp-col {
    float: left;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.resp-colgroup {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.resp-group-detail {
    display: table-row;
}

.resp-col.no-margin {
    margin: 0px;
}
/* ---------------- column* ---------------- */

.resp-colgroup > .resp-group-detail > .resp-control input + input,
.resp-colgroup > .resp-group-detail > .resp-control input + label,
.resp-colgroup > .resp-group-detail > .resp-control label + input {
    margin-top: 5px;
}

.resp-row .resp-caption input,
.resp-row .resp-control input {
    margin: 0px;
}

.resp-colgroup > .resp-group-detail > .resp-caption-sm input[type=checkbox] + label + input[type=checkbox],
.resp-colgroup > .resp-group-detail > .resp-caption input[type=checkbox] + label + input[type=checkbox],
.resp-colgroup > .resp-group-detail > .resp-caption-lg input[type=checkbox] + label + input[type=checkbox],
.resp-colgroup > .resp-group-detail > .resp-control input[type=checkbox] + label + input[type=checkbox] {
    margin: 0px 5px;
}

.resp-colgroup > .resp-group-detail > .resp-caption-sm + .resp-control,
.resp-colgroup > .resp-group-detail > .resp-caption + .resp-control,
.resp-colgroup > .resp-group-detail > .resp-caption-lg + .resp-control,
.resp-colgroup > .resp-group-detail > .resp-control + .resp-control {
    padding-top: 3px;
}

.resp-control.rdocheck > span.wrap {
    display: block;
}
/* radio list*/
.resp-control .rdolst > span > span.wrap,
.resp-control .chklst > span > span.wrap {
    display: inline-block;
    width: 100%;
}

.resp-col .resp-control > input[type=text],
.resp-col .resp-control > input[type=number],
.resp-col .resp-control > input[type=password],
.resp-col .resp-control > input[type=tel],
.resp-col .resp-control > input[type=time],
.resp-col .resp-control > input[type=email],
.resp-col .resp-control > select {
    width: 100%;
}

/* --------- Tablet --------- */
@media(min-width:480px) {
    .resp-control.rdocheck > span.wrap {
        display: inline-block;
    }

    .resp-colgroup > .resp-group-detail > .resp-caption-sm,
    .resp-colgroup > .resp-group-detail > .resp-caption,
    .resp-colgroup > .resp-group-detail > .resp-caption-lg,
    .resp-colgroup > .resp-group-detail > .resp-control {
        display: table-cell;
        vertical-align: top;
        padding-top: 5px;
    }

    .resp-row.caption-220 .resp-caption {
        width: 220px;
        padding-top: 5px;
    }

    .resp-row.caption-180 .resp-caption {
        width: 180px;
        padding-top: 5px;
    }

    .resp-row.caption-130 .resp-caption {
        width: 130px;
        padding-top: 5px;
    }

    .resp-row.caption-120 .resp-caption {
        width: 120px;
        padding-top: 5px;
    }

    .resp-row.caption-70 .resp-caption {
        width: 70px;
        padding-top: 5px;
    }

    .resp-row.caption-80 .resp-caption {
        width: 80px;
        padding-top: 5px;
    }

    .resp-row.caption-90 .resp-caption {
        width: 90px;
        padding-top: 5px;
    }

    .resp-row.caption-lg .resp-caption {
        width: 150px;
        padding-top: 5px;
    }

    .resp-row .resp-caption {
        width: 110px;
    }

    .resp-row.caption-sm .resp-caption {
        width: 90px;
    }

    .resp-colgroup > .resp-group-detail > .resp-caption-sm + .resp-control,
    .resp-colgroup > .resp-group-detail > .resp-caption + .resp-control,
    .resp-colgroup > .resp-group-detail > .resp-caption-lg + .resp-control,
    .resp-colgroup > .resp-group-detail > .resp-control + .resp-control {
        padding-top: 5px;
        padding-left: 15px;
    }
}

@media(min-width:540px) {
    .resp-control .rdolst.rdolst-h5 > span > span.wrap,
    .resp-control .rdolst.rdolst-h4 > span > span.wrap,
    .resp-control .chklst.chklst-h4 > span > span.wrap,
    .resp-control .rdolst.rdolst-h3 > span > span.wrap,
    .resp-control .chklst.chklst-h3 > span > span.wrap,
    .resp-control .rdolst.rdolst-h2 > span > span.wrap,
    .resp-control .chklst.chklst-h2 > span > span.wrap {
        display: inline-block;
        width: 50%;
    }
}
/* --------- Tablet --------- */

/* --------- Desktop --------- */
@media(min-width:768px) {
    .resp-form {
        padding-left: 0px;
        padding-right: 0px;
    }

        .resp-form .resp-row + .resp-row {
            margin-top: 5px;
        }

    .resp-col {
        width: 100%;
    }

    .resp-row .resp-col + .resp-col {
        padding-left: 8px;
    }


    .resp-form-dynamic {
        padding-left: 5px;
        padding-right: 5px;
    }

        .resp-form-dynamic .resp-row {
            margin-left: -5px;
            margin-right: -5px;
        }

            .resp-form-dynamic .resp-row .resp-col {
                padding-left: 5px;
                padding-right: 5px;
            }

    .resp-row.resp-col-2 .resp-col {
        width: 50%;
    }


    .resp-row.resp-col-3 .resp-col {
        width: 33.33333333%;
    }

    .resp-row.resp-col-4 .resp-col {
        width: 25%;
    }

    .resp-row.caption-r .resp-caption-sm,
    .resp-row.caption-r .resp-caption,
    .resp-row.caption-r .resp-caption-lg {
        text-align: right;
    }

    .resp-col .resp-control.input-tel > input[type=text],
    .resp-col .resp-control > input[type=tel] {
        /*max-width: 150px;*/
    }

    .resp-col .resp-control.input-text > input[type=text] {
        max-width: 200px;
    }

    .resp-col .resp-control.input-email > input[type=email],
    .resp-col .resp-control.input-email > input[type=text] {
        max-width: 200px;
    }

    .resp-col .resp-control select {
        /*max-width: 350px;*/
    }

    .resp-control .rdolst.rdolst-h5 > span > span.wrap,
    .resp-control .chklst.chklst-h5 > span > span.wrap {
        display: inline-block;
        width: 18%;
    }

    .resp-control .rdolst.rdolst-h4 > span > span.wrap,
    .resp-control .chklst.chklst-h4 > span > span.wrap {
        display: inline-block;
        width: 25%;
    }

    .resp-control .rdolst.rdolst-h3 > span > span.wrap,
    .resp-control .chklst.chklst-h3 > span > span.wrap {
        display: inline-block;
        width: 33.33333333%;
    }

    .resp-control .rdolst.rdolst-h2 > span > span.wrap,
    .resp-control .chklst.chklst-h2 > span > span.wrap {
        display: inline-block;
        width: 50%;
    }
}

@media(min-width:1199px) {
    .resp-form .resp-row {
        /*padding-left: 40px;
        padding-right: 40px;*/
    }
}
/* --------- Desktop --------- */

/*   --------------------  End : Form-control     --------------------------     */


/*-----------------   PS Header -----------------*/
.ps-sub-title > .ps-toggle {
    position: relative;
    padding: 10px;
    display: block;
    background-color: #F6F6F6;
    color: #438eb9;
    text-decoration: none;
    outline: none !important;
    border-left: 2px solid #D9D9D9;
}

    .ps-sub-title > .ps-toggle[aria-expanded=false] {
        border-left-color: #D9D9D9;
    }

        .ps-sub-title > .ps-toggle[aria-expanded=false]:before {
            content: "\e080";
            font-family: 'Glyphicons Halflings';
            font-size: 13px;
            line-height: 1;
            vertical-align: middle;
            margin-right: 5px;
        }

.ps-sub-title > .ps-toggle-right[aria-expanded=false]:after {
    content: "\e113";
    font-family: 'Glyphicons Halflings';
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px;
    float: right
}

.ps-sub-title > .ps-toggle[aria-expanded=true] {
    background-color: #EDF3F7;
    border-left-color: #6EAED1;
}

    .ps-sub-title > .ps-toggle[aria-expanded=true]:before {
        content: "\e114";
        font-family: 'Glyphicons Halflings';
        font-size: 13px;
        line-height: 1;
        vertical-align: middle;
        margin-right: 5px;
    }

.ps-sub-title > .ps-toggle-right[aria-expanded=true]:after {
    content: "\e114";
    font-family: 'Glyphicons Halflings';
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px;
    float: right
}

.ps-sub-title > .ps-toggle > .title-text {
    vertical-align: middle;
}


.ps-collapse-content {
    padding-left: 15px;
    padding-right: 15px;
}

    .ps-sub-title > .desc-title-text,
    .ps-collapse-content > .desc-title-text {
        display: block;
        margin-left: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }

.ps-sub-title.mini > .ps-toggle {
    padding: 5px;
}

a.ps-toggle[aria-expanded=true] > i:before {
    content: "\e114";
}

a.ps-toggle[aria-expanded=false] > i:before {
    content: "\e080";
}

/*Color Picker*/
.dropdown-colorpicker {
    display: inline-block;
    border: 1px #E6E6E6 solid;
}

    .dropdown-colorpicker a {
        cursor: pointer;
    }

    .dropdown-colorpicker > .dropdown-menu {
        padding: 4px;
        min-width: 130px;
        max-width: 130px;
        top: 80%;
        left: -7px;
    }

        .dropdown-colorpicker > .dropdown-menu.dropdown-menu-right {
            right: -7px;
            left: auto;
        }

        .dropdown-colorpicker > .dropdown-menu > li {
            display: block;
            float: left;
            width: 20px;
            height: 20px;
            margin: 2px;
        }

            .dropdown-colorpicker > .dropdown-menu > li.separate {
                width: 100%;
                height: auto;
            }

            .dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn {
                display: block;
                width: 20px;
                height: 20px;
                margin: 0;
                padding: 0;
                border-radius: 0;
                position: relative;
                -webkit-transition: all ease .1s;
                -o-transition: all ease .1s;
                -moz-transition: all ease .1s;
                transition: all ease .1s;
                border: 1px #E6E6E6 solid;
            }

                .dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn:hover {
                    text-decoration: none;
                    opacity: .8;
                    filter: alpha(opacity=80);
                    -webkit-transform: scale(1.08,1.08);
                    -ms-transform: scale(1.08,1.08);
                    -o-transform: scale(1.08,1.08);
                    -moz-transform: scale(1.08,1.08);
                    transform: scale(1.08,1.08);
                }

                .dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn.selected {
                    overflow: hidden;
                    color: #f82020;
                }

                    .dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn.selected.dark-color {
                        overflow: hidden;
                        color: #FFF;
                    }

                    .dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn.selected:after {
                        content: "\f00c";
                        display: inline-block;
                        font-family: "Font Awesome 5 Pro";
                        font-size: 11px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        text-align: center;
                        line-height: 20px;
                    }

    .dropdown-colorpicker.disabled {
        cursor: not-allowed !important;
    }

        .dropdown-colorpicker.disabled a {
            cursor: not-allowed !important;
            pointer-events: none;
        }

.btn-colorpicker[data-class=blue],
.colorpick-btn[data-class=blue],
[data-color-bg=blue] {
    background-color: #307ECC !important;
}

.btn-colorpicker[data-class=blue2],
.colorpick-btn[data-class=blue2],
[data-color-bg=blue2] {
    background-color: #5090C1 !important;
}

.btn-colorpicker[data-class=blue3],
.colorpick-btn[data-class=blue3],
[data-color-bg=blue3] {
    background-color: #6379AA !important;
}

.btn-colorpicker[data-class=blue-rc],
.colorpick-btn[data-class=blue-rc],
[data-color-bg=blue-rc] {
    background-color: #307ECC !important;
}

.btn-colorpicker[data-class=green],
.colorpick-btn[data-class=green],
[data-color-bg=green] {
    background-color: #82AF6F !important;
}

.btn-colorpicker[data-class=green2],
.colorpick-btn[data-class=green2],
[data-color-bg=green2] {
    background-color: #2E8965 !important;
}

.btn-colorpicker[data-class=green3],
.colorpick-btn[data-class=green3],
[data-color-bg=green3] {
    background-color: #5FBC47 !important;
}

.btn-colorpicker[data-class=green-rc],
.colorpick-btn[data-class=green-rc],
[data-color-bg=green-rc] {
    background-color: #6ab43e !important;
}

.btn-colorpicker[data-class=red],
.colorpick-btn[data-class=red],
[data-color-bg=red] {
    background-color: #E2755F !important;
}

.btn-colorpicker[data-class=red2],
.colorpick-btn[data-class=red2],
[data-color-bg=red2] {
    background-color: #E04141 !important;
}

.btn-colorpicker[data-class=red3],
.colorpick-btn[data-class=red3],
[data-color-bg=red3] {
    background-color: #D15B47 !important;
}

.btn-colorpicker[data-class=orange],
.colorpick-btn[data-class=orange],
[data-color-bg=orange] {
    background-color: #FFC657 !important;
}

.btn-colorpicker[data-class=orange2],
.colorpick-btn[data-class=orange2],
[data-color-bg=orange2] {
    background-color: #ffad46 !important;
}

.btn-colorpicker[data-class=yellow],
.colorpick-btn[data-class=yellow],
[data-color-bg=yellow] {
    background-color: #fbe983 !important;
}

.btn-colorpicker[data-class=purple],
.colorpick-btn[data-class=purple],
[data-color-bg=purple] {
    background-color: #7E6EB0 !important;
}

.btn-colorpicker[data-class=pink],
.colorpick-btn[data-class=pink],
[data-color-bg=pink] {
    background-color: #CE6F9E !important;
}

.btn-colorpicker[data-class=pink-rc],
.colorpick-btn[data-class=pink-rc],
[data-color-bg=pink-rc] {
    background-color: #f8bbd0 !important;
}

.btn-colorpicker[data-class=dark],
.colorpick-btn[data-class=dark],
[data-color-bg=dark] {
    background-color: #404040 !important;
}

.btn-colorpicker[data-class=dark-rc],
.colorpick-btn[data-class=dark-rc],
[data-color-bg=dark-rc] {
    background-color: #1f1f1f !important;
}

.btn-colorpicker[data-class=grey],
.colorpick-btn[data-class=grey],
[data-color-bg=grey] {
    background-color: #848484 !important;
}

.btn-colorpicker[data-class=default],
.colorpick-btn[data-class=default],
[data-color-bg=default] {
    background-color: #EEE !important;
}

.btn-colorpicker[data-class=stdgreen],
.colorpick-btn[data-class=stdgreen],
[data-color-bg=stdgreen] {
    background-color: green !important;
}

.btn-colorpicker[data-class=stdlime],
.colorpick-btn[data-class=stdlime],
[data-color-bg=stdlime] {
    background-color: lime !important;
}

.btn-colorpicker[data-class=stdteal],
.colorpick-btn[data-class=stdteal],
[data-color-bg=stdteal] {
    background-color: teal !important;
}

.btn-colorpicker[data-class=stdcyan],
.colorpick-btn[data-class=stdcyan],
[data-color-bg=stdcyan] {
    background-color: cyan !important;
}

.btn-colorpicker[data-class=stdnavy],
.colorpick-btn[data-class=stdnavy],
[data-color-bg=stdnavy] {
    background-color: navy !important;
}

.btn-colorpicker[data-class=stdblue],
.colorpick-btn[data-class=stdblue],
[data-color-bg=stdblue] {
    background-color: blue !important;
}

.btn-colorpicker[data-class=stdpurple],
.colorpick-btn[data-class=stdpurple],
[data-color-bg=stdpurple] {
    background-color: purple !important;
}

.btn-colorpicker[data-class=stdmagenta],
.colorpick-btn[data-class=stdmagenta],
[data-color-bg=stdmagenta] {
    background-color: magenta !important;
}

.btn-colorpicker[data-class=stdmaroon],
.colorpick-btn[data-class=stdmaroon],
[data-color-bg=stdmaroon] {
    background-color: maroon !important;
}

.btn-colorpicker[data-class=stdred],
.colorpick-btn[data-class=stdred],
[data-color-bg=stdred] {
    background-color: red !important;
}

.btn-colorpicker[data-class=stdolive],
.colorpick-btn[data-class=stdolive],
[data-color-bg=stdolive] {
    background-color: olive !important;
}

.btn-colorpicker[data-class=stdyellow],
.colorpick-btn[data-class=stdyellow],
[data-color-bg=stdyellow] {
    background-color: yellow !important;
}

.btn-colorpicker[data-class=stdorange],
.colorpick-btn[data-class=stdorange],
[data-color-bg=stdorange] {
    background-color: orange !important;
}

.btn-colorpicker[data-class=stdsilver],
.colorpick-btn[data-class=stdsilver],
[data-color-bg=stdsilver] {
    background-color: silver !important;
}

.btn-colorpicker[data-class=stdgrey],
.colorpick-btn[data-class=stdgrey],
[data-color-bg=stdgrey] {
    background-color: grey !important;
}

.btn-colorpicker[data-class=stdblack],
.colorpick-btn[data-class=stdblack],
[data-color-bg=stdblack] {
    background-color: black !important;
}




/* Turquoise */
.btn-colorpicker[data-class=turquoise],
.colorpick-btn[data-class=turquoise],
[data-color-bg=turquoise] {
    background-color: #1abc9c !important;
}

.btn-colorpicker[data-class=turquoise-50], .colorpick-btn[data-class=turquoise-50], [data-color-bg=turquoise-50] {
    background-color: #e8f8f5 !important;
}

.btn-colorpicker[data-class=turquoise-100], .colorpick-btn[data-class=turquoise-100], [data-color-bg=turquoise-100] {
    background-color: #d1f2eb !important;
}

.btn-colorpicker[data-class=turquoise-200], .colorpick-btn[data-class=turquoise-200], [data-color-bg=turquoise-200] {
    background-color: #a3e4d7 !important;
}

.btn-colorpicker[data-class=turquoise-300], .colorpick-btn[data-class=turquoise-300], [data-color-bg=turquoise-300] {
    background-color: #76d7c4 !important;
}

.btn-colorpicker[data-class=turquoise-400], .colorpick-btn[data-class=turquoise-400], [data-color-bg=turquoise-400] {
    background-color: #48c9b0 !important;
}

.btn-colorpicker[data-class=turquoise-500], .colorpick-btn[data-class=turquoise-500], [data-color-bg=turquoise-500] {
    background-color: #1abc9c !important;
}

.btn-colorpicker[data-class=turquoise-600], .colorpick-btn[data-class=turquoise-600], [data-color-bg=turquoise-600] {
    background-color: #17a589 !important;
}

.btn-colorpicker[data-class=turquoise-700], .colorpick-btn[data-class=turquoise-700], [data-color-bg=turquoise-700] {
    background-color: #148f77 !important;
}

.btn-colorpicker[data-class=turquoise-800], .colorpick-btn[data-class=turquoise-800], [data-color-bg=turquoise-800] {
    background-color: #117864 !important;
}

.btn-colorpicker[data-class=turquoise-900], .colorpick-btn[data-class=turquoise-900], [data-color-bg=turquoise-900] {
    background-color: #0e6251 !important;
}

/* Green Sea */
.btn-colorpicker[data-class=green-sea], .colorpick-btn[data-class=green-sea], [data-color-bg=green-sea] {
    background-color: #16a085 !important;
}

.btn-colorpicker[data-class=green-sea-50], .colorpick-btn[data-class=green-sea-50], [data-color-bg=green-sea-50] {
    background-color: #e8f6f3 !important;
}

.btn-colorpicker[data-class=green-sea-100], .colorpick-btn[data-class=green-sea-100], [data-color-bg=green-sea-100] {
    background-color: #d0ece7 !important;
}

.btn-colorpicker[data-class=green-sea-200], .colorpick-btn[data-class=green-sea-200], [data-color-bg=green-sea-200] {
    background-color: #a2d9ce !important;
}

.btn-colorpicker[data-class=green-sea-300], .colorpick-btn[data-class=green-sea-300], [data-color-bg=green-sea-300] {
    background-color: #73c6b6 !important;
}

.btn-colorpicker[data-class=green-sea-400], .colorpick-btn[data-class=green-sea-400], [data-color-bg=green-sea-400] {
    background-color: #45b39d !important;
}

.btn-colorpicker[data-class=green-sea-500], .colorpick-btn[data-class=green-sea-500], [data-color-bg=green-sea-500] {
    background-color: #16a085 !important;
}

.btn-colorpicker[data-class=green-sea-600], .colorpick-btn[data-class=green-sea-600], [data-color-bg=green-sea-600] {
    background-color: #138d75 !important;
}

.btn-colorpicker[data-class=green-sea-700], .colorpick-btn[data-class=green-sea-700], [data-color-bg=green-sea-700] {
    background-color: #117a65 !important;
}

.btn-colorpicker[data-class=green-sea-800], .colorpick-btn[data-class=green-sea-800], [data-color-bg=green-sea-800] {
    background-color: #0e6655 !important;
}

.btn-colorpicker[data-class=green-sea-900], .colorpick-btn[data-class=green-sea-900], [data-color-bg=green-sea-900] {
    background-color: #0b5345 !important;
}

/* Emerald */
.btn-colorpicker[data-class=emerald], .colorpick-btn[data-class=emerald], [data-color-bg=emerald] {
    background-color: #2ecc71 !important;
}

.btn-colorpicker[data-class=emerald-50], .colorpick-btn[data-class=emerald-50], [data-color-bg=emerald-50] {
    background-color: #eafaf1 !important;
}

.btn-colorpicker[data-class=emerald-100], .colorpick-btn[data-class=emerald-100], [data-color-bg=emerald-100] {
    background-color: #d5f5e3 !important;
}

.btn-colorpicker[data-class=emerald-200], .colorpick-btn[data-class=emerald-200], [data-color-bg=emerald-200] {
    background-color: #abebc6 !important;
}

.btn-colorpicker[data-class=emerald-300], .colorpick-btn[data-class=emerald-300], [data-color-bg=emerald-300] {
    background-color: #82e0aa !important;
}

.btn-colorpicker[data-class=emerald-400], .colorpick-btn[data-class=emerald-400], [data-color-bg=emerald-400] {
    background-color: #58d68d !important;
}

.btn-colorpicker[data-class=emerald-500], .colorpick-btn[data-class=emerald-500], [data-color-bg=emerald-500] {
    background-color: #2ecc71 !important;
}

.btn-colorpicker[data-class=emerald-600], .colorpick-btn[data-class=emerald-600], [data-color-bg=emerald-600] {
    background-color: #28b463 !important;
}

.btn-colorpicker[data-class=emerald-700], .colorpick-btn[data-class=emerald-700], [data-color-bg=emerald-700] {
    background-color: #239b56 !important;
}

.btn-colorpicker[data-class=emerald-800], .colorpick-btn[data-class=emerald-800], [data-color-bg=emerald-800] {
    background-color: #1d8348 !important;
}

.btn-colorpicker[data-class=emerald-900], .colorpick-btn[data-class=emerald-900], [data-color-bg=emerald-900] {
    background-color: #186a3b !important;
}

/* Nephritis */
.btn-colorpicker[data-class=nephritis], .colorpick-btn[data-class=nephritis], [data-color-bg=nephritis] {
    background-color: #27ae60 !important;
}

.btn-colorpicker[data-class=nephritis-50], .colorpick-btn[data-class=nephritis-50], [data-color-bg=nephritis-50] {
    background-color: #e9f7ef !important;
}

.btn-colorpicker[data-class=nephritis-100], .colorpick-btn[data-class=nephritis-100], [data-color-bg=nephritis-100] {
    background-color: #d4efdf !important;
}

.btn-colorpicker[data-class=nephritis-200], .colorpick-btn[data-class=nephritis-200], [data-color-bg=nephritis-200] {
    background-color: #a9dfbf !important;
}

.btn-colorpicker[data-class=nephritis-300], .colorpick-btn[data-class=nephritis-300], [data-color-bg=nephritis-300] {
    background-color: #7dcea0 !important;
}

.btn-colorpicker[data-class=nephritis-400], .colorpick-btn[data-class=nephritis-400], [data-color-bg=nephritis-400] {
    background-color: #52be80 !important;
}

.btn-colorpicker[data-class=nephritis-500], .colorpick-btn[data-class=nephritis-500], [data-color-bg=nephritis-500] {
    background-color: #27ae60 !important;
}

.btn-colorpicker[data-class=nephritis-600], .colorpick-btn[data-class=nephritis-600], [data-color-bg=nephritis-600] {
    background-color: #229954 !important;
}

.btn-colorpicker[data-class=nephritis-700], .colorpick-btn[data-class=nephritis-700], [data-color-bg=nephritis-700] {
    background-color: #1e8449 !important;
}

.btn-colorpicker[data-class=nephritis-800], .colorpick-btn[data-class=nephritis-800], [data-color-bg=nephritis-800] {
    background-color: #196f3d !important;
}

.btn-colorpicker[data-class=nephritis-900], .colorpick-btn[data-class=nephritis-900], [data-color-bg=nephritis-900] {
    background-color: #145a32 !important;
}

/* Peter River */
.btn-colorpicker[data-class=peter-river], .colorpick-btn[data-class=peter-river], [data-color-bg=peter-river] {
    background-color: #3498db !important;
}

.btn-colorpicker[data-class=peter-river-50], .colorpick-btn[data-class=peter-river-50], [data-color-bg=peter-river-50] {
    background-color: #ebf5fb !important;
}

.btn-colorpicker[data-class=peter-river-100], .colorpick-btn[data-class=peter-river-100], [data-color-bg=peter-river-100] {
    background-color: #d6eaf8 !important;
}

.btn-colorpicker[data-class=peter-river-200], .colorpick-btn[data-class=peter-river-200], [data-color-bg=peter-river-200] {
    background-color: #aed6f1 !important;
}

.btn-colorpicker[data-class=peter-river-300], .colorpick-btn[data-class=peter-river-300], [data-color-bg=peter-river-300] {
    background-color: #85c1e9 !important;
}

.btn-colorpicker[data-class=peter-river-400], .colorpick-btn[data-class=peter-river-400], [data-color-bg=peter-river-400] {
    background-color: #5dade2 !important;
}

.btn-colorpicker[data-class=peter-river-500], .colorpick-btn[data-class=peter-river-500], [data-color-bg=peter-river-500] {
    background-color: #3498db !important;
}

.btn-colorpicker[data-class=peter-river-600], .colorpick-btn[data-class=peter-river-600], [data-color-bg=peter-river-600] {
    background-color: #2e86c1 !important;
}

.btn-colorpicker[data-class=peter-river-700], .colorpick-btn[data-class=peter-river-700], [data-color-bg=peter-river-700] {
    background-color: #2874a6 !important;
}

.btn-colorpicker[data-class=peter-river-800], .colorpick-btn[data-class=peter-river-800], [data-color-bg=peter-river-800] {
    background-color: #21618c !important;
}

.btn-colorpicker[data-class=peter-river-900], .colorpick-btn[data-class=peter-river-900], [data-color-bg=peter-river-900] {
    background-color: #1b4f72 !important;
}

/* Belize Hole */
.btn-colorpicker[data-class=belize-hole], .colorpick-btn[data-class=belize-hole], [data-color-bg=belize-hole] {
    background-color: #2980b9 !important;
}

.btn-colorpicker[data-class=belize-hole-50], .colorpick-btn[data-class=belize-hole-50], [data-color-bg=belize-hole-50] {
    background-color: #eaf2f8 !important;
}

.btn-colorpicker[data-class=belize-hole-100], .colorpick-btn[data-class=belize-hole-100], [data-color-bg=belize-hole-100] {
    background-color: #d4e6f1 !important;
}

.btn-colorpicker[data-class=belize-hole-200], .colorpick-btn[data-class=belize-hole-200], [data-color-bg=belize-hole-200] {
    background-color: #a9cce3 !important;
}

.btn-colorpicker[data-class=belize-hole-300], .colorpick-btn[data-class=belize-hole-300], [data-color-bg=belize-hole-300] {
    background-color: #7fb3d5 !important;
}

.btn-colorpicker[data-class=belize-hole-400], .colorpick-btn[data-class=belize-hole-400], [data-color-bg=belize-hole-400] {
    background-color: #5499c7 !important;
}

.btn-colorpicker[data-class=belize-hole-500], .colorpick-btn[data-class=belize-hole-500], [data-color-bg=belize-hole-500] {
    background-color: #2980b9 !important;
}

.btn-colorpicker[data-class=belize-hole-600], .colorpick-btn[data-class=belize-hole-600], [data-color-bg=belize-hole-600] {
    background-color: #2471a3 !important;
}

.btn-colorpicker[data-class=belize-hole-700], .colorpick-btn[data-class=belize-hole-700], [data-color-bg=belize-hole-700] {
    background-color: #1f618d !important;
}

.btn-colorpicker[data-class=belize-hole-800], .colorpick-btn[data-class=belize-hole-800], [data-color-bg=belize-hole-800] {
    background-color: #1a5276 !important;
}

.btn-colorpicker[data-class=belize-hole-900], .colorpick-btn[data-class=belize-hole-900], [data-color-bg=belize-hole-900] {
    background-color: #154360 !important;
}

/* Amethyst */
.btn-colorpicker[data-class=amethyst], .colorpick-btn[data-class=amethyst], [data-color-bg=amethyst] {
    background-color: #9b59b6 !important;
}

.btn-colorpicker[data-class=amethyst-50], .colorpick-btn[data-class=amethyst-50], [data-color-bg=amethyst-50] {
    background-color: #f5eef8 !important;
}

.btn-colorpicker[data-class=amethyst-100], .colorpick-btn[data-class=amethyst-100], [data-color-bg=amethyst-100] {
    background-color: #ebdef0 !important;
}

.btn-colorpicker[data-class=amethyst-200], .colorpick-btn[data-class=amethyst-200], [data-color-bg=amethyst-200] {
    background-color: #d7bde2 !important;
}

.btn-colorpicker[data-class=amethyst-300], .colorpick-btn[data-class=amethyst-300], [data-color-bg=amethyst-300] {
    background-color: #c39bd3 !important;
}

.btn-colorpicker[data-class=amethyst-400], .colorpick-btn[data-class=amethyst-400], [data-color-bg=amethyst-400] {
    background-color: #af7ac5 !important;
}

.btn-colorpicker[data-class=amethyst-500], .colorpick-btn[data-class=amethyst-500], [data-color-bg=amethyst-500] {
    background-color: #9b59b6 !important;
}

.btn-colorpicker[data-class=amethyst-600], .colorpick-btn[data-class=amethyst-600], [data-color-bg=amethyst-600] {
    background-color: #884ea0 !important;
}

.btn-colorpicker[data-class=amethyst-700], .colorpick-btn[data-class=amethyst-700], [data-color-bg=amethyst-700] {
    background-color: #76448a !important;
}

.btn-colorpicker[data-class=amethyst-800], .colorpick-btn[data-class=amethyst-800], [data-color-bg=amethyst-800] {
    background-color: #633974 !important;
}

.btn-colorpicker[data-class=amethyst-900], .colorpick-btn[data-class=amethyst-900], [data-color-bg=amethyst-900] {
    background-color: #512e5f !important;
}

/* Wisteria */
.btn-colorpicker[data-class=wisteria], .colorpick-btn[data-class=wisteria], [data-color-bg=wisteria] {
    background-color: #8e44ad !important;
}

.btn-colorpicker[data-class=wisteria-50], .colorpick-btn[data-class=wisteria-50], [data-color-bg=wisteria-50] {
    background-color: #f4ecf7 !important;
}

.btn-colorpicker[data-class=wisteria-100], .colorpick-btn[data-class=wisteria-100], [data-color-bg=wisteria-100] {
    background-color: #e8daef !important;
}

.btn-colorpicker[data-class=wisteria-200], .colorpick-btn[data-class=wisteria-200], [data-color-bg=wisteria-200] {
    background-color: #d2b4de !important;
}

.btn-colorpicker[data-class=wisteria-300], .colorpick-btn[data-class=wisteria-300], [data-color-bg=wisteria-300] {
    background-color: #bb8fce !important;
}

.btn-colorpicker[data-class=wisteria-400], .colorpick-btn[data-class=wisteria-400], [data-color-bg=wisteria-400] {
    background-color: #a569bd !important;
}

.btn-colorpicker[data-class=wisteria-500], .colorpick-btn[data-class=wisteria-500], [data-color-bg=wisteria-500] {
    background-color: #8e44ad !important;
}

.btn-colorpicker[data-class=wisteria-600], .colorpick-btn[data-class=wisteria-600], [data-color-bg=wisteria-600] {
    background-color: #7d3c98 !important;
}

.btn-colorpicker[data-class=wisteria-700], .colorpick-btn[data-class=wisteria-700], [data-color-bg=wisteria-700] {
    background-color: #6c3483 !important;
}

.btn-colorpicker[data-class=wisteria-800], .colorpick-btn[data-class=wisteria-800], [data-color-bg=wisteria-800] {
    background-color: #5b2c6f !important;
}

.btn-colorpicker[data-class=wisteria-900], .colorpick-btn[data-class=wisteria-900], [data-color-bg=wisteria-900] {
    background-color: #4a235a !important;
}

/* Wet Asphalt */
.btn-colorpicker[data-class=wet-asphalt], .colorpick-btn[data-class=wet-asphalt], [data-color-bg=wet-asphalt] {
    background-color: #34495e !important;
}

.btn-colorpicker[data-class=wet-asphalt-50], .colorpick-btn[data-class=wet-asphalt-50], [data-color-bg=wet-asphalt-50] {
    background-color: #ebedef !important;
}

.btn-colorpicker[data-class=wet-asphalt-100], .colorpick-btn[data-class=wet-asphalt-100], [data-color-bg=wet-asphalt-100] {
    background-color: #d6dbdf !important;
}

.btn-colorpicker[data-class=wet-asphalt-200], .colorpick-btn[data-class=wet-asphalt-200], [data-color-bg=wet-asphalt-200] {
    background-color: #aeb6bf !important;
}

.btn-colorpicker[data-class=wet-asphalt-300], .colorpick-btn[data-class=wet-asphalt-300], [data-color-bg=wet-asphalt-300] {
    background-color: #85929e !important;
}

.btn-colorpicker[data-class=wet-asphalt-400], .colorpick-btn[data-class=wet-asphalt-400], [data-color-bg=wet-asphalt-400] {
    background-color: #5d6d7e !important;
}

.btn-colorpicker[data-class=wet-asphalt-500], .colorpick-btn[data-class=wet-asphalt-500], [data-color-bg=wet-asphalt-500] {
    background-color: #34495e !important;
}

.btn-colorpicker[data-class=wet-asphalt-600], .colorpick-btn[data-class=wet-asphalt-600], [data-color-bg=wet-asphalt-600] {
    background-color: #2e4053 !important;
}

.btn-colorpicker[data-class=wet-asphalt-700], .colorpick-btn[data-class=wet-asphalt-700], [data-color-bg=wet-asphalt-700] {
    background-color: #283747 !important;
}

.btn-colorpicker[data-class=wet-asphalt-800], .colorpick-btn[data-class=wet-asphalt-800], [data-color-bg=wet-asphalt-800] {
    background-color: #212f3c !important;
}

.btn-colorpicker[data-class=wet-asphalt-900], .colorpick-btn[data-class=wet-asphalt-900], [data-color-bg=wet-asphalt-900] {
    background-color: #1b2631 !important;
}

/* Midnight Blue */
.btn-colorpicker[data-class=midnight-blue], .colorpick-btn[data-class=midnight-blue], [data-color-bg=midnight-blue] {
    background-color: #2c3e50 !important;
}

.btn-colorpicker[data-class=midnight-blue-50], .colorpick-btn[data-class=midnight-blue-50], [data-color-bg=midnight-blue-50] {
    background-color: #eaecee !important;
}

.btn-colorpicker[data-class=midnight-blue-100], .colorpick-btn[data-class=midnight-blue-100], [data-color-bg=midnight-blue-100] {
    background-color: #d5d8dc !important;
}

.btn-colorpicker[data-class=midnight-blue-200], .colorpick-btn[data-class=midnight-blue-200], [data-color-bg=midnight-blue-200] {
    background-color: #abb2b9 !important;
}

.btn-colorpicker[data-class=midnight-blue-300], .colorpick-btn[data-class=midnight-blue-300], [data-color-bg=midnight-blue-300] {
    background-color: #808b96 !important;
}

.btn-colorpicker[data-class=midnight-blue-400], .colorpick-btn[data-class=midnight-blue-400], [data-color-bg=midnight-blue-400] {
    background-color: #566573 !important;
}

.btn-colorpicker[data-class=midnight-blue-500], .colorpick-btn[data-class=midnight-blue-500], [data-color-bg=midnight-blue-500] {
    background-color: #2c3e50 !important;
}

.btn-colorpicker[data-class=midnight-blue-600], .colorpick-btn[data-class=midnight-blue-600], [data-color-bg=midnight-blue-600] {
    background-color: #273746 !important;
}

.btn-colorpicker[data-class=midnight-blue-700], .colorpick-btn[data-class=midnight-blue-700], [data-color-bg=midnight-blue-700] {
    background-color: #212f3d !important;
}

.btn-colorpicker[data-class=midnight-blue-800], .colorpick-btn[data-class=midnight-blue-800], [data-color-bg=midnight-blue-800] {
    background-color: #1c2833 !important;
}

.btn-colorpicker[data-class=midnight-blue-900], .colorpick-btn[data-class=midnight-blue-900], [data-color-bg=midnight-blue-900] {
    background-color: #17202a !important;
}

/* Sunflower */
.btn-colorpicker[data-class=sunflower], .colorpick-btn[data-class=sunflower], [data-color-bg=sunflower] {
    background-color: #f1c40f !important;
}

.btn-colorpicker[data-class=sunflower-50], .colorpick-btn[data-class=sunflower-50], [data-color-bg=sunflower-50] {
    background-color: #fef9e7 !important;
}

.btn-colorpicker[data-class=sunflower-100], .colorpick-btn[data-class=sunflower-100], [data-color-bg=sunflower-100] {
    background-color: #fcf3cf !important;
}

.btn-colorpicker[data-class=sunflower-200], .colorpick-btn[data-class=sunflower-200], [data-color-bg=sunflower-200] {
    background-color: #f9e79f !important;
}

.btn-colorpicker[data-class=sunflower-300], .colorpick-btn[data-class=sunflower-300], [data-color-bg=sunflower-300] {
    background-color: #f7dc6f !important;
}

.btn-colorpicker[data-class=sunflower-400], .colorpick-btn[data-class=sunflower-400], [data-color-bg=sunflower-400] {
    background-color: #f4d03f !important;
}

.btn-colorpicker[data-class=sunflower-500], .colorpick-btn[data-class=sunflower-500], [data-color-bg=sunflower-500] {
    background-color: #f1c40f !important;
}

.btn-colorpicker[data-class=sunflower-600], .colorpick-btn[data-class=sunflower-600], [data-color-bg=sunflower-600] {
    background-color: #d4ac0d !important;
}

.btn-colorpicker[data-class=sunflower-700], .colorpick-btn[data-class=sunflower-700], [data-color-bg=sunflower-700] {
    background-color: #b7950b !important;
}

.btn-colorpicker[data-class=sunflower-800], .colorpick-btn[data-class=sunflower-800], [data-color-bg=sunflower-800] {
    background-color: #9a7d0a !important;
}

.btn-colorpicker[data-class=sunflower-900], .colorpick-btn[data-class=sunflower-900], [data-color-bg=sunflower-900] {
    background-color: #7d6608 !important;
}

/* Orange */
.btn-colorpicker[data-class=orange], .colorpick-btn[data-class=orange], [data-color-bg=orange] {
    background-color: #f39c12 !important;
}

.btn-colorpicker[data-class=orange-50], .colorpick-btn[data-class=orange-50], [data-color-bg=orange-50] {
    background-color: #fef5e7 !important;
}

.btn-colorpicker[data-class=orange-100], .colorpick-btn[data-class=orange-100], [data-color-bg=orange-100] {
    background-color: #fdebd0 !important;
}

.btn-colorpicker[data-class=orange-200], .colorpick-btn[data-class=orange-200], [data-color-bg=orange-200] {
    background-color: #fad7a0 !important;
}

.btn-colorpicker[data-class=orange-300], .colorpick-btn[data-class=orange-300], [data-color-bg=orange-300] {
    background-color: #f8c471 !important;
}

.btn-colorpicker[data-class=orange-400], .colorpick-btn[data-class=orange-400], [data-color-bg=orange-400] {
    background-color: #f5b041 !important;
}

.btn-colorpicker[data-class=orange-500], .colorpick-btn[data-class=orange-500], [data-color-bg=orange-500] {
    background-color: #f39c12 !important;
}

.btn-colorpicker[data-class=orange-600], .colorpick-btn[data-class=orange-600], [data-color-bg=orange-600] {
    background-color: #d68910 !important;
}

.btn-colorpicker[data-class=orange-700], .colorpick-btn[data-class=orange-700], [data-color-bg=orange-700] {
    background-color: #b9770e !important;
}

.btn-colorpicker[data-class=orange-800], .colorpick-btn[data-class=orange-800], [data-color-bg=orange-800] {
    background-color: #9c640c !important;
}

.btn-colorpicker[data-class=orange-900], .colorpick-btn[data-class=orange-900], [data-color-bg=orange-900] {
    background-color: #7e5109 !important;
}

/* Carrot */
.btn-colorpicker[data-class=carrot], .colorpick-btn[data-class=carrot], [data-color-bg=carrot] {
    background-color: #e67e22 !important;
}

.btn-colorpicker[data-class=carrot-50], .colorpick-btn[data-class=carrot-50], [data-color-bg=carrot-50] {
    background-color: #fdf2e9 !important;
}

.btn-colorpicker[data-class=carrot-100], .colorpick-btn[data-class=carrot-100], [data-color-bg=carrot-100] {
    background-color: #fae5d3 !important;
}

.btn-colorpicker[data-class=carrot-200], .colorpick-btn[data-class=carrot-200], [data-color-bg=carrot-200] {
    background-color: #f5cba7 !important;
}

.btn-colorpicker[data-class=carrot-300], .colorpick-btn[data-class=carrot-300], [data-color-bg=carrot-300] {
    background-color: #f0b27a !important;
}

.btn-colorpicker[data-class=carrot-400], .colorpick-btn[data-class=carrot-400], [data-color-bg=carrot-400] {
    background-color: #eb984e !important;
}

.btn-colorpicker[data-class=carrot-500], .colorpick-btn[data-class=carrot-500], [data-color-bg=carrot-500] {
    background-color: #e67e22 !important;
}

.btn-colorpicker[data-class=carrot-600], .colorpick-btn[data-class=carrot-600], [data-color-bg=carrot-600] {
    background-color: #ca6f1e !important;
}

.btn-colorpicker[data-class=carrot-700], .colorpick-btn[data-class=carrot-700], [data-color-bg=carrot-700] {
    background-color: #af601a !important;
}

.btn-colorpicker[data-class=carrot-800], .colorpick-btn[data-class=carrot-800], [data-color-bg=carrot-800] {
    background-color: #935116 !important;
}

.btn-colorpicker[data-class=carrot-900], .colorpick-btn[data-class=carrot-900], [data-color-bg=carrot-900] {
    background-color: #784212 !important;
}

/* Pumpkin */
.btn-colorpicker[data-class=pumpkin], .colorpick-btn[data-class=pumpkin], [data-color-bg=pumpkin] {
    background-color: #d35400 !important;
}

.btn-colorpicker[data-class=pumpkin-50], .colorpick-btn[data-class=pumpkin-50], [data-color-bg=pumpkin-50] {
    background-color: #fbeee6 !important;
}

.btn-colorpicker[data-class=pumpkin-100], .colorpick-btn[data-class=pumpkin-100], [data-color-bg=pumpkin-100] {
    background-color: #f6ddcc !important;
}

.btn-colorpicker[data-class=pumpkin-200], .colorpick-btn[data-class=pumpkin-200], [data-color-bg=pumpkin-200] {
    background-color: #edbb99 !important;
}

.btn-colorpicker[data-class=pumpkin-300], .colorpick-btn[data-class=pumpkin-300], [data-color-bg=pumpkin-300] {
    background-color: #e59866 !important;
}

.btn-colorpicker[data-class=pumpkin-400], .colorpick-btn[data-class=pumpkin-400], [data-color-bg=pumpkin-400] {
    background-color: #dc7633 !important;
}

.btn-colorpicker[data-class=pumpkin-500], .colorpick-btn[data-class=pumpkin-500], [data-color-bg=pumpkin-500] {
    background-color: #d35400 !important;
}

.btn-colorpicker[data-class=pumpkin-600], .colorpick-btn[data-class=pumpkin-600], [data-color-bg=pumpkin-600] {
    background-color: #ba4a00 !important;
}

.btn-colorpicker[data-class=pumpkin-700], .colorpick-btn[data-class=pumpkin-700], [data-color-bg=pumpkin-700] {
    background-color: #a04000 !important;
}

.btn-colorpicker[data-class=pumpkin-800], .colorpick-btn[data-class=pumpkin-800], [data-color-bg=pumpkin-800] {
    background-color: #873600 !important;
}

.btn-colorpicker[data-class=pumpkin-900], .colorpick-btn[data-class=pumpkin-900], [data-color-bg=pumpkin-900] {
    background-color: #6e2c00 !important;
}

/* Alizarin */
.btn-colorpicker[data-class=alizarin], .colorpick-btn[data-class=alizarin], [data-color-bg=alizarin] {
    background-color: #e74c3c !important;
}

.btn-colorpicker[data-class=alizarin-50], .colorpick-btn[data-class=alizarin-50], [data-color-bg=alizarin-50] {
    background-color: #fdedec !important;
}

.btn-colorpicker[data-class=alizarin-100], .colorpick-btn[data-class=alizarin-100], [data-color-bg=alizarin-100] {
    background-color: #fadbd8 !important;
}

.btn-colorpicker[data-class=alizarin-200], .colorpick-btn[data-class=alizarin-200], [data-color-bg=alizarin-200] {
    background-color: #f5b7b1 !important;
}

.btn-colorpicker[data-class=alizarin-300], .colorpick-btn[data-class=alizarin-300], [data-color-bg=alizarin-300] {
    background-color: #f1948a !important;
}

.btn-colorpicker[data-class=alizarin-400], .colorpick-btn[data-class=alizarin-400], [data-color-bg=alizarin-400] {
    background-color: #ec7063 !important;
}

.btn-colorpicker[data-class=alizarin-500], .colorpick-btn[data-class=alizarin-500], [data-color-bg=alizarin-500] {
    background-color: #e74c3c !important;
}

.btn-colorpicker[data-class=alizarin-600], .colorpick-btn[data-class=alizarin-600], [data-color-bg=alizarin-600] {
    background-color: #cb4335 !important;
}

.btn-colorpicker[data-class=alizarin-700], .colorpick-btn[data-class=alizarin-700], [data-color-bg=alizarin-700] {
    background-color: #b03a2e !important;
}

.btn-colorpicker[data-class=alizarin-800], .colorpick-btn[data-class=alizarin-800], [data-color-bg=alizarin-800] {
    background-color: #943126 !important;
}

.btn-colorpicker[data-class=alizarin-900], .colorpick-btn[data-class=alizarin-900], [data-color-bg=alizarin-900] {
    background-color: #78281f !important;
}

/* Pomegranate */
.btn-colorpicker[data-class=pomegranate], .colorpick-btn[data-class=pomegranate], [data-color-bg=pomegranate] {
    background-color: #c0392b !important;
}

.btn-colorpicker[data-class=pomegranate-50], .colorpick-btn[data-class=pomegranate-50], [data-color-bg=pomegranate-50] {
    background-color: #f9ebea !important;
}

.btn-colorpicker[data-class=pomegranate-100], .colorpick-btn[data-class=pomegranate-100], [data-color-bg=pomegranate-100] {
    background-color: #f2d7d5 !important;
}

.btn-colorpicker[data-class=pomegranate-200], .colorpick-btn[data-class=pomegranate-200], [data-color-bg=pomegranate-200] {
    background-color: #e6b0aa !important;
}

.btn-colorpicker[data-class=pomegranate-300], .colorpick-btn[data-class=pomegranate-300], [data-color-bg=pomegranate-300] {
    background-color: #d98880 !important;
}

.btn-colorpicker[data-class=pomegranate-400], .colorpick-btn[data-class=pomegranate-400], [data-color-bg=pomegranate-400] {
    background-color: #cd6155 !important;
}

.btn-colorpicker[data-class=pomegranate-500], .colorpick-btn[data-class=pomegranate-500], [data-color-bg=pomegranate-500] {
    background-color: #c0392b !important;
}

.btn-colorpicker[data-class=pomegranate-600], .colorpick-btn[data-class=pomegranate-600], [data-color-bg=pomegranate-600] {
    background-color: #a93226 !important;
}

.btn-colorpicker[data-class=pomegranate-700], .colorpick-btn[data-class=pomegranate-700], [data-color-bg=pomegranate-700] {
    background-color: #922b21 !important;
}

.btn-colorpicker[data-class=pomegranate-800], .colorpick-btn[data-class=pomegranate-800], [data-color-bg=pomegranate-800] {
    background-color: #7b241c !important;
}

.btn-colorpicker[data-class=pomegranate-900], .colorpick-btn[data-class=pomegranate-900], [data-color-bg=pomegranate-900] {
    background-color: #641e16 !important;
}

/* Clouds */
.btn-colorpicker[data-class=clouds], .colorpick-btn[data-class=clouds], [data-color-bg=clouds] {
    background-color: #ecf0f1 !important;
}

.btn-colorpicker[data-class=clouds-50], .colorpick-btn[data-class=clouds-50], [data-color-bg=clouds-50] {
    background-color: #fdfefe !important;
}

.btn-colorpicker[data-class=clouds-100], .colorpick-btn[data-class=clouds-100], [data-color-bg=clouds-100] {
    background-color: #fbfcfc !important;
}

.btn-colorpicker[data-class=clouds-200], .colorpick-btn[data-class=clouds-200], [data-color-bg=clouds-200] {
    background-color: #f7f9f9 !important;
}

.btn-colorpicker[data-class=clouds-300], .colorpick-btn[data-class=clouds-300], [data-color-bg=clouds-300] {
    background-color: #f4f6f7 !important;
}

.btn-colorpicker[data-class=clouds-400], .colorpick-btn[data-class=clouds-400], [data-color-bg=clouds-400] {
    background-color: #f0f3f4 !important;
}

.btn-colorpicker[data-class=clouds-500], .colorpick-btn[data-class=clouds-500], [data-color-bg=clouds-500] {
    background-color: #ecf0f1 !important;
}

.btn-colorpicker[data-class=clouds-600], .colorpick-btn[data-class=clouds-600], [data-color-bg=clouds-600] {
    background-color: #d0d3d4 !important;
}

.btn-colorpicker[data-class=clouds-700], .colorpick-btn[data-class=clouds-700], [data-color-bg=clouds-700] {
    background-color: #b3b6b7 !important;
}

.btn-colorpicker[data-class=clouds-800], .colorpick-btn[data-class=clouds-800], [data-color-bg=clouds-800] {
    background-color: #979a9a !important;
}

.btn-colorpicker[data-class=clouds-900], .colorpick-btn[data-class=clouds-900], [data-color-bg=clouds-900] {
    background-color: #7b7d7d !important;
}

/* Silver */
.btn-colorpicker[data-class=silver], .colorpick-btn[data-class=silver], [data-color-bg=silver] {
    background-color: #bdc3c7 !important;
}

.btn-colorpicker[data-class=silver-50], .colorpick-btn[data-class=silver-50], [data-color-bg=silver-50] {
    background-color: #f8f9f9 !important;
}

.btn-colorpicker[data-class=silver-100], .colorpick-btn[data-class=silver-100], [data-color-bg=silver-100] {
    background-color: #f2f3f4 !important;
}

.btn-colorpicker[data-class=silver-200], .colorpick-btn[data-class=silver-200], [data-color-bg=silver-200] {
    background-color: #e5e7e9 !important;
}

.btn-colorpicker[data-class=silver-300], .colorpick-btn[data-class=silver-300], [data-color-bg=silver-300] {
    background-color: #d7dbdd !important;
}

.btn-colorpicker[data-class=silver-400], .colorpick-btn[data-class=silver-400], [data-color-bg=silver-400] {
    background-color: #cacfd2 !important;
}

.btn-colorpicker[data-class=silver-500], .colorpick-btn[data-class=silver-500], [data-color-bg=silver-500] {
    background-color: #bdc3c7 !important;
}

.btn-colorpicker[data-class=silver-600], .colorpick-btn[data-class=silver-600], [data-color-bg=silver-600] {
    background-color: #a6acaf !important;
}

.btn-colorpicker[data-class=silver-700], .colorpick-btn[data-class=silver-700], [data-color-bg=silver-700] {
    background-color: #909497 !important;
}

.btn-colorpicker[data-class=silver-800], .colorpick-btn[data-class=silver-800], [data-color-bg=silver-800] {
    background-color: #797d7f !important;
}

.btn-colorpicker[data-class=silver-900], .colorpick-btn[data-class=silver-900], [data-color-bg=silver-900] {
    background-color: #626567 !important;
}

/* Concrete */
.btn-colorpicker[data-class=concrete], .colorpick-btn[data-class=concrete], [data-color-bg=concrete] {
    background-color: #95a5a6 !important;
}

.btn-colorpicker[data-class=concrete-50], .colorpick-btn[data-class=concrete-50], [data-color-bg=concrete-50] {
    background-color: #f4f6f6 !important;
}

.btn-colorpicker[data-class=concrete-100], .colorpick-btn[data-class=concrete-100], [data-color-bg=concrete-100] {
    background-color: #eaeded !important;
}

.btn-colorpicker[data-class=concrete-200], .colorpick-btn[data-class=concrete-200], [data-color-bg=concrete-200] {
    background-color: #d5dbdb !important;
}

.btn-colorpicker[data-class=concrete-300], .colorpick-btn[data-class=concrete-300], [data-color-bg=concrete-300] {
    background-color: #bfc9ca !important;
}

.btn-colorpicker[data-class=concrete-400], .colorpick-btn[data-class=concrete-400], [data-color-bg=concrete-400] {
    background-color: #aab7b8 !important;
}

.btn-colorpicker[data-class=concrete-500], .colorpick-btn[data-class=concrete-500], [data-color-bg=concrete-500] {
    background-color: #95a5a6 !important;
}

.btn-colorpicker[data-class=concrete-600], .colorpick-btn[data-class=concrete-600], [data-color-bg=concrete-600] {
    background-color: #839192 !important;
}

.btn-colorpicker[data-class=concrete-700], .colorpick-btn[data-class=concrete-700], [data-color-bg=concrete-700] {
    background-color: #717d7e !important;
}

.btn-colorpicker[data-class=concrete-800], .colorpick-btn[data-class=concrete-800], [data-color-bg=concrete-800] {
    background-color: #5f6a6a !important;
}

.btn-colorpicker[data-class=concrete-900], .colorpick-btn[data-class=concrete-900], [data-color-bg=concrete-900] {
    background-color: #4d5656 !important;
}

/* Asbestos */
.btn-colorpicker[data-class=asbestos], .colorpick-btn[data-class=asbestos], [data-color-bg=asbestos] {
    background-color: #7f8c8d !important;
}

.btn-colorpicker[data-class=asbestos-50], .colorpick-btn[data-class=asbestos-50], [data-color-bg=asbestos-50] {
    background-color: #f2f4f4 !important;
}

.btn-colorpicker[data-class=asbestos-100], .colorpick-btn[data-class=asbestos-100], [data-color-bg=asbestos-100] {
    background-color: #e5e8e8 !important;
}

.btn-colorpicker[data-class=asbestos-200], .colorpick-btn[data-class=asbestos-200], [data-color-bg=asbestos-200] {
    background-color: #ccd1d1 !important;
}

.btn-colorpicker[data-class=asbestos-300], .colorpick-btn[data-class=asbestos-300], [data-color-bg=asbestos-300] {
    background-color: #b2babb !important;
}

.btn-colorpicker[data-class=asbestos-400], .colorpick-btn[data-class=asbestos-400], [data-color-bg=asbestos-400] {
    background-color: #99a3a4 !important;
}

.btn-colorpicker[data-class=asbestos-500], .colorpick-btn[data-class=asbestos-500], [data-color-bg=asbestos-500] {
    background-color: #7f8c8d !important;
}

.btn-colorpicker[data-class=asbestos-600], .colorpick-btn[data-class=asbestos-600], [data-color-bg=asbestos-600] {
    background-color: #707b7c !important;
}

.btn-colorpicker[data-class=asbestos-700], .colorpick-btn[data-class=asbestos-700], [data-color-bg=asbestos-700] {
    background-color: #616a6b !important;
}

.btn-colorpicker[data-class=asbestos-800], .colorpick-btn[data-class=asbestos-800], [data-color-bg=asbestos-800] {
    background-color: #515a5a !important;
}

.btn-colorpicker[data-class=asbestos-900], .colorpick-btn[data-class=asbestos-900], [data-color-bg=asbestos-900] {
    background-color: #424949 !important;
}



.btn-colorpicker {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #DDD;
    vertical-align: middle;
    border-radius: 0;
}

/* ---------- Switch (Checkbox) -------------*/
input[type=checkbox].ps, input[type=radio].ps {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

label input[type=checkbox].ps, label input[type=radio].ps {
    z-index: -100 !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(1px,1px,1px,1px);
    position: absolute;
}

input[type=checkbox].ps:checked, input[type=checkbox].ps:focus, input[type=radio].ps:checked, input[type=radio].ps:focus {
    outline: 0 !important;
}

input[type=checkbox].ps + .lbl, input[type=radio].ps + .lbl {
    position: relative;
    display: inline-block;
    margin: 0;
    line-height: 20px;
    min-height: 18px;
    min-width: 18px;
    font-weight: 400;
    cursor: pointer;
}

    input[type=checkbox].ps + .lbl::before, input[type=radio].ps + .lbl::before {
        cursor: pointer;
        font-family: "Font Awesome 5 Pro" !important;
        font-weight: 400;
        font-size: 12px;
        color: #FFF;
        content: "\a0";
        background-color: #FAFAFA;
        border: 1px solid #C8C8C8;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
        border-radius: 0;
        display: inline-block;
        text-align: center;
        height: 16px;
        line-height: 14px;
        min-width: 16px;
        margin-right: 5px;
        position: relative;
        top: -1px;
    }

input[type=checkbox].ps:checked + .lbl::before, input[type=radio].ps:checked + .lbl::before {
    display: inline-block;
    content: '\f00c';
    color: #32A3CE;
    background-color: #F5F8FC;
    border-color: #ADB8C0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
}

input[type=checkbox].ps + .lbl:hover::before, input[type=checkbox].ps:hover + .lbl::before, input[type=radio].ps + .lbl:hover::before, input[type=radio].ps:hover + .lbl::before {
    border-color: #FF893C;
}

input[type=checkbox].ps:focus + .lbl::before, input[type=radio].ps:focus + .lbl::before {
    border-color: #F59942;
}

input[type=checkbox].ps:active + .lbl::before, input[type=checkbox].ps:checked:active + .lbl::before, input[type=radio].ps:active + .lbl::before, input[type=radio].ps:checked:active + .lbl::before {
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 1px 3px rgba(0,0,0,.1);
}

input[type=checkbox].ps.ps-checkbox-2 + .lbl::before, input[type=radio].ps.ps-checkbox-2 + .lbl::before {
    box-shadow: none;
}

input[type=checkbox].ps.ps-checkbox-2:checked + .lbl::before, input[type=radio].ps.ps-checkbox-2:checked + .lbl::before {
    background-color: #F9A021;
    border-color: #F9A021;
    color: #FFF;
}

input[type=checkbox].ps.disabled + .lbl::before, input[type=checkbox].ps:disabled + .lbl::before, input[type=checkbox].ps[disabled] + .lbl::before, input[type=radio].ps.disabled + .lbl::before, input[type=radio].ps:disabled + .lbl::before, input[type=radio].ps[disabled] + .lbl::before {
    background-color: #DDD !important;
    border-color: #CCC !important;
    box-shadow: none !important;
    color: #BBB;
}

.checkbox label input[type=checkbox].ps + .lbl, .radio label input[type=radio].ps + .lbl {
    margin-left: -10px;
}

input[type=radio].ps + .lbl::before {
    border-radius: 100%;
    font-size: 10px;
    font-family: "Font Awesome 5 Pro" !important;
    text-shadow: 0 0 1px #32A3CE;
    line-height: 15px;
    height: 17px;
    min-width: 17px;
}

input[type=radio].ps:checked + .lbl::before {
    content: "\f111";
}

input[type=checkbox].ps.input-lg + .lbl::before {
    border-radius: 4px;
    font-size: 16px;
    height: 24px;
    line-height: 21px;
    min-width: 24px;
    top: auto;
}

input[type=radio].ps.input-lg + .lbl::before {
    font-size: 14px;
    height: 24px;
    line-height: 22px;
    min-width: 24px;
    top: auto;
}

input[type=checkbox].ps.ps-switch {
    width: 55px;
    height: 25px;
}

    input[type=checkbox].ps.ps-switch + .lbl {
        margin: 0 4px;
        min-height: 24px;
    }

        input[type=checkbox].ps.ps-switch + .lbl::before {
            font-family: 'Open Sans' !important;
            content: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
            color: #999;
            text-shadow: 0 0 0 #999;
            font-weight: 400;
            font-size: 11px;
            line-height: 18px;
            height: 20px;
            overflow: hidden;
            border-radius: 12px;
            background-color: #F5F5F5;
            -webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.15);
            box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.15);
            border: 1px solid #CCC;
            text-align: left;
            float: left;
            padding: 0;
            width: 52px;
            text-indent: -21px;
            margin-right: 0;
            -webkit-transition: text-indent .25s ease;
            -o-transition: text-indent .25s ease;
            transition: text-indent .25s ease;
            top: auto;
        }

        input[type=checkbox].ps.ps-switch + .lbl::after {
            font-family: Arial, Helvetica, sans-serif !important;
            content: 'III';
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0;
            color: #AAA;
            text-shadow: none;
            background-color: #FFF;
            border-radius: 100%;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            top: -2px;
            left: -3px;
            -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,.3);
            box-shadow: 0 1px 1px 1px rgba(0,0,0,.3);
            -webkit-transition: left .25s ease;
            -o-transition: left .25s ease;
            transition: left .25s ease;
        }

    input[type=checkbox].ps.ps-switch:checked + .lbl::before {
        text-indent: 8px;
        color: #FFF;
        text-shadow: 0 0 0 #FFF;
        background-color: #8AB2C9;
        border-color: #6A8CA8;
    }

    input[type=checkbox].ps.ps-switch:checked + .lbl::after {
        left: 34px;
        background-color: #FFF;
        color: #98A0A5;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-2 + .lbl::before {
        content: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0NO";
    }

    input[type=checkbox].ps.ps-switch.ps-switch-3 + .lbl::after {
        font-family: "Font Awesome 5 Pro" !important;
        font-size: 13px;
        line-height: 22px;
        content: "\f00d";
        top: -1px;
        text-shadow: none;
        padding: 0;
        text-align: center;
        color: #BBB;
        letter-spacing: 0;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-3:checked + .lbl::after {
        content: "\f00c";
        color: #8AB2C9;
        text-shadow: none;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-4, input[type=checkbox].ps.ps-switch.ps-switch-5 {
        width: 60px;
    }

        input[type=checkbox].ps.ps-switch.ps-switch-4 + .lbl::before, input[type=checkbox].ps.ps-switch.ps-switch-5 + .lbl::before {
            content: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
            font-size: 12px;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            border-radius: 12px;
            background-color: #8B9AA3;
            border: 1px solid #8B9AA3;
            color: #FFF;
            width: 56px;
            text-shadow: 0 0 0 #FFF;
            display: inline-block;
            position: relative;
            box-shadow: none;
            -webkit-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-4 + .lbl::after, input[type=checkbox].ps.ps-switch.ps-switch-5 + .lbl::after {
            font-family: Arial, Helvetica, sans-serif !important;
            content: 'III';
            font-size: 11px;
            position: absolute;
            top: 2px;
            left: 2px;
            letter-spacing: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-shadow: none !important;
            color: #939393;
            background-color: #FFF;
            -webkit-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-4:checked + .lbl::before, input[type=checkbox].ps.ps-switch.ps-switch-5:checked + .lbl::before {
            background-color: #468FCC;
            border-color: #468FCC;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-4:checked + .lbl::after, input[type=checkbox].ps.ps-switch.ps-switch-5:checked + .lbl::after {
            left: 34px;
            background-color: #FFF;
            color: #848484;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-5 + .lbl::before {
            content: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0NO";
        }

        input[type=checkbox].ps.ps-switch.ps-switch-5:checked + .lbl::before {
            text-indent: 8px;
        }

    input[type=checkbox].ps.ps-switch.ps-switch-6 + .lbl {
        position: relative;
    }

        input[type=checkbox].ps.ps-switch.ps-switch-6 + .lbl::before {
            font-family: "Font Awesome 5 Pro" !important;
            content: "\f00d";
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            box-shadow: none;
            border-width: 0;
            font-weight: lighter;
            font-size: 16px;
            border-radius: 12px;
            display: inline-block;
            background-color: #888;
            color: #F2F2F2;
            width: 52px;
            height: 22px;
            line-height: 21px;
            text-indent: 32px;
            -webkit-transition: background .25s ease;
            -o-transition: background .25s ease;
            transition: background .25s ease;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-6 + .lbl::after {
            content: '';
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            position: absolute;
            top: 2px;
            left: 3px;
            border-radius: 12px;
            box-shadow: 0 -1px 0 rgba(0,0,0,.25);
            width: 18px;
            height: 18px;
            text-align: center;
            background-color: #F2F2F2;
            border: 4px solid #F2F2F2;
            -webkit-transition: left .25s ease;
            -o-transition: left .25s ease;
            transition: left .25s ease;
        }

    input[type=checkbox].ps.ps-switch.ps-switch-6.switch-compare + .lbl::after {
        content: "\f0ec";
        font-family: "Font Awesome 5 Pro" !important;
        border: none;
        line-height: 18px;
        color: #337ab7;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-6:checked + .lbl::before {
        content: "\f00c";
        text-indent: 6px;
        color: #FFF;
        border-color: #B7D3E5;
        background-color: #FF893C;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-6:checked + .lbl::after {
        left: 32px;
        background-color: #FFF;
        border: 4px solid #FFF;
        text-shadow: 0 -1px 0 rgba(0,200,0,.25);
    }

    input[type=checkbox].ps.ps-switch.ps-switch-6.switch-compare:checked + .lbl::after {
        border: none;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-7 {
        width: 75px;
    }

        input[type=checkbox].ps.ps-switch.ps-switch-7 + .lbl {
            position: relative;
        }

            input[type=checkbox].ps.ps-switch.ps-switch-7 + .lbl::before {
                content: "OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON";
                font-weight: bolder;
                font-size: 13px;
                background-color: #FFF;
                border: 2px solid #AAA;
                border-radius: 0;
                box-shadow: none;
                color: #AAA;
                width: 74px;
                height: 26px;
                line-height: 22px;
                overflow: hidden;
                text-indent: 5px;
                display: inline-block;
                position: relative;
                -webkit-transition: all .25s ease;
                -o-transition: all .25s ease;
                transition: all .25s ease;
            }

            input[type=checkbox].ps.ps-switch.ps-switch-7 + .lbl::after {
                content: '\f00d';
                font-family: "Font Awesome 5 Pro" !important;
                font-size: 16px;
                position: absolute;
                top: 3px;
                left: 39px;
                width: 32px;
                height: 20px;
                line-height: 18px;
                text-align: center;
                padding: 0;
                text-indent: 0;
                background-color: #AAA;
                color: #FFF;
                border-radius: 0;
                box-shadow: none;
                -webkit-transition: all .25s ease;
                -o-transition: all .25s ease;
                transition: all .25s ease;
            }

        input[type=checkbox].ps.ps-switch.ps-switch-7:checked + .lbl::before {
            color: #468FCC;
            background-color: #FFF;
            text-indent: -28px;
            border-color: #6FB3E0;
        }

        input[type=checkbox].ps.ps-switch.ps-switch-7:checked + .lbl::after {
            left: 3px;
            content: '\f00c';
            background-color: #468FCC;
            color: #FFF;
        }

    input[type=checkbox].ps.ps-switch + .lbl[data-lbl]::before {
        content: attr(data-lbl);
    }

    input[type=checkbox].ps.ps-switch.btn-empty + .lbl::after {
        content: "";
    }

    input[type=checkbox].ps.ps-switch.btn-rotate + .lbl::after {
        content: "\2261";
        font-size: 17px;
    }


    input[type=checkbox].ps.ps-switch.btn-flat + .lbl::after, input[type=checkbox].ps.ps-switch.btn-flat + .lbl::before {
        border-radius: 0 !important;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-4 + .lbl::before, input[type=checkbox].ps.ps-switch.ps-switch-5 + .lbl::before {
        text-indent: -25px;
    }

    input[type=checkbox].ps.ps-switch.ps-switch-4:checked + .lbl::before, input[type=checkbox].ps.ps-switch.ps-switch-5:checked + .lbl::before {
        text-indent: 7px;
    }

input.ps + .lbl.padding-16::before {
    margin-right: 16px;
}

input.ps + .lbl.padding-14::before {
    margin-right: 14px;
}

input.ps + .lbl.padding-12::before {
    margin-right: 12px;
}

input.ps + .lbl.padding-10::before {
    margin-right: 10px;
}

input.ps + .lbl.padding-8::before {
    margin-right: 8px;
}

input.ps + .lbl.padding-6::before {
    margin-right: 6px;
}

input.ps + .lbl.padding-4::before {
    margin-right: 4px;
}

input.ps + .lbl.padding-2::before {
    margin-right: 2px;
}

input.ps + .lbl.padding-0::before {
    margin-right: 0;
}

/*================ Text area auto height ===================*/
/*.text-overflow-auto {
    resize: none !important;
    overflow: hidden !important;
    font-size: 11px !important;
    padding: 2px 4px 2px !important;
    line-height: 14px !important;
}*/

textarea.text-overflow-auto {
    min-height: 20px;
    resize: vertical !important; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden !important;
}


/*========== Header Information ==========*/

.header-info {
    display: table;
    width: 98%;
    width: calc(100% - 24px);
    margin: 0 auto;
}

.header-info-row {
    display: table-row;
}

.header-info-name, .header-info-value {
    display: table-cell;
    border-top: 1px dotted #D5E4F1;
}

.header-info-name {
    text-align: right;
    padding: 6px 10px 6px 4px;
    font-weight: 400;
    color: #667E99;
    background-color: transparent;
    width: 110px;
    vertical-align: middle;
    white-space: nowrap;
}

    .header-info-name.name-130 {
        width: 130px;
    }

.header-info-value {
    padding: 6px 4px 6px 6px;
}

    .header-info-value > span + span:before {
        display: inline;
        content: ",";
        margin-left: 1px;
        margin-right: 3px;
        color: #666;
        border-bottom: 1px solid #FFF;
    }

    .header-info-value > span + span.editable-container:before {
        display: none;
    }

.header-info-row:first-child .header-info-name, .header-info-row:first-child .header-info-value {
    border-top: none;
}

.header-info-striped {
    border: 1px solid #DCEBF7;
}

    .header-info-striped .header-info-name {
        color: #336199;
        background-color: #EDF3F4;
        border-top: 1px solid #F7FBFF;
    }

    .header-info-striped .header-info-value {
        border-top: 1px dotted #DCEBF7;
        padding-left: 12px;
    }

@media only screen and (max-width:480px) {
    .header-info-name {
        width: 80px;
    }

    .header-info-striped .header-info-name {
        float: none;
        width: auto;
        text-align: left;
        padding: 6px 4px 6px 10px;
        display: block;
    }

    .header-info-striped .header-info-value {
        margin-left: 10px;
        display: block;
    }
}

/*========== End : Header Information ==========*/

/*========== Easy Pie Chart ==========*/

.easy-pie-chart, .easyPieChart {
    position: relative;
    text-align: center;
}

    .easy-pie-chart canvas, .easyPieChart canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

/*========== End : Easy Pie Chart ==========*/

/*========== Widget ==========*/
.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC;
    -webkit-box-shadow: none;
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top,#FFF 0,#EEE 100%);
    background-image: -o-linear-gradient(top,#FFF 0,#EEE 100%);
    background-image: linear-gradient(to bottom,#FFF 0,#EEE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px;
}

.widget-box.transparent > .widget-header, .widget-header-flat {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.widget-header:after, .widget-header:before {
    content: "";
    display: table;
    line-height: 0;
}

.widget-header:after {
    clear: right;
}

.widget-box.collapsed > .widget-header {
    border-bottom-width: 0;
}

.collapsed.fullscreen > .widget-header {
    border-bottom-width: 1px;
}

.collapsed > .widget-body {
    display: none;
}

.widget-header-flat {
    background: #F7F7F7;
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px;
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px;
}

.widget-header > .widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline;
    font-size: 16px;
}

    .widget-header > .widget-title > .fa {
        margin-right: 5px;
        font-weight: 400;
        display: inline-block;
    }

.infobox .infobox-content:first-child, .infobox > .badge, .infobox > .stat, .percentage {
    font-weight: 700;
}

.widget-header-large > .widget-title {
    line-height: 48px;
}

.widget-header-small > .widget-title {
    line-height: 30px;
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative;
}

.widget-header-large > .widget-toolbar {
    line-height: 48px;
}

.widget-header-small > .widget-toolbar {
    line-height: 29px;
}

.widget-toolbar.no-padding {
    padding: 0;
}

.widget-toolbar.padding-5 {
    padding: 0 5px;
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0;
}

.popover-notitle + .popover .popover-title, .popover.popover-notitle .popover-title, .widget-toolbar.no-border:before {
    display: none;
}

.widget-header-large > .widget-toolbar:before {
    top: 6px;
    bottom: 6px;
}

[class*=widget-color-] > .widget-header > .widget-toolbar:before {
    border-color: #EEE;
}

.widget-color-orange > .widget-header > .widget-toolbar:before {
    border-color: #FEA;
}

.widget-color-dark > .widget-header > .widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.1);
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}

.widget-toolbar > .widget-menu > a, .widget-toolbar > a:not(.btn) {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px;
}

    .widget-toolbar > .widget-menu > a:hover, .widget-toolbar > a:not(.btn):hover {
        text-decoration: none;
    }

.widget-header-large > .widget-toolbar > .widget-menu > a, .widget-header-large > .widget-toolbar > a {
    font-size: 15px;
    margin: 0 1px;
}

.widget-toolbar > .btn {
    line-height: 27px;
    margin-top: -2px;
}

    .widget-toolbar > .btn.smaller {
        line-height: 26px;
    }

    .widget-toolbar > .btn.bigger {
        line-height: 28px;
    }

.widget-toolbar > .btn-sm {
    line-height: 24px;
}

    .widget-toolbar > .btn-sm.smaller {
        line-height: 23px;
    }

    .widget-toolbar > .btn-sm.bigger {
        line-height: 25px;
    }

.widget-toolbar > .btn-xs {
    line-height: 22px;
    font-size: 11px;
}

    .widget-toolbar > .btn-xs.smaller {
        line-height: 21px;
    }

    .widget-toolbar > .btn-xs.bigger {
        line-height: 23px;
    }

.widget-toolbar > .btn-minier {
    line-height: 18px;
}

    .widget-toolbar > .btn-minier.smaller {
        line-height: 17px;
    }

    .widget-toolbar > .btn-minier.bigger {
        line-height: 19px;
    }

.widget-toolbar > .btn-lg {
    line-height: 36px;
}

    .widget-toolbar > .btn-lg.smaller {
        line-height: 34px;
    }

    .widget-toolbar > .btn-lg.bigger {
        line-height: 38px;
    }

.widget-toolbar-dark {
    background: #444;
}

.widget-toolbar-light {
    background: rgba(255,255,255,.85);
}

.widget-toolbar > .widget-menu {
    display: inline-block;
    position: relative;
}

    .widget-toolbar > .widget-menu > a[data-action], .widget-toolbar > a[data-action] {
        -webkit-transition: transform .1s;
        -o-transition: transform .1s;
        transition: transform .1s;
    }

        .widget-toolbar > .widget-menu > a[data-action]:focus, .widget-toolbar > a[data-action]:focus {
            text-decoration: none;
            outline: 0;
        }

        .widget-toolbar > .widget-menu > a[data-action]:hover, .widget-toolbar > a[data-action]:hover {
            -moz-transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
        }

.widget-body {
    background-color: #FFF;
}

.widget-main {
    padding: 12px;
}

    .widget-main.padding-32 {
        padding: 32px;
    }

    .widget-main.padding-30 {
        padding: 30px;
    }

    .widget-main.padding-28 {
        padding: 28px;
    }

    .widget-main.padding-26 {
        padding: 26px;
    }

    .widget-main.padding-24 {
        padding: 24px;
    }

    .widget-main.padding-22 {
        padding: 22px;
    }

    .widget-main.padding-20 {
        padding: 20px;
    }

    .widget-main.padding-18 {
        padding: 18px;
    }

    .widget-main.padding-16 {
        padding: 16px;
    }

    .widget-main.padding-14 {
        padding: 14px;
    }

    .widget-main.padding-12 {
        padding: 12px;
    }

    .widget-main.padding-10 {
        padding: 10px;
    }

    .widget-main.padding-8 {
        padding: 8px;
    }

    .widget-main.padding-6 {
        padding: 6px;
    }

    .widget-main.padding-4 {
        padding: 4px;
    }

    .widget-main.padding-2 {
        padding: 2px;
    }

    .widget-main.no-padding, .widget-main.padding-0 {
        padding: 0;
    }

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
}

.widget-toolbar > .dropdown, .widget-toolbar > .dropup {
    display: inline-block;
}

.widget-toolbox.toolbox-vertical, .widget-toolbox.toolbox-vertical + .widget-main {
    display: table-cell;
    vertical-align: top;
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings], .widget-box > .widget-header > .widget-toolbar > [data-action=settings], .widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings], .widget-color-dark > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #99CADB;
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload], .widget-box > .widget-header > .widget-toolbar > [data-action=reload], .widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload], .widget-color-dark > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #ACD392;
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse], .widget-box > .widget-header > .widget-toolbar > [data-action=collapse], .widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse], .widget-color-dark > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #AAA;
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=close], .widget-box > .widget-header > .widget-toolbar > [data-action=close], .widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=close], .widget-color-dark > .widget-header > .widget-toolbar > [data-action=close] {
    color: #E09E96;
}

.widget-box[class*=widget-color-] > .widget-header {
    color: #FFF;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.widget-color-blue {
    border-color: #307ECC;
}

    .widget-color-blue > .widget-header {
        background: #307ECC;
        border-color: #307ECC;
    }

.widget-color-blue2 {
    border-color: #5090C1;
}

    .widget-color-blue2 > .widget-header {
        background: #5090C1;
        border-color: #5090C1;
    }

.widget-color-blue3 {
    border-color: #6379AA;
}

    .widget-color-blue3 > .widget-header {
        background: #6379AA;
        border-color: #6379AA;
    }

.widget-color-green {
    border-color: #82AF6F;
}

    .widget-color-green > .widget-header {
        background: #82AF6F;
        border-color: #82AF6F;
    }

.widget-color-green2 {
    border-color: #2E8965;
}

    .widget-color-green2 > .widget-header {
        background: #2E8965;
        border-color: #2E8965;
    }

.widget-color-green3 {
    border-color: #4EBC30;
}

    .widget-color-green3 > .widget-header {
        background: #4EBC30;
        border-color: #4EBC30;
    }

.widget-color-red {
    border-color: #E2755F;
}

    .widget-color-red > .widget-header {
        background: #E2755F;
        border-color: #E2755F;
    }

.widget-color-red2 {
    border-color: #E04141;
}

    .widget-color-red2 > .widget-header {
        background: #E04141;
        border-color: #E04141;
    }

.widget-color-red3 {
    border-color: #D15B47;
}

    .widget-color-red3 > .widget-header {
        background: #D15B47;
        border-color: #D15B47;
    }

.widget-color-purple {
    border-color: #7E6EB0;
}

    .widget-color-purple > .widget-header {
        background: #7E6EB0;
        border-color: #7E6EB0;
    }

.widget-color-pink {
    border-color: #CE6F9E;
}

    .widget-color-pink > .widget-header {
        background: #CE6F9E;
        border-color: #CE6F9E;
    }

.widget-color-orange {
    border-color: #E8B10D;
}

    .widget-color-orange > .widget-header {
        color: #855D10 !important;
        border-color: #E8B10D;
        background: #FFC657;
    }

.widget-color-dark {
    border-color: #5a5a5a;
}

    .widget-color-dark > .widget-header {
        border-color: #666;
        background: #404040;
    }

.widget-color-grey {
    border-color: #9e9e9e;
}

    .widget-color-grey > .widget-header {
        border-color: #aaa;
        background: #848484;
    }

.widget-box.transparent {
    border-width: 0;
}

    .widget-box.transparent > .widget-header {
        background: 0 0;
        border-width: 0;
        border-bottom: 1px solid #DCE8F1;
        color: #4383B4;
        padding-left: 3px;
    }

    .widget-box.transparent > .widget-header-large {
        padding-left: 5px;
    }

    .widget-box.transparent > .widget-header-small {
        padding-left: 1px;
    }

    .widget-box.transparent > .widget-body {
        border-width: 0;
        background-color: transparent;
    }

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action], [class*=widget-color-] > .widget-header > .widget-toolbar > [data-action] {
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings], [class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #D3E4ED;
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload], [class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #DEEAD3;
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse], [class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #E2E2E2;
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=close], [class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=close] {
    color: #FFD9D5;
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action], .widget-color-orange > .widget-header > .widget-toolbar > [data-action] {
    text-shadow: none;
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings], .widget-color-orange > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #559AAB;
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload], .widget-color-orange > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #7CA362;
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse], .widget-color-orange > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #777;
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=close], .widget-color-orange > .widget-header > .widget-toolbar > [data-action=close] {
    color: #A05656;
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0;
}

    .widget-box.light-border[class*=widget-color-]:not(.fullscreen) > .widget-header {
        border: 1px solid;
        border-color: inherit;
    }

    .widget-box.light-border[class*=widget-color-]:not(.fullscreen) > .widget-body {
        border: 1px solid #D6D6D6;
        border-width: 0 1px 1px;
    }

.widget-box.no-border {
    border-width: 0;
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040 !important;
}

    .widget-box.fullscreen:not([class*=widget-color-]) {
        border-color: #AAA;
    }

.widget-body .table {
    border-top: 1px solid #E5E5E5;
}

    .widget-body .table thead:first-child tr {
        background: #FFF;
    }

[class*=widget-color-] > .widget-body .table thead:first-child tr {
    background: repeat-x #f2f2f2;
    background-image: -webkit-linear-gradient(top,#F8F8F8 0,#ECECEC 100%);
    background-image: -o-linear-gradient(top,#F8F8F8 0,#ECECEC 100%);
    background-image: linear-gradient(to bottom,#F8F8F8 0,#ECECEC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0);
}

.infobox-dark > .infobox-icon > .ace-icon:before, .tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

.widget-body .table.table-bordered thead:first-child > tr {
    border-top-width: 0;
}

.widget-main.no-padding .table {
    margin-bottom: 0;
    border-width: 0;
}

.widget-main.no-padding .table-bordered td:first-child, .widget-main.no-padding .table-bordered th:first-child {
    border-left-width: 0;
}

.transparent > .widget-body .widget-main .table-bordered > tbody > tr > td:last-child, .transparent > .widget-body .widget-main .table-bordered > tfoot > tr > td:last-child, .transparent > .widget-body .widget-main .table-bordered > thead > tr > th:last-child, .widget-main.no-padding .table-bordered > tbody > tr > td:last-child, .widget-main.no-padding .table-bordered > tfoot > tr > td:last-child, .widget-main.no-padding .table-bordered > thead > tr > th:last-child {
    border-right-width: 0 !important;
}

.transparent > .widget-body .widget-main .table-bordered > tbody > tr:last-child > td, .widget-main.no-padding .table-bordered > tbody > tr:last-child > td {
    border-bottom-width: 0 !important;
}

.widget-body .alert:last-child {
    margin-bottom: 0;
}

.widget-main .tab-content {
    border-width: 0;
}

.widget-toolbar > .nav-tabs {
    border-bottom-width: 0;
    margin-bottom: 0;
    top: auto;
    margin-top: 3px !important;
}

    .widget-toolbar > .nav-tabs > li {
        margin-bottom: auto;
    }

        .widget-toolbar > .nav-tabs > li > a {
            box-shadow: none;
            position: relative;
            top: 1px;
            margin-top: 1px;
        }

        .widget-toolbar > .nav-tabs > li:not(.active) > a {
            border-color: transparent;
            background-color: transparent;
        }

            .widget-toolbar > .nav-tabs > li:not(.active) > a:hover {
                background-color: transparent;
            }

        .widget-toolbar > .nav-tabs > li.active > a {
            background-color: #FFF;
            border-bottom-color: transparent;
            box-shadow: none;
            margin-top: auto;
        }

.widget-header-small > .widget-toolbar > .nav-tabs > li > a {
    line-height: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.widget-header-small > .widget-toolbar > .nav-tabs > li.active > a {
    border-top-width: 2px;
}

.widget-header-large > .widget-toolbar > .nav-tabs > li > a {
    line-height: 22px;
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: 4px;
}

.widget-header-large > .widget-toolbar > .nav-tabs > li.active > a {
    margin-top: 3px;
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .nav-tabs > li > a {
    border-color: transparent;
    background-color: transparent;
    color: #FFF;
    margin-right: 1px;
}

    [class*=widget-color-] > .widget-header > .widget-toolbar > .nav-tabs > li > a:hover {
        background-color: #FFF;
        color: #555;
        border-top-color: #FFF;
    }

[class*=widget-color-] > .widget-header > .widget-toolbar > .nav-tabs > li.active > a {
    background-color: #FFF;
    color: #555;
    border-top-width: 1px;
    margin-top: 0;
}

.widget-toolbar > .nav-tabs .widget-color-orange > .widget-header > li > a {
    color: #855D10;
}

.transparent > .widget-header > .widget-toolbar > .nav-tabs > li > a {
    color: #555;
    background-color: transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

.transparent > .widget-header > .widget-toolbar > .nav-tabs > li.active > a {
    border-top-color: #4C8FBD;
    border-right: 1px solid #C5D0DC;
    border-left: 1px solid #C5D0DC;
    background-color: #FFF;
    box-shadow: none;
}

.widget-toolbox {
    background-color: #EEE;
}

    .widget-toolbox:first-child {
        padding: 2px;
        border-bottom: 1px solid #CCC;
    }

    .widget-toolbox:last-child {
        padding: 2px;
        border-top: 1px solid #CCC;
    }

.transparent > .widget-body > .widget-toolbox:last-child {
    border: none;
    border-top: 1px solid #CCC;
}

.widget-toolbox > .btn-toolbar {
    margin: 0 !important;
    padding: 0;
}

.widget-toolbox.center {
    text-align: center;
}

.widget-toolbox.toolbox-vertical {
    border-bottom-width: 0;
    border-right: 1px solid #D9D9D9;
    padding: 6px 4px;
    width: 1px;
}

.widget-toolbox.padding-16 {
    padding: 16px;
}

.widget-toolbox.padding-14 {
    padding: 14px;
}

.widget-toolbox.padding-12 {
    padding: 12px;
}

.widget-toolbox.padding-10 {
    padding: 10px;
}

.widget-toolbox.padding-8 {
    padding: 8px;
}

.widget-toolbox.padding-6 {
    padding: 6px;
}

.widget-toolbox.padding-4 {
    padding: 4px;
}

.widget-toolbox.padding-2 {
    padding: 2px;
}

.widget-toolbox.padding-0 {
    padding: 0;
}

.widget-box-overlay {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -1px;
    left: -1px;
    z-index: 999;
    text-align: center;
    min-height: 100%;
    background-color: rgba(0,0,0,.3);
}

    .widget-box-overlay > .loading-icon {
        position: relative;
        top: 20%;
        left: 0;
        right: 0;
        text-align: center;
    }

.widget-box.collapsed .widget-box-overlay > .loading-icon {
    top: 10%;
}

.widget-box-overlay > .loading-icon.icon-spin {
    -moz-animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    -o-animation-duration: 1.2s;
    -ms-animation-duration: 1.2s;
    animation-duration: 1.2s;
}

.widget-main > form, .widget-main > form .input-append, .widget-main > form .input-prepend {
    margin-bottom: 0;
}

.widget-main.no-padding > form > fieldset, .widget-main.padding-0 > form > fieldset {
    padding: 16px;
}

    .widget-main.no-padding > form > fieldset + .form-actions, .widget-main.padding-0 > form > fieldset + .form-actions {
        padding: 10px 0 12px;
    }

.widget-main.no-padding > form > .form-actions, .widget-main.padding-0 > form > .form-actions {
    margin: 0;
    padding: 10px 12px 12px;
}

.widget-placeholder {
    border: 2px dashed #D9D9D9;
}
/*========== End : Widget ==========*/

/*========== Table Responsive ==========*/

table.responsive tr {
    padding: 5px;
}

@media screen and (max-width: 767px) {
    table.responsive {
        border: 0;
        margin-bottom: 10px;
    }

        table.responsive > thead {
            display: none;
        }

        table.responsive > tbody > tr {
            display: block;
            margin-top: 5px;
        }

            table.responsive > tbody > tr > td {
                display: block;
                text-align: right;
                line-height: 20px;
                min-height: 36px;
                max-width: none !important;
                width: 100% !important;
            }

            table.responsive > tbody > tr:not([id^=note-]) > td:before {
                content: attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            table.responsive > tbody > tr.row-with-header {
                padding-top: 36px;
            }

            table.responsive > tbody > tr > td.column-header {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                max-height: 36px;
                overflow: hidden;
            }

    .widget-body .table.responsive {
        border: none;
    }

    .transparent > .widget-body .widget-main .table-bordered.responsive > tbody > tr > td:last-child,
    .transparent > .widget-body .widget-main .table-bordered.responsive > tfoot > tr > td:last-child,
    .transparent > .widget-body .widget-main .table-bordered.responsive > thead > tr > th:last-child,
    .widget-main.no-padding .table-bordered.responsive > tbody > tr > td:last-child,
    .widget-main.no-padding .table-bordered.responsive > tfoot > tr > td:last-child,
    .widget-main.no-padding .table-bordered.responsive > thead > tr > th:last-child {
        border-right-width: 1px !important;
    }

    .transparent > .widget-body .widget-main .table-bordered.responsive > tbody > tr:last-child > td,
    .widget-main.no-padding .table-bordered.responsive > tbody > tr:last-child > td {
        border-bottom-width: 1px !important;
    }

    table.table-bordered.responsive tr {
        border: 1px solid #ddd;
        border-bottom-width: 2px;
        padding: 5px;
    }

    table.table-bordered.responsive td {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px dotted #ccc;
    }

    table.table-bordered.responsive tr > td:last-child {
        border-bottom: none;
    }
}

@media screen and (max-width: 991px) {
    table.responsive {
        table-layout: auto;
    }
}

/*========== End : Table Responsive ==========*/

/*========== PS Table Responsive ==========*/

.table-responsive-toolbar {
    text-align: right;
}

@media (max-width: 767px) {
    .table.responsive > tbody > tr {
        position: relative;
    }

        .table.responsive > tbody > tr:not([ps-table-role="stucture"]):not(.no-data) {
            display: block;
        }

        .table.responsive > tbody > tr > td.markers {
            position: absolute;
            top: 8px;
            left: 5px;
            padding: 0;
            min-height: 0;
            border-bottom: none;
        }

            .table.responsive > tbody > tr > td.markers > .marker {
                float: left;
                margin-bottom: 0;
            }

        .table.responsive > tbody > tr > td.toolbars {
            line-height: 14px;
            font-size: 14px;
            padding-top: 3px;
        }

            .table.responsive > tbody > tr > td.toolbars > .tool {
                margin-bottom: 0;
            }

                .table.responsive > tbody > tr > td.toolbars > .tool + .tool {
                    margin-left: 6px;
                }

    table.responsive .mobile-marker-space {
        width: 100%;
        min-height: 30px;
    }

    table.responsive > tbody > tr > td.cell-full-form {
        text-align: left;
    }

        table.responsive > tbody > tr > td.cell-full-form:before {
            float: none;
            display: block;
            text-align: left;
        }
}

@media (min-width: 992px) {
    .table-responsive-toolbar {
        width: 100%;
        height: 35px;
        display: block;
        text-align: left;
    }

        .table-responsive-toolbar .toolbar-item[disabled] {
            border-color: #ccc;
        }

    .table.responsive td.toolbars,
    .table.responsive td.markers,
    .table.responsive th.toolbars,
    .table.responsive th.markers {
        width: 30px;
        font-size: 14px;
        text-align: center;
        vertical-align: top;
        padding-left: 4px;
        padding-right: 4px;
    }

        .table.responsive td.toolbars > .tool,
        .table.responsive td.markers > .marker {
            width: 22px;
            height: 16px;
            text-align: center;
            vertical-align: middle;
            line-height: 1;
            margin-bottom: 0;
        }

            .table.responsive td.toolbars > .tool > a {
                vertical-align: middle;
            }

            .table.responsive td.toolbars > .tool + .tool,
            .table.responsive td.markers > .marker + .marker {
                margin-top: 3px;
            }

    .table.responsive .mobile-marker-space {
        display: none !important;
    }
}

.table.borderless td,
.table.borderless th {
    border: none;
}

/*========== End : PS Table Responsive ==========*/

/*========== PS Checkbox ================*/

input[type="checkbox"].ps-checkbox,
.ps-checkbox > input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

    input[type="checkbox"].ps-checkbox:before,
    .ps-checkbox > input[type="checkbox"] {
        cursor: pointer;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 12px;
        color: #FFF;
        content: "\a0";
        background-color: #FAFAFA;
        border: 1px solid #C8C8C8;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
        border-radius: 0;
        display: block;
        text-align: center;
        height: 16px;
        line-height: 14px;
        min-width: 16px;
        position: relative;
        top: 0;
    }

        input[type="checkbox"].ps-checkbox:checked:before,
        .ps-checkbox > input[type="checkbox"]:checked:before {
            content: '\f00c';
            color: #32A3CE;
            background-color: #F5F8FC;
            border-color: #ADB8C0;
            box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
        }

        input[type="checkbox"].ps-checkbox:disabled:before,
        .ps-checkbox > input[type="checkbox"]:disabled:before {
            background-color: #eeeeee;
        }

        input[type="checkbox"].ps-checkbox:focus:before,
        .ps-checkbox > input[type="checkbox"]:focus {
            border-color: #32A3CE;
        }

/*========== End : PS Checkbox ================*/

.ps-set-info {
    display: table;
    width: 98%;
    width: calc(100% - 24px);
    margin: 0 auto;
}

.ps-info-row {
    display: table-row;
}

.ps-info-name, .ps-info-value {
    display: table-cell;
    border-top: 1px dotted #D5E4F1;
}

.info-borderless .ps-info-name,
.info-borderless .ps-info-value {
    border-top: none;
}

.ps-info-name {
    text-align: right;
    padding: 6px 10px 6px 4px;
    font-weight: 400;
    color: #667E99;
    background-color: transparent;
    width: 110px;
    vertical-align: middle;
}

    .ps-info-name.name-130 {
        width: 130px;
    }

.ps-info-value {
    padding: 6px 4px 6px 6px;
}

    .ps-info-value > span + span:before {
        display: inline;
        content: ",";
        margin-left: 1px;
        margin-right: 3px;
        color: #666;
        border-bottom: 1px solid #FFF;
    }

    .ps-info-value > span + span.editable-container:before {
        display: none;
    }

.ps-info-row:first-child .ps-info-name, .ps-info-row:first-child .ps-info-value {
    border-top: none;
}

.ps-set-info-striped {
    border: 1px solid #DCEBF7;
}

    .ps-set-info-striped .ps-info-name {
        color: #336199;
        background-color: #EDF3F4;
        border-top: 1px solid #F7FBFF;
    }

    .ps-set-info-striped .ps-info-value {
        border-top: 1px dotted #DCEBF7;
        padding-left: 12px;
    }

.ps-picture {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 4px;
    display: inline-block;
    max-width: 120px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px rgba(0,0,0,.15);
}

@media only screen and (max-width:480px) {
    .ps-info-name {
        width: 80px;
    }

    .ps-set-info-striped .ps-info-name {
        float: none;
        width: auto;
        text-align: left;
        padding: 6px 4px 6px 10px;
        display: block;
    }

    .ps-set-info-striped .ps-info-value {
        margin-left: 10px;
        display: block;
    }
}

/*----------------------------------------------- Accordion -----------------------------------------------*/
.accordion-style1.panel-group .panel {
    border-radius: 0;
    border-color: #cdd8e3;
    background-color: #FFF;
    box-shadow: none;
}

    .accordion-style1.panel-group .panel:last-child {
        border-bottom-width: 1px;
    }

    .accordion-style1.panel-group .panel .collapse {
        background-color: #FFF;
    }

    .accordion-style1.panel-group .panel + .panel {
        margin-top: 2px;
    }

.accordion-style1.panel-group .panel-heading + .panel-collapse .panel-body {
    border-top-color: #cdd8e3 !important;
}

.accordion-style1.panel-group .panel-heading {
    padding: 0;
    border-radius: .5rem;
}

    .accordion-style1.panel-group .panel-heading .accordion-toggle {
        color: #4c8fbd;
        background-color: #eef4f9;
        position: relative;
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        padding: 10px;
        display: block;
    }

        .accordion-style1.panel-group .panel-heading .accordion-toggle.collapsed {
            color: #478fca;
            font-weight: 400;
            background-color: #F9F9F9;
        }

        .accordion-style1.panel-group .panel-heading .accordion-toggle:hover {
            color: #6ea6cc;
            background-color: #f1f8fd;
            text-decoration: none;
        }

        .accordion-style1.panel-group .panel-heading .accordion-toggle:active, .accordion-style1.panel-group .panel-heading .accordion-toggle:focus {
            outline: 0;
            text-decoration: none;
        }

        .accordion-style1.panel-group .panel-heading .accordion-toggle > .ace-icon:first-child {
            width: 16px;
        }

        .accordion-style1.panel-group .panel-heading .accordion-toggle:hover > .ace-icon:first-child {
            text-decoration: none;
        }

.accordion-style1.panel-group .collapse.in > .panel-body, .accordion-style1.panel-group .panel-body {
    border-top: 1px solid #cdd8e3;
}

.accordion-style1.panel-group.no-padding {
    padding: 0;
}

.accordion-style2.panel-group .panel {
    border-width: 0;
}

    .accordion-style2.panel-group .panel:last-child {
        border-bottom-width: 0;
    }

    .accordion-style2.panel-group .panel + .panel {
        margin-top: 4px;
    }

    .accordion-style2.panel-group .panel .panel-body {
        border-top: none;
    }

.accordion-style2.panel-group .panel-heading .accordion-toggle {
    background-color: #EDF3F7;
    border-radius: .5rem;
}

    .accordion-style2.panel-group .panel-heading .accordion-toggle:hover {
        text-decoration: none;
    }

    .accordion-style2.panel-group .panel-heading .accordion-toggle.collapsed {
        background-color: #F3F3F3;
        color: #606060;
        border-radius: .5rem;
        border: 1px solid #F3F3F3;
    }

        .accordion-style2.panel-group .panel-heading .accordion-toggle.collapsed:hover {
            background-color: #F6F6F6;
            color: #438EB9;
            text-decoration: none;
        }

.accordion-style2.panel-group .collapse.in > .panel-body, .accordion-style2.panel-group .panel-body {
    border-top: none;
}

.accordion-style2.panel-group .accordion-style2.panel-group .panel {
    border-bottom: 1px dotted #D9D9D9;
}

    .accordion-style2.panel-group .accordion-style2.panel-group .panel:last-child {
        border-bottom: none;
    }

    .accordion-style2.panel-group .accordion-style2.panel-group .panel .panel-heading, .accordion-style2.panel-group .accordion-style2.panel-group .panel .panel-heading .accordion-toggle {
        background-color: transparent;
        border-width: 0;
        font-size: 13px;
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .accordion-style2.panel-group .accordion-style2.panel-group .panel .panel-heading {
        padding-top: 0;
        padding-bottom: 0;
    }

.ui-accordion .ui-accordion-header {
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;
    border: 1px solid #cdd8e3;
    padding: 8px 8px 9px 24px;
}

    .ui-accordion .ui-accordion-header:hover {
        color: #6ea6cc;
        background-color: #f1f8fd;
    }

    .ui-accordion .ui-accordion-header.ui-state-active {
        color: #4c8fbd;
        background-color: #eef4f9;
        position: relative;
        font-weight: 700;
    }

    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
        text-indent: 0;
        margin-top: 0;
        position: absolute;
        left: 10px;
        top: 7px;
    }

        .ui-accordion .ui-accordion-header .ui-accordion-header-icon:before {
            display: inline;
            font-family: "Font Awesome 5 Pro";
            font-size: 15px;
            content: "\f0da";
        }

    .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon:before {
        content: "\f0d7";
        font-weight: 400;
    }

.ui-accordion .ui-accordion-content {
    border: 1px solid #cdd8e3;
    border-top-width: 0;
    padding: 11px 16px;
}

/*============= PS Chat Control =================*/
.ps-chat-control .itemdiv.dialogdiv.disable > .body {
    background-color: #F5F5F5 !important;
    border-color: #D5D5D5;
}

    .ps-chat-control .itemdiv.dialogdiv.disable > .body:before {
        background-color: #F5F5F5 !important;
    }


/*============= Example box ===================*/
.ps-example {
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
    /* Echo out a label for the example */
    .ps-example:after {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: bold;
        color: #959595;
        text-transform: uppercase;
        letter-spacing: 1px;
        content: attr(data-title);
    }

    .ps-example.example-small {
        padding: 30px 10px 10px;
    }

        .ps-example.example-small:after {
            top: 5px;
            left: 10px;
        }

/* Make the examples and snippets not full-width */
@media (min-width: 768px) {
    .ps-example {
        margin-right: 0;
        margin-left: 0;
        background-color: #fff;
        border-color: #ddd;
        border-width: 1px;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.stroke {
    -webkit-text-stroke: 1px #fff;
    text-shadow: 0px 0px 1px #fff, 0px -1px 0px #fff, 1px 0px 0px #fff, 0px 0px 0px #fff, 0px 0px 0px #fff;
}

/*================= GRID ==================*/
.grid2, .grid3, .grid4 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0 1%;
    padding: 0 2%;
    float: left;
    border-left: 1px solid #E3E3E3;
}

    .grid2:first-child, .grid3:first-child, .grid4:first-child {
        border-left: none;
    }

.grid2 {
    width: 48%;
}

.grid3 {
    width: 31.33%;
}

.grid4 {
    width: 23%;
    padding: 0 1%;
}

/*============ Pop over ==================*/
.popover {
    padding: 0;
    border-color: #ccc;
    border-width: 1px;
    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
    color: #4D5C73;
}

.popover-title {
    background-color: #EFF3F8;
    color: #555;
    border-bottom: 1px solid #dde6f0;
    text-shadow: 1px 1px 1px rgba(220,220,220,.2);
}

.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    border-bottom-color: #EFF3F8;
    border-top-width: 0;
}

.popover-error + .popover, .popover.popover-error {
    border-color: #F7F0EF;
}

    .popover-error + .popover .popover-title, .popover.popover-error .popover-title {
        background-color: #F7F0EF;
        border-bottom-color: #efe0de;
        color: #B75445;
        text-shadow: none;
    }

    .popover-error + .popover.top .arrow:after, .popover.popover-error.top .arrow:after {
        border-top-color: #F7F0EF;
    }

    .popover-error + .popover.bottom .arrow:after, .popover.popover-error.bottom .arrow:after {
        border-bottom-color: #F7F0EF;
    }

    .popover-error + .popover.right .arrow:after, .popover.popover-error.right .arrow:after {
        border-right-color: #F7F0EF;
    }

    .popover-error + .popover.left .arrow:after, .popover.popover-error.left .arrow:after {
        border-left-color: #F7F0EF;
    }

.popover-warning + .popover, .popover.popover-warning {
    border-color: #F4EEE3;
}

    .popover-warning + .popover .popover-title, .popover.popover-warning .popover-title {
        background-color: #F4EEE3;
        border-bottom-color: #ede3d1;
        color: #D67E31;
        text-shadow: none;
    }

    .popover-warning + .popover.top .arrow:after, .popover.popover-warning.top .arrow:after {
        border-top-color: #F4EEE3;
    }

    .popover-warning + .popover.bottom .arrow:after, .popover.popover-warning.bottom .arrow:after {
        border-bottom-color: #F4EEE3;
    }

    .popover-warning + .popover.right .arrow:after, .popover.popover-warning.right .arrow:after {
        border-right-color: #F4EEE3;
    }

    .popover-warning + .popover.left .arrow:after, .popover.popover-warning.left .arrow:after {
        border-left-color: #F4EEE3;
    }

.popover-success + .popover, .popover.popover-success {
    border-color: #E8F2E3;
}

    .popover-success + .popover .popover-title, .popover.popover-success .popover-title {
        background-color: #E8F2E3;
        border-bottom-color: #daead2;
        color: #629B58;
        text-shadow: none;
    }

    .popover-success + .popover.top .arrow:after, .popover.popover-success.top .arrow:after {
        border-top-color: #E8F2E3;
    }

    .popover-success + .popover.bottom .arrow:after, .popover.popover-success.bottom .arrow:after {
        border-bottom-color: #E8F2E3;
    }

    .popover-success + .popover.right .arrow:after, .popover.popover-success.right .arrow:after {
        border-right-color: #E8F2E3;
    }

    .popover-success + .popover.left .arrow:after, .popover.popover-success.left .arrow:after {
        border-left-color: #E8F2E3;
    }

.popover-info + .popover, .popover.popover-info {
    border-color: #E5EDF8;
}

    .popover-info + .popover .popover-title, .popover.popover-info .popover-title {
        background-color: #E5EDF8;
        border-bottom-color: #d1dff3;
        color: #3F79B6;
        text-shadow: none;
    }

    .popover-info + .popover.top .arrow:after, .popover.popover-info.top .arrow:after {
        border-top-color: #E5EDF8;
    }

    .popover-info + .popover.bottom .arrow:after, .popover.popover-info.bottom .arrow:after {
        border-bottom-color: #E5EDF8;
    }

    .popover-info + .popover.right .arrow:after, .popover.popover-info.right .arrow:after {
        border-right-color: #E5EDF8;
    }

    .popover-info + .popover.left .arrow:after, .popover.popover-info.left .arrow:after {
        border-left-color: #E5EDF8;
    }

.popover-notitle + .popover.top .arrow:after, .popover.popover-notitle.top .arrow:after {
    border-top-color: #FFF;
}

.popover-notitle + .popover.bottom .arrow:after, .popover.popover-notitle.bottom .arrow:after {
    border-bottom-color: #FFF;
}

.popover-notitle + .popover.left .arrow:after, .popover.popover-notitle.left .arrow:after {
    border-left-color: #FFF;
}

.popover-notitle + .popover.right .arrow:after, .popover.popover-notitle.right .arrow:after {
    border-right-color: #FFF;
}


/***
* PS file upload
*/

.ps-file-input {
    display: block;
    font-size: inherit;
    position: relative;
    height: 30px;
    max-width: 250px;
    margin-bottom: 0;
}

    .ps-file-input input[type=file] {
        position: absolute;
        z-index: -999;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        filter: alpha(opacity=0);
    }

        .ps-file-input input[type=file]:focus {
            outline: 0;
        }

    .ps-file-input .ps-file-container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        border: 1px solid #d5d5d5;
        border-radius: .325rem;
        cursor: pointer;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: all .15s;
        -o-transition: all .15s;
        -moz-transition: all .15s;
        transition: all .15s;
    }


        .ps-file-input .ps-file-container:hover {
            -webkit-box-shadow: none;
            box-shadow: none;
            border-color: #d9705d;
            box-shadow: 0 0 0 1px rgba(217,112,93,.6);
        }

        .ps-file-input .ps-file-container:before {
            /*display: inline-block;*/
            display: none;
            content: attr(data-ps-title);
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            line-height: 24px;
            text-align: center;
            padding: 0 8px;
            background-color: #6fb3e0;
            color: #FFF;
            font-size: 11px;
            font-weight: 400;
            border: 2px solid #FFF;
            border-left-width: 4px;
            -webkit-transition: all .3s;
            -o-transition: all .3s;
            -moz-transition: all .3s;
            transition: all .3s;
        }

        .ps-file-input .ps-file-container .ps-file-name {
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            line-height: 30px;
            color: #888;
            vertical-align: top;
            position: static;
            padding-right: 30px;
            padding-left: 5px;
            font-weight: 400;
        }

            .ps-file-input .ps-file-container .ps-file-name:after {
                display: inline-block;
                content: attr(data-ps-title);
            }

        .ps-file-input .ps-file-container.selected {
            right: 16px;
        }

            .ps-file-input .ps-file-container.selected .ps-file-name {
                color: #666;
            }

        .ps-file-input .ps-file-container .ps-file-btn-view {
            display: none;
        }

        .ps-file-input .ps-file-container.selected .ps-file-btn-view {
            display: inline-block;
        }


        .ps-file-input .ps-file-container i {
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            line-height: 28px;
            width: 30px;
            text-align: center;
            font-size: 13px;
            border: 2px solid #FFF;
            border-radius: .325rem;
            color: #FFF;
            -webkit-transition: all .1s;
            -o-transition: all .1s;
            -moz-transition: all .1s;
            transition: all .1s;
            background-color: #2c7be5;
        }

        .ps-file-input .ps-file-container:hover i,
        .ps-file-input .ps-file-container:active i {
            background-color: #d9705d;
        }

        .ps-file-input .ps-file-container.selected .ps-file-name .file-image {
            background-color: #bd7a9d;
        }

        .ps-file-input .ps-file-container.selected .ps-file-name .file-video {
            background-color: #87b87f;
        }

        .ps-file-input .ps-file-container.selected .ps-file-name .file-audio {
            background-color: #8b7ac9;
        }

        .ps-file-input .ps-file-container.selected .ps-file-name .file-archive {
            background-color: #efad62;
        }

        .ps-file-input .ps-file-container.hide-placeholder:before {
            display: none;
        }

        .ps-file-input .ps-file-container i.ps-file-btn-view {
            right: 30px;
            background-color: orange;
        }

    .ps-file-input a:hover {
        text-decoration: none;
    }

    .ps-file-input .remove {
        position: absolute;
        right: -8px;
        top: .4375rem;
        display: none;
        width: 17px;
        text-align: center;
        height: 17px;
        font-size: 11px;
        font-weight: 400;
        background-color: #d1d1d1;
        border-radius: 100%;
        color: #FFF;
        text-decoration: none;
        line-height: 18px;
    }

        .ps-file-input .remove:hover {
            background-color: #e63757;
        }

    .ps-file-input .ps-file-container.selected + .remove {
        display: inline-block;
    }


@media screen and (-webkit-min-device-pixel-ratio:0) {
    .ps-file-input input[type=file] {
        position: absolute;
        width: 0;
        height: 0;
    }
}

.ps-file-input input[type=file].disabled + .ps-file-container,
.ps-file-input input[type=file][disabled] + .ps-file-container,
.ps-file-input input[type=file][readonly] + .ps-file-container {
    cursor: not-allowed;
    background-color: #EEE;
}

    .ps-file-input input[type=file].disabled + .ps-file-container:hover,
    .ps-file-input input[type=file][disabled] + .ps-file-container:hover,
    .ps-file-input input[type=file][readonly] + .ps-file-container:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: #E3E3E3;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container:before,
    .ps-file-input input[type=file][disabled] + .ps-file-container:before,
    .ps-file-input input[type=file][readonly] + .ps-file-container:before {
        border-color: #EEE;
        background-color: #A1AAAF;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container i,
    .ps-file-input input[type=file][disabled] + .ps-file-container i,
    .ps-file-input input[type=file][readonly] + .ps-file-container i {
        right: 0;
        opacity: 0.65;
        filter: alpha(opacity=65);
        cursor: default;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container.selected i,
    .ps-file-input input[type=file][disabled] + .ps-file-container.selected i,
    .ps-file-input input[type=file][readonly] + .ps-file-container.selected i {
        background-color: #2c7be5;
        opacity: 1;
        filter: alpha(opacity=100);
        cursor: pointer;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container i.ps-file-btn-view,
    .ps-file-input input[type=file][disabled] + .ps-file-container i.ps-file-btn-view,
    .ps-file-input input[type=file][readonly] + .ps-file-container i.ps-file-btn-view {
        right: 30px;
        background-color: orange;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container + .remove,
    .ps-file-input input[type=file][disabled] + .ps-file-container + .remove,
    .ps-file-input input[type=file][readonly] + .ps-file-container + .remove {
        display: none;
    }

    .ps-file-input input[type=file].disabled + .ps-file-container:hover i,
    .ps-file-input input[type=file].disabled + .ps-file-container:active i,
    .ps-file-input input[type=file][disabled] + .ps-file-container:hover i,
    .ps-file-input input[type=file][disabled] + .ps-file-container:active i,
    .ps-file-input input[type=file][readonly] + .ps-file-container:hover i,
    .ps-file-input input[type=file][readonly] + .ps-file-container:active i {
        /*background-color: #2c7be5;*/ /*Remove hover*/
    }

.ps-file-input input[type=file][readonly] + .ps-file-container {
    cursor: default;
}

.ps-file-input input[type=file] + .ps-file-container.selected i.ps-file-btn-download:before {
    content: "\f34a" !important;
}

.ps-file-input .ps-file-overlay {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -10px;
    z-index: 99;
    background-color: rgba(0,0,0,.5);
}

    .ps-file-input .ps-file-overlay > .overlay-content {
        display: inline-block;
        position: relative;
        top: 10%;
        left: 0;
        right: 0;
        text-align: center;
    }

.ps-file-multiple {
    height: auto;
}

    .ps-file-multiple .ps-file-container {
        position: relative;
        height: auto;
        border: 1px dashed #aaa;
        border-radius: 4px;
        text-align: center;
    }

        .ps-file-multiple .ps-file-container:before {
            display: inline-block;
            content: attr(data-ps-title);
            position: relative;
            right: 0;
            left: 0;
            margin: 12px;
            line-height: 22px;
            background-color: #FFF;
            color: #CCC;
            font-size: 18px;
            font-weight: 400;
            border-width: 0;
        }

        .ps-file-multiple .ps-file-container.selected .ps-file-name .fa {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            line-height: 24px;
            width: 26px;
            text-align: center;
            font-family: "Font Awesome 5 Pro";
            font-size: 13px;
            border: 2px solid #FFF;
            color: #FFF;
            -webkit-transition: all .1s;
            -o-transition: all .1s;
            transition: all .1s;
        }

        .ps-file-multiple .ps-file-container .ps-file-name {
            position: relative;
            display: block;
            padding: 0;
            height: auto;
            width: auto;
            max-width: 100%;
            margin: 0 4px;
            border-bottom: 1px solid #DDD;
            text-align: left;
        }

            .ps-file-multiple .ps-file-container .ps-file-name:first-child {
                margin-top: 1px;
            }

            .ps-file-multiple .ps-file-container .ps-file-name:last-child {
                border-bottom-width: 0;
                margin-bottom: 1px;
            }

            .ps-file-multiple .ps-file-container .ps-file-name img {
                padding: 2px;
                border: 1px solid #D7D7D7;
                background-color: #FFF;
                background-repeat: no-repeat;
                background-position: center;
                margin: 4px 8px 4px 1px;
                max-width: 100%;
                max-height: 200px;
            }

            .ps-file-multiple .ps-file-container .ps-file-name:after {
                display: none;
            }

        .ps-file-multiple .ps-file-container.selected .ps-file-name:after {
            display: inline-block;
            white-space: pre;
        }

        .ps-file-multiple .ps-file-container .ps-file-name img + i,
        .ps-file-multiple .ps-file-container.selected .ps-file-name img + i {
            display: none;
        }

    .ps-file-multiple .remove {
        right: -11px;
        top: -11px;
        border: 3px solid #BBB;
        border-radius: 32px;
        background-color: #FFF;
        color: red;
        width: 23px;
        height: 23px;
    }

    .ps-file-multiple .ps-file-container.selected + .remove:hover {
        border-color: #f4c0b1;
    }

    .ps-file-multiple .ps-file-overlay {
        position: absolute;
        top: -12px;
        bottom: -6px;
        left: -12px;
        right: -12px;
    }

        .ps-file-multiple .ps-file-overlay > .overlay-content {
            top: 20%;
        }

    .ps-file-multiple .ps-file-container .ps-file-name i {
        position: relative;
        display: block;
        text-align: center;
        height: auto;
        line-height: 64px;
        width: auto;
        font-size: 64px;
        color: #D5D5D5;
        margin: 4px 0;
        background-color: transparent;
    }

    .ps-file-multiple .ps-file-container.selected:after {
        display: none;
    }

    .ps-file-multiple .ps-file-container.selected .ps-file-name i {
        position: relative;
        margin-right: 4px;
        margin-left: 2px;
        line-height: 24px;
    }

    .ps-file-multiple .ps-file-container .ps-file-name.large {
        text-align: center;
        margin: 0 1px 3px;
    }

        .ps-file-multiple .ps-file-container .ps-file-name.large:last-child {
            margin: 0 1px;
        }

        .ps-file-multiple .ps-file-container .ps-file-name.large img {
            border-width: 0;
            margin: 0 !important;
            padding: 0;
        }

    .ps-file-multiple input[type=file].disabled + .ps-file-container:hover,
    .ps-file-multiple input[type=file][disabled] + .ps-file-container:hover,
    .ps-file-multiple input[type=file][readonly] + .ps-file-container:hover {
        border-color: #AAA;
    }

    .ps-file-multiple input[type=file].disabled + .ps-file-container:before,
    .ps-file-multiple input[type=file][disabled] + .ps-file-container:before,
    .ps-file-multiple input[type=file][readonly] + .ps-file-container:before {
        background-color: transparent;
    }

    .ps-file-multiple input[type=file].disabled + .ps-file-container i,
    .ps-file-multiple input[type=file][disabled] + .ps-file-container i,
    .ps-file-multiple input[type=file][readonly] + .ps-file-container i {
        border-color: #EEE;
    }

.ps-file-input.ps-file-small .ps-file-name > img {
    display: none;
}

.ps-file-input.ps-file-small .ps-file-container.hide-placeholder:before {
    /*display: inline-block !important;*/
    display: none;
}

.ps-file-input.ps-file-small .ps-file-container.selected {
    right: 30px;
}

.ps-file-input.ps-file-small .remove {
    right: 5px;
}

[data-ps-role=psfile] {
    visibility: hidden !important;
}

.ps-file-input + .psfile-loading {
    display: none;
}

.ps-file-input.readingview + img + .psfile-loading {
    display: none;
}

.inline-table {
    display: inline-table;
    width: 100%;
}

    .inline-table > .table-cell {
        display: table-cell;
    }


.ps-badge-status {
    /*badge*/
    /*min-w-80 max-w-150*/
    min-width: 80px !important;
    max-width: 150px !important;
    /*text-truncate*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*px-4*/
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    /*rounded-pill*/
    border-radius: 50rem !important;
}

.badge.ps-badge-status-draft {
    /*badge-soft-info*/
    color: #39afd1;
    background-color: #d7eff6;
}
.badge.ps-badge-status-pending {
    /*badge-soft-warning*/
    color: #f6c343;
    background-color: #fdf3d9;
}
.badge.ps-badge-status-pendingapprove {
    /*badge-soft-warning*/
    color: #f6c343;
    background-color: #fdf3d9;
}
.badge.ps-badge-status-pendingrequest {
    /*badge-soft-primary*/
}
.badge.ps-badge-status-approve {
    /*badge-soft-success*/
    color: #00d97e;
    background-color: #ccf7e5;
}
.badge.ps-badge-status-reject {
    /*badge-soft-danger*/
    color: #e63757;
    background-color: #fad7dd;
}
.badge.ps-badge-status-cancel {
    /*badge-soft-secondary*/
    color: #6e84a3;
    background-color: #e2e6ed;
}

.badge.ps-badge-status-active {
    /*badge-soft-success*/
    color: #00d97e;
    background-color: #ccf7e5;
}
.badge.ps-badge-status-done {
    /*badge-soft-success*/
    color: #00d97e;
    background-color: #ccf7e5;
}
.badge.ps-badge-status-inprogress {
    /*badge-soft-warning*/
    color: #f6c343;
    background-color: #fdf3d9;
}
.badge.ps-badge-status-inactive {
    /*badge-soft-warning*/
    color: #f6c343;
    background-color: #fdf3d9;
}
.badge.ps-badge-status-expire {
    /*badge-soft-danger*/
    color: #e63757;
    background-color: #fad7dd;
}

/*   --------------------  auto lookup control    ----------------------     */

.SingleLookup {
    display: block;
    width: 100%;
    max-width: 500px;
    vertical-align: bottom;
    white-space: nowrap;
}

.SingleLookupText {
    position: relative;
    width: 85%;
    vertical-align: middle;
    background-color: #FFFFFF;
    border: 1px solid #7B9EBD;
    height: 20px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.SingleLookupButtom-visually-hidden {
    display: none !important;
}

.SingleLookupButtom {
    border-top: 1px solid #d2ddec;
    border-bottom: 1px solid #d2ddec;
    border-right: 1px solid #d2ddec;
    line-height: 1.6;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-top-right-radius: 0.325rem;
    border-bottom-right-radius: 0.325rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    background-color:white;
}

    .SingleLookupButtom:hover {
        color: white;
        background-color: #d9705d;
    }

    .SingleLookupButtom[disabled],
    .SingleLookupButtom[disabled]:hover,
    .SingleLookupButtom[readonly],
    .SingleLookupButtom[readonly]:hover {
        background-color: #eee;
        color: #848484;
    }

    .autolookup-searchtext-col input[type=text] {
        width: 100%;
        height: 20px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.single-lookup .autolookup-searchtext-col input {
    width: 100% !important;
}

.autolookup {
    display: table;
    background-color: transparent;
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}

.autolookup-row {
    display: table-row;
    line-height: 0px;
}

.autolookup-searchtext-col {
    display: table-cell;
    width: 150px;
    vertical-align: middle;
}

.autolookup-img-col {
    display: table-cell;
    width: 20px;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: background-color .15s;
    -o-transition: background-color .15s;
    -moz-transition: background-color .15s;
    transition: background-color .15s;
}

    .autolookup-img-col:hover {
        background-color: #d9705d;
    }

    .autolookup-img-col > .lookup-search {
        display: block;
        line-height: 18px;
        border-top: 1px solid #d2ddec;
        border-bottom: 1px solid #d2ddec;
        border-right: 1px solid #d2ddec;
        -webkit-transition: color .15s,opacity .15s;
        -o-transition: color .15s,opacity .15s;
        -moz-transition: color .15s,opacity .15s;
        transition: color .15s,opacity .15s;
    }

        .autolookup-img-col > .lookup-search[disabled] {
            cursor: not-allowed !important;
            border-color: #c3c3c3 !important;
            color: #939192 !important;
            background-color: #fff !important;
        }


    .autolookup-img-col:hover > .lookup-search {
        color: #fff;
    }

        .autolookup-img-col:hover > .lookup-search[disabled] {
            color: #939192;
        }

    .autolookup-img-col input {
        top: 0 !important;
    }

    .autolookup-img-col > .lookup-search:hover {
        cursor: pointer;
    }

.autolookup-display-col {
    display: table-cell;
    min-width: 50px;
    vertical-align: middle;
}

    .autolookup-display-col > input[type=text] {
        height: 20px;
        border-left: 0 !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.autolookup.single-lookup {
    max-width: 400px;
}

    .autolookup.single-lookup .autolookup-display-col {
        display: none;
    }

    .autolookup.single-lookup .autolookup-searchtext-col {
        width: auto !important;
    }

    .autolookup.single-lookup .autolookup-img-col > .lookup-search {
        border-top-right-radius: 0.325rem;
        border-bottom-right-radius: 0.325rem;
    }

@media (max-width:539px) {
    /*.autolookup {
        display: block;
    }

    .autolookup-row {
        display: block;
        position: relative;
    }

    .autolookup-img-col,
    .autolookup-display-col,
    .autolookup-searchtext-col {
        display: block;
    }*/

    .autolookup-searchtext-col {
        width: 100px !important;
    }

    /*.autolookup-searchtext-col > input {
            padding-right: 20px;
        }*/

    /*.autolookup-img-col {
        position: absolute;
        top: 0;
        right: 0;
        height: 19px;
    }

        .autolookup-img-col > .lookup-search {
            border: none;
        }*/

    /*.autolookup-display-col > input {
        border-left: 1px solid #d5d5d5 !important;
        border-top: 0 !important;
    }*/
}

.lookup-advancesearch {
    display: table;
    width: 100%;
}

    .lookup-advancesearch .row {
        margin: 0;
        display: table-row;
    }

    .lookup-advancesearch .lookup-text {
        display: table-cell;
    }

        .lookup-advancesearch .lookup-text > input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

.lookup-text > * {
    width: 100%;
}

.lookup-advancesearch .lookup-button-search {
    display: table-cell;
    width: 19px;
}

/*   --------------------  auto lookup dialog    ----------------------     */


body.lookup-body {
    border: 0 none inherit;
    background-color: #eef0f6;
    height: 100%;
    margin: 0;
    padding: 0;
}

NOBR {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

DIV.objects {
    overflow-y: hidden;
    background: #ffffff;
    overflow-x: hidden;
    width: 100%;
    border: 1px solid #d1cdbb;
    height: 100%;
}

DIV.objectsObjList {
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid #edf2f9;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    border-color: #edf2f9;
    overflow: auto;
}

IMG.button {
    width: 55px;
    height: 0;
}

thead.gridBar {
    table-layout: fixed;
    width: 100%;
    height: 21px;
    background-color: #e0e3e8;
    position: sticky;
    top: 0;
}

td.grid {
    padding: 5px;
    border-bottom: 1px solid #CDD4E3;
    border-right: 1px solid #CDD4E3;
}

tr.grid {
    padding-top: 1px;
    /*-moz-backface-visibility 
    margin-bottom: 1px;*/
    padding-left: 2px;
    height: 24px;
}

TABLE.gridBar {
    table-layout: fixed;
    width: 100%;
    height: 21px;
    background-color: #e0e3e8;
}

DIV.ScrollableList {
    overflow: scroll;
    width: 100%;
    border: 1px solid #949e9c;
    height: 100%;
    background-color: #ffffff;
}

BUTTON.btnExpandable, BUTTON.DialogButton {
    width: auto;
}

.selectBox, .LookupType {
    width: 100%;
    height: 20px;
    border: 1px solid #7b9ebd;
    padding-left: 5px;
    font-size: 11px;
    cursor: default;
}

td.displayNone {
    display: none;
}


.TreeViewLookup {
    vertical-align: middle;
}