body {
    overflow-x: hidden;
}

.home_view_title_color {
    color: var(--FIRST_COLOR);
    font-weight: bold;
}
.home_view_value_color {
    color: var(--SECOUND_COLOR);
    font-weight: bold;
}

.menu-area {
    background: var(--FIRST_COLOR);
    margin: 2px 0px 0px 0px;
    height: 30px;

}

.dropdown-menu {
    padding: 0;
    margin: 0;
    border: 0 solid transition !important;
    border: 0 solid rgba(0,0,0,.15);
    border-radius: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a, .navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    font-size: 14px;
    text-transform: capitalize;
    padding: 5px 10px;
    font-family: 'Roboto',sans-serif;
    display: block !important;
    height: 30px;
    border-bottom:1px solid #5d597d;
}

.mainmenu .active a, .mainmenu .active a:focus, .mainmenu .active a:hover, .mainmenu li a:hover, .mainmenu li a:focus, .navbar-default .navbar-nav > .show > a, .navbar-default .navbar-nav > .show > a:focus, .navbar-default .navbar-nav > .show > a:hover {
    color: #fff;
    background: var(--SECOUND_COLOR);
    outline: 0;
}
/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a {
    background: #D0D5DD;
    color: var(--FIRST_COLOR);
    font-weight: bold;
}

.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover {
    background: #D0D5DD;
}

.mainmenu .collapse ul ul ul > li:hover > a {
    background: #D0D5DD;
}

.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu {
    background: var(--FIRST_COLOR);
}

    .mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu {
        background: var(--FIRST_COLOR);
    }

        .mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu {
            background: var(--FIRST_COLOR);
        }

.dropdown-toggle::after {
    font-family: icomoon;
    display: inline-block;
    border: 0;
    vertical-align: middle;
    font-size: .6875rem;
    margin-left: .46875rem;
    line-height: 1;
    position: relative;
    color: black;
    content: url('../images/back/img/barrow.png');

}



.user-infobar {
    padding-top:5px;
    /*padding:5px 25px 0px 50px;*/
    padding: 0px 25px 0px 50px
}


.user-info {
    color: white;
    font-family: 'Roboto',sans-serif;
    font-size: 18px;
    padding-right: 10px
}


.balance-infobar {
    padding-top: 0px;
 }

.balance-info {

    font-family: 'Roboto',sans-serif;
    font-size: 12px;
     padding-right: 20px;

}
.glyphicon {
    margin-right: 10px;
}

.panel-body {
    padding: 0px;
}
    .panel-body table tr td {
        padding-left: 15px
    }

    .panel-body .table {
        margin-bottom: 0px;
    }
/******************************  N E W  M E N U **********************************/
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    background: #f0f0f0;
}

.content {
    width: 260px;
    margin: 100px auto;
}

.colors {
    width: 260px;
    float: left;
    margin: 20px auto;
}

    .colors a {
        width: 43.3px;
        height: 30px;
        float: left;
    }

    .colors .default {
        background: #414956;
    }

    .colors .blue {
        background: #4A89DC;
    }

    .colors .green {
        background: #03A678;
    }

    .colors .red {
        background: #ED5565;
    }

    .colors .white {
        background: #fff;
    }

    .colors .black {
        background: #292929;
    }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

.jquery-accordion-menu, .jquery-accordion-menu * {
    font-family: 'Open Sans',sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: 0
}

