/*.nav-sidebar > li.header {
	color: #fff;
	/*! background: #1a2226; *
	border-bottom: 1px solid white;
	padding-left: 5px;
}

.nav-legacy.nav-sidebar > .nav-item > .nav-link.active {
    background: #343a40;
}*/

/***********************************************************/
:root{
    --btn1  : #787878;
    --btn1h : #606060;
    --btn2  : #B8CFE0;
    --btn2h : #CDE8FB;
    --btn3  : #e26c62;
    --btn3h  : #f8796d;
    --btn4  : #4CAF50;
    --btn4h  : #3A833D;
    --btn5  : #0078ce;
    --btn5h  : #0268B1;
    --bg    : #39393A;
    --bg2   : #545455;
    --bg3   : #737373;
    --btn5  : #ffdd78;
    --text  : #fff;
}

.bg-mgray{
    background-color: var(--btn1);
}

.bg-mblue{
    background-color: var(--btn2);
}

.bg-mred{
    background-color: var(--btn3);
}

.bg-mgreen{
    background-color: var(--btn4);
}

.bg-myellow{
    background-color: var(--btn5);
}

.btn-btn1{
    color: #fff;
    background-color: var(--btn1);
    border-color: var(--btn1);
    box-shadow: none;
}
.btn-btn2{
    color: #fff;
    background-color: var(--btn2);
    border-color: var(--btn2);
    box-shadow: none;
}
.btn-btn3{
    color: #fff;
    background-color: var(--btn3);
    border-color: var(--btn3);
    box-shadow: none;
}
.btn-btn4{
    color: #fff;
    background-color: var(--btn4);
    border-color: var(--btn4);
    box-shadow: none;
}

.card {
    border-radius: 1.25rem;
}

[class*='sidebar-dark'] .nav-legacy .nav-treeview > .nav-item > .nav-link.active, [class*='sidebar-dark'] .nav-legacy .nav-treeview > .nav-item > .nav-link:focus, [class*='sidebar-dark'] .nav-legacy .nav-treeview > .nav-item > .nav-link:hover {
    background: gray;
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

[class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*='sidebar-dark-'] .nav-sidebar > .nav-item:hover > .nav-link,
[class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link:focus {
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

[class*="sidebar-dark-"] {
    background-color: var(--bg2);
}

[class*="sidebar-dark"] .brand-link {
    background-color: var(--bg2)!important;
    border-bottom: 1px solid var(--bg3)!important;
}

.main-header{
    border-bottom: 1px solid var(--bg2)!important;
}

.navbar-dark {
    background-color: var(--bg2);
}

.login-card-body,
.register-card-body {
    background: none;
    color: var(--text);
}

body{
    background: var(--bg);
    color: var(--text);
}

.login-page, .register-page {
    background: var(--bg);
}

.login-logo a, .register-logo a{
    color: var(--text);
}

.card{
    background-color: var(--bg2);
    box-shadow: 5px 5px 1px 0px rgba(200, 200, 200, 0.28);
}

/**/
.btn-primary {
    background-color: var(--btn2);
    border-color: var(--btn2);
    color: #fff;
}
.btn-primary:hover {
    color: #ececec;
    background-color: var(--btn2h);
    border-color: var(--btn2h);
}

.btn-success {
    color: #fff;
    background-color: var(--btn4);
    border-color: var(--btn4);
}
.btn-success:hover {
    color: #ececec;
    background-color: var(--btn4h);
    border-color: var(--btn4h);
  }

.btn-danger {
    color: #fff;
    background-color: var(--btn3);
    border-color: var(--btn3);
    box-shadow: none;
}

.btn-danger:hover {
    color: #ececec;
    background-color: var(--btn3h);
    border-color: var(--btn3h);
}
/**/
.nav-tabs .nav-link{
    color: #fff;
    background-color: var(--btn1h);
    border-color: var(--btn1h);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--btn1);
    border-color: var(--btn1);
  }

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
      border-color: var(--btn1);
  }

.nav-tabs {
    border-bottom: 1px solid var(--bg2);
}




.content-wrapper{
    background: none;
}

/*table*/
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--bg3);
}

