/** Grid **/
.pq-grid-top {
    /*display: none;*/
}

@font-face {
    font-family: SanFranciscoDisplay-Light;
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Light.otf");
}

@font-face {
    font-family: SanFranciscoDisplay-Heavy;
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Heavy.otf");
}

@font-face {
    font-family: SanFranciscoDisplay-Bold;
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Bold.otf");
}

@font-face {
    font-family: SanFranciscoDisplay-Medium;
    src: url("../fonts/San Francisco/SanFranciscoDisplay-Medium.otf");
}

@font-face {
    font-family: FS-Harabara;
    src: url("../fonts/FS-Harabara.ttf");
}

.ui-jqgrid .ui-jqgrid-htable .ui-th-div  {
    height: auto;
    margin-top: 0;
}

.notification{
    left: 25px;
    top: 5px;
    position: absolute;
}
.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    background-color: #448a6e;
    color: #ffffff;
}

table.pq-wrap > tbody > tr > .pq-grid-col {
    text-align: center;
    font-weight: 600;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pager-table, .ui-jqgrid .ui-jqgrid-toppager .ui-pager-table {
    height: auto;
}

/*.pq-grid-title, .pq-group-header, .pq-grid .ui-widget-header {*/
/*background: #39d2ac;*/
/*}*/

.pq-grid .ui-widget-header .pq-grid-title.ui-corner-top {
    /*display: none;*/
}

.pq-grid-header-table > tbody > tr > .pq-grid-col {
    padding: 4px !important;
}

.pq-grid-header-table>tbody>tr>.pq-grid-col:first-child, .pq-grid-table>tbody>tr>.pq-grid-col:first-child {
    background: #b8e2f1;
}

.grid-add-item, .grid-edit-item,.grid-remove-item {
    color: #c73429;
}

.grid-item-button {
    padding-right: 10px;
}
.grid-item-button:hover {
    cursor: pointer;
}
tr.pq-grid-oddRow > td.pq-state-select,
tr.pq-grid-oddRow.pq-state-select,
tr.pq-grid-oddRow > .pq-grid-cell-hover,
tr.pq-grid-oddRow.pq-grid-row-hover,
.pq-state-select.ui-state-highlight {
    background: #cedde8;
}

.filter-header{
    border-radius: 0px !important;
    box-shadow: none !important;
    border-top:none !important;
    border-bottom: none !important;
    border-right: none !important;
}

.bdrn{
    border-right: none !important;
}

.btn-fillter-header{
    border-radius: 0px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
}

.pq-td-border-right > tbody > tr > .pq-grid-cell {
    /*border: none;*/
}

.header-screen{
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 1020;
    background-color: #ffffff;
}

table.pq-grid-header-table {
    background: #b8e2f1;
}

table.pq-grid-header-table div.pq-td-div {
    color: #000000;
    /* font-weight: 900; */
}

.grid-action {
    text-align: center;
}

.pq-grid-cell:focus {
    outline:none;
}

a.disabled {
    pointer-events: none;
}
a.disabled .glyphicon {
    color: gray;
}

#main-content  .pq-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body {
    position: relative;
}

/* To Dropdown navbar dropdown on hover */
.navbar {
    margin-bottom: -15px;
    border-radius: 0;
    border: none;
    min-height: 35px;
    width: 100%;
    position: fixed;
    z-index: 1021;
    top:0px;
}

.navbar-nav > li:hover a, .navbar-nav > li:hover div{

}

.navbar-nav > li .active-menu:hover{
    color: #ef7468 !important;
}

.navbar-nav > li:hover div{
    /*box-shadow: 10px -1px 11px -2px #6acef3;*/
}

.navbar-nav > li:hover .maincustom {
    color: #000000 !important;
    background-color: #dddddd !important;
    font-size: 15px;
    font-family: SanFranciscoDisplay-Medium !important;
}

