body, body *{
    font-family: 'Fira Sans', sans-serif;
    color:#404040;
}
body{
    overflow-x: hidden;
   
}
body{
    background:#f2f0ed;
}
.form-with-icon{
    position:relative;
}
.page-container{
    position:relative;
    padding-left:120px;
    padding-top:120px;
    padding-bottom:30px;
    padding-right:30px;
}
a,a:hover{
    color:#404040;
}
#header{
    position:fixed;
    border-bottom:1px solid #f2f0ed;
    background:#2c2e33;
    top:0;
    left:0;
    right:0;
    height:90px;
    z-index: 1000;
}
.header-wrapper{
    padding:26px 300px 26px 260px;
    position:relative;
}
.logo{
    display:inline-block;
    width:230px;
    height:50px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;

}
#sidebar{
    top:90px;
    background:#fff;
    width:90px;
    left:0;
    bottom:0;
    position:fixed;
    z-index: 100;
}
.sidebar-list{
    margin:0;
    padding:0;
    list-style: none;
}
.sidebar-list li a{
    font-size:1.6rem;
    display:block;
    padding:0.35rem 0.25rem;
    text-align: center;
    
    
}
.sidebar-list li a .las{
    color:rgba(0,0,0,0.6);
}
.sidebar-list li a.active .las,.sidebar-list li a.active:hover .las{
    color:#000000;
}
.sidebar-list li a:hover .las{
    color:rgba(0,0,0,1);
}
.sidebar-list li a:hover{
    background:#f2f0ed;
}
.header-buttons {
    margin:0;
    padding:0;
    list-style: none;
    text-align: right;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    height:38px;
}
.header-buttons li{
    display:inline-block;
}
.form-with-icon{
    position:relative;
}
.form-with-icon .form-control{
    padding-left:3rem;
}
.form-icon{
    position:absolute;
    top:0;
    bottom:0;
    display:block;
    width:22px;
    height:22px;
    margin:auto;
    left:0.75rem;
    z-index: 100;
}
.big-icon{
    font-size:1.4rem;
    vertical-align: middle;
}
.very-big-icon{
    font-size:1.5rem;
    vertical-align: middle;
}
.btn-secondary{
    border-color:#e2001a;
    background:#e2001a;
    color:#fff;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,.btn-secondary:visited{
    background:#ff001d !important;
    border-color:#ff001d  !important;
}
.btn-secondary:focus{
    box-shadow:0 0 0 .2rem rgba(204,0,112,.25) !important;
}
.white{
    color:#fff;
}
.sort-items {
	background: #E9E9E9 !important;
}
.left {
	float: left !important;
}
.btn-information,.btn-notifications{
    padding-left:0.25rem;
    padding-right:0.25rem;
    position:relative;
}
.btn-notifications .bell-indicator{
    position:absolute;
    right:5px;
    top:5px;
    width:8px;
    height:8px;
    background:#e2001a;
    border-radius: 50%;
}
.form-control-no-border{
    border-color:transparent;
    border-radius: 0;
    border-bottom:1px solid #f2f0ed !important;
}
.form-control-no-border.form-control:focus{
    border-color:transparent !important;
    border-bottom:1px solid #e2001a !important;
    box-shadow:0 0 0 .2rem rgba(204,0,112,0) !important;
}
.form-control:focus{
    border-color:#f2f0ed;
    box-shadow:0 0 0 .2rem rgba(150,116,104,.25) !important;
}
.brown{
    color:#000000;
}
.tooltip-inner{
    background:rgba(0,0,0,0.7);
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: rgba(0,0,0,0.7);
}
.row.row-small{
    margin:0 -5px;
}
.row.row-small > div{
    padding: 0 5px;
}
.items-statistic-item{
    background:#fff;
    padding:2rem 4rem 2rem 4rem;
    border-radius: 0.25rem;
    width:calc(50% - 15px);
    margin:0 5px 10px 5px;
    position:relative;
}
.items-statistic{
    margin: 0 -10px;
}
.items-statistic-icon{
    font-size:3rem;
    width:48px;
    height:48px;
    top:0;
    bottom:0;
    margin:auto;
    display:block;
    left:2rem;
    position:absolute;
    z-index: 100;
    line-height: 48px;
    
}
.items-statistic-icon .las{
    vertical-align: middle;
}
.items-statistic-title{
    font-size:0.9rem;
    font-weight: 500;
    margin:0;
}
.items-statistic-value{
    font-size:2.6rem;
    font-weight: 800;
    display:block;
    line-height: 1.2;
}
.items-statistic-arrow{
    position:absolute;
    width:32px;
    height:32px;
    display:block;
    border-radius: 50%;
    right:2rem;
    top:0;
    bottom:0;
    margin:auto;
    text-align: center;
}
.items-statistic-arrow .las{
    font-size:1.4rem;
    vertical-align: middle;
    line-height: 32px;
    color:#fff;
}
.items-statistic-item-1 .items-statistic-icon .las, .items-statistic-item-1 .items-statistic-value{
    color:#e2001a;
}
.items-statistic-item-1 .items-statistic-arrow{
    background:#e2001a;
}

