* {font-family: 'Fira Sans', sans-serif; }
html, body {background:#F8F8F8; height:100%; width:100%;}


.container{max-width:98%;}

.bg-brown {background-color:#795548; color:white;}
.bg-blue {background-color:#2196F3; color:white;}
.bg-yellow {background-color:#FF9800; color:white;}
.bg-green {background-color:#4CAF50; color:white;}

/* LOGIN */
body.login {background-image:url(../img/background-login.png);position:relative;}
body.login:after{position:absolute;content:''; width:100%; height:100%; background:rgba(0,0,0,0.5); top:0; left:0;}
body.login .card {min-width:400px;position:relative;z-index:5;}
body.login .card h1{font-size:18px; margin:0 0 20px 0;}
body.login .card input{border-color:#D8D8D8;}






/* DASHBOARD */
.stats-blocks span {font-size:40px;font-weight:700;}
.stats-blocks p {font-size:18px; color:white;}
.stats-blocks i {font-size:72px; color:rgba(255,255,255,.5); }


/* INVOICES */
/* INDEX */
a.download-link {font-weight:600; color:#45BBC2;}
#invoicesTable_paginate {text-align:right;}
#invoicesTable thead > tr > th {height: 60px; line-height: 60px; padding-top:0; padding-bottom:0;}

.fancybox-content {width:595px !important; height:842px !important;}

a.paginate_button {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    border: 1px solid #DBDBDB;
    line-height: 40px;
    margin-left: 10px;
    font-size: 15px;
	font-weight:500;
	border-radius:4px;
	color:#666666;
}
a.paginate_button:hover,a.paginate_button.current  {cursor:pointer; background:#45BBC2;color:white; border-color:#45BBC2;}
a.paginate_button.disabled {display:none;}
a.paginate_button i {font-size:16px;}

.filter-icon { width:40px; height:40px; background:#45BBC2; text-align:center; line-height:40px; color:white;border-radius:4px; margin-left:20px;}
.filter-options{
    min-width: 200px;
    background: white;
    position: absolute;
    padding: 10px;
    border: 1px solid #ebebeb;
	line-height: 1.7em;
}
.filter-options label {margin-left: 20px;}

.btn-primary {background-color:#45BBC2; border:0; font-weight:500; padding: 0.5em 1.722em;}
.btn-outline-primary {color:#45BBC2; border-color:#45BBC2;}
.btn-outline-primary:hover{color:#ffffff; background-color:#45BBC2;border-color:#45BBC2;}

.nav-tabs { border-bottom: 2px solid #DBDBDB; background-color:#EEEEEE;}
.nav-tabs .nav-link.active,.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	background:white;
}.nav-tabs .nav-link {border:none;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {border:none; border-bottom:2px solid #45BBC2; color:#45BBC2; border-top-left-radius: 0; border-top-right-radius: 0; }
.nav-tabs .nav-item {margin-bottom:-2px;}
.nav-link {    padding: 0.938rem 1.852rem; color:#999999;font-size: 0.95rem; font-weight:700;}
.nav-link span { margin: 0 0 0 5px; border:solid 1px #999999; height:28px;width:28px; line-height:28px; text-align:center; border-radius:4px;}
.nav-tabs .nav-item.show .nav-link span, .nav-tabs .nav-link.active span,.nav-tabs .nav-link:focus span, .nav-tabs .nav-link:hover span {background-color:#45BBC2; border:0; color:white;}
#content table {
    background-color: #ffffff;
    margin-bottom: 1.25rem;
    border: none;
    table-layout: fixed;
    width: 100%;
}

table thead {
    background: none;
}

table tr {
    border-bottom: 1px solid #DBDBDB;
}

table thead tr {
    border-bottom: 1px solid #1798A5;
}

table tr th {
    color: #333333;
    text-align: left;
}
.table td, .table th {border-top:0; padding: 1.2rem .75rem; font-size: 0.95rem;}
.highlight{ background: #EEEEEE; font-weight:500; }
input[type='checkbox']:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 25px;
height: 25px;
background: white;
border: 1px solid #DBDBDB;
border-radius:3px;
position:relative;
top:-5px;
}
input[type='checkbox']:checked:after {
	font-family: "Font Awesome 5 Pro"; font-weight: 500;
	content: '\f00c';
	text-align: center;
	color:#4CAF50;
	line-height: 24px;
	border-color:#4CAF50;
	background:#E0FBE1;
}

@media(max-width: 640px) {
    #actions-sidebar {
        padding-bottom: 2rem;
        margin-bottom: 0;
    }
}

.content h3 {
    color: #be140b;
    padding-bottom: 0.5rem;
    margin-bottom: 20px;
}

.content h4 {
    color: #be140b;
    padding-bottom: 0.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #be140b;
}

.content .related h4 {
    color: #4d8f97;
    padding-bottom: 0.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 0px;
}

table td {
    vertical-align: top;
    word-break: break-all;
}


p{font-size:0.95rem; color:#333333;}
form label {font-size:0.9rem; font-weight:500; color:#333333;}
form .file-import {border:1px dashed #707070; background:#F8F8F8; border-radius:6px; width:100%;}
form .file-import p{
  width: 100%;
  height: 100%;
  text-align: center;
  padding:50px 0;
  color: #999999;
  font-family: Arial;
}
form .file-import input{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

















h1,h2,h3,h4,h5,h6 {font-weight:700;}
h1 {font-size:24px;}
h3 {font-size:24px;}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    /*transition: all 0.3s;*/
}

.navbar {
    padding: 14px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    border-bottom: 1px solid #DBDBDB;
	height:70px;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i,
span {
    display: inline-block;
}


.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 300px;
    max-width: 300px;
    background: #FFF;
    color: #333333;
    transition: all 0.3s;
	border-right: 1px solid #DBDBDB;
}

#sidebar.active {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
}
#sidebar.active span{display:none;}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar > ul > li {
	border-bottom: 1px solid #DBDBDB;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 1em;
}

#sidebar.active ul li a i {
    margin-right: 0;
    display: block;
    font-size: 20px;
    margin-bottom: 5px;text-align:center;
	
}

#sidebar.active ul ul a {
    padding: 10px !important;
}


#sidebar .sidebar-header {
    padding: 13.5px;
    background: #ffffff;
	border-bottom: 1px solid #DBDBDB;
	height:70px; text-align:center;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {

}

#sidebar ul li a {
    padding: 22px;
    font-size: 1em;
    display: block;
}
#sidebar ul li ul li.active a,#sidebar ul li ul li a {
    padding: 10px 22px;
	padding-left:40px;
    font-size: 1em;
    display: block;
	border:none;
}
#sidebar ul li ul li.active a {font-weight:500;}

#sidebar > ul > li > a:hover {
    color: #333333;
    background: #EEEEEE;
	border-left:solid 5px #45BBC2;
	padding-left: 17px;
}
#sidebar.active ul li a:hover {
	padding-left: 5px;
}

#sidebar ul li a i {
    margin-right: 20px;
	font-size:1.25em;
}

#sidebar > ul > li.active>a,
a[aria-expanded="true"] {
    color: #45BBC2;
    background: #EEEEEE;
	border-left:solid 5px #45BBC2;
	padding-left: 17px;
}
#sidebar.active ul li.active>a {padding-left:5px;}
/*#sidebar.active ul li.active>a i {margin-left:-5px;}*/
a[data-toggle="collapse"] {
    position: relative;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #eeeeee;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}









/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:1050; /* Sit on top */
  right: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0,0,0); /* Fallback color */
  /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed; 
  right: 0;
  height:100%;
  background-color: #fefefe;
  width: 60%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
  border-radius:none;
  border:none;
  font-size:14px;
}
.modal-content th {font-weight:500;}
.modal-content .invoice-preview th,.modal-content .invoice-preview td { padding: 13px 10px;    word-break: keep-all;}
.modal-content .invoice-preview .p-0 th,.modal-content .invoice-preview .p-0 td {padding:2px 10px;}
.modal-content .invoice-preview th {background:#EFEFEF; font-weight:700;}
.modal-content > p:last-child{ font-size:12px;}
.modal-content p span {font-weight:500;}
/* The Close Button */
.close {
  color: #222222;
  float: right;
  font-size: 28px;
  font-weight: bold;
  opacity:1;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 16.5px 20px;
  background-color: #F9F9F9;
  color: white;
}
.modal-header h5 {font-size:24px; color:#222222;}

.modal-body {padding: 30px;overflow-y:scroll;}

.modal-footer {
  padding: 20px;
  background-color: #F9F9F9;
  color: white;
  bottom:0;
}


.modal.add-customer {}
.modal.add-customer .modal-content { width:100%;}
.modal.add-customer .modal-content .modal-body {overflow-y:unset; background:white;}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {right: -300px; opacity: 0} 
  to {right: 0; opacity: 1}
}

@keyframes slideIn {
  from {right: -300px; opacity: 0}
  to {right: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
/*.modal-backdrop.show {display:none;}*/

.invoice-preview table {width:100%;margin:30px 0;}


.invoice-preview th {border-top:1px solid #999999;border-bottom:1px solid #999999;}
.invoice-preview table.text-left th, table.text-left td {text-align:left; border:0;}
.invoice-preview .text-left {text-align:left;}
.invoice-preview .text-right {text-align:right;}
.invoice-preview table.invoice-custom {width:100%;}
.invoice-preview table.invoice-custom tr { border:0; border-left:0; border-right:0;}
.invoice-preview table.invoice-custom tr.row-header th {border:none;background:#eeeeee;padding:5px 10px;border-bottom:1px solid #999999;border-top:1px solid #999999;}
.invoice-preview table.invoice-custom tr.row-header th,.invoice-preview table.invoice-custom tr th {font-weight:400}
.invoice-preview table.invoice-custom .bb-0{border-bottom:0;}
.invoice-preview table.invoice-custom .bt-0{border-top:0;}

@media (max-width: 768px) {
    #sidebar {
        min-width: 200px;
        max-width: 200px;
        text-align: center;
        margin-left: -200px !important;
		position:absolute;
		z-index:999;
    }

    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }
    #sidebar ul li a {
        padding: 20px 10px;
    }
    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right: 0;
        display: block;
    }
    #sidebar ul ul a {
        padding: 10px !important;
    }
    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}