/*.navbar-nav > li:focus .maincustom {*/
    /*color: #FFFFFF;*/
    /*background-color: #035f97;*/
    /*font-size: 15px;*/
    /*font-family: SanFranciscoDisplay-Medium;*/
/*}*/

.navbar-nav > li:focus a {
    color: #FFffff;
}


.navbar-nav > li:hover a img{

}

.navbar-nav > li:hover a .user-avatar{

}

.user-avatar{
    height: 30px;
    border-radius: 50%;
    /*box-shadow: 1px 1px 25px 0px #dddddd;*/
}

.navbar-inverse {
    background-color: #025f97;
}

.pq-grid .ui-state-active {
    background: #b8e2f1;
}

.login-page #btnLogin {
    background: url(../media/login-button.png) no-repeat 100% 100%;
    border-radius: 10px !important;
    background-color: #126da8  !important;
    border-color: #126da8 ;
    color: #fff;
    padding: 15px 10px 20px 15px;;
}

.navbar-nav>li {
    float: left;
    width: auto;
    padding: 0px 0px 0px 0px;
}

.navbar-inverse .navbar-nav>li>a:hover {
    color: #000000;
    background-color: #dddddd;
    font-size: 15px;
    font-family: SanFranciscoDisplay-Medium;
}

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
    font-size: 15px;
    font-family: SanFranciscoDisplay-Medium;
}

.custom-dropdown-menu{
    background: #EEEEEE !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.2) !important;
}

.after-tab {
    width: 30px;
    height: 35px;
    margin-top: 2px;
    /*float: right;*/
    border-top-right-radius: 100%;
    box-shadow: 5px -3px 11px -2px #528698;
    position: absolute;
    z-index: 500;
    top: -2px;
    right: -30px;
}

.readonly-status{
    background-color : #eee;
    /*background-color : #CCCCCC !important;*/
}

.pq-grid-header-search-row {
    background: #fff;
}

.home-logo > a:hover img {
    width: 27px !important;
}

.user-area > a:hover img {
    width: 26px !important;
}

.navbar-nav > li:hover > .dropdown-menu {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    background: #3592ca;
    top: 75%;
    left: 0px;
    border: none;
    text-align: left;
    /*border-top-left-radius: 10px !important;*/
    /*border-top-right-radius: 10px !important;*/
    /*border-bottom: 4px solid #00b0f0;*/
}

.navbar-nav > li:focus > .dropdown-menu {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    /*top: 75%;*/
    left: 2%;
    border: none;
    text-align: left;
    /*border-top-left-radius: 10px !important;*/
    /*border-top-right-radius: 10px !important;*/
    /*border-bottom: 4px solid #00b0f0;*/
}

.nav>li {
    /*position: unset;*/
    display: block;
}

.navbar-nav>li>.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    /*top: 75%;*/
    width: auto;
    left: 0;
    background: #3592ca;
    border: none;
    text-align: left;
    box-shadow: none;
    /*border-top-left-radius: 10px !important;*/
    /*border-top-right-radius: 10px !important;*/
    /*border-bottom: 4px solid #00b0f0;*/
}


.dropdown-menu li a:hover {

}

.dropdown-menu li a {
    font-size: 13px;
    color: #FFFFFF;
}

.dropdown-menu, .dropdown-submenu {
    border-radius: 0 !important;
}

.dropdown-submenu {
    position: relative;
}

.div-header{
    background: linear-gradient(to right, #eee, #fff);
    padding: 5px 15px !important;
}

.navbar-nav>li>.custom-dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    /*width: max-content;*/
    left: 0;
    top: 100% !important;
    background: #3592ca;
    border: none;
    text-align: left;
    box-shadow: none;
}

.header-field{
    font-weight: bold;
    font-size: 15px!important;
    border-left: 3px solid #ef7468;
    /*margin: 0px 0px 7px 20px;*/
    padding-left: 6px !important;
    line-height: 17px !important;
    white-space: pre-line !important;
    color: #303030!important;
}

