﻿/*nhantd*/
body {
    font-size: 14px !important;
}

.tabbable-custom > .nav-tabs > li {
    margin-right: 0px !important;
}

.icheckbox_square-blue.focus {
    background-position: -24px 0;
}

.iradio_square-blue.focus {
    background-position: -144px 0;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--bootstrap .select2-dropdown,
.select2-container--bootstrap.select2-container--open .select2-selection {
    border: 2px solid #2489C5 !important;
}

::placeholder {
    opacity: 0.5 !important;
}

.form-control:focus {
    border: 2px solid #2489C5 !important;
}

.text-logo-navi {
    font-weight: bold;
    color: white;
    font-size: 12px !important;
    text-transform: uppercase;
    margin-top: 18px !important;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #dde8f6 !important;
}

.page-sidebar .page-sidebar-menu .sub-menu li.selected {
    background: #397FAE;
}

.row-inner {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

ul.scroll-sub-menu {
    /*max-height: 200px;*/
    overflow: auto;
}

.full-width {
    width: 100% !important;
}

.bottom-line {
    border-bottom: 1px solid #ddd;
    margin-left: 10px;
    margin-right: 10px;
}

.red {
    color: #ff0000;
}

.dark-green {
    color: #17a08c !important;
}

.yelow {
    color: #FFB338 !important;
}

.icon-green {
    color: #32C5D2 !important;
}

.black {
    color: #000000 !important;
}

.icon-blue {
    color: #3598dc !important;
}

a {
    text-decoration: none !important;
}

    a:hover {
        color: #fecd0b;
        text-decoration: none;
    }

.float-right-filter {
    float: right;
}

.datepicker-dropdown {
    z-index: 10000 !important;
}

table > thead > tr > th {
    text-align: center;
}

.icon-size-medium {
    font-size: 24px;
}

.portlet.light {
    padding-bottom: 5px !important;
    border-radius: 4px;
    border: 1px solid #c4cdd9;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    position:relative;
}

    /*.trangchu {
    border: 1px solid #d7d7d7 !important;
}*/
    .portlet.overflow-x {
        overflow-x: auto
    }

.min-width-1000{
    min-width: 1000px
}

.normal-tab {
    border-bottom: 1px solid black
}

.tab-active {
    border-bottom: 1px solid blue !important;
    color: blue !important
}


.lb-Check {
    color: red;
    display: none;
    font-size: 11px;
    margin-left: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.float-right {
    float: right !important;
}

.label-MASO {
    font-weight: bold;
    font-size: 14px;
    color: #0076b6;
}

.btn {
    height: 30px !important;
}

.btn-wtitle {
    margin-top: 5px;
    margin-bottom: 5px;
}

.btn-green {
    color: #ffffff;
    border-color: #17a08c;
    background-color: #17a08c;
}

    .btn-green:hover, .btn-green:active, .btn-green:focus {
        color: #ffffff;
        border-color: #0f8e7b;
        background-color: #0f8e7b;
    }

.btn-red {
    color: #ffffff;
    border-color: #ff0000;
    background-color: #ff0000;
}

    .btn-red:hover, .btn-red:active, .btn-red:focus {
        color: #ffffff;
        border-color: #cc0000;
        background-color: #cc0000;
    }

/*Begin Multiselect*/
.multiselect > .caret {
    float: right;
    margin: 6px 0;
}

.multiselect > .multiselect-selected-text {
    float: left;
    font-weight: 500;
    text-transform: none;
}

.multiselect-container {
    width: 100%;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff !important;
    text-decoration: none !important;
    background-color: #337ab7 !important;
    outline: 0 !important;
}

/*.dropdown-toggle {
    height: 30px;
}*/

.multiselect-container > .multiselect-filter > div > .multiselect-search {
    height: 35px;
}
/*End Multiselect*/

/*Begin advance button*/
.btn-advance {
    width: auto !important;
    height: 30px !important;
    background-image: none !important;
}

.tools-advance {
    padding: 0 0 !important;
    margin-top: 0px !important;
}
/*End advance button*/

/*Begin popover*/
.popover {
    max-width: 800px !important;
}

    .popover.left > .arrow {
        border-left-color: #428bca;
    }
/*End popover*/



.table_pagination {
    font-weight: 400 !important;
}

.table thead tr th {
    font-size: 13px;
    font-weight: 600;
}

.table td, .table th {
    font-size: 14px;
}

.active-row-border {
    border-left: 3px solid #3598dc !important;
}

.vertical-line {
    width: 3px;
    background-color: #3598dc;
    height: 100%;
    float: left;
}

.table-blue-header thead tr th {
    vertical-align: middle !important;
    padding: .3em 1em .1em 1em !important;
    background: rgb(53, 152, 220);
    color: #fff;
}

/*End DataTables*/

/*Begin Tagsinput*/
.bootstrap-tagsinput {
    width: 100%;
}

.page-sidebar-closed {
    position: relative;
}

.titleheader {
    display: none;
}

.page-sidebar-closed .titleheader {
    display: block !important;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 65px;
    font-size: 16px;
    font-weight: 500;
}
/*End Tagsinput*/
@media screen and (max-width: 1279px) {
    .page-sidebar-closed .titleheader {
        display: none !important;
    }
}

.logo-default span {
    display: block;
    padding-left: 3px;
}
/***08/05/2017***/
.db-block-1 {
    background: url(../img/bg-block1.jpg);
    border-radius: 4px;
    border: 1px solid #d7d7d7;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 5px 15px;
    box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.03);
}

    .db-block-1 p {
        margin: 0;
        font-size: 15px;
        padding-top: 7px
    }

        .db-block-1 p label {
            color: #585858
        }

        .db-block-1 p span {
            font-size: 24px;
            font-weight: bold;
            padding-left: 5px;
            text-align: right;
            float: right
        }

    .db-block-1 ul {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important
    }

        .db-block-1 ul li {
            margin: 0 !important;
            padding: 7px 0;
            display: block;
            color: #666;
            border-bottom: 1px solid #e8e8e8
        }

            .db-block-1 ul li:nth-last-child(1) {
                border-bottom: 0 !important
            }

            .db-block-1 ul li strong {
                font-size: 24px;
                margin-right: 4px;
                margin-top: 4px
            }

            .db-block-1 ul li label {
                margin: 0 10px 0 0;
                vertical-align: middle
            }

            .db-block-1 ul li span {
                vertical-align: middle;
                display: inline-block
            }

    .db-block-1 table {
        width: 100%;
        margin: 0
    }

.db-up {
    background: #c62f4f;
    color: #fff;
    padding: 3px 5px
}

.db-down {
    background: #21a41e;
    color: #fff;
    padding: 3px 5px
}

.db-up-2 {
    color: #c62f4f;
    font-size: 17px;
    font-weight: bold;
    background: url(../img/up.png) no-repeat left center;
    padding-left: 20px
}

.db-down-2 {
    color: #21a41e;
    font-size: 17px;
    font-weight: bold;
    background: url(../img/down.png) no-repeat left center;
    padding-left: 20px
}

.db-block-2 {
    background: #fff;
    border-radius: 0px;
    border: 0;
    padding: 0px 10px
}

    .db-block-2 h2 {
        margin: 0 !important;
        padding: 0;
        text-transform: uppercase;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        position: relative
    }

        .db-block-2 h2 span {
            margin-top: 0px;
            display: block
        }

.gear {
    position: absolute;
    right: 0;
    top: 10px;
    width: 18px;
    height: 18px;
    background: url(../img/gear.png) no-repeat left center;
}


.db-bg-1 {
    background: #2093d1
}

    .db-bg-1 h2 {
        padding: 10px 0
    }

.db-cl-1 {
    color: #2093d1
}

.db-bg-2 {
    background: #32c5d2
}

    .db-bg-2 h2 {
        padding: 10px 0
    }

.db-cl-2 {
    color: #32c5d2
}

.db-bg-3 {
    background: #8e44ad
}

    .db-bg-3 h2 {
        padding: 10px 0
    }

.db-cl-3 {
    color: #8e44ad
}

.db-bg-4 {
    background: #d93742
}

    .db-bg-4 h2 {
        padding: 10px 0
    }

.db-cl-4 {
    color: #d93742;
    font-size: 20px !important
}

.db-italic {
    font-size: 15px !important;
    font-style: italic;
    font-weight: normal !important
}

.db-block-3 {
    margin-top: 30px
}

    .db-block-3 h2 {
        color: #1d2939;
        font-size: 16px;
        font-weight: bold
    }

    .db-block-3 ul {
        margin: 0;
        padding: 0
    }

        .db-block-3 ul li {
            font-size: 16px;
            background: url(../img/db-dot.png) no-repeat left 12px;
            padding: 3px 10px;
            list-style: none;
            margin: 0
        }

.db-block-4 {
    margin-top: 30px;
    background: #fff;
    border-radius: 5px;
    padding: 5px 20px
}

    .db-block-4 h2 {
        color: #e91e63;
        font-size: 16px;
        font-weight: bold
    }

    .db-block-4 p {
        font-size: 16px;
        line-height: 20px
    }

        .db-block-4 p strong {
            color: #17b09a
        }

@media screen and (max-width: 640px) {
    .db-block-2 {
        margin-bottom: 10px
    }
}

.db-block-1 .chiso {
    text-align: center;
}

.table .table-striped .chiso {
    margin-bottom: 0px;
}

.home {
    padding-top: 0px !important;
}

.size {
    width: 35px;
    height: 35px
}

.custom {
    margin-top: -45px !important;
}
/*.table tbody tr:nth-child(2n+1){background:#eee}
.table tbody tr:nth-child(2n){background:#fff}*/
/*.table tbody tr td:nth-last-child(1){text-align:center}*/
.page-footer {
    opacity: 0.9
}

.scroll-to-top {
    bottom: 30px !important
}

.btn-datetime {
    background: #ddd;
    box-shadow: none !important
}

    .btn-datetime.active {
        background: #2093d1 !important;
        color: #fff
    }

.new-alert {
    background: #e5d683;
    opacity: .8 !important;
    margin: 10px 10px 0
}

    .new-alert p {
        color: #501a15;
        text-align: center
    }

        .new-alert p a {
            color: #9a0e00;
            font-weight: bold;
            text-decoration: underline !important
        }

/*==================*/
.fix-pad {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.fix-pad-left {
    padding-left: 10px !important;
    padding-right: 5px !important;
}

.fix-pad-right {
    padding-left: 5px !important;
    padding-right: 10px !important;
}

/* LXT Fix dropdow*/
#TimKiemTHB_Popover_Content {
    position: relative;
}

    #TimKiemTHB_Popover_Content .search-content {
        overflow-y: auto;
        height: 300px;
        margin-bottom: 30px;
        padding: 30px;
    }

    #TimKiemTHB_Popover_Content .search-button {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #fff;
        z-index: 9;
    }

