html,
body{
   height: 100%;
   color: #5c5c5c;
   font-size: 16px;
}
#login-content{
   max-width: 400px;
}
#login-content .text-inputs input{
   height: 55px;
}
#login-content .login-btn{
   letter-spacing: 1px;
}
/** HEADER **/
header{
   border-bottom: 1px solid #343a40;
   height: 50px;
}
header #toggle-menu{
   background-color: #222;
   border-right: 1px solid #111;
   color: #fff;
   width: 50px;
}
header #logo img{
   height: 25px;
}
header .dd-btn{
   line-height: 50px;
   border-left: 1px solid #343a40;
}
header .dd-btn.active {
   background-color: #f2f2f2;
   color: #000;
}
header .dd-btn.account{
   line-height: 17px;
}
header .dd-btn .picture {
   width: 40px;
}

/** NAV **/
nav{
   background-color: #444;
   min-width: 50px;
   width: 50px;
   border-right: 1px solid transparent;
   transition: 250ms ease all;
}
nav ul{
   padding: 0;
   margin: 0;
   list-style: none;
}
nav .caret,
nav span.text{
   opacity: 0;
   transition: 250ms ease-in all;
}
nav .link-item{
   display: block;
   color: #CCC;
   cursor: pointer;
   border-bottom: 1px solid #4e4e4e;
   overflow: hidden;
   white-space: nowrap;
   padding: 9px 13px;
   line-height: 24px;
}
nav .link-item:hover{
   color: #EEEEEE;
   text-decoration: none;
   background-color: #4a4a4a;
}
nav .caret{
   position: absolute;
   top: 5px;
   right: 5px;
   color: #DEDEDE;
}
nav .caret i{
   line-height: 30px;
   height: 30px;
}
nav .caret .fa-angle-down{
   display: none;
}
nav .open{
   background-color: #4a4a4a;
}
nav .open .caret .fa-angle-down{
   display: block;
}
nav .open .caret .fa-angle-right{
   display: none;
}
nav .drop-down{
   display: none;
   background-color: #383838;
   position: absolute;
   top: 0;
   right: 0;
   transform: translateX(100%);
   width: 250px;
   z-index: 1015;
}
nav li:hover .drop-down{
   display: block;
}
nav .drop-down .link-item{
   padding-left: 20px;
   color: #BBBBBB;
}
nav .drop-down .link-item:hover{
   background-color: #353535;
   color: #EEEEEE;
}
nav .drop-down .link-item:hover span{
   padding-left: 3px;
   transition: 200ms ease-in padding;
}
nav .active{
   border-left: 2px solid #dedede;
}
nav .active-comp{
   background-color: #333333;
}
nav .active-comp a.link-item span{
   padding-left: 3px;
   color: #fff;
}
.menu-active nav{
   min-width: 250px;
   width: 250px;
}
.menu-active nav .caret,
.menu-active nav span.text{
   opacity: 1;
}
.menu-active nav .drop-down{
   position: relative;
   top: 0;
   right: 0;
   transform: translateX(0);
   width: auto;
}

.menu-active nav .tooltip{
   display: none;
}
.menu-active #control-bar{
   left: 250px;
}

.menu-active #site-content .modal-backdrop{
   position: absolute;
   z-index: 1010;
   background-color: #000;
   opacity: 0.1;
}

.menu-active li:not(.open) .drop-down{
   display: none !important;
}
.menu-active li.open .drop-down{
   display: block !important;
}

/** FOOTER **/
/*
footer{
   position: absolute;
   width: 100%;
   bottom: 0;
}
*/

/** CONTENT **/
#container{
   padding-top: 50px;
   flex: 1;
}
#site-content{
   position: relative;
   /*padding-bottom: 165px;*/
   overflow: auto;
}

/** RIGHT PANEL **/
#right-panel{
   position: fixed;
   top: 0px;
   right: 0;
   width: 370px;
   height: 100%;
   background-color: #F4F4F4;
   border-left: 1px solid #DEDEDE;
   z-index: 1020;
   display: none;
   padding: 65px 1rem 0;
   max-width: 90%;
   overflow-x: hidden;
   overflow-y: auto;
}

#right-panel button.close{
   position: relative;
   z-index: 999;
   padding: 0 0 10px 10px;
}

.panel-active #site-content .modal-backdrop{
   position: absolute;
   z-index: 1010;
   background-color: #000;
   opacity: 0.1;
}