.menu-lvl1{
    font-family: SanFranciscoDisplay-Medium !important;
    font-weight: bold;
    font-size: 17px!important;
    border-left: 2px solid #ef7468;
    margin: 0px 0px 7px 15px;
    padding-left: 6px !important;
    line-height: 15px !important;
    white-space: pre-line !important;
    color: #000000 !important;
    background: linear-gradient(to right, #f7f7f7, #eee);
}

.menu-lvl2{
    font-family: SanFranciscoDisplay-Medium;
    font-size: 13px !important;
    white-space: pre-line !important;
    color: #666666 !important;
}

.menu-lvl3{
    font-family: SanFranciscoDisplay-Light;
    font-size: 13px !important;
    white-space: pre-line !important;
    color: #666666 !important;
}

.dropdown-submenu>.dropdown-menu {
    /*border-top-left-radius: 10px !important;*/
    /*border-top-right-radius: 10px !important;*/
    text-align: left;
    border: none;
    /*border-bottom: 4px solid #00b0f0;*/
    box-shadow: none;
    top: 6px;
    padding: 0px;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;*/
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
    background: #3592ca;
}

.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: #ffffff;
    margin-top: 5px;
    margin-right: -10px;
}

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

.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;
}

.dropdown-menu li:first-child > .a-menu-header{
    /*padding-top: 20px !important;*/
}

.dropdown-menu li:first-child > .a-menu-header:hover{
    background: #eda235;
    /*border-top-left-radius: 10px;*/
    /*border-top-right-radius: 10px;*/
}

.dropdown-menu li:last-child > .a-menu-header{
    /*padding-bottom: 20px !important;*/
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    color: #fff;
    background-color: #3592ca;
}

.dropdown-menu li > a, .dropdown-menu li > a, .dropdown-submenu > a {
    display: block;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    /*background: #FFFFFF;*/
    float: unset !important;
    color: #ffffff !important;
    font-family: SanFranciscoDisplay-Medium;
}

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
    background: #eda235;
}

.active-submenu{
    color: #000000;
    background-color: transparent;
    font-size: 13px;
    font-family: SanFranciscoDisplay-Medium;
}

.label {
    color: #000000;
}

.clearsearchclass {
    display: none;
}

.action-item {
    padding-right: 10px;
}
/** override boostrap form control **/
.form-control {
    height: 40px;
    font-size: 16px;
    border-radius: 6px;
    padding: 8px 16px;
    border: 1px solid #D4D5D9;
    background-color: #FFFFFF;
}
input.form-control:required {
    background-color: #FFFFFF;
}
.control-label {
    font-size: 16px;
    font-weight: 500;
    color: #555868;
    margin-bottom: 4px;
    min-height: 24px;
}
.errors {
    font-size: 0.9em;
    color: #c73429;
}

.label {
    font-size: 1em;
}

.form-inline .form-group {
    margin-bottom: 15px;
}

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

.btn {
    border: none;
    height: 28px;
    color: #000;
    line-height: 5px;
    font-size: 14px;
}

.btn-custom {
    background-color: #FFFFFF;
}

.btn-custom:hover {
    background-color: #ddd;
    color: #000;
}

.btn-default {
    background-color: #d8d8d8;
}

.fa-group-btn{
    font-size: 15px !important;
}

.color-help{
    color: #F4A261;
}

.color-custom{
    color: #42D9C8;
}

.color-add{
    color: #015f97;
}

.color-excel{
    color: #599a61;
}

.btn-default:hover {
    background-color: #c9c9c9;
}
/** menu context **/
.user-menu {
    border: none;
    border-radius: 0;
    background: #296EB4;
}

/** custom main menu toogle button **/
.navbar-default .navbar-toggle .icon-bar {
    background: #FFffff;
}

/** Dx extream **/
.dx-texteditor-container {
    width: inherit;
    height: inherit;
}


/** Breadcumb ***/
.breadcrumb {
    margin-top: 3px;
    margin-bottom: 0;
    background-color: transparent;
}
.breadcrumb>li+li:before {
    content: '>';
}