.modal-xl {
    width: 1140px;
}

.error-message {
    color: #e02222;
}

.table-striped tbody tr:nth-child(2n+1) {
    background: #eee
}

.table-striped tbody tr:nth-child(2n) {
    background: #fff
}

.select2-container--bootstrap {
    border-radius: 0;
    height: auto;
    line-height: 1;
    padding: 0;
    font-size: 12px;
}

    .select2-container--bootstrap .select2-selection--single {
        height: 30px;
        line-height: 1.5;
        padding: 5px 22px 5px 10px;
        font-size: 12px;
    }


.item-body i {
    margin-right: 10px;
}

mr5 {
    margin-right: 5px;
}

#baocaoinfo:hover{
    color: #b6d0e7;
    background: #337ab7 !important;
}
#baocaoinfo {
    background: none !important;
}

.blockOverlay {
    z-index: 20000 !important;
}
.blockPage {
    z-index: 20011 !important;
}
.highcharts-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.caret-icon {
    margin-right: 5px;
}
.icon-up {
    color: #f60337;
}

.icon-down {
    color: #23e823;
}

.icon-increment {
    color: #23e823;
}

.icon--decrement {
    color: #f60337;
}

.icon-equal {
    color: #efef43;
}

.box-light {
    border-radius: 4px;
    border: 1px solid #c4cdd9;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.mr-20-lg {
    margin-top: 20px;
}

