/********** REBOOT **********/
body {
margin:0px;
background-color:#eee;
background-image: url('/img/background-tile.jpg');
background-repeat: repeat;
color:#555;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size:0.9rem;
min-height:90vh;
}

p {
margin-bottom: 0.25rem;
}
a {
color:#555;
}

label {
margin-bottom:0px;
}

input[type='number'] {
-moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance:none;
}

pre {
margin:0px;
}

td {
vertical-align:top;
}

hr {
margin-top:0.75rem;
margin-bottom:0.75rem;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color:#999 !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#999 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
color:#999 !important;
}


/********** BOOTSTRAP **********/
/* shadow */
.shadow-sm {
box-shadow:0px 2px 6px 1px rgba(0, 0, 0, 0.125) !important;
}
.shadow-2 {
box-shadow:0px 4px 6px 1px rgba(0, 0, 0, 0.225) !important;
}

/* navbar */
.navbar {
justify-content:space-between;
padding-left:.4rem;
padding-right:.4rem;
padding-top:.2rem;
padding-bottom:.2rem;
}

.navbar .navbar-break {
flex-basis: 100%;
height: 0;
}

.navbar > .navbar .nav-item {
padding:0px;
}

.navbar .nav-item .nav-link, .nav .nav-item {
border-radius:0.5rem;
}

.navbar.bg-theme .nav-item .nav-link {
color:#fff;
}

.navbar > .navbar.bg-theme .nav-item .nav-link:hover {
background-color:rgb(27, 219, 146);
color:#fff;
}

.nav-item.nav-btn {
border-left:1px solid #3d628a;
position:absolute;
right:0px;
top:0px;
bottom:0px;
padding-left:12px;
padding-right:12px;
line-height:52px;
font-size:1.1rem;
}

.nav-item.nav-btn a {
color:#fff;
}


/* nav-tabs */
.nav-tabs .nav-link {
border-radius:unset;
font-size:0.9rem;
}
.nav-tabs .nav-link.active {
border-top:3px solid #DE4343;
}


/* nav-pills */	
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
border-radius:2.5rem;
}


/* dropdown */
.dropdown-menu {
font-size: inherit;
border-radius: 0px;
}
.dropdown-menu-right{
animation: dropdownanimation 0.2s
}
.dropdown-toggle.no-sign::after {
display: none;
}

@keyframes dropdownanimation {
0% { opacity: 0; }
20% { opacity: 0.2; }
40% { opacity: 0.4; }
60% { opacity: 0.6; }
80% { opacity: 0.8; }
100% { opacity: 1; }
}
		
.dropdown-item {
white-space: unset;
}

.dropdown-toggle::after {
margin-left:unset;
}

.dropdown-menu.iconize > a {
padding-top:8px;
padding-bottom:8px;
padding-left: 40px;
position: relative;
}

.dropdown-menu a .icon {
position: absolute;
top:8px;
left:12px;
}


/* modal */
.modal-content {
border-radius: unset;
}
@media (min-width: 576px) {
.modal-sm {
max-width: 400px;
}
}


/* card */
.card {
border-color: #cccccf;
border-radius: 0px;
}


/* border */
[class*=border-]{
border-color: #ddd;
}
.border-all {
border-width: 1px;
border-style: solid;
}
[class*=border-left] {
border-left: 1px solid;
}
[class*=border-right] {
border-right: 1px solid;
}
@media (min-width: 576px) {
.border-sm {
border-width: 1px;
border-style: solid;
}		
}
@media (min-width:768px){
.border-md {
border-width: 1px;
border-style: solid;
}		
}
@media (min-width:992px){
.border-lg {
border-width: 1px;
border-style: solid;
}		
}

	
/* text */
.text-bold {
font-weight: 700;
}


/* formcontrol & button */
.form-control, .input-group-text, .btn{
font-size:inherit;
}
.form-control:disabled, .form-control[readonly] {
background-color: #f7f7f7;
opacity: 1;
}


/* pagination */
.pagination .active, .pagination .page-item a {
cursor: pointer;
position: relative;
display: block;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.25;
color: #3d628a;
background-color: #fff;
border: 1px solid #dee2e6;
}
.pagination .active {
background-color: #3d628a;
color: #fff;
}
	

/* table */
.table {
font-size:.95em;
}


/********** THEME **********/
/* color */
.bg-theme1 {
background-color:#4d6380;
color:#fff;
}

.bg-theme2 {
background-color:#2f4064;
color:#fff;
}


/* body */
body.hasnavbar {
padding-top:60px;
}