/** CONTROL BAR**/
#control-bar{
   border-bottom: 1px solid #dedede;
   background-color: #f4f4f4;
   display: flex;
   flex-direction: column;
}
#control-bar .dt-buttons{
   margin-bottom: 0;
   font-size: 14px;
   width: 100%;
   overflow: auto;
}
#control-bar .dt-button {
   transition: 200ms all ease;
   background: #F4F4F4;
   border: 0;
   padding: 10px 12px;
   cursor: pointer;
   color: #5c5c5c;
   white-space: nowrap
}
#control-bar .dt-button i{
   font-size: 16px;
   color: var(--skin-color);
}
#control-bar .dt-button:hover{
   background-color: #EAEAEA;
}
#control-bar #data-table_filter label{
   margin: 5px 0;
}
#control-height{
   min-height: 250px;
   position: relative;
}

/** BREADCUMB **/
#breadcrumbs{
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 15px;
}
#breadcrumbs a{
   text-decoration: none;
   color: #5c5c5c;
}
#breadcrumbs a:hover{
   color: var(--skin-link);
}
#breadcrumbs i.sep{
   color: #CCC;
}

/** DATA TABLES**/
.dtr-details .btn-action,
.buttons-colvis{
   display: none;
}
#datatable #data-table_filter label{
   width: 100%;
   position: relative;
}
#datatable #data-table_filter label i {
   position: absolute;
   right: 7px;
   top: 8px;
   color: #999;
}
#datatable #data-table_filter input {
   border-radius: 0;
   height: 32px;
   padding: 0 30px 0 10px;
   width: 100%;
   margin: 0;
}
div.dt-button-background {
   background: rgba(0,0,0,.5);
}
div.dt-button-collection{
   position: fixed;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%);
   padding: 0;
}
div.dt-button-collection .dropdown-item{
   border-bottom: 1px solid  #ddd;
}
div.dt-button-collection .dropdown-item.active{
   color: #000;
   text-decoration: none;
   background-color: #EFEFEF;
}

#data-table{
   margin: 0 !important;
}
#data-table thead th{
   background-color: #212529;
   color: #fff !important;
   border-color: #32383e;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#data-table tbody tr:hover{
   background-color: #fffbe5;
}
#data-table tbody tr.selected{
   background-color: #fff9cc;
   color: #5d5308;
}
#data-table .change-status{
   padding: 4px;
   border: 1px solid transparent;
}
#data-table tr:hover .change-status{
   background-color: #fff;
   border: 1px dotted #333;
}
#datatable td img {
   width: 30px;
   margin-right: 5px;
}
#datatable td.actions{
   white-space: nowrap;
   text-align: right;
}
#datatable td .btn-action{
   display: inline-block;
   cursor: pointer;
   height: 25px;
   width: 25px;
   text-align: center;
   margin-left: 3px;
   background-color: #333;
   color: #FFF;
}
#datatable .dt-button.disabled {
   background: #F4F4F4;
   border: 0;
   color: #AAA;
   cursor: default;
}
#datatable .dt-button.active:not(.disabled) {
   background: #e2e2e2;
   box-shadow: none;
}
#datatable .dt-button.disabled span,
#datatable .dt-button.disabled i{
   color: #AAA;
}
#datatable td .wrap{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
#datatable td .wrap .badge{
   text-transform: uppercase;
   font-size: 9px;
   line-height: 15px
}
#dt-filters{
   display: none;
   background-color: #FAFAFA;
   border: 1px solid #DDDDDD;
   border-bottom: 0;
}
#dt-filters .selects .each{
   width: 50%;
}
#dt-foot{
   justify-content: space-between;
   background-color: #f4f4f4;
   border: 1px solid #dedede;
   border-top: 0;
   padding: 8px;
   flex-wrap: wrap;
}
#dt-foot > .d-flex{
   flex-wrap: wrap;
}
#dt-foot #data-table_info{
   margin-left: 10px;
   font-size: 11px;
   text-transform: uppercase;
   padding: 0;
}
#dt-foot #data-table_info .select-info{
   display: block;
   font-weight: bold;
}
#dt-foot #data-table_info span{
   margin: 0;
}
#dt-foot .pagination{
   margin-bottom: 0;
}
table.dataTable tbody tr.selected a.badge {
   color: #fff;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
   top: 10px;
   left: 4px;
   height: 14px;
   width: 14px;
   display: block;
   position: absolute;
   color: white;
   border: 2px solid white;
   border-radius: 50%;
   content: '+';
   background-color: #0275d8;
}