.mr-20-md {
    margin-top: 0;
}

.icon_fs2 {
   font-size: 20px; 
}

@media only screen and (max-width: 1200px) {
    .mr-20-md {
        margin-top: 20px;
    } 
}

.mt-20{
    margin-top: 1.25rem;
}

.font-15 {
   font-size: 1.5rem;
}
.table-lights th {
    color: #745656;
}

.custom-tabs li a {
    color: #a9a1a1;
    font-weight: 400;
}

.custom-tabs li.active a {
    color: #fff;
    font-weight: 600;
    background-color: #337ab7;
}

.flex {
   display: flex;
   flex-direction: row;
}

.justify-center {
   display: flex;
   justify-content: center;
   text-align: center;
}

.align-center {
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card_flex {
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 200px !important;
    border-radius: 4px;
    padding: 20px;
    border: 1px solid #c4cdd9;
    background-color: #f5f7f5 !important;
}
/*tspan {
    font-weight: 600;
}*/

.ps-relative {
   position: relative;
}

.z-1 {
  z-index: 1;
}

.w-50 {
  width: 50%;
}

.pb-10 {
  padding-bottom: 10px;
}

.fz-25 {
   font-size: 2.5rem;
}

.chart_line_near:before,
.chart_line_far:before {
    content: '';
    width: 90%;
    height: 1px;
    background: #eee;
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
}

.chart_node-circle {
    border-radius: 999px;
    font-size: 2rem;
}

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 25px;
    height: 25px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.w-fixed-140 {
    width: 145px;
}

@media only screen and (max-width: 767px) {
    .w-fixed-140 {
        width: 50%;
    }
    .mt-10-xs {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .w-fixed-140 {
        width: 33.3%;
    }
}

.min-h-210{
  min-height: 210px;
}

.carvet {
   display: flex;
   flex-direction: column;
}

.carvet > div {
    float: left;
}

.carvet > div > a {
	color: #000;
	display: block;
	text-decoration: none;
	position: relative;
	height: 60px;
	line-height: 60px;
	padding: 0 10px 0 5px;
	text-align: center;
	margin-right: 8px;
    pointer-events: none;
    font-size: 20px;
    font-weight: 700;
}

.carvet p {
    text-align: center;
	margin-top: 3px !important;
}

    .carvet > div > a::before,
    .carvet > div > a::after {
        content: "";
        position: absolute;
        top: 0;
        border: 0 solid orange;
        border-width: 30px 10px;
        width: 0;
        height: 0;
    }

    .carvet > div > a::before {
        left: -20px;
        border-left-color: transparent;
    }

    .carvet > div > a::after {
        left: 100%;
        border-color: transparent;
        border-left-color: orange;
    }

#caret-div1 div a {
    background: #9dc3e6;
}

#caret-div1 > div > a::before,
#caret-div1 > div > a::after {
    border: 0 solid #9dc3e6;
    border-width: 30px 10px;
}

