body{
    background: #EDECEC;
    box-sizing: border-box;
}

.app_wrapper{
    width: 100%;
}

.app_header--main {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    height: 70px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.header__row{
    max-width: 1100px;
    margin: 0 auto;
}

.large__screen .logo{
    padding: 5px 0;
}
.large__screen .logo img{
    height: 55px;
    background-size: cover;
    width: 100px;
    border-radius: 100%;
    overflow: hidden;
    text-decoration: none;
}
.logo:hover{
    text-decoration: none;

}
.logo{
    background-size: cover;
    background-repeat: no-repeat;
    width:200px;
    height: 60px;
    overflow: hidden;
}

/*body section*/
.app_body--main{
    /* background: url("../assets/images/city1.j1pg") no-repeat center center;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images/3e4.jpg', sizingMethod='scale');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    */
    background-color: #ffffff;
    margin: 50px auto 0 auto;
    padding-bottom: 10px;
    overflow-y: hidden;
    height: 100%;
    overflow-x: hidden;
}

.section.section--login{
    margin: 40px auto 0 auto;
    max-width: 500px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
   /* box-shadow: 0 1px 6px rgba(57,73,76,.35);*/
    height: inherit;
    min-height: 400px;
    overflow: hidden;
    position: relative;
}
.section--login .login-form{
    float: left;
    height: inherit;

    /*max-width: 450px;*/
    /*background: #fff;*/
    padding: 10px 20px 5px 10px;
}

.section--login .wifi-picture{
    float: left;
    /*background: url("../images/mabawa-login-side-banner.png");*/
    height: 100%;

    /*max-width: 350px;*/
    padding: 5px 5px;
}

.wifi-picture .how-to-list{
    color: rgba(0,0,0,1);
}
.section input{
    border:none;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 5px;
}

.login-form .btn--login{
    width: 160px !important;
}
.width-35{
    width: 160px;
    overflow: hidden;
    text-align: center;
}

.width-35-1{
    max-width: 460px !important;
    overflow: hidden;
}

.free--wifi{
}


.section.section--pricing{
    margin: -10px auto;
    width: 100%;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
    /*height: 400px;*/
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
}
.section--pricing__holder{
    max-width: 1100px;
    margin: 0 auto;
    padding: 5px 5px;
}

.pricing--plan{
    background: #f4f4f4;
}
.pricing--plan>div{
    padding: 10px;
}
.pricing--plan>div>div{
    box-sizing: border-box;

    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
    padding: 0;
}
.pricing--plan>div>div:nth-child(3){
    border: 1px solid orangered;
}
.pricing--plan__header{
    padding: 20px 10px 70px;
    width: 100%;
    background: orange;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: auto;
}
.pricing--plan___body{
}
.pricing--plan__price-tag{
    margin: -60px auto 0 auto;
    width: 120px;
    height: 120px;
    color: #fff;
    background: #3c94d0;
    border-radius: 60px;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
}
.pricing--plan__price-tag:hover{
    cursor: pointer;
    opacity: 0.34;
}

.pricing--plan__price-tag h2{
    line-height: 120px;
}

.pricing--plan__features{
    padding: 30px;
    font-weight: bold;
}

.section--contact-us{
    /* background: url("../assets/images/city1.jpg") center center no-repeat; */
    background-color: #c9c9c9;
    background-size: cover;
    height: inherit;
}
.contact--holder{
    width: 100%;
    height: inherit;
    background-color: rgba(255,255,255,.45);
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;

}
.contact--holder >.body-form{
    margin: 0 auto;
    max-width: 1100px;
}

.contact--holder .form--holder{
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
    height: inherit;
    overflow: hidden;
}

.contact--holder .form--holder label{
    font-weight: normal;
    font-family: "Segoe MDL2 Assets";
}

.map-holder{
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
}
#googleMap{
    width: 100%;
    height: 400px;
}