.items-statistic-item-2 .items-statistic-icon .las, .items-statistic-item-2 .items-statistic-value{
    color:#ffaa27;
}
.items-statistic-item-2 .items-statistic-arrow{
    background:#ffaa27;
}

.items-statistic-item-3 .items-statistic-icon .las, .items-statistic-item-3 .items-statistic-value{
    color:#37b200;
}
.items-statistic-item-3 .items-statistic-arrow{
    background:#37b200;
}
.small-title{
    text-transform: uppercase;
    font-size:0.9rem;
}
.page-link{
    background:transparent;
    border-color:transparent;
    color:#404040;
    width:38px;
    height:38px;
    text-align: center;
    border-radius: 0 !important;
}
.page-link:focus{
    box-shadow:0 0 0 0 rgba(204,0,112,0) !important;
}
.page-link:hover{
    background:transparent;
    border-color:transparent;
    color:#e2001a;
}
.page-link.active{
    background:#e2001a;
    color:#fff;
}
.bold{
    font-weight: 700;
}
.fade-modal {
    transition: opacity .15s linear;
}
.small-text{
    font-size:0.8rem;
    display:block;
    padding-bottom:0.15rem;
}
.complaint-label{
    min-width:80px;
    border-radius: 1rem;
    display:inline-block;
    padding:0.15rem 0.5rem;
    text-align: center;
    font-size:0.75rem;
    color:#fff;
}
.complaint-label.label-teal{
    background:#e2001a;
}
.complaint-label.label-pink{
    background:#e2001a;
}
.complaint-label.label-brown{
    background:#404040;
}
.teal{
    color:#e2001a;
}
.complaint-value-element{
    font-weight: 500;
}
.product-value-element{
    font-weight: 500;
}