#caret-div1 > div > a::before {
    left: -20px;
    border-left-color: transparent;
}

#caret-div1 > div > a::after {
    border-color: transparent;
    border-left-color: #9dc3e6;
}

#caret-div2 div a {
    background: #dbdbdb;
}

#caret-div2 > div > a::before,
#caret-div2 > div > a::after {
    border: 0 solid #dbdbdb;
    border-width: 30px 10px;
}

#caret-div2 > div > a::before {
    left: -20px;
    border-left-color: transparent;
}

#caret-div2 > div > a::after {
    border-color: transparent;
    border-left-color: #dbdbdb;
}

#caret-div3 div a {
    background: #f8cbad;
}

#caret-div3 > div > a::before,
#caret-div3 > div > a::after {
    border: 0 solid #f8cbad;
    border-width: 30px 10px;
}

#caret-div3 > div > a::before {
    left: -20px;
    border-left-color: transparent;
}

#caret-div3 > div > a::after {
    border-color: transparent;
    border-left-color: #f8cbad;
}

.carvet-invert > div > a::before,
.carvet-invert > div > a::after {
	content: "";
	position: absolute;
	top: 0;
	border: 0 solid orange;
	border-width: 30px 10px;
	width: 0;
	height: 0;
}

.carvet-invert > div > a::before {
    right: 100%;
    border-color: transparent;
    border-right-color: orange;
}

.carvet-invert > div > a::after {
    right: -20px;
    border-right-color: transparent;
}

#caret-div4 div a {
    background: #92d050;
}

#caret-div4 > div > a::before,
#caret-div4 > div > a::after {
    border: 0 solid #92d050;
    border-width: 30px 10px;
}

#caret-div4 > div > a::before {
    right: 100%;
    border-color: transparent;
    border-right-color: #92d050;
}

#caret-div4 > div > a::after {
    right: -20px;
    border-right-color: transparent;
}

