/* Minification failed. Returning unminified contents.
(71,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(2711,32): run-time error CSS1034: 
(2711,32): run-time error CSS1042: Expected function, found ','
(2711,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
body {
    font-family: "Malgun Gothic", sans-serif;
}

.mb-10{
	margin-bottom: 10px;
}
#btn-gototop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #0f3dea;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}


.login100-more::before {
    background-color: transparent;
}

.text-logo {
    color: rgb(39,34,98) !important;
}

.login100-more {
    text-align: center;
}

    .login100-more img {
    width: 100%;
    max-width:300px;
}

/*=====  Paging  =====*/
.pagination ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /*background-color: #333;*/
}

.pagination li {
    float: left;
    moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-image: -moz-linear-gradient(center top, #FFFFFF 0pt, #E0E0E0 100%);
    border-color: #CCCCCC #CCCCCC #AAAAAA;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 1px #FFFFFF inset;
    color: #555555;
    font-size: 11px;
    font-weight: bold;
    /*
    height: 20px;
    padding: 4px 8px;
	*/
    display: inline-block;
    text-shadow: ext-shadow: 0 0 0 transparent, 0 1px 0 #FFFFFF;
    cursor: pointer;
    margin: 0 2px;
}

    .pagination li:first-child {
        /*border-left: 1px solid #3e5569; */
    }

    .pagination li a {
        font-size: 10px;
        display: block;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: #CCCCCC;
        width: 24px;
        height: 14px;
    }

        .pagination li a:hover:not(.active) {
            border-color: #000;
            color: #6a6965 #6a6965 #5f5e5d;
            text-decoration: none;
        }

.pagination .active {
    border-color: #6a6965 #6a6965 #5f5e5d;
    color: #000;
    text-decoration: none;
}

    .pagination .active:hover {
        color: #fff;
        background: #000;
    }

ul.pagination {
    margin-top: 10px;
    margin-bottom: 0;
}

/*=====  Listing  =====*/
.table thead th {
    vertical-align: top;
}

.table-listing tr[data-rowlink] {
    cursor: pointer;
}

.table-listing th a.active {
    color: #3e5569;
    background-color: white;
}

    .table-listing th a.active i {
        color: #3e5569;
    }

.table-listing.table td, .table-listing.table th {
    padding: 5px 1em;
    /*cursor: default; */
}

.table-listing.table th {
    background-color: #3e5569;
    color: white;
}

    .table-listing.table th a {
        color: white;
        text-decoration: underline;
    }

/*=====  Small Icon Button  =====*/
.card-sm {
    /*width: 100px; */
    display: inline-block;
}
    /*
    .card-sm > div {
        width: 87px;
    }
*/
    .card-sm h3, .card-sm h6 {
        margin-bottom: 0;
    }

a.card-sm, button.card-sm {
    cursor: pointer;
}

/*=====  Form Controls  =====*/
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 7px;
}

input[type=radio] {
    width: 20px;
    height: 20px;
}

.input-validation-error {
    border-color: #da542e;
    background-color: #fdc7b8;
}

select.input-validation-error + .select2-container .select2-selection {
    border-color: #da542e;
    background-color: #fdc7b8;
}

.field-validation-error {
    color: #da542e;
}

.select2-container {
    width: 100% !important;
}

.select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 32px;
    line-height: 32px;
}

.datepicker-dropdown {
    z-index: 10000 !important;
}

.dropdown-menu {
    position: absolute;
    margin-top: -2px;
    padding: 0;
}

.dropdown-item {
    /*color: #2962FF; */
    border-bottom: 1px solid #cab6b64a;
    padding: 4px 10px;
}

    .dropdown-item:focus, .dropdown-item:hover {
        color: #fff;
        background-color: #2255a4;
    }

@media only screen and (max-width: 575px) {
    .form-group .text-right {
        text-align: left !important;
    }
}

/*=====  General  =====*/
.primary-color {
    color: #2962FF;
}

.accordion .card-header a {
    cursor: pointer;
}

.table td, .table th {
    padding: 0.2rem 0.5rem;
}

.listing-trxdate-period {
    padding: 2px 5px;
    margin-top: -3px;
    margin-left: 5px;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}


/*=====  Modal Preloader  =====*/
.modal .preloader {
    position: static !important;
}

.modal .lds-ripple {
    position: relative !important;
    left: calc(43%) !important;
}


/*=====  Morris  =====*/
.graph svg {
    width: 100%;
}


/*=====  Select2 readonly fix  =====*/
select[readonly].select2 + .select2-container {
    pointer-events: none;
    touch-action: none;
}

    select[readonly].select2 + .select2-container .select2-selection {
        background-color: #e9ecef;
        opacity: 1;
    }

.select2-selection {
    background: #eee;
    box-shadow: none;
}

.select2-selection__arrow,
.select2-selection__clear {
    display: block;
}

li.select2-selection__choice {
    max-width: 100%;
    overflow: hidden;
    /*Altered two below to make word wrap work */
    word-wrap: normal !important;
    white-space: normal;
}

ul.select2-selection__rendered {
    padding-right: 12px !important;
}

.select2-selection--multiple {
    overflow: hidden !important;
    height: auto !important;
}

/*=====  Top bar alert  =====*/
.alert p {
    margin-bottom: 0;
}

/*=====  Invoice Related Form   =====*/
form h4.main-title {
    display: inline-block;
    margin-right: 15px;
}

form .main-selection {
    /*
    max-width: 500px;
    display: inline-block;
	
    width: 100%;
	*/
}

