/* Arabic font ===================== */

/* Navbar ====================================== */

@import url(materialize.css);


@font-face {
    font-family: 'CairoFont';
    src: url('../../css/Cairo-Bold.ttf') format('truetype');
}

.dropdown-menuAlert {
    margin-top: 0px !important;
    border-radius: 10px !important;
}

.Alert-info {
    display: inline-block;
    position: relative;
    top: 3px;
    right: 20px;
    font-family: CairoFont;
}
.Alert_P {
    color: #000;
    font-size: 15px;
    text-align: right;
    font-family: CairoFont;
    font-weight: 800;
}

.Alert_li {
    padding-top: 0px;
    padding-bottom: 5px;
    border-bottom: 2px solid lightgrey;
}

.AlertDiv {
    white-space: pre-line;
    height: 440px;
    width: 315px;
    overflow: auto;
    float: left;
    position: relative;
    margin-left: -5px;
}

.AlertDiv2 {
    width: 300px;
    float: left;
    padding: 0 0 0 5px;
    position: relative;
    float: left;
    border-right: 2px #f8f7f3 solid;
    /* background-image:url(images/bubble.png); */
    /* background-color: black; */
}

.navbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
}

    .navbar .navbar-brand {
        font-size: 18px;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        float: left;
    }

    .navbar .navbar-custom-right-menu {
        float: right;
    }

    .navbar .navbar-toggle {
        text-decoration: none;
        color: #fff;
        width: 20px;
        height: 20px;
        margin-top: -4px;
        margin-right: 17px;
    }

        .navbar .navbar-toggle:before {
            content: '\E8D5';
            font-family: 'Material Icons';
            font-size: 26px;
        }

    .navbar .navbar-collapse.in {
        overflow: visible;
    }

.ls-closed .sidebar {
    margin-right: -300px;
}

.ls-closed section.content {
    /* margin-left: 15px;
    margin-right: 15px;*/
}

.ls-closed section.content2 {
    /* margin-left: 15px;
    margin-right: 15px;*/
}



