html, body{font-family:Vazir,sans-serif;padding:0;margin:0;}
html{height:100%;}
body{position:relative;height:100%;}
input{font-family:Vazir,sans-serif;color:#353535;}
textarea{font-family:Vazir,sans-serif;color:#353535;}
div{font-family:Vazir,sans-serif;}
p{font-family:Vazir,sans-serif;}
h1{font-family:Vazir,sans-serif;}
h2{font-family:Vazir,sans-serif;}
a{font-family:Vazir,sans-serif;}
table{font-family:Vazir,sans-serif;}
form{font-family:Vazir,sans-serif;}
@media only screen and (max-width:991px){.desktop{display:none;}
}
@media only screen and (min-width:992px){.mobile-tablet{display:none;}
}
:root{
	--greish:#cdd0d7;
	--blacky:#000;
	--darky:#363636;
	--button-grey:#84828F;
	--button-darker:#7a7886;
	--whity:#fff;
	--original-red:#ff0000;
	--lower-red:#;
	--input-height:35px;
	--header-height:62px;
	
}
input:focus{outline:none;}
select:focus{outline:none;}
textarea:focus{outline:none;}
option:focus{outline:none;}
button:focus{outline:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
img{
  text-indent:-9999px;color:white;
}   
.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}
.btn.btn-info{background:#087cdc;border-color:#087cdc;}
.btn.btn-info:hover{background:#076ec3;outline:rgba(7, 110, 195);}
.btn.btn-info:active{background:#076ec3;}
.div-text-center{width:100%;min-height:20px;text-align:center;display:table;}
.header{width:100%;height:50px;background-color:white;/*or #66B2FF  #3399FF*/
position:fixed;top:0;z-index:220;border-bottom:1px solid var(--greish);}
.header a{text-decoration:none;}
.header h1{margin:0;padding:0;font-size:18px;font-weight:bolder;
color:#000;text-decoration:none;margin-top:4px;}
.header a{}
.header a:hover{text-decoration:none;}
.header-right{width:calc(100% - 200px);height:50px;float:right;}
.header-left{width:200px;height:50px;float:right;font-size:16px;padding-right:5px;}
#button-post-mobile{font-size:16px;,margin:0;padding:5px;margin-top:7px;margin-left:5px;
border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.btn.btn-light{float:right;margin-top:5px;border:1px solid transparent;font-size:18px;
border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.btn.btn-light.dropdown-toggle{}
.btn.btn-light.dropdown-toggle:hover{border:1px solid #edeff1;background:white;}
.dropdown-menu{margin-top:50px;}
.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
	left:10px;
    display: block;
    width: 25px;
	margin-top:3px;
    height: 25px;
    line-height: 25px;
    text-align: center;cursor:pointer;
    color: rgb(135, 138, 140);
}
.form-group .form-control-icon-lg {
    position: absolute;
    z-index: 2;
	left:35px;
    display: block;
    width: 26px;
    height: 26px;
	margin-top:5px;
    line-height: 26px;
	font-size:22px;
    text-align: center;cursor:pointer;
    color: #aaa;
}
.form-group .form-control-icon-lg.icon-close {
    position: absolute;
    z-index: 2;
	left:70px;
    display: block;
    width: 26px;
    height: 26px;
	margin-top:5px;
    line-height: 26px;
	font-size:20px;
    text-align: center;cursor:pointer;
    color: #aaa;
	display:none;
}
.main {
    width: 200px;
    margin: 0 auto;
	margin-top:10px;margin-left:20px;
}
.main .form-group .form-control{
	border:1px solid #959595;}
.main .form-group .form-control::-webkit-input-placeholder {color:#959595;}	
.main .form-group .form-control:-placeholder {color:#959595;}

.logo-header{margin-top:3px;}

.blog-center-div{width:100%;min-height:600px;margin:0 auto;margin-top:50px;display:table;}


.blog-right{display:none;width:25%;min-height:300px;float:right;padding:5px;position:relative;}
.blog-right h3{margin:0;padding:0;font-size:13px;padding-bottom:5px;padding-top:5px;
border-bottom:1px solid #ebecef;text-align:justify;}
.blog-right ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

.blog-right li { 
    padding-right: 0px; 
}

/*.blog-right li:before {
    content: "•"; 
    padding-left: 8px;
    color: blue; 
	float:right;
}*/
.blog-left{display:none;min-height:300px;float:right;padding:10px;position:relative;}
.all-blog-agahi-links{width:280px;min-height:200px;display:table;text-align:center;padding:15px;
position:fixed;margin-top:0px;margin-right:0px;text-align:center;
border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;
box-shadow:0 6px 14px 0 rgb(0,0,0,0.8);}
.all-blog-agahi-links a{margin:0;font-size:14px;font-weight:bolder;line-height:170%;margin:10px;}
.all-blog-item{width:100%;min-height:50px;display:table;padding-bottom:3px;padding-top:3px;
border-bottom:1px solid #ebecef;}
.blog-item-text-div{width:calc(100% - 120px);min-height:50px;float:right;word-wrap: break-word;padding-left:5px;}
.outer-div{width:110px;min-height:20px;display:table;float:right;overflow:hidden;margin:5px;color:white;text-align:right;}
.blog-item-category{width:100%;min-height:10px;display:table;font-size:13px;color:#767676;
padding:2px;}
.blog-item-date{width:100%;min-height:10px;display:table;font-size:10px;color:#969696;
padding:2px;}
.blog-item-text-topic{width:100%;min-height:10px;float:right;display:table;}
.blog-item-text-topic h1{width:100%;min-height:20px;display:table;margin:0;font-size:16px;line-height:110%;margin-top:10px;}
.blog-item-text-start{max-width:500px;min-height:20px;float:right;line-height:170%;font-size:13px;word-wrap: break-word}
 
.center-articles-div{width:100%;min-height:500px;margin:0 auto;margin-top:52px;padding:10px;}
.center-articles-div img{width:100%;}
.center-articles-div h1{margin-right:5px;font-size:16px;color:rgb(68, 68, 68);}
.blog-page-menu{width:85%;height:60px;display:table;margin:0 auto;}
.blog-text-links-div{width:85%;min-height:300px;display:table;margin:0 auto;}
.blog-other-links{width:300px;min-height:300px;display:table;float:right;padding:10px;}
.blog-ads{width:280px;height:280px;margin-bottom:10px;background:#f0f0f3;
outline:3px dashed #fff;outline-offset:-10px;font-size:30px;line-height:170%;color:#7b7c81;
padding:10px;padding-top:100px;text-align:center;}
.blog-center-div{width:100%;min-height:500px;margin:0 auto;overflow-y:scroll;margin-top:52px;}
.blog-center{width:100%;min-height:300px;display:table;float:right;
text-align:justify;font-size:14px;line-height:1.6;}
.blog-center a{color:#555555;}
.blog-center h1{width:100%;min-height:20px;display:table;margin:0;padding:0;font-size:16px;font-weight:bolder;padding-top:3px;}
.blog-center h2{margin:0;padding:0;font-size:14px;font-weight:bold;}
.blog-text img{margin-top:10px;margin-bottom:10px;}
.blog-text h1{margin:0;padding:0;font-size:20px;}
.blog-text h2{margin:0;padding:0;font-size:18px;color:#969696}
.blog-text h3{margin:0;padding:0;font-size:16px;}
.blog-source{width:100%;min-height:20px;display:table;color:#969696}
.blog-source a:hover{text-decoration:none;}
.blog-source span{float:right;}
.blog-source h3{margin:0;padding:0;font-size:18px;color:#087cdc;margin-right:5px;}
.blog-comments-div{width:80%;min-height:200px;}
.btn-likes{background-color:white;color:#8f9196;border:1px solid #fff;font-size:13px;
border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;
padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:6px;}
.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-top:10px;
  background:white;
}

.nav li {
  font-size: 18px;
  line-height: 10px;
  text-align: left;
  color:#333333;
}

.nav a {
  text-decoration: none;
  color: #000;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {color:#087cdc;border-bottom:2px solid #087cdc;text-decoration:none;}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 991px) {
  .nav li {
    border-bottom: none;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    display: inline-block;
    margin-right: 20px;
	text-decoration:none;
  }

  .nav a {
    border-bottom: none;
	text-decoration:none;
  }

  .nav > ul > li {
    text-align: center;
	text-decoration:none;
  }

  .nav > ul > li > a {
    padding-left: 0;
	text-decoration:none;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
	text-decoration:none;
	background-color:white;
  }

  .nav li:hover ul {
    display: block;
	margin-top:-2px;
	border-top:2px solid #00BFFF;
  }

  .nav li ul li {
    display: block;
	text-decoration:none;
	margin-top:-2px;	
	background-color:white;
  }
}

.form-comment{width:100%;min-height:50px;padding:10px;position:relative;}
#comment-form{text-align:center;}
#comments-counter{text-align:right;padding-right:5px;}
.text-comment{width:100%;min-height:70px;padding:10px;padding-left:15px;border:1px solid #d3d4d7;
border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;}
.text-comment:focus{outline:none;}
.submit-comment{padding:6px;padding-left:12px;padding-right:12px;background-color:#fff;
border:1px solid var(--original-red);
color:#999;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;
margin-top:15px;}
.submit-comment:hover{background:var(--original-red);color:#000;border:1px solid var(--original-red);
outline:none;color:white;}
.submit-comment:focus{outline:none;}
.all-comments{width:100%;min-height:50px;display:table;text-align:right;}
.each-comment{width:100%;min-height:10px;display:table;border-bottom:1px solid var(--greish);padding:10px;}
.user-comment-data{width:100%;min-height:10px;display:table;padding:0;margin:0;}
#comment-text{color:#444;font-size:15px;padding:0;margin:0;padding-bottom:5px;}
.comment-date{float:right;color:var(--greish);font-size:12px;}
.comment-user{float:right;color:#555555;font-size:14px;margin-left:20px;}
.article-image-pride{max-width:250px;max-height:150px;margin:5px;}
.article-image-bigger{max-width:450px;max-height:380px;margin:5px;}
.article-image-biggest{max-width:750px;max-height:580px;margin:5px;}
.article-image-smaller{max-width:200px;max-height:200px;margin:5px;}
.article-image-smallest{max-width:250px;max-height:140px;margin:5px;}

/* ----------------------------------------------------log-in------------------------------------------ */
.membership-div{width:100%;min-height:490px;margin:0 auto;display:table;margin-top:150px;text-align:right;}
.membership-container{width:100%;min-height:200px;display:table;margin:0 auto;background:white;padding:10px;
padding-right:40px;padding-left:40px;margin-right:10px;position:relative;margin-bottom:15px;
border:1px solid white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.membership-container h2{margin:0;padding:0;color:#777777;font-size:18px;width:100%;min-height:22px;
text-align:center;font-weight:400;}
.membership-container input{box-shadow:inset 0 1px 1px rgba(0,0,0,0);}
.membership-container input:focus{
  box-shadow:         0 0 5px rgba(8, 124, 220, 1);
  border-bottom:none;
  margin:             5px 1px 3px 0px;
  padding:            3px 0px 3px 3px;}

					/*--------------------   dialog --------------------- */
.dialog{display:none;width:340px;max-width:340px;min-height:120px;overflow:auto;
background:#ffffff;border: 1px solid #c5c5c5;color: #333333;padding:5px;padding-bottom:20px;outline: 0;
border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;position:absolute;top:-30px;
left:calc(50% - 170px);z-index:999;text-align:center;}
.dialog-title-div{width:99%;height:30px;/*background-color:#e0eaf1;*/color:#e0eaf1;
border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;margin:0 auto;}
.dialog-title{width:calc(100% - 23px);padding:5px;padding-left:10px;font-size:15px;font-weight:bold;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;float:right;}
.dialog-close{width:20px;height:20px;background-color:#087cdc;
float:right;margin-top:5px;margin-right:3px;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
font-size:12px;color:white;display:-ms-flexbox;cursor:pointer;
display:-webkit-flex;display:flex;align-items:center;justify-content:center;}
.dialog-close .fa.fa-close{color:white;}
.dialog-close:hover{transform:scale(1.3);transition:400ms;transition-timing-function: ease-in-out;
-webkit-transition:400ms;-webkit-transition-timing-function:ease-in-out;}
.button-dialog{min-width:60px;border-radius:8px;-webkit-border-radius:8px;box-shadow:none;
-moz-border-radius:8px;outline:0;color:white;
border:1px solid var(--button-grey);}
.button-dialog:hover{transform:scale(1.1);background-color:var(--greish);color:white;
border:1px solid var(--button-greish);}
.button-dialog:focus{outline:none;}
.loading{max-width:30px;max-height:30px;}
#dialog-success{width:340px;max-width:340px;min-height:120px;overflow:auto;
background:#ffffff;border: 1px solid #c5c5c5;color: #333333;padding:5px;padding-bottom:20px;outline: 0;
border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
position:absolute;top:-30px;left:calc(50% - 170px);z-index:999;text-align:center;}
#dialog-success p{padding-left:15px;padding-right:15px;}



					/*--------------------   editor --------------------- */
.container-center{width:100%;min-height:500px;margin:0 auto;margin-top:52px;padding:10px;}
.container-center h1{width:100%;min-height:30px;color:#ef5547;font-size:40px;}
.container-center h3{font-size:25px;margin-bottom:30px;font-weight:300;}
.editor-right{width:100%;min-height:500px;display:table;float:right;padding-bottom:30px;}
.editor-left{display:none;width:calc(100% - 710px);min-height:500px;display:table;float:right;}
.characters-count{width:100%;min-height:15px;font-size:14px;color:#087cdc;margin-bottom:20px;}
#heading-input{font-size:30px;font-weight:400;margin-top:30px;width:100%;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.button-padding{padding-left:14px;padding-right:14px;}
#saved-heading{display:none;margin-right:10px;}
.container-center{text-align:right;}
#toggle-option{display:none;}
#toggle-button{color:white;}
#custom-file-upload{cursor:pointer;color:#087cdc;}
.label-article{}
.label-article h2{padding:0;margin:0;float:right;color:#087cdc;font-size:30px;}
.label-article .text-center{margin-right:0px;margin-left:10px;background:#8bc5e8;width:40px;height:40px;padding-top:0px;
border-top-left-radius:10px;border-bottom-right-radius:10px;text-align:center;float:right;font-size:30px;font-weight:500;color:white;}
.form-text.text-muted{color:#e3e4e8;}
input.form-control{border:1px solid #e5ad33;}
textarea.form-control{border:1px solid #e5ad33;}
select.form-control{border:1px solid #e5ad33;}
#select-category option{background:white;z-index:999;}
#submit-main-image{margin-top:20px;}
#main-image{}
#file-upload {color:#087cdc}
#wysiwyg_cp {width:100%;}
#wysiwyg_cp span {margin-left:2px;font-size:25px;color:#087cdc}
iframe{position:relative;}
.text-editor{position:relative;}
#richTextField{border:1px solid #e5ad33;text-align:left; width:100%; min-height:450px;display:table;
padding:15px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
#richTextField img{width:100%}
.button-div{width:100%;min-height:20px;display:table;position:relative;}
#dialog-submit-error{margin-top:-100px;}

					/*--------------------   footer --------------------- */

.footer{width:100%;min-height:50px;background:#f5f5f5;padding-top:10px;display:table;}
.footer-right{width:60%;min-height:50px;float:right;text-align:center;}
	.footer-right h1{
	    font-size: 20px;
		font-weight: lighter;	
	}
	.footer-logo{
		width: 100%;
		min-height: 20px;
		text-align: center;
		padding-left:40px;
		padding-right:40px;
	}
	.footer-logo h1{font-size:20px;font-weight:bolder;color:#292929;}
	.footer-left-sitemap{width:100%;min-height:50px;float:right;line-height:200%;}

	.footer-left-sitemap a{
		text-decoration: none;
		color:#292929;
	}
	
	.footer-left{
		width: 40%;
        min-height: 50px;
		float: right;
		text-align:right;
	}
	.footer-left h1{
	    font-size: 18px;
		font-weight:lighter;	
	}
	.footer-right-follow-us{
		width: 100%;
		min-height: 20px;
		text-align: center;
		padding:5px;
	}
	.social-icon{margin-left:5px;}
	.footer-right-follow-us a{
		text-decoration: none;
		color:#292929;
		font-size: 20px;
	}
	
	.sitemap{
		width: 100%;
		min-height: 20px;
		
	}
	.sitemap a{
		font-size: 14px;
		text-decoration:none;
		
	}
	.sitemap a:hover{
		text-decoration:none;}
	.sitemap h1{
		font-size: 14px;
	}
	.copyright{
		margin-top:5px;
		width: 100%;
		min-height: 20px;
		float: right;
		text-align: center;
		font-size: 13px;
	}
	.copyright a{
		
		text-decoration: none;
		color:#292929;/*color:#232323;*/
	}					
					

					/*--------------------   index --------------------- */
.story-index-div{width:100%;min-height:800px;padding-top:52px;display:table;background:#dee1e6;
text-align:right;position:relative;}
.scrollToTop{
    color: #087cdc;
    position:fixed;
    bottom:75px;
    right:70px;
    display:none;
	cursor:pointer;
	text-align:center;
	z-index:100;
}
.scrollToTop i{
	margin-bottom:10px;
	display:block;
}
.story{width:100%;min-height:20px;display:table;padding:10px;}
.story-main{width:100%;min-height:500px;margin:0 auto;display:table;}
.story-index-right{width:100%;min-height:500px;display:table;float:right;padding-top:30px;}
.story-index-right-stories-div{width:100%;min-height:500px;display:table;}
.story-index-right-stories{width:100%;min-height:450px;display:table;}
.story-index-right-loading{width:100%;min-height:50px;display:table;text-align:center;color:#555555;}
.story-index-left{display:none;width:100%;min-height:500px;float:right;padding-top:30px;}
.story-item{width:100%;display:table;min-height:50px;padding:10px;margin-bottom:15px;
background:white;position:relative;}
.dropdown.story-delete{position:absolute;top:15px;left:7px;cursor:pointer;color:black;font-size:24px;
display:-webkit-flex;display:flex;align-items:center;justify-content:center;}
.story-item-characteristics{width:100%;min-height:20px;}
.story-rating{direction:ltr;min-width:80px;min-height:20px;display:table;float:right;padding-top:5px;
margin-left:25px;margin-top:5px;}
.story-rating-arrow{float:right;cursor:pointer;font-size:16px;font-weight:300;color:#8f9196;
padding:5x;padding-left:8px;padding-right:8px;text-align:center;}
.story-rating div{min-width:20px;min-height:20px;float:right;display:table;text-align:center;}
.story-rating-number{width:40px;font-size:16px;float:right;font-weight:600;color:#292929;}
.story-text{width:100%;display:table;min-height:50px;float:right;}
.story-heading{width:100%;min-height:50px;padding:10px;display:table;}
.story-heading a h2{font-size:25px;padding:0;margin:0;color:black}
.story-heading a:hover{text-decoration:none;}
.story-description{width:100%;max-width:100%;padding:10px;
 /* Over flow hidden hides the text if it is more than N lines  */
    overflow: hidden;
    /* To set '...' in absolute position */
    position: relative; 
    /* Use this value to count block height */
    line-height: 1.6em;
    /* Max-height = line-height (1.2) * lines max number (2) */
    max-height: 40em; 
    /* If the last visible word doesn't adjoin right side then this will fix the problem */
    text-align: justify !important;  
    /* place for '...' */
	}
.story-description:before{
	
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    left: 20px;
    bottom: 0;
}
.story-description:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    left: 20px;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    background: white;
    }
.story-description img{max-width:300px;}
.story-description video{max-width:300px;}
.background {
  width: 60%;
  height: auto;
  margin-left:20%;
  margin-right:20%;
}
.background img.lazy {
  max-width:300px;
  height: auto;
  opacity: 0;
  transition: 1s;
}
.background img.lazy.loaded {
  opacity: 1;
}
.button-more{margin-top:10px;}
.story-social-activity{width:100%;height:30px;display:table;position:relative;}
.story-social-activity .btn.btn-default{background:white;border-color:white}
.story-social-activity .btn.btn-default:hover{background:white;border-color:1px solid white;outline:none;}
.story-social-activity a{color:rgb(117, 117, 117);margin-left:10px;}
.story-social-activity i{font-size:18px;cursor:pointer;color:#949494;}
.story-social-activity i.fa.fa-comments-o{font-size:22px;cursor:pointer;color:#949494;}

.story-tags{width:100%;min-height:20px;display:table;padding-top:10px;padding-bottom:10px;}
.story-tags a{margin-left:10px;padding:5px;float:right;color:rgb(117, 117, 117);}
.story-tags a:hover{text-decoration:none;}

.story-membership{width:290px;min-height:200px;display:table;background:white;padding:10px;
padding-right:20px;padding-left:20px;margin-right:10px;position:relative;margin-bottom:15px;
border:1px solid white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.story-membership h2{margin:0;padding:0;color:#777777;font-size:18px;width:100%;min-height:22px;
text-align:center;font-weight:400;}
.story-membership input{box-shadow:inset 0 1px 1px rgba(0,0,0,0);}
.story-membership input:focus{
  box-shadow:         0 0 5px rgba(8, 124, 220, 1);
  border-bottom:none;
  margin:             5px 1px 3px 0px;
  padding:            3px 0px 3px 3px;}
.ads-big{padding-bottom:20px;}
.stories-list{width:290px;min-height:200px;display:table;background:white;padding:10px;
padding-right:20px;padding-left:20px;margin-right:10px;position:relative;margin-bottom:15px;
border:1px solid white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.stories-list h2{margin:0;padding:0;font-size:16px;padding-bottom:10px;padding-top:5px;
border-bottom:1px solid #ebecef;text-align:justify;}
.stories-list h3{width:248px;margin:0;padding:0;font-size:14px;padding-bottom:5px;padding-top:5px;
border-bottom:1px solid #ebecef;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stories-list ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

.stories-list li { 
    padding-right: 0px; 
}

.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 0px;
}
.field label, input {
  transition: all 0.2s;
  touch-action: manipulation;
}
.field input {
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #959595;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  padding-right:10px;
  cursor: text;
}

.field input:focus,label:focus {
  outline: 0;
  border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
  
}

.field label {
  text-transform: uppercase;
  font-weight:300;  
  padding-right:5px;
}
.field input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  color:#959595;
  text-overflow: ellipsis;
  transform-origin: right bottom;
  transform: translate(0, 35px) scale(1.4);
  bottom:5px;
}
/**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/
.field input::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
.field input:focus::-webkit-input-placeholder {
  opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/
.field input:not(:placeholder-shown) + label,
.field input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}
#submit-log-in{margin-top:20px;}
#submit-sign-up{margin-top:20px;}
#dialog-error-log-in{display:none;width:300px;max-width:100%;min-height:120px;max-height:100%;
overflow:auto;border: 1px solid white;background:white;padding:5px;padding-bottom:20px;outline: 0;
border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;box-shadow:0 6px 14px 2px rgb(0,0,0,0.8);
position:absolute;top:100px;left:calc(50% - 150px);z-index:999;text-align:center;}	
#dialog-error-sign-up{display:none;width:300px;max-width:100%;min-height:120px;max-height:100%;
overflow:auto;border: 1px solid white;background:white;padding:5px;padding-bottom:20px;outline: 0;
border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;box-shadow:0 6px 14px 2px rgb(0,0,0,0.8);
position:absolute;top:100px;left:calc(50% - 150px);z-index:999;text-align:center;}	
.dialog-content-loading{display:none;width:100%;min-height:40px;}
.dialog-content-error{display:none;width:100%;min-height:30px;}
.dialog-content{width:100%;min-height:30px;}
#dialog-log-in{top:300px;right:250px;}
#dialog-error{top:300px;right:250px;}
.dialog-title-div{width:99%;height:30px;color:#e0eaf1;
border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;margin:0 auto;}
.dialog-title{width:calc(100% - 23px);padding:5px;padding-left:10px;font-size:15px;font-weight:bold;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;float:right;}
.dialog-close{width:20px;height:20px;float:right;margin-top:5px;margin-right:3px;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:12px;display:-ms-flexbox;
cursor:pointer;display:-webkit-flex;display:flex;align-items: center;justify-content: center;}
.dialog-close:hover{transform:scale(1.3);transition:400ms;transition-timing-function:ease-in-out;
-webkit-transition:400ms;-webkit-transition-timing-function:ease-in-out;}
.button-dialog{min-width:60px;border-radius:8px;-webkit-border-radius:8px;box-shadow:none;
-moz-border-radius:8px;outline:0;color:white;}
.button-dialog:hover{transform:scale(1.1);}
.button-dialog:focus{outline:none;}
.profile-picture {
    background-color:#087cdc;color:white;
    padding: 4px;
    display: inline-block;
    width:100px;
	height:100px;
	text-align:center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
	-webkit-border-radius:50%;border-radius:50%;
	-moz-border-radius:50%;
}
.filter-div{width:100%;display:table;min-height:50px;padding:10px;margin-bottom:15px;background:white;
border:1px solid white;padding-right:55px;position:relative;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
padding-left:25px;}
#close-filter-div{position:absolute;left:30px;top:15px;color:black;font-size:16px;cursor:pointer;}

					/*--------------------   my page --------------------- */
.my-page-center{width:100%;min-height:700px;display:table;background:#dee1e6;padding:10px;padding-top:70px;}
.my-page-center h2{font-size:20px;}
.tab-pane{background:white;}					
.posts-my-page{width:100%;min-height:500px;display:table;float:right;}
.posts-my-page img{width:100%}
.align-center, .center {
    text-align: center!important;
}
.nav-item{min-height:45px;}
.nav-pills .nav-link.active, .nav-pills>.nav-link.active{min-height:45px;}
.btn.btn-sm.btn-block.btn-info{min-height:40px;padding-top:7px;font-size:16px;}
.nav-pills .nav-link, .nav-pills>.nav-link {width:100%;padding:7px;text-align:center;}
.nav-pills{padding-inline-start:0px;}
.nav-pills li{margin-left:20px;background:white;border-radius:4px;}
.nav-pills a{border:none;}
.nav-pills a:hover{border:none;}
.nav-pills .nav-link p, .nav-pills>.nav-link p{font-size:16px;margin:0;padding:0;margin-bottom:10px;}
.nav-pills .nav-link small, .nav-pills>.nav-link small{font-size:12px;}
.profile-user-info {
    display: table;
    width: 98%;
    width: calc(100% - 24px);
    margin: 0 auto
}

.profile-info-row {
    display: table-row
}

.profile-info-name,
.profile-info-value {
    display: table-cell;
    border-top: 1px dotted #D5E4F1
}

.profile-info-name {
    text-align: right;
    padding: 6px 10px 6px 4px;
    font-weight: 400;
    color: #667E99;
    background-color: transparent;
    width: 110px;
    vertical-align: middle
}

.profile-info-value {
    padding: 6px 4px 6px 6px
}

.profile-info-value>span+span:before {
    display: inline;
    content: ",";
    margin-left: 1px;
    margin-right: 3px;
    color: #666;
    border-bottom: 1px solid #FFF
}
			
/* ----------------------------------------------------contact us------------------------------------------ */
.contact-us{width:100%;min-height:490px;margin:0 auto;display:table;margin-top:100px;}
.post-comment{width:100%;min-height:390px;margin:0 auto;background-color:#1dade6;padding:20px;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.contact-success{width:100%;text-align:center;color:white;}
.contact-message{width:90%;min-height:150px;margin-right:20px;padding:10px;
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
border:0.05em solid #1dade6;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.contact-name-div{width:calc(100% - 38px);margin-right:20px;height:27px;}
.contact-name-label{width:80px;float:right;height:27px;padding-top:5px;color:white;}
.contact-name-content{float:right;width:calc(100% - 80px);height:25px;}
.contact-name{width:calc(100% - 20px);height:25px;padding-right:10px;padding-left:10px;
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
border:0.05em solid #1dade6;border-radius:25px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.contact-email-submit-div{width:calc(100% - 38px);margin-right:20px;height:30px;}
.contact-email-label{width:80px;float:right;height:27px;padding-top:5px;color:white;}
.contact-email-content{float:right;width:calc(100% - 160px);height:25px;}
.contact-submit-div{width:50px;margin-left:15px;float:left;height:28px;}
.contact-email{width:calc(100% - 20px);height:25px;padding-right:10px;padding-left:10px;margin-top:0;
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
border:1px solid #1dade6;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.btn-contact-div{width:90%;height:25px;margin:0 auto;text-align:center;}

#contact_submit{height:29px;width:67px;background-color:white;border:1px solid #1dade6;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
#contact_submit:hover{background-color:silver;}