body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
}
h1{
    font-size:1.8em;
}
h2{
    font-size:1.5em;
}

.v-middle{
    vertical-align:middle;
    padding-bottom:3px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}
.marginAuto{
    width:auto;
    margin:auto;
}
.pinkAvatar {
  
    background-color: rgb(225, 0, 80) !important;
}

.banner-anim-elem .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.banner-anim {
    position: relative;
    overflow: hidden;
    min-height: 100px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.3), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
    border-radius:4px;

}
.carouselBig{
    height:400px !important;
}
.banner-user, .banner-anim {
    height: 360px;
}
.banner-anim-elem {
    height: 100%;
}
.bgTransparent {
    background-color: rgba(255,255,255,0.7);
    position:relative;
    max-width:50%;
    padding:15px;
  
}
.headerProfile{
    position:absolute;
    top:0px;
  right:0px;
  left:100px;
}
.headerProfile .pull-right{
    float:right;
    padding-right:10px;

}
.pointer{
    cursor:pointer;
}
.navbar-brand img{
    height:50px;
}
.navbar-brand{
    position:absolute;
    right:0px;
    top:0px;
}
#nav {
    /*position:absolute;
    top:0px;
    padding-left:60px;
    padding-top:0px;
    font-size:.9em;
    right:0px;*/
}
.headerInfo{
  margin-top:.5rem;
}
.boxUser {
    position: absolute;
    top: 0px;
    bottom: 0px;
    border-left:1px solid #ccc;
    border-top-left-radius:20px;
    background-color:#fff;
    box-shadow:inset 1px 1px 5px #aaa;
    right: 0px;
    height: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: inline-block;
    padding-left:5px;
    color:#888;
    
}
    .boxUser span {
        padding-top: .5rem;
        padding-bottom: .5rem;
        display: inline-block;
    }
.boxSupplier {
   white-space:nowrap;
    padding-top: 5px;
    font-size: .9em;
}










.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(160,0,0,.8);
    
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 36px;
}

    .sidenav .menu a {
        padding: 10px 10px 10px 20px;
        text-decoration: none;
        font-size: 1.1em;
        color: #ddd;
        display: block;
        transition: 0.3s;
    }

    .sidenav .menu a:hover {
        color: #f1f1f1;
        text-decoration:none;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 32px;
        margin-left: 50px;
        color:#ddd;
    }
    .sidenav .closebtn:hover{
       text-decoration:none;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav .menu a {
            font-size: 18px;
        }
}
.btnMenu{
   margin-right:15px;
    /*background-color:#222;*/
    color:#222;
    top:0px;
    height:60px;
    width:60px;
    padding-top:14px;
    text-align:center;
}
.boxCircle{
    text-align:center;
  
    color:#ccc;
}
    .boxCircle span {
        font-size: 3em;
       
    }

.subText{
    font-size:.85em;
}

.accountInfo {
    transition: 0.3s;
    color: #ddd !important;
    text-align: center;
    font-size: .9em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.accountInfo p{
    margin-bottom:0px;
    white-space:nowrap
}
.menu ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.menu ul li{
    
    position:relative;
}


    .menu ul li, .menu ul li span {
        transition: all 500ms;
    }

        .menu ul li span {
            padding: 0;
            display: block;
            background: rgba(200,200,200,.7);
            color:#222;
            z-index: -1;
            position: absolute;
            top: 0;
            left: -300px;
            bottom: 0;
            width: 100%;
            height: 100%;
        }

.menu ul li:hover > span:last-child {
    left: 0;
}
        .menu ul li:hover a{
            color:#444 !important;
        }


#noty_layout__topRight {
    width: auto !important;
}
.container{
    min-width:100%;
    max-width:100% !important;
    width:100% !important;
}

td{
    padding:8px !important;
    border:none !important;
}
th {
    padding: 8px !important;
}
.tableBtn tr> th:last-of-type,
.tableBtn tr> td:last-of-type{
    text-align:right;
}
.titleSupplier{
    font-size:.7em;
}
table tr{
height:auto !important;
}
table tr:nth-child(even){
    background-color:#f8f8f8;
}
.numberBig {
    font-size: 1.8rem;
    font-weight:300;
}




.counter {
    background-color: #ffffff;
    padding: 10px 0;
    border-radius: 5px;
}

