@keyframes bli {
	0%{
	background-color: inherit;
	}
	15%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	30%{
	background-color: var(--color1);
	color: var(--color5);
	}
	45%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	60%{
	background-color: var(--color1);
	color: var(--color5);
	}
	75%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	100%{
	background-color: inherit;
	}
}

.blink{
	animation-name: bli;
	animation-duration: 2s;
	animation-iteration-count: 2;
	animation-timing-function: linear;
}

/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--color8); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color1); 
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color9); 
}


#haku_wrap::-webkit-scrollbar {
  width: 0px;
}

/* Track */
#haku_wrap::-webkit-scrollbar-track {
    background-color: var(--color5);
    border-radius: 15px;
}
 
/* Handle */
#haku_wrap::-webkit-scrollbar-thumb {
  background: rgba(253,150,16,0.0); 
  border-radius: 3px;
}

/* Handle on hover */
#haku_wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(246,141,0,0.0); 
}

html{
	padding: 0;
	margin: 0;
	width:100%;
	height: 100%;
    font-family: Rubik;
}

body{
    padding: 0;
    margin: 0;
    background-color: var(--color2);
    font-family: Rubik;
	font-weight: 400;
}

.btn00{
	position: relative;
	display:inline-block;
	width:auto;
	height:50px;
	line-height: 50px;
	font-size:18px;
	box-sizing: border-box;
	padding:0px 20px 0px 60px;
	font-weight: 400;
	cursor: pointer;
	font-family: Rubik;
	margin:20px auto 20px 0px;
	background-color:var(--color8);
	border-radius: 50px;
	transition:all 0.3s;
}

.btn00:hover{
	transform: scale(1.03);
}

.btn00:before{
	position: absolute;
	top:0px;
	left:12px;
	bottom:0px;
	width:35px;
	height: 35px;
	content:"";
	margin: auto 0px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("/imgs/Icon feather-arrow-left-circle.svg");
}


#popup{
	position:fixed;
	bottom:0px; 
	left:0px;
	width:100%;
	height:10vh;
	min-height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transform:translateY(20vh);
 	opacity: 0.0;
	font-size:25px;
	font-family: Rubik;
	font-weight: 500;
	background: rgba(7,25,74,0.33) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	color:white;
	z-index: 9090;
	animation: slide 5s;
}

@keyframes slide {
	0%{ transform:translateY(20vh); opacity: 0.0; }
	10%{ transform:translateY(0vh); opacity: 1.0;}
	90%{ transform:translateY(0vh); opacity: 1.0; }
	100%{ transform:translateY(20vh); opacity: 0.0; }
}

#splash {
	position:fixed;
	display: flex;
	top:0px;
	left:0px;
	width: 100%;
	height:100vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color2);
	z-index: 1000;
	opacity: 1.0;
	transition: all 1.0s;
}

#topbar{
	display: flex;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	width: 100%;
	height:auto;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background-color: var(--color2);
    box-shadow: 0px 0px 4px var(--color11);
	z-index: 998;
}

#topbar #topbarbotrow{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:100%;
    max-width: 1000px;
    gap:0px 15px;
    height:120px;
}

#topbar #logo{
	width:auto;
	height:60%;
    border-radius: 100px;
    box-shadow: 0px 0px 2px var(--color11);
	transform: translateX(0px);
	margin: 0px;
}

#topbar #smallscreenmenuopt{display: none; }
#topbar .btn_round#btn_menuonoff{display: none; }

#topbar .btn_round{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width:68px;
	height:68px;
	background-color:var(--color5);
	margin: auto;
	cursor: pointer;
	border-radius: 33px;
	margin-left:10px;
	transition: all 0.5s;
	overflow: visible;
}

#topbar .btn_round:hover:after{
	position: absolute;
	top:calc( 100% + 10px );
	content: attr(data-title);
	width:auto;
	padding:0px 15px;
	height:34px;
	font-size:15px;
	line-height:34px;
	background-color:var(--color6);
	color:var(--color5);
	border-radius: 5px;
}

#topbar .btn_round:hover{
	transform: scale(1.1);
}

#topbar .btn_round img{ width:35%; height:35%;}

#topbar #topbartoprow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:100%;
    height:40px;
    background-color:rgba(35,52,79,1.00);
}

#topbar #topbartoprow div{
    display:flex;
    width:50%;
    height: 100%;
    gap:0px 4px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#topbar #topbartoprow div .minibtn{
    -webkit-appearance:none;
    padding:0px 15px;
    box-sizing: border-box;
    width:auto;
    height:70%;
    line-height: 70%;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    margin: 0px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-color:var(--color3);
    color:var(--color1);
    text-decoration: none;
    border:0;
    outline:none;
    transition: all 0.2s;
}

#topbar #topbartoprow div .minibtn:hover{
    transform:scale(1.065);
}

#topbar #topbartoprow div .split{
    width:1px;
    height:60%;
    background-color:var(--color11);
    margin:0px 2px;
}

#topbar #topbartoprow div label{
    display: flex;
    flex-direction: row;
    width: auto;
    height:100%;
    align-items: center;
    justify-content: center;
    gap:0px 10px;
    cursor: pointer;
    padding: 0px 7px;
    box-sizing: border-box;
}

#topbar #topbartoprow div label img {
    display: flex;
    width: auto;
    height:30%;
    aspect-ratio:1/1;
    align-items: center;
    justify-content: center;
}

#topbar #topbartoprow div p,
#topbar #topbartoprow div label p {
    color:var(--color6);
    font-size:13px;
}

#connecting_tv_bgr{
	display: none;
	position:fixed;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(226,220,220,0.01);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 1111;
}

#connecting_menu{ display:none; }

#connecting_menu:checked ~ #connecting_tv_bgr{
	display: block;
}

#connecting_tv {
	display: none;
	width:90%;
	height: auto;
	margin: auto;
	padding:30px 0px;
	box-sizing: border-box;
	z-index: 9951;
}

#connecting_menu:checked ~ #connecting_tv{
	display: flex;
}

#connecting_tv input[type="radio"]{
	display: none;
}

#connecting_tv .slide{
	display: none;
	width:100%;
	height: auto;
	margin: 5px auto 15px auto;
	background-color: var(--color2);
	border:1px solid var(--color5);
	border-radius: 24px;
	padding:40px;
	box-sizing: border-box;
	box-shadow: 0px 2px 5px var(--color5);
	z-index: 2222;
}

#connecting_tv #i1:checked ~ .step1{ display:block; }
#connecting_tv #i2:checked ~ .step2{ display:block; }
#connecting_tv #i3:checked ~ .step3{ display:block; }
#connecting_tv #i4:checked ~ .step4{ display:block; }

#connecting_tv .slide h5 {
	font-size:24px;
	font-weight: 500;
	line-height: 50px;
    color:var(--color1);
	margin: 0px;
}

#connecting_tv .slide div,
#connecting_tv .slide label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width:100%;
	height:110px;
	background-color:var(--color5);
    color:var(--color1);
	border-radius: 50px;
	padding:0px 10px 0px 100px;
	box-sizing: border-box;
	margin:20px auto;
	transition: all 0.2s;
}

#connecting_tv .slide div:hover,
#connecting_tv .slide label:hover {
	transform:scale(1.015);
}

#connecting_tv .slide #step2backbtn:hover{
	transform:scale(1.00);
}

#view_1:checked ~ #connecting_tv .slide.step1 #no_cast{ background-color: var(--color3); }
#view_3:checked ~ #connecting_tv .slide.step1 #play_cast{ background-color: var(--color3); }
#view_4:checked ~ #connecting_tv .slide.step1 #tv_app_lab{ background-color: var(--color3); }


#connecting_tv .slide #btn_con_close{
	position:absolute;
	top:25px;
	right:25px;
	display: block;
	background-color:transparent;
	width:35px;
	height: 35px;
	padding: 0;
}

#connecting_tv .slide #btn_con_close img{
	transform: rotate(45deg);
	left:0px;
	filter: invert(0);
}

#connecting_tv .slide div img,
#connecting_tv .slide label img {
	position: absolute;
	top:0px;
	bottom:0px;
	left:40px;
	width:30px;
	height:30px;
	margin: auto;
}

#connecting_tv .slide div p:nth-of-type(1),
#connecting_tv .slide label p:nth-of-type(1) {
	font-size:22px;
	line-height: 27px;
	font-weight: 500;
	margin:0px 0px 5px 0px;
	padding: 0;
}

#connecting_tv .slide div p:nth-of-type(2),
#connecting_tv .slide label p:nth-of-type(2) {
	font-size:16px;
	line-height: 19px;
	font-weight: 400;
	margin:0;
	padding: 0;
}

#connecting_tv .slide.step2 div#conwrap{
	position: relative;
	display: block;
	width:100%;
	height:75px;
	border-radius: 50px;
	overflow: hidden;
	background-color: var(--color6);
	margin:20px auto 0px auto;
}

#connecting_tv .slide.step2 #step2backbtn,
#connecting_tv .slide.step4 #step3backbtn {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0px;
	height: 40px;
	filter: invert();
	background-color: transparent;
}

#connecting_tv .slide.step2 #step2backbtn img,
#connecting_tv .slide.step4 #step3backbtn img {
	position: inherit;
	margin: 0;
}

#connecting_tv .slide.step2 p {
	line-height: 35px;
    color:var(--color1);
}

#connecting_tv .slide div input#codeconnect {
	position: absolute;
    top:0px;
    left:0px;
	display: block;
	width: calc( 100% - 140px );
	height:75px;
	line-height: 75px;
	color: var(--color5);
	-webkit-appearance:none;
	border:0;
	padding:0px 40px;
	box-sizing: border-box;
	font-size:18px;
	}

#connecting_tv .slide.step2 div,
#connecting_tv .slide.step2 label {
	display: inline-block;
	position: absolute;
	top:0px;
	bottom:0px; 
	margin:auto 0px;
	right: 10px;
	width:auto;
	height:60px;
	line-height: 60px;
	border-radius: 50px;
	background-color: var(--color3);
	color: var(--color4);
	-webkit-appearance:none;
	border:0;
	padding:0px 20px;
	box-sizing: border-box;
	font-size:18px;
	}

#connecting_tv .slide.step4 div.badgewrap {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:10px;
    width: 100%;
    height: auto;
    justify-content: space-around;
    padding: 15px 0px 0px 0px;
    margin: 20px auto 0px auto;
    box-sizing: border-box;
    border-radius: 0;
    border-top:2px dashed var(--color9);
    background-color: transparent;
}

#connecting_tv .slide.step4 div.badgewrap:hover {
    transform: scale(1.0);
}

#connecting_tv .slide.step4 div.badgewrap .linkki {
    display: flex;
    width:45%;
    height: auto;
}

#connecting_tv .slide.step4 div.badgewrap .linkki img {
    width:auto;
    height:80%;
    object-fit: cover;
    position: inherit;
    left:inherit;
    filter: invert(0);
}

#filteri{
	display: inline-block;
	position:fixed;
	top:0px;
	left:0px;
	width: 100%;
	height:auto;
	background-color: var(--color5);
	z-index: 505;
	transition: all 0.3s;
}

#suodatin:checked ~ #filteri{
	top:160px;
}

#filteri #rivi1{
	position: relative;
	width:80%;
	max-width: 810px;
	margin:0px auto;
	padding:15px 0px 15px 55px;
	box-sizing: border-box;
}

#filteri #rivi1:before{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	display: inline-block;
	width: auto;
	height:25px;
	line-height: 25px;
	margin:auto 0px;
	font-family: Aborm;
	font-size: 22px;
	font-weight: 500;
	color: var(--color8);
	content:"Kieli";
}

