/* GENERAL STYLING */

* {
	outline: none;
	resize: none;
}
body,input,select,textarea {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 14px;
}
body {
    margin: 0;
    ackground: #adcef86e;
}
#bg_set,.bg_set {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
#ft_overlay {
    position: absolute;
    inset: 0;
    bottom: -5px;
    background-image: linear-gradient(180deg, transparent 30%, hsl(203, 100%, 10%)), linear-gradient(100deg, black 5%, transparent);
}
#p_chev {
    position: absolute;
    color: #00000063 !important;
    height: 12px;
    line-height: 12px;
    font-size: 13px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
}
    #bg_cover {
        ackground: url('/zibd.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        ransition-duration: 15s;
        -webkit-nimation-name: bg_animate;
        -webkit-animation-duration: 20s;
        animation-name: bg_animate;
        border-radius: 3px;
        animation-duration: 20s;
        animation-iteration-count: infinite;
    }
    @-webkit-keyframes bg_animate {
        0% {filter: grayscale(1) blur(9px);}
        25% {filter: grayscale(1) blur(0);}
        50% {filter: grayscale(1) blur(9px);}
        75% {filter: grayscale(.7) blur(5px);}
        100% {filter: grayscale(1) blur(9px);}
    }
    @keyframes bg_animate {
        0% {filter: grayscale(1) blur(9px);}
        25% {filter: grayscale(1) blur(0);}
        50% {filter: grayscale(1) blur(9px);}
        75% {filter: grayscale(.7) blur(5px);}
        100% {filter: grayscale(1) blur(9px);}
    }
select {width: 97% !important;}
a {
	text-decoration: none;
	color: hsl(0,100%,25%);
	cursor: pointer;
}

.fa-toggle-on {
    color: #888;
    cursor: pointer;
    transform: rotateY(180deg);
}

.fa-square-o, .fa-check-square {
    color: #555;
}

.counters {
    position: absolute;
    background: rgb(500,0,0);
    color: #eee;
    padding: 1px 3px;
    border-radius: 3px;
    right: -7px;
}

	/* for forms */
	#form_fld {
		border: 1px solid hsl(0,100%,20%);
		width: 80%;
		max-width: 350px;
		color: #333;
		font-size: 14px;
		border-radius: 2px;
		padding: 7px;
	}
	#sex:hover,#sex1:hover,.sex:hover {
        	color: hsl(0,100%,35%) !important;
            transition-duration: .2s;
   	}
    .selecter {
        padding: 5px;
        width: 31.5% !important;
        font-size: 11px;
        display: inline-block;
    }

        #loader {
            width: 40px;
            height: 40px;
            font-size: 32px;
            text-align: center;
            color: #ddd;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: 41px;
            background-color: hsl(0,100%,30%);
            -webkit-animation-name: example;
            -webkit-animation-duration: 4s;
            animation-name: example;
            border-radius: 3px;
            animation-duration: 20s;
            animation-iteration-count: infinite;
        }
        @-webkit-keyframes example {
            18% {background-color: hsl(0,100%,40%);}
            36% {background-color: hsl(0,50%,20%);}
            54% {background-color: hsl(0,100%,40%);}
            72% {background-color: hsl(0,50%,20%);}
            85% {background-color: hsl(0,100%,40%);}
            100% {background-color: hsl(0,50%,30%);}
        }
        @keyframes example {
            18% {background-color: hsl(0,100%,40%);}
            36% {background-color: hsl(0,50%,20%);}
            54% {background-color: hsl(0,100%,40%);}
            72% {background-color: hsl(0,50%,20%);}
            85% {background-color: hsl(0,100%,40%);}
            100% {background-color: hsl(0,50%,30%);}
        }
        #pls {
            letter-spacing: 5px;
            animation-name: pulse;
            -webkit-animation-name: pulse;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        @-webkit-keyframes pulse {
            18% {letter-spacing: 1px;}
            36% {letter-spacing: 5px;}
            54% {letter-spacing: 1px;}
            72% {letter-spacing: 5px;}
            85% {letter-spacing: 1px;}
            100% {letter-spacing: 5px;}
        }
        @keyframes pulse {
            18% {letter-spacing: 1px;}
            36% {letter-spacing: 5px;}
            54% {letter-spacing: 1px;}
            72% {letter-spacing: 5px;}
            85% {letter-spacing: 1px;}
            100% {letter-spacing: 5px;}
        }
        
    

