@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/*  #########################################################################################
     #########################################################################################
     ########################################Sign In start #################################################
     #########################################################################################
     #########################################################################################
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-family: 'Droid Arabic Kufi' ;
}
html#signinHTML,
body#signInBody {
    height: 100%;
}

    body#signInBody {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
    }

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

/*  ######################################################################################### 
    #########################################################################################
     ###################################### Sign in END ###################################################
     #########################################################################################
     #########################################################################################
*/

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #fbfbfb;
    /*color: #fff;*/
    transition: all 0.3s;
}

    #sidebar.active {
        min-width: 90px;
        max-width: 90px;
        text-align: center;
    }

        #sidebar.active .sidebar-header h3,
        #sidebar.active .CTAs {
            display: none;
        }

        #sidebar.active .sidebar-header strong {
            display: block;
        }

    #sidebar ul li a {
        text-align: left;
        color: #605e5f;
    }

    #sidebar.active ul li a {
        padding: 20px 10px;
        text-align: center;
        font-size: 0.8em;
    }

        #sidebar.active ul li a i {
            margin-right: 0;
            display: block;
            font-size: 1.8em;
            margin-bottom: 5px;
        }

    #sidebar.active ul ul a {
        padding: 10px !important;
    }

    #sidebar.active .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar .sidebar-header {
        padding: 20px;
        background: #fbfbfb;
    }

        #sidebar .sidebar-header strong {
            display: none;
            font-size: 1.8em;
        }

    #sidebar ul.components {
        padding: 20px 0;
        /*border-bottom: 1px solid #47748b;*/
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

        #sidebar ul li a:hover {
            color: #6b0954;
            background: #fff;
        }

        #sidebar ul li a i {
            margin-right: 10px;
        }

    #sidebar ul li.active > a {
         
        color: #fff !important;
        background: #6b0954;
    }
    a[aria-expanded="true"] {
        color: #fff !important;
        background: #605e5f;
    }
        a[aria-expanded="true"]:hover {
            color: #fff !important;
            background: #605e5f !important;
        }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    /*right: 20px;*/
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #dfdfdf; 
}

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    color: #6b0954;
}

a.article,
a.article:hover {
    background: #605e5f !important;
    color: #fff !important;
}
 
/*
    ##############################################
    Starts DASHBOARD
    ##############################################

*/

body {
    font-size: .875rem;
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 60px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 5rem;
    }
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

/*@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}*/

.sidebar .nav-link {
    font-weight: 500;
    color: #d2d2d2;
}

    .sidebar .nav-link .feather {
        margin-right: 4px;
        color: #d2d2d2;
    }

.sidebar li.active {
    background-color: #d2d2d2;

}
    .sidebar li.active a.nav-link {
        color: #000000;
    }

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather,
.sidebar li:hover {
    color: #fff;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

    .form-control-dark:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    }

/*
    ##############################################
   Ends DASHBOARD
    ##############################################

*/




/* Shrinking the sidebar from 250px to 80px and center aligining its content*/



/* ---------------------------------------------------
    CONTENT STYLE
    
    https://bootstrapious.com/p/bootstrap-sidebar
----------------------------------------------------- */
.body-content {
margin-top:90px;
}
#content {
    width: 100%;
    /*padding: 10px;*/
    min-height: 100vh;
    transition: all 0.3s;
}
.w-95 {
    width: 95% !important;
}
.w-85 {
    width: 85% !important;
}
i.fab.fa-whatsapp {
    color: white;
    background-color: #25D366;
    padding: 3px;
    border-radius: 3px;
}
/* ---------------------------------------------------
    MEDIAQUERIES
    https://bootstrapious.com/p/bootstrap-sidebar
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }

    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        /*right: 50%;*/
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active {
        margin-left: 0 !important;
    }
        
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

        #sidebar ul li a span {
            font-size: 0.85em;
        }

        #sidebar ul li a i {
            margin-right: 0;
            display: block;
        }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}


/* 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;
}
 */
/*  ######################################################################################### 
    #########################################################################################
     ###################################### dashboard Start ###################################################
     #########################################################################################
     #########################################################################################
*/
body {
    font-size: .875rem;
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/*
 * Sidebar
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; 
    padding: 48px 0 0; 
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 1px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; 
}

 */

/*@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}*/
 
/*
 * Content
 */

[role="main"] {
    padding-top: 133px; /* Space for fixed navbar */
}

@media (min-width: 768px) {
    [role="main"] {
        padding-top: 48px; /* Space for fixed navbar */
    }
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: 1.25rem;
    
    /*background-color: rgba(0, 0, 0, .25);*/ 
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

    .form-control-dark:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    }
/*  ######################################################################################### 
    #########################################################################################
     ###################################### dashboard end ###################################################
     #########################################################################################
     #########################################################################################
*/

/*
    ############################################
*/

.CustomFont {
    font-size: 15px !important;
    font-family: monospace !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(66 179 197) !important;
}

.White {
    background: white !important;
}

.LeftTextDir {
    direction: ltr;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}
/*This style related with only Kendo-RTL*/
.k-rtl .k-dropdown-wrap .k-select, .k-rtl .k-numeric-wrap .k-select, .k-rtl span.k-picker-wrap .k-select {
    border-width: 0;
}

.k-cancel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05e";
}

