.body {
    /*
  scrollbar-base-color: #3C8DBC;
  scrollbar-base-color: ##3C8DBC;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;
*/
    -ms-overflow-style: -ms-autohiding-scrollbar;
	
}

.dashboard-title {
    color: black;
    font-weight: bold;
    margin: 0;
}

.withBorder:hover {
    border: 1px solid #3498db;
}

ul.new-doc {
    /*background: black;*/
    margin: 0;
    padding: 0;
    /*background: black;*/
    margin-left: -10px;
    /*padding: 20px;*/
}

    ul.new-doc li {
        float: left;
        /*background: black;*/
        list-style: none;
        margin-left: 20px;
        position: relative;
    }

    ul.new-doc a {
        color: black;
        text-align: center;
    }

    ul.new-doc h4 {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 12px;
        left: 30px;
        color: #1a72a5;
        line-height: 17px;
        font-size: 20px;
        font-family: arial;
        font-weight: bold;
    }

.new-doc-h5 {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 12px;
    left: 10px;
    color: #1a72a5;
    line-height: 17px;
    font-size: 20px;
    font-family: arial;
    font-weight: bold;
}

ul.new-doc li a img {
    width: 110px;
}

ul.new-doc p {
    color: white;
}

    ul.new-doc p.new-doc-p {
        color: gray;
    }

.arrow-up {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #4c4c4c;
    position: absolute;
    z-index: 100;
    right: 60px;
    top: -12px;
}

ul.user-setting-menu {
    margin: 0;
    padding: 0;
    background: #367FAA;
    padding: 5px 0;
}

    ul.user-setting-menu li p {
        padding: 0;
        margin: 0;
    }

    ul.user-setting-menu li {
        /*background: red;*/
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #24739e;
        padding: 7px 0;
        padding-left: 20px;
        /*margin: 0 10px;*/
    }

        ul.user-setting-menu li:hover {
            background: #1d6d9b;
        }

        ul.user-setting-menu li a {
            margin: 0;
            padding: 0;
            display: block;
            color: white;
        }

        ul.user-setting-menu li:last-child {
            border-bottom: none;
        }


.image-envi {
    /*background: red;
	margin-right: 0 !important;*/
    border-width: 2px;
    border-style: outset;
    padding: 3px;
    border-top: none;
    border-left: none;
}

.menu-environtment {
    padding-left: 5px !important;
}

    .menu-environtment select {
        background: #222D32;
        color: white;
        border: none;
        font-size: 13px !important;
        padding: 0;
        outline: 0;
    }

        .menu-environtment select option {
            background: #222D32 !important;
            color: white;
            border: 0;
            font-size: 13px !important;
            padding: 5px 0 !important;
            outline: 0;
            margin-bottom: 15px !important;
        }

            .menu-environtment select option:hover {
                background: #222D32;
                color: white;
            }

/*-------------------------------------------------- browse*/

.title-browse {
    font-size: 25px !important;
    font-weight: bold;
}