#filteri #rivi1 .f_btn{
	display: inline-block;
	width:auto;
	height:42px;
	line-height: 42px;
	font-family: Rubik;
	font-weight: 400;
	font-size:18px;
	box-sizing: border-box;
	padding: 0px 15px;
	margin:0px 7px;
	color: var(--color2);
	background-color: var(--color8);
	border-radius: 30px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	
}

#filteri #rivi1 input[type="checkbox"],
#filteri #rivi1 input[type="radio"]{
	display: none;
}

#filteri #rivi1 input[type="checkbox"]:checked + .f_btn,
#filteri #rivi1 input[type="radio"]:checked + .f_btn{
	background-color: var(--color3);
	color:var(--color4);
}

#player_wrap{
	position:fixed;
	display: none;
	width:100%;
    max-width: 1050px;
	height: calc( 100% - 245px);
	top:235px;
	left:0px;
    margin: 10px auto 0px auto;
	right:0px;
	bottom:0px;
    overflow: hidden;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.4s;
	z-index: 100;
}

#player_wrap #haku_wrap::-webkit-scrollbar {
   width: 12px;
}

/* Track */
#player_wrap  #haku_wrap::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px rgba(255,255,255,0.0); 
   border-radius: 3px;
}
 
/* Handle */
#player_wrap #haku_wrap::-webkit-scrollbar-thumb {
   background: rgba(110,113,125,0.59); 
   border-radius: 5px;
}

/* Handle on hover */
#player_wrap #haku_wrap::-webkit-scrollbar-thumb:hover {
  background-color:var(--color3); 
}

#suodatin:checked ~ #hori1_menu {
	top:250px;
}

#suodatin:checked ~ #player_wrap {
	top: 320px;
	height: calc( 100% - 340px );
}

#player_wrap #haku_wrap #no_user_label,
#player_wrap #haku_wrap #free_user_label{
	position: relative;
	display: none;
	width: 100%;
	max-width: 850px;
	margin:0px auto 40px auto;
	border-radius: 13px;
	padding: 25px 320px 25px 30px;
	box-sizing: border-box;
	background-color: var(--color8);
}

#player_wrap #haku_wrap #no_user_label h5,
#player_wrap #haku_wrap #free_user_label h5{
	width: 100%;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
}

#player_wrap #haku_wrap #no_user_label p,
#player_wrap #haku_wrap #free_user_label p{
	width: 100%;
	height: auto;
	font-size: 16px;
	font-weight: 400;
	white-space: normal;
	line-height: 19px;
	margin: 6px 0px;
}

#player_wrap #haku_wrap #no_user_label .btn,
#player_wrap #haku_wrap #free_user_label .btn{
	position: absolute;
	top:0px;
	bottom:0px;
	right: 45px;
	width: auto;
	height: 42px;
	line-height: 42px;
	font-size: 17px;
	background-color: var(--color3);
	color: var(--color1);
	cursor: pointer;
	border-radius: 20px;
	padding: 0px 15px;
	margin: auto 0px;
	transition: all 0.2s;
}

#player_wrap #haku_wrap #no_user_label .btn:hover,
#player_wrap #haku_wrap #free_user_label .btn:hover{
	transform: scale(1.05);
}

#player_wrap #haku_wrap{
	display:block;
	width:100%;
	height:100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow-y: auto;
    overflow-x:hidden;
	padding: 0px 15px;
}

#player_wrap #haku_wrap #toprow {
	position: sticky;
	display: flex;
	top:20px;
	width:100%;
    max-width: 1050px;
	height:50px;
	margin:0px auto;
	padding: 0px 0px;
    box-sizing: border-box;
	z-index: 123;
}

#player_wrap #haku_wrap #toprow p{
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size:16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
    border-radius: 15px;
	text-shadow:0px 1px 2px var(--color2);
	color:var(--color1);
}

#player_wrap #haku_wrap #toprow p:nth-of-type(1){
    width:auto;
    text-align: left;
}

#player_wrap #haku_res{
	padding: 20px 0px;
	box-sizing: border-box;
}


#player_wrap #haku_res .loadmorebut {
	display: block;
	background-color: var(--color3);
	color: var(--color1);
	font-size:18px;
	line-height: 50px;
	height: 50px;
	font-weight: 400;
	border-radius: 30px;
	-webkit-user-select:none;
	user-select:none;
	box-sizing: border-box;
	padding: 0px 28px;
	margin: 20px auto;
	outline: none;
	border:0;
	cursor: pointer;		
}

#omatlaulutlistaus{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 160px);
	top:160px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
}

#suodatin:checked ~ #omatlaulutlistaus {
	top:220px;
	height: calc( 100% - 220px );
}


#omatlaulutlistaus #omatlaulutlistaus_wrap{
	display:block;
	width:100%;
	height:100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow-x: visible;
	overflow-y: auto;
	padding: 0px 0px;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top{
	position: relative;
	display: flex;
	width:94%;
	max-width: 810px;
	height:118px;
	background-color: var(--color9);
	border-radius: 100px;
	overflow: visible;
	margin: 15px auto 35px auto;
	transform: translateX(25px);
	box-sizing: border-box;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	padding: 0px 0px 0px 125px;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #omxo{ display: none; }

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top label{
	position: absolute;
	top:0px;
	bottom:0px;
	left:-50px;
	width:33px;
	height:33px;
	margin: auto;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #oxmolab {
	position: absolute;
	display: flex;
	justify-content: center;
	align-content: center;
	top:0px;
	bottom:0px;
	left: inherit;
	right:20px;
	width:65px;
	height:65px;
	margin: auto;
	background-color: rgba(217,217,217,1.00);
	clip-path: circle();
	transition: all 0.2s;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #oxmolab:hover {
		background-color: rgba(193,193,193,1.00);
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_icon_wrap{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top:0px;
	bottom:0px;
	left:9px;
	width:100px;
	height:100px;
	margin: auto;
	background-color: var(--color3);
	clip-path: circle();
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_icon_wrap img {
	width: 60%;
	height: auto;
	margin: auto;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_nimi{
	padding: 0;
	margin: 0;
	font-family: Aborm;
	text-transform: capitalize;
	font-weight: 500;
	font-size:28px;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_songs{
	padding: 0;
	margin: 0;
	font-size:16px;
	font-family: Rubik;
	font-weight: 400;
	
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 {
	position: sticky;
	display: block;
	top:0px;
	width:100%;
	max-width: 1050px;
	height:35px;
	margin:0px auto;
	padding: 0px 0px;
	box-sizing: border-box;
	z-index: 123;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p{
	display: block;
	float:left;
	font-size:16px;
	font-weight: 400;
	margin: 0;
	padding: 0;    
	text-shadow:0px 1px 2px var(--color2);
	color:var(--color1);
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(1){width:50%; text-align: left;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(2){width: calc( 50% - 160px ); text-align: left;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(3){width:80px; text-align: right;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(4){width:80px; text-align: right;}



#omatlaulutlistaus #omatlaulutlistaus_wrap #haku_res2 {
	padding: 0px 20px;
	box-sizing: border-box;	
	overflow: auto;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap {
	display: none;
	position: absolute;
	top:45px;
	left: inherit;
	right:100px;
	bottom:inherit;
	width: 300px;
	height:auto;
	padding: 15px 30px;
	box-sizing: border-box;
	background-color:var(--color4);
	clip-path: none;
	border-radius: 10px;
}

#omatlaulutlistaus #omatlaulut_top #omxo:checked ~ label#omatlaulut_top_wrap_bgr {
	display: block;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 444;
}

#omatlaulutlistaus #omatlaulut_top #omxo:checked ~ div#omatlaulut_top_wrap {
	display: inline-block;
	z-index: 445;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut,
#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
	display: block;
	position: relative;
	width: 100%;
	left:initial;
	top:initial;
	bottom:initial;
	height: auto;
	font-size:16px;
	padding:14px 0px;
	box-sizing: border-box;
	font-family: Rubik;
	font-weight: 400;
	color:var(--color2);
	clip-path: none;
	background-color: transparent;
	cursor: pointer;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut{
	border-bottom:1px solid var(--color10);
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width:20px;
	height: 20px;
	content:url("/imgs/Icon awesome-trash.svg");
	filter: invert(1);
	margin:auto 0px;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width:20px;
	height: 20px;
	content:url("/imgs/Icon feather-edit-3.svg");
	margin:auto 0px;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut,
#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
	
}

#omat_listat_wrap{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 235px);
	top:235px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
}

#suodatin:checked ~ #omat_listat_wrap {
	top:310px;
	height: calc( 100% - 310px );
}

#omat_listat_wrap h3{
	font-family:Aborm;
	font-size:35px;
	font-weight: 500;
	text-align: left;
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap{
	display:none;
	width:80%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 0px 0px;
}

#omat_listat_wrap #listat_lisays{
	display:none;
	width:80%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 10px auto;
	overflow: auto;
	border-radius: 15px;
	background-color:var(--color9);
	padding: 50px;
}

#omat_listat_wrap #listat_lisays #icon_selector{
	white-space: nowrap;
	overflow-y: inherit;
	overflow-x: auto;
	margin:0px 0px 40px 0px;
	padding: 20px 0px 40px 0px;
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]{
	display: none;
}

#omat_listat_wrap #listat_lisays #icon_selector label{
	position: relative;
	display: inline-flex;
	width:118px;
	height: 169px;
	background-color: #D3D1CA;
	border-radius: 90px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translateY(5px) scale(0.97);
	transition: all 0.3s;
}

#omat_listat_wrap #listat_lisays #icon_selector label:hover{
	transform: translateY(-2px) scale(0.97);
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]:checked + label{
	background-color: var(--color1);
	transform: translateY(-5px) scale(0.97);
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]:checked + label:after{
	position: absolute;
	top: calc( 100% + 7px );
	content: "L";
	background-color:var(--color3);
	width:35px;
	height: 35px;
	line-height: 35px;
	font-size: 18px;
	transform: rotateY(180deg) rotateZ(-47deg) scale(0.7);
	text-align: center;
	clip-path: circle();
	color:var(--color1);
}

#omat_listat_wrap #listat_lisays #icon_selector label img{
	width:80px;
	height: 88px;
}

#omat_listat_wrap #listat_lisays button {
	width:200px;
	height: 60px;
	line-height: 60px;
	font-size:22px;
	text-align: center;
	border:0;
	padding: 0;
	margin-right: 55px;
	background-color: var(--color2);
	color:var(--color1);
	border-radius: 30px;
}

#ol_listaus, #ol_lisays, #ol_muokkaus { display: none; }

#omat_listat_wrap #ol_listaus:checked ~ #listat_wrap{
		display:block;
}

#omat_listat_wrap #ol_muokkaus:checked ~ #listat_lisays,
#omat_listat_wrap #ol_lisays:checked ~ #listat_lisays{
		display:block;
}

#omat_listat_wrap #listat_lisays #btn_55,
#omat_listat_wrap #listat_lisays #btn_56{
	display:none;
}

#omat_listat_wrap #ol_lisays:checked ~  #listat_lisays #btn_56{ display: inline-block; }
#omat_listat_wrap #ol_muokkaus:checked ~  #listat_lisays #btn_55{ display: inline-block; }

#omat_listat_wrap #listat_lisays h4{
	font-family: Aborm;
	font-weight: 500;
	margin: 0;
	padding: 0;
	font-size:24px;
	line-height: 34px;
}

#omat_listat_wrap #listat_lisays input {
	font-family: Rubik;
	font-weight: 300;
	width:100%;
	height:80px;
	line-height: 80px;
	border-radius: 40px;
	box-sizing: border-box;
	padding: 0px 50px;
	border:1px solid var(--color2);
	margin: 15px 0px 50px 0px;
	outline: none;
	font-size:18px;
	background-color: transparent;
}