.k-filter::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0b0";
}

.k-edit::before, .k-update::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f305";
}

.k-list-container .k-list {
    height: 100%;
}

.k-grid th {
    /* white-space: pre-line !important;*/
}

.sticky-top {
    z-index: 200 !important;
}

.BACKGROUND {
    background-color: #0e1a35 !important;
}

/*
    ############################ drop down for notification 
*/


.navbar-default .dropdown-menu.notify-drop {
    min-width: 330px;
    background-color: #fff;
    min-height: 360px;
    max-height: 360px;
}

    .navbar-default .dropdown-menu.notify-drop .notify-drop-title {
        border-bottom: 1px solid #e2e2e2;
        padding: 5px 15px 10px 15px;
    }

    .navbar-default .dropdown-menu.notify-drop .drop-content {
        min-height: 280px;
        max-height: 280px;
        overflow-y: scroll;
    }

        .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track {
            background-color: #F5F5F5;
        }

        .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }

        .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb {
            background-color: #ccc;
        }

        .navbar-default .dropdown-menu.notify-drop .drop-content > li {
            border-bottom: 1px solid #e2e2e2;
            padding: 10px 0px 5px 0px;
        }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) {
                background-color: #fdf2f2;
            }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li:after {
                content: "";
                clear: both;
                display: block;
            }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li:hover {
                background-color: #fcfcfc;
            }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li:last-child {
                border-bottom: none;
            }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li .notify-img {
                float: left;
                display: inline-block;
                width: 45px;
                height: 45px;
                margin: 0px 0px 8px 0px;
            }

    .navbar-default .dropdown-menu.notify-drop .allRead {
        margin-right: 7px;
    }

    .navbar-default .dropdown-menu.notify-drop .rIcon {
        float: right;
        color: #999;
    }

        .navbar-default .dropdown-menu.notify-drop .rIcon:hover {
            color: #333;
        }

    .navbar-default .dropdown-menu.notify-drop .drop-content > li a {
        font-size: 12px;
        font-weight: normal;
    }

    .navbar-default .dropdown-menu.notify-drop .drop-content > li {
        font-weight: bold;
        font-size: 11px;
    }

        .navbar-default .dropdown-menu.notify-drop .drop-content > li hr {
            margin: 5px 0;
            width: 70%;
            border-color: #e2e2e2;
        }

    .navbar-default .dropdown-menu.notify-drop .drop-content .pd-l0 {
        padding-left: 0;
    }

    .navbar-default .dropdown-menu.notify-drop .drop-content > li p {
        font-size: 11px;
        color: #666;
        font-weight: normal;
        margin: 3px 0;
    }

        .navbar-default .dropdown-menu.notify-drop .drop-content > li p.time {
            font-size: 10px;
            font-weight: 600;
            top: -6px;
            margin: 8px 0px 0px 0px;
            padding: 0px 3px;
            border: 1px solid #e2e2e2;
            position: relative;
            background-image: linear-gradient(#fff,#f2f2f2);
            display: inline-block;
            border-radius: 2px;
            color: #B97745;
        }

            .navbar-default .dropdown-menu.notify-drop .drop-content > li p.time:hover {
                background-image: linear-gradient(#fff,#fff);
            }

    .navbar-default .dropdown-menu.notify-drop .notify-drop-footer {
        border-top: 1px solid #e2e2e2;
        bottom: 0;
        position: relative;
        padding: 8px 15px;
    }

        .navbar-default .dropdown-menu.notify-drop .notify-drop-footer a {
            color: #777;
            text-decoration: none;
        }

            .navbar-default .dropdown-menu.notify-drop .notify-drop-footer a:hover {
                color: #333;
            }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

@font-face {
    font-size: large;
    /*font-family: 'ElMessiri-Regular';
    src: url('../../fonts/ElMessiri-Regular.ttf') format('truetype');*/
}

body {
    background-color: #eef9fa !important;
    /*background-image: url('../../Content/images/islamic background  chandelier lamp.png');
      
        background-attachment: fixed;

        background-image: url('https://cutewallpaper.org/21/html-page-background-image/How-to-set-two-background-images-for-an-HTML-page-.gif');*/
    /*//background-repeat: no-repeat;*/
}

.BodyRender {
    /* border: 2px solid rgb(144, 154, 153); */
    border-radius: 5px;
    padding-right: 20px;
    padding-top: 10px;
    /* padding-bottom: 10px; */
    padding-bottom: -13px;
    background: white;
    opacity: 0.8;
}