.browse-dropdown-status .dropdown-toggle, .browse-dropdown-status .open .dropdown-toggle {
    background: none;
    border: none;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

    .browse-dropdown-status .dropdown-toggle:active, .browse-dropdown-status .open .dropdown-toggle {
        background: #FFF !important;
        color: #000 !important;
        border: none !important;
    }

    .browse-dropdown-status .dropdown-toggle:hover {
        background: none;
        border: none;
        color: black;
        font-size: 20px;
        font-weight: bold;
    }

.browse-dropdown-content {
    background: #4c4c4c;
    /*width: 100%;*/
}

    .browse-dropdown-content li a {
        color: white;
        font-size: 15px;
        font-weight: bold;
    }
/*.strip-table-browse tbody .striped-browse:nth-child(even) {
	background-color: blue !important;
}*/
td.browse-doc-title {
    color: #3449af;
    font-weight: bold;
    font-size: 17px;
    line-height: 12px !important;
    letter-spacing: 0.01px !important;
}

td.browse-action-button a, th.browse-action-button a {
    font-size: 20px;
    /*background: red;*/
    padding: 2px;
    margin-right: 5px;
    color: gray;
}

.browse-action-button a:hover {
    color: #e83737;
}

.browse-on-phone ul {
    /*background: red;*/
    margin: 0;
    padding: 0;
}

    .browse-on-phone ul li {
        list-style: none;
    }

.browse-left-sidebar {
    white-space: normal;
}

    .browse-left-sidebar li {
        /*border-bottom: dotted 1px #222D32;*/
        border-left: 3px solid gray;
    }

        .browse-left-sidebar li a {
            width: 210px;
        }

        .browse-left-sidebar li ul li a {
            width: 185px;
        }

        .browse-left-sidebar li:hover {
            border-left: 3px solid #3C8DBC;
        }

        .browse-left-sidebar li:active {
            border-left: 3px solid #3C8DBC;
        }

        .browse-left-sidebar li.active-o {
            border-left: 3px solid #3C8DBC;
        }

            .browse-left-sidebar li.active-o a {
                color: white;
            }


    .browse-left-sidebar .module-name {
        transition: all 0.5s ease;
    }

        .browse-left-sidebar .module-name:hover {
            padding-left: 5px;
            text-shadow: 0px 0px 3px rgba(255, 244, 0, 1);
            transition: all 0.5s ease;
        }

td.expand-td {
    white-space: nowrap;
}

td.wrap-td {
    white-space: normal;
}

div.ellipsis-div {
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;
    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

    .fixed-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


td.expand-table-an {
    /*width: 40%*/
}

.expand-table-an table {
}

    .expand-table-an table td {
        vertical-align: top;
    }

    .expand-table-an table .colname-an {
        width: 100px;
    }

        .expand-table-an table .colname-an tr:hover {
            cursor: default;
        }

    .expand-table-an table .colname-an2 {
        width: 10px;
    }

.notification-an {
    display: inline-block;
    background: #3C8DBC;
    font-size: 11px;
    padding: 2px 5px;
    color: white;
    margin-left: 2px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.browse-table-an tbody tr:hover {
    cursor: pointer;
    /*color: White;
    background-color: #db9215;*/
}

/*.hoho :hover {
    cursor: pointer;
    color: White;
    background-color: #db9215;
}*/

/*.tr-detail :hover {
    cursor: default;
    background-color: #808080;
}*/

/*.browse-table-an thead {
	font-size: 15px;
	font-weight: bold;
}*/
.title-subbrowse {
    font-weight: bold;
    font-size: 15px;
}

.expand-table-an table {
    background: white;
    /*padding:10px !important; */
    color: gray;
    border: 10px white solid;
    width: 100%;
    min-height: 200px;
    /*border-top:3px #ccc solid;*/
}

tr.odd-tr {
    background: white;
}

    tr.odd-tr:nth-child(4n+1) {
        background: #c7e3fc; /*strip color*/
    }

tr.odd2-tr {
    background: white;
}

    tr.odd2-tr:nth-child(2n+1) {
        background: #c7e3fc; /*strip color*/
    }
	
div.browse-phone {
    background: #c7e3fc;
}

    div.browse-phone:nth-child(even) {
        background: white;
    }
/*-------------------------------------------------------- VIEW*/

.dn-panel {
    font-size: 10pt;
    font-family: arial;
    color: white;
    padding: 0px 0px 0px 0px;
}

.rn-panel {
    font-size: 14pt;
    font-family: arial;
    color: white;
    padding: 0px 0px 3px 7px;
}


.enabled-input .select2-selection, .enabled-input input {
    background: #c7e3fc;
    /*color: black;*/
}

.disabled-input .select2-selection, .disabled-input input {
    background: white;
    border: 2px solid gray;
}

.view-detail a {
    color: black;
}

ul.view-form-toggle {
    padding: 0;
    margin: 0;
    background: #f2f2f2;
    border: 1px #ccc solid;
}

.view-form-toggle li {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px #ccc solid;
}

    .view-form-toggle li:last-child {
        border-bottom: none;
    }

    .view-form-toggle li a {
        margin: 0;
        padding: 10px;
        /*background: gray;*/
        display: block;
        color: black;
        font-weight: bold;
        transition: all 0.2s ease;
    }

        .view-form-toggle li a:hover {
            color: white;
            background: #222D32;
            transition: all 0.2s ease;
        }

.view-navigation {
    margin: 0;
    padding: 0;
    background: #367FA9;
    color: white;
    background: #3C8DBC;
}

    .view-navigation li {
        list-style: none;
        float: left;
    }

        .view-navigation li a {
            color: white;
            padding: 5px 10px;
            display: block;
        }

            .view-navigation li a:hover {
                background: #367FA9;
            }

.view-title {
    border-bottom: 4px #3C8DBC solid;
}

.view-left-col {
    background: #fcfcfc;
    border: 1px #ccc solid;
    padding: 0;
    -webkit-box-shadow: 2px 2px 7px 0px rgba(186,184,186,1);
    -moz-box-shadow: 2px 2px 7px 0px rgba(186,184,186,1);
    box-shadow: 2px 2px 7px 0px rgba(186,184,186,1);
}

.view-left-col-title {
    text-align: center;
    margin: 0;
    padding: 0;
    padding: 7px 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px #ccc dotted;
}

.view-sidebar-title li {
    color: white;
    padding: 5px 0;
    margin-right: 10px;
}

.view-left-sidebar {
    white-space: normal;
}

    .view-left-sidebar li dl#doc-info dt {
        font-weight: normal;
    }

    .view-left-sidebar li dl#doc-info dd {
        font-size: 16px;
        font-weight: bold;
    }

.data-logo {
    font-size: 22px;
    line-height: 18px;
    font-weight: bold;
    color: white;
    font-family: arial;
}

.doc-type-f {
    font-family: arial;
    font-size: 15px;
}

.view-left-sidebar li {
    color: white;
    padding: 10px 10px 5px 10px;
}

.ul-andre {
    padding: 0;
    margin: 0;
}

    .ul-andre li {
        list-style: none;
        float: left;
    }

.btn-orange-a {
    min-width: 130px;
    background: orange;
    color: white;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
}

    .btn-orange-a:hover {
        background: #db9215;
        color: white;
    }

.btn-gray-a {
    min-width: 130px;
    color: white;
    font-size: 14px;
    background: #c9c9c9;
    font-weight: bold;
    transition: all 0.2s ease;
}

    .btn-gray-a:hover {
        background: #a3a3a3;
        color: white;
    }

#accordion-view-detail h4 a {
    font-size: 13px;
}