/* header navbar */
.mainnav {
height:60px;
}

.header-navbar {
position:relative;
}

.header-navbar > .navbar-nav > .nav-item > .nav-link {
color:#fff;
padding-left:.65rem;
padding-right:.65rem;
cursor: pointer;
}
.header-navbar .nav-item .badge {
/* position: absolute; */
/* width:20px; */
/* height:20px; */
/* top:20px; */
/* background-color: rgb(255, 251, 44); */
/* border-radius: 50%; */
/* color:#DE4343; */
/* line-height: 16px; */
cursor: pointer;
}

.header-navbar .dropdown-menu {
position:absolute;
min-width: 15rem;
max-width: 90%;
}

.header-navbar .dropdown-toggle::after {
content: unset;
}


/* header navbar for category */
.header-navbar .dropdown-menu.category {
width:260px;
}
.header-navbar .dropdown-menu.category .card-columns .card {
margin-bottom:0px;
}

@media (min-width:576px) {
.header-navbar .dropdown-menu.category {
width:470px;
}
}

@media (min-width:768px) {
.header-navbar .dropdown-menu.category {
width:688px;
left:-100px!important;
max-height:90vh;
overflow-y: scroll;
}
}

@media (min-width:992px) {
.header-navbar .dropdown-menu.category {
width:922px;
left:-97px!important;
}
}

@media (min-width:1200px) {
.header-navbar .dropdown-menu.category {
width:1100px;
left:-96px!important;
}
.header-navbar .dropdown-menu.category .card-columns {
column-count: 4;
}
}
	
.header-navbar .dropdown-menu.category .item-header{
margin-bottom: 10px;
}
	
@media (min-width:576px) {
.header-navbar .dropdown-menu.category .item-header{
margin-top: 5px;
margin-bottom: 0px;
font-weight: 700;
}
}


/* footer */
#footer {
background-color: #ccc;
padding-top: 15px;
}
.footer-board {
border-bottom:1px solid #ccc;
}
#footer h4 {
font-size: 16px;
font-weight: 400;
margin-bottom: 18px;
}
#footer .links,
#footer .features {
list-style: none;
padding: 0;
margin-top: -6px;
}
#footer .links li {
position: relative;
padding: 10.5px 0;
line-height: 1;
display: block;
}


/* navmenu : slider on small device */
.navmenu .navmenu-list {
padding-left:0px;
}
.navmenu .navmenu-list li {
list-style:none;
position:relative;
}
.navmenu .navmenu-list li h4,
.navmenu .navmenu-list li h5,
.navmenu .navmenu-list li h6 {
margin-top:20px;
padding-left:10px;
}
.navmenu .navmenu-list li a {
position:relative;
display:block;
padding:10px 10px 10px 55px;
text-decoration:none;
}
.navmenu .navmenu-list li .icon {
position:absolute;
width:30px;
left:16px;
top:10px;
text-align:center;
}


/* slider */
.slider {
width:100%;
position:fixed;
top:0px;
left:-105%;
height:100vh;
background-color:#fff;
transition:all 0.3s;
z-index:9999;
}
.slider.active {
left:0;
}
.slider .slidertoggler i{
font-size:1.1rem;
}


/* sidebar */
#sidebar {
width: 250px;
position: fixed;
left: -250px;
height: 100vh;
z-index: 888;
background-color: #364f6b;
color: #fff;
transition: all 0.3s;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#sidebarshow, #sidebarhide {
top: 120px;
background-color: #7793b3;
border-color: #6c6f7e;
border-radius: 0px;
}
#sidebarshow {
position: fixed;
left: 0px;
}
#sidebarhide {
position: absolute;
right: 0px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#sidebar .menu {
padding-left: 0px;
margin-top: 10px;
}
#sidebar .menu li {
list-style: none;
}
#sidebar .menu li h4,
#sidebar .menu li h5,
#sidebar .menu li h6 {
margin-top: 20px;
padding-left: 10px;
}
#sidebar .menu li a {
position: relative;
display: block;
padding: 8px 10px 8px 40px;
color: #ffffff;
text-decoration: none;
}
#sidebar .menu li a.active {
padding-left: 36px;
border-left: 4px solid #8591d8;
color: #feeef0;
}
#sidebar .menu li a:hover {
padding-left: 36px;
background-color:#5c89b3;
border-left: 4px solid #4d67af;
color: #feeef0;
}
#sidebar .menu li a i {
position: absolute;
left: 16px;
top: 13px;
}
#sidebar .menu li a.active i ,
#sidebar .menu li a:hover i {
left: 12px;
}