.ls-closed .bars:after, .ls-closed .bars:before {
    font-family: 'Material Icons';
    font-size: 24px;
    position: absolute;
    top: 18px;
    right: 20px;
    left: auto;
    margin-left: 10px;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.ls-closed .bars:before {
    content: '\E5D2';
    /*-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);*/
}

.ls-closed .bars:after {
    content: '\E5C4';
    /*-moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);*/
}

.ls-closed .navbar-brand {
    margin-right: 30px;
}

.overlay-open .bars:before {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.overlay-open .bars:after {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.navbar-header {
    padding: 10px 7px;
    max-height: 55px;
}

    .navbar-header .bars {
        float: right;
        text-decoration: none;
        right: 0px;
    }

.navbar-nav > li > a {
    padding: 7px 7px 2px 7px;
    margin-left: 5px;
}

.lgt {
    margin-right: 5px;
    margin-left: 5px;
    float: right; /* Ar only */
}

.navbar-nav .dropdown-menu {
    margin-top: 0px !important;
    border-radius: 10px !important;
}

.label-count {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    background-color: #e0c900;
    padding: 0 4px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    color: #052e77;
}



.col-teal .navbar .navbar-brand,
.col-teal .navbar .navbar-brand:hover,
.col-teal .navbar .navbar-brand:active,
.col-teal .navbar .navbar-brand:focus {
    color: #fff;
}

.col-teal .navbar .nav > li > a:hover,
.col-teal .navbar .nav > li > a:focus,
.col-teal .navbar .nav .open > a,
.col-teal .navbar .nav .open > a:hover,
.col-teal .navbar .nav .open > a:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

.col-teal .navbar .nav > li > a {
    color: #fff;
}

.col-teal .navbar .bars {
    float: left;
    padding: 10px 20px;
    font-size: 22px;
    color: #fff;
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 4px;
}

    .col-teal .navbar .bars:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

/*===== LOGO =====*/

.logo {
    float: left !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .logo img {
        height: 35px;
        width: 187px;
        float: right;
        margin-right: 10px;
        margin-left: 10px;
        margin-top: -5px;
    }

.user {
    position: relative;
    top: -10px;
}

    .user img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }



/* Material Icons ============================== */
.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-26 {
    font-size: 26px;
}

.material-icons.md-28 {
    font-size: 28px;
}

.material-icons.md-30 {
    font-size: 30px;
}

.material-icons.md-32 {
    font-size: 32px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Helpers ===================================== */

.bg-teal {
    background-color: #53a0ed !important;
    color: #fff;
}

    .bg-teal:hover {
        background-image: linear-gradient(#086dd0, #052e77) !important;
        /*background-image: linear-gradient(#30a8e4,#086dd0) !important;*/
        background-color: #052e77 !important;
    }

    .bg-teal .content .text {
        color: #fff !important;
    }

.col-teal {
    color: #052e77 !important;
}

.card .bg-teal h2 {
    color: #ffffff !important;
}

/* Custom Animate ============================== */
@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/* Materialize Css | Taken from www.materializecss.com */
/* Media ======================================= */
@media (max-width: 767px) {
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-right: 35px;
        width: 73%;
    }

    .navbar .navbar-header {
        display: inline-block;
        margin-bottom: -6px;
        /*width: calc(100% + 30px);*/
    }

    .navbar .nav > li {
        display: inline-block;
        float: right;
    }

    .navbar .navbar-nav {
        margin-top: -5px;
        margin-bottom: 1px;
        margin-right: -7px;
        float: right;
    }

    #logout {
        float: left;
    }

    #userInfo {
        padding: 5px;
    }

    .navbar .navbar-nav .open .dropdown-menu {
        background-color: #fff;
        position: absolute;
    }

    .navbar .dropdown-menu {
        margin-left: -50px;
    }

    .navbar .js-right-sidebar {
        margin-top: 15px;
    }

    .dt-buttons {
        float: none !important;
        text-align: center;
        margin-bottom: 15px;
    }

    .panel-switch-btn {
        top: 12px;
        right: 0 !important;
    }

    .logo img {
        height: 15px;
        width: 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1169px) {
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: 20px;
    }
}

@media (min-width: 768px) {
    .navbar-nav > li {
        float: right !important;
    }

    .navbar-right {
        float: left !important;
    }
}

/* General ===================================== */
body {
    font-size: 15px;
    background-color: #e9e9e9;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-family: 'Cairo', sans-serif;
    padding-bottom: 100px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

button,
input,
select,
a {
    outline: none !important;
}

.no-animate {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

section.content {
    margin: 142px 25px 0px 15px;
    /*-moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
}

section.contentHideMenu {
    margin: 12px 12px 0px 12px;
    /*-moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
}

section.content2 {
    margin: 0px 25px 0px 15px;
    /*-moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
}

div.content {
    margin: 60px 315px 0px 15px;
    /*-moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
}

div.content2 {
    margin: 0px 315px 0px 15px;
    /*-moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;*/
}


/* Buttons ===================================== */
.btn:focus {
    outline: none !important;
}

.btn-circle {
    border: none;
    outline: none !important;
    overflow: hidden;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

    .btn-circle i {
        font-size: 18px;
        position: relative;
        left: -1px;
    }

.btn-link {
    font-weight: bold;
    color: #333;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

    .btn-link:active, .btn-link:focus {
        text-decoration: none;
        color: #333;
    }

    .btn-link:hover {
        text-decoration: none;
        color: #333;
        background-color: #ddd;
    }

.btn-circle-lg {
    border: none;
    outline: none !important;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    border-radius: 50% !important;
}

    .btn-circle-lg i {
        font-size: 26px !important;
        position: relative !important;
        left: 0px !important;
        top: 6px !important;
    }

.btn:not(.btn-link):not(.btn-circle) {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: none;
    font-size: 13px;
    outline: none;
}

    .btn:not(.btn-link):not(.btn-circle):hover {
        outline: none;
    }

    .btn:not(.btn-link):not(.btn-circle) i {
        font-size: 20px;
        position: relative;
        top: 3px;
    }

    .btn:not(.btn-link):not(.btn-circle) span {
        position: relative;
        top: -2px;
        margin-left: 3px;
    }

.btn-warning,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
    background-color: #ff9600 !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
    background-color: #fb483a !important;
}

.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
    background-color: #00b0e4 !important;
}

.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: #2b982b !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #086dd0 !important;
}

.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
    background-color: #fff !important;
}

.btn-group,
.btn-group-vertical {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

    .btn-group .btn,
    .btn-group-vertical .btn {
        box-shadow: none !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

        .btn-group .btn .caret,
        .btn-group-vertical .btn .caret {
            position: relative;
            bottom: 1px;
        }

    .btn-group .btn-group,
    .btn-group-vertical .btn-group {
        box-shadow: none !important;
    }

    .btn-group .btn + .dropdown-toggle,
    .btn-group-vertical .btn + .dropdown-toggle {
        border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    }


/* Bootstrap Tags Input ======================== */
.bootstrap-tagsinput {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}



/* Multi Select ================================ */
.ms-container {
    width: auto !important;
}

    .ms-container .ms-list {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -ms-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        -ms-border-radius: 0 !important;
        border-radius: 0 !important;
    }

        .ms-container .ms-list.ms-focus {
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            -ms-box-shadow: none !important;
            box-shadow: none !important;
        }

    .ms-container .ms-selectable,
    .ms-container .ms-selection {
        min-width: 250px !important;
    }

        .ms-container .ms-selectable li.ms-hover,
        .ms-container .ms-selection li.ms-hover {
            color: #000000 !important;
            background-color: #e6e6e6 !important;
        }

        .ms-container .ms-selectable li.ms-elem-selectable,
        .ms-container .ms-selectable li.ms-elem-selection,
        .ms-container .ms-selection li.ms-elem-selectable,
        .ms-container .ms-selection li.ms-elem-selection {
            padding: 9px 15px 6px 15px !important;
        }

    .ms-container .ms-optgroup-label {
        padding: 5px 0 0 8px !important;
    }

/* Card ======================================== */
.card {
    background: #fff;
    min-height: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-bottom: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 5px;
    padding-top: 10px;
}

    .card .card-inside-title {
        margin-top: 25px;
        margin-bottom: 15px;
        display: block;
        font-size: 15px;
        color: #000;
    }

        .card .card-inside-title small {
            color: #999;
            display: block;
            font-size: 11px;
            margin-top: 5px;
        }

            .card .card-inside-title small a {
                color: #777;
                font-weight: bold;
            }

        .card .card-inside-title:first-child {
            margin-top: 0;
        }

    .card .bg-teal,
    {
        border-bottom: none !important;
        color: #fff !important;
    }

        .card .bg-teal h2,
        .card .bg-teal small,
        .card .bg-teal .material-icons,
        {
            color: #fff !important;
        }

        .card .bg-teal .badge,
        {
            background-color: #fff;
            color: #555;
        }

    .card .header {
        color: #555;
        padding: 10px;
        position: relative;
        border-bottom: 1px solid rgba(204, 204, 204, 0.35);
        border-radius: 5px 5px 0px 0px;
    }

        .card .header .header-dropdown {
            position: absolute;
            top: 20px;
            left: 15px;
            list-style: none;
        }

            .card .header .header-dropdown .dropdown-menu li {
                display: block !important;
            }

            .card .header .header-dropdown li {
                display: inline-block;
            }

            .card .header .header-dropdown i {
                font-size: 20px;
                color: #999;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;
            }

                .card .header .header-dropdown i:hover {
                    color: #000;
                }

        .card .header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #086dd0;
        }

            .card .header h2 small {
                display: block;
                font-size: 12px;
                margin-top: 5px;
                color: #999;
                line-height: 15px;
            }

                .card .header h2 small a {
                    font-weight: bold;
                    color: #777;
                }

        .card .header .col-xs-12 h2 {
            margin-top: 5px;
        }

    .card .body {
        font-size: 16px;
        color: #555;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-right: 10px;
    }

        .card .body .col-xs-1,
        .card .body .col-sm-1,
        .card .body .col-md-1,
        .card .body .col-lg-1 {
            margin-bottom: 14px;
            padding-right: 30px;
        }

        .card .body .col-xs-2,
        .card .body .col-sm-2,
        .card .body .col-md-2,
        .card .body .col-lg-2 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-3,
        .card .body .col-sm-3,
        .card .body .col-md-3,
        .card .body .col-lg-3 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-4,
        .card .body .col-sm-4,
        .card .body .col-md-4,
        .card .body .col-lg-4 {
            /*margin-bottom: 2px;*/
            padding-right: 12px;
        }

        .card .body .col-xs-5,
        .card .body .col-sm-5,
        .card .body .col-md-5,
        .card .body .col-lg-5 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-6,
        .card .body .col-sm-6,
        .card .body .col-md-6,
        .card .body .col-lg-6 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-7,
        .card .body .col-sm-7,
        .card .body .col-md-7,
        .card .body .col-lg-7 {
            margin-bottom: 38px;
            padding-right: 12px;
        }

        .card .body .col-xs-8,
        .card .body .col-sm-8,
        .card .body .col-md-8,
        .card .body .col-lg-8 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-9,
        .card .body .col-sm-9,
        .card .body .col-md-9,
        .card .body .col-lg-9 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-10,
        .card .body .col-sm-10,
        .card .body .col-md-10,
        .card .body .col-lg-10 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-11,
        .card .body .col-sm-11,
        .card .body .col-md-11,
        .card .body .col-lg-11 {
            margin-bottom: 14px;
            padding-right: 12px;
        }

        .card .body .col-xs-12,
        .card .body .col-sm-12,
        .card .body .col-md-12,
        .card .body .col-lg-12 {
            margin-bottom: 38px;
            padding-right: 12px;
        }

/* Infobox ===================================== */
.info-box {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: 65px;
    display: flex;
    cursor: default;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    top: 50px;
    border-radius: 0px 10px 0px 10px;
}

    .info-box .icon {
        display: inline-block;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.15);
        width: 50px;
    }

        .info-box .icon i {
            color: #fff;
            font-size: 30px;
            line-height: 70px;
        }

@media (min-width: 992px) and (max-width: 1200px) {
    .info-box .icon i {
        font-size: 20px;
    }
}

.info-box .icon .chart.chart-bar {
    height: 100%;
    line-height: 100px;
}

    .info-box .icon .chart.chart-bar canvas {
        vertical-align: baseline !important;
    }

.info-box .icon .chart.chart-pie {
    height: 100%;
    line-height: 123px;
}

    .info-box .icon .chart.chart-pie canvas {
        vertical-align: baseline !important;
    }

.info-box .icon .chart.chart-line {
    height: 100%;
    line-height: 115px;
}

    .info-box .icon .chart.chart-line canvas {
        vertical-align: baseline !important;
    }

.info-box .content {
    display: inline-block;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}

.info-box .content {
    text-decoration: none;
}

    .info-box .content .text {
        font-size: 18px;
        color: #555;
    }

    .info-box .content .number {
        font-weight: normal;
        font-size: 26px;
        margin-top: -4px;
        color: #555;
        text-align: center;
    }

.info-box.hover-zoom-effect .icon {
    overflow: hidden;
}

    .info-box.hover-zoom-effect .icon i {
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.info-box.hover-zoom-effect:hover .icon i {
    opacity: 0.4;
    -moz-transform: rotate(-32deg) scale(1.4);
    -ms-transform: rotate(-32deg) scale(1.4);
    -o-transform: rotate(-32deg) scale(1.4);
    -webkit-transform: rotate(-32deg) scale(1.4);
    transform: rotate(-32deg) scale(1.4);
}

.info-box.hover-expand-effect:after {
    background-color: rgba(0, 0, 0, 0.05);
    content: ".";
    position: absolute;
    right: 80px;
    top: 0;
    width: 0;
    height: 100%;
    color: transparent;
    -moz-transition: all 0.95s;
    -o-transition: all 0.95s;
    -webkit-transition: all 0.95s;
    transition: all 0.95s;
}

.info-box.hover-expand-effect:hover:after {
    width: 100%;
}

.info-box-2 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: 80px;
    display: flex;
    cursor: default;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

    .info-box-2 .icon {
        display: inline-block;
        text-align: center;
        width: 80px;
    }

        .info-box-2 .icon i {
            color: #fff;
            font-size: 50px;
            line-height: 80px;
        }

    .info-box-2 .chart.chart-bar {
        height: 100%;
        line-height: 105px;
    }

        .info-box-2 .chart.chart-bar canvas {
            vertical-align: baseline !important;
        }

    .info-box-2 .chart.chart-pie {
        height: 100%;
        line-height: 123px;
    }

        .info-box-2 .chart.chart-pie canvas {
            vertical-align: baseline !important;
        }

    .info-box-2 .chart.chart-line {
        height: 100%;
        line-height: 115px;
    }

        .info-box-2 .chart.chart-line canvas {
            vertical-align: baseline !important;
        }

    .info-box-2 .content {
        display: inline-block;
        padding: 7px 10px;
    }

        .info-box-2 .content .text {
            font-size: 13px;
            margin-top: 11px;
            color: #555;
        }

        .info-box-2 .content .number {
            font-weight: normal;
            font-size: 26px;
            margin-top: -4px;
            color: #555;
        }

    .info-box-2.hover-zoom-effect .icon {
        overflow: hidden;
    }

        .info-box-2.hover-zoom-effect .icon i {
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

    .info-box-2.hover-zoom-effect:hover .icon i {
        opacity: 0.4;
        -moz-transform: rotate(-32deg) scale(1.4);
        -ms-transform: rotate(-32deg) scale(1.4);
        -o-transform: rotate(-32deg) scale(1.4);
        -webkit-transform: rotate(-32deg) scale(1.4);
        transform: rotate(-32deg) scale(1.4);
    }

    .info-box-2.hover-expand-effect:after {
        background-color: rgba(0, 0, 0, 0.05);
        content: ".";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        color: transparent;
        -moz-transition: all 0.95s;
        -o-transition: all 0.95s;
        -webkit-transition: all 0.95s;
        transition: all 0.95s;
    }

    .info-box-2.hover-expand-effect:hover:after {
        width: 100%;
    }

.info-box-3 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: 80px;
    display: flex;
    cursor: default;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

    .info-box-3 .icon {
        position: absolute;
        right: 10px;
        bottom: 2px;
        text-align: center;
    }

        .info-box-3 .icon i {
            color: rgba(0, 0, 0, 0.15);
            font-size: 60px;
        }

    .info-box-3 .chart {
        margin-right: 5px;
    }

        .info-box-3 .chart.chart-bar {
            height: 100%;
            line-height: 50px;
        }

            .info-box-3 .chart.chart-bar canvas {
                vertical-align: baseline !important;
            }

        .info-box-3 .chart.chart-pie {
            height: 100%;
            line-height: 34px;
        }

            .info-box-3 .chart.chart-pie canvas {
                vertical-align: baseline !important;
            }

        .info-box-3 .chart.chart-line {
            height: 100%;
            line-height: 40px;
        }

            .info-box-3 .chart.chart-line canvas {
                vertical-align: baseline !important;
            }

    .info-box-3 .content {
        display: inline-block;
        padding: 7px 16px;
    }

        .info-box-3 .content .text {
            font-size: 13px;
            margin-top: 11px;
            color: #555;
        }

        .info-box-3 .content .number {
            font-weight: normal;
            font-size: 26px;
            margin-top: -4px;
            color: #555;
        }

    .info-box-3.hover-zoom-effect .icon i {
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .info-box-3.hover-zoom-effect:hover .icon i {
        opacity: 0.4;
        -moz-transform: rotate(-32deg) scale(1.4);
        -ms-transform: rotate(-32deg) scale(1.4);
        -o-transform: rotate(-32deg) scale(1.4);
        -webkit-transform: rotate(-32deg) scale(1.4);
        transform: rotate(-32deg) scale(1.4);
    }

    .info-box-3.hover-expand-effect:after {
        background-color: rgba(0, 0, 0, 0.05);
        content: ".";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        color: transparent;
        -moz-transition: all 0.95s;
        -o-transition: all 0.95s;
        -webkit-transition: all 0.95s;
        transition: all 0.95s;
    }

    .info-box-3.hover-expand-effect:hover:after {
        width: 100%;
    }

.info-box-4 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: 80px;
    display: flex;
    cursor: default;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

    .info-box-4 .icon {
        position: absolute;
        right: 10px;
        bottom: 2px;
        text-align: center;
    }

        .info-box-4 .icon i {
            color: rgba(0, 0, 0, 0.15);
            font-size: 60px;
        }

    .info-box-4 .chart {
        margin-right: 5px;
    }

        .info-box-4 .chart.chart-bar {
            height: 100%;
            line-height: 50px;
        }

            .info-box-4 .chart.chart-bar canvas {
                vertical-align: baseline !important;
            }

        .info-box-4 .chart.chart-pie {
            height: 100%;
            line-height: 34px;
        }

            .info-box-4 .chart.chart-pie canvas {
                vertical-align: baseline !important;
            }

        .info-box-4 .chart.chart-line {
            height: 100%;
            line-height: 40px;
        }

            .info-box-4 .chart.chart-line canvas {
                vertical-align: baseline !important;
            }

    .info-box-4 .content {
        display: inline-block;
        padding: 7px 16px;
    }

        .info-box-4 .content .text {
            font-size: 13px;
            margin-top: 11px;
            color: #555;
        }

        .info-box-4 .content .number {
            font-weight: normal;
            font-size: 26px;
            margin-top: -4px;
            color: #555;
        }

    .info-box-4.hover-zoom-effect .icon i {
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .info-box-4.hover-zoom-effect:hover .icon i {
        opacity: 0.4;
        -moz-transform: rotate(-32deg) scale(1.4);
        -ms-transform: rotate(-32deg) scale(1.4);
        -o-transform: rotate(-32deg) scale(1.4);
        -webkit-transform: rotate(-32deg) scale(1.4);
        transform: rotate(-32deg) scale(1.4);
    }

    .info-box-4.hover-expand-effect:after {
        background-color: rgba(0, 0, 0, 0.05);
        content: ".";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        color: transparent;
        -moz-transition: all 0.95s;
        -o-transition: all 0.95s;
        -webkit-transition: all 0.95s;
        transition: all 0.95s;
    }

    .info-box-4.hover-expand-effect:hover:after {
        width: 100%;
    }

/* Alerts ====================================== */
.alert {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    border: none;
    color: #fff !important;
}

    .alert .alert-link {
        color: #fff;
        text-decoration: underline;
        font-weight: bold;
    }

.alert-success {
    background-color: #2b982b;
}

.alert-info {
    background-color: #00b0e4;
}

.alert-warning {
    background-color: #ff9600 !important;
}

.alert-danger {
    background-color: #fb483a !important;
}

.alert-dismissible .close {
    color: #fff;
    opacity: 1;
    border: none;
    text-shadow: none;
}

/* Dialogs (SweetAlert) ======================== */
.sweet-alert {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    border-radius: 0 !important;
}

    .sweet-alert p {
        font-size: 14px !important;
    }

    .sweet-alert .sa-input-error {
        top: 23px !important;
        right: 13px !important;
    }

    .sweet-alert h2 {
        font-size: 18px !important;
        margin: 0 0 5px 0 !important;
    }

    .sweet-alert button {
        font-size: 15px !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        -ms-border-radius: 0 !important;
        border-radius: 0 !important;
        padding: 5px 20px !important;
    }

/* Checkbox & Radio ============================ */
[type="checkbox"] + label {
    padding-left: 26px;
    height: 25px;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
}

[type="checkbox"]:checked + label:before {
    top: -4px;
    left: -2px;
    width: 11px;
    height: 19px;
}



[type="checkbox"]:checked.chk-col-teal + label:before {
    border-right: 2px solid #052e77;
    border-bottom: 2px solid #052e77;
}



[type="checkbox"].filled-in:checked + label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #086dd0;
    background-color: #086dd0;
    z-index: 0;
}

[type="checkbox"].filled-in:checked + label:before {
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
}


[type="checkbox"].filled-in:checked.chk-col-teal + label:after {
    border: 2px solid #052e77;
    background-color: #052e77;
}



[type="radio"]:not(:checked) + label {
    padding-left: 26px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
}

[type="radio"]:checked + label {
    padding-left: 26px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
}



[type="radio"].radio-col-teal:checked + label:after {
    background-color: #052e77;
    border-color: #052e77;
}



[type="radio"].with-gap.radio-col-teal:checked + label:before {
    border: 2px solid #052e77;
}

[type="radio"].with-gap.radio-col-teal:checked + label:after {
    background-color: #052e77;
    border: 2px solid #052e77;
}



/* Bootstrap Select ============================ */

.bootstrap-select {
    box-shadow: none !important;
    border-bottom: 1px solid #ddd !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

    .bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle:active {
        outline: none !important;
    }

    .bootstrap-select .bs-searchbox,
    .bootstrap-select .bs-actionsbox,
    .bootstrap-select .bs-donebutton {
        padding: 0 0 5px 0;
        border-bottom: 1px solid #e9e9e9;
    }

        .bootstrap-select .bs-searchbox .form-control,
        .bootstrap-select .bs-actionsbox .form-control,
        .bootstrap-select .bs-donebutton .form-control {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            -ms-border-radius: 0;
            border-radius: 0;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            -ms-box-shadow: none !important;
            box-shadow: none !important;
            border: none;
            margin-left: 30px;
        }

    .bootstrap-select .bs-searchbox {
        position: relative;
    }

        .bootstrap-select .bs-searchbox:after {
            content: '\E8B6';
            font-family: 'Material Icons';
            position: absolute;
            top: 0;
            left: 10px;
            font-size: 25px;
        }

    .bootstrap-select ul.dropdown-menu {
        margin-top: 0 !important;
    }

    .bootstrap-select .dropdown-menu li.selected a {
        background-color: #eee !important;
        color: #555 !important;
    }

    .bootstrap-select .dropdown-menu .active a {
        background-color: transparent;
        color: #333 !important;
    }

    .bootstrap-select .dropdown-menu .notify {
        background-color: #F44336 !important;
        color: #fff !important;
        border: none !important;
    }

    .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
        margin-top: 9px;
    }

/* Tooltip & Popovers ========================== */
.tooltip {
    font-size: 13px;
}

    .tooltip .tooltip-inner {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

.popover {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

    .popover .popover-title {
        font-weight: bold;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
        background-color: #e9e9e9;
        border-bottom: 1px solid #ddd;
    }

    .popover .popover-content {
        font-size: 13px;
        color: #777;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

/* Nav Tabs ==================================== */
.nav-tabs {
    border-bottom: 2px solid #eee;
}

    .nav-tabs > li {
        position: relative;
        top: 3px;
        left: -2px;
        float: right; /* for Ar only*/
    }

        .nav-tabs > li > a {
            border: none !important;
            color: #53a0ed !important;
            font-weight: bold;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            -ms-border-radius: 0;
            border-radius: 0;
        }

            .nav-tabs > li > a:hover, .nav-tabs > li > a:active, .nav-tabs > li > a:focus {
                background-color: transparent !important;
            }

            .nav-tabs > li > a:before {
                content: '';
                position: absolute;
                left: 0;
                width: 100%;
                height: 0;
                border-bottom: 2px solid #086dd0;
                bottom: 2px;
                -moz-transform: scaleX(0);
                -ms-transform: scaleX(0);
                -o-transform: scaleX(0);
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                -moz-transition: 0.1s ease-in;
                -o-transition: 0.1s ease-in;
                -webkit-transition: 0.1s ease-in;
                transition: 0.1s ease-in;
            }

            .nav-tabs > li > a .material-icons {
                position: relative;
                top: 7px;
                margin-bottom: 8px;
            }

    .nav-tabs li.active a {
        color: #222 !important;
    }

        .nav-tabs li.active a:hover, .nav-tabs li.active a:active, .nav-tabs li.active a:focus {
            background-color: transparent !important;
        }

        .nav-tabs li.active a:before {
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }

    .nav-tabs + .tab-content {
        padding: 15px 0;
    }



    .nav-tabs.tab-col-teal > li > a:before {
        border-bottom: 2px solid #052e77;
    }



/* Thumbnails ================================== */
.thumbnail {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

    .thumbnail p:not(button) {
        color: #999999;
        font-size: 14px;
    }

    .thumbnail h3 {
        font-weight: bold;
        font-size: 17px;
    }

/* Modals ====================================== */
.modal .modal-header {
    border: none;
    padding: 25px 25px 5px 25px;
}

    .modal .modal-header .modal-title {
        font-weight: bold;
        font-size: 16px;
    }

.modal .modal-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31) !important;
    border: none;
}

    .modal .modal-content .modal-body {
        color: #777;
        padding: 15px 25px;
    }

.modal .modal-footer {
    border: none;
}



.modal-col-teal {
    background-color: #052e77;
}

    .modal-col-teal .modal-body,
    .modal-col-teal .modal-title {
        color: #fff !important;
    }

    .modal-col-teal .modal-footer {
        background-color: rgba(0, 0, 0, 0.12);
    }

        .modal-col-teal .modal-footer .btn-link {
            color: #fff !important;
        }

            .modal-col-teal .modal-footer .btn-link:hover, .modal-col-teal .modal-footer .btn-link:active, .modal-col-teal .modal-footer .btn-link:focus {
                background-color: rgba(0, 0, 0, 0.12);
            }


/* Labels ====================================== */
.label {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.label-primary {
    background-color: #1f91f3;
}

.label-success {
    background-color: #2b982b;
}

.label-info {
    background-color: #00b0e4;
}

.label-warning {
    background-color: #ff9600;
}

.label-danger {
    background-color: #fb483a;
}

/* Collapse ==================================== */
.collapse .well,
.collapse.in .well,
.collapsing .well {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin-bottom: 0;
}

/* Tables ====================================== */
.table tbody tr td, .table tbody tr th {
    padding: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.table tbody tr.primary td, .table tbody tr.primary th {
    background-color: #1f91f3;
    color: #fff;
}

.table tbody tr.success td, .table tbody tr.success th {
    background-color: #2b982b;
    color: #fff;
}

.table tbody tr.info td, .table tbody tr.info th {
    background-color: #00b0e4;
    color: #fff;
}

.table tbody tr.warning td, .table tbody tr.warning th {
    background-color: #ff9600;
    color: #fff;
}

.table tbody tr.danger td, .table tbody tr.danger th {
    background-color: #fb483a;
    color: #fff;
}

.table thead tr th {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.table-bordered {
    border-top: 1px solid #eee;
}

    .table-bordered tbody tr td, .table-bordered tbody tr th {
        padding: 10px;
        border: 1px solid #eee;
    }

    .table-bordered thead tr th {
        padding: 10px;
        border: 1px solid #eee;
    }

/* Panel ======================================= */


.panel-group .panel-col-teal {
    border: 1px solid #052e77;
}

    .panel-group .panel-col-teal .panel-title {
        background-color: #052e77 !important;
        color: #fff;
    }

    .panel-group .panel-col-teal .panel-body {
        border-top-color: transparent !important;
    }



.panel-group .panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

    .panel-group .panel .panel-title .material-icons {
        float: left;
        line-height: 16px;
        margin-right: 8px;
    }

    .panel-group .panel .panel-heading {
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

        .panel-group .panel .panel-heading a {
            display: block;
            padding: 10px 15px;
        }

            .panel-group .panel .panel-heading a:hover, .panel-group .panel .panel-heading a:focus, .panel-group .panel .panel-heading a:active {
                text-decoration: none;
            }

    .panel-group .panel .panel-body {
        color: #555;
    }

.panel-group .panel-primary {
    border: 1px solid #1f91f3;
}

    .panel-group .panel-primary .panel-title {
        background-color: #1f91f3;
    }

.panel-group .panel-success {
    border: 1px solid #2b982b;
}

    .panel-group .panel-success .panel-title {
        background-color: #2b982b;
        color: #fff;
    }

.panel-group .panel-warning {
    border: 1px solid #ff9600;
}

    .panel-group .panel-warning .panel-title {
        background-color: #ff9600;
        color: #fff;
    }

.panel-group .panel-danger {
    border: 1px solid #fb483a;
}

    .panel-group .panel-danger .panel-title {
        background-color: #fb483a;
        color: #fff;
    }



.full-body .panel-col-teal .panel-body {
    border-top-color: #fff !important;
    background-color: #052e77;
    color: #fff;
}


.full-body .panel-primary .panel-body {
    border-top-color: #fff !important;
    background-color: #1f91f3;
    color: #fff;
}

.full-body .panel-success .panel-body {
    border-top-color: #fff !important;
    background-color: #2b982b;
    color: #fff;
}

.full-body .panel-warning .panel-body {
    border-top-color: #fff !important;
    background-color: #ff9600;
    color: #fff;
}

.full-body .panel-danger .panel-body {
    border-top-color: #fff !important;
    background-color: #fb483a;
    color: #fff;
}



/* Input Group ================================= */
.input-group {
    width: 100%;
    margin-bottom: 20px;
}

    .input-group .form-line {
        display: inline-block;
        width: 100%;
        border-bottom: 2px solid #ddd;
        position: relative;
    }

        .input-group .form-line:after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            bottom: -2px;
            -moz-transform: scaleX(0);
            -ms-transform: scaleX(0);
            -o-transform: scaleX(0);
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -moz-transition: 0.25s ease-in;
            -o-transition: 0.25s ease-in;
            -webkit-transition: 0.25s ease-in;
            transition: 0.25s ease-in;
            border-bottom: 2px solid #052e77;
        }

        .input-group .form-line + .input-group-addon {
            padding-right: 10px;
            padding-left: 10px;
        }

    .input-group .help-info {
        float: right;
        font-size: 12px;
        margin-top: 5px;
        color: #999;
    }

    .input-group label.error {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        font-weight: normal;
        color: #F44336;
    }

    .input-group .form-line.error:after {
        border-bottom: 2px solid #F44336;
    }

    .input-group .form-line.success:after {
        border-bottom: 2px solid #4CAF50;
    }

    .input-group .form-line.warning:after {
        border-bottom: 2px solid #FFC107;
    }

    .input-group .form-line.focused:after {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    .input-group .form-line.focused .form-label {
        bottom: 25px;
        left: 0;
        font-size: 12px;
    }

    .input-group .input-group-addon {
        border: none;
        background-color: transparent;
        padding-left: 0;
        font-weight: bold;
    }

        .input-group .input-group-addon .material-icons {
            font-size: 18px;
            color: #555;
        }

    .input-group input[type="text"],
    .input-group .form-control {
        border: none;
        box-shadow: none;
        padding-left: 0;
    }

        .input-group .form-control:focus {
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            -ms-box-shadow: none !important;
            box-shadow: none !important;
        }

    .input-group.input-group-sm .input-group-addon i {
        font-size: 14px;
    }

    .input-group.input-group-sm .form-control {
        font-size: 12px;
    }

    .input-group.input-group-lg .input-group-addon i {
        font-size: 26px;
    }

    .input-group.input-group-lg .form-control {
        font-size: 18px;
    }

.form-control-label {
    text-align: right;
}

    .form-control-label label {
        margin-top: 8px;
    }

.form-horizontal .form-group {
    margin-bottom: 0;
}

.form-group {
    width: 100%;
    margin-bottom: 25px;
}

    .form-group .form-control {
        width: 100%;
        border: none;
        box-shadow: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
        padding-left: 0;
    }

    .form-group .help-info {
        float: right;
        font-size: 12px;
        margin-top: 5px;
        color: #999;
    }

    .form-group label.error {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        font-weight: normal;
        color: #F44336;
    }

    .form-group .form-line {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #ddd;
    }

        .form-group .form-line:after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 0;
            bottom: -1px;
            -moz-transform: scaleX(0);
            -ms-transform: scaleX(0);
            -o-transform: scaleX(0);
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -moz-transition: 0.25s ease-in;
            -o-transition: 0.25s ease-in;
            -webkit-transition: 0.25s ease-in;
            transition: 0.25s ease-in;
            border-bottom: 2px solid #1f91f3;
        }

        .form-group .form-line .form-label {
            font-weight: normal;
            color: #aaa;
            position: absolute;
            top: 10px;
            left: 0;
            cursor: text;
            -moz-transition: 0.2s;
            -o-transition: 0.2s;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }

        .form-group .form-line.error:after {
            border-bottom: 2px solid #F44336;
        }

        .form-group .form-line.success:after {
            border-bottom: 2px solid #4CAF50;
        }

        .form-group .form-line.warning:after {
            border-bottom: 2px solid #FFC107;
        }

        .form-group .form-line.focused:after {
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }

        .form-group .form-line.focused .form-label {
            top: -10px;
            left: 0;
            font-size: 12px;
        }

.form-group-sm .form-label {
    font-size: 12px;
}

.form-group-sm .form-line.focused .form-label {
    bottom: 20px;
    font-size: 10px;
}

.form-group-lg .form-label {
    font-size: 18px;
}

.form-group-lg .form-line.focused .form-label {
    bottom: 35px;
    font-size: 12px;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: transparent;
}



/* Breadcrumbs ================================= */
.breadcrumb {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: 18px;
    margin-bottom: 10px;
}

    .breadcrumb > .active {
        color: #052e77;
    }

    .breadcrumb li a {
        color: #777;
        text-decoration: none;
    }

        .breadcrumb li a .material-icons {
            font-size: 18px;
            position: relative;
            top: 4px;
        }

    .breadcrumb li .material-icons {
        font-size: 18px;
        position: relative;
        top: 4px;
    }

    .breadcrumb > li + li:before {
        content: '>\00a0';
        color: #999;
    }


.breadcrumb-col-teal li a {
    color: #052e77 !important;
    font-weight: bold;
}

.breadcrumb-bg-teal {
    background-color: #052e77 !important;
}

    .breadcrumb-bg-teal li {
        color: #fff !important;
    }

        .breadcrumb-bg-teal li a {
            color: #fff;
            font-weight: bold;
        }

            .breadcrumb-bg-teal li a .material-icons {
                padding-bottom: 8px;
            }

        .breadcrumb-bg-teal li + li:before {
            color: #fff;
        }


/* Badge | List Group Item ===================== */
.badge {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.list-group-item {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.list-group .active {
    background-color: #052e77;
    border-color: #052e77;
}

    .list-group .active:hover, .list-group .active:focus, .list-group .active:active {
        background-color: #052e77;
        border-color: #052e77;
    }

    .list-group .active .list-group-item-text {
        color: #dfe9f1;
        font-size: 13px;
    }

        .list-group .active .list-group-item-text:hover, .list-group .active .list-group-item-text:active, .list-group .active .list-group-item-text:focus {
            color: #dfe9f1;
        }

.list-group .list-group-item.active:hover .list-group-item-text, .list-group .list-group-item.active:focus .list-group-item-text, .list-group .list-group-item.active:active .list-group-item-text {
    color: #dfe9f1;
}

.list-group .list-group-item:first-child, .list-group .list-group-item:last-child {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.list-group .list-group-item .list-group-item-heading {
    font-weight: bold;
    font-size: 17px;
}

.list-group .list-group-item-success {
    background-color: #2b982b;
    border: none;
    color: #fff;
}

    .list-group .list-group-item-success:hover, .list-group .list-group-item-success:focus {
        background-color: #2b982b;
        color: #fff;
        opacity: 0.8;
    }

.list-group .list-group-item-info {
    background-color: #00b0e4;
    border: none;
    color: #fff;
}

    .list-group .list-group-item-info:hover, .list-group .list-group-item-info:focus {
        background-color: #00b0e4;
        color: #fff;
        opacity: 0.8;
    }

.list-group .list-group-item-warning {
    background-color: #ff9600;
    border: none;
    color: #fff;
}

    .list-group .list-group-item-warning:hover, .list-group .list-group-item-warning:focus {
        background-color: #ff9600;
        color: #fff;
        opacity: 0.8;
    }

.list-group .list-group-item-danger {
    background-color: #fb483a;
    border: none;
    color: #fff;
}

    .list-group .list-group-item-danger:hover, .list-group .list-group-item-danger:focus {
        background-color: #fb483a;
        color: #fff;
        opacity: 0.8;
    }

.list-group .pl-red {
    stroke: #F44336;
}

.list-group .list-group-bg-red {
    background-color: #F44336;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-red:hover, .list-group .list-group-bg-red:focus {
        background-color: #F44336;
        color: #fff;
        opacity: 0.8;
    }

.list-group .pl-pink {
    stroke: #E91E63;
}

.list-group .list-group-bg-pink {
    background-color: #E91E63;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-pink:hover, .list-group .list-group-bg-pink:focus {
        background-color: #E91E63;
        color: #fff;
        opacity: 0.8;
    }

.list-group .pl-purple {
    stroke: #9C27B0;
}

.list-group .list-group-bg-purple {
    background-color: #9C27B0;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-purple:hover, .list-group .list-group-bg-purple:focus {
        background-color: #9C27B0;
        color: #fff;
        opacity: 0.8;
    }

.list-group .pl-deep-purple {
    stroke: #673AB7;
}

.list-group .list-group-bg-deep-purple {
    background-color: #673AB7;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-deep-purple:hover, .list-group .list-group-bg-deep-purple:focus {
        background-color: #673AB7;
        color: #fff;
        opacity: 0.8;
    }

.list-group .pl-indigo {
    stroke: #3F51B5;
}

.list-group .list-group-bg-indigo {
    background-color: #3F51B5;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-indigo:hover, .list-group .list-group-bg-indigo:focus {
        background-color: #3F51B5;
        color: #fff;
        opacity: 0.8;
    }



.list-group .pl-teal {
    stroke: #052e77;
}

.list-group .list-group-bg-teal {
    background-color: #052e77;
    border: none;
    color: #fff;
}

    .list-group .list-group-bg-teal:hover, .list-group .list-group-bg-teal:focus {
        background-color: #052e77;
        color: #fff;
        opacity: 0.8;
    }



/* Pagination & Pager ========================== */
.pager li > a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    background-color: transparent;
    color: #222;
    font-weight: bold;
}

.pager li a:focus,
.pager li a:active {
    background-color: transparent;
}

.pagination .disabled a,
.pagination .disabled a:hover,
.pagination .disabled a:focus,
.pagination .disabled a:active {
    color: #bbb;
}

.pagination li.active a {
    background-color: #052e77;
}

.pagination li {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

    .pagination li a:focus,
    .pagination li a:active {
        background-color: transparent;
        color: #555;
    }

.pagination > li > a {
    border: none;
    font-weight: bold;
    color: #555;
}

.pagination > li:first-child > a,
.pagination > li:last-child > a {
    width: auto;
    height: 32px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

    .pagination > li:first-child > a .material-icons,
    .pagination > li:last-child > a .material-icons {
        position: relative;
        bottom: 2px;
    }

.pagination-sm > li:first-child > a,
.pagination-sm > li:last-child > a {
    width: 28px;
    height: 28px;
}

    .pagination-sm > li:first-child > a .material-icons,
    .pagination-sm > li:last-child > a .material-icons {
        position: relative;
        top: -1px;
        left: -6px;
        font-size: 20px;
    }

.pagination-lg > li:first-child > a,
.pagination-lg > li:last-child > a {
    width: 44px;
    height: 44px;
}

    .pagination-lg > li:first-child > a .material-icons,
    .pagination-lg > li:last-child > a .material-icons {
        font-size: 30px;
        position: relative;
        top: -3px;
        left: -10px;
    }

/* Media Object ================================ */
.media {
    margin-bottom: 25px;
}

    .media .media-body {
        color: #333;
        font-size: 13px;
    }

        .media .media-body .media-heading {
            font-size: 16px;
            font-weight: bold;
            color: #052e77;
        }

    .media img {
        box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
        width: 65px;
        height: 65px;
        border-radius: 2px;
    }


/* Waves ======================================= */

.waves-effect.waves-teal .waves-ripple {
    background: rgba(0, 150, 136, 0.5);
}


/* Dropdown Menu =============================== */
.dropdown-menu {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin-top: -35px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    left: auto !important;
    right: auto !important;
}

    .dropdown-menu .divider {
        margin: 5px 0;
    }

    .dropdown-menu .header {
        font-size: 14px;
        font-weight: bold;
        min-width: 270px;
        border-bottom: 1px solid #eee;
        text-align: center;
        padding: 4px 0 6px 0;
        color: #086dd0;
    }

    .dropdown-menu ul.menu {
        padding-left: 0;
        list-style: none;
    }

        .dropdown-menu ul.menu.tasks h4 {
            color: #333;
            font-size: 13px;
            margin: 0 0 8px 0;
        }

            .dropdown-menu ul.menu.tasks h4 small {
                float: right;
                margin-top: 6px;
            }

        .dropdown-menu ul.menu.tasks .progress {
            height: 7px;
            margin-bottom: 7px;
        }

        .dropdown-menu ul.menu .icon-circle {
            width: 36px;
            height: 36px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            display: inline-block;
        }

            .dropdown-menu ul.menu .icon-circle i {
                font-size: 18px;
                line-height: 36px;
            }

        .dropdown-menu ul.menu li {
            border-bottom: 1px solid #eee;
        }

            .dropdown-menu ul.menu li:last-child {
                border-bottom: none;
            }

            .dropdown-menu ul.menu li a {
                padding: 7px 11px;
                text-decoration: none;
                -moz-transition: 0.5s;
                -o-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;
            }

                .dropdown-menu ul.menu li a:hover {
                    background-color: #e9e9e9;
                }

        .dropdown-menu ul.menu .menu-info {
            display: inline-block;
            position: relative;
            top: 3px;
            right: 20px;
        }

            .dropdown-menu ul.menu .menu-info h4 {
                margin: 0;
                font-size: 13px;
                color: #333;
            }

            .dropdown-menu ul.menu .menu-info p {
                margin: 0;
                font-size: 11px;
                color: #aaa;
            }

                .dropdown-menu ul.menu .menu-info p .material-icons {
                    font-size: 13px;
                    color: #aaa;
                    position: relative;
                    top: 2px;
                }

    .dropdown-menu .footer a {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 5px 0 5px 0;
        font-size: 12px;
        margin-bottom: -5px;
        background-color: #086dd0;
        color: #ffffff;
        font-weight: bold;
        border-radius: 0px 0px 10px 10px;
    }

        .dropdown-menu .footer a:hover {
            background-color: #e9e9e9;
        }

    .dropdown-menu > li > a {
        padding: 7px 18px;
        color: #666;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        font-size: 14px;
        line-height: 25px;
    }

        .dropdown-menu > li > a:hover {
            background-color: rgba(0, 0, 0, 0.075);
        }

        .dropdown-menu > li > a i.material-icons {
            float: left;
            margin-right: 7px;
            margin-top: 2px;
            font-size: 20px;
        }

.dropdown-animated {
    -webkit-animation-duration: .3s !important;
    -moz-animation-duration: .3s !important;
    -o-animation-duration: .3s !important;
    animation-duration: .3s !important;
}

/* searcharea ====================== */


.searcharea {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Bootstrap Notify ============================ */
.bootstrap-notify-container {
    max-width: 320px;
    text-align: center;
}



/* Sparkline */
.sparkline {
    text-align: center;
}



/* Jquery DataTable ============================ */
.dataTables_wrapper {
    position: relative;
}

    .dataTables_wrapper select {
        border: none;
        border-bottom: 1px solid #ddd;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }

        .dataTables_wrapper select:active, .dataTables_wrapper select:focus {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            -ms-box-shadow: none;
            box-shadow: none;
        }

    .dataTables_wrapper input[type="search"] {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: none;
        font-size: 12px;
        border-bottom: 1px solid #ddd;
    }

        .dataTables_wrapper input[type="search"]:focus, .dataTables_wrapper input[type="search"]:active {
            border-bottom: 2px solid #1f91f3;
        }

    .dataTables_wrapper .dt-buttons {
        float: left;
    }

        .dataTables_wrapper .dt-buttons a.dt-button {
            background-color: #607D8B;
            color: #fff;
            padding: 7px 12px;
            margin-right: 5px;
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px;
            border: none;
            font-size: 13px;
            outline: none;
        }

            .dataTables_wrapper .dt-buttons a.dt-button:active {
                opacity: 0.8;
            }

.dt-button-info {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 400px;
    text-align: center;
    background-color: #fff;
    border: 2px solid #999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    margin-top: -100px;
    margin-left: -200px;
    z-index: 21;
}

    .dt-button-info h2 {
        color: #777;
    }

    .dt-button-info div {
        color: #777;
        margin-bottom: 20px;
    }



/* For Internet Explorer 10 ===================== */
html.ie10 .sidebar .menu .list li {
    line-height: 30px;
}

html.ie10 .sidebar .menu .list .ml-menu li.active a:not(.menu-toggle).toggled:before {
    top: 6px !important;
    line-height: 20px !important;
}

html.ie10 .sidebar .user-info .info-container {
    top: 15px;
}

html.ie10 .search-bar input[type="text"] {
    padding: 26px 60px 26px 56px;
}

html.ie10 .dropdown-menu ul.menu li a {
    margin-top: -22px;
}

html.ie10 .bs-searchbox .form-control {
    width: 90%;
}

/* For Internet Explorer 11 ===================== */
html.ie11 .sidebar .menu .list .ml-menu li.active a:not(.menu-toggle).toggled:before {
    top: 6px !important;
    line-height: 20px !important;
}

html.ie11 .sidebar .user-info .info-container {
    top: 15px;
}

html.ie11 .search-bar input[type="text"] {
    padding: 26px 60px 26px 56px;
}

html.ie11 .dropdown-menu ul.menu li a {
    margin-top: -22px;
}

html.ie11 .bs-searchbox .form-control {
    width: 90%;
}




/* Login page ============================*/


.pageBack {
    background-image: url(../images/Bgs/backimgAr.jpg);
    background-color: #052e77;
    background-size: 100% cover;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .pageBack {
        background-image: url(../images/Bgs/backimgEn.jpg);
        background-size: 100% cover;
        background-color: #00473f;
    }
}

.login .copyright {
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    color: #052e77;
}

@media (max-width: 767px) {
    .login .copyright {
        width: 100%;
        margin-top: 10%;
        text-align: center;
        bottom: 20px;
        position: relative;
        color: #ffffff;
    }
}

/*a.copyr{
  color: #ffffff !important;
}*/


.topMenu {
    margin-top: 10%;
}

@media (max-width: 767px) {
    .topMenu {
        margin-top: 10%;
        margin-left: auto;
        margin-right: 10%;
    }
}


.topMenu .btn {
    color: #ffffff;
    background-color: #052e77 !important;
    margin-right: 8px;
    margin-bottom: 13px;
    min-width: 120px;
    border-radius: 5px !important;
    background-image: linear-gradient(#2156b3, #052e77) !important;
}

    .topMenu .btn:hover,
    .topMenu .btn:active,
    .topMenu .btn:focus {
        background-color: #086dd0 !important;
        background-image: linear-gradient(#086dd0, #2156b3) !important;
        color: #ffffff;
    }


@media (max-width: 767px) {
    .topMenu .btn {
        color: #ffffff;
        background-color: #086dd0 !important;
        margin-right: 8px;
        margin-bottom: 13px;
        min-width: 120px;
    }

        .topMenu .btn:hover,
        .topMenu .btn:active,
        .topMenu .btn:focus {
            background-color: #052e77 !important;
            color: #ffffff;
        }
}

.loginSec {
    border-radius: 20px;
    border: 2px solid #ffffff;
    margin-left: auto;
    margin-right: auto;
}


.contentSec {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 50px;
    padding-left: 20px;
}

@media (max-width: 767px) {
    .contentSec {
        position: relative;
        top: 140px;
    }
}

/*.contentSec .form-control{
  color: #ffffff !important;
  background-color: #fff !important;
}*/

.contentSec .form-control {
    color: #ffffff !important;
    background-color: rgba(2 163 244) !important;
}

#server_ddl option {
    /* Whatever color  you want */
    background-color: #0a57b3;
}

#database_ddl option {
    /* Whatever color  you want */
    background-color: #0a57b3;
}


.nopadding {
    padding-right: 0px !important;
    padding-left: 0px !important;
}



.contentSec .btn-group {
    width: 100%;
}


.contentSec .btn {
    float: left;
    width: 100px;
    color: #ffffff;
    font-weight: bold;
    background-color: #052e77 !important;
    z-index: 2;
    border-radius: 5px !important;
}

    .contentSec .btn:hover {
        background-color: #086dd0 !important;
        color: #ffffff;
    }

.contentSec .dropdown-toggle {
    width: 100%;
    text-align: right;
    height: 35px;
    border-radius: 0px !important;
    border: none !important;
    border-bottom: 2px solid #ffffff !important;
    background-color: #ffffff00 !important;
    box-shadow: 0px 0px !important;
    color: #ffffff;
    font-weight: bold;
    padding-right: 0px;
    padding-left: 0px;
}

.contentSec .open > .dropdown-toggle.btn-default {
    color: #fff !important;
}


.contentSec .input-group .input-group-addon {
    padding-right: 10px;
    padding-left: 10px;
}

.contentSec .bg-teal {
    color: #fff !important;
}

.contentSec .dropdown-menu {
    width: 50%;
    border-radius: 2px !important;
    margin-top: -2px !important;
    margin-right: 10px;
}




.contentSec input {
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;*/
    border-radius: 2px !important;
    /*border-bottom:2px solid #052e77 !important;*/
    background-color: #ffffff00 !important;
}

.contentSec .input-group-addon i {
    display: block;
    width: 34px;
    height: 34px;
    padding-top: 6px;
    margin-top: 19px;
    color: #ffffff !important;
    position: relative;
    left: 35px;
}



.contentSec label {
    color: #ffffff;
}

.submitBtns {
    width: 97%;
}

    .submitBtns .btn {
        margin-top: 10px;
        text-align: center;
    }


.logoSec {
    margin-top: 16%;
}

    .logoSec img {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }



@media (max-width: 767px) {

    .logoSec {
        margin-top: 16%;
        margin-bottom: 40px;
        position: relative;
        top: -550px;
    }

        .logoSec img {
            max-width: 250px;
        }
}

@media (max-width: 767px) {
    .mobile {
        visibility: visible;
    }

    .desktop {
        visibility: hidden;
    }
}

@media (min-width: 768px) {
    .mobile {
        visibility: hidden;
    }

    .desktop {
        visibility: visible;
    }
}

.bgWite {
    background-color: #fdfdfd;
    min-height: 555px;
    border-radius: 15px 0px 0px 15px;
}

@media (max-width: 767px) {

    .bgWite {
        background-color: #fdfdfd00;
        min-height: 0px;
        border-radius: 0px 0px 0px 0px;
    }
}

.loginSec .input-group .form-line:after {
    border-bottom: 2px solid #086dd0;
}

/** this CSS for En login page**/
.ltrDir {
    direction: ltr !important;
}

    .ltrDir .input-group-addon i {
        position: relative !important;
        right: 35px !important;
        left: auto !important;
    }

    .ltrDir .input-group {
        margin-left: 30px !important;
    }

    .ltrDir .btn {
        float: right !important;
    }
/** End  CSS for En login page**/


/* .infoSec=========================*/
.infoSec {
    background-image: url(../images/Bgs/headerBg1.jpg);
    background-size: 100%;
    min-height: 70px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    top: -25px;
}

@media (min-width: 1200px) {
    .col-lg-2 {
        width: 12.5%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1400px) {
    .col-md-2 {
        width: 12.5%;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/*======= topNav ======= */

.topNav {
    background-image: linear-gradient(#086dd0, #052e77) !important;
    background-color: #052e77;
    padding-left: 20px;
    padding-right: 20px;
}

    .topNav .navbar-nav > li > a {
        font-size: 12px;
        padding: 5px;
        margin-top: 5px;
        margin-left: 5px;
    }

        .topNav .navbar-nav > li > a:hover,
        .topNav .navbar-nav > li > a:focus {
            color: #48a5ff;
        }

    .topNav .material-icons {
        font-size: 20px;
        -o-transform: scaleX(-0.85);
        -moz-transform: scaleX(-0.85);
        -webkit-transform: scaleX(-0.85);
        -ms-transform: scaleX(-0.85);
        transform: scaleX(-0.85);
    }

    .topNav .navbar-right {
        margin-left: 5px;
    }

.hrms-menu .nav > li > a {
    font-size: 15px;
}

.sub-caret {
    margin-right: 5px;
    border-right: 4px solid;
}

.dropdown-submenu .dropdown-menu {
    right: 100% !important;
}

.dropdown-list-header.open-right .dropdown-submenu .dropdown-menu {
    left: 100% !important;
    right: unset !important;
}



/* language icon */
.lang {
    font-family: 'Roboto', Arial, Tahoma, sans-serif;
    font-weight: bold;
}

/* notifi ul padding */
.navbar ul {
    padding-inline-start: 0px;
}

/* ========= footer ============= */
.legal {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 15px;
    overflow: hidden;
    background-color: #efefef;
    text-align: center;
    -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

    .legal .copyright {
        font-size: 13px;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
    }



        .legal .copyright a {
            font-weight: bold;
            text-decoration: none;
        }



/* Master page ====================== */


.open > .dropdown-menu {
    border-radius: 5px;
    border: 1px solid #b7b7b7;
}


.btn-ripple {
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out .5s;
}

    .btn-ripple::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 25%;
        height: 100%;
        width: 50%;
        background-color: #000;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transition: all ease-in-out 1s;
        transform: scale(5, 5);
    }

    .btn-ripple:active::after {
        padding: 0;
        margin: 0;
        opacity: .2;
        transition: 0s;
        transform: scale(0, 0);
    }


/*زرار الاستعلام*/
.containerbtn {
    width: 400px;
    height: 90px;
    position: absolute;
    left: 31%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.centerx {
    width: 130px;
    height: 38px;
    position: absolute;
    margin-top: 35px;
}

.btnx {
    width: 130px;
    height: 38px;
    cursor: pointer;
    background: #007bf7;
    border: 1px solid #0f0f0f;
    outline: none;
    transition: 1s ease-in-out;
    border-radius: 35px;
}

.btnxGreen {
    width: 130px;
    height: 38px;
    cursor: pointer;
    color: #fff;
    font-size: larger;
    background: #4fd100;
    border: 1px solid #0f0f0f;
    outline: none;
    transition: 1s ease-in-out;
    border-radius: 35px;
}

svg {
    position: absolute;
    left: 0;
    top: 0;
    fill: none;
    stroke: #fff;
    stroke-dasharray: 150 480;
    stroke-dashoffset: 150;
    transition: 1s ease-in-out;
}

.btnx:hover {
    transition: 1s ease-in-out;
    background: #4F95DA;
}

    .btnx:hover svg {
        stroke-dashoffset: -480;
    }

.btnx span {
    color: white;
    font-size: 18px;
    font-weight: 100;
}


/*زر الطباعة */
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.buttons_x {
    /*margin-top: 50px;*/
    text-align: right;
    border-radius: 30px;
}

.blob-btn {
    z-index: 1;
    position: relative;
    padding: 12px 48px;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    background-color: transparent;
    outline: none;
    border: none;
    transition: color 0.5s;
    cursor: pointer;
    border-radius: 30px;
}

    .blob-btn:before {
        content: "";
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 80%;
        border: 2px solid #007bf7;
        border-radius: 30px;
    }

    .blob-btn:after {
        content: "";
        z-index: -2;
        position: absolute;
        left: 3px;
        top: 3px;
        width: 100%;
        height: 80%;
        transition: all 0.3s 0.2s;
        border-radius: 30px;
    }

    .blob-btn:hover {
        color: #fff;
        border-radius: 30px;
    }

        .blob-btn:hover:after {
            transition: all 0.3s;
            left: 0;
            top: 0;
            border-radius: 30px;
        }

.blob-btn__inner {
    z-index: -1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
    border-radius: 30px;
    background: #fff;
}

.blob-btn__blobs {
    position: relative;
    display: block;
    height: 70%;
    filter: url('#goo');
}
/**/
.blob-btn__blob {
    position: absolute;
    top: 0px;
    width: 25%;
    height: 130%;
    background: #007bf7;
    border-radius: 100%;
    transform: translate3d(0, 150%, 0) scale(1.7);
    transition: transform 0.45s;
}

@supports (filter: url('#goo')) {
    transform: translate3d(0, 150%, 0) scale(1.4);
}

.blob-btn__blob:nth-child(1) {
    left: 0%;
    transition-delay: 0s;
}

.blob-btn__blob:nth-child(2) {
    left: 30%;
    transition-delay: 0.08s;
}

.blob-btn__blob:nth-child(3) {
    left: 60%;
    transition-delay: 0.16s;
}

.blob-btn__blob:nth-child(4) {
    left: 90%;
    transition-delay: 0.24s;
}

.blob-btn:hover .blob-btn__blob {
    transform: translateZ(0) scale(1.7);
}

@supports (filter: url('#goo')) {
    transform: translateZ(0) scale(1.4);
}