/*================================================================================
    Item Name: Stack - Responsive Admin Theme
    Version: 1.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* upload IMG */
.no-padding {
    padding: 0px;
}
.float-left{
    float: left;
}
.none {
    display: none;
}
.cursor {
    cursor: pointer;
}
span, p, h1, h2, h3, h4, h5, h6, th, div, button, div.swal-title {
    /* text-transform: capitalize; */
}
p {
    margin: 0px;
    
}
ul, ol {
    list-style: none;
    padding: 0px;
}
ul li {
    /* text-transform: capitalize; */
}
.transparent {
    color: transparent;
}
span.max-image {
    display: none;
}
.add-new-images {
    padding: 0;
    float: left;
    background-color: #fff;
    color: #FFF;
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
}
.add-new-images.none {
    display: none;
}
.date-close {
    position: absolute;
    right: 4px;
    z-index: 1;
    top: 29px;
    cursor: pointer;
}
fieldset.form-group {
    position: relative;
}
.list-images .image-item {
    width: 15%;
    margin-right: 2%;
    float: left;
    position: relative;
    height: 150px;
    margin-bottom: 10px;
    border: 1px solid #ded9d9;
}
.progress-bar {
    position: absolute;
    width: 90%;
    height: 14px;
    bottom: 12px;
    line-height: 0;
    background: rgba(0,0,0,0.2);
    left: 5%;
    border-radius: 5px;
}
.percent-bar {
    display: inline-block;
    background-color: #315f21;
    width: 0;
    height: 100%;
    transition-duration: 0.7s;
    border-radius: 5px;
}
.add-vehicle-icons {
    background-image: url(/backend/images/icons/add-images.png);
    background-repeat: no-repeat;
}
.add-new-images.small .wrap-upload-img {
    display: flex;
    align-items: center;
    min-height: 200px;
}
.add-new-images.small .wrap-upload-img .add-plus {
    width: 65px;
    height: 51px;
    display: block;
    margin: 0 auto;
}
.add-new-images span.add-new-image-text {
    padding: 5px 0px 0px 0px;
    font-size: 12px;
    text-transform: capitalize;
    position: absolute;
    top: 125px;
    width: 100%;
    color: #0086ff;
    text-decoration: underline;
}
span.miss {
    display: none;
    color: #d0021b;
}
span.note-max-img {
    color: #0086ff;
}
.show-image-over {
    display: inline-block;
}
.box-img-error {
    position: relative;
    width: 100%;
    max-height: 100%;
    background: #fef1e0;
    padding: 20px;
    border: 1px solid #eab650;
    overflow-x: hidden;
    display: none;
}
.box-img-error em.close-box-img {
    position: absolute;
    width: 10px;
    height: 12px;
    top: 5px;
    right: 5px;
    background-position: -265px 0;
}
.img-msg, .img-msg span {
    font-size: 1.6rem;
    color: #f5bc6f;
    font-weight: 600;
}
.list-images .image-item {
    width: 200px;
    margin-right: 2%;
    float: left;
    position: relative;
    height: 200px;
    margin-bottom: 10px;
    border: 1px solid #ded9d9;
}
.list-images .image-item.opacity canvas{
    opacity: 0.7;
}
.list-images .image-item.canvas img, .list-images .image-item:not(.canvas) canvas{
    display: none;
}
.list-images .image-item.canvas canvas{
    width: 100%;
    height: 100%;
    padding:4px;
    border-radius: 2px;
    border: 1px solid #CCC;
    background-color: #FFF
}
.list-images .image-item span.btn-delete-item-image{
    position: absolute;
    padding: 4px;
    cursor: pointer;
    font-size: 16px;
    color: #D0011B;
    top: 2px;
    right: 2px;
    line-height: 0;
    z-index: 2;
}
.list-images .image-item span.btn-delete-item-image:hover{
    color: #D0011B;
}
.list-images .image-item img{
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.list-images .image-item .btn-delete-item-image {
    width: 22px;
    height: 22px;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    background-color: #e40c0c;
}
.list-images .image-item .btn-delete-item-image.fa-times:before {
    position: absolute;
    top: 0px;
    left: 3px;
    color: #fff;
}
.wrap-image img {
    cursor: pointer;
}
.max-image {
    color: #da2929;
}
/* End upload IMG */

.margin0 {
    margin: 0px;
}
.padding0 {
    padding: 0px;
}
.tb-avatar {
    width: 50px;
}
.tb-avatar img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    border: 1px solid #e6d9d9;
}
.tb-btn-search {
    margin-top: 26px;
}
span.help-block {
	color: #d82f2f;
}
div.alert-message {
	color: #397f1d;
	padding-bottom: 15px;
}
.fade.in {
    opacity: 1;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
table th, table td{
    /* text-transform: capitalize; */
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
    max-width: 991px;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.modal-content button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    right: 10px;
    position: absolute;
    top: 10px;
    margin: 0px;
}
.modal-content h3 {
    width: 100%;
    text-align: left;
}
.modal.fade .modal-dialog {
    transform: inherit;
}
.transparent {
    color: transparent;
}
table.history-table {
    font-size: 1rem;
    border: 1px rgb(221, 221, 221) solid;
}
table.history-table tr.head {
    color: rgb(95, 111, 129);
    font-weight: 600;
}

.overlay {
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222;
    opacity:0.5;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

.image-preview {
    position: relative;
}
.image-preview i.fa-close {
    position: absolute;
    font-size: 1.5rem;
    cursor: pointer;
    right: -8px;
    top: -10px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.margin10{
    margin-left: 10px;
}

/* Modal */
.detail-modal {
	display: none;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content.v2 {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
    max-width: 700px;
    max-height: 560px;
    overflow-y: scroll;
}
@media (max-width: 1252px) {
	.modal-content.v2 {
		max-height: 550px;
	}
}
.row-input {
	margin-bottom: 10px;
}
.modal-content.v2 label {
	font-size: 1rem;
}

/* Calendar */
.wrap-search-date {
    position: relative;
}
.wrap-calendar {
    width: 320px;
    z-index: 1;
    background-color: #fff;
    height: auto;
    padding: 20px 1px;
    margin: 0 auto;
}
.wrap-calendar ul.nav-calendar {
    padding: 0px;
    margin: 0px 0px 15px;
    float: left;
}
.wrap-calendar ul.nav-calendar li {
    width: 19%;
    float: left;
    cursor: pointer;
    text-align: center;
    margin-right: 3px;
    border-bottom: 1px solid #fff;
}
.wrap-calendar ul.nav-calendar li:last-child {
    margin-right: 0px;
    float: right;
}
.wrap-calendar ul.nav-calendar li:hover, .wrap-calendar ul.nav-calendar li.active {
    color: #13A243;
    border-bottom: 1px solid #13A243;
}
.wrap-calendar .wrap-date {
    float: left;
    border: 1px solid #e4e1e1;
    padding: 10px 0px;
    box-shadow: 0px 0px 10px 1px #e4e1e1;
    border-radius: 2px;
}
.wrap-calendar .wrap-date p {
    position: relative;
    text-align: center;
}
.wrap-calendar .wrap-date p i.i-left {
    position: absolute;
    left: 7px;
    cursor: pointer;
}
.wrap-calendar .wrap-date p i.i-right {
    position: absolute;
    right: 7px;
    cursor: pointer;
}
.wrap-calendar .wrap-date p span {
    font-weight: 600;
}
.wrap-calendar .wrap-date ul.ul-date {
    padding: 0px 5px;
    float: left;
    margin-bottom: 0px;
}
.wrap-calendar .wrap-date ul.ul-date.date li {
    width: 100%;
    float: left;
}
.wrap-calendar .wrap-date ul.ul-date.date li.head {
    margin-bottom: 25px;
}
.wrap-calendar .wrap-date ul.ul-date.date ol li {
    float: left;
    width: 36px;
    margin-right: 2.5%;
    text-align: center;
    cursor: pointer;
}
.wrap-calendar .wrap-date ul.ul-date.date li.body ol li {
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.wrap-calendar .wrap-date ul.ul-date.date li.body ol li span {
    width: 100%;
    text-align: center;
}
.wrap-calendar .wrap-date ul.ul-date.date li.body ol li.active:not(.transparent), .wrap-calendar .wrap-date ul.ul-date.date li.body ol li:hover:not(.transparent) {
    border-radius: 50%;
    background-color: #13A243;
    color: #fff;
}
.wrap-calendar .wrap-date ul.ul-date.week {
    padding: 15px;
}
.wrap-calendar .wrap-date ul.ul-date.week li {
    width: 120px;
    height: 60px;
    float: left;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 12px;
    margin-right: 15%;
    cursor: pointer;
}
.wrap-calendar .wrap-date ul.ul-date.week li:nth-of-type(2), .wrap-calendar .wrap-date ul.ul-date.week li:nth-of-type(4), .wrap-calendar .wrap-date ul.ul-date.week li:nth-of-type(6) {
    margin-right: 0px;
    float: right;
}
.wrap-calendar .wrap-date ul.ul-date.week li:nth-of-type(5), .wrap-calendar .wrap-date ul.ul-date.week li:nth-of-type(6){
    margin-bottom: 0px;
}
.wrap-calendar .wrap-date ul.ul-date.week li.active, .wrap-calendar .wrap-date ul.ul-date.week li:hover {
    border-radius: 5px;
    background-color: #13A243;
    color: #fff;
}
.wrap-calendar .wrap-date ul.ul-date.week li p {
    font-size: 16px;
    line-height: 16px;
    margin: 0px;
}
.wrap-calendar .wrap-date ul.ul-date.week li span {
    font-size: 12px;
    line-height: 12px;
}
.wrap-calendar .wrap-date ul.ul-date.month {
    padding: 15px;
}
.wrap-calendar .wrap-date ul.ul-date.month li {
    float: left;
    width: 85px;
    height: 35px;
    margin-bottom: 15px;
    text-align: center;
    padding-top: 4px;
    margin-right: 5.4%;
    cursor: pointer;
}
.wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(3), .wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(6), .wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(9), .wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(12) {
    margin-right: 0px;
    float: right;
}
.wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(10), .wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(11), .wrap-calendar .wrap-date ul.ul-date.month li:nth-of-type(12) {
    margin-bottom: 0px;
}
.wrap-calendar .wrap-date ul.ul-date.month li.active:not(.disabled), .wrap-calendar .wrap-date ul.ul-date.month li:hover:not(.disabled) {
    border-radius: 5px;
    background-color: #13A243;
    color: #fff;
}
.wrap-button {
    text-align: center;
    bottom: 0px;
    position: relative;
    float: left;
}
.wrap-button a {
    background-color: #13A243;
    color: #fff;
    padding: 10px 100px;
    border-radius: 20px;
}
.wrap-compare {
    margin-bottom: 20px;
    float: left;
}
.wrap-compare .wrap-content ul.parent {
    display: none;
}
.wrap-compare .wrap-content ul.parent.active {
    display: block;
}
.wrap-compare .wrap-date {
    display: none;
    margin-top: 15px;
}
.wrap-compare p.title {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: 700;
}
.wrap-compare ul li {
    margin-bottom: 10px;
}
.wrap-compare ul li:last-child {
    margin-bottom: 0;
}
.wrap-compare .wrap-content input.date {
    width: 40%;
    float: right;
    margin-right: 50px;
    padding: 5px;
}
/* End calendar */

/* Expenses categories */
.expenses-categories-text {
    cursor: pointer;
}
.modal-content button.close.m-close {
    z-index: 100;
    top: 5px;
    right: 15px;
    font-size: 2rem;
}
.wrap-ul-expenses-categories, .wrap-ul-company, .wrap-ul-company-province {
    width: 680px;
    z-index: 1;
    background-color: #fff;
    height: auto;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 45px;
}
.wrap-ul-expenses-categories .wrap-title, .wrap-ul-company .wrap-title, .wrap-ul-company-province .wrap-title {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    margin-bottom: 10px;
    height: 46px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.wrap-ul-expenses-categories .wrap-title p, .wrap-ul-company .wrap-title p, .wrap-ul-company-province .wrap-title p {
    font-weight: 800;
}
.wrap-ul-expenses-categories .wrap-button, .wrap-ul-company .wrap-button, .wrap-ul-company-province .wrap-button {
    position: fixed;
    bottom: 40px;
    width: 680px !important;
}
.wrap-ul-expenses-categories .wrap-category-content, .wrap-ul-company .wrap-company-content, .wrap-ul-company-province .wrap-company-content {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    margin-bottom: 10px;
}
.wrap-ul-company .wrap-company-content, .wrap-ul-company-province .wrap-company-content {
    border: none;
}
.wrap-ul-expenses-categories .wrap-title i, .wrap-ul-company .wrap-title i, .wrap-ul-company-province .wrap-title i {
    position: absolute;
    right: 5px;
    top: 14px;
}
.wrap-ul-expenses-categories ul li, .wrap-ul-company ul li, .wrap-ul-company-province ul li {
    margin-bottom: 20px;
}
.wrap-ul-expenses-categories ul li.parent {
    position: relative;
    font-weight: 800;
}
.wrap-ul-expenses-categories ul li.parent i.fa-chevron-up {
    position: absolute;
    right: 5px;
    top: 4px;
    cursor: pointer;
}
i.fa-check{
    margin-right: 10px;
    cursor: pointer;
    background-color: #fff;
    padding: 2px;
    color: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
}
i.fa-check.disabled {
    background-color: #ccc;
    color: #fff;
}
i.fa-check.active, i.fa-check.active {
    background-color: #13A243;
    border: 1px solid #fff;
}
.wrap-ul-expenses-categories ul.child {
    padding-left: 25px;
}
.wrap-expenses-categories {
    position: relative;
}
.wrap-expenses-categories .wrap-ul-expenses-categories {
    position: absolute;
    width: 90%;
    background-color: #fff;
    border: 1px solid #ccc;
    top: 67px;
}
.wrap-expenses-categories .wrap-ul-expenses-categories p {
    cursor: pointer;
    width: 100%;
    position: relative;
}
/* End expenses categories */

/* Css Statistic Expenses */
.wrap-statistic-expenses .wrap-card-header {
    padding: 15px 15px 10px 15px;
}
.wrap-statistic-expenses .card-title {
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
.wrap-statistic-expenses .wrap-total-expenses p {
    font-size: 24px;
    text-align: center;
}
.wrap-statistic-expenses .div-statistic {
    border: none;
    border-radius: 0;
    box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
    background-color: #fff;
}
.wrap-statistic-expenses .wrap-total {
    width: 50%;
    margin-right: 15px;
}
.wrap-statistic-expenses .wrap-expenses {
    width: 48.5%;
    text-align: center;
}
.wrap-statistic-expenses .wrap-statistic-compare, .wrap-statistic-expenses .wrap-statistic-compare-year {
    margin-top: 15px;
}
/* end  */

/* CSS ceiling */
.not-exceed {
    margin-top: 10px;
}
.not-increase.not-exceed {
    margin-top: 50px;
}
.not-exceed .status{
    width: 8%;
}
.not-exceed .top{
    margin-right: 6%;
}
.not-exceed .top, .not-exceed .bottom {
    width: 43%;
}
/* End */

/* Customer tags */
.wrap-customer-tags {
    position: relative;
}
.wrap-customer-tags ul.ul-tags {
    width: 100%;
    margin-top: 10px;
}
.wrap-customer-tags ul.ul-tags li {
    float: left;
    width: auto;
    padding: 3px 20px 3px 15px;
    color: rgb(237, 243, 238);
    background-color: rgb(43, 145, 60);
    margin-right: 5px;
    border-radius: 4px;
    position: relative;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.wrap-customer-tags ul.ul-tags li i {
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 3px;
}
.wrap-referral-code {
    display: none;
}
.wrap-referral-code.active {
    display: block;
}
/* End */

.wrap-tab-content .wrap-tab-pane {
    display: none;
}
.wrap-tab-content .wrap-tab-pane.active {
    display: block;
}
.wrap-nav-tabs li {
    width: 33%;
    float: left;
    background: #10C888;
    text-align: center;
    border-right: 1px solid #fff;
    cursor: pointer;
    color: #fff;
    padding: 5px;
}
.wrap-nav-tabs li.active {
    background: #FF6275;
}

.modal-content {
    position: relative;
}
.modal-content .wrap-button:not(.no-absolute) {
    position: absolute;
    bottom: 15px;
}
.modal-content .wrap-button.no-absolute {
    bottom: 0px !important;
}