.view-detail-table {
    width: 100%;
}

    .view-detail-table tr {
        background: white;
        display: table;
        width: 100%;
        cursor: pointer;
    }

        .view-detail-table tr td {
            padding: 5px;
        }

        .view-detail-table tr:nth-child(4n+1) {
            background: #c7e3fc;
        }

.view-detail-table-content {
    background: #f4f4f4;
}

    .view-detail-table-content div.addpadding {
        padding: 10px;
    }

/*-------------------------------------------------- responsive customize*/
.sidebar-menu, .top-menu-div {
    overflow: hidden !important;
    overflow-y: scroll !important;
    max-height: 100% !important; 
	height: 600px !important; //height of menu sidebar
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.unvisible-phone {
    display: none;
    visibility: hidden;
}

.displayblock-phone {
    display: none;
    visibility: hidden;
    margin: 0;
}

.hidden-phone {
    visibility: hidden;
}

@media screen and (max-width: 1199px) {

    .sidebar-menu {
        overflow: hidden !important;
        overflow-y: scroll !important;
        max-height: 100% !important; 
		height: 600px !important; //height of menu sidebar
    }
}

@media screen and (max-width: 768px) {
    .visible-phone {
        display: none !important;
    }

    .unvisible-phone {
        display: inline-block !important;
        visibility: visible !important;
    }

    .displayblock-phone {
        display: block !important;
        visibility: visible !important;
    }

    .sidebar-menu {
        overflow: hidden !important;
        overflow-y: scroll !important;
        max-height: 100% !important; 
		height: 600px !important; //height of menu sidebar
    }

    .full-width-a {
        padding-left: 0;
        padding-right: 0;
    }

    .content-wrapper {
        padding-top: 50px !important;
    }

    .content-header h1 {
        margin-left: 10px;
    }
    /*.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
		padding: 0
	}*/
    .hidden-phone {
        visibility: visible;
    }

    .btn-orange-a {
        min-width: 100px;
        background: orange;
        color: white;
        font-size: 14px;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .btn-gray-a {
        min-width: 100px;
        color: white;
        font-size: 14px;
        background: #c9c9c9;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    section.content {
        margin: 10px;
        padding: 0;
    }
}

@media (max-width: 991px) {
    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        right: 0%;
    }
}

body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}