.table td, .table th {
    border-top: 1px solid var(--bg3);
}

.table-hover tbody tr:hover {
    color: #ececec;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading{
    background: var(--bg3)!important;
}

/**/
.img-thumbnail{
    background-color : var(--btn1);
    border: 1px solid var(--btn1);
}

/*tree*/
ul.fancytree-container{
    background-color: transparent !important;
}

span.fancytree-title{
    color: var(--text)!important;
}
.fancytree-plain.fancytree-container span.fancytree-node.fancytree-active span.fancytree-title{
    background-color: var(--btn1)!important;
    color: var(--text)!important;
}

.fancytree-expanded span.fancytree-expande{
    color: var(--text);
}

.fancytree-plain.fancytree-container span.fancytree-title:hover{
    background-color: var(--btn1h)!important;
}

/**/


/**/
#mask{
    background-color: rgba(120, 120, 120, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
    border-radius: 1.2rem; 
    margin-bottom: 1rem;
    margin-right: 1rem;
}

/*Form*/
.form-control{
    background-color: var(--btn1);
    color: var(--text);
}

.form-control:focus {
    color: var(--text);
    background-color: var(--btn1h);
    border-color: #80bdff;
}

.daterangepicker {
    background-color: var(--bg2)!important;
}

.daterangepicker .calendar-table{
    background-color: transparent !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date
{
    background-color: #3e3e3e !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: #616161 !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: #616161 !important;
}
.week .weekend{
    color: #36f736 !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover{
    color: var(--btn4) !important;
    background-color: #d0c5c5 !important;
    font-weight: bold;
}
/**/
.listbox{
    height: 100%;
    background-color: var(--btn1);
    border-radius: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.list-group-item{
    color: var(--text);
    background-color: var(--btn1h);
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

.list-group-item.active{
    color: var(--text);
    background-color: gray;
}

.list-group-item-action:focus, .list-group-item-action:hover {
    color: var(--text);
    background-color: gray;
}

/*Ticket
.ticket{
    width: 100%;
    background-color: #fde8d8;
    color: black;
    padding: 1rem;
    height: 100%;
    box-shadow: 0px 0px 9px 0px rgba(255, 255, 255, 0.54);
}*/

.ticket{
    background-color : #f5f5f5;
    max-width : 350px;
    font-family : monospace;
    font-size : 1em;
    padding: 1rem;
    border: 1px solid #ddd;
    color: #111;
}

.section{
    width: 100%;
}

.section-fix{
    width: 250px;
}

/*Menu*/
.ui-widget-content{
    background: var(--btn1)!important;
    color: var(--text)!important;
}

.ui-widget.ui-widget-content{
    border: 1px solid var(--btn1h)!important;
}

.ui-widget-content {
    border: 1px solid var(--btn1h)!important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    background: var(--btn1)!important;
    color: var(--text)!important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
    border: 1px solid rgba(255,255,255,.1)!important;
    background: rgba(255,255,255,.1)!important;
    color: var(--text)!important;
}

.ui-icon {
    text-indent: 0 !important;
}

.ui-menu {
    width: 200px!important;
}

.ui-menu .ui-icon {
    left: .7em!important;
}

.ui-menu .ui-icon-caret-1-e {
    left: inherit!important;
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: none!important;
  }

/****************************************************/

label {
    margin-bottom: 0px;
}

body > .wrapper{
    background: #343a40;
}

.main-footer{
    background: #343a40;
    color: rgba(255,255,255,.8);
}

/***************Product*************/
/*Treeview*/
.list-group-item {
    padding: .1rem 0.25rem;
    border: none;
}

/*split*/
.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
}

    .gutter.gutter-horizontal {
        cursor: col-resize;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    }

    .gutter.gutter-vertical {
        cursor: row-resize;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    }
.treeview .icon.node-icon {
    color: #007bff;
}


    /**.split.split-horizontal, .gutter.gutter-horizontal {
        height: 100%;
        float: left;
    }*/
/**********************************/
.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 320px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}
	
	.modal.left .modal-body,
	.modal.right .modal-body {
		padding: 15px 15px 80px;
	}

/*Left*/
	.modal.left.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}
	
	.modal.left.fade.in .modal-dialog{
		left: 0;
	}
        