.breadcrumb li {
    font-weight: bold;
    padding-bottom: 0;
    color: #000000 !important;
}

.breadcrumb li.active:last-child {
    color: #3592ca!important;
    font-size: 15px;
}

.dx-popup-content{
    height:unset!important;
    z-index: 2000;
}

.form-horizontal .control-label{
    text-align: left!important;
}
.hide{
    display: none;
}
.main .container-fluid {
    padding: 0 10px !important;
}
.main .breadcrumb{
    margin-bottom: 10px !important;
}

/*Spin*/
.dx-overlay-content{
    overflow:auto!important;
}

.pq-grid-cell, pq-grid-number-cell {
    /*overflow: visible !important; Khong dc bat thuoc tinh len. se lam mat tinh nang pqgrid*/
}
.overflow-visible{
    overflow: visible !important;
}
.mgr5{
    margin-right: 5px !important;
}
.mgr10{
    margin-right: 10px !important;
}
.mgr15{
    margin-right: 15px !important;
}
.transparent{
    color: transparent !important;

}
.transparentBtn  button {
    color: transparent !important;
    display: none !important;
}
.text-error{
    color: #db1600a1;
}

th .pq-td-div {
    text-align: center !important;
    font-weight: bold;
}

.modal-dialog {
    width: auto;
}

.pq-grid-col {
    border-color: #c6c6c6 !important;
}

.modal-header {
    font-size: 15px;
    font-weight: 700;
    padding: 10px 0px 10px 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #025f97;
    color: #ffffff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.modal-content {
    /*border-radius: 0px;*/
    border: none;
}

.panel-heading {
    padding: 0px;
}

button.close {
    padding: 0px 10px 0 0;
    color:#ffffff !important;;
    opacity:1 !important;;
}

.modal-footer{
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.modal-body {
    padding: 15px 30px 15px 30px !important;
}

.pq-grid-table > tbody > .pq-grid-row:hover {
    background: #eee;
}

.text-red {
    color: #dd4b39 !important;
}
.text-yellow {
    color: #f39c12 !important;
}
.text-aqua {
    color: #00c0ef !important;
}
.text-blue {
    color: #0073b7 !important;
}
.text-black {
    color: #111111 !important;
}
.text-light {
    color: #f8f9fa!important;
}
.text-light-blue {
    color: #3c8dbc !important;
}
.text-green {
    color: #00a65a !important;
}
.text-gray {
    color: #d2d6de !important;
}
.text-navy {
    color: #001f3f !important;
}
.text-teal {
    color: #39cccc !important;
}
.text-olive {
    color: #3d9970 !important;
}
.text-lime {
    color: #01ff70 !important;
}
.text-orange {
    color: #e4981f !important;
}
.text-fuchsia {
    color: #f012be !important;
}
.text-purple {
    color: #605ca8 !important;
}
.text-maroon {
    color: #d81b60 !important;
}

.nextToGridRight{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nextToGridLeft{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.ui-widget.ui-widget-content {
    border-radius: 6px;
    font-family: 'Source Sans Pro',sans-serif;
    border: 1px solid #d7d7d7;
}
.box-contain{
    padding: 15px;
    background: #fff;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 1px 1px 25px 0px #dddddd;
    border-radius: 6px;
    /*margin-top: 128px;*/
    height: calc(100% - 121px);
    overflow-y: auto;
}

.fa, .fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    margin-right: 5px;
    font-size: smaller;
}
.nav-tabs-custom > .nav-tabs > li.active {
    border-left-color: #3c8dbc !important;
    border-right-color: #3c8dbc !important;
    border-top-color: #3c8dbc !important;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #333;
    cursor: default;
    background-color: #fff;
    border: 1px solid #3592ca;
    border-top: 3px solid #3592ca;
    border-bottom-color: transparent;
    font-weight: bold;
    font-family: 'Source Sans Pro',sans-serif
}

.nav-tabs>li>a {
    border-radius: 0px 0px 0 0;
    color: #333;
    font-weight: bold;
}

.nav-tabs {
    border-bottom: 1px solid #3592ca;
}

.btn-toggle-hide{
    width: 80px;
    border-radius: 6px;
    outline: none;
}

.nav-tabs>li>a:hover {
    border: none;
}
.nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}
.tab-content>.active {
    display: block;
    padding-top: 5px;
}
.dx-treeview .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
    font-family: "FontAwesome";
    content: "-";
    color: #999999;
}
.dx-treeview .dx-treeview-toggle-item-visibility:before {
    /* font-family: FontAwesome; */
    content: "+";
}
.datepicker table {
    font-size: small;
    font-family: 'Roboto-Regular', sans-serif;
}
.datepicker > div {
    padding: 0px 5px 0px 5px;
}
.pq-loading > .pq-loading-mask {
    width: auto;
}