body::-webkit-scrollbar-thumb {
    background-color: #3C8DBC;
}

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #3C8DBC;
}

.top-menu-div::-webkit-scrollbar {
    width: 7px;
}

.top-menu-div::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}

.top-menu-div::-webkit-scrollbar-thumb {
    background-color: gray;
}


ul.pending-task {
    text-align: left;
    /*background: red;*/
    margin: 0;
    padding: 0;
}

    ul.pending-task li {
        list-style: none;
        margin-bottom: 10px;
    }

        ul.pending-task li a {
            color: black;
        }

ul.pending-task-module li {
    list-style: disc;
    margin-bottom: 0;
}


.top-menu-onphone {
    background: #222D32;
}

    .top-menu-onphone a:focus {
        color: white;
    }

.top-envi {
    padding: 10px 0 10px 10px;
    display: block;
    color: white;
    font-size: 15px;
    border-left: 3px #222D32 solid;
}

    .top-envi:hover {
        border-left: 3px #3C8DBC solid;
    }

    .top-envi:focus {
        border-left: 3px #3C8DBC solid;
    }

.top-menu-onphone ul {
    background: #2C3B41;
    margin: 0;
    padding: 0;
    padding-left: 10px;
}

    .top-menu-onphone ul li {
        list-style: none;
    }

        .top-menu-onphone ul li a {
            color: white;
            display: block;
            padding: 8px 0 8px 10px;
            border-left: 3px solid gray;
            /*border-bottom: dotted 1px #222D32;*/
        }

            .top-menu-onphone ul li a:hover {
                border-left: 3px #3C8DBC solid;
            }

            .top-menu-onphone ul li a:focus {
                border-left: 3px #3C8DBC solid;
            }


#right-menu-phone ul {
}

#right-menu-phone li {
    list-style: none;
}

    #right-menu-phone li a {
        display: block;
        text-align: right;
        color: white;
        padding: 10px 10px 10px 0;
    }

.skin-blue .wrapper .login-page {
    background: red;
}

.ellipsisText {
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    display: block;*/
}

#login-modal {
    overflow: hidden;
}

    #login-modal .modal-header h4 {
        text-transform: uppercase;
    }

    #login-modal form {
        margin-bottom: 20px;
    }

    #login-modal a {
        color: #38a7bb;
    }

    #login-modal p {
        font-weight: 300;
        margin-bottom: 20px;
        font-size: 13px;
    }

.panel.noborder {
    border: none;
    box-shadow: none;
}

    .panel.noborder > .panel-heading {
        border: 1px solid #dddddd;
        border-radius: 0;
    }

.pinned:before {
    visibility: visible;
    cursor: pointer;
    color: skyblue;
}

.pinned:checked:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f08d";
    color: gray;
    position: relative;
    animation: pinnedDown 0.5s
}