.complaint-item,.product-item{
    position:relative;
    padding:0.75rem 80px 0.75rem 1.5rem;
    border-radius: 0.25rem;
    background:#fff;
    margin-bottom:0.5rem;
}
.report-item {
	position:relative;
    padding:0.75rem 80px 0.75rem 1.5rem;
    border-radius: 0.25rem;
    background:#fff;
	margin-bottom: 15px;
}
.attachment-list{
    margin:0;
    padding:0;
    list-style: none;
}
.attachment-list li{
    margin:0 0.25rem 0.25rem 0;
    float:left;
}
.attachment-list li a{
    display:block;
    font-size:0.9rem;
}
.attachment-list.attachment-list-teal li a,.attachment-list.attachment-list-teal li a .las{
    color:#e2001a;
}
.attachment-list.attachment-list-pink li a,.attachment-list.attachment-list-pink li a .las{
    color:#e2001a;
}
.attachment-list.attachment-list-brown li a,.attachment-list.attachment-list-brown li a .las{
    color:#404040;
}
.pink{
    color:#e2001a;
}
.dropdown-complaint,.dropdown-product,.dropdown-task,.dropdown-custom{
    display:block;
    position:absolute;
    right:1.5rem;
    height:40px;
    height:40px;
    top:0.75rem;

}
.dropdown-task,.dropdown-custom{
    right: 0 !important;
}
.dropdown-complaint .dropdown-toggle::after,.dropdown-product .dropdown-toggle::after,.dropdown-task .dropdown-toggle::after,.dropdown-custom .dropdown-toggle::after{
    display:none;
}
.dropdown-complaint .dropdown-toggle,.dropdown-product .dropdown-toggle,.dropdown-task .dropdown-toggle,.dropdown-custom .dropdown-toggle{
    width:38px;
    display:block;
    height:38px;
    text-align: center;
    padding: .375rem .375rem;
}
.dropdown.dropdown-complaint.show .dropdown-toggle,.dropdown.dropdown-product.show .dropdown-toggle,.dropdown.dropdown-task.show .dropdown-toggle,.dropdown.dropdown-custom.show .dropdown-toggle{
    background:#f2f0ed;
}
.dropdown-menu-spacer,.bootstrap-select .dropdown-menu{
    padding:1rem;
}
.dropdown-menu-spacer .dropdown-item,.bootstrap-select .dropdown-menu .dropdown-item{
    border-bottom:1px solid #f2f0ed;
}
.dropdown-menu-spacer .dropdown-item:last-child,.bootstrap-select .dropdown-menu .dropdown-item:last-child{
    border-bottom:0;
}
.brown-light{
    color:#404040;
}
.dropdown-menu {
    border-color:#fff;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}
.breadcrumb{
    margin:0 0 0.5rem 0;
    padding:0;
    background:transparent;
}
.breadcrumb-item{
    font-size:0.7rem;
    text-transform: uppercase;
}
.pagination-wrapper{
    margin:1rem 0;
}
.btn-light{
    background:#fff;
}
.btn-light:hover,.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle{
    background:#fff;
    border-color:#fff;
}
.bootstrap-select .dropdown-item.active,.bootstrap-select .dropdown-item.active:hover,.bootstrap-select .dropdown-item:active ,.bootstrap-select .dropdown-item:focus,.bootstrap-select .dropdown-item:active{
    color: #fff !important;
    background-color: #404040 !important;
}
.bootstrap-select .dropdown-menu li a.active span.text{
    color:#fff !important;
}

.modal-header{
    padding:1.5rem 4rem 1.5rem 3rem;
    position:relative;
    border:0;
}
.close-modal{
    position:absolute;
    display:block;
    width:24px;
    height:24px;
    top:0;
    bottom:0;
    right:3rem;
    margin:auto;
    cursor:pointer;
}
.modal-body{
    background:#f2f0ed;
    padding:1.5rem 3rem;
}
.modal-footer{
    border:0;
    padding:1.5rem 3rem;
}
.btn-primary{
    background:#e2001a;
    border-color:#e2001a;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary:visited{
    background:#e2001a !important;
    border-color:#e2001a  !important;
    box-shadow:0 0 0 .2rem rgba(114,211,202,0.25) !important;
}

.btn-wider{
    padding-left:3rem;
    padding-right:3rem;
}
#drag-and-drop-zone{
    border-radius: 0.25rem;
    padding:3rem 2rem;
    margin-bottom:1rem;
}
.form-control-white{
    border-color:#fff;
}
.form-control-white:focus{
    border-color:#fff;
    box-shadow:0 0 0 .2rem rgba(255,255,255,0.25) !important;
}

#files {
    overflow-y: auto !important;
    max-height: 200px;
}
#files li{
    margin-bottom:0.5rem;
}
.drag-and-drop-title{
    font-size:1rem;
}
.btn-secondary span{
    color:#fff;
}
.filename{
    font-size:0.9rem;
}



.dm-uploader {
	border: 0.15rem dashed #b8b7b5;
	text-align: center;
}
.dm-uploader.active {
	border-color: red;

	border-style: solid;
}
.input-search {
	border: 0.1rem solid #b8b7b5;
	text-align: center;
}
#files .progress{
    background:#fff;
    height:0.5rem;
}
.product-item img{
    max-width:60px;
}
.white-box{
    background:#fff;
    padding:3rem;
    border-radius: 0.25rem;
    margin-bottom:1rem;
}
.image-name{
    display:block;
    font-size:0.9rem;
}
.avalable-images{
    margin:0;
    padding:0;
    list-style: none;
}
.avalable-images li{
    position:relative;
    padding-right:2rem;
    margin-bottom:0.5rem;
}
.remove-image{
    cursor:pointer;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    display:block;
    width:32px;
    height:32px;
    right:0;
    background:#e2001a;
    color:#fff;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;;
}
label,.muted{
    color:rgba(64,64,64,0.7);
}
.btn-outline-secondary{
    border-color:#e2001a !important;
    color: #e2001a !important;
}
.btn-outline-secondary i{
    color:#e2001a;
}
.btn-outline-secondary:hover,.btn-outline-secondary:focus,.btn-outline-secondary:active,.btn-outline-secondary:visited{
    color:#fff !important;
    background:#e2001a !important;
    border-color:#e2001a !important;
}
.btn-outline-secondary:focus{
    box-shadow:0 0 0 .2rem rgba(204,0,112,.25) !important;
}
.btn-outline-secondary:hover i,.btn-outline-secondary:focus i{
    color:#fff !important;
}