.count-title {
    font-size: 30px;
    font-weight: normal;
    line-height: 40px;
    margin-bottom: 0;
    text-align: center;
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.boxCounter {
    height: 85px;
    width: 140px;
 
    text-align: center;
    color: #ddd;
    padding: 5px 0px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.countRed .boxCounter {
    background-image: linear-gradient(to right bottom, #000000, #dd0000);
}
.countAmber .boxCounter {
    background-image: linear-gradient(to right bottom, #000000, #ddbb00);
}
.countGreen .boxCounter {
    background-image: linear-gradient(to right bottom, #000000, #00dd00);
}
.countGrey .boxCounter {
    background-image: linear-gradient(to right bottom, #000000, #dddddd);
}
.boxCounter span:not(.material-icons){
    display:block;
   
}
.boxCounter .material-icons{
    font-size:18px;
    margin-bottom:4px;
    margin-right:5px;
    vertical-align:middle;
}
.linkBtn {
    padding: 8px 10px;
    text-transform: uppercase;
    background-color: #222;
    text-decoration: none;
    color: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
     display:block;
    /*margin-left: auto;
    margin-right: auto;*/
    width:125px;
}
    .linkBtn:hover, .linkBtn:visited {
        text-decoration: none;
        color: #fff;
       
    }

table {
    width: 100%;
    display: table;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    border-spacing: 0;
    border-collapse: collapse;
    border-color: grey;
}
th {
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.65em;
    font-weight: 600;
    text-transform:uppercase;
    display: table-cell;
   
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    vertical-align: inherit;
}
thead {
    display: table-header-group;
    border-color: inherit;
    border-spacing: 0;
    border-collapse: collapse;
}
tbody {
    display: table-row-group;
}
    thead tr {
        color: inherit;
      
        display: table-row;
        outline: none;
        vertical-align: middle;
    }
td {
    color: rgba(0, 0, 0, 0.87);
    font-size: 0.78em;
    font-weight: 400;
}
.block{
    display:block;
}
.colorGreen{
    color:#229c0a;
}
.colorAmber{
    color:#ffb400;
}
.colorRed{
    color:#dd0000;
}
.w80{
    width:80px !important;
   display:inline-block;

}
.w65 {
    width: 65px !important;
    display: inline-block;
}
.react-datepicker-wrapper, .react-datepicker__input-container {
    width: 100%;
}
.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll{
    width:70px;
}
/*.w80 div{
    width:100%;
    max-width:100%;
}*/
.w80 input {
    text-align: right;
}
.w65 input {
    text-align: right;
}
.colCommand{
    text-align:right;
    width:120px;
}
.colCommand div{
    display:inline-block;
}
.w150{
    width:150px;

}
.w100 {
    width: 100px;
}
.inputInline{
    display:inline-block;
}
.w100 input{
    width:100%;
    max-width:100%;
    min-width:100%;
}
.absoluteConfirm{
    position:fixed;
    right:29px;
    bottom:40px;
    z-index:9;
}
input[class^="MuiInput-input-"], input[class^="jss"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.bgOdd{
    background-color:transparent !important;
}
.bgEven {
    background-color: #f8f8f8 !important;
}






.font-grey{
    color:#888;
}

.font-small{
    font-size:.85em;
}
.font-bold{
    font-weight:600;
}
.font-red{
    color:#dd0000;
}




.headerTable{
    font-size:.8em;
}
.titleTable {
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    font-size: .7em;
    display: block;
}
.boxOrder{
    margin-bottom:20px;
    font-size:.8em;
    display:table;
    table-layout:fixed;
    width:100%;
   
}
.boxOrder>.box-td{
    padding:8px;
    vertical-align:top;
    display:table-cell;
}
.boxOrder .boxSide{
   width:160px;
}
    .boxOrder .supplier .material-icons {
        font-size:40px;
        display:inline-block;
    }
    .boxOrder .supplier{
        text-align:center;
        margin-top:5px;
     
    }
    .inline-block{
        display:inline-block;
    }
    .boxOrder .box-td .row{
        margin-left:0px;
        margin-right:0px;
    }

        .boxOrder .box-td .row div[class^="col-md"] {
            padding-left: 0px;
            padding-right: 0px;
        }
.border-bottom{
    border-bottom:1px solid #888;
    padding-bottom:10px;
}
.font-small .material-icons{
    font-size:1.4em !important;
}

.editCheckbox {
    width: 26px !important;
    height: 26px !important;
    padding-bottom: 8px !important;
}
.filledData {
    min-height: 28px;
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
}

.boxOrder input {
    font-size: .8em;
    font-family: Roboto, sans-serif;
    padding-top:2px;
    padding-bottom:2px;
}
.errorRow {
    box-shadow: 0px 1px 5px 0px rgba(255, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 0, 0, 0.14), 0px 3px 1px -2px rgba(255, 0, 0, 0.12) !important;
    border:1px solid #dd0000;
}
.underline{
    border-bottom:1px dotted #2222aa;
}
.font-medium{
    font-size:1.5em;
}
.mb-sm{
    margin-bottom:5px;
}
.btn-small {
    text-transform: uppercase;
   
    font-size: .9em;
    padding: 3px;
    color: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    cursor:pointer;
}
.bgAmber {
    background-color: #ffb400;
}
.bgOutAmber {
    border: 1px solid #ffb400;
    color: #ffb400;
}
.bgRed {
    background-color: #dd0000;
}

.bgOutRed {
    border: 1px solid #dd0000;
    color: #dd0000;
}
.bgGreen {
    background-color: #229c0a;
}

.bgOutGreen {
    border: 1px solid #229c0a;
    color: #229c0a;
}

.btn-small:not(.bgOutGreen) .material-icons{
    vertical-align:middle !important;
    padding-bottom:5px;
    font-size:1.4em;
    margin-left:2px;
    font-weight:bold;
}
.btn-small.bgOutGreen .material-icons {
    vertical-align: top !important;
    padding-bottom: 5px;
    font-size: 1.4em;
    margin-left: 2px;
    font-weight: bold;
}
.btn-small{
    font-size:.75em;
    height:20px !important;
} .w-45{
    width:45%;
} .w-55{
    width:55%;
} @media (max-width:768px){
    .col-sm-12c {
        width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom:20px;
    }
        .col-sm-12c.offset-md-2{
            margin-left:0px;
        }
} .linkBlack, .linkBlack :visited, .linkBlack :hover{
    color: #000 !important;
}
    .linkGrey {
        color: #aaa !important;
    }

  @media (min-width:769px){
    .boxCarousel {
        width: 480px;
        display: inline-block;
        vertical-align: top;
    }
    .boxCenter {
        margin-left: auto;
        margin-right: auto;
        width: 964px;
    }
} @media (min-width:1024px){
    .modal-lg {
        max-width: 1024px !important;
    }
}
 @media (max-width:1024px){
    .overflowCol {
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
 }
.divDatePicker>div{
    width:100%;
    position:relative;
}
.divDatePicker .react-datepicker-wrapper, .divDatePicker .react-datepicker-wrapper >div{
    width: 100% !important;
}
.notselectedBtn,.selectedBtn{
    padding:3px;
    border-radius:4px;
    font-size:20px;
}
.notselectedBtn{
    border:1px solid #444;
}
.selectedBtn {
    border: 1px solid #444;
    background-color:#444;
    color:#fff;
}
.selectNoMargin>div{
    margin:0px !important;
}

.colorWarning{
    color:#fb5004;
    font-weight:bold;
}
.paperDownshift {

    position: absolute;
    z-index: 1;
    margin-top:10px;
    left: 0;
    right: 0;

}
.chipDownShift{
    display:inline-block !important;
}
    .chipDownShift > span{
    display:inline-block !important;
    margin-top:8px;
}
    .chipDownShift > svg{
        margin-bottom:5px !important;
    }

.forceNoShrink label{
    transform: translate(0, 24px) scale(1) !important;
}
.iconSelect{
    font-size:22px;
    margin-top:-3px;
    vertical-align:bottom;
}
.table-compact th, .table-compact td{
    padding:5px !important;
}
.inline-block{
    display:inline-block;
}

.boxProgressOrder{
    display:inline-block;
    height:12px;
    width:30px;
    border:1px solid #aaa;
    border-radius:2px;
    vertical-align:middle;
    margin-left:4px;
    margin-bottom:3px;
    padding:1px;
    position:relative;
}
    .boxProgressOrder::after {
        display: inline-block;
        width: 3px;
        height: 6px;
        background-color: #aaa;
        content: "";
        position: absolute;
        top: 2px;
        right: -3px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    .boxProgressOrder span {
        display: block;
        height: 8px;
        border-radius: 2px;
        vertical-align: middle;
    }
    .boxProgressOrder .blu {
        /*background-color: #009aff;*/
        background-color: #007bff;
        background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    }
    .boxProgressOrder .red {
        background-color: #dd0000;
        background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    }
    .boxProgressOrder .amber {
        background-color: #ffa517;
        background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    }
.attachmentBlu {
    color: #007bff;
}
#downshift-simple-menu{
    position:absolute;
    z-index:999;
    width:100%;
right:15px;

}