.billing-item-box {
    border: 1px solid #2255a4;
    padding: 0 5px 5px;
}

    .billing-item-box:nth-child(n+3) {
        border-top: none;
    }

    .billing-item-box .select2-container--classic .select2-selection--single, .billing-item-box .select2-container--default .select2-selection--multiple,
    .billing-item-box .select2-container--default .select2-selection--single, .billing-item-box .select2-container--default .select2-selection--single
    .select2-selection__arrow, .billing-item-box .select2-container--default .select2-selection--single .select2-selection__rendered,
    .billing-item-box .form-control {
        line-height: 25px;
        height: 25px;
    }

    .billing-item-box .modal .select2-container--classic .select2-selection--single, .billing-item-box .modal .select2-container--default .select2-selection--multiple,
    .billing-item-box .modal .select2-container--default .select2-selection--single, .billing-item-box .modal .select2-container--default .select2-selection--single
    .select2-selection__arrow, .billing-item-box .modal .select2-container--default .select2-selection--single .select2-selection__rendered,
    .billing-item-box .modal .form-control {
        height: 35px;
        line-height: 35px;
    }

    .billing-item-box .total-container {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

        .billing-item-box .total-container .col-form-label {
            padding-top: 2px;
            padding-bottom: 2px;
        }

        .billing-item-box .total-container .form-group {
            margin-bottom: 2px;
        }

    .billing-item-box .item-index {
        font-weight: bold;
        font-size: 1rem;
        position: absolute;
        right: 15px;
    }

    .billing-item-box .option-group-text {
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .billing-item-box .option-list {
        width: 114px;
    }

.grand-total .form-group {
    margin-bottom: 2px;
}

/*=====  Option Group   =====*/
.option-group {
    margin: 1px 0;
}

    .option-group .select2-container, .option-group input {
        width: calc(100% - 40px) !important;
    }

.option-group-append {
    float: right;
}

.option-group-text[data-toggle="dropdown"] {
    cursor: pointer;
}

.option-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: #2255a4;
    border: 1px solid #2255a4;
    border-radius: 2px;
}



/**20190423 - global**/

/*=====  navbar - top menu =====*/
.nav-item .d-none {
    display: block !important;
}
.nav-item.vt-center {
    margin: auto;
    color: #000;
}

.nav-item .d-md-none {
    display: none !important;
}

img#logo_img {
    height: 50px;
    margin-top: -16px;
    /*margin-left: 12px; */
    margin-left: -4px;
}

span.logo-text {
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

.font-s-11 {
    font-size: 11px;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #000;
}

.topbar .user-dd {
    min-width: auto;
}

.topbar .top-navbar .navbar-nav > .nav-item:hover {
    background-color: #27a9e3;
}

.bg-cyan {
    background-color: #27a9e3 !important;
}

.topbar .nav-toggler, .topbar .topbartoggler {
    color: #000;
}

/*logo*/
.blog-cards {
    margin-bottom: 3em
}

.blog-cards--home {
    margin-top: 3em;
    padding-top: 3em;
    border-top: 1px solid #DFE1E6
}

.blog-cards--footer {
    padding-top: 3em;
    border-top: 1px solid #DFE1E6
}

.blog-cards__container {
    padding: 2em 1em 0
}

@media only screen and (min-width: 770px) {
    .blog-cards__container {
        padding: 0
    }
}

.blog-card {
    position: relative;
    display: block;
    background: #fff;
    /* height: 180px; */
    padding: 0 24px;
    margin: 0;
    /* border-radius: 4px; */
    /* border: 1px solid #DFE1E6; */
    color: #1F2667;
    text-decoration: none;
    overflow: hidden;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}

    .blog-card:hover {
        /*-webkit-transform: translateY(-1px); */
        /*transform: translateY(-1px);*/
        /*-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); */
        /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1)*/
    }



.blog-card__title {
    position: relative;
    top: 240px;
    font-size: 21px;
    font-weight: 500
}

.blog-card__category {
    position: absolute;
    bottom: 32px;
    text-transform: uppercase;
    color: #9DA3AC;
    letter-spacing: 0.2em
}