.section--about-us{
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.background-transparent-holder{
    width: 100% !important;
    height: 100%;
    padding-top: 20px;
    background-color: rgba(255,255,255,.45);
    margin: 0;
    overflow: hidden;
}

.about-us-holder{
    margin: 80px auto 0 auto;
    max-width: 1100px;
}

.content-holder{
    background: #fff;
    padding: 16px;
    border-radius: 10px;
}

.app_footer{
    background-color: #ffffff;
    color: #000000;
    bottom:0;
    position: relative;
    margin-top: 100px;
    width: 100%;
    overflow: hidden;
   z-index: -1;

}


.app_footer2{
    background: #005384;
    color: #fff;
    bottom:0;
    position: relative;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
    display: inline-block;
}

.nav-link{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}
.web-font{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.align-center{
    position:inherit;
    top:30%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translate(-50%);
    transform:translateY(-50%) translate(-50%);
}

.alert-loader{
    top: 17%;
    position: fixed;
    display: none;
    background-color: transparent;
    z-index: 1056;
    width: 600px;
    height: inherit;


}

.alert-load{
    position:relative;
    top:17%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translate(-50%);
    transform:translateY(-50%) translate(-50%);
    z-index: 1056;


}


    @media (max-width:440px) {
    body{
        zoom: 80% !important;
    }

    .section2{
        min-width: 500px;
    }
    .alert-loader {
        top: 20%;
        zoom: 70%;
        width: 509px;
        height: inherit;
    }
    .alert-load{
        position:relative;
        top:20%;
        left:50%;
        -webkit-transform:translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translate(-50%);
        transform:translateY(-50%) translate(-50%);
        z-index: 600;
    }
}

.shadow-1 {
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}

.shadow-inset {
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
}

.wifi-loading{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1057;
    /* opacity: 0.5;
    filter: alpha(opacity=50);
    */
    background-color: rgb(255, 255, 128);        /* Fully opaque */
    background-color: rgba(117, 190, 218, 0.4);
    overflow: hidden;
}

.wifi-loading-dialog{
    width: 400px;
    height: 100px;
    overflow: hidden;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: 1100;
    -moz-box-shadow:    inset 0 0 10px #c9c9c9;
    -webkit-box-shadow: inset 0 0 10px #c9c9c9;
    box-shadow:         inset 0 0 10px #c9c9c9;
    position:relative;
    border-radius: 8px;
    text-align: left;
}


.wifi-loading-content{
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 4px;
    margin: 2px;
    text-align: left;
    display: inline-block;
    line-height: inherit;
    background-color: transparent;
}

.wifi-loading-left{
    display: inline-block;
    width: 100px;
    height: 95px;
    float: left;
    position: relative;
    background: url("../images/load1 (3).gif") center no-repeat;
    background-size: cover;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 4px;
}

.wifi-loading-right{
    display:inline-block;
    width: 100%;
    height: 95px;
    position: absolute;
    overflow: hidden;
    padding-top: 30px;
    padding-left: 10px;
    text-align: left;
    float: left;
    margin-bottom: 4px;
    text-decoration: none;
    text-overflow: ellipsis;
}


.wifi-loading-right label{
    color: #f39c12;
    font-weight: bold;
}

.font-8{
    font: 8px/20px 'Lucida Grande', Verdana, sans-serif;
}

.font-9{
    font: 9px/20px 'Lucida Grande', Verdana, sans-serif;
}
.font-10{
     font: 10px/20px 'Lucida Grande', Verdana, sans-serif;
 }
.font-11{
    font: 11px/20px 'Lucida Grande', Verdana, sans-serif;
}
.font-12{
    font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
}
.font-14{
    font: 14px/20px 'Lucida Grande', Verdana, sans-serif;
}

.font-13{
    font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
}
.font-14{
    font: 14px/20px 'Lucida Grande', Verdana, sans-serif;
}
.status-pg{
    width:100%;
    height: 560px ;
    background-color: transparent;
    overflow: hidden;
    position: relative;

}
@keyframes slidy {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}


.slider {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin-bottom: 0;

}

.slider figure >img {
    width: 20%;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    align-items: center;
    height: 100%;
}
.slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite;
}
.alt1:before{
    text-align: center;
    content: 'MARTIN';
    color: #ffffff;
    font-size: 45px;
}

.alt1{
    text-align: center;
    top: 20%;
    color:#FFFFCC;
    font-family: "Arial Rounded MT Bold";
    font-size: 15px;
    position: relative;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    background-color: red;
    height: 50px;

}

.item-1,
.item-2,
.item-3,.item-4,.item-5 {
    position: absolute;
    display: block;
    top: 4em;
    left: 0;
    font-size: 2em;
    animation-duration: 24s;
    animation-timing-function: ease-in;
    animation-iteration-count:  infinite;
    color: #ffffff;
    height: inherit;
    margin: 0;
    border-radius: 4px;
    text-align: center;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: rgba(255, 255, 255, 0.3);
    padding: 5px;

}

.item-1{
    animation-name: anim-1;
}

.item-2{
    animation-name: anim-2;
}

.item-3{
    animation-name: anim-3;
}
.item-4{
    animation-name: anim-4;
}
.item-4{
    animation-name: anim-4;
}

@keyframes anim-1 {
    0%, 8.3% { left: 80%; opacity: 0; overflow: hidden;}
    8.3%,25% { left: 0; opacity: 1; overflow: hidden;}
    33.33%, 100% { left: -100%; opacity: 0; overflow: hidden;}
}

@keyframes anim-2 {
    0%, 33.33% { left: 80%; opacity: 0; overflow: hidden;}
    41.63%, 58.29% { left: 0; opacity: 1;overflow: hidden; }
    66.66%, 100% { left: -100%; opacity: 0; overflow: hidden;}
}

@keyframes anim-3 {
    0%, 66.66% { left: 80%; opacity: 0; overflow: hidden;}
    74.96%, 91.62% { left: 0; opacity: 1; overflow: hidden;}
    100% { left: -100%; opacity: 0; overflow: hidden;}
}


@keyframes anim-4 {
    0%, 33.33% { left: 80%; opacity: 0; overflow: hidden;}
    41.63%, 58.29% { left: 25%; opacity: 1;overflow: hidden; }
    66.66%, 100% { left: -100%; opacity: 0; overflow: hidden;}
}

@keyframes anim-5 {
    0%, 66.66% { left: 80%; opacity: 0; overflow: hidden;}
    74.96%, 91.62% { left: 25%; opacity: 1; overflow: hidden;}
    100% { left: -100%; opacity: 0; overflow: hidden;}
}

.text-yellow{
    color: #f39c12;
}
.text-blue{
    color: #005384;
}

.center{
    text-align: center;
    align-items: center !important;
    height: inherit;
    overflow: hidden;
    min-height: 50px;
    width: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: rgba(255, 255, 255, 0.3);
}
/*
CREATE  A CUSTOM_ALERT.
 */


.confirm_content{
    position:fixed;
    z-index: 1056;
    display: none;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.confirm {
    background-color: #c9c9c9;
    border: 1px solid #aaa;
    position: relative;
    width: 350px;
    height: inherit;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.08);
    border-radius: 3px;
    z-index: 1210;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    top:30%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translate(-50%);
    transform:translateY(-50%) translate(-50%);
}

.confirm-footer {
    background-color: transparent;
    display: inline-block;
    line-height: inherit;
    border-top: 1px solid #aaa;
    padding: 5px;
    text-align: center;
    width: 100%;
    height: 50px;
    overflow: hidden;
    bottom: 0;
    margin-top: 2px;
    position: relative;
}

.confirm-header {
    background-color: #2E7DB4;
    display: inline-block;
    line-height: inherit;
    padding-left: 5px;
    text-align: left;
    width: 100%;
    height: inherit;
    overflow: hidden;
    top:0;
    margin-bottom:  2px;
    position: relative;
    color: #ffffff;
}

.confirm-body h5{
    font-size: 14px;
    text-decoration: none;
    text-overflow: ellipsis;
    font-family: 'Open Sans', Arial, sans-serif;
}

.confirm-body{
    width: 100%;
    height: inherit;
    overflow: hidden;
    background-color: transparent;
    padding: 6px 6px 5px 5px;
    margin: 0;
    min-height: 50px;
}

 .message {
     text-align: left;
}

 .link{
     color: #2E7DB4;
 }

.link:hover{
    text-decoration: underline;
    cursor: pointer;
}
.confrim-images{
    width:56px;
    height: 30px;
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    text-decoration: none;
    left: 0;
    display: inline-block;
}
.text-red{
    color: red;
}
.customer_infor{
    font-size: 12px;
    color: #005384;
    font-family: "Arial Rounded MT Bold";
    padding-top: 2px;
}
.customer_infor:hover{
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.4;
}
.alfanet{
    text-decoration: none;
    color: #005384;
    font-weight:bold;
    font-size: 16px;
    padding-left: 5px;
    display: inline-block;
    font-family: "Baskerville Old Face";
}
.btn-create{
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 9px;
    background-color: #3c8dbc;
    color: #ffffff !important;
    font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
    font-weight: bold;
    height: 40px;

}
.btn-create:hover{
    cursor: pointer;
    opacity: 0.2;
}

.wallet-panel{
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(57,73,76,.35);
    height: inherit;
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 10px;

}
.wallet-panel-body{
    width: 100%;
    height: inherit;
    overflow: hidden;
    background-color: transparent;
    padding: 16px;
    position: relative;

}

.wallet-panel-header{
    width: 100%;
    height: 50px;
    overflow: hidden;
    top: 0;
    display: inline-block;
    line-height: inherit;
    background-color: #3c8dbc;
    padding-left: 10px;
    padding-top: 10px;

}
.wallet-panel-header h4{
    color: #ffffff !important;
    font: 16px/20px 'Lucida Grande', Verdana, sans-serif;
    font-weight: bold;
}
.wallet-circle-center{
    width:70px !important;
    height: 60px !important;
    border-radius: 100%;
    background-color: #ffffff;
    text-align: center;
    z-index: 1;
    position: relative;
    margin-top: 45px;
    overflow: hidden;
    padding: 1px 15px 1px 15px;
    font: 36px/20px 'Lucida Grande', Verdana, sans-serif;
}
.float-center{
    text-align: center;
}
.grid-streach{
    width: 100% !important;
    min-width: 400px !important;
    height: inherit;
    margin: 4px;
    background-color: transparent;
    overflow-y: hidden;
    overflow-x: scroll auto;

}



.wallet-drop-down{
    position: fixed;
    background-color: transparent;
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.wallet-drop-content{
    width: 300px;
    height: inherit;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    top: 10px;
    background-color: #cccccc;
    -webkit-box-shadow: 3px 3px 2px 2px whitesmoke;
    -moz-box-shadow:    3px 3px 2px 2px whitesmoke;
    box-shadow:         3px 3px 2px 2px whitesmoke;
    z-index: 1010;
}
.wallet-sm{
    width: 300px;
}

.bg-green{
    background-color: #8BBC67;
}

.arrow_box {
    position: absolute;
    background: transparent;
    border: 1px solid #3c8dbc;
}

.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #3c8dbc;
    border-width: 15px;
    margin-left: -15px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 15px;
    margin-left: -15px;
}
.arrow2-top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 40px 25px;
    border-color: transparent transparent #007bff transparent;
}