#omat_listat_wrap #listat_lisays input::placeholder{
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap p {
	font-family:Rubik;
	font-size:24px;
	line-height: 28px;
	text-align: left;
	font-weight: 400;
	white-space: normal;
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap #ooo_listat {
	display: inline-flex;
	flex-flow: row wrap;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap{
	display: inline-flex;
	width:198px;
	height:auto;
	flex-direction: column;
	border-radius: 145px;
	padding: 35px 40px;
	vertical-align: top;
	margin: 5px 2px;
	justify-content: center;
	align-items: center;
	transform: scale(0.95);
	box-sizing: border-box;
	background-color:var(--color9);
	transition: all 0.3s;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap:hover{
	transform: scale(0.95) translateY(-3px);
	cursor: pointer;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap img {
	width: 100%;
	height:auto;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap img.plussign {
	width: 62px;
	height: 62px;
	margin: 20px auto 0px auto;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap h5 {
	font-size:18px;
	line-height: 22px;
	font-family: Rubik;
	font-weight: 500;
	text-align: center;
	white-space: normal;
	margin:10px auto;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap p {
	font-size:15px;
	line-height: 18px;
	font-family: Rubik;
	font-weight: 400;
	text-align: center;
	white-space: normal;
}

#omatili_wrap {
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 160px);
	top:160px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: auto;
}

#omatili_wrap #omat_tiedot_wrap {
	display:block;
	width:80%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 20px 0px 50px 0px;
}


#omatili_wrap #omat_tiedot_wrap button{
	display: inline-block;
	height: 42px;
	line-height: 42px;
	font-size:16px;
	font-family: Rubik;
	font-weight: 400;
	padding: 0px 25px;
	box-sizing: border-box;
	background-color: var(--color2);
	color: var(--color1);
	border-radius: 21px;
	outline: none;
	border:0;
}

#omatili_wrap #omat_tiedot_wrap h3{
	font-size:35px;
	line-height: 35px;
	font-family: Aborm;
	font-weight: 500;
    color: var(--color1);
}


#omatili_wrap #omat_tiedot_wrap .row {
	position: relative;
	display: block;
	width:100%;
	height:auto;
	margin:70px 0px 5px 0px;

}

#omatili_wrap #omat_tiedot_wrap .row #logoutbtn {
	position: absolute;
	top:-5px;
	right:0px;
	background-color: var(--color3);
}

#omatili_wrap #omat_tiedot_wrap .row p {
	font-family: Rubik;
	font-weight: 500;
	font-size: 20px;
	height:60px;
	margin: 0;
	padding: 0;
    color: var(--color1);
	line-height: 30px;
}

#omatili_wrap #omat_tiedot_wrap .row div {
	position: relative;
	font-family: Rubik;
	font-weight: 300;
	font-size: 20px;
	background-color:var(--color5);
    color:var(--color1);
	border-radius: 50px;
	width:100%;
	height:70px;
	line-height: 70px;
	box-sizing: border-box;
	padding: 0px 20px;
}

#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp{}

#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp #text_etunimi {
	position: absolute;
	top:0px;
	bottom:0px;
	left:20px;
	width:30%;
	height: calc( 100% - 20px );
	margin: auto;
	border:0;
	outline:none;
	padding: 0px 25px;
	font-size: 18px;
	font-weight: 400;
    background-color:transparent;
	border-top-left-radius: 50px;
    color:var(--color1);
	border-bottom-left-radius: 50px;
	box-sizing: border-box;
}

#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp #text_sukunimi {
	position: absolute;
	top:0px;
	bottom:0px;
	left:33%;
	width:40%;
	border:0;
	outline:none;
	height: calc( 100% - 20px );
	margin: auto;
	padding: 0px 25px;
	font-size: 18px;
	font-weight: 400;
    background-color:transparent;
	box-sizing: border-box;
    color:var(--color1);
	border-left:1px solid var(--color16);
}



#omatili_wrap #omat_tiedot_wrap .row input#campaigncode_kentta {
	position: relative;
	font-family: Rubik;
	font-weight: 300;
	font-size: 20px;
	background-color:var(--color6);
	border-radius: 50px;
	width:100%;
	height:70px;
	line-height: 70px;
	border:0px;
	outline:none;
	box-sizing: border-box;
	padding: 0px 20px;
}


#omatili_wrap #omat_tiedot_wrap .row .btn_right {
	position: absolute;
	bottom:15px;
	right:14px;
	font-family: Rubik;
	font-weight: 300;
	font-size: 18px;
	background-color:var(--color3);
	color:var(--color4);
	border-radius: 50px;
	width:auto;
	height:42px;
	line-height: 42px;
	box-sizing: border-box;
	padding: 0px 20px;
	-webkit-user-select:none;
	user-select:none;
	cursor: pointer;
}


#omatili_wrap #omat_tiedot_wrap .row #btn_voimassa.btn_right {
	top:75px;
	right: 15px;
	botton:inherit;
}

#omatili_wrap #omat_tiedot_wrap div#renews,
#omatili_wrap #omat_tiedot_wrap div#renews2,
#omatili_wrap #omat_tiedot_wrap div#renews3,
#omatili_wrap #omat_tiedot_wrap div#renews4  {
	position: relative;
	display: block;
	width:100%;
	height:auto;
	margin:30px 0px 5px 0px;
	border-bottom:1px solid rgba(201,201,201,1.00);
	padding: 0px 0px 30px 50%;
	box-sizing: border-box;
	text-align: right;
}



#omatili_wrap #omat_tiedot_wrap div#renews2,
#omatili_wrap #omat_tiedot_wrap div#renews3,
#omatili_wrap #omat_tiedot_wrap div#renews4 {
	border:0px solid transparent;
}

#omatili_wrap #omat_tiedot_wrap div#renews p,
#omatili_wrap #omat_tiedot_wrap div#renews3 p,
#omatili_wrap #omat_tiedot_wrap div#renews4 p{
	position: absolute;
	left:0px;
	width:50%;
	height:auto;
	margin:0;
	white-space: normal;
	line-height: 24px;
	text-align: left;
	font-size:20px;
    color: var(--color1);
}

#omatili_wrap #omat_tiedot_wrap div#renews input[type="radio"],
#omatili_wrap #omat_tiedot_wrap div#renews3 input[type="radio"]{
	display: none;
}

#omatili_wrap #omat_tiedot_wrap div#renews label,
#omatili_wrap #omat_tiedot_wrap div#renews2 div,
#omatili_wrap #omat_tiedot_wrap div#renews3 label,
#omatili_wrap #omat_tiedot_wrap div#renews4 div {
	display: inline-block;
	background-color:rgba(206,206,206,1.00);
	width:75px;
	height:42px;
	line-height: 42px;
	font-size:18px;
	margin:0px 5px;
	color:black;
	text-align: center;
	border-radius: 35px;
}

#omatili_wrap #omat_tiedot_wrap div#renews4 div,
#omatili_wrap #omat_tiedot_wrap div#renews2 div {
	padding: 0px 20px;
	width: auto;
}

#renew_on:checked ~ #renews2{ display:none; }
#renew_off:checked ~ #renews4{ display:none; }

#omatili_wrap #omat_tiedot_wrap div#renews input[type="radio"]:checked + label,
#omatili_wrap #omat_tiedot_wrap div#renews3 input[type="radio"]:checked + label,
#omatili_wrap #omat_tiedot_wrap div#renews4 input[type="radio"]:checked + label {
	background-color:var(--color3);
	color:var(--color4);
}


#omatili_wrap #omat_tiedot_wrap #addcard_wrap{
	display:none;
	width:100%;
	height: calc( 100% - 140px );
	position: fixed;
	top:140px;
	left:0px;
	z-index: 522;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color1);
}

#omatili_wrap #omat_tiedot_wrap #addcard_wrap button { margin : 20px auto 15px auto; }


#omatili_wrap #omat_tiedot_wrap #gonna_addcard{ display: none; }

#omatili_wrap #omat_tiedot_wrap #gonna_addcard:checked ~ #addcard_wrap {
	display:flex;
}

#omatili_wrap #omat_tiedot_wrap #neworderbanner{
	position: relative;
	box-sizing: border-box;
	margin:20px auto;
	border-radius: 20px;
	padding: 20px 50% 20px 50px;
	background-image: url('/imgs/Group 469.svg');
	background-attachment: scroll;
	background-position: left;
	background-repeat: no-repeat;	
}

#omatili_wrap #omat_tiedot_wrap #neworderbanner h3{
	width:100%;
	height: auto;
	font-size:25px;
	font-family: Rubik;
	font-weight: 500;
	line-height: 29px;
	margin:10px 0px;
	color: var(--color4);
}
#omatili_wrap #omat_tiedot_wrap #neworderbanner p{
	width:100%;
	height: auto;
	font-size:16px;
	font-weight: 400;
	white-space: normal;
	line-height: 19px;
	margin:15px 0px;
	color: var(--color4);
}
#omatili_wrap #omat_tiedot_wrap #neworderbanner button{
	position: absolute;
	top:0px;
	bottom:0px;
	right:50px;
	margin: auto 0px;
	font-size: 20px;
	border-radius: 100px;
	height: 49px;
	line-height: 49px;
}

#topbar #hori2_menu {
	display:flex;
	width: 100%;
	transform: translateX(0px);
	margin: 0px;
	height:68px;
	overflow: hidden;
}

#topbar #hori2_menu fieldset {
	position: relative;
	display:inline-block;
	width:auto;
	flex-grow: 1;
	height:100%;
	margin:0;
	padding: 0;
	border: 0;
}

#topbar #hori2_menu fieldset .inputic:after{
	display: block;
	width: 40px;
	height: 100%;
	position: absolute;
	top:0px;
	bottom:0px;
	right:25px;
	font-size:35px;
	transform: rotate(97deg) translate(8px, 5px);
	content:"\260C";
	margin: auto 0px;
	color:var(--color2);
	z-index: 444;
}

#topbar #hori2_menu fieldset #haku{
	background-color: var(--color1);
	width:100%;
	height:100%;
	box-sizing: border-box;
	padding: 0px 30px;
	margin:0;
	font-family: Aborm;
	color: var(--color2);
	font-size:22px;
	border-radius: 40px;
	outline: none;
	border: 0;
	text-align: left;
	z-index: 333;
}

#topbar #hori2_menu #haku::placeholder{
	color: var(--color2);
	letter-spacing: 0px;
}

#topbar #hori2_menu #filter_btn{
	display:inline-block;
	position: relative;
	width:auto;
	height:100%;
	line-height: 68px;
	box-sizing: border-box;
	padding: 0px 60px 0px 35px;
	border-radius: 40px;
	font-size: 17px;
	font-family: Rubik;
    font-weight: 400;
	font-style: normal;
	background-color:var(--color5);
	color: var(--color1);
	border:1px solid var(--color11);
	cursor: pointer;
	outline: none;
	margin:0;
	margin-left: 20px;
	text-align: center;	
}

#topbar #hori2_menu #filter_btn:before {
	display: block;
	position: absolute;
	top:0px;
	right:17px;
	bottom:0px;
	width:40px;
	height:40px;
	margin-left:10px;
	line-height: 40px;
	font-size:25px;
	content: url("/imgs/filtericon2.png");
	color:var(--color1);
	margin: auto 0px;
	filter:hue-rotate(1.0);
	transform: rotate(0deg) scale(0.5) translate(-10px, -3px);
}


#player_wrap #haku_wrap .songheadforartistline {
	position: relative;
	display: flex;
    flex-direction: column;
	width: 100%;
	max-width: 810px;
	height: auto;
	padding: 40px 40px;
    box-sizing: border-box;
	-webkit-user-select:none;
	user-select:none;
    border-radius: 12px;
    transform: scale(1.04) translateY(-30px);
    z-index: 9999;
    margin: 0px auto 10px auto;
	background-color:var(--color8);
	transition:all 0.5s;
}

