/*---------------------Colors---------------------*/
:root{
    --color1:black;
    --color2:white;
    --color3:rgb(189, 187, 187);
    --color4:rgb(62, 60, 60);
    --color5:#F5F5F5;
    --errorColor:rgb(221, 7, 7);
    --errorColorLight:rgb(202, 127, 127);
    --okColor: green;
    --okColorLight:rgb(173, 204, 173);
    --alertColor: rgb(104, 104, 104);
    --alertColorLight:rgba(255, 255, 0, 0.785);
}

/*---------------------font family---------------------*/
body{
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    margin: 0;
}

/*-----------------------------Refs-----------------------------*/
a{
    text-decoration: none;
    color:black
}

/*-----------------------------uls-----------------------------*/
ul {
    list-style-type: none; 
    padding: 0; 
}

/*-----------------------------errors-----------------------------*/
.isInvalid{
    border:rgb(221, 7, 7) solid 2px !important
}

.invalidInput{
    border: var(--errorColor) solid 2px !important;
}

.invalidLabel{
    color: var(--errorColor);
    font-weight: bold;
}

.divError{
    color:rgb(206, 10, 10);
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    display: none;
}

.divError2{
    color:rgb(206, 10, 10);
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    display: none;
}

.divErrorBE{ /*for backend validations*/
    color: var(--errorColor);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin-top: 2px;
}

.errorColor{
    color:rgb(206, 10, 10);
    font-weight: bold;
}

/*---------------------display---------------------*/
.notVisible{
    display: none !important;
}

/*---------------------margins---------------------*/
.ma{
    margin:auto
}

.mts{
    margin-top: 8px;
}
.mbs{
    margin-bottom: 8px;
}
.mtm{
    margin-top: 15px;
}
.mbm{
    margin-bottom: 15px;
}
.mtl{
    margin-top: 30px;
}
.mbl{
    margin-bottom: 30px;
}
.mtxl{
    margin-top: 40px;
}
.mbxl{
    margin-bottom: 40px;
}
.mtxxl{
    margin-top: 100px;
}
.mbxxl{
    margin-bottom: 100px;
}

/*---------------------width---------------------*/
.wXXS{
    width: 35px;
}
.wXS{
    width: 70px;
}
.wS{
    width: 100px;
}
.wM{
    width: 130px;
}
.wL{
    width: 160px;
}
.wXL{
    width: 200px;
}
.wXXL{
    width: 300px;
}

/*---------------------padding---------------------*/
.pS{
    padding: 4px 0px 4px 0px;
}

.pL{
    padding: 11px 0px 11px 0px;
}

/*---------------------icons---------------------*/
.unfilterIcon{
    font-size: 16px;
    cursor: pointer;
}

.pointer{
    cursor: pointer;
}

.middleLoader{
    top: 50%;
    left: calc(50vw - 30px)
}

.loader-btm{
    top: 60%;
    left: calc(50vw - 30px)
}

#ordersLoader{
    top: 450px;
    left: calc(50vw - 30px);
    z-index: 10;
}

#ordersDetailsLoader,#salesLoader,#customersLoader,#productsLoader{
    top:60%;
    left: calc(50vw - 30px);
    z-index: 10;
}

#productsTypesLoader,#fabricsLoader,#colorsLoader,#sizesLoader{
    top: 100px;
    left: calc(50% - 30px);
}

/*---------------------fonts---------------------*/
.fwb{
    font-weight: bold;
}

/*---------------------position---------------------*/
.relativePosition{
    position: relative;
}

/*---------------------predicted items---------------------*/
.predictedElements{
    display: none;
    position: absolute;
    top:60%;
    width: 100%;
    border: black solid 1px;
    background-color: var(--color2);
    z-index: 2;
    max-height: 400px;
    overflow-y: auto;
    text-align: center;
}
.liPredictedElements{
    font-size: 12px;
    padding: 5px 0px 5px 3px;
    cursor: pointer;
}
.predictedElementFocused{
    background-color:var(--color3);
}