/* HOME PAGE STYLING */
	#header {
		line-height: 50px;
		ext-align: center;
		height: 55px;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		background: #fff;
		z-index: 10;
		box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
	}
	#header_offset {
		order: 1px solid #000;
		max-width: 1500px;
		position: relative;
		margin: auto;
	}
		#logo{
			order: 1px solid #fff;
			width: 35%;
			display: inline;
			margin: auto 1% auto 1%;
		}
			#logo_name {
				color: #ddd;
				position: relative;
				top: 2px;
				font-size: 32px;
				display: inline;
				border-radius: 5px;
				background: hsl(0,100%,20%);
				padding: 0 8px;
				margin: auto;
			}
			#logo_slag {
				color: hsl(0,100%,20%);
				position: relative;
				top: 2px;
				left: 20px;
				opacity: .8;
				font-size: 13px;
				display: inline;
			}
	#home_form_cont {
		order: 1px solid #000;
		margin: auto;
		margin-top: 150px;
		width: 90%;
		max-width: 400px;
		min-width: 250px;
	    text-align: center;
	}
		#form_cont, #form_switch {
			display: inline-block;
			position: relative;
			width: 100%;
		}
			#progress_{
				order: 1px solid;
				position: relative;
				margin-bottom: 35px;
				text-align: center;
				display: inline-block;
			}
				#progress_ span {
					background: hsl(218, 92%, 97%);
					padding: 2px 7px;
					border-radius: 100%;
					margin: 0 10px;
					cursor: pointer;
					position: relative;
					z-index: 1;
				}
				#progfill {
					background: hsl(0,100%,50%);
					padding: 12px 11px;
					width: 0%;
					max-width: 93%;
					border-radius: 10px;
					transition-duration: .6s;
					position: absolute;
					left: 0; right: 0; top: -3px;
				}
			#title_md {
				font-size: 18px;
				word-spacing: 1px;
				position: relative;
				bottom: 20px;
				color: #555;
				margin: auto;
			}
			#form_offset {
				order: 1px solid #aaa;
				max-width: 95%;
				margin: auto;
				text-align: center;
			}
				#login {
					order: 1px solid #000;
					border-radius: 5px;
					position: relative;
					order-left: hidden;
					idth: 80%;
					max-width: 350px;
					margin: 20px auto 20px auto;
					padding: 10px;
				}	
					#login label {
						order: 1px solid #000;
						position: absolute;
						cursor: pointer;
						left: 30px;
						margin: 25px 0;
					}
						#sex_cont {
							display: block;
							order: 1px solid #999;
							color: ;
							font-size: 14px;
							text-align: center;
							margin: auto;
							position: relative;
						}
							#sex_cont label {
								cursor: pointer;
								margin: auto 10px;
							}
						#check_txt {
							color: hsl(0,100%,20%);
							font-size: 15px;
							position: relative;
							bottom: 1px;
						}
					#noac_txt {
						font-size: 13px;
						color: hsl(0,100%,25%);
						text-decoration: underline;
						margin: 20px auto;
					}
					#login_button {
						border: 1px solid hsl(0,100%,20%);
						margin: 50px auto 0px auto;
						color: #ccc;
						font-size: 18px;
						border-radius: 2px;
						padding: 5px;
						width: 250px;
						cursor: pointer;
						background: hsl(0,100%,20%);
					}
				#form_foot {
					text-align: center;
					margin: 30px auto;
				}
					#itag {
			        	margin: 2px auto 2px auto;
			        	font-size: 11px;
			        	text-decoration: none;
			        }
					#logo_txt {
						width: 40px;
						height: 40px;
						margin: 30px auto 10px auto;
						line-height: 38px;
						border-radius: 3px;
						background: hsl(0,100%,20%);
						font-size: 35px;
					}

/* RECOVERY STYLING */
		/* ac recovery return */
		#rec_ret_cont {
			order: 1px solid #000;
			padding: 2px;
			margin: 20px auto;
		}
			#ac_rec {
				order: 1px solid #000;
				text-align: center;
				position: relative;
				height: 55px;
				color: #fff;
				margin: 10px auto;
			}
			#bool_q {
				word-wrap: break-word;
				text-decoration: underline;
				font-size: 13px;
				position: initial !important;
    			float: right;
				color: hsl(0,100%,20%,.8);
				margin: auto;
				font-weight: bolder;
				cursor: pointer;
			}
				#ac_rec div {
					order: 1px solid #000;
					display: inline-block;
					border-radius: 5px;
					transition-duration: .6s;
				}
				#rec_img, #rec_icn {
					position: absolute;
					background: #eee;
					width: 50px;
					left: 0px;
					font-size: 15px;
					border-radius: 2px;
					background-size: cover;
					background-position: center center;
					background-repeat: no-repeat;
				}
				#rec_icn {
					background: none;
					color: #888;
				}
				.rec_opt {
					cursor: pointer;
					border-radius: 5px;
				}
				#rec_inf {
					position: absolute;
					width: 82%;
					color: #333;
					left: 60px;
					top: 15px;
					font-size: 14px;
					text-align: left;
				}