/* Dropdown Button */
.dropbtn {
    background-color: transparent;


}



/* The container <div> - needed to position the dropdown content */
.dropdown-wallet {
    position: relative;
    display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-wallet {
    display: none;
    border-radius: 4px;
    position: absolute;
    background-color: #88b7d5;
    width: 320px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 10;

}

/* Links inside the dropdown */
.dropdown-content-wallet a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content-wallet a:hover {
    background-color: #ddd
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display:block;
}

.dropdown-content-header{
    border-radius: 4px;
    width: 100%;
    top: 0;
    height: 30px;
    overflow: hidden;
    background-color: #3c8dbc;
    color: #ffffff;
    padding-left: 10px;
    text-align: left;
}
.dropdown-content-header label{
    font: 11px/20px 'Lucida Grande', Verdana, sans-serif;
    font-weight: bold;
}

.dropdown-content-body{
    width: 100%;
    height: inherit;
    padding:5px 5px  5px 5px;
    background-color: #ffffff;

}
.line{
    height: 1px;
    background-color: #fad463;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

@media (max-width:380px){
    .dropdown-content-wallet{
       min-width: 400px;
    }
    .wallet-session{
        width: 400px;
    }
    .confirm_content{
        zoom: 80%;
    }
    .live-chat-wrapper{
        background-color: red;
        width: 100% !important;
        overflow: hidden;
    }

}

@media (min-width:480px){
    .dropdown-content-wallet{
        min-width: 400px;
    }
    .wallet-session{
        width: 400px;
    }
    .confirm_content{
        zoom: 80%;
    }
    .live-chat-wrapper{
        background-color: red;
        width: 100% !important;
        overflow: hidden;
    }

}

/* WALLET SESSION BUY BUNDLES*/

.wallet-session {
    background-color: #ffffff;
    border: 1px solid #aaa;
    position: relative;
    width: 450px;
    height: inherit;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.08);
    border-radius: 2px;
    z-index: 1210;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    top:40%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translate(-50%);
    transform:translateY(-50%) translate(-50%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wallet-session-footer {
    background-color: #ffffff;
    display: inline-block;
    line-height: inherit;
    border-top: 1px solid #c9c9c9;
    padding-top: 8px;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    height: 60px;
    overflow: hidden;
    bottom: 0;
    margin-top: 1px;
    position: relative;
}
.bg-yellow{
    background-color: #FFBB00
}

.wallet-session-header {
    background-color: #FFBB00;
    display: inline-block;
    line-height: inherit;
    padding-left: 5px;
    text-align: left;
    width: 100%;
    height: 40px;
    overflow: hidden;
    padding-top: 5px;
    top:0;
    margin-bottom:  2px;
    position: relative;
    color: #ffffff;
}

.wallet-session-body h5{
    font-size: 14px;
    text-decoration: none;
    text-overflow: ellipsis;
    font-family: 'Open Sans', Arial, sans-serif;
}

.wallet-session-body{
    width: 100%;
    height: inherit;
    overflow: hidden;
    background-color: transparent;
    padding: 6px 6px 5px 5px;
    margin: 0;
    min-height: 50px;
    text-align: left;
}

.session-images{
    width:56px;
    height: 30px;
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    text-decoration: none;
    left: 0;
    display: inline-block;
    border-radius: 100%;
}

.wallet-session-show{
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: #7CBB00;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.08);
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    line-height: inherit;
    padding-top: 14px;
    padding-left: 10px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}
.center-all{
    align-items: center;
    text-align: center;
}


.close-wallet {
    position: relative;
    width: 30px;
    height: 40px;
    opacity: 10;
    float: right;
    border-radius: 100%;
    color: red;
    padding-top: 5px;

}
.close-wallet:hover {
    opacity: 0.2;
    cursor: pointer;
}
.close-wallet:before, .close-wallet:after {
    position: absolute;
    content: ' ';
    height: 20px;
    width: 2px;
    font-size: 12px;
    background-color: #333;
}
.close-wallet:before {
    transform: rotate(45deg);
}
.close-wallet:after {
    transform: rotate(-45deg);
}

.chat-wrapper{
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 1000;
    display: block;

}
.chat-wrapper-content{
    width: 75px;
    margin-right: 1px;
    margin-bottom: 0;
    border-radius: 100%;
   /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.08);*/
    display: inline-block;
    overflow: hidden;
    height: 75px;
    background: url("../images/images (7).jpg") no-repeat center ;
    background-size: cover;
}
.chat-wrapper-content:hover{
    cursor: pointer;
    width: 80px;
    height: 80px;
}

.live-chats{
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 1000;
    display: none;
    background-color: transparent;
}

.live-chat-wrapper{
    min-width: 300px;
    height: 400px ;
    overflow: hidden;
    border-top-left-radius: 3px;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.08);
}
.live-chat-content{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}

.live-chat-header{
    width: 100%;
    height: 40px;
    display: inline-block;
    line-height: inherit;
    background-color: #FFBB00;
    padding-left: 20px;
    text-align: center;
    overflow: hidden;
    top: 0;
}

.live-chat-header label{
    color: #ffffff;
    font-weight: bold;
    padding-top: 3px;
    font: 16px/30px 'Lucida Grande', Verdana, sans-serif;
    display:inline-block;
}

.live-chat-close {
    position: relative;
    width: 30px;
    height: 40px;
    opacity: 10;
    float: right;
    border-radius: 100%;
    color: red;
    padding-top: 8px;
}

.live-chat-close:hover {
    opacity: 0.2;
    cursor: pointer;
}

.live-chat-close:before, .live-chat-close:after {
    position: absolute;
    content: ' ';
    height: 20px;
    width: 2px;
    font-size: 12px;
    background-color: red;
}
.live-chat-close:before {
    transform: rotate(45deg);
}
.live-chat-close:after {
    transform: rotate(-45deg);
}

.live-chat-body{
    height: inherit;
    width: 100%;
    overflow: hidden;
    padding-top: 5px;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
}
.text-black{
    color: #000000;
}
.bold{
    font-weight: bold;
}
.no-padding-top{
    padding-top: 0;
}

.chat-main-infor{
    width: 100%;
    height: inherit;
    background-color: transparent;
    overflow: hidden;
    padding: 1px 0 1px 0;
    min-height: 200px;
    display: block;
}
.chat-main-chatting{
    width: 100%;
    height: inherit;
    background-color: transparent;
    overflow: hidden;
    min-height: 200px;
    display: none;
    padding: 1px 1px 1px 1px;
}
.width-100{
    width: 100px;
}
.jirani-logo{
    height: 100px;
    width: 60%;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}

.jirani-logo-header{
    height: 35px;
    width: 130px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}
.jirani-header{
    background-color: #ffab00;
}
.jirani-color{
    color: #ffab00;
}

/*  ----------TABLES -------------------*/

.dataTables_filter input[type=search],
.dataTables_filter input[type=text] {
    width: 125px;
    height: 18px;
    line-height: 18px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 4px 6px 10px;
    display: inline-block;


}

.dataTables_info {
    font-size: 14px
}

.dataTables_paginate .pagination {
    margin: 0 12px
}

.dataTables_wrapper label {
    display: inline-block;
    padding-left: 20px;
    font-size: 13px

}

.dataTables_wrapper input[type=search],
.dataTables_wrapper input[type=text],
.dataTables_wrapper select {
    margin-bottom: 0!important;
    margin: 0 4px
}

div.dataTables_scrollBody table,
div.dataTables_scrollFoot table {
    margin-top: 0!important;
    border-top: none
}

.dataTables_wrapper .row {
    margin: 0!important;

}

.dataTables_wrapper .row:first-child {
    width: 100%;
    overflow: hidden;
    height: inherit;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #EFF3F8;
    display:none;

}

.dataTables_wrapper .row:first-child+.dataTable {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd

}

.dataTables_wrapper .row:last-child {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    background-color: #EFF3F8;
    width:100%;
    overflow: hidden;
   align-items: right;
}

.dataTables_wrapper .dataTables_scroll+.row {
    border-top: 1px solid #e0e0e0
}

.dataTable {
    margin-bottom: 0
}

.dataTable>thead>tr>th[class*=sort] {
    cursor: pointer
}

.dataTable>thead>tr>th[class*=sort]:after {
    float: right;
    display: inline;
    content: "\f0dc";
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
    color: #555
}

.dataTable>thead>tr>th.sorting_disabled:after,
.dataTables_scrollHead+.dataTables_scrollBody>.dataTable>thead>tr>th:after,
.fc-state-default .fc-button-effect {
    display: none
}

.dataTable>thead>tr>th[class*=sort]:hover {
    color: #547EA8
}

.dataTable>thead>tr>th[class*=sorting_] {
    color: #307ECC
}

.dataTable>thead>tr>th.sorting_asc,
.dataTable>thead>tr>th.sorting_desc {
    background-image: -webkit-linear-gradient(top, #EFF3F8 0, #E3E7ED 100%);
    background-image: -o-linear-gradient(top, #EFF3F8 0, #E3E7ED 100%);
    background-image: linear-gradient(to bottom, #EFF3F8 0, #E3E7ED 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeff3f8', endColorstr='#ffe3e7ed', GradientType=0)
}

.dataTable>thead>tr>th.sorting_desc:after {
    content: "\f0dd";
    top: -6px;
    color: #307ECC
}

.dataTable>thead>tr>th.sorting_asc:after {
    content: "\f0de";
    top: 4px;
    color: #307ECC
}

.dataTable>thead>tr>th.sorting_disabled {
    cursor: inherit
}

.dataTables_scrollHeadInner {
    width: auto!important
}

.dataTables_scrollHeadInner>.dataTable>thead>tr>th {
    border-bottom-width: 0!important
}

.dataTables_borderWrap .dataTables_scrollBody,
.dataTables_borderWrap .dataTables_scrollHead {
    border: 1px solid #ddd!important;
    border-width: 0 1px!important
}

.dataTables_borderWrap .dataTables_scrollBody .table-bordered,
.dataTables_borderWrap .dataTables_scrollHead .table-bordered {
    border-left-width: 0;
    border-right-width: 0
}

.dataTables_borderWrap .dataTables_scrollBody .table-bordered>tbody>tr>td:first-child,
.dataTables_borderWrap .dataTables_scrollBody .table-bordered>thead>tr>th:first-child,
.dataTables_borderWrap .dataTables_scrollHead .table-bordered>tbody>tr>td:first-child,
.dataTables_borderWrap .dataTables_scrollHead .table-bordered>thead>tr>th:first-child {
    border-left-width: 0
}

.dataTables_borderWrap .dataTables_scrollBody .table-bordered>tbody>tr>td:last-child,
.dataTables_borderWrap .dataTables_scrollBody .table-bordered>thead>tr>th:last-child,
.dataTables_borderWrap .dataTables_scrollHead .table-bordered>tbody>tr>td:last-child,
.dataTables_borderWrap .dataTables_scrollHead .table-bordered>thead>tr>th:last-child {
    border-right-width: 0
}

table.dataTable {
    clear: both;
    max-width: none!important
}

table.dataTable th:active {
    outline: 0
}

div.dataTables_scrollHead table {
    margin-bottom: 0!important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

div.dataTables_scrollHead table thead tr:last-child td:first-child,
div.dataTables_scrollHead table thead tr:last-child th:first-child {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important
}

div.dataTables_scrollBody table {
    margin-bottom: 0!important
}

div.dataTables_scrollBody tbody tr:first-child td,
div.dataTables_scrollBody tbody tr:first-child th {
    border-top: none
}

.tableTools-container {
    margin-bottom: 8px;
    position: relative
}

.gritter-item-wrapper.dt-button-info {
    padding: 12px 11px 8px;
    z-index: 1999
}

.gritter-item-wrapper.dt-button-info>h2 {
    margin-top: 0
}

.dt-button-collection .dropdown-menu {
    display: block;
    z-index: 1101
}

.dt-button-collection .dropdown-menu>li>a {
    color: #888;
    text-decoration: line-through
}

.dt-button-collection .dropdown-menu>li>a.active {
    color: #333;
    text-decoration: none
}

div.dt-button-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 1100;
    opacity: .1
}

.dataTable>tbody>tr.selected>td {
    background-color: #dff0d8
}

.dataTable>tbody>tr.selected:hover>td {
    background-color: #d0e9c6
}

div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 60px;
    margin-left: -40%;
    margin-top: -25px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: #fff;
    border: 2px solid #DDD;
    background-color: rgba(255, 255, 255, .66)
}

.fc-toolbar h2 {
    font-size: 22px;
    color: #65A0CE
}



.table-bordered,
td,
th {
    border-radius: 0!important
}

.table>thead>tr {
    color: #707070;
    font-weight: 400;
    background: repeat-x #F2F2F2;
    background-image: -webkit-linear-gradient(top, #F8F8F8 0, #ECECEC 100%);
    background-image: -o-linear-gradient(top, #F8F8F8 0, #ECECEC 100%);
    background-image: linear-gradient(to bottom, #F8F8F8 0, #ECECEC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0)
}

.table>thead>tr>th {
    border-color: #ddd;
    font-weight: 700
}

.table>thead>tr>th .ace-icon:first-child {
    margin-right: 2px
}

.table>thead>tr>th:first-child {
    border-left-color: #F1F1F1
}

.table>thead>tr>th:last-child {
    border-right-color: #F1F1F1
}

.table.table-bordered>thead>tr>th {
    vertical-align: middle
}

.table.table-bordered>thead>tr>th:first-child {
    border-left-color: #ddd
}

td.center,
th.center {
    text-align: center
}

td .lbl,
th .lbl {
    margin-bottom: 0
}

td .lbl:only-child,
th .lbl:only-child {
    vertical-align: top
}

.table-header {
    background-color: #307ECC;
    color: #FFF;
    font-size: 14px;
    line-height: 38px;
    padding-left: 12px;
    margin-bottom: 1px
}

.table-header .close {
    margin-right: 8px;
    margin-top: 0;
    opacity: .45;
    filter: alpha(opacity=45)
}

.table-header .close:hover {
    opacity: .75;
    filter: alpha(opacity=75)
}

th.detail-col {
    width: 48px;
    text-align: center
}

tr.detail-row {
    display: none
}

tr.detail-row.open {
    display: block;
    display: table-row
}

tr.detail-row>td {
    background-color: #f1f6f8;
    border-top: 3px solid #d1e1ea!important
}

.table-detail {
    background-color: #fff;
    border: 1px solid #dcebf7;
    width: 100%;
    padding: 12px
}

.table-detail td>.profile-user-info {
    width: 100%
}