body{font-family: 'Roboto', sans-serif; font-size:13px; font-weight:normal;}
*{outline:none !important;text-decoration:none !important;}

/* ---- Login Screen ---- */
.login-page{ background:url(/refer_a_friend/app-img/bgimg.png) left bottom no-repeat  !important; background-size:cover !important; padding:0px; position: fixed; width:100%; height:100%; overflow-y:auto;}
.login-page .screen-caption{ background:url(/refer_a_friend/app-img/logo-caption.png) left bottom  no-repeat !important; background-size:cover !important; height:190px; text-align:left; padding-left:20px; padding-top:20px;}

/* ---- Login Form ---- */

.login-page form{ width:250px; margin:auto; display:table;}
.login-page .input-icon{ width:100%;}
.login-page .input-icon i{ padding-left:0px !important; margin-left:-3px !important; color:#fff !important; font-size:17px;}
.login-page input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before, 
.login-page input[type=checkbox].ace.ace-switch.ace-switch-5:checked + .lbl::before{background-color: #8bbc67;border: rgba(139, 188, 103,0.5);text-indent: 9px;}
.login-page input.ace.ace-switch.ace-switch-4[type="checkbox"] + .lbl::before, 
.login-page input.ace.ace-switch.ace-switch-5[type="checkbox"] + .lbl::before { background-color:rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.1);}


input[type=checkbox].ace.ace-checkbox-2 + .lbl::before, input[type=radio].ace.ace-checkbox-2 + .lbl::before{background-color:#8bbc67; border: none;  -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.login-page input[type=checkbox].ace.ace-checkbox-2:checked + .lbl::before, .login-page input[type=radio].ace.ace-checkbox-2:checked + .lbl::before{background-color: #8bbc67; border:1px solid #8bbc67; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius:100px;}
.login-page input[type=checkbox].ace.input-lg + .lbl::before { border-radius: 4px;font-size: 14px; height: 22px; line-height: 22px; min-width: 22px; top: auto; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius:100px; margin-top:-2px; margin-right:3px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }

.login-page .muted{ color:#fff;}
.login-page .btn, .login-page .btn:focus, .login-page .btn:hover   { background-color:transparent !important; border:#fff 1px solid !important; color:#fff !important; box-shadow:none !important; padding-top:5px; -webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}

.login-page .btn-inverse, .login-page .btn-inverse:focus, .login-page .btn-inverse:hover{background-color:#1a4ac6 !important; border:#1a4ac6 1px solid !important; color:#fff !important; box-shadow:none !important;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}
	
.login-page .signin, .login-page .facebook{ padding-top:8px !important; padding-bottom:9px !important; font-size:16px;}
.login-page .facebook i{ font-size:17px;}
.create-account a{ color:#fff !important; display:block; text-align:center; text-decoration:none; font-size:14px;}

.login-page #msg-info{ background:#d43a3a; position:relative; display:table; padding:7px 7px; line-height:normal !important; font-size:12px; color:#FFF; margin-top:-5px;  text-align:left !important;}
.login-page #msg-info:before {   content: "";  vertical-align: middle; position:absolute;  margin-left: 0px;  width: 0;   height: 0; 
  border-left:7px solid transparent;  border-right:8px solid transparent;  border-bottom:10px solid #d43a3a;  top: -10px;}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
.login-page .signin, .login-page .facebook{ padding-top:7px !important; padding-bottom:5px !important; font-size:14px;}

}
.or_spacer { position:relative;}
.or_spacer hr{ border: 0; height: 1px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); width:100%; margin:15px 0px 10px 0px !important;}
.or_spacer span{ background:#008bff; color:#fff; display: inline; margin:auto; padding:0px 5px; line-height:normal; text-align:center;left: 45%; position:absolute; top:7px; font-size:14px; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}



.login-page .login-page select, 
.login-page textarea, 
.login-page input[type="text"], 
.login-page input[type="password"], 
.login-page input[type="datetime"], 
.login-page input[type="datetime-local"], 
.login-page input[type="date"], 
.login-page input[type="month"], 
.login-page input[type="time"], 
.login-page input[type="week"], 
.login-page input[type="number"], 
.login-page input[type="email"], 
.login-page input[type="url"], 
.login-page input[type="search"], 
.login-page input[type="tel"], 
.login-page input[type="color"] 
{background-color:transparent !important; border-left:none !important; border-right:none !important; border-top:none !important; border-bottom:1px solid rgba(255,255,255,0.7); color:#fff; width:100%; }

.login-page textarea:focus, 
.login-page input[type="text"]:focus, 
.login-page input[type="password"]:focus, 
.login-page input[type="datetime"]:focus, 
.login-page input[type="datetime-local"]:focus, 
.login-page input[type="date"]:focus, 
.login-page input[type="month"]:focus, 
.login-page input[type="time"]:focus, 
.login-page input[type="week"]:focus, 
.login-page input[type="number"]:focus, 
.login-page input[type="email"]:focus, 
.login-page input[type="url"]:focus, 
.login-page input[type="search"]:focus, 
.login-page input[type="tel"]:focus, 
.login-page input[type="color"]:focus{ border-bottom:1px solid rgba(255,255,255,1);color:#fff;  width:100%;}
.login-page input::placeholder, .login-page .form-control::placeholder {color:rgba(255,255,255,0.9) !important;}


/* ======== Main Screen ========= */
#mainscreen{ background:#009cff url(/refer_a_friend/app-img/main-screen-bg.png) right bottom no-repeat  !important; background-size: cover !important; padding:0px; position: fixed; width:100%; height:100%; overflow-y:auto;}
#menubar{ background:#2a56c6; box-shadow: 0px 0px 15px rgba(0, 17, 61, 0.8); display:table; width:100%; padding:2px 10px 6px 10px; color:#fff; position: fixed; top:0; z-index:9; }
#menu-toggle{ width:10%; float:left; padding: 15px 0px 9px 5px; cursor:pointer; position:relative; z-index:99;}
#menu-toggle .icon-menu{ width:35px; display:block;}
#menu-toggle .icon-menu .icon-bar {background-color: #fff; border-radius: 0;  float: left; height: 2px; margin-bottom: 3px; width: 18px;}

.menubar-logo{ padding: 6px 0px 4px 0px; color:#fff !important;  width:100%; float:left; text-align:center; font-size:19px; font-family: 'Roboto Condensed', sans-serif;font-weight:700; position:absolute; left:0;}
.menubar-logo a{color:#fff !important;}
.menubar-logo span{ position:relative; top:3px;}
.menubar-logo img{ height:32px; vertical-align:middle;}

.notifi{width:10%; float:right; font-size:20px;  padding: 12px 10px 2px 0px; position:relative; font-weight:normal !important;}
.notifi .count{ background:#f02d2d; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; height:20px; width:20px; line-height:20px; font-size:12px; color:#fff; position:absolute; right: -10px;  top: -5px;  font-family:Arial, Helvetica, sans-serif; text-align:center; display:inline-block;}
.notifi  .fa-bell-o{ position:relative; float:right;}

#search-icon{width: auto; float:right; font-size:20px;padding: 7px 5px 0px 7px; position:relative; z-index:0; font-weight:normal !important; top:-7px;}

#overlay {background: rgba(255, 255, 255, 1); display: none; /*height: 95%;*/ left: 0;top: 0;width: 100%;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  display: none;  position: fixed; padding:57px 0px 0px 0px; margin-top:46px;
}
#overlay .search-icon{width: auto; float:right; font-size:20px;  position: absolute;  right: 15px;
    top: 10px;   text-align:right; color:#fff;  z-index:99;}
	
#overlay .search-box{ padding:16px 15px 15px 15px; box-shadow: 0px 0px 4px rgba(0, 17, 61, 0.2) !important; width:100%; border:none; position:absolute; top:0; left:0px; background:#00a3ff; color:#fff; font-size:16px; font-weight:300;font-family: 'Open Sans', sans-serif;}

#overlay input::placeholder, #overlay .search-box::placeholder { color: #fff;  opacity: 0.7;}
#overlay .search-result{ height:100%; width:100%; overflow-y:auto;font-size:14px; padding-bottom:15px;}


/* ======== banner ========= */
.banner-bg{background:url(/refer_a_friend/app-img/banner-bg.png) left top no-repeat !important; background-size: cover !important; height:230px ; display:table; width:100%;padding-top: 50px; color:#fff;}
.banner-bg .banner-wrp{ padding:25px 15px 10px 15px ; line-height:normal;}
.banner-bg span{ display:block;}
.banner-bg .sub-title{ font-size:17px; padding-bottom:3px; font-weight:300;font-family: 'Open Sans', sans-serif; }
.banner-bg .main-title{font-size:27px;  font-weight:700; background:url(/refer_a_friend/app-img/banner-sp.png) left bottom no-repeat !important; background-size: contain !important; padding-bottom:4px; margin-bottom:5px;}
.banner-bg .details{ font-size:15px;  font-weight:700; font-family: 'Roboto', sans-serif;}

/* ======== main-menu-links ========= */
.main-link{ width:100%;}
.main-link ul{ display:table; width:100%; list-style:none; padding:0px; margin:0px; text-align: left;}
.main-link ul li{ background:url(/refer_a_friend/app-img/mian-link-sp.png) left bottom no-repeat !important; background-size: contain !important; width:100%; font-size:15px; color:#fff; display:table; margin-bottom:7px; padding-bottom:7px; padding-left:20px; line-height:42px;}
.main-link ul li:last-child{ background:none !important; margin-bottom:0px; padding-bottom:0px;}
.main-link ul li span{ height:40px; width:47px; float:left; padding-right:15px; vertical-align:middle; }
.main-link ul li span img{ width:100%;}
.main-link ul li a{color:#fff !important; text-decoration:none; }


/* ======== Nav menu Panel ========= */
.sn-backdrop{background:#000;position:absolute;left:0;top:0;bottom:0;right:0;display:none;opacity:0;z-index:50;will-change:opacity;}.sn-visible .sn-backdrop{display:block}.sn-sidenav{position:fixed;left:0;top:0;height:100%;z-index:100;overflow-y:auto;will-change:transform;box-shadow:0 0 30px rgba(0,0,0,0.6)}.sn-content{position:relative;z-index:10}.sn-visible,.sn-visible body,.sn-visible .sn-content{overflow:hidden}html{height:100%}
body{min-height:100%}
/* ======== Nav panel Css ======== */
#sidenav {background: white;width: 300px;}
#sidenav .headerr {padding: 30px 15px 15px 15px; 	background:#019ae8 url(/refer_a_friend/app-img/panel-bg.png) no-repeat; background-size:cover;	background-size: cover;}
#sidenav .avatarr {font-size: 32px; text-align:center;  display:inline-block; font-style:normal;border-radius: 999px;color: rgba(255,255,255,0.8);background: rgba(255, 255, 255, 0); height:60px; width:60px; line-height:55px;font-weight:300 !important; font-family: 'Open Sans', sans-serif; border:2px solid rgba(255,255,255, 0.5);}
#sidenav .title {margin-top: 5px;color:#fff; font-size: 19px;font-weight:300; font-family: 'Open Sans', sans-serif;}
#sidenav .headline {color:#fff;font-size: 13px;font-weight:400; font-family: 'Open Sans', sans-serif;}
#sidenav  .avatarr img{ width:64px; height:64px; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
#sidenav ul {margin: 0;padding:8px 0px 0px 0px;list-style: none;}
#sidenav ul li {color: #333;padding: 4px 15px;display: flex; line-height:40px; font-size: 14px;font-weight:400; font-family: 'Open Sans', sans-serif; position:relative;}
#sidenav ul li a{ text-decoration:none !important;}
#sidenav ul li i {margin-right: 20px;}
#sidenav ul li i img{ width:29px; vertical-align:middle;}
#sidenav ul li.active {background: #EEE;}
#sidenav ul li .count{ background:#f02d2d; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; height:23px; width:23px; line-height:25px; font-size:13px; color:#fff; position:absolute; right: 10px;  top: 13px;  font-family:Arial, Helvetica, sans-serif; text-align:center; display:inline-block;}

/* ======== Menu screeen ======== */
#menu-screen{ background:#fff !important; padding:0px; position: fixed; width:100%; height:100%; overflow-y:auto;}
.screen-title{ background:#00a3ff; padding-top:50px; color:#fff; width:100%; }
.title-wrp{ padding:7px 7px 10px 12px; position:relative; width:100%;}
.icon-title { font-weight:300;  font-family: 'Open Sans', sans-serif; font-size:17px;}
.icon-title span{ display:inline-block; position:relative; top:3px;}
.icon-title img{
	/* [disabled]width: 40px; */
	vertical-align: middle;
	margin-right: 10px;
	height: 32px;
}

/* ======== Menu content ======== */
.page-content{ padding:5px 0px 0px 0px; width:100%; display:table; font-size:14px;}
.list-item{ width:100%; display:block; border-bottom:1px solid #eeeeee; display:block; width:100%;padding:10px 10px; position:relative; float:left;}
.list-item:last-child{border-bottom:none !important;}
.list-item .box-a{ width:50px; float:left; position:absolute; left:10px;}
.list-item .box-a i{-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; overflow:hidden; width:40px !important; height:40px !important; display:block; padding:10px;}
.list-item .box-a img{ width:100%;}
.list-item .box-b{ width:100%;float:left;  padding-left:50px; display:block; padding-top:2px;}
.list-item .box-b span{ color:#999; font-size:12px; display:block; width:100%; }
.list-item .box-b i{ font-size:14px; padding:0px 4px;font-weight:300;  font-family: 'Open Sans', sans-serif; font-style:normal;}

/* ======== Accordion ======== */
.panel{border-width:0 0 1px;background:0 0;box-shadow:none; margin:0px 0px 2px 0px;}
.panel-group{ padding:2px 2px; height:100%; padding-top:2px; width:100%;}
.panel:last-child{border-bottom:none}
.panel-group>.panel:first-child .panel-heading{border-radius:4px 4px 0 0}
.panel-group .panel,.panel-heading{border-radius:0}
.panel-group .panel+.panel{margin-top:0}
.panel-heading{background-color:#fff;color:#3b5998;padding:0;border:#e7e7e7 solid 1px !important; margin-bottom:1px; -webkit-border-radius: 0px !important;-moz-border-radius: 0px !important;border-radius: 0px !important;}
.panel-title a{display:block;color:#3b5998;padding:13px 40px 11px 45px;  margin-top:0px; position:relative; line-height:22px;font-size:16px;font-weight:400;text-decoration:none; position:relative;}
.panel-title a span{ position:absolute; left:13px; top:10px; margin-right:10px; width:24px; height:24px; line-height:27px; text-align:center; background:#3b5998 !important; color:#fff !important; -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
#accordion .panel-heading a:before,#bs-collapse .panel-heading a:after,.panel-heading a:before{font-size:14px;position:absolute;font-family: 'FontAwesome', sans-serif; right:10px;top:12px;}
#accordion{ background:#fafafa; margin-bottom:0px; padding-bottom: 70px; display:table; width:100%;}

#accordion .active a:before, #bs-collapse .active a:after, .active a:before{top:12px;}
.panel-body{background: none !important;border:none !important;box-shadow:none !important; padding:7px 10px 7px 10px;}
.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group{ border:none !important;box-shadow:none !important;}

.panel:last-child .panel-body{border-radius:0 0 4px 4px; }
.panel:last-child .panel-heading{border-radius:0 0 4px 4px;transition:border-radius .3s linear .2s}
.panel:last-child .panel-heading.active{border-radius:0;transition:border-radius linear 0s}
.panel-heading a:before{content:'\f078';transition:all .5s;transform:scale(1)}
#bs-collapse .panel-heading a:after,.panel-heading.active a:before{content:' ';transform:scale(0);transition:all .5s}
#bs-collapse .panel-heading.active a:after{content:'\f077';transform:scale(1);transition:all .5s}
#accordion .panel-heading a:before{content:'\f077';transform:rotate(180deg);transition:all .5s}
#accordion .panel-heading.active a:before{transform:rotate(0);transition:all .5s}

.panel-body span{ position:relative; display:block; border:1px solid #e7e7e7; overflow:hidden;margin-bottom:5px; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }
.panel-body span i{ position:absolute; right:0px; top:0px; height:100%; line-height:26px; color:#c6cfe3; font-size:18px !important; background:#fff; z-index:1; padding:10px;}
.panel-body  span.select-input:hover i{ z-index:-1; background: none;}
.panel-body select > .placeholder{display: none !important;}
.panel-body select option{color:#999999 !important; }
.panel-body input[type="number"]{ padding-right:0px !important;}
select.form-control {padding: 4px 6px !important;  height: 45px;}

.panel-body select, 
.panel-body textarea, 
.panel-body input[type="text"], 
.panel-body input[type="password"], 
.panel-body input[type="datetime"], 
.panel-body input[type="datetime-local"], 
.panel-body input[type="date"], 
.panel-body input[type="month"], 
.panel-body input[type="time"], 
.panel-body input[type="week"], 
.panel-body input[type="number"], 
.panel-body input[type="email"], 
.panel-body input[type="url"], 
.panel-body input[type="search"], 
.panel-body input[type="tel"], 
.panel-body input[type="color"] 
{background-color:transparent !important;width:100%; padding:12px 35px 12px 10px;  border:none !important; background:#fff !important; font-size:14px; font-weight:400;  font-family: 'Open Sans', sans-serif;}

.panel-body textarea:focus, 
.panel-body input[type="text"]:focus, 
.panel-body input[type="password"]:focus, 
.panel-body input[type="datetime"]:focus, 
.panel-body input[type="datetime-local"]:focus, 
.panel-body input[type="date"]:focus, 
.panel-body input[type="month"]:focus, 
.panel-body input[type="time"]:focus, 
.panel-body input[type="week"]:focus, 
.panel-body input[type="number"]:focus, 
.panel-body input[type="email"]:focus, 
.panel-body input[type="url"]:focus, 
.panel-body input[type="search"]:focus, 
.panel-body input[type="tel"]:focus, 
.panel-body input[type="color"]:focus{  width:100%; width:100%; border:1px solid #e7e7e7; border:none !important;}
.panel-body input::placeholder {color:#999999 !important; }
.footer-button{ position:fixed; bottom:20px; width:100%; display:table; z-index:2;}
.footer-button .btn { width:50%;border-radius:0px !important; padding:12px 5px !important; display:block; font-family: 'Open Sans', sans-serif; font-weight:400;}
.footer-button .btn i{ padding-right:7px; font-size:18px; vertical-align:middle;}
.footer-button .btn:first-child{ background:#00a3ff !important; border:none !important; margin:0px !important;  }
.footer-button .btn:last-child{ background:#94c60a !important; border:none !important; margin:0px !important; }
.copyright{position: fixed;bottom: 0;display: block;width: 100%;height: 20px;line-height: 22px;font-size: 9px;color: rgba(255,255,255,1);left: 0;background: #1b47b7;text-align: center;font-family: 'Roboto', sans-serif;text-transform: uppercase;z-index:99;}