/*DATE RANGE PICKER*/
.daterangepicker.ltr .ranges{
   border-right: 1px solid #ddd;
   margin: 0;
   padding-top: 5px;
}
.daterangepicker.ltr .drp-calendar {
   border: 0 !important;
}
.daterangepicker th.month {
   text-transform: uppercase;
}
.daterangepicker .drp-selected {
   display: none;
}

/*DASHBOARD*/
#dashboard-modal{
   display: none;
   margin-top: 15px;
}
#dashboard-modal .header{
   border-bottom: 1px solid #dedede;
}
#dashboard-modal .footer{
   border-top: 1px solid #dedede;
}
#dashboard-modal h1{
   font-size: 22px;
   margin-bottom: 0;
}
#dashboard-modal h2{
   font-size: 18px;
   margin-bottom: 0;
}
#widgets #header-info{
   margin-top: 15px;
}
#widgets #header-info .icon{
   font-size: 26px;
}
#widgets #header-info h1{
   font-size: 22px;
}
#widgets .widget .widget-wrapper {
   background-color: #f7f7f7;
   border: 1px solid #dedede;
}
#widgets .widget-header {
   position: relative;
}
#widgets .widget-header .info{
   position: absolute;
   right: 0px;
   color: #ccc;
   cursor: help;
}
#widgets .widget-header h1 {
   font-size: 26px;
   border-bottom: 1px dotted #ccc;
   padding-right: 25px;
}
#widgets .widget-header h3 {
   font-size: 22px;
   border-bottom: 1px dotted #ccc;
   padding-right: 25px;
}
#widgets .widget-content .warning {
   background-color: #fff;
   border: 1px dotted #ccc;
}

/** FORM **/
.form-btn {
   background-color: #f5f5f5;
   border: 2px solid #0866c6;
   color: #0866c6;
   cursor: pointer;
   font-size: 13px;
   margin-left: 10px;
   padding: 8px 15px 8px 10px;
   transition: all 0.2s ease 0s;
}
.form-btn:hover {
   background-color: #0866c6;
   color: #f5f5f5;
}
.form-btn i {
   margin: 0 0 0 5px;
}
.form-btn i:first-child {
   margin: 0 5px 0 0;
}
#formulario {
   background-color: #fff;
   border-style: solid;
   border-width: 5px 2px 2px;
}
#formulario .labelWrap {
   color: #333333;
   font-size: 11px;
   position: relative;
   text-transform: uppercase;
   z-index: 9;
}
#formulario .input {
   box-sizing: initial;
   position: relative;
}

#formulario input[type="text"]:focus, #formulario input[type="password"]:focus, #formulario select:focus, #formulario textarea:focus, #search:focus, #formulario .highlight {
   border-color: rgba(82, 168, 236, 0.8);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
   outline: 0 none;
}
#formulario .field {
   border-bottom: 1px dotted #cccccc;
   padding: 10px;
}