/* DASHBOARD PAGE STYLING */
	#logo_main {
		width: 40px;
		height: 40px;
		text-align: center;
		position: absolute;
		left: 10px;
		top: 2.5px;
		line-height: 38px;
		border-radius: 3px;
		background: hsl(0,100%,25%);
		font-size: 35px;
	}
	#notice_box {
		isplay: none;
		position: absolute;
		top: -2px;
		color: #002;
		max-width: 420px;
		right: 10%;
		order: 1px solid #080;
	}
		#notices {
			display: inline;
			font-size: 20px;
			width: 30%;
			max-width: 250px;
			order: 1px solid #ddd;
		}
		.commerce {margin-right: 25px;} .primary {margin-left: 25px;}
			#notice {
				display: inline;
				order: 1px solid #080;
				position: relative;
				text-align: center;
			}
				.notice_name {
					position: absolute;
					z-index: 1;
					isplay: none;
					line-height: 25px;
					height: 25px;
					width: 80px;
					border-radius: 3px;
					cursor: pointer;
					margin: auto;
					left: -20px;
					right: 0px;
					text-align: center;
					font-size: 11px;
					background: #000;
					color: #ddd;
				}
					#name_tooltip {
						border: 5px solid rgba(0,0,0,0);
						border-bottom-color: #000 !important;
						width: 1px;
						position: absolute;
						left: 0px;
						right: 0px;
						top: -9px;
						margin: auto;
					}

	/*#form_cont {
        text-align: center;
        margin: 80px auto;
        order: 1px solid;
        width: 85%;
    }
		#fld_cont {
            margin: 22px auto;
            position: relative;
        }
            #placename, .error {
                color: #333;
                width: 97%;
                margin: auto;
                font-size: 10px;
                text-align: left;
            }
            #fld, #country, #state, select {
                width: 95%;
                color: #333;
                border: 1px solid #eee;
                padding: 7px 3px;
                font-size: 15px;
                background: #eee;
                border-radius: 3px;
            }
            .error {
                color: rgb(300,0,0);
                position: absolute;
                right: 0;
                left: 3px;
                bottom: -13px;
            }
            #sbt {
                color: #ddd;
                width: 97%;
                margin: auto;
                background: hsl(0,100%,20%);
                border: 1px solid hsl(0,100%,20%);
                padding: 5px 0;
                font-size: 18px;
                cursor: pointer;
                border-radius: 3px;
            }*/


    #fld_cont {
        margin: 22px auto;
        position: relative;
    }
    #fld_cont_ {
        margin: 15px 0;
        max-width: 500px;
        position: relative;
    }
        	#warnSD {
        		font-size: 12px;
        		color: rgb(900,0,0);
        		margin: 5px auto;
        	}
            #placename, .error {
                color: #555;
                width: 97%;
                margin: auto;
                font-size: 16px;
                text-align: right;
            }
            #fld, #mb, #otp, #em, #country, #state, #fld_, #country_, #state_ {
                width: 95% !important;
			    color: #333;
			    border: 1px solid hsl(218deg 44.07% 89.58%);
			    padding: 10px 3px;
			    font-size: 13px;
			    box-shadow: 0 0 0 0 #fff !important;
			    border-radius: 5px;
			    display: inline-block;
            } #fld_, #country_, #state_, #fld_cont_ #country, #fld_cont_ #state {background: #fff;}
            .error {
                color: rgb(300,0,0);
                font-size: 13px;
                text-align: left;
            }
            #secq_warn {
            	color: rgb(900,0,0);
            	font-size: 13px;
            	position: absolute;
            	top: -10px;
            	opacity: 1;
            	text-decoration: underline;
            }
            #chars_bar {
                font-size: 7px;
                background: hsl(218, 92%, 97%);
                color: #000;
                border-radius: 2px;
                width: 97%;
                margin: auto;
                position: relative;
            }
                #progress {
                    position: absolute;
                    width: 0%;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    transition-duration: 1s;
                    border-radius: 2px;
                    background: hsl(0,100%,40%);
                }
                #words {
                    position: relative;
                    z-index: 1;
                }
            #sbt {
                color: #ddd;
                width: 97%;
                margin: 70px auto auto;
                background: hsl(0,100%,20%);
                border: 1px solid hsl(0,100%,20%);
                padding: 10px 0;
                font-size: 18px;
                cursor: pointer;
                border-radius: 3px;
            }



   	/* PING TEXTAREA BOX */
   	.emojioneare {
   		border: 1px solid #fff;
   		background: #fff;
   		border-radius: 3px 0 0 3px;
   		font-size: 13px;
   		width: 78%;
   		height: 90%;
   		display: inline-block;
   	}