.jquery-accordion-menu {
    min-width: 260px;
    float: left;
    position: relative;
    /*box-shadow: 0 20px 50px #333*/
    box-shadow: 0 5px 2px 0px #9E9E9E;
}

    .jquery-accordion-menu .jquery-accordion-menu-footer, .jquery-accordion-menu .jquery-accordion-menu-header {
        width: 100%;
        height: 50px;
        padding-left: 22px;
        float: left;
        line-height: 50px;
        font-weight: 600;
        color: #f0f0f0;
        background: var(--FIRST_COLOR);
    }

    .jquery-accordion-menu ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

        .jquery-accordion-menu ul li {
            width: 100%;
            display: block;
            float: left;
            position: relative
        }

            .jquery-accordion-menu ul li a {
                width: 100%;
                padding: 5px 22px;
                float: left;
                text-decoration: none;
                color: #f0f0f0;
                font-size: 13px;
                background: var(--FIRST_COLOR);
                white-space: nowrap;
                position: relative;
                overflow: hidden;
                -o-transition: color .2s linear,background .2s linear;
                -moz-transition: color .2s linear,background .2s linear;
                -webkit-transition: color .2s linear,background .2s linear;
                transition: color .2s linear,background .2s linear
            }

    .jquery-accordion-menu > ul > li.active > a, .jquery-accordion-menu > ul > li:hover > a {
        color: #fff;
        background: #3b424d
    }

    .jquery-accordion-menu > ul > li > a {
        border-bottom: solid 1px #616161
    }

    .jquery-accordion-menu ul li a i {
        width: 34px;
        float: left;
        line-height: 18px;
        font-size: 16px;
        text-align: left
    }

    .jquery-accordion-menu .submenu-indicator {
        float: right;
        right: 22px;
        position: absolute;
        line-height: 19px;
        font-size: 20px;
        -o-transition: transform .3s linear;
        -moz-transition: transform .3s linear;
        -webkit-transition: transform .3s linear;
        -ms-transition: transform .3s linear
    }

    .jquery-accordion-menu ul ul.submenu .submenu-indicator {
        line-height: 16px
    }

    .jquery-accordion-menu .submenu-indicator-minus > .submenu-indicator {
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .jquery-accordion-menu ul ul.submenu, .jquery-accordion-menu ul ul.submenu li ul.submenu {
        width: 100%;
        display: none;
        position: static
    }

        .jquery-accordion-menu ul ul.submenu li {
            clear: both;
            width: 100%
        }

            .jquery-accordion-menu ul ul.submenu li a {
                width: 100%;
                float: left;
                font-size: 14px;
                background: #383838;
                border-top: none;
                position: relative;
                border-left: solid 6px transparent;
                -o-transition: border .2s linear;
                -moz-transition: border .2s linear;
                -webkit-transition: border .2s linear;
                transition: border .2s linear
            }

            .jquery-accordion-menu ul ul.submenu li:hover > a {
                border-left-color: #C1C9D6;
                background-color: #5B5B5B;
            }

        .jquery-accordion-menu ul ul.submenu > li > a {
            padding-left: 30px
        }

        .jquery-accordion-menu ul ul.submenu > li > ul.submenu > li > a {
            padding-left: 45px
        }

        .jquery-accordion-menu ul ul.submenu > li > ul.submenu > li > ul.submenu > li > a {
            padding-left: 60px
        }

        .jquery-accordion-menu ul li .jquery-accordion-menu-label, .jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
            min-width: 20px;
            padding: 1px 2px 1px 1px;
            position: absolute;
            right: 18px;
            top: 14px;
            font-size: 11px;
            font-weight: 800;
            color: #555;
            text-align: center;
            line-height: 18px;
            background: #f0f0f0;
            border-radius: 100%
        }

        .jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
            top: 12px
        }

.ink {
    display: block;
    position: absolute;
    background: rgba(255,255,255,.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
}

.animate-ink {
    -webkit-animation: ripple .5s linear;
    -moz-animation: ripple .5s linear;
    -ms-animation: ripple .5s linear;
    -o-animation: ripple .5s linear;
    animation: ripple .5s linear
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5)
    }
}

@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5)
    }
}

@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5)
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5)
    }
}

.blue.jquery-accordion-menu .jquery-accordion-menu-footer, .blue.jquery-accordion-menu .jquery-accordion-menu-header, .blue.jquery-accordion-menu ul li a {
    background: #4A89DC
}