#caret-div5 div a {
    background: #f8cbad;
}

#caret-div5 > div > a::before,
#caret-div5 > div > a::after {
    border: 0 solid #f8cbad;
    border-width: 30px 10px;
}

#caret-div5 > div > a::before {
    right: 100%;
    border-color: transparent;
    border-right-color: #f8cbad;
}

#caret-div5 > div > a::after {
    right: -20px;
    border-right-color: transparent;
}

#caret-div6 div a {
    background: #bfbfbf;
}

#caret-div6 > div > a::before,
#caret-div6 > div > a::after {
    border: 0 solid #bfbfbf;
    border-width: 30px 10px;
}

#caret-div6 > div > a::before {
    right: 100%;
    border-color: transparent;
    border-right-color: #bfbfbf;
}

#caret-div6 > div > a::after {
    right: -20px;
    border-right-color: transparent;
}

.circle-large {
    width: 300px;
    height: 300px;
    border: 3px solid #b4c7e7;
    border-radius: 999px;
    background-color: transparent;
    position: relative;
}

.circle-box {
    width: 185px;
    height: 100px;
    background-color: #79addd;
    text-align: center;
    position: absolute;
    border-radius: 10px;
    padding: 10px;
    font-weight:600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-box h4 {
    font-weight: 600;
}

.circle-box-1 {
    background-color: #b4c7e7;
}    

.circle-box-2 {
    background-color: #ffe699;
}

.circle-box-3 {
    background-color: #f8cbad;
}

.circle-card {
    position: relative;                
}

.circle-card-1 {
    top: -15px;
    left: 75%;
}

.circle-card-2 {
    top: 60%;
    right: 40%;
}

.circle-card-3 {
    top: 60%;
    left: 75%;
}

.circle-card-4 {
    top: -15px;
    right: 40%;
}

.circle-detail-1 {
    position: absolute;
    top: 110px;
    left: 30%;
    width: 210px;
}

.circle-detail-1::before {
		content: '';
		width: 4px;
		height: 45px;
		background-color: #b4c7e7;
		position: absolute;
		left: -7px;
		top: 0;
	}

.circle-detail-2 {
    position: absolute;
    left: -65px;
    width: 210px;
    bottom: -150px;
}

.circle-detail-2::after {
        content: '';
        width: 4px;
        height: 45px;
        background-color: #ffe699;
        position: absolute;
        right: -7px;
        bottom: 0;
    }

.circle-detail-3 {
    position: absolute;
    right: 40px;
    width: 210px;
    bottom: -145px;
}

.circle-detail-3::before {
		content: '';
		width: 4px;
		height: 45px;
		background-color: #f8cbad;
		position: absolute;
		left: -7px;
		top: 0;
	}

.circle-detail-4 {
    position: absolute;
    right: 65%;
    width: 165px;
    bottom: -166px;
}

.circle-detail-4::before {
    content: '';
    width: 4px;
    height: 100%;
    background-color: #79addd;
    position: absolute;
    right: -7px;
    bottom: 0;
}

.font-bold {
    font-weight: 700;
}

.add-icon {
    background-color: #3598dc;
    padding: 1px;
    color: #fff;
    border-radius: 999px;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.delete-icon {
    background-color: #c49f47;
    padding: 1px;
    color: #fff;
    border-radius: 999px;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.text-center {
    text-align: center;
}

.select-chart-type + span.select2, 
.select-chart-type-left + span.select2 {
    position: absolute !important;
    z-index: 3;
    top: 10px;
    right: 65px;
    min-width: 100px;
}

.k-grid-header th > .k-link > .k-icon {
   color: #fff;
}

.k-grid .k-grid-header .k-header .k-link {
    color: #fff;
}

.arrow-slide {
    font-size: 55px;
    color: #c0aeae;
}
.slick-prev:before, .slick-next:before {
    content : '' !important;
}

.card-slider .slick-slide,
.card-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
    transform: scale(0.9, 0.9);
    transition: all 0.3s ease-in-out;
    z-index: -1;
    background-color: #feffff;
}

.card-slider .slick-center,
.card-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
    transform: scale(1.2);
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.card-slider .slick-current.slick-active{
    transform: scale(1.2);
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.card-slider .slick-track {
    height: 250px;
    margin: 45px 0;
}

.slick-next, .slick-prev{
    z-index: 5;
}