#formulario .field p.warning {
   padding-left: 205px;
}
#formulario .input label {
   margin-right: 10px;
}
#formulario input[type="checkbox"] {
   margin-right: 2px;
   position: relative;
   top: 2px;
}
#formulario .labelWrap .label {
   color: #6a6d75;
   text-transform: uppercase;
}
#formulario .labelWrap span {
   color: #ff0000;
   padding-right: 4px;
}
#formulario .info {
   color: #888;
   font-size: 11px;
   margin: 0;
}
#formulario input[type="text"], #formulario input[type="password"], #formulario select, #formulario textarea {
   background-color: #ffffff;
   border: 1px solid #bbbbbb;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
   color: #555555;
   font-size: 15px;
   height: 37px;
   line-height: 37px;
   padding: 7px;
   transition: all 0.2s ease-out 0s;
   width: 100%;
}
#formulario textarea {
   height: 78px;
   line-height: 20px;
}
#formulario select {
   line-height: 20px;
}
#formulario .error label, #formulario .error .info {
   color: #b94a48;
}
#formulario .error input, #formulario .error select, #formulario .error textarea {
   border: 1px solid #b94a48 !important;
   color: #b94a48;
}
#formulario .error input[type="text"]:focus, #formulario .error input[type="password"]:focus, #formulario .error select:focus, #formulario .error textarea:focus {
   border: 1px solid #b94a48 !important;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #d59392;
}
#formulario .error .warning {
   color: #ff0000;
   font-size: 11px;
   margin: 5px 0 0;
   text-transform: none;
}
#formulario #permissions p {
   margin: 0 0 5px;
}
#formulario #permissions .overflow {
   border: 1px solid #aaa;
   height: 200px;
   overflow: auto;
}
#formulario #permissions td, #formulario #permissions th {
   border: 1px solid #ccc;
   line-height: 20px;
   padding: 2px 7px;
   text-align: left;
}
#formulario #permissions th {
   border-bottom: 1px solid #ccc;
   padding-top: 5px;
}
#formulario #permissions th img {
   cursor: help;
}
#formulario #permissions tr:nth-child(2n) {
   background-color: white;
}
#formulario #permissions tr {
   background-color: #f7f7f7;
   font-size: 12px;
}
#formulario #permissions input {
   margin-left: 1px;
   margin-top: 6px;
}
#formulario input[readonly="readonly"] {
   background-color: #f5f5f5;
   border: 1px solid #bbb !important;
   box-shadow: none !important;
   color: #aaa;
   font-style: italic;
}
#formulario .custom-file{
   padding: 4px;
   height: 43px;
   border: 1px solid #dedede;
   display: inline-block;
}
#formulario .custom-file input{
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}
#formulario .custom-file label {
   background-color: #efefef;
   color: #585858;
   border: 1px dashed #cdcdcd;
   font-size: 14px;
   font-weight: bold;
   display: inline-block;
   cursor: pointer;
   padding: 5px 10px;
   margin: 0;
}
#formulario .custom-file label i{
   margin-right: 5px;
}

#formulario .custom-file input:focus label{
   outline: 1px dotted #000;
   outline: -webkit-focus-ring-color auto 5px;
}
#formulario .custom-file:hover{
   background-color: #fafafa;
}
#formulario .custom-file input:focus label,
#formulario .custom-file label:hover {
   background-color: #e2e2e2;
}
#formulario .custom-file label * {
   pointer-events: none;
}
#formulario .inline-button{
   position: relative;
}
#formulario .inline-button input{
   padding-right: 160px;
}
#formulario .inline-button .button{
   position: absolute;
   top: 0;
   right: 0;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   min-width: 100px;
   text-align: center;
}
#formulario .button{
   font-size: 14px;
   cursor: pointer;
   padding: 8px 10px;
}
#formulario .button.add{
   background-color: #DBFDD3;
   border: 1px solid #87C579;
   color: #3B6B30;
}
#formulario .button.del{
   background-color: #ED8D75;
   border: 1px solid #AC6150;
   color: #5A2519;
}
.input-tiny {
   max-width: 50px;
}
.input-small {
   max-width: 150px;
}
.input-medium {
   max-width: 300px;
}
.input-big {
   max-width: 600px;
}
.input-xbig {
   max-width: 900px;
}
.input-full {
   max-width: 100%;
}
.input_load {
   display: none;
   font-size: 15px;
   position: absolute;
   right: 6px;
   top: 6px;
}
#tipo-pagamento-info .field:last-of-type{
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: 0;
}

/** SORTABLE **/
#sortable .item {
   background-color: #f2f2f2;
   border: 1px solid #dedede;
   cursor: move;
   padding: 5px 10px;
   position: relative;
   font-size: 14px;
   margin-left: 15px;
}
#sortable .item .fa-sort {
   left: -15px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   color: #777;
}
#sortable .item.disabled p {
   color: #ccc;
   font-style: italic;
}
#sortable.card .each {
   border: 1px solid #dedede;
   cursor: move;
   margin-bottom: 20px;
   margin-right: 0.6875%;
   padding: 4px 4px 0;
   text-align: center;
   width: 10.5%;
}
#sortable.card .each:nth-child(9n+9) {
   margin-right: 0;
}
#sortable.card .each img {
   width: 100%;
}
#sortable.card .each .name {
   height: 40px;
   overflow: hidden;
   padding: 3px 0;
}
#sortable.card {
   padding: 0;
}

/*Ckeditor fix*/
.ck-fontsize-option .ck-button__label{
   font-size: 12px !important;
}