.pinned.header:before {
    visibility: visible;
    cursor: pointer;
    color: gray;
    vertical-align: inherit;
    position: relative;
    bottom: 8px;
}

.pinned.header:checked:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f08d";
    color: black;
    position: relative;
    animation: pinnedDown 0.5s
}

input[type=checkbox].pinned {
    visibility: hidden;
}

@keyframes pinnedDown {
    from {
        top: -8px;
        opacity: 0;
    }

    to {
        top: 4px;
        opacity: 1;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input[type=checkbox].pinned {
        visibility: visible;
        cursor: pointer;
        color: skyblue;
    }
}

.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .row.equal {
        display: flex;
        flex-wrap: wrap;
    }
}



svg:not(:root).svg-inline--fa {
    overflow: visible;
}

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

    .svg-inline--fa.fa-lg {
        vertical-align: -0.225em;
    }

    .svg-inline--fa.fa-w-1 {
        width: 0.0625em;
    }

    .svg-inline--fa.fa-w-2 {
        width: 0.125em;
    }

    .svg-inline--fa.fa-w-3 {
        width: 0.1875em;
    }

    .svg-inline--fa.fa-w-4 {
        width: 0.25em;
    }

    .svg-inline--fa.fa-w-5 {
        width: 0.3125em;
    }

    .svg-inline--fa.fa-w-6 {
        width: 0.375em;
    }

    .svg-inline--fa.fa-w-7 {
        width: 0.4375em;
    }

    .svg-inline--fa.fa-w-8 {
        width: 0.5em;
    }

    .svg-inline--fa.fa-w-9 {
        width: 0.5625em;
    }

    .svg-inline--fa.fa-w-10 {
        width: 0.625em;
    }

    .svg-inline--fa.fa-w-11 {
        width: 0.6875em;
    }

    .svg-inline--fa.fa-w-12 {
        width: 0.75em;
    }

    .svg-inline--fa.fa-w-13 {
        width: 0.8125em;
    }

    .svg-inline--fa.fa-w-14 {
        width: 0.875em;
    }

    .svg-inline--fa.fa-w-15 {
        width: 0.9375em;
    }

    .svg-inline--fa.fa-w-16 {
        width: 1em;
    }

    .svg-inline--fa.fa-w-17 {
        width: 1.0625em;
    }

    .svg-inline--fa.fa-w-18 {
        width: 1.125em;
    }

    .svg-inline--fa.fa-w-19 {
        width: 1.1875em;
    }

    .svg-inline--fa.fa-w-20 {
        width: 1.25em;
    }

    .svg-inline--fa.fa-pull-left {
        margin-right: 0.3em;
        width: auto;
    }

    .svg-inline--fa.fa-pull-right {
        margin-left: 0.3em;
        width: auto;
    }

    .svg-inline--fa.fa-border {
        height: 1.5em;
    }

    .svg-inline--fa.fa-li {
        width: 2em;
    }

    .svg-inline--fa.fa-fw {
        width: 1.25em;
    }