/*Right*/
	.modal.right.fade .modal-dialog {
		right: 0px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}
	
	.modal.right.fade.in .modal-dialog {
		right: 0;
	}

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

	.modal-header {
		border-bottom-color: #EEEEEE;
        background-color: #343A40;
        color : #fff;
    }

    .modal-body{
        background-color: var(--bg2);
    }

    .modal-footer{
        background-color: #343A40;
    }
    
    .modal-title{
        line-height: 1.2;
    }

    .modal-header{
        display: block;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 0.55rem;
    }

    .close {
        color : #fff;
    }
    .close:hover{
        color : #eee;
    }
    /*.modal-header .close{
        margin: 0px;
        margin-left: auto;
        order: 2;
    }*/

    

/*
 * Force Bootstrap v4 transitions
 * (ignores prefers-reduced-motion media feature)
 * https://gist.github.com/robssanches/33c6c1bf4dd5cf3c259009775883d1c0
 */

 .fade {
	transition:opacity 0.15s linear !important;
}
.collapsing {
	transition:height 0.35s ease !important;
}
.custom-switch .custom-control-label::after {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;
	transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
	transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;
}
.custom-range::-webkit-slider-thumb {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-range::-moz-range-thumb {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-range::-ms-thumb {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-control-label::before,.custom-file-label,.custom-select {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.badge {
	transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.progress-bar {
	transition:width 0.6s ease !important;
}
.progress-bar-animated {
	-webkit-animation:progress-bar-stripes 1s linear infinite !important;
	animation:progress-bar-stripes 1s linear infinite !important;
}
.modal.fade .modal-dialog {
	transition:-webkit-transform 0.3s ease-out !important;
	transition:transform 0.3s ease-out !important;
	transition:transform 0.3s ease-out,-webkit-transform 0.3s ease-out !important;
}
.carousel-item {
	transition:-webkit-transform 0.6s ease-in-out !important;
	transition:transform 0.6s ease-in-out !important;
	transition:transform 0.6s ease-in-out,-webkit-transform 0.6s ease-in-out !important;
}
.carousel-fade .carousel-item {
    transition-property: opacity !important;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    transition: 0s 0.6s opacity !important;
}

.carousel-control-prev,.carousel-control-next {
	transition:opacity 0.15s ease !important;
}
.carousel-indicators li {
	transition:opacity 0.6s ease !important;
}
.form-control {
	transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.btn {
	transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
    border-radius: 1.25rem;
}

/**/
@media (max-width: 600px) {
    .colmedia{
      display: none;
    }
}

.modal-header .close, .modal-header .mailbox-attachment-close {
    padding: 1rem;
    margin: -1rem -0.5rem -1rem auto;
}

.mybadge{
    /*background: #eee;
    color: #111;*/
    cursor: default;
    border-radius: 16px;
    display: block;
    height: 32px;
    line-height: 32px;
    margin: 0px;
    padding: 0 12px;
    float: left;
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.badge-custom{
    background: #eee;
    color: #111;
}


.image-upload img{
    max-height: 9rem;
    max-width: 9rem;
}

.image-upload > input {
    visibility:hidden;
    width:0;
    height:0;
    cursor: pointer
  }

  @media screen and (max-width : 576px) {
    .small-box{
        text-align: left;
    }

    .small-box h3{
        margin : 0px;
        font-size: 2rem;
    }
    .small-box p{
        margin: 0px;
    }
    .small-box > .inner {
        padding: 0px 0px 0px 10px;
    }
  }