/**
 * @author developer@hastaport.com
 * @since 07 �ub  2017 07:46
 * @copyright  Copyright (C) 2017 hastaport.com

 The Css code in this page is free software: you can
 redistribute it and/or modify it under the terms of the GNU
 General Public License (GNU GPL) as published by the Free Software
 Foundation, either version 3 of the License, or (at your option)
 any later version.  The code is distributed WITHOUT ANY WARRANTY;
 without even the implied warranty of MERCHANTABILITY or FITNESS
 FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

 As additional permission under GNU GPL version 3 section 7, you
 may distribute non-source (e.g., minimized or compacted) forms of
 that code without the copy of the GNU GPL normally required by
 section 4, provided you include this license notice and a URL
 through which recipients can access the Corresponding Source.
 (http://www.gnu.org/philosophy/javascript-trap.html)

 
 */
html {
	--base-blue-color: hsl(258, 37%, 86%); 

	--base-p-h:258;
	--base-p-s:37%;
	--base-p-l:86%;
 
	--base-pink-color: hsl(322, 100%, 88%);

	--base-s-h:322;
	--base-s-s:100%;
	--base-s-l:88%;

	--back-color: hsla(322, 100%, 95%, 1);
	--mobile-header-height:50px ;
	--mobile-footer-height:60px ;
	 
}
body {
 
	
	background-color: var(--base-pink-color); 
}
body * {
	color: rgb(129, 68, 230);
	font-family: arial, cursive;
	font-size: 16px;
}
#N1Yqu3hCMe {
	--prompt-bg-color: hsl(256deg 60% 88% / 38%);
}
.flex-canvas {
	display: flex;
	flex-direction: row !important;
	position: absolute;
	right: 0px;
	left: 0px;
	top: 0px;
	/* bottom: 0px; */
	width: 1024px;
	margin: 50px auto 50px auto;
	border-radius: 15px;
}

.flex-canvas div[class~="template-design"] {
	position: relative;
}

.flex-canvas *[class~="template-design"]:after {
	font-family: FontAwesome;
	font-style: normal;
	content: "\f093";
	color: rgb(249, 49, 81);
	position: absolute;
	top: 0px;
	right: 0px;
	opacity: 0.5;
}

.flex-canvas div[class~="template-design"]:hover:after {
	cursor: pointer;
	opacity: 1;
}

.flex-canvas>div:first-child {
	flex-basis: 300px;
	background-color: var(--base-blue-color);
	background: linear-gradient(to bottom, var(--base-blue-color) 0%, rgba(228, 223, 240, 1) 100%);
	position: relative;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.flex-canvas>div:first-child .menu-back {
	position: absolute;
	right: 0px;
	left: 0px;
	top: 0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-position: 5px 10px;
}

.flex-canvas>div:first-child .left-column-back {
	position: absolute;
	right: 0px;
	left: 0px;
	top: 0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-position: 5px 10px;
}

.flex-canvas>div:last-child {
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
	background-color: var(--back-color);
	flex-grow: 1;
	display: flex;
	flex-direction: column;

	> .logo {
		    left: 30px;
    top: 20px;
	}
}

.flex-canvas>div:last-child .main-menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-left: 50px;
	margin: 10px 10px 0px 10px;
	/* border-bottom: 1px inset rgb(252, 120, 205); */
	background-repeat: no-repeat;
	background-position: top left;
	background-clip: border-box;
	background-size: cover;
	height: 100px;
}

.flex-canvas>div:last-child .main-menu>a>div { 
	font-weight: bold;
	margin: 0px 20px 0px 20px;
	color: rgb(144, 96, 224);
	font-size: 17px;
	margin-top: 20px;
}

.flex-canvas>div:last-child .main-menu>a>div:hover {
	color: rgb(208, 80, 162);
}

.flex-canvas div.logo {
	min-width: 50px;
	position: absolute;
	top: 76px;
	left: 74px;
}

.flex-canvas div.logo img {
	width: 159px;
	height: 64px;
}

/*#region content-body */
.content-body {
	margin: 20px 16px;
	min-height: 300px;
	/* width: 550px; */
	padding-left: 60px;
	padding-right: 40px;
	background: none;
	border-radius: 20px;
}

.content-body * { 
	font-size: 17px;
}

.content-body a {
	color: #0aa0e6;
	font-size: inherit;
}

.content-body a:hover {
	color: #fc24d6;
}

