[task10-win] {

	position:relative;
	width:100%;
	height:500px;
	opacity:1;
	background-color:white;
	display:flex;
        justify-content:center;
	align-items:center;
	overflow:auto;
	border-radius:24px;
	padding:16px 0px 24px 0px;

	opacity:0;
	transition:opacity 0.5s ease-in-out;
}

[task10-win][show] {
	opacity:1;
	
}


[task10-start] {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
        display:flex;
	justify-content:center;
	align-items:center;
	opacity:1;
        transition:opacity 0.5s ease-in-out;

}

[task10-start][hide] {
	opacity:0;
}



[task10-start-butt] {
	display:block;
	width:150px;
	height:46px;
	background-color:#e8e8e8;
	text-transform:uppercase;
	font-size:14px;
	font-weight:600;
        display:flex;
        justify-content:center;
	align-items:center;
	border-radius:5px;
	cursor:pointer;
	user-select:none;
	opacity:0;
        transition:opacity 0.5s ease-in-out;

}


[task10-start-butt][show] {
	opacity:1;
}






[task10-start-butt]:active {
	transform:translate3d(1px,1px,0px);
}


[header][pc="1"] ~ [content] [task10-start-butt] {
	background-color:#3399cc;
	color:white;
}

[header][pc="2"] ~ [content] [task10-start-butt] {
	background-color:#ccee66;
	color:#474747;
}

[header][pc="3"] ~ [content] [task10-start-butt] {
	background-color:#ffcc00;
	color:#474747;
}

[header][pc="4"] ~ [content] [task10-start-butt] {
	background-color:#ff6600;
	color:white;
}

[task10-container] {
	position:relative;
	width:100%;
        height:calc(var(--vh, 1vh) * 100);
	background-color:white;
	opacity:0;
        transition:opacity 0.5s ease-in-out;
}

[task10-container][show] {
	opacity:1;
}

[task10-close] {
	position:fixed;
	top:10px;
	right:10px;
	width:60px;
	height:60px;
	background-color:rgba(255,255,255,1);
	z-index:99;
        display:flex;
        justify-content:center;
	align-items:center;
	border-radius:16px;
        opacity:0;
        transition:opacity 0.5s ease-in-out;
        cursor:pointer;
}

[task10-close][show] {
	opacity:1;
}


[acc-avat-task10] {
	position:relative;
	width:50px;
	height:50px;
	left:auto;
	top:auto;
	border-radius:100px;
	overflow:hidden;


}

[acc-avat-task10] > img {
	width:100%;
	height:100%;
	object-fit:cover;
}


[header][pc="1"] ~ [task10-close] {
        box-shadow:0px 0px 0px 4px rgba(51,153,204,1);
}

[header][pc="2"] ~ [task10-close] {
        box-shadow:0px 0px 0px 4px rgba(142,166,71,1);

}

[header][pc="3"] ~ [task10-close] {
        box-shadow:0px 0px 0px 4px rgba(210,165,19,1);
}

[header][pc="4"] ~ [task10-close]  {
        box-shadow:0px 0px 0px 4px rgba(255,102,0,1);
}



[task10-shadow] {
	position:fixed;
	display:block;
	width:100%;
        height:calc(var(--vh, 1vh) * 100);
	left:0px;
	top:0px;
	opacity:0;
	background-color:#000000;
	transition:opacity 0.5s ease-in-out;
	z-index:20;
}

[task10-shadow][move] {
	opacity:0.45;
	
}


[task10-wrapper] {
	display:block;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:20;
        display:flex;
	justify-content:center;
	align-items:center;
}

[task10-form] {
        position:relative;
	display:block;
	width:345px;
	background-color:white;
	border-radius:30px;
	opacity:0;
        transition:opacity 0.5s ease-in-out;
        padding:0px 30px 0px 30px;
}

[task10-form][move] {
	opacity:1;
}


[task10-close-button] {
	position:absolute;
	display:block;
	width:32px;
	height:32px;
	background-image:url(../images/close.svg);
	top:12px;
	right:12px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	cursor:pointer;

}

@media screen and (max-width: 375px) {

[task10-form] {
        width:calc( (100vw - 320px)/(375 - 320) * (345 - 304) + 304px);
        padding:0px calc( (100vw - 320px)/(375 - 320) * (30 - 8) + 8px) 0px calc( (100vw - 320px)/(375 - 320) * (30 - 8) + 8px);
}


}

[task10-logo] {
	position:absolute;
	left:20px;
        top:4px;
        width:108px;
        height:50px;


}

[task10-logo] > img {
	width:100%;
	height:100%;
	object-fit:cover;
}

[task10-form] [lf-1] {
	margin:80px 0px 30px 0px;
}


[task10-form][text] {
	width:800px;
}

@media screen and (max-width: 1000px) {

[task10-form][text] {
	width:calc( (100vw - 320px)/(1000 - 320) * (800 - 304) + 304px);
}


}


[type-a] {
	font-size:22px;
	font-weight:600;
	line-height:150%;
	margin:0px 0px 20px 0px;

}

[type-b] {
	border:1px solid #e8e8e8;
        font-size:14px;
	font-weight:400;
	line-height:150%;
        margin:0px 0px 20px 0px;
        border-radius:16px;
        padding:16px 16px 16px 16px;


}


[type-c] {
        font-size:18px;
	font-weight:600;
	line-height:150%;
	margin:0px 0px 10px 0px;
}

[type-d] {
}

[type-e] {
        padding:16px 16px 16px 16px;
        border-radius:16px;
        margin:16px 0px 16px 0px;

}

[type-f] {
	border:1px solid red;
}

[type-g] {
	
}

[type-g]:not(:last-child) {
        margin:0px 0px 16px 0px;

	
}


[task10-form][pc2="1"]  [type-c] {
	color:rgba(51,153,204,1);
}

[task10-form][pc2="2"]  [type-c] {
        color:rgba(142,166,71,1);

}

[task10-form][pc2="3"]  [type-c] {
	color:rgba(210,165,19,1);
}

[task10-form][pc2="4"]  [type-c] {
	color:rgba(255,102,0,1);
        
}

[task10-form][pc2="1"]  [type-e] {
	background-color:rgba(51,153,204,0.15);
}

[task10-form][pc2="2"]  [type-e] {
        background-color:rgba(142,166,71,0.15);

}

[task10-form][pc2="3"]  [type-e] {
	background-color:rgba(210,165,19,0.15);
}

[task10-form][pc2="4"]  [type-e] {
	background-color:rgba(255,102,0,0.15);
        
}

[lf-text] {
	overflow:auto;
	max-height:calc(100vh - 350px);
	margin:0px 0px 40px 0px;
}


@media screen and (max-width: 1000px) {

[task10-form][text] {
	width:calc( (100vw - 320px)/(1000 - 320) * (800 - 304) + 304px);
}

[type-a] {
	font-size:calc( (100vw - 320px)/(1000 - 320) * (22 - 18) + 18px);
}

[type-c] {
	font-size:calc( (100vw - 320px)/(1000 - 320) * (18 - 16) + 16px);
}

[type-b] {
	font-size:calc( (100vw - 320px)/(1000 - 320) * (14 - 12) + 12px);
}



}