@media screen {
    html{
        padding: 0;
        height: 100%;
        box-sizing: border-box;
    }
    body {
        direction: rtl;
        font-family: 'El Messiri', sans-serif;
        background-color: #e1e1e1;
        position: relative;
        margin: 0;
        padding-bottom: 60px;
        min-height: 100%;
    }
    pre {
        /* Robert: its very important for debugging purpose*/
        direction: ltr!important;
        text-align: left!important;
    }
    .btn, .btn:focus{
        background-color: #3c3c3c;
        border-color: #3c3c3c;
        color: #d7d7d7;
    }
    .btn:hover{
        background-color: #222222;
        border-color: #3c3c3c;
        color: #d7d7d7;
    }
    input[type="date"] {
        width: 160px;
    }
    table label{
        font-weight: normal;
    }
    .widebtn{
        width: 300px;
    }
    label{
        font-weight: unset;
        margin-bottom: unset;
    }
    .negative{
        color: red;
    }
    a#print{
        margin-left: 5px;
    }
    .onlyPrint{
        display: none;
    }
    .printRights{
        display: none;
    }
    .printRights2{
        display: none;
    }
    .tooltip-inner{
        font-family: 'El Messiri', sans-serif;
        font-size: 14px;
    }
    .hidden{
        display: none !important;
    }
    .bg-red{
        background-color: red;
    }



    /*nav bar*/
    .navbar>.container-fluid{
        background-color: #3c3c3c;
        box-shadow:0px 5px 10px #888888;
        padding-right: 5px;
    }
    .navbar-nav{
        float: right;
        padding-right: 15px;
    }
    @media only screen and (min-width: 768px){
        ul.navbar-nav {
            transform: rotate(180deg);
        }

        ul.navbar-nav > li {
            transform: rotate(-180deg);
        }
    }
    .navbar-inverse .navbar-nav > li > a{
        color: #d7d7d7;
    }
    .dropdown-menu{
        text-align: right;
        left: auto;
        right: 0;
    }
    .navbar-inverse .navbar-toggle .icon-bar{
        background-color: #d7d7d7;
    }
    .nav > li > a{
        padding-right: 10px;
        padding-left: 10px;
    }
    .navbar-inverse .navbar-brand{
        color: #d7d7d7;
        padding-right: 0;
    }
    .navbar-inverse .navbar-brand:hover{
        color: #d7d7d7;
    }



    /* signin form */
    .signInForm{
        width: 450px;
        height: 300px;
        border: #3c3c3c 10px solid;
        display: block;
        margin: auto;
        background-color: rgba(60,60,60,.1);
    }
    .signInForm input#userName{
        width: 200px;
        margin-top: 30px;
    }
    .signInForm input#password{
        width: 200px;
    }
    .signInForm button.btn{
        width: 200px;
        margin-top: 30px;
    }
    .signInForm .pageHeader{
        margin-top: 20px;
    }



    /* the big container */
    .varnaContainer{
        margin: 0 15px;
    }
    .dataTables_wrapper{
        max-width: 100%;
    }



    /*Page header*/
    .pageHeader{
        margin: 10px 10px 30px ;
        padding: 0;
        font-size: 40px;
        text-align: center;
    }



    /* from to date */
    .formGroup{
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin: 10px 0;
        height: auto;
        display: inline-block;
    }
    .form-control{
        display: inline-block;
        width: auto;
    }
    .formRight{
        float: right;
    }
    .formRight2{
        float: right;
        margin-right: 30px;
    }
    .formLeft{
        float: left;
    }
    .formGroup label{
        font-weight: unset;
    }
    .formRight>span.btnRight{
        border-radius: 0 4px 4px 0;

    }
    .formRight>span.btnLeft{
        border-radius: 4px 0 0 4px;
    }
    .formRight>span.btnRight2{
        border-radius: 0;
        border-right-color: #6c6c6c;

    }
    .formRight>span.btnLeft2{
        border-radius: 0;
        border-left-color: #6c6c6c;
    }

    .btn-warning{

        background-color: #f00000;
        border-color: #ff0000;
        color: #d7d7d7;
        display: block;
        display: block;
        margin: auto;

    }
    .formRight>span>input#billId{
        border-radius: 0;
        border-color: #3c3c3c;
        padding: 0 5px;
        text-align: center;
    }
    .formLeft>span.btn{
        margin: 0 2px;
    }
    .formGroup>.formRight:nth-child(2){
        padding-right: 15px;
    }
    @media only screen and (max-width: 767px){
        .varnaContainer>.formGroup{
            display: flex;
            justify-content: center;
            flex-direction: column
        }
        .formGroup>.formLeft, .formGroup>.formRight{
            display: flex;
            justify-content: center;
            margin: 5px 0;
        }
        .formGroup>.formRight:nth-child(2){
            padding-right: 0px;
        }
    }
    span.labelForm{
        display: inline-block;
        min-width: 35px;
        text-align: right;
    }
    .formLeft #branch, .formRight #branch{
        width: 115px;
    }
    .formRight>#billId{
        width: 150px;
    }
    .billNumber{
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }



    /* table */
    table.dataTable.table-condensed > thead > tr > th{
        padding-right: 25px;
    }
    table.dataTable.table-condensed > thead > tr > th.sorting_disabled{
        padding-right: 5px;
    }
    .strip1{
        background-color: #f9f9f9;
    }
    thead>tr>th, tfoot>tr>th{
        background-color: #3c3c3c;
        color: #d7d7d7;
        text-align: right;
    }
    thead>tr>th input{
        background-color: #fff;
        color: #3c3c3c;
        text-align: right;
    }
    thead th,tfoot th{
        font-weight: normal;
    }
    .dataTables_length, .dataTables_info{
        text-align: left;
    }
    .pagination{
        padding-right: 0;
    }
    .dataTables_wrapper>div:last-child{
        margin-top: 1vw;
    }
    .dataTables_wrapper>div:first-child>.col-sm-6{
        clear: right;
    }
    .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
        border: 1px solid #888888;
    }
    table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child{
        border-right-width: 1px;
        border-left-width: 1px;
    }
    table.table-bordered.dataTable tr:last-child>td{
        border-bottom-width: 1px;
    }
    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
        background-color: #3c3c3c;
        border-color: #3c3c3c;
    }
    .pagination > li > a, .pagination > li > span{
        color: #3c3c3c;
    }
    .dataTables_scrollBody tr:hover{
        background-color: #666666 !important;
        color: #dedede;
    }
    .dataTables_scrollBody tr:hover input{
        color: #3c3c3c;
    }
    .dataTables_scrollHead{
        position: sticky !important;
        top: 0;
        z-index: 2;
    }
    .dataTables_scrollHeadInner>table.dataTable{
        margin-top: 0 !important;
    }
    div.dataTables_wrapper div.dataTables_filter input{
        width: 385px;
        margin-left: 0;
    }
    .dataTables_scrollHead tr.trSearch th>input{
        width: 100%;
    }
    .dataTables_scrollHead tr.trSearch th{
        padding: 5px !important;
    }
    .dataTables_scrollFoot{
        overflow: auto !important;
    }
    .dataTables_wrapper .dataTables_scrollBody:not(:last-child){
        overflow: hidden !important;
    }
    tfoot>tr>th{
        border-top: 0 !important;
    }
    .dataTables_scrollFoot{
        position: sticky;
        bottom: 0;
        -ms-transform: translate(0px, -1px);
        -webkit-transform: translate(0px, -1px);
        transform: translate(0px, -1px);
    }
    .dataTables_scrollFoot table{
        margin-bottom: 0 !important;
    }
    table tbody tr td .btn{
        display: block;
        margin: auto;
        padding: 2px 8px;
    }
    table tbody tr td input[type=checkbox]{
        margin: 5px auto;
    }
    tr.trSearch th{
        border-bottom: 0 !important;
    }
    .dataTables_wrapper .row:first-child{
        margin-bottom: 5px;
    }
    #example_wrapper table{
        width: 100% !important;
    }
    .dataTables_processing{
        position: fixed !important;
        top: 50%;
        left: 50%;
    }
    .varnaContainer th{
        text-align: right;
    }
    .excelBtnContainer{
        text-align: left;
    }
    .excelBtnContainer>div{
        display: inline;
    }
    .dataTables_length>label{
        margin-left: 30px;
    }
    @media only screen and (max-width: 767px){
        .excelBtnContainer{
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        .excelBtnContainer>div{
            text-align: center;
            width: 25%;
        }
        .dt-buttons button{
            margin-left: 0;
        }
        .excelBtnContainer>div.dataTables_length{
            display: flex;
            align-items: center;
        }
    }


    /* table data container */
    .tableDataContainer{
        background-color: #b8b8b8;
        border-bottom: solid #3c3c3c 2px;
        border-top: solid #3c3c3c 2px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 0;
        margin: 10px 0;
    }
    .tableDataContainer span.dataLabel{
        font-weight: 600;
    }



    /* discount form */
    .discountBlock{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: #3c3c3c 3px solid;
        padding: 15px 0 5px 0;
        background-color: rgba(60,60,60,.1);
    }
    .discountBlockNoBorder{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .discountBlock .discountSubBlock, .discountBlockNoBorder .discountSubBlock{
        padding-right: 5px;
        padding-left:  5px;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .discountBlock .discountSubBlock:first-child{
        margin-right: unset;
    }
    .discountSubBlock>label, .discountSubBlock>.btn{
        margin-left: 10px;
    }
    .discountSubBlock>label:last-child, .discountSubBlock>.btn:last-child{
        margin-left: 0;
    }
    .discountSubBlock select{
        width: auto;
    }
    .discountSubBlock .color{
        width: 120px;
    }
    .discountSubBlock .model, .discountSubBlock .size{
        width: auto;
    }
    .discountSubBlock input[type="number"]{
        width: 70px;
    }
    .discountSubBlock input[type="number"].price, .discountSubBlock input[type="number"].totalAfterDiscount{
        width: 100px;
    }
    .discountSubBlock input[step="0.01"]{
        width: 100px;
    }
    .discountSubBlock input.description{
        width: 350px;
    }
    input.itemId{
        width: 160px !important;
    }
    .centerDiscountSubBlock{
        width: 100%;
    }
    #price{
        width: 100px;
    }
    #quantity{
        width: 70px;
    }
    .discountBlock #phone{
        width: 120px;
    }



    /* item form */
    .itemForm .discountBlock{
        justify-content: right;
    }
    .itemForm .discountBlockNoBorder{
        justify-content: right;
    }
    .itemForm .centerDiscountSubBlock:first-child {
        justify-content: right;
    }
    .itemForm .centerDiscountSubBlock:last-child {
        justify-content: center;
    }
    #billType {
        width: 112px;
    }


    /* table without datatable */
    .noDT{
        overflow-x: auto;
    }
    .noDT thead tr{
        border-top: 1px solid #888888;
    }
    .noDT td, .noDT th{
        white-space: nowrap;
    }



    /* table of brances */
    .branch-prices table, .branch-prices thead > tr > th, .branch-prices tfoot > tr > th {
        text-align: center;
    }



    /* bill form */
    form #name, form #factoryName {
        width: 140px;
    }
    form #phone, form #factoryPhone {
        width: 120px;
    }
    form #address, form #factoryAddress {
        width: 320px;
    }



    /* modal */
    #myModal{
        padding-right: 0 !important;
    }
    .modal-dialog{
        display: flex;
        justify-content: center;
    }
    .modal-content{
        width: 450px;
    }
    .wide-modal .modal-content{
        width: auto;
        max-width: 100%;
    }
    .modal-body{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .wide-modal .modal-body{
        display: block;
        justify-content: unset;
        flex-wrap: unset;
        overflow-x: scroll;
    }
    .modal-body span.modal-label{
        width: 120px !important;
        font-weight: normal;
        display: inline-block;
    }
    .modal-body input[type="text"],.modal-body input[type="number"] , .modal-body select, .modal-body input[type="date"]{
        width: 200px;
        font-weight: normal;
        display: inline-block;
    }
    .wide-modal .modal-body table input[type="number"]{
        width: 60px;
    }
    .wide-modal table input[type=number] {
        -moz-appearance:textfield;
    }
    .wide-modal table input[type=number]:hover {
        -moz-appearance:unset;
    }
    .modal-footer input, .modal-footer button{
        float: left;
    }
    .modal-footer, .modal-header{
        position: static;
    }
    div.modal-radio>.radio-inline:last-child{
        margin-left: 0;
    }
    div.modal-radio>.radio-inline{
        margin-left: 15px;
        padding-left: 17px;
    }
    div.modal-radio>.radio-inline>span{
        margin-left: 2px;
    }
    div.modal-radio{
        height: 35px;
        display: flex;
        align-items: center;
    }
    .wide-modal tr:hover input, .wide-modal tr:hover{
        background-color: aliceblue;
    }
    .wide-modal tr td:first-child{
        position: sticky;
        right: 0;
        background-color: #3c3c3c;
        color: #d7d7d7;
        border: #d7d7d7 1px solid;
        text-align: center;
    }
    .wide-modal tr:first-child td{
        background-color: #3c3c3c;
        color: #d7d7d7;
        border: #d7d7d7 1px solid;
        text-align: center;
    }
    .wide-modal td{
        width: 50px;
    }
    .wide-modal table .form-control{
        border-radius: unset;
    }
    .wide-modal table{
        border-collapse: unset;
    }
    .wide-modal .modal-body label:not(:first-child){
        margin-right: 20px;
    }
    .modal-body label {
        margin-bottom: 5px;
    }
    .wide-modal .modal-dialog{
        width: auto;
        max-width: 90%;
    }
    .modal-body .tooltipImage{
        width: 400px;
        height: 400px;
    }



    /* modal like form */
    .modalLike .modalLike-label{
        width: 350px;
        display: flex;
        justify-content: center;
    }
    .modalLike .modalLike-span{
        width: 120px;
        display: inline-flex;
        align-items: center;
    }
    .modalLike .modalLike-input{
        width: 230px;
        display: inline-block;
    }
    .modalLike .smodalLike-label{
        width: 200px;
        display: flex;
        justify-content: center;
    }
    .modalLike .smodalLike-span{
        width: 50px;
        display: inline-flex;
        align-items: center;
    }
    .modalLike .smodalLike-input{
        width: 150px;
        display: inline-block;
    }
    .modalLike .modalLike-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }
    .modalLike-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }
    .right{
        justify-content: right;

    }
    .modalLike .modalLike-row label:not(:first-child) {
        margin-right: 15px;
    }
    .modalLike-row textarea{
        width: 350px;
        height: 100px;
        resize: vertical;
    }
    .modalLike-row img{
        width: 230px;
        height: 230px;
    }
    .modalLike-span input[type='radio'] {
        margin-right: 3px;
    }
    .modalLike-row .btn {
        margin: 0 5px 0;
        width: 80px;
    }
    .modalLike-row .widebtn {
        margin: 0 5px 0;
        width: 350px;
    }
    .modalLike-row #bulk-add{
        width: auto;
    }
    .modalLike .otherSpend:not(:first-child){
        margin-top: 10px;
    }
    .modalLike .otherSpend{
        margin-bottom: 20px;
    }
    input#name, input#password{
        width: 140px;
    }
    .checkboxLabel{
        display: flex;
        align-items: center;
    }
    .checkboxLabel span{
        margin-left: 5px;
    }
    .modalLike2 .modalLike-label{
        width: 350px;
        display: flex;
        justify-content: center;
        margin: 0 20px 5px 20px;
    }
    .modalLike2 .modalLike-span{
        width: 120px;
        display: inline-flex;
        align-items: center;
        margin-top: 7px;
        align-self: flex-start;
    }
    .modalLike2 .modalLike-input{
        width: 230px;
        display: inline-block;
    }
    .modalLike2 textarea.modalLike-input{
        width: 230px;
        resize: vertical;
        display: inline-block;
    }
    .modalLike2 .modalLike-block {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 10px 10px 5px;
        border: #3c3c3c 3px solid;
        background-color: rgba(60,60,60,.1);
        margin-bottom: 15px;
    }
    .modalLike2 .modalLike-row {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 10px 10px 5px;
    }
    .modalLike2 .modalLike-empty{
        margin: 0 20px 0 20px;
        height: 0;
    }



    /* permissions page */
    #permissions>.permission{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .permission>.radio-inline{
        padding-left: 0;
    }
    .permission>.page-name{
        width: 180px;
    }
    .permission>.radio-inline + .radio-inline{
        margin-left: 0;
    }
    .permission>.radio-inline:first-of-type{
        margin-right: 0;
    }



    /* transfer page */
    #transfer-form .item,#supplierReturn .item {
        margin-top: 20px;
    }



    /* transfer table */
    .transferTable{
        width: 300px;
        margin: 0 0 10px 0;
    }
    .transferTable th, .transferTable td, .transferTable input{
        width: 100px;
    }



    /* footer */
    .footer{
        background-color: #3c3c3c;
        font-size: 15px;
        color: #d7d7d7;
        padding: 0 40px;
        position: absolute;
        bottom: 0;
        width: 100%;
        line-height: 25px;
    }
    .footer>span:first-child{
        text-align: right;
    }
    .footer>span:last-child{
        text-align: left;
        float: left;
    }



    /* tooltip Image */
    .tooltip-inner img{
        width: 100px;
        height: 100px;
    }
    .tooltip.in{
        opacity: unset;
    }



    /* input type range */
    input[type=range]::-webkit-slider-thumb {
        background: #3c3c3c;
        cursor: pointer;
    }
    input[type=range]::-moz-range-thumb {
        background: #3c3c3c;
        cursor: pointer;
    }
    input[type=range]::-ms-thumb {
        background: #3c3c3c;
        cursor: pointer;
    }
    .croppie-container .cr-slider-wrap{
        width: 300px !important;
    }



    /* input type file */
    input[type=file] {
        display: none;
    }




    .loader {
        width: 60px;
      }
      
      .loader-wheel {
        animation: spin 1s infinite linear;
        border: 2px solid rgba(30, 30, 30, 0.5);
        border-left: 4px solid #fff;
        border-radius: 50%;
        height: 50px;
        margin-bottom: 10px;
        width: 50px;
      }
      
      .loader-text {
        color: #fff;
        font-family: arial, sans-serif;
      }
      
      .loader-text:after {
        content: 'Loading';
        animation: load 2s linear infinite;
      }
      
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      
      @keyframes load {
        0% {
          content: 'Loading';
        }
        33% {
          content: 'Loading.';
        }
        67% {
          content: 'Loading..';
        }
        100% {
          content: 'Loading...';
        }









}