.tab-custom{
    padding-left: 80px;
    margin-left: -70px;
    background: #00B0F0;
}

.img-nav{
    width: 24px;
}

.breadcrumb {
    padding: 0px 0px 5px 25px;
}

.pq-grid select, .pq-grid input[type="text"], .pq-grid input, .pq-grid textarea, .pq-grid button.ui-state-default:not(.ui-state-hover) {
    /* height: 31px; */
    border: 0;
    border-radius: 0;
}

.pq-grid-header-search-row > .pq-grid-col {
    background: #fff !important;
}

.pq-grid-title-row .pq-td-div:hover {
    text-decoration: none;
}

.pq-grid-header-table > tbody > tr > .pq-grid-col:hover {
    border-width: 0 1px 1px 0;
    border-style: solid;
    background: #b8e2f1;
}

.pq-grid-row > td.pq-grid-number-cell, .pq-grid-number-col {
    text-align: center;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: #00b0f0;
}

.eoffice {
    -moz-transition: -moz-transform .3s ease-in;
    -webkit-transition: -webkit-transform .3s ease-in;
    -o-transition: -o-transform .3s ease-in;
}

.ess-screen{
    margin-top: -10px;
    background: #ffffff;
    display: inline-block;
    overflow-y: scroll;
    height: calc(100% - 50px);
    width: 100%;

    display: flex;
    flex-direction: row;
}

.div-img-menu{
    display: table;
    margin: 0 auto;
    background: #fff;
    border-radius: 50%;
    padding: 30px;
    box-shadow: 1px 1px 25px 0px #dddddd;
}

.eoffice img {
    width: 70px;
}