#player_wrap #haku_wrap .songheadforartistline h3,
#player_wrap #haku_wrap .songheadforartistline p{
    font-family: Rubik;
    margin:0;
    padding: 0;
}

#player_wrap #haku_wrap .songheadforartistline h3{ 
    font-size:32px;
    line-height: 42px;
    font-weight: 400; 
}

#player_wrap #haku_wrap .songheadforartistline p{ 
    font-size:16px;
    line-height: 20px;
    font-weight: 300;
}

#player_wrap #haku_wrap .haku_row,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row {
	position: relative;
	display: flex;
	width: 100%;
	height: 75px;
	flex-direction: row;
	margin:1px auto;
	padding: 0px 0px;
	-webkit-user-select:none;
	user-select:none;
    border-radius: 50px;
	border:0px dotted var(--color11);
    color:rgba(242,241,233,1.00);
	transition:all 0.5s;
}

#player_wrap #haku_wrap .haku_row:hover,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row:hover {
    border:1px solid var(--color11);
}

#player_wrap #haku_wrap .haku_row:first-of-type, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row:first-of-type{
	border-top:0;
}

#player_wrap #haku_wrap .haku_row .addnewwrap,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .addnewwrap {
	display: inline-block;
	width:100%;
	height:25px;
	line-height: 25px;
	margin: 5px auto 10px auto;
}

#player_wrap #haku_wrap .haku_row .addnewwrap #newlistname {
	display: inline-block;
	width:75%;
	height:33px;
	line-height: 33px;
	font-size:14px;
	font-weight: 500;
	padding: 0px 15px;
	box-sizing: border-box;
	border-radius: 7px;
	outline: none;
	margin:0px 10px;
	border: 1px solid rgba(214,214,214,1.00);
	}

#player_wrap #haku_wrap .haku_row .addnewwrap #addnewplbtn {
	display: inline-block;
	width:20%;
	height:33px;
	line-height:33px;
	font-size:15px;
	font-weight: 500;
	background-color: rgba(216,136,3,1.00);
	color:white;
	border-radius: 7px;
	padding:0;
	box-sizing: border-box;
	border:0;
	border-top: 1px solid rgba(255,255,255,1.00);
	outline: none;
	-webkit-appearance:none;
}



#player_wrap #haku_wrap .haku_row .title,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .title {
	position: absolute;
	top:16px;
	left:25px;
	display: inline-block;
	width: auto;
	max-width: 50%;
	height: 22px;
	line-height: 22px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-weight: 500;
	font-size:18px;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .subtitle, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .subtitle {
	position: absolute;
	top:40px;
	left:25px;
	display: inline-block;
	width: auto;
	max-width: 50%;
	height: 19px;
	line-height: 19px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:16px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .versio, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .versio {
	position: absolute;
	top:0px;
	bottom:0px;
	left:50%;
	display: inline-block;
	width: auto;
	height: 19px;
	line-height: 19px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:16px;
	z-index: 4;
	font-weight: 400;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .btn_play,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .btn_play {
	position:absolute;
	display: flex;
	top:0px;
	bottom:0px;
	right:70px;
	width: auto;
    min-width: 50px;
	height: 45px;
    line-height: 45px;
    border-radius: 50px;
	content:"Laula nyt";
    background-color:var(--color3);
    color:var(--color1);
	margin: auto 0px;
	padding: 0px 15px;	
	box-sizing: border-box;
	z-index: 105;
	transition: all 0.15s;
    opacity: 0;
}

#player_wrap #haku_wrap .haku_row .btn_fav{
	position:absolute;
	display: block;
	top:0px;
	bottom:0px;
	right:20px;
	width: 45px;
	height: 45px;
	margin:auto 0px;
	transform: rotate(0deg);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;
	content: url("/imgs/Menu-painike.svg");
	box-sizing: border-box;
	z-index: 120;
    background-color: var(--color5);
    clip-path: circle();
	transition: all 0.4s;
    opacity: 0;
}

#player_wrap #haku_wrap .haku_row:hover > .btn_play,
#player_wrap #haku_wrap .haku_row:hover > .btn_fav,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row:hover > .btn_play,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row:hover > .btn_fav {
    opacity: 1;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .btn_pl{
	position:absolute;
	display: block;
	top:0px;
	bottom:0px;
	right:80px;
	width: 20px;
	height: 20px;
	margin:auto 0px;
	transform: rotate(0deg);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;
	content: url("/imgs/Icon awesome-trash.svg");
	filter: invert(1);
	box-sizing: border-box;
	z-index: 120;
	transition: all 0.5s;
}


#player_wrap #haku_wrap .haku_row input[type="radio"]{display:none; }

#player_wrap #haku_wrap .haku_row .songoptions{
	display: none;
	width:260px;
	height:20px;
	background-color:var(--color5);
	padding:20px 25px;
	transition: all 0.5s;
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .btn_fav,
#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .btn_fav{
	transform: rotate(405deg);
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .songoptions{
	display:inline-block;
	position: absolute;
	top:35px;
	right:140px;
	z-index: 555;
	height: auto;
	border-radius: 9px;
	box-shadow: 0px 3px 30px var(--color10);
}

#player_wrap #haku_wrap .haku_row .songoptions div {
	position: relative;
	display: block;
	width:100%;
	height:52px;
	line-height: 52px;
	margin:0px auto;
	box-sizing: border-box;
	padding: 0px 40px 0px 0px;
	border-top:1px solid var(--color7);
}

#player_wrap #haku_wrap .haku_row .songoptions .lol01:after{
	position: absolute;
	top:0px;
	right:0px;
	bottom:0px;
	margin:auto 0px;
	width:25px;
	height: 18px;
	line-height: 18px;
	content: url("/imgs/Icon material-queue.svg");
}

#player_wrap #haku_wrap .haku_row .songoptions .lol02:after{
	position: absolute;
	top:0px;
	right:0px;
	bottom:0px;
	margin:auto 0px;
	width:25px;
	height: 15px;
	line-height: 15px;
	content: url("/imgs/Union 16.svg");
}

#player_wrap #haku_wrap .haku_row .songoptions div:nth-of-type(1) {
	border-top:0px;
}

#player_wrap #haku_wrap .haku_row .playlistoptions{
	display: none;
	width:295px;
	height:20px;
	background-color:var(--color5);
	padding:20px 35px 5px 35px;
	box-sizing: border-box;
	text-align: center;
	transition: all 0.5s;
}

#player_wrap #haku_wrap .haku_row .playlistoptions div{
	position: relative;
	display: block;
	width:100%;
	height:50px;
	line-height: 50px;
	border-bottom:1px solid var(--color7);
	margin: 0px auto;
	box-sizing: border-box;
	padding: 0px 50px 0px 0px;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .playlistoptions div:after{
	position: absolute;
	top:0px; bottom:0px;
	right:0px;
	width:25px;
	height: 20px;
	line-height: 20px;
	margin: auto 0px;
	content: url("/imgs/Icon ionic-ios-add-circle-outline.svg");
}

#player_wrap #haku_wrap .haku_row .playlistoptions .btn01{
	display:inline-block;
	width:auto;
	height: 40px;
	line-height: 40px;
	font-size:16px;
	margin:20px auto;
	padding: 0px 15px;
	text-align: center;
	border-bottom:0;
	border-radius: 40px;
	cursor: pointer;
	-webkit-user-select:none;
	user-select:none;
	font-weight: 400;
	color:var(--color2);
	background-color: var(--color8);
}

#player_wrap #haku_wrap .haku_row .playlistoptions .btn01:after{
	content:"";
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .playlistoptions{
	display:inline-block;
	position: absolute;
	top:35px;
	right:140px;
	z-index: 555;
	height: auto;
	border-radius: 9px;
	box-shadow: 0px 3px 30px var(--color10);
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .bgrlab,
#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .bgrlab{
	display: block;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 444;
}


#siirra_lauluun_wrap{
	position: fixed;
	display: none;
	top:0px;
	left:0px;
	width:100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 9000;
}

#siirra_lauluun_wrap #siirra_lauluun{ 
	position: relative;
	display: block;
	width: 75%;
	max-width: 700px;
	height:auto;
	border-radius: 10px;
	padding: 45px;
	box-sizing: border-box;
	background-color: var(--color2);
	box-shadow: 0px 15px 60px #0003292E;
	color:var(--color1);
}

#siirra_lauluun_wrap #siirra_lauluun #close_siirra_lauluun {
	position:absolute;
	top:15px;
	right:15px;
	width:29px;
	height: 29px;
	z-index: 445;
	transform:rotate(45deg);
	content: url("/imgs/Path 1022.svg");
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_logo {
	position: absolute;
	top:60px;
	right: 30px;
	width:150px;
	height: auto;
	z-index: 444;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_title_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_2,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_info_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_btn{
	margin: 0;
	padding: 0;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_title_1{
	font-family: Aborm;
	width: calc( 100% - 180px );
	font-size: 45px;
	line-height: 64px;
	text-align: left;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_2{
	position: relative;
	float:left;
	width: 50%;
	height: 80px;
	font-size: 18px;
	font-weight: 300;
	color:var(--color4);
	box-sizing: border-box;
	line-height: 80px;
	padding:0px 0px 0px 50px;
	margin-bottom:24px;
	border-bottom: 2px solid var(--color1);
    text-wrap:nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_1{ width: 40%; }
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_2{ width: 60%; }

#siirra_lauluun_wrap #siirra_lauluun .in_artisti:before{ 
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	margin:auto;
	width:20px;
	height: 20px;
	filter: brightness(0.1) invert(100);
	transform: translateY(-5px) scale(0.45);
	content: url("/imgs/Icon material-person.svg");	
}

#siirra_lauluun_wrap #siirra_lauluun .in_brand:before{
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	margin:auto;
	width:20px;
	height: 20px;
	filter: brightness(0.1) invert(100);
	transform: translateY(-5px) scale(0.45);
	content: url("/imgs/Icon awesome-compact-disc.svg");
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_info_1{
	display: block;
	font-family: Aborm;
	font-size: 25px;
	line-height: 35px;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap{
	display: flex;
	width: 100%;
	height: 53px;
	overflow: hidden;
	border: 1px solid #F4ECE1;
	border-radius: 27px;
	margin-top:24px;
	opacity: 1;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap label {
	display: flex;
	flex-grow:1;
	box-sizing: border-box;
	text-align: center;
    border-radius: 15px;
	justify-content: center;
	align-items: center;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m3:checked ~ label:nth-of-type(1),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m2:checked ~ label:nth-of-type(2),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m1:checked ~ label:nth-of-type(3),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #l0:checked ~ label:nth-of-type(4),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p1:checked ~ label:nth-of-type(5),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p2:checked ~ label:nth-of-type(6),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p3:checked ~ label:nth-of-type(7){
	background-color: rgba(244,236,225,0.55);
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap input[type="radio"] {
	display: none;
}


#siirra_lauluun_wrap #siirra_lauluun #lauluun_btn{
	width: 100%;
	height: 60px;
	border:0;
	outline: none;
	background-color: var(--color3);
	font-family: Rubik;
	font-size: 22px;
	line-height: 60px;
	margin-top:40px;
	color: var(--color1);
	border-radius: 30px;
	opacity: 1;
}


#siirra_lauluun_wrap #lauluun_extra_btns{
    display: flex;
    width:100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:0px 10px;
}

#siirra_lauluun_wrap #lauluun_extra_btns .s_btn{
    display: flex;
    width: 50%;
	height: 60px;
	outline: none;
    border:1px solid var(--color1);
	background-color: var(--color2);
	font-family: Rubik;
	font-size: 22px;
	line-height: 60px;
	margin:20px 0px;
    padding: 0px 20px 0px 70px;
    box-sizing: border-box;
	color: var(--color1);
	border-radius: 30px;
	opacity: 1;
}

#lisaasoittolistalle{
    display: none;
    position: fixed;
    bottom: 5px;
    left: 0px;
    right: 0px;
    width: 320px;
    height: auto;
    margin: auto;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: rgba(255,139,0,1.00);
    color: rgba(242,242,242,1.00);
    z-index: 9955;
    background-image: -webkit-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: -moz-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: -o-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: linear-gradient(155deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
}

#lisaasoittolistalle h5 {
	font-size: 19px;
	font-weight: 500;
	text-align: center;
	margin: 0;
	padding: 0;
	color:rgba(33,33,33,1.00);
}

#lisaasoittolistalle .lisaa_row {
	font-size: 15px;
	font-weight: 500;
	height:37px;
	line-height: 37px;
	cursor: pointer;
	margin:8px auto;
	text-align: center;
	background-color: rgba(238,238,238,1.00);
	color:rgba(33,33,33,1.00);
	border-top:1px solid rgba(255,255,255,1.00);
	border-radius: 9px;
}

#player_wrap #soittolista_wrap{
	display:block;
	position: fixed;
	bottom:0px;
	left: 0px;
	right:0px;
	width: 100%;
	max-width: 810px;
	height:auto;
	border-radius: 10px 10px 0px 0px;
	box-sizing: border-box;
	margin: 0 auto;
	z-index: 1234;
	background-color: var(--color2);
	max-height: 80px;
	overflow: hidden;
	padding: 24px 28px;
	transition: all 0.4s;
    border:1px solid var(--color5);
}