.blue.jquery-accordion-menu > ul > li.active > a, .blue.jquery-accordion-menu > ul > li:hover > a {
    background: #3e82da
}

.blue.jquery-accordion-menu > ul > li > a {
    border-bottom-color: #3e82da
}

.blue.jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: #3e82da
}

.green.jquery-accordion-menu .jquery-accordion-menu-footer, .green.jquery-accordion-menu .jquery-accordion-menu-header, .green.jquery-accordion-menu ul li a {
    background: #03A678
}

.green.jquery-accordion-menu > ul > li.active > a, .green.jquery-accordion-menu > ul > li:hover > a {
    background: #049372
}

.green.jquery-accordion-menu > ul > li > a {
    border-bottom-color: #049372
}

.green.jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: #049372
}

.red.jquery-accordion-menu .jquery-accordion-menu-footer, .red.jquery-accordion-menu .jquery-accordion-menu-header, .red.jquery-accordion-menu ul li a {
    background: #ED5565
}

.red.jquery-accordion-menu > ul > li.active > a, .red.jquery-accordion-menu > ul > li:hover > a {
    background: #DA4453
}

.red.jquery-accordion-menu > ul > li > a {
    border-bottom-color: #DA4453
}

.red.jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: #DA4453
}

.white.jquery-accordion-menu .jquery-accordion-menu-footer, .white.jquery-accordion-menu .jquery-accordion-menu-header, .white.jquery-accordion-menu ul li a {
    background: #fff;
    color: #555
}

.white.jquery-accordion-menu > ul > li.active > a, .white.jquery-accordion-menu > ul > li:hover > a {
    background: #f0f0f0
}

.white.jquery-accordion-menu > ul > li > a {
    border-bottom-color: #f0f0f0
}

.white.jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: #f0f0f0
}

.white.jquery-accordion-menu ul ul.submenu li a {
    color: #f0f0f0
}

.white.jquery-accordion-menu > ul > li > a > .ink {
    background: rgba(0,0,0,.1)
}

.black.jquery-accordion-menu .jquery-accordion-menu-footer, .black.jquery-accordion-menu .jquery-accordion-menu-header, .black.jquery-accordion-menu ul li a {
    background: #292929
}

.black.jquery-accordion-menu > ul > li.active > a, .black.jquery-accordion-menu > ul > li:hover > a {
    background: #222
}

.black.jquery-accordion-menu > ul > li > a {
    border-bottom-color: #222
}

.black.jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: #222
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
    background: none;
    border: 0 solid;
    margin: 0;
    padding: 0;
    min-height: 20px;
    width: 100%;
    padding-left:25px;

}
.tooltip-inner {
    background-color: var(--FIRST_COLOR);
}
.zairaalogo {
    margin-left: 20px;
    width: 225px;
    height: 75px;
}

header {
    /*margin-top: 5px;*/
    /*height:60px;*/
}
.textslider {
    border-bottom: 1px solid var(--FIRST_COLOR);
    background-color: #e2e2e2;
    height: 45px;
    box-shadow: 2px 2px 4px #888888;
}
.iconbar {
    height: 100%;
    /*padding:10px 50px 0px 0px;*/
}
.iconheader {
    font-size: 30px;
    /*font-size: 25px;*/
    color: var(--SECOUND_COLOR);
    cursor: pointer;
    /*margin: 0px 0px 0px 20px;*/
    margin-left: 20px;
    display: inline;
    text-align: center;
    font-style: normal;
}
.iconheader:hover {
    color: var(--FIRST_COLOR);
 }
.iconheader2 {
    font-size: 75px !important;
    color: var(--SECOUND_COLOR);
    cursor: pointer;
    margin: 5px 0px 0px 20px;
    display: inline;
    text-align: center;
}
.iconheader2:hover {
    color: var(--FIRST_COLOR);
 }
.notifation_color{
    font-size: 1.75rem;
    color: var(--SECOUND_COLOR); !important;
 }