.fa-layers svg.svg-inline--fa {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.fa-layers {
    display: inline-block;
    height: 1em;
    position: relative;
    text-align: center;
    vertical-align: -0.125em;
    width: 1em;
}

    .fa-layers svg.svg-inline--fa {
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }

.fa-layers-counter, .fa-layers-text {
    display: inline-block;
    position: absolute;
    text-align: center;
}

.fa-layers-text {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.fa-layers-counter {
    background-color: #ff253a;
    border-radius: 1em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    height: 1.5em;
    line-height: 1;
    max-width: 5em;
    min-width: 1.5em;
    overflow: hidden;
    padding: 0.25em;
    right: 0;
    text-overflow: ellipsis;
    top: 0;
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.fa-layers-bottom-right {
    bottom: 0;
    right: 0;
    top: auto;
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}

.fa-layers-bottom-left {
    bottom: 0;
    left: 0;
    right: auto;
    top: auto;
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}

.fa-layers-top-right {
    right: 0;
    top: 0;
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.fa-layers-top-left {
    left: 0;
    right: auto;
    top: 0;
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.fa-lg {
    font-size: 1.3333333333em;
    line-height: 0.75em;
    vertical-align: -0.0667em;
}

.fa-xs {
    font-size: 0.75em;
}

.fa-sm {
    font-size: 0.875em;
}

.fa-1x {
    font-size: 0.5em;
}

.fa-2x {
    font-size: 1em;
}

.fa-3x {
    font-size: 1.5em;
}



.fa-5x {
    font-size: 2.5em;
}

.fa-6x {
    font-size: 3em;
}

.fa-7x {
    font-size: 3.5em;
}

.fa-8x {
    font-size: 4em;
}

.fa-9x {
    font-size: 4.5em;
}

.fa-10x {
    font-size: 5em;
}

.fa-fw {
    text-align: center;
    width: 1.25em;
}

.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0;
}

    .fa-ul > li {
        position: relative;
    }

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
}

.fa-border {
    border: solid 0.08em #eee;
    border-radius: 0.1em;
    padding: 0.2em 0.25em 0.15em;
}

.fa-pull-left {
    float: left;
}

.fa-pull-right {
    float: right;
}

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
    margin-right: 0.3em;
}

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
    margin-left: 0.3em;
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
    -webkit-filter: none;
    filter: none;
}

.fa-stack {
    display: inline-block;
    height: 2em;
    position: relative;
    width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.svg-inline--fa.fa-stack-1x {
    height: 1em;
    width: 1.25em;
}

.svg-inline--fa.fa-stack-2x {
    height: 2em;
    width: 2.5em;
}

.fa-inverse {
    color: #fff;
}

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

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

.sidebar-collapse .fa-text-1x {
    font-size: 0.42em;
    font-weight: 900;
    font-family: arial;
    color: #333;
    margin-top: 0.35em;
    margin-left: -0.16em;
    letter-spacing: -0.1em;
    line-height: 0.85em;
}

.fa-text-1x {
    font-size: 0.63em;
    font-weight: 900;
    font-family: arial;
    color: #333;
    margin-top: 0.70em;
    margin-left: -0.1em;
    letter-spacing: -0.1em;
    line-height: 0.75em;
}

.fa-4x {
    font-size: 1.5em;
}

.sidebar-collapse .fa-4x {
    font-size: 1em;
}

/*.sidebar-collapse .fa-text-1x {
    font-size: 0.45em;
    font-weight: 900;
    font-family: arial;
    color: #333;
    margin-top: 0.65em;
    margin-left: -0.25em;
    letter-spacing: -0.1em;
    line-height: 0.78em;
}*/

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }


     .imgpopup {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
      }

     .myimgpopup:hover {opacity: 0.7;}

      /* The Modal (background) */
      .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 10000; /* Sit on top */	//edit higher if still cannot work
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
      margin-top:50px;
      }

      .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      }

      #caption_<xsl:value-of select="/sqroot/body/bodyContent/form/info/GUID/."/> {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
      }

      .modal-content, #caption_<xsl:value-of select="/sqroot/body/bodyContent/form/info/GUID/."/> {
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
      }

      @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)}
      to {-webkit-transform:scale(1)}
      }

      @keyframes zoom {
      from {transform:scale(0)}
      to {transform:scale(1)}
      }

      /* The Close Button */
      .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: white;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
      opacity:100;
      }

      .close:hover,
      .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
      }

      @media only screen and (max-width: 700px){
      .modal-content {
      width: 100%;
      }
      }

.comboFilter {
	border: 1px solid #D2D6DE;
	border-radius: 0 0 0 0;
}



.direct-chat-messages::-webkit-scrollbar {
  width: 5px;
}
 
.direct-chat-messages::-webkit-scrollbar-track {
  //box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: none;
}
 
.direct-chat-messages::-webkit-scrollbar-thumb {
  //background-color: darkgrey;
  //outline: 1px solid slategrey;
  background-color: #3C8DBC;
}