.btn-outline-dark{
    border-color:#404040;
    color:#404040;
}
.btn-outline-dark i{
    color:404040;
}
.btn-outline-dark:hover,.btn-outline-dark:focus,.btn-outline-dark:active,.btn-outline-dark:visited{
    background:#404040 !important;
    color:#fff !important;
    border-color:#404040 !important;
}
.btn-outline-dark:focus{
    box-shadow:0 0 0 .2rem rgba(64,64,64,.25) !important;
}
.btn-outline-dark:hover i,.btn-outline-dark:focus i{
    color:#fff !important;
}

.btn-outline-primary{
    border-color:#404040;
    color:#404040;
}
.btn-outline-primary i{
    color:#404040;
}
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-primary:active,.btn-outline-primary:visited{
    border-color:#404040 !important;
    color:#fff !important;
    background:#404040  !important;
}
.btn-outline-primary:focus{
    box-shadow:0 0 0 .2rem rgba(150,116,104,.25) !important;
}
.btn-outline-primary:hover i,.btn-outline-primary:focus i{
    color:#fff;
}
.page-title{
    font-size:2rem;
}
.complaint-number{
    font-size:1.1rem;
}
.complaint-top-wrapper{
    border-bottom:5px solid #f2f0ed;
    padding:0 0 0.5rem 0;
    margin-bottom:1.5rem;
}
.attachment-list-outline li a{
    border:1px solid #f2f0ed;
    padding:0.25rem 0.75rem;
    
}
.attachment-list-white li a{
    padding:0.25rem 0.75rem;
    background:#fff;
}
.btn-warning{
    color:#fff;
    border-color:#404040;
    background:#404040;
}
.btn-warning:hover,.btn-warning:focus,.btn-warning:visited,.btn-warning:active{
    color:#fff;
    border-color:#82645a;
    background:#82645a;
    box-shadow:0 0 0 .2rem rgba(150,116,104,0.25) !important;
}
.text-uppercase{
    text-transform: uppercase;
}
.gray-box{
    padding:2rem;
    border-radius: 0.25rem;
    background:#f2f0ed;
}
.task-item{
    position:relative;
    padding:0.75rem 2.5rem 0.75rem 0;
    border-bottom:1px solid #fff;
}
.task-item:last-child{
    border-bottom:0;
}
.gray-box hr{
    border-top:1px solid #fff;
}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active{
    background:#f2f0ed !important;
    color:#404040 !important;
}
.modal-body .complaint-top-wrapper{
    padding:0;
    border:0;
}
.btn-outline-white-modal{
    border-color:#fff !important;
    background:#fff !important;
}
.internal-navigation{
    margin:0;
    padding:0;
    list-style: none;
    border-radius: 0.25rem;
    overflow: hidden;
    background:#f2f0ed;
}
.internal-navigation li a{
    padding:0.75rem 1.5rem;
    display:block;
}
.internal-navigation li a.active{
    background:rgba(0,0,0,0.05);
}
.medium-title{
    font-size:1.1rem;
    font-weight: medium;
}
.user-item{
    padding:0.5rem 3rem 0.5rem 0;
    position:relative;
    border-bottom:1px solid #f2f0ed;
}
.status-item{
    padding:0.75rem 3rem 0.75rem 0;
    position:relative;
    border-bottom:1px solid #f2f0ed;
}
.user-list,.status-list{
    margin:1rem 0;
}
.user-item:last-child,.status-item:last-child{
    border:0;
}
.item-with-icon{
    position:relative;
    padding-left:50px;
}
.circle-icon{
    display:block;
    width:40px;
    height:40px;
    top:0;
    bottom:0;
    left:0;
    border-radius: 50%;
    line-height:40px;
    text-align: center;
    position:absolute;
}
.circle-icon-gray{
    background:#f2f0ed;
}
.circle-icon-brown{
    background:#404040;
}
.form-with-icon-custom .form-control{
    padding-left:0;
}
.form-with-icon-custom .bootstrap-select>.dropdown-toggle{
    padding-left:2.5rem;
}
.btn-link{
    color:#404040;
    background:#fff;
}
.btn-link:hover,.btn-link:focus{
    color:#404040;
}

.form-with-icon-custom-spacing .btn-link{
    text-align: left;
    padding-left:2.5rem;
    padding-right:1rem;
    text-decoration: none !important;
}
.form-with-icon-custom-spacing .btn-link:after{
    right:0.75rem;
    position:absolute;
    top:1.1rem;
}