.blog-card__square {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(98, 113, 255, 0.9)));
    background: linear-gradient(to right, #fff, rgba(98, 113, 255, 0.9));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}


.blog-card__circle {
    /*
    position: absolute;
    top: -60px;
    right: -30px;
    width: 180px;
    height: 180px;
    border-radius: 90px;
	
    background: -webkit-gradient(linear, left top, right top, from(rgba(49, 207, 171, 0.5)), to(#50e3c2));
    background: linear-gradient(to right, rgba(49, 207, 171, 0.5), #50e3c2);
	*/
    /*
	background: -webkit-gradient(linear, left top, right top, from(rgba(203, 219, 255, 0.5)), to(#0831e6));
	background: linear-gradient(to right, rgba(203, 219, 255, 0.5), #0831e6);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
	*/
}

.mini-sidebar .blog-card__circle {
    background: transparent;
    background: transparent;
    webkit-box-shadow: 0 2px 8px #0e4fe0;
    box-shadow: 0 2px 8px #0e4fe0;
}

a.navbar-brand.blog-card.text {
    /* background: red; */
    webkit-box-shadow: 0 2px 8px #0e4fe0;
    box-shadow: 0 2px 8px #0e4fe0;
}

.blog-card:hover .blog-card__square {
    -webkit-transform: rotate(-40deg) scale(1.05);
    transform: rotate(-40deg) scale(1.05)
}

.blog-card:hover .blog-card__circle {
    -webkit-transform: rotate(-40deg) scale(1.5);
    transform: rotate(-40deg) scale(1.5)
}

.blog-card.hyphy {
    background: -webkit-gradient(linear, left top, left bottom, from(#1C7CE0), to(#150051));
    background: linear-gradient(to bottom, #1C7CE0, #150051);
    color: #fff;
    padding: 0 26px
}

    .blog-card.hyphy .blog-card__square,
    .blog-card.hyphy .blog-card__circle {
        display: none
    }

    .blog-card.hyphy .blog-card__title {
        top: 80px;
        font-size: 36px;
        font-weight: 300;
        letter-spacing: -0.02em
    }

    .blog-card.hyphy .blog-card__category {
        top: 40px;
        color: rgba(255, 255, 255, 0.5)
    }

.background .blog-card__square {
    top: -60px;
    left: -30px;
    width: 200px;
    height: 200px;
    background: -webkit-gradient(linear, left top, right top, from(#2336b6), to(rgba(31, 38, 103, 0.9)));
    background: linear-gradient(to right, #2336b6, rgba(31, 38, 103, 0.9));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.background .blog-card__circle {
    top: -60px;
    right: -30px;
    width: 180px;
    height: 180px;
    border-radius: 90px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(49, 207, 171, 0.5)), to(#50e3c2));
    background: linear-gradient(to right, rgba(49, 207, 171, 0.5), #50e3c2)
}

@media (max-width: 769px) {
    .blog-card__circle {
        background: transparent;
    }
}

/**20191118 - start sidebar change to menu bar**/
.dropdown-menu.user-dd {
    border: 2px solid #398fea;
    margin-top: -14px;
    
}
.dropdown-menu.user-dd .text{
    text-align: right;
}
.topbar .top-navbar .navbar-header {
    width: 200px !important;
    line-height: 65px;
}
.nav-image {
	display: inline-block;
}
.user-info {
	vertical-align: middle;
    text-align: center;
    border: 2px solid;
    border-radius: 50%;
    padding: 4px;
    line-height: 6.5;
    font-size: 10px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 

/*no side menu*/
#main-wrapper[data-sidebartype=full] .page-wrapper {
    margin-left: 0 !important;
}


.page-wrapper {
    
	margin-left: 0
}

/*nav menu*/
.navbar-dark {
    background: white;
}
button.navbar-toggler i.ti-menu.ti-close {
    color: black;
}
.custom-blue {
	padding: 1px;
    border-bottom: 2px solid #2962FF;
    border-top: 2px solid #2962FF;
}

.custom-blue li.nav-item {
    margin: 2px 4px;
}
.custom-blue .nav-item a.nav-link {
	font-size: 12px;
    padding: 8px 10px;
	text-align: center;
	min-width: 160px;
    background: #4725f0; 
	color: #fff;	
    /*padding: 4px 12px; */
	border-bottom-left-radius: 30px 10px;
    border-top-left-radius: 30px 10px;
    border-top-right-radius: 30px 10px;
    border-bottom-right-radius: 30px 10px;
}
.custom-blue.navbar-light .navbar-nav .active>.nav-link, 
.custom-blue.navbar-light .navbar-nav .nav-link.active, 
.custom-blue.navbar-light .navbar-nav .nav-link.show, 
.custom-blue.navbar-light .navbar-nav .show>.nav-link {
    color: #fff;
	
}
.custom-blue.navbar-light .nav-item a.nav-link:hover,
.custom-blue.navbar-light .nav-item a.nav-link:focus,
.custom-blue.navbar-light .nav-item a.nav-link:active {
	color: #fff;
}
.collapse.navbar-collapse {
    justify-content: center;
}
.custom-blue.navbar-expand-md .navbar-nav {
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.custom-blue .dropdown-toggle:after {
/* no used - replace fa icons*/
    display: inline-block;
	margin-top: 10px; 

    float: right;
    
}
.custom-blue ul.dropdown-menu {
    background: transparent;
    border: 0;
}
.custom-blue .dropdown-menu li {
    background: transparent;
}
.custom-blue .dropdown-menu li a,
.custom-blue .dropdown-menu li a:hover,
.custom-blue .dropdown-menu li a:focus,
.custom-blue .dropdown-menu li a:active {
	font-size: 12px;
    padding: 8px 10px;
    border-bottom-left-radius: 30px 10px;
    border-top-left-radius: 30px 10px;
    border-top-right-radius: 30px 10px;
    border-bottom-right-radius: 30px 10px;
    border: 2px solid #4725f0;
    padding: 4px 12px;
	background: white;
	color: #4725f0;
}
.custom-blue a .fa-chevron-right {
	float: right;
	margin-top: 4px;
}
.custom-blue a:hover .fa-chevron-right.down {	
	transition-duration: 0.2s;
	transform: rotate(90deg);
}
.custom-blue ul.dropdown-menu ul.dropdown-menu {
    margin-top: 1px;
}



@media (max-width:767px) {
	
	.custom-blue {
		position: fixed;
		z-index:9;
		width: 50%;		
		align-items: start;
	}
	.custom-blue .collapse.navbar-collapse.show {
		height: 500px;
		overflow-y: auto;
	}
	.custom-blue.navbar-expand-md .navbar-nav {    
		align-items: unset;
	}
	.custom-blue .nav-item a.nav-link {
		border-radius: 0;
	}
	.custom-blue .dropdown-menu li a, .custom-blue .dropdown-menu li a:hover, .custom-blue .dropdown-menu li a {		
		border: 1px solid #4725f0;
		border-radius: 0;
	}
	.custom-blue ul.dropdown-menu {
		margin: 2px 0;
	}
	.custom-blue .dropdown-menu ul {		
		margin: 2px;
	}
	.custom-blue .dropdown-menu li {		
		margin: 2px;
	}
	.custom-blue a .fa-chevron-right {			
		transform: rotate(90deg);
	}
	.custom-blue ul li ul li ul li a.dropdown-item {
		background: lightskyblue !important;
	}
	.custom-blue ul li ul li ul li ul li a.dropdown-item {
		background: #c2e5fb !important;
	}

}

@media (max-width:425px) {
	.custom-blue {		
		width: 100%;		
	}
}
/**20191118 - end sidebar change to menu bar**/

/*=====  button   =====*/

.btn-container {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn {
    font-size: 0.775rem;
    margin: 0 4px;
}

.btn-fix-width {
    min-width: 158px;
    border-radius: 5px;
}

.btn-primary {
    background: #443dcc;
}

.btn-outline-primary {
    color: #443dcc;
}

.btn-primary,
.btn-outline-primary {
    border: 1px solid #4725f0;
}

    .btn-primary:hover {
        color: #4725f0;
        background: #fff;
    }

    .btn-outline-primary:hover {
        border: 1px solid #4725f0;
        background: #443dcc;
    }

.btn-info {
    color: #000;
    background: #fff;
    border: 1px solid #000;
    -webkit-box-shadow: 0 2px 8px rgba(80,103,132,.4);
    box-shadow: 0 2px 8px rgba(80,103,132,.4);
}

    .btn-info:hover {
        color: #fff;
        background: #000;
        border: 1px solid #000;
    }

.btn-secondary,
.btn-outline-secondary {
    border: 1px solid #000;
}

    .btn-secondary:hover {
        color: #6c757d;
        background: #fff;
    }

.btn-danger {
    border: 1px solid red;
}

    .btn-danger:hover {
        color: #da542e;
        background: #fff;
    }

/*special for messagebox (yes, no) */
.jconfirm-buttons .btn-primary,
.jconfirm-buttons .btn-outline-primary {
    border: 1px solid #4725f0 !important;
}

    .jconfirm-buttons .btn-primary:hover {
        color: #4725f0;
        background: #fff;
    }

    .jconfirm-buttons .btn-outline-primary:hover {
        border: 1px solid #4725f0 !important;
        background: #443dcc;
    }



.form-group {
    margin-bottom: 0.3rem;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #000;
    background-color: rgba(0,119,204,0.05);
    ;
}

header .navbar-brand {
    background: #fff;
}

#main-wrapper .topbar .top-navbar .navbar-header[data-logobg=skin5] {
    background: #fff;
	
}
@media (max-width:767px) {
	#main-wrapper .topbar .top-navbar .navbar-header[data-logobg=skin5] {
		width: 100% !important;
	}
}
#main-wrapper .left-sidebar[data-sidebarbg=skin5], #main-wrapper .left-sidebar[data-sidebarbg=skin5] ul {
    background: #fff;
}
/*=====  sidebar   =====*/
::-webkit-scrollbar {
    width: 0.8em;
}

::-webkit-scrollbar-button {
    background: transparent;
}

::-webkit-scrollbar-track-piece {
    background: #eee;
}

::-webkit-scrollbar-thumb {
    background: #888;
}
/*for scroll*/
body {
    overflow-y: hidden;
}
/*for sidebar can scroll*/
/*
.main-wrapper {
    height: 100px; 
}
*/
aside.left-sidebar {
    overflow-y: auto;
}

.container-fluid {
    overflow-y: scroll;
    height: calc(100vh - 100px); /*for sidebar can scroll*/
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    color: #000;
    line-height: 1px;
}

.sidebar-nav .has-arrow:after {
    border-color: #000;
    top: 16px;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    color: #000;
    line-height: 0;
    /*font-size: 11px;  */ /*will affected all*/
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link i {
    font-size: 11px;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link {
    background: #5a73f7; /*light blue*/
}

.sidebar-nav li.sidebar-item.active {
    background: #c7e3ff2b;
    /*border-left: 3px solid blue; */ /*if add need check -- (bank reconciliation -> transaction) */
}

.sidebar-nav .active a.sidebar-link.active {
    /*padding-left: 11px!important; */ /*if add need check -- (bank reconciliation -> transaction) */
}

/*add button beside side-bar*/
.popup-panel {
    position: fixed;
    top: 50%;
    left: 240px;
    background-color: transparent;
    z-index: 1000;
    /*
	border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
	*/
    border-radius: 50%;
    cursor: pointer;
}

.mini-sidebar .popup-panel {
    left: 54px;
    -webkit-transform: rotate(180deg) translate(0, -50%);
    -ms-transform: rotate(180deg) translate(0, -50%);
    -o-transform: rotate(180deg) translate(0, -50%);
    transform: rotate(180deg) translate(0, -50%);
    /*
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    */
}

.popup-panel .btn-outline-primary {
    /*
	border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
	*/
    border-radius: 50%;
    /*border: transparent;*/
    background-color: #eaeaea;
    font-size: 20px;
}

    .popup-panel .btn-outline-primary,
    .popup-panel .btn-outline-primary:hover,
    .popup-panel .btn-outline-primary:active {
        border: transparent;
    }

        .popup-panel .btn-outline-primary:hover,
        .popup-panel .btn-outline-primary:active {
            color: black;
        }

@media (max-width: 767px) {
    .popup-panel {
        display: none;
    }
}
/*=====  icon   =====*/

td a.mdi-auto-fix:before {
    content: "\F3ea";
}

a .i.mdi {
    padding-right: 3px;
}

nav.nav.animate i.mdi:before {
    display: none;
}

.mdi.blue:before {
    /*color: blue;*/
}

.mdi.mdi-abs-A {
    display: flex;
    position: absolute;
}

.mdi.font-size:before {
    font: normal normal normal 10px/1 "Material Design Icons";
}

.mdi-abs-A:before {
    content: "A";
}

.mdi.mdi-abs-P {
    display: flex;
    position: absolute;
}

.mdi-abs-P:before {
    content: "P";
}

.mdi.mdi-abs-S {
    display: flex;
    position: absolute;
}

.mdi-abs-S:before {
    content: "S";
}



.mdi-AJE:before {
    content: "AJE";
}

.mdi-AJT:before {
    content: "AJT";
}

.mdi-AJI:before {
    content: "AJI";
}

.mdi-AST:before {
    content: "AST";
}

.mdi-ABG:before {
    content: "ABG";
}

.mdi-AFR:before {
    content: "AFR";
}

.mdi-AJR:before {
    content: "AJR";
}

.mdi-PRV:before {
    content: "PRV";
}

.mdi-SRV:before {
    content: "SRV";
}

.mdi-AFR:before {
    content: "AFR";
}

.mdi-AAL:before {
    content: "AAL";
}

.mdi-ABR:before {
    content: "ABR";
}

.mdi-ACL:before {
    content: "ACL";
}

.mdi-APO:before {
    content: "APO";
}

.mdi-ARC:before {
    content: "ARC";
}

.mdi-ARP:before {
    content: "ARP";
}

.mdi-ARR:before {
    content: "ARR";
}

.mdi-T:before {
    content: "T";
}

.mdi-S:before {
    content: "S";
}

.mdi-R:before {
    content: "R";
}

.mdi-PIV:before {
    content: "PIV";
}

.mdi-PDN:before {
    content: "PDN";
}

.mdi-PCN:before {
    content: "PCN";
}

.mdi-PBP:before {
    content: "PBP";
}

.mdi-PVP:before {
    content: "PVP";
}

.mdi-PAP:before {
    content: "PAP";
}

.mdi-SIV:before {
    content: "SIV";
}

.mdi-SDN:before {
    content: "SDN";
}

.mdi-SCN:before {
    content: "SCN";
}

.mdi-SRC:before {
    content: "SRC";
}

.mdi-VSR:before {
    content: "VSR";
}

.mdi-SRL:before {
    content: "SRL";
}

.mdi-SOA:before {
    content: "SOA";
}

.mdi-MSP:before {
    content: "MSP";
}

.mdi-MPT:before {
    content: "MPT";
}

.mdi-MCS:before {
    content: "MCS";
}

.mdi-MCT:before {
    content: "MCT";
}

.mdi-MBK:before {
    content: "MBK";
}

.mdi-MPM:before {
    content: "MPM";
}

.mdi-MTX:before {
    content: "MTX";
}

.mdi-MJT:before {
    content: "MJT";
}

.mdi-CA:before {
    content: "CA";
}

.mdi-MCA:before {
    content: "MCA";
}

.mdi-MAC:before {
    content: "MAC";
}

.mdi-MAT:before {
    content: "MAT";
}

.mdi-MCC:before {
    content: "MCC";
}

.mdi-MPD:before {
    content: "MPD";
}

.mdi-SGF:before {
    content: "SGF";
}

.mdi-SGD:before {
    content: "SGD";
}

.mdi-SGW:before {
    content: "SGW";
}

.mdi-SGC:before {
    content: "SGC";
}

.mdi-CGR:before {
    content: "CGR";
}

.mdi-COM:before {
    content: "COM";
}

.mdi-RF:before {
    content: "RF";
}

.mdi-CID:before {
    content: "CID";
}

.mdi-SER:before {
    content: "SER";
}

.mdi-SEU:before {
    content: "SEU";
}

.mdi-O:before {
    content: "O";
}

.mdi-NOB:before {
    content: "NOB";
}

.mdi-FSL:before {
    content: "FSL";
}

.mdi-FSA:before {
    content: "FSA";
}

.mdi-FCL:before {
    content: "FCL";
}

.mdi-FCA:before {
    content: "FCA";
}

.mdi-FTB:before {
    content: "FTB";
}

.mdi-FPL:before {
    content: "FPL";
}

.mdi-FBS:before {
    content: "FBS";
}

.mdi-FGL:before {
    content: "FGL";
}

.mdi-FBG:before {
    content: "FBG";
}

.mdi-FST:before {
    content: "FST";
}
.mdi-FFC:before {
    content: "FFC";
}

.mdi-FFS:before {
    content: "FFS";
}

.mdi-TIV:before {
    content: "TIV";
}

.mdi-SEUR:before {
    content: "SEUR";
}

.mdi-AMTT:before {
    content: "AMTT";
}

.mdi-AWT:before {
    content: "AWT";
}

.mdi-value:before {
    content: " *";
}


/*=====  navbar   =====*/
#navbarSupportedContent {
    background: #fff !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: #000;
}
/*=====  progress bar   =====*/

.dailyOccupanny .card-body {
}


.dailyOccupanny .sec1 {
    width: 100px;
}

.dailyOccupanny .sec2 {
    width: 70px;
}

.dailyOccupanny .sec3 {
    width: 300px;
}

.dailyOccupanny .progress {
    margin-top: 6px;
}


/*=====  Bread crumb and right sidebar toggle   =====*/

.page-breadcrumb.custom .nav-set {
    float: left;
}

.page-breadcrumb.custom {
    padding: 0;
    cursor: default;
}

    .page-breadcrumb.custom .breadcrumb-container {
        background: #0f3dea; /*dark blue*/
        padding: 2px 20px;
        webkit-box-shadow: 0 2px 8px #0e4fe0;
        box-shadow: 0 2px 8px #0e4fe0;
    }

    .page-breadcrumb.custom .page-title {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
    }

    .page-breadcrumb.custom .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
        color: #fff;
    }

    .page-breadcrumb.custom .breadcrumb .breadcrumb-item a {
        color: #fff;
        text-decoration-line: underline;
    }

    .page-breadcrumb.custom .breadcrumb .breadcrumb-item.active {
        color: #b2b4e8;
    }

    .page-breadcrumb.custom .w-breadcrumb {
        width: 110%;
    }

@media (min-width: 576px) {
    .page-breadcrumb.custom .nav-set {
        float: right;
    }
}

/*=====  accordion   =====*/
.page-transaction {
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    margin: 10px;
    border-color: #398fea;
}

    .page-transaction .card {
        box-shadow: none;
        -webkit-box-shadow: none;
    }

        .page-transaction .card .card-body.p-all {
            padding: 10px;
        }

.md-accordion .card .card-header.red {
    background: #da542e !important;
}

.md-accordion .card .card-header a:not(.collapsed) .rotate-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.md-accordion.accordion .card-header a {
    cursor: pointer;
    color: white;
}

.md-accordion .fa-1_5x {
    font-size: 1.1em;
    margin-top: 4px;
}

.headerContainer {
    /*
    max-width: 600px;
    margin: 0 auto;    
    
*/
}

/*=====  chart   =====*/


#myDiv, #tester, #barUpDown, #Relmode {
    margin: 0 auto;
    /*
  border: 1px solid black;
  */
    padding: 10px;
    height: 85vh;
    min-height: 300px;
    margin-bottom: 10px;
    width: 100%;
    /*
  width: 49%;
  display: inline-block;
  */
}

@media only screen and (max-width: 1050px) {
    #myDiv, #tester, #barUpDown, #Relmode {
        /*width: 100%; */
        /*display: block;*/
    }
}

/*=====  sortable   =====*/


/*form*/
.page-wrapper {
    /*background: #fff; */
}

    .page-wrapper > .container-fluid {
        /*mobile size will affect*/
        /*padding: 0;
	*/
    }

@media only screen and (max-width: 650px) {
    .page-wrapper > .container-fluid {
        padding: 0;
    }
}

.form-control, .col-form-label, table {
    font-size: 0.775rem;
    border-radius: 5px;
}

.select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.775rem;
}
/*=====  card   =====*/

.card.filter .rotated {
    width: 100%;
    color: white;
    margin: 0 auto;
    background: #398fea; /*light light blue*/
    text-align: center;
}

@media only screen and (min-width: 1050px) {
    /*can not set bcos other had used*/
    .card.filter .rotated {
        transform: rotate(-45deg); /* Equal to rotateZ(45deg) */
        /* Safari */
        -webkit-transform: rotate(-45deg);
        /* Firefox */
        -moz-transform: rotate(-45deg);
        /* IE */
        -ms-transform: rotate(-45deg);
        /* Opera */
        -o-transform: rotate(-45deg);
        /* Internet Explorer */
        /*
	  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	*/
        width: 120px;
        color: white;
        font-weight: bold;
        /*background-color: #398fea;*/
        text-align: center;
        position: absolute;
        margin-top: 26px;
        margin-left: -30px;
        background: transparent;
    }

    .card.filter .triangle-topleft {
        width: 0;
        height: 0;
        border-top: 90px solid #398fea;
        border-right: 90px solid transparent;
        position: absolute;
    }
}


.card {
    -webkit-box-shadow: 0 2px 8px rgba(80,103,132,.4);
    box-shadow: 0 2px 8px rgba(80,103,132,.4);
}

    .card .card-body {
        /*
	display: none;
	*/
    }

    .card.filter {
        padding: 2px;
    }

        .card.filter .card-body {
            /*
	display: none;
	*/
            margin: 0 auto;
            max-width: 600px;
        }

        .card.filter .btn-fix-width {
            width: 120px;
        }

@media only screen and (max-width: 450px) {
    .card.filter .btn-fix-width {
        width: 100%;
        margin: 4px 0;
    }
}

a.card .box {
    border-radius: 5px;
    padding: 2px 10px;
    -webkit-box-shadow: 0 2px 8px rgba(80,103,132,.4);
    box-shadow: 0 2px 8px rgba(80,103,132,.4);
}

a.card.card-hover.card-sm {
    /*margin-right: 10px; */
    border-radius: 5px;
}
/*Add or Edit*/
.card.detail {
    padding: 2px;
}

span.value-mandatory { /*for mandatory field - behind label*/
    color: red;
    padding-left: 4px;
}

.card.detail span.need-value { /*for mandatory field - behind text*/
    display: inline-block;
    position: absolute;
    margin-top: -22px;
    color: red;
    right: 0;
}

.card.detail .card-header:first-child {
    background: #398fea;
}

.card-header-white:first-child {
    background: #FFFFFF;
    border: 1px solid black;
}

.card-header-white a {
    color: black;
}

.card.detail .card-header.item:first-child {
    background: #71b1f5;
}

.card.detail .billing-item-box {
    border: 0;
    /* border: 1px solid #71b1f5; */
}

.card.detail .billing-container {
    margin-top: 10px;
}

.card.detail .card-container.edit {
    padding: 1.25rem; /*used for edit, not add*/
}

.card.detail .card-body {
    padding: 0;
}

    .card.detail .card-body .card {
        margin-bottom: 0;
    }

.card.detail .main-title {
    width: 100%;
    color: white;
    margin: 0 auto;
    background: #398fea;
    text-align: center;
    margin-bottom: 10px;
}

.card.detail .detailContainer {
    padding: 0 20px;
    margin-bottom: 10px;
}

.card.detail .detailTransaction {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}
    /*affected sale, purchases invoice, credit noted .. */
    /*

.card.detail .page-transaction .detailTransaction {    
	padding: 0;
	
}
*/
    .card.detail .detailTransaction .th-w-tax {
        min-width: 150px;
    }



.card.detail .table-container {
    padding: 0 1.25rem;
}

.card.detail .page-transaction .table-container {
    padding: 0;
}

.card.detail .table-listing.table td {
    /*padding: 0;*/ /*affected supplier - add listing*/
}

.card.detail table tr td .form-control:disabled,
.card.detail table tr td .form-control[readonly] {
    background-color: transparent;
}

.card.detail table tr td .select2-container--classic .select2-selection--single,
.card.detail table tr td .select2-container--default .select2-selection--single,
.card.detail table tr td .select2-container--default .select2-selection--single .select2-selection__arrow,
.card.detail table tr td .select2-container--default .select2-selection--single .select2-selection__rendered {
    background: transparent;
}

.card.detail table tr td.option-group select[readonly].select2 + .select2-container .select2-selection {
    background-color: transparent;
}

.card.detail table td .form-control:disabled, .card.detail table td .form-control[readonly] {
    border-radius: 0; /*can not put will affect top 'detail' design textbox*/
    border: 0;
    cursor: default;
}

.card.detail table td.option-group span.select2-selection.select2-selection--single {
    border-radius: 0;
}

.card.detail .btn-container.btn-group {
    margin-left: 20px;
}

.card.detail .option-group-text {
    font-size: 0.775rem;
}

.card.detail .note {
    /*same like .card.detail .detailContainer*/
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 20px;
}


.card.detail .accordion-item {
    min-width: 100%;
    padding: 4px 0 10px 0;
}


/*company  refresh data*/
.card.refresh-data button.card.card-hover.card-sm {
    min-width: 100px;
    min-height: 80px;
    flex-direction: row;
}

.card.refresh-data .box {
    width: 100px;
    height: 80px;
}

.card.refresh-data h4 {
    min-height: 46px;
}

.card.refresh-data .font-light {
    color: white;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 10px;
    border: 1px solid;
    border-radius: 5px;
    background: #5a73f7;
}
/*=====  table   =====*/


.set-pointer {
    cursor: pointer;
}

.table.header th,
.table.note-list th {
    background-color: #3e5569;
    color: white;
}

.table.header {
    margin: 10px;
}

.listing .table-listing td a.mdi.mdi-auto-fix.btn-primary,
.listing .table-listing td a.mdi.mdi-eye.btn-info,
.listing .table-listing td a.mdi.mdi-key.btn-info,
.listing .table-listing td a.mdi.mdi-delete.btn-danger,
.listing .table-listing td button.mdi.mdi-eye.btn-info,
.listing-financial .table-listing td a.mdi.mdi-auto-fix.btn-primary,
.listing-financial .table-listing td a.mdi.mdi-eye.btn-info,
.listing-rate .table-listing td a.mdi.mdi-auto-fix.btn-primary,
.listing-rate .table-listing td a.mdi.mdi-eye.btn-info,
.listing-company .table-listing td a.mdi.mdi-auto-fix.btn-primary,
.listing-company .table-listing td a.mdi.mdi-eye.btn-info,
.listing-company .table-listing td a.mdi.mdi-box-shadow.btn-info,
.listing-company .table-listing td a.mdi.mdi-currency-usd.btn-dark,
.listing-period .table-listing td a.mdi.mdi-auto-fix.btn-primary,
.listing-period .table-listing td a.mdi.mdi-eye.btn-info,
.listing-period .table-listing td a.mdi.mdi-delete.btn-danger {
    width: 28px;
    /*text-indent: 100%; */
    white-space: nowrap;
    overflow: hidden;
}

th.th-w-group_code {
	width: 150px;
    min-width: 150px;
}

th.th-w-group_name {
}

th.th-w-company_code {
	width: 150px;
	min-width: 150px;
}

th.th-w-company_name {
	width: 200px;
	min-width: 200px;
}

th.th-w-company_group {
}
th.th-w-company_active {
	width: 70px;
	min-width: 70px;
}

th.th-w-crud {
	width: 50px;
	min-width: 50px;
}

th.th-w-checkbox {
    min-width: 50px;
}

th.th-w-created_by {
	min-width: 250px;
	width: 250px;
}

th.th-w-created_on {
}

th.th-w-updated_by {
}

th.th-w-updated_on {
}

th.th-w-item_code {
}

th.th-w-item_name {
}
th.th-w-acc_type {
    width: 100px;
    min-width: 100px;
}
th.th-w-acc_type_code {
}

th.th-w-acc_type_name {
}

th.th-w-acc_code {
	min-width: 100px;
    width: 100px;
}

th.th-w-acc_name {
}

th.th-w-acc_group {
	width: 250px;
    min-width: 250px;
}

th.th-w-acc_group_code {
}

th.th-w-acc_group_name {
}

th.th-w-subledger {
}

th.th-w-analysis_no {
}

th.th-w-analysis_name {
}

th.th-w-analysis_code {
}

th.th-w-analysis_code_to {
}

th.th-w-trans_date {
    min-width: 150px;
	width: 150px;
}

th.th-w-doc_no {
    min-width: 140px;
	width: 140px;
}

th.th-w-reference {
}

th.th-w-payee {
}

th.th-w-bank_acc {
    min-width: 150px;
	width: 150px;
}

th.th-w-bank_code {
}

th.th-w-bank_name {
    min-width: 200px;
	width: 200px;
}

th.th-w-contact {
}

th.th-w-cheque_no {
}

th.th-w-status {
	width: 100px;
	min-width: 100px;
}
#voidDocumentList th.th-w-status {
	width: unset;
    min-width: unset;
}
th.th-w-amount {
    min-width: 100px;
	width: 100px;
}

th.th-w-remark {
}

th.th-w-reconcile_on {	
    
}

th.th-w-action {
	min-width: 100px;
    width: 100px;
}

th.th-w-amount {
}

th.th-w-supplier {
    min-width: 400px;
	
}

th.th-w-supplier_code {
}

th.th-w-supplier_name {
    min-width: 400px;
}

th.th-w-customer {
    min-width: 400px;
}

th.th-w-customer_code {
}

th.th-w-customer_name {
}

th.th-w-chart_acc {
    min-width: 350px;
}

th.th-w-chart_acc_code {
	width: 100px;
    min-width: 100px;
}

th.th-w-chart_acc_name {
	width: 250px;
    min-width: 250px;
}

th.th-w-invoice {
    min-width: 150px;
}

th.th-w-quantity {
    min-width: 100px;
}

th.th-w-price {
    min-width: 100px;
}

th.th-w-payment_voucher {
    min-width: 130px;
}

th.th-w-debit {
    min-width: 130px;
}

th.th-w-credit {
    min-width: 130px;
}

th.th-w-desc {
}

th.th-w-journalTemplatName {
    min-width: 230px;
}

th.th-w-acc_currency {
    min-width: 130px;
}

th.th-w-currency {
    min-width: 130px;
}

th.th-w-currency_code {
    min-width: 100px;
    width: 100px;
}

th.th-w-currency_name {
    min-width: 130px;
}

th.th-w-rate {
}

th.th-w-credit_code {
}

th.th-w-credit_name {
}

th.th-w-period {
}

th.th-w-start_date {
}

th.th-w-end_date {
}

th.th-w-lock {
}

th.th-w-journal_code {
}

th.th-w-journal_type {
}

th.th-w-journal_name {
}

th.th-w-vourcher_no {
	width: 110px;
    min-width: 110px;
}

th.th-w-payment_mode_code {
}

th.th-w-payment_mode_name {
    min-width: 160px;
}

th.th-w-payment_term_code {
}

th.th-w-payment_term_name {
}

th.th-w-email {
}

th.expired_on {
}

th.th-w-role_code {
}

th.th-w-role_name {
}

th.th-w-tax_code {
	width: 100px;
    min-width: 100px;
}

th.th-w-tax_name {
}
th.th-w-active {
    width: 100px;
    min-width: 100px;
}
th.th-w-allocation {
}

th.th-w-document {
}

/*
th.th-width-100{
	min-width: 100px;
}
th.th-width-140{
	min-width: 140px;
}
th.th-width-150{
	min-width: 150px;
}
th.th-width-160{
	min-width: 160px;
}
th.th-width-200{
	min-width: 200px;
}
th.th-width-400{
	min-width: 400px;
}
*/
tr:nth-child(even) {
    background: #fff
}

tr:nth-child(odd) {
    background: #c7e3ff2b
}

.td-btn a.mdi {
    /*
	color: #4725f0;
	border: 1px solid #4725f0;
	*/
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 8px rgba(80,103,132,.4);
    box-shadow: 0 2px 8px rgba(80,103,132,.4);
}

    .td-btn a.mdi:hover {
        /*
	background-color: rgba(0,119,204,0.05);
	*/
    }

.td-btn .btn-group-sm > .btn, .btn-sm {
    padding: 0rem 0.5rem;
    margin-bottom: 4px;
}

/*=====   modal   =====*/
.modal-content {
    position: relative;
}

    .modal-content:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        right: 10px;
        left: auto;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        -webkit-box-shadow: 0 15px 10px #777;
        -moz-box-shadow: 0 15px 10px #777;
        box-shadow: 0 15px 10px #777;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }

.modal-header {
    padding: 4px 10px;
    color: #fff;
    background: #398fea;
    margin: 2px;
}

.modal-content .modal-body.sm-container {
    margin: 0 auto;
    max-width: 600px;
}

/*=====  financial report - edit =====*/
.dxrd-designer-wrapper .dxrd-menu-button .dxrd-menu-button-image svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
}


/*
.dxrd-designer-wrapper .dxrd-toolbox-item .dxrd-image-padding svg:hover {
	fill: blue;
	border: 2px solid #4896f3;
}
*/
.dxd-icon-fill {
    fill: #4896f3;
}

path.dxd-icon-fill {
    fill: #4896f3;
}

.dxrd-designer-wrapper .dxrd-toolbox-item .dxd-back-secondary,
.dxrd-designer-wrapper .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxd-back-secondary {
    background-color: transparent;
}

.dxrd-preview-export-toolbar-item .dxrd-preview-export-menu-item .dxrd-preview-export-item-image-wrapper .dxrd-preview-export-item-image {
    height: 20px !important;
    width: 20px !important;
}

    .dxrd-preview-export-toolbar-item .dxrd-preview-export-menu-item .dxrd-preview-export-item-image-wrapper .dxrd-preview-export-item-image svg {
        border: 2px solid blue;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
        background: white;
        fill: #4896f3;
    }

/*.dxrd-designer-wrapper .dxrd-menu-button .dxrd-menu-button-image svg, */
.dxrd-designer-wrapper .dxrd-toolbox-item .dxrd-image-padding svg,
.dxrd-designer-wrapper .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxrd-toolbar-item-image svg,
.dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding svg {
    border: 2px solid blue;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    background: white;
    fill: #4896f3;
}
    /*.dxrd-designer-wrapper .dxrd-menu-button .dxrd-menu-button-image svg:hover, */
    .dxrd-designer-wrapper .dxrd-toolbox-item .dxrd-image-padding svg:hover,
    .dxrd-designer-wrapper .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxrd-toolbar-item-image svg:hover,
    .dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding svg:hover {
        border: 2px solid #4896f3;
        fill: blue;
    }

    .dxrd-designer-wrapper .dxrd-menu-button .dxrd-menu-button-image svg .dxd-icon-fill,
    .dxrd-designer-wrapper .dxrd-toolbox-item .dxrd-image-padding svg .dxd-icon-fill,
    .dxrd-designer-wrapper .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxrd-toolbar-item-image svg .dxd-icon-fill,
    .dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding svg .dxd-icon-fill {
        /*fill: #4896f3; */
        fill: unset;
    }

        .dxrd-designer-wrapper .dxrd-menu-button .dxrd-menu-button-image svg .dxd-icon-fill:hover,
        .dxrd-designer-wrapper .dxrd-toolbox-item .dxrd-image-padding svg .dxd-icon-fill:hover,
        .dxrd-designer-wrapper .dxrd-toolbar-wrapper .dxrd-toolbar .dxrd-toolbar-item .dxrd-toolbar-item-image svg .dxd-icon-fill:hover,
        .dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding svg .dxd-icon-fill:hover {
            /*fill: blue; */
        }
/*=====  chart  =====*/

.card.chart {
    padding: 20px;
    /*problem margin-bottom*/
    /*margin: 0 Auto;*/
}

    .card.chart .font {
        font-size: 11px;
        font-weight: 700;
    }

    .card.chart .table-container {
        width: 100%;
        max-height: 184px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .card.chart .col-temp .col-9 {
        padding-right: 0;
    }

    .card.chart .col-temp .col-3 {
        padding-left: 0
    }

.full-page {
    margin: 0 auto;
    margin-bottom: 10px;
}

    .full-page .only-plot svg.main-svg {
        background: transparent !important;
    }

    .full-page .only-plot .modebar-container {
        display: none;
    }

    .full-page hr.new {
        border: 1px solid #000;
        width: 100%;
        margin: 10px;
    }

hr.line {
    border: 1px solid #71b1f5;
    width: 100%;
    margin: 10px;
}

.color1 {
    color: #000;
}

.color2 {
    color: #666;
}

.green {
    color: green;
}

.red {
    color: red;
}

.border-red {
    border: 3px solid red;
}

.mt-20 {
    margin-top: 20px;
}

.beauty * {
    box-sizing: border-box
}

.beauty.ml {
    margin-left: 10px;
}

.beauty input:not([type=checkbox]):not([type=radio]) {
    display: none
}

.beauty {
    position: relative;
    display: inline-block;
    margin-right: 1em;
    white-space: nowrap;
    line-height: 1
}

    .beauty input {
        position: absolute;
        left: 0;
        top: 0;
        min-width: 1em;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
        margin: 0;
        padding: 0;
        cursor: pointer
    }

    .beauty .state label {
        position: initial;
        display: inline-block;
        font-weight: 400;
        margin: 0;
        text-indent: 1.5em;
        min-width: calc(1em + 2px)
    }

        .beauty .state label:after,
        .beauty .state label:before {
            content: '';
            width: calc(1em + 2px);
            height: calc(1em + 2px);
            display: block;
            box-sizing: border-box;
            border-radius: 0;
            border: 1px solid transparent;
            z-index: 0;
            position: absolute;
            left: 0;
            top: calc((0% - (100% - 1em)) - 8%);
            background-color: transparent
        }

        .beauty .state label:before {
            border-color: #bdc3c7
        }

    .beauty .state.p-is-hover,
    .beauty .state.p-is-indeterminate {
        display: none
    }




    .beauty.p-default.p-fill .state label:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    .beauty.p-default .state label:after {
        -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
        transform: scale(.6)
    }

    .beauty.p-default input:checked ~ .state label:after {
        background-color: #bdc3c7 !important
    }

    .beauty.p-round .state label:after,
    .beauty.p-round .state label:before {
        border-radius: 100%
    }

    .beauty.p-round.p-icon .state .icon {
        border-radius: 100%;
        overflow: hidden
    }

        .beauty.p-round.p-icon .state .icon:before {
            -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
            transform: scale(.8)
        }

    .beauty.p-icon .state .icon {
        position: absolute;
        font-size: 1em;
        width: calc(1em + 2px);
        height: calc(1em + 2px);
        left: 0;
        z-index: 1;
        text-align: center;
        line-height: normal;
        top: calc((0% - (100% - 1em)) - 8%);
        border: 1px solid transparent;
        opacity: 0
    }

        .beauty.p-icon .state .icon:before {
            margin: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            line-height: 1
        }

    .beauty.p-icon input:checked ~ .state .icon {
        opacity: 1
    }

    .beauty.p-icon input:checked ~ .state label:before {
        border-color: #5a656b
    }

    .beauty .black {
        color: #000;
    }

    .beauty.p-color1 {
        color: rgb(31, 119, 180);
    }

    .beauty.p-color2 {
        color: rgb(255, 127, 14);
    }

    .beauty.p-color3 {
        color: green;
    }

    .beauty.p-color4 {
        color: #cafdc8;
    }

    .beauty.p-color5 {
        color: #c8d5fd;
    }

    .beauty.p-color6 {
        color: #f7bcbc;
    }

    .beauty.p-color11 {
        color: rgb(3, 20, 249);
    }

    .beauty.p-color12 {
        color: rgb(251, 3, 3);
    }

    .beauty.p-color13 {
        color: rgb(47, 119, 18);
    }

    .beauty.p-color14 {
        color: #b1c9f5;
    }

    .beauty.p-color15 {
        color: #f7b8bb;
    }

    .beauty.p-color16 {
        color: #e3fde2;
    }
    /*will affect other checkbox PI, PDN ...
.beauty .mdi-check:before {
    content: "\F415"!important;
}
*/
    /*special for collapse / expand all */
    .beauty.p-icon .state .icon.show {
        opacity: 1 !important;
        border: 1px solid black !important;
    }


/*for hover text color*/
.chart.no_1 text.name {
    fill: black!important;
}


/*=====  test   =====*/
.grid-square {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #fff;
    border: solid 1px rgb(0,0,0,0.2);
    padding: 10px;
    margin: 12px;
}


/*=====  footer   =====*/
.footer {
    cursor: default;
    padding: 12px 20px;
    background: #398fea;
    color: white;
    webkit-box-shadow: 0 2px 8px #0e4fe0;
    box-shadow: 0 2px 8px #0e4fe0;
}

    .footer a {
        color: #fff;
        text-decoration-line: underline;
    }
/*cy edit*/
/*administrator -> company -> company*/
td.clickable-column:hover {
    cursor: pointer;
}
/*administrator -> company -> group*/
#groupList th.th-w-crud {
    width: 50px!important;
}

/*
.btn-group-sm>.btn, .btn-sm {
    padding: 0.25rem 0.25rem;
}
*/

.error-box {
    position: static;
}
/*paging button '...' hide */
li.disabled.PagedList-ellipses {
    display: none;
}


/*SST-02*/
#sst-02-form div.row {
    padding: 10px 0;
}
#sst-02-form .numbering {
    width: 20px;
    padding-right:0px;
}
#sst-02-form .title {
    background-color:#ccc;
    font-weight:bold;
}
#sst-02-form .subtitle {
    background-color: #ccc;
    font-weight: bold;
    padding:0 5px;
}
#sst-02-form .currency {
    text-align:right;
}
.zeropadding {padding:0;}