@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

/*:not(i) {
    font-family: 'Droid Arabic Kufi' ;
    font-weight: normal;
    font-style: normal;
    font-size:12px;
}*/

:root {
    --gray: #767676;
    --color2: #ccc;
    --bgcolor: #f3f3f5;
}

:focus {
    outline: none !important;
}

.subForm {
    padding: 15px 0;
}

.hidden {
    display: none;
}

table {
    border-spacing: 0;
}

#grdDocuments > tbody >  tr {
    height: 50px;
}

@media(max-width:1200px) {
    .icon {
        max-width: 25% !important;
        flex-basis: 25% !important;
    }
}

@media(max-width:992px) {
    .icon {
        max-width: 33.33% !important;
        flex-basis: 33.33% !important;
    }
}

@media(max-width:768px) {
    .icon {
        max-width: 50% !important;
        flex-basis: 50% !important;
    }

    .button.save:after, .button.print:after, .button.download:after {
        display: none;
    }

    .fieldsGroup {
        display:block !important;
    }
}

@media(max-width:568px) {
    .icon {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}

.main-title {
    font-family: 'Droid Arabic Kufi';
    font-size: 16px;

    font-weight:bold;
}

.separator {
    width:5px;
}

.sub-title {
    font-family: 'Droid Arabic Kufi';
    font-size: 14px;
    
    font-weight: bold;
}

.dateFeild
{
    width:75px;
    }


.closetabbtn {
    padding: 10px;
    height: 30px;
    width: 30px;
    text-indent: -999px;
    background: #000 url('../images/closefolder.png') no-repeat center center;
    background-size: 16px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    color: #fff !important;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}



.logoutbtn {
    padding: 10px;
    height: 30px;
    width: 30px;
    text-indent: -999px;
    background: #000 url('../images/simplegrey_19.png') no-repeat center center;
    background-size: 16px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    color: #fff !important;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

    .logoutbtn:hover {
        background: #f68b1e url('../images/simplegrey_19.png') no-repeat center center;
        background-size: 16px;
    }

.banner {
    width: 100%;
    margin: 5px 0px;
    background-color: #4b4b4b;
    color: #fff;
    min-height: 35px;
    padding: 5px 10px;
}

    .banner .button {
        border: 1px solid #fff;
    }



.FixedHeader {
    position: relative;
    font-weight: bold;
    height: 50px;
    margin-top: -50px;
    width: 100% !important;
    background: var(--color1);
    color: #fff;
}

    .FixedHeader th a {
        color:#fff !important;
    }
    
    .grdDocuments {
        table-layout: fixed;
        width: 100% !important;
    }

.grdDocuments tr {
    height:32px !important;
    margin:5px 0px;
    border:solid #ccc 1px;
}

.grdDocuments td {
    word-wrap: break-word;
    white-space: normal;
}

#grdDocumentsDiv {
    overflow: auto;
}

input[type="text"], input[type="password"], input[type="numbers"], textarea {
    border-radius: 5px;
    border: 1px #ccc solid;
    padding: 5px 10px;
}

select {
    border-radius: 3px;
    border: 1px #ccc solid;
    padding: 0px 10px;

}

.bar {
    padding:5px 10px;
    width:100%;
    display:block;
}


#grdDocuments .docID {
    width:65px;
}

#grdDocuments .docName {
    width: 200px;
}

#grdDocuments .col25 {
    width: 25px;
}

#grdDocuments .col50 {
    width: 50px;
}

#grdDocuments .col85 {
    width: 85px;
}

#grdDocuments .col100 {
    width: 100px;
}