.content-body[class~="spin"] {
	opacity: 0.09 !important;
	background-position: top left;
	background-repeat: repeat !important;
	background-image: url(/graphics/web/ani/flow.gif) !important;
	position: relative;
}

.content-body>div.home { 
	font-size: 19px;
	color: rgb(187, 46, 57);
}

.content-body>h3 { 
	font-size: 21px;
	color: rgb(128, 56, 249);
}

.content-body>p { 
	color: rgb(179, 17, 121);
	margin-bottom: 20px;
	line-height: 35px;
}

.content-body[class~="stream"]>div {
	padding-bottom: 50px;
	margin-bottom: 50px;
	width: 500px;
	border-bottom: 2px inset rgb(241, 149, 245);
	display: flex;
	flex-direction: column;
}

.content-body[class~="stream"]>div>.photo {
	width: inherit;
}

.content-body[class~="stream"]>div>.photo>img {
	width: inherit;
	border-radius: 9px;
	box-shadow: 1px 1px 7px 5px rgb(190, 97, 155);
	opacity: 0.9;
}

.content-body[class~="stream"]>div>.message { 
	font-size: 21px;
	color: #8144e6;
	margin-bottom: 20px;
}

.content-body[class~="stream"]>div>.date { 
	font-size: 13px;
	color: #b967bf;
	text-align: right;
	margin-top: 10px;
}
/*#endregion content-body */
#mobile-header {
	display: none;
	height: var(--mobile-header-height);
	position: fixed;
    left: 0px;
    right: 0px;
    z-index: 100;
	background-color: var(--base-blue-color);
}


#mobile-footer {
	display: none;
	flex-direction: row;
	justify-content: space-around;
	position: fixed;
	bottom: 0px;
	right: 0px;
	left: 0px;
	border-top: 2px groove var(--base-blue-color);
	background-color: var(--base-blue-color);
	height: var(--mobile-footer-height);
}

#mobile-footer>a>div {
	
}

#mobile-footer div[class*='faws-'] {
	display: flex;
	align-items: center;
	font-size: inherit;
}

#mobile-footer div[class*='faws-']:before {
	font-size: 32px;
}






@media only screen and (max-width: 400) {
	
html,  body {
  background-color: var(--back-color); 
}	
	
 body > .corner-menu-button:after { 
    font-size: 47px !important; 
    margin: 2px;
    margin-left: 4px; 
}
	
	#mobile-header , #mobile-footer {
	display: flex;
}
	
	.flex-canvas {
		display: flex;
		flex-direction: column;  
		position: absolute;     
		right: 0px;
		left: 0px;
		top: 0px;
		margin: 0px;
		border-radius: 0px;
		width: -webkit-fill-available;
		padding-top:var(--mobile-header-height);
		padding-bottom:var(--mobile-footer-height);
	}
	.flex-canvas>div:first-child {
		display: none;
	}
	.flex-canvas  div:last-child {
		width: -webkit-fill-available;
		display: block;
	}
	.flex-canvas  div:last-child div.logo { 
		position: fixed;
		top: 5px;
		right: 10px;
		left: auto;
		bottom: auto ;    
		z-index: 200;
	}
	.flex-canvas  div:last-child div.logo img {
		max-height: 40px;
		width: auto;
	}
	
	 
	
	.content-body {
		display: flex;
		flex-direction: column;
		flex-grow:1;
		margin: 40px 10px 10px 10px !important;
		min-height: 300px;
		width: -webkit-fill-available;
		padding-left: 10px;
		padding-right: 10px;
		background: none;
		border-radius: 0px;
	}
	
.content-body ,	.content-body p {
		font: inherit;
    color: hsla(261, 18%, 35%, 0.82);
    font-size: 1.2rem;
    line-height: 2.3rem;
		}
	.flex-canvas>div:last-child .main-menu {
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		background-position: top left;
		position: fixed;
		left: 0px;
		top:  var(--mobile-header-height);
		bottom: auto;
		height: auto;
		background-color: var(--base-blue-color);
		padding: 0px;
		margin: 0px;
		transform-origin: 0px 0px;
		transform: scale(1, 0);
		transition: transform 0.5s ease-out, opacity 0.3s ease-out;
		opacity: 0;
	}
	body[class~="pop"] .flex-canvas>div:last-child .main-menu {
		transform: scale(1, 1);
		opacity: 1;
	}
	.flex-canvas>div:last-child .main-menu>a>div { 
		font-weight: bold;
		margin: 0px;
		padding: 15px;
		color: rgb(144, 96, 224);
		font-size: 17px;
	}
}