body{
    margin: 0; padding: 0; font-family: 'Roboto', sans-serif; color:#333;
    font-size: 16px; font-weight: normal; 
    background: #e6e7e8 url('../img/crowd.png') left top;}

*{margin: 0; padding: 0; box-sizing: border-box;}
img{width: 100%; height: auto;}
a, a:hover{ color: initial; text-decoration: none;}
input{ border: none; outline: none;background:none;}

.crowd-bg {background: #0072bc url('../img/crowd-splash.png') no-repeat left top;height: 100vh; background-size: cover;}
.logo{padding: 20px;margin-top: 220px;}
.overflow{overflow: hidden; position: relative; height: 100%;}


/*-------------- start social Login ----------------------*/ 

.load{position: fixed; left: 0; top: 0;	width: 100%; height: 100%;z-index: 9999999;}
.logo1{padding: 10px; margin: 40px 0;}
.social-login .row1{background: #3B5998; width: 90%;height: 50px;color: #fff;margin-left: 5%;}
.social-login .row1 img{width: 50px; padding: 12px}
.social-login .g{background: #DB4437;margin-top: 20px;}
hr {margin-top: 3rem; border-top: 1px solid rgba(0,0,0,.5);}
.or{margin-left: 5%;}
.line{width: 42%; height: 1px; background: rgba(0,0,0,0.6); margin-top: 55px; display: inline-block; vertical-align: super;}
.login{	margin: 40px auto; width: 90%; padding-bottom: 100px;}


/*-------------- Login Page ----------------------*/ 

.mrgn-left .zmdi{margin-top: 25px; margin-bottom: 25px; font-size: 25px;}
.mrgn-left{	margin-left: 10px;}

.form{margin-top: 30px;}
.form input{ margin: 30px 0 0 0; width: 95%; padding: 12px 0 0 0; font-size: 20px;}
.form input[type=submit], .form input[type=reset]{background: #0072bb; color: #fff; font-size: 20px; box-shadow: 1px 1px 10px #555; 
    padding: 15px 0; margin-top: 10px; margin-bottom: 15px; -webkit-appearance: none; }

.frgt-pwd a {color: #0072bb;margin: 15px 0; display: block;}
.wrap-input { width: 95%; position: relative; border-bottom: 1px solid #888; margin-bottom: 10px;}
.focus-input {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
.focus-input:before { content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 0%; height: 1px;
     background: #0072bb; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s;  -moz-transition: all 0.4s;}

.focus-input:after {content: attr(data-placeholder); display: block; width: 100%; position: absolute; top: 16px; left: 0; margin-top: 26px; 
    ine-height: 1.2; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; color:#555; }
.input:focus + .focus-input::after {top: -4px; font-size: 13px; color: #0072bb; }
.input:focus + .focus-input::before {width: 100%; }
.focus .input + .focus-input::after {top: -4px; font-size: 13px; color: #0072bb; }
.focus .input + .focus-input::before {width: 100%; }
.error .input + .focus-input::before {width: 100%; background: red; }

.error-text{position: absolute; width: 100%; left: 0; bottom: -22px; font-size: 13px; color: red; display: none; }
.error .error-text{display: block; }
.figure-caption {margin-top: 60px; width: 95%; }
.font-style{margin-top: 25px; font-weight: 300; }
.search-input{width: 100%; }
/*.selects{margin-top: 35px;}*/
.selects {
    margin-top: 35px;
    overflow: scroll;
    height: 50%;
}


.selects .box{border: 1px solid #0072ab; display: inline-block; padding: 5px 30px 5px 15px; margin-top: 12px; cursor: pointer; color: #0072bc;}
.selects .box.active{background: #0072bc; color: #fff; }
.selects .box .zmdi {margin-top: 0; margin-bottom: 0; font-size: 20px; display: none; }
.selects .box .zmdi.active{display: inline-block; }
.selects .box .zmdi.zmdi-check{font-size:16px; } 
.search-input .focus-input:after{color: #888; } 

footer{margin-top: 31px; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 9; background: #fff;} 
.col-12.bg{background: #0072bc; color: #fff; }
.col-12.bg span{float: right; font-size: 20px; cursor: pointer; background: #444; padding: 15px; margin-right: -15px; transition: all 0.4s linear; }
.col-12.bg span.active{background: transparent; }
.col-12.bg span.active a{color: #fff; }
.col-12.bg .zmdi {margin-top: 19px; margin-bottom: 16px; font-size: 25px; color: #fff; }




/*-------------- Home Style ----------------------*/ 

.header-bg{background: #0072bc; color: #fff;}
.header-bg.active{position: fixed; width: 100%; left: 0; top: 0; z-index: 9;}
.header-bg .zmdi{ margin-top: 18px; margin-bottom: 17px; transition: 0.3s;font-size: 25px;}
i.zmdi.zmdi-close {transform: rotate(90deg);}
.header-heading{ font-size: 20px; font-weight: bold; text-transform: uppercase; padding-top: 19px;text-align: center;}
a.text-white img {margin-bottom: 18px; margin-top: 17px; width: 25px; }
.mrgn-left a.text-white img {margin-top: 30px; margin-left: -4px;}



/*
nav .menu-icon{position: absolute; left: 0; top: 0; width: 60%; height: 100%; z-index: 9; background: #0072bc; margin-top: 60px;
 padding: 0 15px; color: #fff; display: none;}
nav .menu-icon.active{ display: block;}
nav .menu-icon li{list-style: none; padding: 5px 0;}
nav .menu-icon li a{    color: #fff;}
nav .menu-icon li .zmdi{  font-size: 18px; margin-right:15px;}
*/

/* menu  icon*/
.menu-icon-wrapper svg {position: absolute; position: absolute; top: -5px; left: -24px; transform: scale(0.07); } 
.menu-icon-wrapper .menu-icon-trigger {margin-left: -6px; margin-top: 12px; }
.dummy{z-index: 9; height: 0;}
.menu-icon-wrapper {margin: 0;}
.dummy__item:first-child{margin-top: 6px}
.dummy__item{margin: 0.1em 0.4em;}
.dummy__item > a{color: #fff; padding: 11px; display: block; cursor: pointer;}
.dummy__item > a:hover{color: #fff; text-decoration:none; cursor: pointer;}  
.dummy .dummy__item span {margin-top: 5px; margin-right:5px; transition: 0.3s; font-size: 20px;}



/* body*/

.que-group{background: #fff; padding: 15px; margin-top: 15px; padding-bottom: 5px; position: relative;}
.bottom-line{background: #ddd; width: 100%; height: 1px; margin-top: 10px; margin-bottom: 10px;}
.que-heading { font-size: 18px;}
.radius-img{border-radius: 100%;overflow: hidden; width: 40px;height: 40px;}
.profile-border {border: 1px solid #3d8cda!important; border-radius: 100%; width: 50px; height: 50px; padding: 10px; position: absolute; left: 10px; top: -5px;}
.profile-border:after {content: ''; position: absolute; right: -3px; margin: auto; width: 5px; height: 30px; background: #fff;}
.profile-border:before { content: ''; position: absolute; left: -3px; margin: auto; width: 5px; height: 30px; background: #fff;}


.post-name{margin-top: 5px;margin-left: 5px;}
.post-time{font-size: 14px; margin-top: -6px; margin-left: 5px; display: block; font-weight: 300;}
.close-que{ position: absolute;right: 0;top: 0; font-size: 16px;margin: 3px; margin-right: 6px;}
.pdng{padding:5px; line-height: 1;}

.option-img{width:70px; height:70px; position:relative; margin:-10px auto 5px;}
.option-img img {position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; border:5px solid #ddd;} 
.fade-text{color: #777;}

.progress-rltv{position: relative;}
.vote_percent {position: absolute; left: 0px; top: 0px; } 
.percent_value { display: block; position: absolute; width: 100%; z-index: 1; font-size: 14px; color: #fff; top:28px;}
canvas {height: 70px; width: 70px;}

.voted{width: 25px; height: 25px; color:#fff; line-height: 1.5; background:#138808; position: absolute; 
	left: 0; bottom: -8px; z-index: 9; border-radius: 50%; right: 0; margin: 0 auto;}

.social-click{padding-bottom: 5px;}
.social-click img{width: 23px;}
/*.social-click .offset-3 { margin-left: 17%; padding:0;}*/
.social-click .col-2 {max-width: 11%;}
.social-click .counts {float: right; text-align: right;}

.social-share{ background: #fff; z-index:9; width: 78%; position: absolute; right: 0px; bottom: 44px; display: none} 
.social-share:before{ content: ''; border-left: 15px solid transparent;
 border-right: 15px solid transparent; border-top: 15px solid #fff; position: absolute; bottom: -15px; left: 18px;}
.bg-share.active{background: rgba(0,0,0,0.3); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.social-share img{width: 30px; margin: 10px;}


.comment-header {position: fixed; width: 100%; left: 0;  top: 0; z-index: 9;}
/*.comment-header.active {position: fixed; width: 100%; left: 0;  top: 0; z-index: 9;}*/

.comment-box {background: #fff; padding:15px 0px; overflow: scroll;}
.comment-box .pdng-left{padding-left: 5px; margin-top:-5px;}
.comment-box .radius-img {width: 35px; height: 35px;}
.comment-box .profile-border { width: 45px; height:45px; }
.comment-box .post-name{font-size: 14px; margin-left: 0;}
.comment-box .post-time{font-size: 12px; margin-left: 0; margin-top: -10px;}
.comment-box .text{font-size: 14px; display:block; line-height: 1.4;}
.comment-like img{width: 18px;}
.comment-box .pdng-left .small{font-size: 14px; color: #777; margin-left: 10px; margin-bottom: 10px; cursor: pointer;}

.reply{margin-left: 45px; margin-top: 5px;}
.reply:before, .comments:before{content:''; border-bottom: 1px solid #ddd; width: 100%; margin-top: 10px; margin-bottom: 14px;}
.comment-box .reply .radius-img {width: 30px; height: 30px;}
.comment-box .reply .profile-border { width: 40px; height:40px;}
.comment-box .reply .post-name{font-size: 13px; margin-left: 0;}
.comment-box .reply .post-time{font-size: 11px; margin-left: 0; margin-top: -10px;}
.reply .comment-like img {width: 16px;}
.comment-box .reply .text{font-size: 13px; display:block; line-height: 1.4;}
.row.comments:first-child{margin-top: 35px;}
.comments:first-child:before{content:''; border-bottom: none; width: 100%; margin-top: 10px; margin-bottom: 14px;}
/*.row.comments{margin-bottom: 20px;}*/


    /*.footer{position: fixed; width: 100%; left: 0; bottom: 0; z-index: 9; background: #ddd; padding-top: 10px;}
    .footer textarea{ padding: 5px; padding-right: 25px; border: 0; outline: none;}
    .footer textarea::placeholder {font-size: 12px; padding-top: 3px; padding-left: 5px;}
    .footer i{font-size: 28px; color: #999; margin-left: 5px; margin-top: 2px;}
*/


/* ----------------create poll ---------------------*/
.full-pd-15{background: #fff; padding: 15px;}
.form.que {margin-top: 20px;}
.que .wrap-input {margin-bottom: 30px;}
.que .que-type {margin-bottom: 45px; }
.que input {margin: 0px 0 0 0; padding: 0px 0 0 0;}
.que .focus-input {top: -35px; }
.que .focus-input:before {bottom: -36px;}
.option-field {width: 60%;}

.file-icon {color: #000; position: absolute; top: 12px; right:-20px; fill-opacity: 0.6;}
.img-upload input[type="file"] {display: none;}
.file-name {position: absolute; margin-left: 5px;}
.file-close {display: none; position: absolute; right: -106px; top: 0; cursor: pointer; z-index: 9}
.file-icon.active .file-close{display: block;}
.add, .remove {font-size: 20px; text-align: right; cursor: pointer;}
.add {margin-right:10px; margin-left:160px}


.que .selects { background: rgba(0,0,0, 0.12); margin: 10px -15px; padding: 15px; height: 170px;}
.option {white-space: nowrap; overflow: auto; padding-bottom: 30px; margin-bottom: 10px;}
.scrollbar-macosx {padding-bottom: 15px !important; margin-bottom: 10px;}
.que input[type=submit], .form input[type=reset] { display: inline-block; width: 45%;}
.que .button{margin-top: 30px;}
.que input[type=submit] {margin-left: 15px;}





/*----------------- profile page----------------*/

.profile-bg {height: 87px; background: #0072bc; margin-top: -1px;} 
.profile-nms .img{ width:100px; height:100px; position:relative; margin:0 auto; margin-top:-50px; }
.profile-nms .img-s{overflow:hidden; width:100px; height:100px; border-radius:100%;}

.profile-nms .borderline{border:1px solid #0072bc; position:absolute; width:110px; height:110px; border-radius:100%; left:-6px; top:-6px;}
.profile-nms .borderline:before, 
.profile-nms .borderline:after{content: ''; width:5px; height:21px; background: linear-gradient(#0072bc 50%, #e6e7e8 50%); 
position:absolute; top:41%;}
.borderline:before{left:-3px;}
.borderline:after{right:-3px;}

.profile-nms .edit-pic {background: #0072bc; color: #fff; width: 30px; height: 30px; border-radius: 100%; position: absolute; 
    left: 34px; bottom: -12px; line-height: 2; text-align: center;}
.profile-nms .edit-pic input{ display: none;}
.profile-nms .col-12.text-center{ margin-top: 15px;}
.profile-info a{padding: 7px 25px; background: #fff; border: 1px solid #0072bc; margin-top: 16px;display: block; 
    text-align: center; color: #0072bc;}
.profile-info a.active{background:#0072bc; color:#fff;}

.tabs-count { border-top:1px solid #666; border-bottom: 1px solid #666;}
.tabs-count .col-4.bdr{border-left:1px solid #666; border-right: 1px solid #666;}
.tabs-count .col-4.text-center{line-height: 1.1;  padding:7px;}
.tabs-count .col-4.text-center span{color: #777; font-size: 15px;}

.profile-details {background: rgba(255,255,255,0.9); padding: 0; max-width: 100%; margin: 0 auto;}
.profile-details .contact { color:#0072bc;}
.profile-details .text-right img{ width:13px;}
.profile-details .row{border-bottom: 1px solid rgba(0,0,0,0.1);}
.profile-details .row:first-child{padding-top: 10px;}
.profile-details .pdng-top {padding: 15px 0;}
.profile-details span {margin-left: -5px;}



/* ------------ notifications -----------------*/

/*.full-pg{padding-left:0; padding-right:0; margin-top: 0px;}
.full-pg .main-notify:first-child {margin-top: 0px;}*/
.main-notify:first-child{margin-top: 10px;}
.main-notify {background: #fff; padding: 12px 10px; border-bottom: 1px solid #ddd;}
.main-notify:after {border: 1px solid #000;}
.notic-text {font-size:15px; font-weight: normal;}
.unread{background: #ddd; border-bottom: 1px solid #ccc;}
.unread .profile-border:after, .unread .profile-border:before{background: #ddd;}

/* ------------ messages -----------------*/
.search{position: relative;}
.search input{ border:1px solid #999; width: 100%; border-radius: 0px; padding: 6px 3px; padding-left: 10px; background: #fff}
.search i {position: absolute; top:10px; right: 15px; font-size: 20px; color: #bbb;}
.main-notify .unread-count {color:#777; font-size:14px; font-weight:100;}
.unread-msg {font-weight: 500;}
.search input::placeholder{color:#bbb;}

.main-notify .post-name {margin: 0;}
.main-notify .post-time {margin-left: 0px; margin-top: 2px; }
.mt-65 {margin-top: 65px;}
.search-friends{margin-top: 75px;}

/* ------------ Chat -----------------*/

.chat-name{margin-top: 6px;}
.chat-name .col-3 {margin-top: 3px; margin-left: -20px;}
.chat-name .profile-border{border: 1px solid #fff!important;}
.chat-name .profile-border:before, .chat-name .profile-border:after{ background: #0072bc;}

.chat-l {width: 80%; background: #fff; padding:10px; font-size:14px; position: relative;}
.chat-l:before{content:''; width: 12px; height: 12px; transform: rotate(45deg); background: #fff; position: absolute; top: 14px; left: -6px;}
.my-chat{margin-top: 5px;}
.chat-time{font-size: 12px; color: #0072bc;}
.chat-r {width: 80%; background: #ccc; padding:10px; font-size:14px; position: relative;}
.chat-r:after{content:''; width: 12px; height: 12px; transform: rotate(45deg); background: #ccc; position: absolute; top: 14px; right: -6px;}

.chat-box  {background: #fff; padding:10px; position: fixed; bottom: 0; left: 0; width: 100%;}
.chat-box.bg {background: #eee;}
.chat-box .textarea{width: 100%;-webkit-appearance:none; outline: none; padding: 5px; border-radius: 0; border: 1px solid #999;}
.chat-box .textarea.focus{border: 1px solid #0072bc;}
.send-chat.bc {background: #fff; color: #888; padding:10px; text-align: left; margin-left: -10px; font-size: 20px; margin-top: -2px; width: 40px;}
.send-chat{background: #0072bc; padding-left: 2px; padding-top: 2px; position: absolute; bottom: 0; color: #fff; border:none; 
    outline:none;  height:36px; width: 36px; border-radius: 100%; text-align: center;}

.chat-attached .file-icon{color: #777; top: 3px; left: 3px; font-size: 20px;}
.file-icon.cmr{left:12px; }
.chat-box .row > div{vertical-align: bottom; display: inline-block; position: relative;}
.chat-box .row .img-upload {position: absolute; bottom: 34px; left: 0; }
/*[contenteditable=true]:empty:before{content: attr(placeholder); display: block;}*/
.plchldr div[placeholder]:empty:before {content: attr(placeholder); color: #999; font-size: 14px;}


/* ------------ Voters List -----------------*/
.search-friends.voter-serach {margin-top: 130px;}
/*.search-friends.voter-serach {position: fixed; left: 0; width: 100%; top: 45px; z-index: 9;}*/
/*.tabs{background: #fff; margin-left: -15px; margin-right: -15px; padding-left:2px; margin-top: -5px;}*/
.taber-group .tabs ul { position: fixed; width: 100%; left: 0; top: 60px; background: #fff; z-index: 9;} 
.taber-group .content.mt-130{margin-top: 130px;}
.taber-group ul li {display: inline-block; border-right: 1px solid #ccc; padding: 14px 22px; position: relative;}
.taber-group ul li:last-child {border-right: 0px solid #bbb;}
.taber-group ul li.active a {color:#0072bc;}
.taber-group ul li.active:after{content: ''; position: absolute; left: 38%; bottom:-8px; background: #fff; width: 15px; 
height: 15px; transform: rotate(45deg);}
.tab-text {display: none;}
.tab-text.active {display: block;}
.close-btn{background: #aaa; padding: 5px 7px; color: #fff; margin-top: 8px; font-size: 14px;}
.close-btn.request{background: #0072bc; vertical-align: top; padding: 4px 7px; margin-top: 9px;}