#player_wrap #soittolista_wrap #stl_btn{ display:none; }

#player_wrap #stl_btn:checked ~ #soittolista_wrap{
	min-height: 100px;
	max-height: calc( 100vh - 220px );
	overflow-y: auto;
	overflow-x: hidden;
}

#player_wrap #soittolista_wrap label{ 
	display:flex;
	position: absolute;
	top:20px;
	right:20px;
    align-items: center;
    justify-content: center;
	width: 40px;
	height:40px;
	line-height: 40px;
	text-align: center;
	clip-path: circle();
	transition: all 0.4s;
	transform: rotate(180deg);
	background-color:var(--color5);
}

#player_wrap #stl_btn:checked ~ #soittolista_wrap label {
	transform: rotate(0deg);
}

#player_wrap #soittolista_wrap h5{
	font-family: Aborm;
	font-size: 25px;
	font-weight: 500;
	height: 35px;
	width:370px;
	line-height: 35px;
	margin:0px 0px 25px 0px;
	padding:0;
	color:var(--color1);
}

#player_wrap #soittolista_wrap .soittolista_row{
	display: flex;
	position: relative;
	width:100%;
	height:55px;
	margin:0px;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	-webkit-user-select:none;
	user-select:none;
	border-top: 1px solid var(--color5);
	transition:all 0.5s;
}

#player_wrap #soittolista_wrap .soittolista_row:nth-of-type(1){
	border-top:0px solid red;
}

#player_wrap #soittolista_wrap .soittolista_row .title{
	display: block;
	width: calc( 100% - 70px );
	height: auto;
	margin:0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;
	color:var(--color1);
	font-size:18px;
	font-weight:500;
	text-align: left;
}

#player_wrap #soittolista_wrap .soittolista_row .subtitle{
	display: block;
	width: calc( 100% - 70px );
	height: auto;
	margin:0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:15px;
	color:var(--color1);
	font-weight: 400;
	text-align: left;
}

#player_wrap #soittolista_wrap .soittolista_row .remove_btn {
	display: block;
	position: absolute;
	top:0px;
	bottom: 0px;
	right:50px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin:auto;
	font-size:18px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: center;
	content: url("/imgs/Icon awesome-trash.svg");
	background-color: var(--color2);
	color:white;
}

#player_wrap #soittolista_wrap .soittolista_row .sing_btn {
	display: block;
	position: absolute;
	top:0px;
	bottom: 0px;
	right:0px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin:auto;
	font-size:18px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: center;
	content:url("/imgs/Icon awesome-play.svg");
	filter:invert(100%);
	color:white;
}


#player_wrap #soittolista_wrap .soittolista_row .pitchwrap{
	display:block;
	width:100%;
	height:0px;
	padding: 2px 5px;
	box-sizing: border-box;
	border-radius: 12px;
	transition: all 0.4s;
	transform: perspective(10px) translate3d(2220px, 0px, 0px);
}

#player_wrap #soittolista_wrap .soittolista_row .pitchwrap .key{
	display:block;
	float: left;
	width:calc( 100% / 7 - 4px );
	height:32px;
	line-height: 32px;
	margin:0px 2px;
	border-radius: 12px;
	text-align: center;
	background-color: rgba(253,130,0,1.00);
	color:white;
}


#tilauswrap{
	display: none;
	position: fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right: 0px;
	flex-direction: column;
	width: 96%;
	max-width: 950px;
	height:96%;
	background-color: var(--color15);
	border-radius: 27px;
	box-shadow: 0px 3px 40px #0000003B;
	z-index: 1010;
	margin:auto;
	padding: 0px 200px;
	box-sizing:border-box;
	align-items: center;
	justify-content: center;
}

#tilauswrap #closewi img{
	position: absolute;
	top:30px;
	right:30px;
	width: 30px;
	filter:invert();
	transform: rotate(45deg);
}

#tilauswrap input[type="radio"]{ display:none; }

#tilauswrap .slidero{
	display: none;
	width:100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#tilauswrap .slidero h3{
	width: 100%;
	font-size: 34px;
	font-weight: 500;
	font-family: Rubik;
	line-height: 41px;
	text-align: left;
	margin: 0px;
}

#tilauswrap .slidero p{
	width: 100%;
	font-size: 20px;
	font-weight: 400;
	font-family: Rubik;
	line-height: 24px;
	text-align: left;
	margin: 25px 0px;
}

#tilauswrap .slidero .options {
	display: block;
	width: 100%;
	height: auto;
	margin:50px 0px;
}

#tilauswrap .slidero button {
	background-color: var(--color3);
	color:var(--color6);
	font-size: 18px;
	line-height: 60px;
	height: 60px;
	border: 0;
	outline: none;
	-webkit-appearance:none;
	border-radius: 38px;
	display: inline-block;
	padding: 0px 40px;
	box-sizing: border-box;
}

#tilauswrap .slidero .button2 {
	background-color: var(--color16);
	color:var(--color5);
	font-size: 18px;
	line-height: 60px;
	height: 60px;
	border: 0;
	outline: none;
	-webkit-appearance:none;
	border-radius: 38px;
	display: inline-block;
	padding: 0px 40px;
	box-sizing: border-box;
}

#tilauswrap .slidero .options label{
	position: relative;
	display: block;
	width:100%;
	height:45px;
	line-height: 45px;
	padding: 0px 10px 0px 60px;
	margin:4px 0px;
	background-color: var(--color4);
	border-radius: 38px;
	box-sizing: border-box;
	text-align: left;
}

#tilauswrap #irtisanominen .options input[type="checkbox"],
#tilauswrap #tilausaktivoitu .options input[type="checkbox"] {
	position: absolute;
	top:0px;
	bottom:0px;
	left:10px;
	margin: auto 0px;
	background-color: white;
	-webkit-appearance:none;
	border:2px solid var(--color7);
	width: 35px;
	height: 35px;
	border-radius: 30px;
}

#tilauswrap #irtisanominen .options input[type="checkbox"]:checked,
#tilauswrap #tilausaktivoitu .options input[type="checkbox"]:checked {
	background-color: var(--color3);
}

#tilauswrap #irtisanottu {
	align-items: center;
	justify-content: center;
	text-align: center;
}

#tilauswrap #irtisanottu > * {
	text-align: center;
}

#tilauswrap #irtisanottu h6 {
	width:100%;
	max-width: 330px;
	height:45px;
	margin: 50px 0px;
	line-height: 45px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	border-radius: 38px;
	background-color: var(--color6);
}

#tilauswrap #irtisanottu p#cancelcancel{
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	max-width: 233px;
	margin:50px 0px 0px 0px;
	cursor: pointer;
}

#tilauswrap input[type="radio"]:checked + .slidero {
	display:flex;
}

#tilauswrap #tilaa.slidero div#campaign_wrap {
	position: relative;
	width:100%;
	height:auto;
	margin:10px 0px;
}

#tilauswrap #tilaa.slidero div#campaign_wrap input[type="text"]{
	width: calc( 100% - 105px );
	height:45px;
	line-height: 45px;
	border-radius: 38px;
	font-family: Rubik;
	font-weight: 300;
	border:0;
	outline:none;
	font-size: 16px;
	background-color: var(--color6);
	color: var(--color5);
	padding:0px 20px;
	box-sizing: border-box;
}

#tilauswrap #tilaa.slidero div#campaign_wrap button#btn_acti_campaign {
	position: absolute;
	top:0px;
	bottom:0px;
	right:0px;
	background-color: var(--color16);
	color:var(--color2);
	height:45px;
	line-height: 45px;
	font-size:18px;
	font-weight: 300;
	width: auto;
	padding: 0px 15px;
	box-sizing: border-box;
	cursor: pointer;
}

#tilauswrap #tilaa.slidero div#stripeintegrate {
	width:100%;
	height:auto;
	text-align: center;
	border-radius: 38px;
	margin:35px 0px;
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px 0px 15px 0px;
	justify-content: flex-end;
	margin:12px 0px;
}

#tilauswrap #tilaa.slidero div.divideri{
	width:100%;
	height:1px;
	background-color: var(--color7);
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap:before,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap:before {
	position: absolute;
	display: flex;
	align-items: center;
	top:0px;
	left:0px;
	width:65%;
	bottom:0px;
	font-size:18px;
	line-height: 26px;
	font-weight: 400;
	font-family: Rubik;
	margin: auto 0px;
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap:before{
	content:"Haluatko että tilaus uusiutuu automaattisesti?";	
}

#tilauswrap #tilaa.slidero div#opt_ehdot_wrap:before {
	content:"Vahvista että hyväksyt käyttöehdot ja yksityisyydensuojan.";
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap label,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap label {
	display: inline-block;
	background-color:rgba(206,206,206,1.00);
	width:75px;
	height:42px;
	line-height: 42px;
	font-size:18px;
	margin:0px 5px;
	cursor: pointer;
	color:black;
	text-align: center;
	border-radius: 35px;
}

#tilauswrap #tilaa.slidero div#botbuttonwrap {
	width:100%;
	height:65px;
	display: none;
	gap:0px 15px;
	margin: 20px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--color7);
}


#tilauswrap #tilaa.slidero #ehdotok,
#tilauswrap #tilaa.slidero #ehdotno{
	display: none;
}

#tilauswrap #tilaa.slidero #ehdotno:checked ~ div#opt_ehdot_wrap label:nth-of-type(1),
#tilauswrap #tilaa.slidero #ehdotok:checked ~ div#opt_ehdot_wrap label:nth-of-type(2){ background-color: var(--color3); color: var(--color4); }

#tilauswrap #tilaa.slidero #ehdotok:checked ~ div#botbuttonwrap {
	display:flex;
}


#tilauswrap #jatkatilausta.slidero h3 {
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero p {
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero div{
	display: inline-block;
	white-space: normal;
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero div button#btn_jatkatilausta,
#tilauswrap #jatkatilausta.slidero div label.button2 {
	margin:5px 5px;
}

#helpguide_wrap{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 140px);
	top:140px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow: auto;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.4s;
	z-index: 100;
}

