.m-r-20{
    margin-right: 20px;
}

.color-green {
    color: #1fa67a !important;
}

.color-red {
    color: #ff0000 !important;
}

.color-black {
    color: black !important;
}

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

.width-180 {
    width: 180px !important;
}

.viewport-08{
    font-size: 0.8vw !important;
}

.search_input{
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    background: transparent !important;
    text-align: -webkit-match-parent;
    border-left-style: none !important;
    color: white;
}

.search_button{
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px;
    background: transparent;
    border-right-style: none;
}

.header_mid_area {
    float: left;
    margin-top: 23px;
    margin-left: 185px;
}

.loading-overlay.loading-theme-light {
    background-color: black;
    color: white;
}

.loading-overlay.loading-theme-dark {
    background-color: #000;
    color: #fff;
}

/*datatable*/
.transaction-row {
    background-color: transparent !important;
    color: #000000 !important;
    font-size: 12px !important;
    border-bottom-color: #a93d3d !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #fff !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_length select {
    color: #000000 !important;
}

.dataTables_wrapper .dataTables_filter input {
    color: #000000 !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    color: #fff !important;
    border: 1px solid transparent;
    border-radius: 2px;
}
/*datatable*/



.white-text {
    color: #ffff !important;
}

.bg-purple {
    background-color: #2c2a33 !important;
    border-color: #2c2a33 !important;;
}

.color-red{
    color: #a93d3d !important;
}

a {
    color: #fff;
}

.sw-theme-default > ul.step-anchor > li.done > a {
    border: none !important;
    color: #5cb85c !important;
    background: transparent !important;
}

.height-20 {
    height: 20px !important;
}

.height-10 {
    height: 10px !important;
}

.height-80 {
    height: 80px !important;
}

.width-full {
    width: 100%!important;
}

.big_badge .badge {
    display: inline-block;
    min-width: 12px;
    padding: 45px 7px;
    font-size: 30px;
    font-weight: 700;
    line-height: 0;
    color: #fff;
    text-align: center;
    white-space: wrap;
    vertical-align: middle;
    background-color: #000;
    border-radius: 50%;
    border: solid;
    height: 100px;
    width: auto;
    margin-top: 2px;
    margin-bottom: 10px;
}


.has-error-select button ,.has-error-select button span,.has-error-select .checkbox, .has-error-select .checkbox-inline, .has-error-select .control-label, .has-error-select .help-block, .has-error-select .radio, .has-error-select .radio-inline, .has-error-select.checkbox label, .has-error-select.checkbox-inline label, .has-error-select.radio label, .has-error-select.radio-inline label {
    color: #2c2a33;
    border-color: #a94442;
}
.has-error-select{
    color: #a94442 !important;
    border-color: #a94442 !important;
}

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

.image-modal .dz-preview .dz-image img{
    width: 300px !important;
    height: 300px !important;
}
.image-modal .dz-preview .dz-image {
    width: 300px !important;
    height: 300px !important;
}

.bg-green {
    background-color: #27c24c !important;
    color: #f2f2f2 !important;
    border: #27c24c;
}

.bg-red {
    background-color: #bc0024 !important;
    color: #f2f2f2 !important;
    border: #bc0024;
}

.bg-blue {
    background-color: #29abe2 !important;
    color: #f2f2f2 !important;
    border: #29abe2;
}

.color-blue{
    color:  #29abe2;
}

.bg-grey {
    background-color: #808080 !important;
    color: #f2f2f2 !important;
    border: #808080;
}

.brand {
    background: #3d3939;
    float:left;
    width:240px;
    height: fit-content;
    position:relative;
    padding-bottom: 20px;
}

.sidebar-toggle-box {
    float: left;
    margin-top: 23px;
    margin-left: -15px;
    background: #4f403d;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 32px;
    height: 32px;
    position: absolute;
    right: -15px;
}

ul.top-menu > li > a {
    color: #fff;
    font-size: 16px;
    background: #3d3939;
    padding: 4px 8px;
    margin-right: 15px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    padding-right: 8px !important;
}

.top-nav ul.top-menu>li>a {
    border-radius: 100px;
    -webkit-border-radius: 100px;
    padding: 0px;
    background: none;
    margin-right: 0;
    border: 1px solid #a93d3d;
    background: #3d3939;
}

.information-modal  ul>li{
    padding-bottom: 10px;
}

.footer {
    background: #3d3939;
    padding: 5px;
}