.eoffice:hover {
    /*text-shadow: 2px 2px 5px #3C8DBC;*/
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.btn-menu{
    background-color: transparent !important;
    color: black !important;
}

.btn-menu > i{
    font-size: 15px !important;
}

.menu-hover:hover {
    font-size: 16px !important;
}



/* Customize the label (the container) */
.containercheck {
    display: block;
    position: relative;
    padding-left: 28px;
    /*margin-bottom: 12px;*/
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
    background-color: #1b6fc3;;;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.text-dropdowncheck {
    color: #0caadc;
    padding-top:3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The container */
.container-checkbox {
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    padding: 2px 0px 0px 25px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500;
}

.btn-custom.focus, .btn-custom:focus {
    background-color: #eef2f5;
    color: #000;
}

.btn-custom.active, .btn-custom:active, .open>.dropdown-toggle.btn-custom{
    background-color: #ddd;
    color: #000;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark-checkbox {
    position: absolute;
    border-radius: 3px;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 1px solid #c6c6c6;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark-checkbox {
    background-color: #eee;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark-checkbox {
    background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark-checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark-checkbox:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #3592ca;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/* Customize the label (the container) */
.container-radio {
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    padding: 2px 25px 0px 25px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500;
}

/* Hide the browser's default radio button */
.container-radio input {
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.checkmark-radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark-radio {
    background-color: #eee;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark-radio {
    background-color: #ffffff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark-radio:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark-radio:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3592ca;
}

.container-disable{
    background: #eee !important;
}

.pq-toolbar > .pq-separator, .pq-toolbar > span, .pq-toolbar > div, .pq-toolbar > p, .pq-toolbar > label, .pq-toolbar > input, .pq-toolbar > textarea, .pq-toolbar > select, .pq-toolbar > button {
    padding: 5px 10px 5px 10px;
    background: #b8e2f1;
    color: #000000;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    font-weight: 600;
}

.pq-toolbar > .pq-separator, .pq-toolbar > span, .pq-toolbar > div, .pq-toolbar > p, .pq-toolbar > label, .pq-toolbar > input, .pq-toolbar > textarea, .pq-toolbar > select, .pq-toolbar > button:hover {
    background: #166886;
    color: #fff;
}

.tab-home{
    font-family: SanFranciscoDisplay-Light;
    background: #ff3769;
    padding: 10px 15px 10px 15px;
    font-size: 13px;
    color: #ffffff;
    border-radius: 20px;
}

.tab-home:hover{
    background: #d82d58;
}

.tab-home-active:hover{
    background: #eeeeee;
}

.tab-home-active{
    font-family: SanFranciscoDisplay-Light;
    background: #ffffff;
    padding: 10px 15px 10px 15px;
    font-size: 13px;
    color: #ff3769;
    border-radius: 20px;
    box-shadow: 1px 1px 10px 0px #dddddd;
}

.group-button{
    padding: 5px 0px 0px 0px;
    margin: 0px 10px 5px 10px;
    border-top: 2px solid #3592ca;
}

.col-button{
    padding: 0px;
}

.color-fillter{
    color: #2E282A;
}

.dx-texteditor {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.btn-custom.disabled.focus, .btn-custom.disabled:focus, .btn-custom.disabled:hover, .btn-custom[disabled].focus, .btn-custom[disabled]:focus, .btn-custom[disabled]:hover, fieldset[disabled] .btn-custom.focus, fieldset[disabled] .btn-custom:focus, fieldset[disabled] .btn-custom:hover {
    border-color: #ddd;
    background-color: #ddd;
    color: #000;
}
.cursor-pointer{
    cursor: pointer !important;
}
.text-italic{
    font-style: italic;
}
.mgl5{
    margin-left: 5px !important;
}
.mgl10{
    margin-left: 10px !important;
}
.mgl15{
    margin-left: 15px !important;
}

.pq-grid-title{
    font-size: 15px !important;
    font-weight: 700;
}

.btnGroupLW4 .dropdown-menu > li > a {
    /* padding: 3px 15px !important; */
    padding: 3px 15px;
    border-bottom: 1px dotted #c7d5e0;
    width: 100%;
    text-align: left !important;
    line-height: 20px;
    color: #000000 !important;
    background: #ffffff !important;
}

.btnGroupLW4 .dropdown-menu > li:hover > a {
    /* padding: 3px 15px !important; */
    background: #eee !important;
}
.readonly{
    background-color: #ddd;
}
.required{
    background-color: rgba(216, 236, 247, 0.73) !important;
}
input:required{
    background-color: rgba(216, 236, 247, 0.73);
}
select:required{
    background-color: rgba(216, 236, 247, 0.73);
}
.dx-header-row td{
    text-align: center!important;
    /*background: #B8E2F1;*/
}

.dx-state-disabled .dx-texteditor-input {
    background: #EEEEEE!important;
}

.pq-grid-title{
    font-size: 12px!important;
}

.datepicker {
    z-index: 1005 !important;
}
.dx-datagrid-table{
    font-size: 14px !important;
}.text-box{
    border: 1px solid #c6c6c6;
    padding: 2px;
    border-radius: 6px;
}

.bootstrap-timepicker-widget.dropdown-menu:before  {
   display: none;
}

.bootstrap-timepicker-widget.dropdown-menu:after{
    display: none;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    font-size: 20px;
}
.fc-toolbar h2 {
    color: #3592ca;
}
.fc button .fc-icon {
    color: #3592ca;
}

.bg-yellow{
    background-color: #f9f34d !important;
}

.datepicker{
    z-index: 10000 !important;
    display: block;
    top: 250px;
    left: 156.5px;
}
.bootstrap-select.btn-group .dropdown-menu li a{
    color: #333 !important;
}

.bootstrap-select.btn-group .dropdown-menu li a:hover{
    background-color: #d4f4ee !important;
}

.bootstrap-select.btn-group button{
    line-height: 18px;
    background:white!important;
    border: 1px solid #ccc;
}
.disabled {
    background-color: #ededed;
}
.bootstrap-select li[class=disabled]{
    background-color: #ededed;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    margin-top: 11px;
}

/*custom scrollbar*/
/* width */
::-webkit-scrollbar {
    height:10px;
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.max-height{
    height: calc(100% - 105px) !important;
    padding: 10px !important;
}

.content-scrollbar{
    height:  calc(100% - 60px);
    overflow-y: auto;overflow-x: hidden; padding: 10px
}


.input-radiobox{
    margin-top: 1px !important;
}

.input-checkbox{
    margin-top: 1px !important;
}

.align-icon{
    margin-top: 6px;
    font-size: 16px;
}

.label-normal{
    font-weight: 500 !important;

}

.digi-pre-value{
    background-color: #fff;
    border: 1px solid #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Arial' !important;
    font-weight: bold;
    font-size: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0px;
    width: 100%;
    height: auto;
    padding-bottom: 5px;
}

.digi-pre{
    background-color: #fff;
    border: 1px solid #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Arial' !important;
    font-weight: 400;
    font-size: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0px;
    width: 100%;
    height: auto;
    padding-bottom: 5px;
}
.bg-gray-light {
    background-color: #eee;
}
.pd5 {
    padding: 5px !important;
}
.pdl0{
    padding-left: 0px;
}
.bg-gray-light {
    background-color: #eee;
}
.pd5 {
    padding: 5px !important;
}
.pdl0{
    padding-left: 0px;
}

.pdr0{
    padding-right: 0px;
}
.required{
    background-color: rgba(216, 236, 247, 0.73);
}
.mgt10{
    margin-top: 10px;
}
.mgb5{
    margin-bottom: 5px;
}
.mgb10{
    margin-bottom: 10px;
}
.legend {
    font-size: 15px;
    color: #025f97;
    font-weight: 600;
}
.pq-state-select{
    border: 1px solid yellow !important;
}

.pdr0{
    padding-right: 0px;
}
.required{
    background-color: rgba(216, 236, 247, 0.73);
}
.mgt10{
    margin-top: 10px;
}
.mgb5{
    margin-bottom: 5px;
}
.mgb10{
    margin-bottom: 10px;
}
.legend {
    font-size: 15px;
    color: #025f97;
    font-weight: 600;
}
.pq-state-select{
    border: 1px solid yellow !important;
}

.wrap-text {
    white-space: pre-line !important;
}

/*////////////////*/
.modal-scroll {
    height: 85%;
    overflow-y: auto;
}
.table-condensed{
    font-size: 12px !important;
}

@keyframes fade-in {
    0% {
        opacity: 0.5;
        transform: scale(0.99);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.fade-in{
    animation: .3s ease-in-out both fade-in;
}

.pointer-events-none{
    pointer-events: none;
}

.pointer-events-auto{
    pointer-events: auto;
}

.news-header{
    border-bottom: 1px solid #ededed;
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
}
.news-body{
    padding: 10px;
    box-shadow: 1px 1px 25px 0px #dddddd;
    background-color: white;
}
.text-bold{
    font-weight: bold;
}
.news-short-desc{
    white-space: pre-wrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumbnail-container{
    width: 85px;
    height: 64px;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-right: 10px;
}
.thumbnail-container img{
    width: 85px;
    height: 64px;
    object-fit: contain;
}


/*.dropdown-menu {*/
    /*left: auto !important;*/
    /*right: 0 !important;*/
/*}*/


.container-fluid>a:hover + .khanh-test{
    display: block;
}
div.menu1 .main-item{
    padding-top: 10px;
}
div.menu1{
    background-color: white;
    border-bottom: 1px solid #cccccc;
    margin: 0px 10px 0px 0px;
    box-shadow: 1px 1px 25px 0px #dddddd;
    border-top: none

}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #6b6b6b;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.scroll-container{
    overflow: hidden;
}

.scroll-container:hover {
    overflow-y: scroll;
}


#beforAlert:hover{

}

.active-ess-mss{
    border-bottom: 1px solid deeppink;
    background-color: white;
    color: #333 !important;
}

.menu1{
    max-height: 450px;
    overflow: auto;

}

.W75F1000 .content-scrollbar{
    height:  calc(100%);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px;
}
.W75F1000 .box-contain{
    height:  calc(100% - 20px);
    overflow: hidden;
    padding: 10px
}

.datepicker table tr td.highlighted {
    background-color: transparent;
    border-color: transparent;
    color: red;
}

.datepicker table tr td.highlighted:hover {
    background-color: #eeeeee;
    border-color: #eeeeee;
    color: red;
}

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
    background-color: transparent;
    border-color: transparent;
    color: red;
}

.datepicker table tr td.highlighted.disabled:hover,
.datepicker table tr td.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.disabled:focus,
.datepicker table tr td.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.disabled.focus,
.datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
    background-color: transparent;
    border-color: transparent;
}

/** custom css form **/
fieldset legend {
    margin-bottom: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    border-bottom: none;
}
.wform-control {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    font-size: 16px;
}
.wform-control .select2-container--default .select2-selection--single {
    height: 40px;
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid #D4D5D9;
    border-radius: 4px;
}
.wform-control .select2-container--default .select2-selection__rendered {
    line-height: 20px;
    padding: 0;
    color: #7F828E;
}
.wform-control .form-attachment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(27, 27, 27, 0.05);
    border: 1px dashed #D4D5D9;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
}
.wform-control .form-attachment .form-attachment-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    position: relative;
}
.wform-control .form-attachment .form-attachment-file img {
    width: 50px;
    height: 50px;
}
.wform-control .form-attachment .form-attachment-file span {
    font-size: 14px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.wform-control .form-attachment .form-attachment-file .icon-remove {
    position: absolute;
    top: 0;
    right: 25px;
    width: fit-content;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    background: black;
    opacity: 0.5;
    line-height: 0.5;
    padding: 5px;
    border-radius: 50%;
}
.wform-control .form-attachment .form-attachment-file:hover .icon-remove {
    display: flex;
}

.wform-control button[type="submit"] {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: white;
    background: #0095FF;
    border-radius: 4px;
    padding: 5px 0;
    width: 100%;
    outline: none;
    border: none;
    margin-top: 15px;
}

/*form avatar*/
.wform-control .error {
    color: red;
    font-size: 14px;
}
.wform-control label.error {
    position: absolute;
    bottom: -19px;
}
.wform-control .form-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wform-control .form-avatar img {
    object-fit: cover;
}
.wform-control .form-avatar .form-avatar-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wform-control .form-avatar .form-avatar-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    height: 40px;
    width: 40px;
}
.wform-control .form-avatar .form-avatar-control button i {
    margin: 0;
    font-size: 16px;
}

/*form checkbox*/
.wform-control .wform-checkbox {
    flex-direction: row;
    position: relative;
    font-size: 16px;
}
.wform-checkbox .form-control {
    height: 20px;
    display: inline-block;
    width: auto;
    margin: 0 8px 0 0;
    vertical-align: middle;
    font-size: 16px;
    border-radius: 6px;
    padding: 0px;
    border: 1px solid #D4D5D9;
    background-color: #FFFFFF;
}
.wform-checkbox input{
    width: 1.6rem !important;
    height: 1.6rem !important;
}