#helpguide_wrap #helpguide_cont_wrap {
	display:block;
	width:80%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 40px 0px 50px 0px;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"] {
	display: none;	
}

#helpguide_wrap #helpguide_cont_wrap h3{ 
	font-size: 35px;
	line-height: 35px;
	font-family: Aborm;
	font-weight: 500;
}

#helpguide_wrap #helpguide_cont_wrap h5{ 
	font-size: 29px;
	line-height: 41px;
	font-family: Aborm;
	font-weight: 500;
	margin: 25px 0px;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox { 
	position: relative;
	display: block;
	width: 100%;
	height:auto;
	padding: 30px 25px;
	box-sizing: border-box;
	background-color: var(--color8);
	border-radius: 22px;
	margin: 5px 0px;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox:after { 
	display: block;
	position: absolute;
	top:0px;
	bottom:0px;
	right:35px;
	width:20px;
	height:20px;
	margin: auto 0px;
	content:"";
	filter: invert();
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/imgs/Icon ionic-ios-arrow-down.svg");
	background-size: contain;
	transition:all 0.5s;
}


#helpguide_wrap #helpguide_cont_wrap .togglebox p.title{ 
	font-size: 18px;
	font-family: Rubik;
	font-weight: 500;
	line-height: 22px;
	margin: 0;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite, 
#helpguide_wrap #helpguide_cont_wrap .togglebox p.selite{ 
	display: none;
	font-size: 16px;
	font-family: Rubik;
	font-weight: 400;
	line-height: 22px;
	padding: 15px 0px 0px 0px;
	border-top: 1px dashed var(--color7);
	margin: 15px 0px 0px 0px;
	white-space: normal;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox div.selite,
#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox p.selite  {
	display: block;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox:after {
	transform: rotate(180deg);
	top:28px;
	bottom:inherit;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite textarea{ 
	display: block;
	width:100%;
	height:auto;
	line-height: 20px;
	padding: 25px 30px;
	box-sizing: border-box;
	border-radius: 15px;
	outline: none;
	-webkit-appearance:none;
	border:0;
	background-color: var(--color6);
	color: var(--color5);
	font-size: 15px;
	font-weight: 400;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite button#btn_send_message { 
	-webkit-appearance:none;
	width: auto;
	height: 42px;
	line-height: 42px;
	font-size: 16px;
	font-weight: 400;
	font-family: Rubik;
	padding: 0px 25px;
	box-sizing: border-box;
	margin: 12px 0px;
	color: var(--color1);
	background-color: var(--color3);
	outline: none;
	border-radius: 21px;
	border:0;
	
}

#hori1_menu{
	position:fixed;
	display: flex;
	top:180px;
	left:0px;
	right:0px;
	width: calc( 100% - 40px );
	height:auto;
	max-width: 1050px;
	padding: 0px 0px;
	margin: 0px  auto;
	z-index: 120;
    border-radius: 100px;
    box-shadow: 0px 0px 2px var(--color11);
	box-sizing: border-box;
	background-color: var(--color2);
    background-color: rgba(35,52,79,1.00);
	transition: all 0.4s;
}

#hori1_menu div.s_btn,
#hori1_menu label.s_btn,
#player_wrap #toprow .s_btn{
    position: relative;
	width: 50%;
	display: inline-block;
	border-radius: 50px;
	height: 70px;
	line-height: 70px;
	font-size: 18px;
	font-weight: 400;
    text-align: center;
	padding:0px 20px;
	margin:0px 0px;
	cursor: pointer;
	color: var(--color1);
	transition: all 0.5s;
}

#player_wrap #toprow .s_btn{
    width: auto;
    height: 40px;
    line-height:40px;
    font-size: 15px;
    padding: 0px 35px 0px 20px;
    border:1px solid var(--color11);
}

#v1, #v2, #v3, #v4, #v5 {
	display:none;
}

#hori1_menu .s_btn:hover{
	transform: scale(1.05);
}

#v1:checked ~ #hori1_menu .kaikki_laulut{
	background-color: var(--color3);
	color: var(--color4);
}

#v2:checked ~ #hori1_menu .omat_listat,
#v5:checked ~ #hori1_menu .omat_listat {
	background-color: var(--color3);
	color: var(--color4);
}

#v1:checked ~ #hori1_menu .kaikki_laulut:after,
#v2:checked ~ #hori1_menu .omat_listat:after,
#v5:checked ~ #hori1_menu .omat_listat:after{
	filter:invert(100);
}

#v1:checked ~ #hori1_menu,
#v2:checked ~ #hori1_menu,
#v4:checked ~ #hori1_menu{
	display: flex;
}

#v3:checked ~ #hori1_menu,
#v4:checked ~ #hori1_menu,
#v5:checked ~ #hori1_menu,
#v6:checked ~ #hori1_menu{
	display: none;
}

#v1:checked ~ #player_wrap{ display: block; }
#v2:checked ~ #omat_listat_wrap{ display: block; overflow: auto; }
#v3:checked ~ #helpguide_wrap { display:block; }
#v4:checked ~ #omatili_wrap{ display:block; }
#v5:checked ~ #omatlaulutlistaus{ display:block; }
#v6:checked ~ #tilauswrap { display:flex; }

#player_wrap #toprow #dropdown_btn.s_btn.droppari{
	position: absolute;
	top:0px;
	right:0px;
    bottom:0px;
    margin: auto 0px;
    background-color:var(--color2);
}

#player_wrap #toprow #dropdown_btn:before{
	position: absolute;
	display: block;
	width: auto;
	content:"Järjestä:";
	transform: translate( calc( -100% - 30px ), 0);
}

#player_wrap #toprow #dropdown_btn.s_btn.droppari:after {
	position: absolute;
	top:0px;
	bottom:0px;
	right:20px;
	transform: scale(1.3,1.0) rotate(90deg);
	content: ">";
	}

#hori1_menu .notebtn {
	background-color: var(--color3);
	color: var(--color4);
}

#player_wrap #toprow .s_btn img{
	position: absolute;
	right: 12px;
	top:0px;
	bottom:0px;
	width:17px;
	height:17px;
	margin:auto 5px;
}

#player_wrap #toprow #jarjesta_show:checked ~ #dropdown_btn.s_btn.droppari:after {
	transform: scale(1.3,1.0) rotate(270deg);
}

#hori1_menu #disp_keywrap{
	display: inline-block;
	width:auto;
	height:40px;
	padding: 0;
}

#player_wrap #toprow #hori1_menu #jarjesta_view_bgr{
	display: none;
	position: fixed;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	border-radius: 9px;
	box-sizing: border-box;
	padding:25px 25px;
	z-index: 1000;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

#player_wrap #toprow #jarjesta_view{
	display: none;
	position: absolute;
	top:45px;
	right:0px;
	width: 290px;
	height: auto;
	border-radius: 9px;
	box-sizing: border-box;
	padding:20px 25px;
	z-index: 1001;
    flex-direction: column;
	background-color:var(--color5);
	box-shadow: 0px 3px 30px var(--color10);
}

#player_wrap #toprow #jarjesta_show{ display:none; }

#player_wrap #toprow #jarjesta_show:checked ~ #jarjesta_view_bgr,
#player_wrap #toprow #jarjesta_show:checked ~ #jarjesta_view {
	display: flex;
}

#player_wrap #toprow  #jarjesta_view input[type="radio"]:checked + label{
    position: relative;
    padding:0px 50px 0px 0px;
}

#player_wrap #toprow #jarjesta_view input[type="radio"]:checked + label:after{
    position: absolute;
    content:"";
    top:0;
    right:0;
    width:42px;
    height:42px;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center center;
    filter: invert();
    background-image: url("/imgs/mik.svg");
    
}

#player_wrap #toprow #jarjesta_view div {
	position: relative;
	display: flex;
	width: 100%;
	height:42px;
	line-height: 42px;
	padding:0px;
	margin: 0px;
	font-size: 16px;
	font-weight: 400;
	border-radius: 0;
	font-family: Rubik;
	cursor: pointer;
    color:var(--color1);
	transition: all 0.2s;
	box-sizing: border-box;
}

#hori1_menu #jarjesta_view div:hover{
	transform: scale(1.05);
}

#hori1_menu #jarjesta_view #most_btn,
#hori1_menu #jarjesta_view #hots_btn {
	padding:0px 0px 0px 35px;
	}

#hori1_menu #jarjesta_view #most_btn:before {
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	margin: auto 0px;
	height:22px;
	line-height: 22px;
	content:url("/imgs/micrphone.svg");
}
#hori1_menu #jarjesta_view #hots_btn:before {
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	margin: auto 0px;
	height:22px;
	line-height: 22px;
	content:url("/imgs/flame.svg");
}

#videoframe{
	position: fixed;
	display: none;
	top:0px;
	left:0px;
	width: 100%;
    height: 100%;
    justify-content: flex-start;
	align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
	flex-direction: column;
	z-index: 9950;
	background-color: var(--color2);
}

#videoframe #videoframe_top{
	display:flex;
	width:90%;
	margin:0px 0px 10px 0px;
    padding: 15px 0px;
    box-sizing: border-box;
	align-items: center;
    justify-content: center;
}

#videoframe #videoframe_top #logos{
	display: block;
	margin:auto 0px;
	width:auto;
	height: 60px;
}

#videoframe #videoframe_top #logos img{
    height:100%;
    width:auto;
}

#videoframe #videoframe_nytsoi{
	display:flex;
    position: relative;
	width:90%;
    margin: 90px 0px;
    padding: 30px 0px 30px 65px;
    box-sizing: border-box;
	align-items: center;
    justify-content: center;
    background-color:var(--color5);
    border-radius: 20px;   
}

#videoframe #videoframe_nytsoi:after{
    content:"Nyt soi";
    font-size:30px;
    position: absolute;
    top:0px;
    left:0px;
    font-family: Aborm;
    color: var(--color1);
    translate: 0px -65px;
}

#videoframe #videoframe_nytsoi:before{
    content: "";
    position:absolute;
    top:0px;
    left:20px;
    bottom:0px;
    margin:auto 0px;
    display: block;
    width: 55px;
    height: 55px;
    background-color: var(--color15);
    background-size:40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/imgs/miki.svg");
    clip-path: circle();
}

#videoframe #videoframe_nytsoi #playing_info{
	width:100%;
	height: 100%;
	box-sizing: border-box;
	padding:0px 50px;
	display: block;
	float:left;
	margin:0;
	color:var(--color1);
}

#videoframe #videoframe_nytsoi #playing_info #playing_song,
#videoframe #videoframe_nytsoi #playing_info #playing_artist{
	margin:0;
	padding: 0;
	text-align: left;
}

#videoframe #videoframe_nytsoi #playing_info #playing_song{
	font-family: Aborm;
	font-size:25px;
	font-weight: 500;
}

#videoframe #videoframe_nytsoi #playing_info #playing_artist{
    font-family: Rubik;
    font-size:18px;
    font-weight: 400;
}

#videoframe #videoframe_nytsoi #btnwps{
	display:flex;
    flex-direction: row;
    padding: 0px 15px 0px 0px;
    gap:10px;
}

#videoframe #videoframe_nytsoi #btnwps .btn{
    display:flex;
    background-color: var(--color1);
    border-radius: 20px;
    height:40px;
    line-height: 40px;
    padding:0px 20px;
    box-sizing: border-box;
    font-size:14px;
    font-weight: 400;
    text-wrap:nowrap;
    color: var(--color2);
    cursor: pointer;
    transition: all 0.2s;
}

#videoframe #videoframe_nytsoi #btnwps .btn:hover{
    transform: scale(1.02);
}