.header {
    left: 0;
    right: 0;
    z-index: 1002;
    background: rgb(61, 57, 57);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.login-page-bg{
    background: white;
}

.login-content-bg{
    background: white;
}

.login-content-bg h2{
    color: black;
}

.login-content-bg input[type="submit"]{
    background: #3d3939;
}

html, body {
    background: #2c2a33;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    overflow-x: hidden;
    background-size: cover;
    color: #fff;
}

a.logo {
    font-size: small;
    color: #fff;
    float: left;
    margin: 3px 0 0 15px;
    text-transform: uppercase;
}

.jconfirm-title {color: black;}
.jconfirm-content {color: black;}

.sw-theme-default .sw-container {
    min-height: 0px !important;
}

.sw-main {color: #555;}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-weight: 400;
    line-height: 1;
    color: #fff;
}

.modal-content {
    background-color: #605d5d;
}

.m-r-n-50{
    margin-right: 50px;
}

.m-r-75{
    margin-right: 75px;
}

.text-right{
    text-align: right;
}

ul{
    list-style: none;
}

.width-155{
    width: 155px;
}

.width-120{
    width: 120px;
}

.slider-selection {
    background: #7a9fbf !important;
}

.datepicker {
    color: black;
    background: white;
}

.no_border {
    outline-color: transparent;
    border: none;
    background: transparent;
}

.image-div{
    min-height: 300px;
    min-width: 300px;
}

.search {
    width: 180px;
    /*width: 20px;*/
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid #ffffff;
    box-shadow: none;
    background: #3d3939 url(../images/search-icon.png) no-repeat 10px 8px;
    padding: 0 5px 0 30px;
    color: #fff;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    cursor: pointer;
}

.m-t-n-55 {
    margin-top: -55px;
}

.wrap-button-text {
    white-space: normal;
}

.group{
    text-align: center;
}

/* Dashboard */

/* LINE ICONS CONFIGURATION */

.mtbox {
    margin-top: 80px;
    margin-bottom: 40px;
}

.box1 {
    padding: 15px;
    text-align: center;
    color: #1af603;
    border-bottom: 1px solid #989898;
}

.box1 span {
    font-size: 50px;

}

.box1 h3 {
    text-align: center;
}

.box0:hover .box1 {
    border-bottom: 1px solid #ffffff;
}

.box0 p {
    text-align: center;
    font-size: 12px;
    color: transparent;
}

.box0:hover p {
    color: #605d5d;
}

.box0:hover {
    background: #ffffff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* LINE ICONS CONFIGURATION */
.mb {
    margin-bottom: 25px;
}

.white-panel {
    text-align: center;
    background: #1d1d23;
    color: #ffff;
}
.pn {
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.pn:hover {
    box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    font-size: 0.9em;
    color: #999;
    border: none !important;
}



.white-panel .white-header {
    background: #000000;
    padding: 3px;
    margin-bottom: 15px;
    color: #c6c6c6;
}

.goleft {
    text-align: left;
}

.white-panel i {
    color: #c71115;
    padding-right: 4px;
    font-size: 10px;
}

.bluedb {
    color: #109dc0 !important;
}

.pink {
    color: #cf0072 !important;
}

.yellow {
    color: #fcd000 !important;
}
.main-chart {
    padding-top: 20px;
}

.nav-tabs-fix {
    border-bottom: none;
}

.customer-link {
    border: 0 !important;
    background-color: transparent !important;
    color: #ffff !important;
    font-size: 11px;
    padding-left: 0px !important;
}

.customer-link-white {
    border: 0 !important;
    background-color: transparent !important;
    color: white !important;
    font-size: 12px;
    padding-left: 0px !important;
}
.ds {
    background: #1d1d23;
    padding-top: 20px;
}



.ds h3 {
    color: #1d1d23;
    font-size: 16px;
    padding: 0 10px;
    line-height: 40px;
    height: 40px;
    margin: 0;
    background: #ffffff;
    text-align: center;
}
.height-40 {
    height: 40px;
}

.wrapper-dashboard {
    display: inline-block;
    margin-top: 50px;
    padding: 15px;
    width: 100%;
}

.darkblue-panel .darkblue-header {
    background: white;
    padding: 3px;
    margin-bottom: 15px;
}

.pn-height {
    height: 300px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.darkblue-panel {
    text-align: center;
    background: #1d1d23 !important;
}

.black-text {
    color: #000 !important;
}

.ds .details {
    width: 170px;
    float: left;
}

.btn-info {
    color: #fff;
    background-color: #a93d3d;
    border-color: #a93d3d;
}

.btn-info.active, .btn-info:active, .open>.dropdown-toggle.btn-info {
    color: #fff;
    background-color: #a93d3d;
    border-color: #a93d3d;
}

.btn-info.focus, .btn-info:focus {
    color: #fff;
    background-color: #a93d3d;
    border-color: #a93d3d;
}

.btn-info:hover {
    color: #fff;
    background-color: #a93d3d;
    border-color: #a93d3d;
}

.width-50{
    width: 50%;
}


.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: #a93d3d;
    border-color: #a93d3d;
}

.m-b-0{
    margin-bottom: 0px !important;
}

.ds .thumb {
    width: 30px;
    margin: 0 10px 0 20px;
    display: block;
    float: left;
}

.ds .desc {
    border-bottom: 1px solid #eaeaea;
    display: inline-block;
    padding: 15px 0;
    width: 100%;
}

.ds p > muted {
    font-size: 9px;
    text-transform: uppercase;
    font-style: italic;
    color: #666666;
}

.font-size-12 {
    font-size: 12px;
}

ul.ui-autocomplete {
    color: white !important;
    background-color: #605d5d;
    -moz-border-radius: 15px;
    border-radius: 15px;
    z-index: 1003;
    position: absolute;
}

.multiselect-container {
    width: 100% !important;
}

.multiselect-container > li > a { white-space: normal; }

.c-p-button {
    width: 238px;
}

.height-15 {
    height: 15px;
}



.m-t-7 {
    margin-top: 7px;
}

.p-l-2{
    padding-left: 2px;
}

.p-l-29{
    padding-left: 29px;
}

.p-0{
    padding: 0px;
}

.w3ls_head {
    font-size: 30px;
    color: white;
    margin-bottom: 2em;
    letter-spacing: 2px;
    text-align: center;
}

.text-white{
    color: white;
}

/* Dashboard */

/*scroll bar*/
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #3d3939;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*scroll bar*/

/*mobile style*/
@media (max-width: 479px) {
    body {
        margin-top: 0px !important;
    }

    .header_mid_area {
        float: left;
        margin-top: 23px;
        margin-left: 15%;
        margin-bottom: 10px;
    }

    .brand {
        background: #3d3939;
        float: left;
        width: 25px;
        height: 65px;
        position: relative;
    }

    #sidebar {
        position: fixed !important;
        z-index: 1 !important;
        top: 55px !important;
    }

    .m-t-n-80 {
        margin-top: -80px !important;
    }

    .m-r-n-50{
        margin-right: 0px;
    }

    .m-r-75{
        margin-right: 0px;
    }

    .p-l-mobile {
        padding-left: 13px;
    }

    .m-l-mobile-16 {
        margin-left: 16px;
    }
} /*media 479*/

/*sidebar style*/
.sidenav {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 12px;
    color: #818181;
    display: block;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.main {
    margin-left: 160px; /* Same as the width of the sidenav */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

ul.sidebar-menu {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px !important;}
    .sidenav a {font-size: 18px !important;}


}

@media screen and (max-width: 1024px) {
    .c-p-button { width: 182px !important}

}


/*tablet*/
@media screen and (max-width: 1024px) {
    .brand {
        background: #3d3939;
        float: left;
        width: 25px;
        height: 65px;
        position: relative;
    }

    #sidebar {
        margin-left: -240px;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .hide-left-bar {
        margin-left: 0px!important;
    }

    #main-content {
        margin-left: 0px;
    }

    .header_mid_area {
        float: left;
        margin-top: 23px;
        margin-left: 25%;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) and (min-width: 320px) {
    .header {
        position: relative ! important;
        margin-top: 0px ! important;
    }

    .header_mid_area {
        float: left;
        margin-top: 23px;
        margin-left: 10%;
        margin-bottom: 10px;
    }
}
/*tablet*/

/*sidebar style*/

/*mobile style*/

.dataTables_processing{
    color: black !important;
}

.table-condensed {
    color: black !important;
}

.strike-through {
    text-decoration: line-through
}

.strikediag {
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
    color: red;
}
.withpadding {
    padding: 0 0.15em;
}

input.ggg {
    width: 100%;
    padding: 15px 0px 15px 15px;
    border: 1px solid #1d1d1c;
    outline: none;
    font-size: 14px;
    color: black;
    margin: 14px 0px;
    background: none;
}

.box-shadow-login{
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
}

.login-content-bg input[type="submit"] {
    background: #ffffff !important;
}
.w3layouts-main input[type="submit"] {
    padding: 12px 38px;
    font-size: 18px;
    text-transform: initial;
    letter-spacing: 2px;
    background: #f0bcb4;
    color: black;
    border: none;
    outline: none;
    display: table;
    cursor: pointer;
    margin: 45px auto 31px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.w3layouts-main input[type="submit"]:hover {
    background: #1d1d1c !important;
    transition: 0.5s all !important;
    -webkit-transition: 0.5s all !important;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    color: white;
}