@media (max-width: 991px) {
    #tdFolders {
        width:100%;
        display:block;
        position:absolute;
        z-index:100;
    }

    #grdDocuments .docID {
        width: 65px;
    }

    #grdDocuments .docName {
        width: calc(100% - 75px);
    }

    #grdDocuments .col25 {
        display:none;
    }

    #grdDocuments .col50 {
        display: none;
    }

    #grdDocuments .col85 {
        display: none;
    }

    #grdDocuments .col100 {
        display: none;
    }
    

        .button.search:after {
            content: "\f002";
            font-family: "Font Awesome 5 Free";
            
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.advanced-search:after {
            content: "\f00e";
            font-family: "Font Awesome 5 Free";
            
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }


        .button.add:after {
            content: "\f477";
            font-family: "Font Awesome 5 Free";
            
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.save:after {
            content: "\f0c7";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.print:after {
            content: "\f02f";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.delete:after {
            content: "\f2ed";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.pdf:after {
            content: "\f1c1";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.download:after {
            content: "\f019";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.scan:after {
            content: "\f1c5";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

        .button.send:after {
            content: "\f1d8";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

    #orderLabel {
        content: "";
        font-size: 0px;
        color: #fff;
    }

        #orderLabel:after {
            content: "\f0dc";
            font-family: "Font Awesome 5 Free";
            vertical-align: middle;
            font-weight: 900;
            font-size: 16px;
        }

    #txtSearch {
        /*width: 50%;*/
    }

    #drpSortBy {
        width:100px;
    }
}

i.fas.fa-trash-alt {
    color: #e41212;
    }

    i.fas.fa-pen {
        color: #3184c7;
    }
    
    i.fas.fa-pen-square {
    color: var(--color1);
    }


    /*-------------------------------
    Client Copied Theme
    ---------------------------------*/

/* Colors */
    .button 
    {
        background-color: var(--color1) !important;
        color: #fff !important;
        line-height: 20px;
        display: inline-block;
        min-width: 12px;
        min-height: 20px;
        padding: 2px 10px;
        cursor:pointer;
        border-radius: 5px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        box-shadow:none !important;
        position:relative;
    }

    
        .button:hover {
            background: transparent !important;
            color: var(--color1) !important;
        }
        .button:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--color1);
            opacity: 0;
            visibility: hidden;
            transition: all 210ms ease;
            border-radius: 5px;
            width:100%;
            height:100%;
        }

        .button:hover:before {
            opacity: 0.1;
            visibility: visible;
        }

        .button i {
            margin-top: 4px;
        }



.button-shaddow {
    box-shadow: 0 10px 30px 0px rgba(0, 70, 127, 0.5);
    -moz-box-shadow: 0 10px 30px 0px rgba(0, 70, 127, 0.5);
    -webkit-box-shadow: 0 10px 30px 0px rgba(0, 70, 127, 0.5);
    -o-box-shadow: 0 10px 30px 0px rgba(0, 70, 127, 0.5);
    -ms-box-shadow: 0 10px 30px 0px rgba(0, 70, 127, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}


.font-color {
    color: var(--color1);
}

.sub-font-color {
    color: var(--color2);
}

/* Hyper Links */

a {
    color: var(--color1);
    /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    /* ...and now for the proper property */
    transition: .5s;
    text-decoration: none;
}

    a:hover {
        color: var(--color2);
        text-decoration: none;
    }


    a:active {
        color: var(--color2);
    }


.search_icon {
    background-color: var(--color1) !important;
    color: #fff;
}

.ms_top_search .form-control {
    border: 1px solid var(--color1) !important;
}

.ms_btn {
    background-color: var(--color1) !important;
}

    .ms_btn:hover {
        background-color: var(--color2) !important;
        color: var(--color1) !important;
        box-shadow: 0px 0px 20px 0px var(--color1);
    }


.ms_nav_wrapper ul li a:hover,
.ms_nav_wrapper ul li a.active {
    background-color: var(--color1) !important;
    background-position: 0px 0px;
    color: #ffffff;
}

@media (max-width: 991px) {
    .ms_nav_close i:hover {
        color: var(--color1) !important;
    }

    .ms_nav_close i {
        color: var(--color1) !important;
    }
}

.ms_top_right .ms_top_lang:hover {
    color: var(--color1) !important;
}

.ms_top_right .ms_top_lang {
    color: var(--color1) !important;
}

.ms_nav_wrapper ul li a:hover,
.ms_nav_wrapper ul li a.active {
    background-color: var(--color1) !important;
    background-position: 0px 0px;
    color: #ffffff;
}

    .ms_nav_wrapper ul li a:hover:after,
    .ms_nav_wrapper ul li a.active:after {
        background-color: var(--color1);
    }


.icon {
    float: left;
    text-align: center;
    width: 100px;
    margin: 10px 25px;
    border-radius: 5px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 10px;
    color: var(--gray) !important;
}

    .icon a div i {
        font-size: 55px;
    }

    .icon a div {
        height: 70px;
        width:100%;
    }

    .initialsIcon {
        width: 50px !important;
        height: 50px !important;
        background-color: var(--gray);
        border-radius: 25px;
        font-size: 20px !important;
        color: #fff;
        text-align: center !important;
        margin: auto 5px;
        line-height: 50px !important;
        display: inline-block !important;
    }

    .initialsIcon i {
        font-size: 20px !important;
        margin-top: 14px;
    }

#tabs li .ui-icon-close {
    background: transparent !important;
    opacity:0.7;
    
}

#tabs li .ui-icon-close:hover {
    opacity:1;
    background-color:transparent !important;
}

    #tabs li .ui-icon-close:before {
        text-indent: 0;
        font-size: 12px;
        position: absolute;
        right: -6px;
        top: 1px;
        content: '\f00d';
        font-family: "Font Awesome\ 5 Free" !important;
        width: 20px;
        height: 20px;
        color: #757575;
        z-index: 99991;
        font-weight: 900;
    }

body[dir='rtl'] #tabs li .ui-icon-close:before {
    right: unset !important;
    left: -6px !important;
}
    #tabs li.ui-tabs-active.ui-state-active .ui-icon-close:before {
    color: #fff !important;
}


.pnlHeader {
    display: flex;
    align-items: center;
    padding: 20px;
}

.pnlTitle span {
    font-weight: 100;
    font-size: 21px;
}

#listBtn {
    font-weight: bold;
}

body[dir="rtl"] #listBtn i {
    transform: rotate(180deg);
}

div#pnlDetails {
    display: flex;
    flex-direction: column;
}

.pnlControl {
    margin: 0 0 0 auto;
}

body[dir="rtl"] .pnlControl {
    margin: 0 auto 0 0;
}

.pnlWrapper {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    padding:5px;
}

.pnl {
    background: var(--bgcolor);
    padding-left: 15px;
    padding-right: 0px;
    border-radius: 5px;
    margin: 10px 0;
    display: inline-block;
    width: 100%;
}

body[dir="rtl"] .pnl{
    padding-right:15px;
    padding-left:0px;
}

.flex-container .pnl {
    width: 50%;
}

.pnlWrapper > .pnl {
    margin-top: 0;
}

.pnl h3 {
    padding: 0;
    margin: 0 0 20px;
    font-size: 16px;
}