#videoframe #videoframe_nytsoi #ext_wind_btn{
	display: block;
	margin:auto 0;
	width:225px;
	font-family: Rubik;
	font-size:16px;
	height:50px;
	cursor: pointer;
	line-height: 50px;
	padding:0px 50px 0px 20px;
	border-radius: 40px;
	color:var(--color1);
	box-sizing: border-box;
	border:2px solid var(--color1);
}

#thiswin,
#hdmi,
#tvapp{
	display:none;
}

#view_1:checked ~ #videoframe #videoframe_top #ext_wind_btn #thiswin{ display:block; }
#view_3:checked ~ #videoframe #videoframe_top #ext_wind_btn #hdmi{ display:block; }
#view_4:checked ~ #videoframe #videoframe_top #ext_wind_btn #tvapp{ display:block; }

#videoframe #videoframe_top #ext_wind_btn:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:20px;
	margin:auto 0px;
	content: url("/imgs/Path 1063.svg");
}

#videoframe #videoelementwrap {
	position:relative;
    width:90%;
}

#view_2:checked ~ #videoframe #videoelementwrap{
    position:absolute;
    display:flex;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    align-items: center;
    justify-content: center;
} 

#videoframe #for,
#videoframe #rew{
	position: absolute;
	display: inline-block;
	width:65px;
	height:65px;
	line-height: 65px;
	font-size:22px;
	text-align: center;
	border-radius: 50px;
	background-color:rgba(255,157,30,1.00);
	color:white;
	z-index: 9988;
}

#videoframe #for{ top:10px; right: 10px;}
#videoframe #rew{ top:10px; right: 85px;}

#videoframe #videoelementwrap #video{
	display: block;
	width:100%;
	height:auto;
	border-radius: 37px;
	z-index: 9977;
}

#videoframe #videobgr{ 
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top:0px;
	left:0px;
	background-color: black;
	z-index: 440;
}

#view_1:checked ~ #videoframe #video{
	width:100%;
	height:auto;
}

#view_2:checked ~ #videoframe #video{
	width:100%;
	height:auto;
	max-width: inherit;
	max-height: 100%;
	border: 0;
	border-radius: 0;
	z-index: 444;
	object-fit: contain;
}

#view_2:checked ~ #videoframe #videobgr{
	display: block;
}

#view_2:checked ~ #videoframe #playcontrolwrap {
	position: fixed;
	bottom:0px;
	left:0px;
	right:0px;
	margin:0px auto;
	z-index: 8888;
	padding:35px 50px 25px 50px;
    background-color:rgba(11,11,11,0.8);
	border-radius: 0px 0px 0px 0px;
	transition: all 0.1s;
}


#view_2:checked ~ #videoframe #playcontrolwrap:before {
	position: fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:40vh;
	content: "";
	background-color: transparent;
}

#videoframe #playcontrolwrap .showcontrols {
	transform: translateY(20%);
}

#view_3:checked ~ #videoframe #videoelementwrap #video,
#view_4:checked ~ #videoframe #videoelementwrap #video{
	display: none;
}

#view_1:checked ~ #videoframe #videoelementwrap #videotop{
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height: 100%;
	z-index: 9988;
	box-sizing: border-box;
	background-color: rgba(148,172,148,0.00);
	transition: 200ms border;
}

#view_2:checked ~ #videoframe #videoelementwrap #videotop{
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height: 100%;
    translate:0px -115px;
	z-index: 9988;
	box-sizing: border-box;
	background-color: rgba(148,172,148,0.00);
	transition: 200ms border;
}

#view_3:checked ~ #videoframe #videoelementwrap #videotop,
#view_4:checked ~ #videoframe #videoelementwrap #videotop{
	display: flex;
	width:100%;
	height:400px;
	aspect-ratio:16/9;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color:rgba(68,68,68,1.00);
	border-radius: 12px;
}

#videoframe #videoelementwrap #videotop #xo_hdmi,
#videoframe #videoelementwrap #videotop #xo_tvapp{
	display:none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding:0px 5%;
	text-align: center;
}

#view_3:checked ~ #videoframe #videoelementwrap #videotop #xo_hdmi{ display: flex; }
#view_4:checked ~ #videoframe #videoelementwrap #videotop #xo_tvapp{ display: flex; }

#videotop div img{ width:25%; margin:0; }
#videotop div h1{ font-size:23px; margin:30px 0px 0px 0px; color: var(--color4); }
#videotop div p{ font-size:16px; color: var(--color4); }

#view_1:checked ~ #videoframe #videoelementwrap #videoframe_top #ext_wind_btn{ display:block; }
#view_3:checked ~ #videoframe #videoelementwrap #videoframe_top #no_cast{ display:none; }




#view_1:checked ~ #connecting_tv .step1 #no_cast {
	display: none;
}

#videoframe #videoelementwrap #durationbar {
	position: absolute;
    bottom:95px;
    left:0px;
	display: inline-flex;
	white-space: nowrap;
	width: 100%;
	height:13px;
	border-radius: 0px;
	justify-content: center;
	background-color: var(--color7);
	align-items: center;
	margin:0px;
	overflow: visible;
    z-index: 9001;
}

#videoframe #durationbar:after {
	position: absolute;
	right:0px;
	width:90px;
	font-size:15px;
	font-weight: 300;
	text-align: right;
	transform: translateX(90px);
	content: attr(data-title);
}

#view_2:checked ~ #videoframe #durationbar {
	position: fixed;
	bottom:100px;
	left:0px;
	right:0px;
	height:15px;
	border:0px solid var(--color1);
	box-sizing: border-box;
	margin:0px auto;
	z-index: 8998;
	padding:2px 50px 2px 50px;
	background-color:var(--color11);
	border-radius: 0px;
	transition: all 0.1s;
}

#view_2:checked ~ #videoframe #durationbar:after {
	position: absolute;
	right:0px;
	width:75px;
	height:28px;
	line-height: 28px;
	font-size:12px;
	font-weight: 300;
	text-align: center;
	border-radius: 30px;
	transform: translateX(90px);
	background-color: var(--color1);
	content: attr(data-title);
}

#view_4:checked ~ #videoframe #durationbar {
	display: none;
}


#videoframe #durationbar #current_time{
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	width:10px;
	height:100%;
	border-radius: 0px;
	background-color:var(--color3);
}

#videoframe #playcontrolwrap{
    position: absolute;
    bottom:0px;
    left:0px;
	display: flex;
	width:100%;
	height:auto;
    padding: 20px 5px;
    box-sizing: border-box;
	margin:0px 0px;
    background-color: var(--color10);
    z-index: 9990;
}


#videoframe #playcontrolwrap .play_control_btn{
	position: relative;
	display:flex;
	width:auto;
	height: 55px;
	line-height: 55px;
	padding:0px 60px 0px 25px;
	margin:0px 10px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 18px;
	border-radius: 40px;
    text-wrap:nowrap;
	background-color:var(--color1);
	border:2px solid var(--color2);
	cursor: pointer;
	transition: all 0.5s;
}

#videoframe #playcontrolwrap .stop:hover{
	border:2px solid #FF2024;
	background-color: #FF2024;
	color:var(--color1);
}

#videoframe #playcontrolwrap .stop:hover:after{
	filter:invert(100%);
}

#videoframe #playcontrolwrap .tauko{
	/*background-color:var(--color2);
	color:var(--color1);*/
}

#videoframe #playcontrolwrap .replay{
	background-color:var(--color12);
	color:var(--color1);
	border: 2px solid var(--color12);
}

#videoframe #playcontrolwrap .laajenna,
#videoframe #playcontrolwrap .pienenna {
	display: none;		
}

#videoframe #playcontrolwrap .play_control_key_selector:after,
#videoframe #playcontrolwrap #ext_wind_btn:after,
#videoframe #playcontrolwrap .stop:after,
#videoframe #playcontrolwrap .alusta:after,
#videoframe #playcontrolwrap .tauko:after,
#videoframe #playcontrolwrap .replay:after,
#videoframe #playcontrolwrap .pienenna:after,
#videoframe #playcontrolwrap .laajenna:after{
	display: block;
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width:50px;
	height:50px;
	line-height: 50px;
	transform: translateY(4px);
	text-align: center;
	margin: auto 0px;
	z-index: 234;
}

#videoframe #playcontrolwrap .alusta:hover{
	background-color: var(--color3);
	border: 2px solid var(--color3);
}

#videoframe #playcontrolwrap .pienenna:hover,
#videoframe #playcontrolwrap .laajenna:hover{
	background-color: var(--color14);
}

.stop:after{ content: url("/imgs/Rectangle 337.svg"); }
.alusta:after{ content: url("/imgs/Icon feather-skip-back.svg"); }
.tauko:after{ content: url("/imgs/Group 2121.svg"); }
.laajenna:after{ content: url("/imgs/Icon ionic-ios-expand.svg"); }
.pienenna:after{ content: url("/imgs/Icon ionic-ios-expand-2.svg"); }
.replay:after{ content: url("/imgs/Icon awesome-play.svg"); filter:invert(1); }
#ext_wind_btn:after{ content: url("/imgs/t.svg"); }
.play_control_key_selector:after{ content: url("/imgs/Icon ionic-ios-expand-2.svg"); }


#view_1, #view_2, #view_3, #view_4{ display: none; }
#view_2:checked ~ #videoframe #playcontrolwrap .pienenna { display: inline-block; }
#view_1:checked ~ #videoframe #playcontrolwrap .laajenna { display: inline-block; }

#playskey{ display:none; }

#videoframe #keywrp{ 
    position: absolute;
    bottom:0px;
    left:0px;
    display: none;
    width: auto;
    height: auto;
    flex-direction: row;
    background-color: var(--color2);
    padding: 12px;
    gap:7px;
    translate: 0px -55px;
    border-radius: 40px;
    border:1px solid var(--color7);
    z-index: 9901;
}

#videoframe #keywrp .keybtn{ 
    display: flex;
    border:1px solid orange;
    width:auto;
    min-width: 25px;
    font-size:18px;
    height:50px;
    line-height: 50px;
    background-color:rgba(237,238,227,1.00);
    border-radius: 25px;
    padding:0px 20px;
    box-sizing: border-box;
}

#playskey:checked > #keywrp,
#playskey:checked ~ #keywrp,
#playskey:checked + #keywrp {
    display: flex;
}


#popbanner{
	background-color: var(--color2);
	color: var(--color1);
	position: fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:75vw;
	padding: 50px 15%;
	box-sizing: border-box;
	margin: auto;
	text-align: center;
	height: calc( 75vw / 1.4 );
	border-radius: 33px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 8888;	
}

#popbanner:after{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:30%;
	transform: scale(1.5) translateY(-10%);
	opacity: 0.75;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top;
	background-size: auto;
	background-image: url("/imgs/bgr01.svg");
	content: "";
	z-index: 7777;
}

#popbanner > * { z-index:8889; }

#popbanner h1{
	font-size:45px;
	line-height: 64px;
	font-family: Aborm;
	font-weight: 500;
	margin:0;
	color: var(--color1);
}

#popbanner p{
	font-size:16px;
	line-height: 19px;
	font-family: Rubik;
	font-weight: 400;
	margin:0;
	color: var(--color1);
}

#popbanner button {
	width: auto;
	height:60px;
	line-height: 60px;
	font-size:16px;
	font-family: Rubik;
	font-weight: 400;
	margin:30px 0px;
	padding:0px 25px;
	box-sizing: border-box;
	border:0;
	outline:none;
	border-radius: 30px;
	background-color: var(--color3);
	color: var(--color1);
}


#login{
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100vh;
	flex-direction: column;
    background-color: var(--color2);
    background-color:rgba(1,1,1,0.2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
    z-index: 999;
}