#sidebar .menu hr {
border-color: #687b8b;
}

#sidebar .item { padding:15px; }
#sidebar .header { position:relative; margin:0px; }
#sidebar .header a { display: block; }
#sidebar .header a:hover { text-decoration: none; }
#sidebar .header a .icon { position:absolute; right:0px; top:5px; }
#sidebar .body { margin:5px 0px 10px; }

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
#sidebar {
position: fixed;
left: 0px
}
.container #sidebar {
position: absolute;
left: 15px;
height: unset;
top: unset;
}
#sidebarshow,
#sidebarhide {
display: none;
}
.container.main {
margin-bottom: 20px;
}

#content {
padding-top: 0px;
padding-left: 250px;
}
.container #content {
padding-top: 0px;
padding-left: 270px;
}
}

@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}


/* circlebox */
.circlebox-lg {
width:6rem;
height:6rem;
border:2px solid #aaa;
border-radius:50%;
font-size:4rem;
text-align:center;
line-height:5.5rem;
overflow:hidden;
}
.circlebox-md {
width:4.5rem;
height:4.5rem;
border:2px solid #aaa;
border-radius:50%;
font-size:3rem;
text-align:center;
line-height:4rem;
overflow:hidden;
}
.circlebox-sm {
width:3rem;
height:3rem;
border:1px solid #aaa;
border-radius:50%;
font-size:1.5rem;
text-align:center;
line-height:2.75rem;
overflow:hidden;
}
.circlebox-lg > img {
width:100%;
height:100%;
}


/* input with icon */
.input-icon .form-control {
padding-left: 35px;
}
.input-icon > i {
position: absolute;
margin: 10px 2px 2px 10px;
top: unset;
}
.input-icon > i {
text-align: center;
font-size: 15px;
width: 16px;
}
.input-icon > i,
.radio-list>label {
display: block;
}


/* btn */
.navigation .btn {
width: 26px;
height: 26px;
line-height:26px;
padding: 0px;
text-align: center;
font-size: 14px;
border-radius: 50%;
}


/* cursor */
.pointer {
cursor: pointer;
}


/* hover */
.hover-light:hover {
background-color: #ddd;
}

/* space */
.nopspace p {
margin-bottom: 0px !important;
}


/* image */
.img-thumbnail {
padding: 2px;
}


/* font-weight */
.fw-600 {
font-weight: 600;
}


/* */
@media(min-width:786px) {
.md-abs-right {
position: absolute;
right:0px;
}
}


/**/
@media(min-width:786px) {
.w-md-20 {
width:20%;
}
.w-md-35 {
width:35%;
}
.w-md-50 {
width:50%;
}
}


/* dasbhoard */
.point-glance>div {
position: relative;
}
.point-glance .icon {
position: absolute;
opacity: 0.5;
font-size: 50px;
}
.point-glance .number {
text-align: right;
font-size: 40px;
font-weight: 600;
color: #fff;
}
.point-glance .number a {
color: #fff;
}
.point-glance .title {
text-align: right;
font-size: 20px;
}
@media (min-width:768px) {
.dashboard .item {
min-height: 250px;
}
}


/* Checkbox */
.choicewrap {
position: absolute;
left: 50%;
bottom: 10px;
text-align: left;
}

.choicebox {
position: relative;
left: -50%;
width: 20px;
padding: 2px;
border: 2px solid #aaa;
cursor: pointer;
}

.choicebox>div {
height: 14px
}

.choicebox.checked>div {
background-color: #007bff;
}


/* cornder */
[class*=cornercloser-]{
background-color: #aaa;
position: absolute;
/* box-shadow: 0 0 3px 2px rgba(0,0,0,0.8); */
}

[class*=cornercloser-] img{
width: 60px;
height: 60px;
}
	
[class*=cornercloser-top]{
top: 5px;
}
[class*=cornercloser-bottom]{
bottom: 5px;
}
.cornercloser-top-left {
left: 5px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.cornercloser-top-right {
right: 5px;
}
.cornercloser-bottom-left {
left: 5px;
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
}
.cornercloser-bottom-right {
right: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}


/* component */
.bootstrap-select {
border: 1px solid #ced4da !important;
}


.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-status { position: absolute; right:25px; top:0px; }

.imgThumbBox {
    overflow: hidden;
}
.uploadImgIconBox {
    left:0px; right:0px; bottom:10px;
}
.uploadImgIcon {
    background-color: rgba(255, 255, 255, 0.75);
}