footer {
    position: fixed;
    bottom: 0;
    width: 100%;

    border-top: 1px solid var(--FIRST_COLOR);
    color: var(--FIRST_COLOR);

    font-size:14px;
    font-weight:bold;
}
.footerLinks {
    color: var(--FIRST_COLOR);
}
.menu_text {
    font-size: 14px !important;
    margin-top: 5px;
}

@media only screen and (max-width: 425px) {
   .zairaalogo {
        margin-left: 10px;
        width: 150px;
        height: 50px;
    }
    .pt-3, .py-3{
        padding-top: 0.75rem!important;
    }
    .menu_text {
        font-size: 8px !important;
        margin-top: 5px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .iconheader{
        font-size: 10px;
    }
    .user-infobar {
        padding-top:0px;
        padding: 0px 0px 0px 0px;
        /*padding: 0px 25px 0px 50px*/
    }
    .user-info{
        font-size: 10px !important;
    }
}
@media only screen and (max-width: 2560px) {
    .user-info{
        font-size: 18px !important;
    }
}
@media only screen and (max-width: 991px) {
    .user-info-hide{
        display: none;
    }
}
@media only screen and (max-width: 1069px) {
    .user-info{
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 576px) {
    .user-info{
        font-size: 6px !important;
    }
}
@media only screen and (min-width: 768px) {
    .mainmenu .collapse ul li:hover > ul {
        display: block
    }

    .mainmenu .collapse ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        display: none
    }
        /*******/
        .mainmenu .collapse ul ul li {
            position: relative
        }

            .mainmenu .collapse ul ul li:hover > ul {
                display: block
            }

        .mainmenu .collapse ul ul ul {
            position: absolute;
            top: 0;
            left: 100%;
            min-width: 250px;
            display: none
        }
            /*******/
            .mainmenu .collapse ul ul ul li {
                position: relative
            }

                .mainmenu .collapse ul ul ul li:hover ul {
                    display: block
                }

            .mainmenu .collapse ul ul ul ul {
                position: absolute;
                top: 0;
                left: -100%;
                min-width: 250px;
                display: none;
                z-index: 1
            }
}

@media only screen and (max-width: 768px) {
    .navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
        padding: 16px 15px 16px 35px
    }

    .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
        padding: 16px 15px 16px 45px
    }
}


/* * * * * * * * * * * * * * * * *  TEXT SLIDER * * * * * * * * * * * * * * * * * * * * */



#carousel {
    position: relative;
    width: 95%;
    margin: 0 auto;
   /* margin-top:-80px;*/

}

#slides {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 30px;
}

    #slides ul {
        list-style: none;
        width: 100%;
        height: 250px;
        margin: 0;
        padding: 0;
        position: relative;
    }

    #slides li {
        width: 100%;
        height: 250px;
        float: left;
        text-align: left;
        position: relative;
        font-family: lato, sans-serif;

    }

/* Styling for prev and next buttons */

.btn-bar {
    width: 60%;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 40px;
}

#buttons {
    padding: 0 0 5px 0;
    float: right;
}

    #buttons a {
        text-align: center;
        display: block;
        font-size: 20px;
        float: left;
        outline: 0;
        margin: 0 60px;
        color: #b14943;
        text-decoration: none;
        display: block;
        padding: 9px;
        width: 35px;
    }

a#prev:hover,
a#next:hover {
    color: #FFF;
    text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
    font-family: sans-serif;
    font-weight: 300;
    display: table-cell;
    vertical-align: middle;
    padding: 5px 20px;
    font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
    height: 0px;
    font-size: 18px;
    color: var(--FIRST_COLOR);
    font-style: italic;
    text-shadow: .5px 0px #b14943;
}

.quote-marks {
    font-size: 30px;
    padding: 0 3px 3px;
    position: inherit;
}

.quote-author {
    font-style: normal;
    font-size: 20px;
    color: #b14943;
    font-weight: 400;
    height: 30px;
}

.quoteContainer,
.authorContainer {
    display: table;
    width: 100%;
}