#login #log_wrap{
	position: relative;
	display:flex;
	width: 550px;
	height: auto;
	box-sizing: border-box;
	margin: auto;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	background-color: var(--color3);
	border-radius: 1000px;
	padding: 55px 4%;
	transform: scale(1.0);
	z-index: 12;
}

#login #log_wrap #username_txt,
#login #log_wrap #email_inp,
#login #log_wrap #password_txt,
#login #log_wrap #pasw_inp,
#login #log_wrap #logmessage,
#login #log_wrap #subnt,
#login #log_wrap #pasw_forg,
#login #log_wrap #ei_tilia_txt1,
#login #log_wrap #ei_tilia_txt2,
#login #log_wrap #ei_tilia_txt3{
	margin:0;
	padding:0;
}

#login #log_wrap #toplogo_txt{
	width: 100%;
	text-align: center;
	margin:25px auto;
	font-size: 50px;
	font-family: Aborm;
	color:var(--color1);
}

#login #log_wrap #email_inp,
#login #log_wrap #pasw_inp{
	width: 100%;
	height: 60px;
	background: #F4ECE1 0% 0% no-repeat padding-box;
	border-radius: 30px;
	border:0;
	outline: none;
	padding: 0px 17px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 18px;
	color:var(--color2);
	line-height: 60px;
	letter-spacing: 0px;
}

#login #log_wrap #email_inp::placeholder,
#login #log_wrap #pasw_inp::placeholder{
	color:var(--color2);
}

#login #log_wrap #username_txt,
#login #log_wrap #password_txt{
	width: 100%;
	height: 35px;
	text-align: left;
    margin: 20px 0px 0px 0px;
	font: normal normal normal 25px/35px Aborm;
	letter-spacing: 0px;
	color: #F4ECE1;
}

#login #log_wrap #logmessage{
	display: none;
	top:508px;
	left:125px;
	width:295px;
	height:70px;
	line-height: 70px;
	background-color:var(--color13);
	color:white;
	border-radius: 17px;
	text-align: center;
	outline: none;
	border:0;
	font-family: Rubik;
	font-weight: 400;
	z-index: 555;
	
}

#login #log_wrap #pasw_forg,
#login #log_wrap #ei_tilia_txt1,
#login #log_wrap #ei_tilia_txt2,
#login #log_wrap #ei_tilia_txt3{
	width:100%;
	height:22px;
	text-decoration: underline;
	text-align: center;
    cursor: pointer;
	line-height: 22px;
	font-size:18px;
	font-weight: 400;
    margin: 7px auto;
	color:var(--color1);
}

#login #log_wrap #ei_tilia_txt1{
    text-decoration: none;
}

#login #log_wrap #ei_tilia_txt3{
    margin: 25px auto 10px auto;
}

#login #log_wrap #subnt{
	display: block;
	width:219px;
	height:70px;
	line-height: 70px;
	font-size:22px;
	text-align: center;
	border:0;
	outline: none;
	font-family: Aborm;
	font-weight: 500;
	background-color: var(--color2);
	color: var(--color1);
	border-radius: 17px;
	padding: 0;
	margin: 22px auto;
	cursor: pointer;
}

#login #log_wrap .error_note_wrap{
    position: absolute;
	display: none;
	width:80%;
	height:auto;
	min-height: 380px;
	flex-direction: column;
	align-items: center;
	font-family: Rubik;
	justify-content: center;
	background-color: var(--color1);
	border-radius: 35px;
	margin: auto;
	padding:50px;
	box-sizing: border-box;
	z-index: 9908;	
}

#login #log_wrap .error_note_wrap div:nth-of-type(1){
	width: 100%;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
}

#login #log_wrap .error_note_wrap div:nth-of-type(2){
	width: 100%;
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
}

#login #log_wrap .error_note_wrap div:nth-of-type(3){
	width: 100%;
}

#login #log_wrap .error_note_wrap div:nth-of-type(3) button {
	width: auto;
	height: 70px;
	line-height: 70px;
	font-size: 18px;
	padding:0px 20px;
	margin: 40px 0px 0px 0px;
	box-sizing: border-box;
	font-family: Aborm;
	background-color:var(--color2);
	color:var(--color1);
	border-radius: 17px;
	outline: none;
	border:0;
}

#login #login_bgr{
	display: none;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(180,175,175,0.50);
	z-index: 10;
	transform: scale(10);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	
}

/* Tilaaminen */


#tilauksenteko_onnistui_wrap,
#tilauksenteko_epaonnistui_wrap,
#maksukorttiwrap,
#lisaauusikorttiwrap,
#tilaamiswrap,
#ostoshistoria_wrap {
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 110px);
	top:110px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.4s;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	z-index: 100;
	padding: 50px 0px;
	overflow-y: auto;
	overflow-x:hidden;
}

input[type="radio"]{display:none; }

input[type="radio"]#ox1:checked ~ #tilaamiswrap,
input[type="radio"]#ox2:checked ~ #maksukorttiwrap,
input[type="radio"]#ox3:checked ~ #lisaauusikorttiwrap,
input[type="radio"]#ox4:checked ~ #tilauksenteko_onnistui_wrap,
input[type="radio"]#ox5:checked ~ #tilauksenteko_epaonnistui_wrap,
input[type="radio"]#ox6:checked ~ #ostoshistoria_wrap {
	display:flex;
}

#maksukorttiwrap .maksukorttiwrap_center,
#tilaamiswrap .tilaamiswrap_center,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center,
#ostoshistoria_wrap .ostoshistoria_wrap_center{
	display: flex;
	width:96%;
	max-width: 1000px;
	flex-direction: column;
	gap: 10px;
}

#maksukorttiwrap .maksukorttiwrap_center h3,
#tilaamiswrap .tilaamiswrap_center h3,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center h3,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center h3,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center h3,
#ostoshistoria_wrap .ostoshistoria_wrap_center h3 {
	font-family: Aborm;
	font-weight: 500;
	font-size: 35px;
	line-height: 35px;
    color:var(--color1);
}

#maksukorttiwrap .maksukorttiwrap_center .slice,
#tilaamiswrap .tilaamiswrap_center .slice,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center .slice,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice,
#ostoshistoria_wrap .ostoshistoria_wrap_center .slice {
	display: flex;
	width:100%;
	background-color: var(--color4);
	padding: 60px 60px 40px 60px;
	flex-direction: column;
	border-radius: 12px;
	box-sizing: border-box;
}

#tilaamiswrap .tilaamiswrap_center .ssee {
	display: flex;
	width: 100%;
	flex-direction: row;
	gap:12px;
}

#tilaamiswrap .tilaamiswrap_center .sss {
	padding:40px 60px;
}

#tilaamiswrap .tilaamiswrap_center .sss div#sscc {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice {
	align-items: center;
	justify-content: center;
}

#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice img,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice img {
	width:100px;
	height: auto;
}

#tilaamiswrap .tilaamiswrap_center #codewrap{
	display: none;
	height: auto;
	border:1px solid #07203A;
	border-radius: 100px;
	margin: 20px 0px;
	position: relative;
	overflow: hidden;
	padding: 7px;
	box-sizing: border-box;
}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt{display:none;}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt:checked ~ #codewrap{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#tilaamiswrap .tilaamiswrap_center #codewrap input{
	width:100%;
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-family: Rubik;
	font-weight: 400;
	padding: 0px 20px;
	outline: none;
	background-color:rgba(255,255,255,0.0);
	border:0;
	box-sizing: border-box;
}

#tilaamiswrap .tilaamiswrap_center #codewrap.erro {
	background-color:rgba(254, 82, 82, 0.52);
	transition: all 0.4s;
}

#tilaamiswrap .tilaamiswrap_center p#codeinfo{
	text-align: left;
}

#tilaamiswrap .tilaamiswrap_center .slice h5{
	display: flex;
	align-items: center;
	font-size: 25px;
	line-height: 29px;
	font-family: Rubik;
	font-weight: 500;
	margin: 20px auto;
	text-align: center;
}

#tilaamiswrap .tilaamiswrap_center .slice p{
	white-space: normal;
	font-size: 16px;
	line-height: 22px;
	font-family: Rubik;
	font-weight: 400;
	text-align: center;
	margin: 0px;
}

#tilaamiswrap .tilaamiswrap_center .slice h5.hinta{
	margin:25px auto;
}

#ostoshistoria_wrap .ostoshistoria_wrap_center .slice .btn2click,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice .btn2click,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice .btn2click,
#maksukorttiwrap .maksukorttiwrap_center .slice .btn2click,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center .slice .btn2click,
#tilaamiswrap .tilaamiswrap_center .slice .btn2click{
	display: inline-block;
	font-family: Rubik;
	font-weight: 300;
	font-size: 21px;
	background-color:var(--color3);
	color:var(--color4);
	border-radius: 50px;
	width:200px;
	min-width: 200px;
	height:60px;
	line-height: 60px;
	text-align: center;
	box-sizing: border-box;
	padding: 0px 20px;
	margin: 20px auto;
	border:0;
	outline: none;
	-webkit-user-select:none;
	user-select:none;
	cursor: pointer;
	transition: all 0.2s;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row .btn2click{
	margin:20px auto 20px 0px;
}

#tilaamiswrap .tilaamiswrap_center .slice .btn2click:hover {
	transform:scale(1.04);
}

#tilaamiswrap .tilaamiswrap_center .sss h5{ margin:0; height: auto; }
#tilaamiswrap .tilaamiswrap_center .sss .btn2click{ margin: 0; }

#tilaamiswrap .tilaamiswrap_center .btn00{
	text-decoration: none;
	color:inherit;
}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt:checked ~ div label#labelcodebtn.btn2click { display:none; }

#maksukorttiwrap .maksukorttiwrap_center .slice .row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row p:nth-of-type(1){
	min-width: 180px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row p.tb{
	width: 100%;
	font-weight: 500;
	text-align: left;
}

#hinta02{ text-decoration: line-through; }

#maksukorttiwrap .maksukorttiwrap_center .slice .row .kmpkoodi{
	position: relative;
	display: inline-block;
	width: auto;
	height: 60px;
	line-height: 60px;
	background-color: #E8FEF4;
	border-radius: 50px;
	border:1px solid #009D49;
	padding:0px 80px 0px 25px;
	box-sizing: border-box;
	font-size: 16px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka{
	display: flex;
	border: 1px solid gray;
	padding: 5px 10px;
	align-items: center;
	justify-content: space-between;
	border-radius: 100px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardno,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_valid,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_remove_btn,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_add_btn{
	display: flex;
	height: 45px;
	line-height: 45px;
	border-radius: 100px;
	padding: 0px 20px;
	box-sizing: border-box;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand{
	background-color: rgba(34,69,170,1.00);
	width:150px;
	height:40px;
	padding: 0px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardno{
	width: 100%
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_valid{
	width: 100%;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_remove_btn{
	background-color: var(--color9);
	width:90px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_add_btn {
	background-color: var(--color3);
	color: var(--color4);
	width:90px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing{
	padding: 20px 0px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing p {
	width: 100%;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing label{
	width:100px;
	height:45px;
	line-height: 45px;
	background-color: var(--color9);
	margin: 0px 5px;
	border-radius: 100px;
	text-align: center;
}


#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing #renew_off:checked + label,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing #renew_on:checked + label{
	background-color:var(--color3);
	color: var(--color4);
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row .kmpkoodi:after{
	content:"L";
	background-color: #009D49;
	width:30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color:white;
	position: absolute;
	top:0px;
	right:20px;
	bottom:0px;
	transform: rotateZ(407deg) rotateY(180deg);
	margin: auto 0px;
	border-radius: 100px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row #etukoodi02{
	text-decoration: underline;
	cursor: pointer;
}