.dropdown-calendar{
    min-width:300px;
}
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{
    background:#e2001a !important;
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #e2001a;
}
.selected-elements{
    margin:0;
    padding:0;
    list-style: none;
}
.selected-elements li{
    border-radius: 30px;
    background:#fff;
    padding:0.25rem 0.5rem 0.25rem 0.75rem;
    font-size:0.8rem;
    float:left;
    display:block;
    margin:0 0.25rem 0.5rem 0;
    text-transform: uppercase;;
}
.selected-elements li .remove{
    cursor:pointer;
    margin-left:0.15rem;
    display:inline-block;
}
.selected-elements li:hover{
    background:#e2001a;
    color:#fff;
}
.selected-elements li:hover .remove .las{
    color:#fff;
}
.login{
    background: url(../images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100vh;
}
.login-wrapper{
    padding:5rem 0;
}
.underline{
    text-decoration:underline;
}
.custom-checkbox-white .custom-control-label::before{
    border-color:#fff;
}
.custom-checkbox-white .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #e2001a;
    background-color: #e2001a;
    box-shadow:0 0 0 .2rem rgba(204,0,112,.25) !important;
}
.custom-checkbox-white .custom-control-input:focus~.custom-control-label::before{
    box-shadow:0 0 0 .2rem rgba(204,0,112,.25) !important;
    border-color:#fff;
}
.red {
	color: #E7000E;
}
.green {
	color: #148510;
}
.hidden {
	display: none;
}
.right {
	float: right;
}

.left {
	float: left;
}

.center {
	text-align: center;
}

.search-bar {
	padding: 10px 10px 10px 10px;
}

.pink {
	color: #e2001a;
}

@media(max-width:1024px){
    .product-value-element,.complaint-value-element{
        margin-bottom:0.5rem;
    }
    .profile .user-name, .profile.dropdown-toggle::after{
        display:none;
    }
    .items-statistic-item{
        width: 100%;
        margin: 0 0 10px 0;
        padding: 1rem 2.5rem 1rem 60px;
    }
    .items-statistic-arrow{
        width:24px;
        height:24px;
        right:0.75rem;
    }
    .items-statistic-arrow .las{
        font-size:0.9rem;
        line-height: 24px;
    }
    .items-statistic{
        margin:0;
    }
    .items-statistic-value{
        font-size:2rem;
    }
    .items-statistic-title{
        font-size:0.85rem;
    }
    .items-statistic-icon{
        font-size:1.8rem;
        width:32px;
        height:32px;
        left:15px;
        line-height: 32px;
    }
   
}
@media(max-width:768px){
    .product-value-element,.complaint-value-element{
        margin-bottom:0.5rem;
    }
    #sidebar{
        width:50px;
    }
    .page-container{
        padding-left:65px;
        padding-right:15px;
        padding-top:100px;
    }
   .header-wrapper{
       padding:45px 0 0 0;
   }
   .logo{
       width:160px;
       height:35px;
       top:10px;
       bottom:initial;
   }
   .header-buttons{
       top:5px;
       bottom:initial;
   }
   .page-link{
       font-size:0.85rem;
       width:32px;
       height:32px;
   }
   .profile{
       padding-left:0.35rem;
       padding-right:0.35rem;
       width:38px;
   }
   .page-title{
       font-size:1.6rem;
   }
   .white-box,.gray-box{
       padding:1rem;
   }
   .login-wrapper{
       padding:2rem 0;
   }
   .login-wrapper .lead{
       font-size:1rem;
       margin-top: 0.25rem !important;
   }
   .login-wrapper .btn-primary{
       margin-top:1rem;
   }
   .login-wrapper .underline{
       display:inline-block;
       background:#f2f0ed;
       padding:0.25rem 0.5rem;
   }
   .complaint-item, .product-item{
       padding-left:1rem;
       padding-right:60px;
   }
   .dropdown-complaint, .dropdown-product, .dropdown-task, .dropdown-custom {
  
    right: 0.5rem;
    }
    .form-with-icon-custom {
        margin-top:0.25rem;
    }
    .internal-navigation li a{
        padding: 0.75rem 1rem;
    }
    .user-item .medium-title{
        font-size:0.85rem;
    }
    .circle-icon{
        width:24px;
        height:24px;
        line-height:24px;
    }
    .circle-icon i{
        font-size:0.85rem;
    }
    .item-with-icon{
        padding-left:35px;
    }
    .btn-wider{
        padding-left:1rem;
        padding-right:1rem;
        width:100%;
    }
    .modal-header{
        padding-left:1rem;
        padding-right:2rem;
    }
    .close-modal{
        right:0.5rem;
    }
    .modal-body,.modal-footer{
        padding-left:1rem;
        padding-right:1rem;
    }
}