html,
body{
	height:auto;
    min-height: 100vh;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background-color:rgba(67,67,67,1.00);
    background-attachment: fixed;
    background-image: linear-gradient(122deg, rgba(86,85,85,1.00) 12%, rgba(51,50,50,1.00) 55%, rgba(57,57,57,1.00) 95%);
	color: rgba(48,73,165,1.00);
	font-family:Arial, sans-serif;
	}

::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.36);
  outline: 1px solid slategrey;
}

* > form {
	display: contents;
}

#reqnot{
    position:fixed;
    display: none;
    flex-direction: row;
    top:0px;
    right:0px;
    width:auto;
    height:auto;
    padding: 15px 20px 15px 50px;
    border-radius: 0px 0px 0px 25px;
    box-sizing: border-box;
    background-color:rgba(75,142,217,1.00);
    color:white;
}

#reqnot:before{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    width:35px;
    height:35px;
    filter: invert();
    content:"";
    margin: auto 10px;
    background-image: url("/admin/imgs/notice.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#menushow{ display:none; }

.lang_en{ display:none; }

#menuclick{
    position: fixed;
    left:0px;
    bottom:12%;
    margin: auto;
    display:flex;
    width:50px;
    height: 50px;
    border-radius: 0px 8px 8px 0px;
    flex-direction: column;
    gap:6px 0px;
    box-shadow: inset 2px 0px 2px rgba(22,22,22,0.4), 1px 1px 2px black;
    padding: 0px;
    background-color:rgba(236,236,236,1.00);
    background-image: linear-gradient( 33deg, rgba(214,214,214,1.00) 10%, rgba(236,236,236,1.00) 77% );
    transition: all 0.1s linear;
    align-items: center;
    justify-content: center;
    z-index: 9990;
    
    .line{
        width:70%;
        height:5px;
        background-color:rgba(31,30,30,1.00);
        box-shadow: inset 1px 2px 2px rgba(204,204,204,0.60), 0px 1px 0px rgba(122,224,244,0.99);
        border-radius: 10px;
        transition: all 0.5s ease-out;
        translate: 0 0px;
        transform-origin: center center;
        transform: rotate(0px);
    }
}


#menushow:checked ~ #menuclick{
    margin: auto;
    display:flex;
    width:50px;
    left: min(90%, 300px);
    height: 50px;
    flex-direction: column;
    gap:6px 0px;
    padding: 0px;
    box-shadow: inset 8px 0px 8px rgba(22,22,22,0.4), 4px 4px 8px black;
    background-color:rgba(26,21,226,1.00);
    background-image: linear-gradient( 111deg, rgba(242,242,242,1.00) 10%, rgba(240,240,240,1.00) 77% );
    align-items: center;
    justify-content: center;
    
    .line:nth-last-of-type(1){ 
        position: absolute; 
        bottom:0px; 
        right:0px;
        transform: rotate(45deg);
        transform-origin: right bottom;
        translate: -14px -10px;
    }
    
    .line:nth-last-of-type(2){ opacity: 0 }
    
    .line:nth-last-of-type(3){
        position: absolute; 
        bottom:0px; 
        left:0px;
        translate: 14px -10px;
        transform-origin: left bottom;
        transform: rotate(315deg);
    }
    

}

@media screen and (min-width:801px){

#messagebox{
	position:fixed;
	top:10%;
	left:10%;
	right:10%;
	bottom:10%;
	width:80%;
	height:auto;
	margin:auto auto auto auto;
	background-color:rgba(250,250,250,0.95);
	border:1px solid rgba(147,147,147,1.00);
	color:#352F30;
	z-index:9909;
	padding:20px 20px 20px 20px;
	box-sizing:border-box;
	box-shadow:0px 0px 50px black;
	}
}

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

#messagebox{
	position:fixed;
	top:50px;
	left:15px;
	bottom:15px;
	right:15px;
	width:auto;
	height:auto;
	margin:auto auto auto auto;
	background-color:rgba(250,250,250,0.95);
	border:1px solid rgba(147,147,147,1.00);
	color:#352F30;
	z-index:9909;
	padding:20px 20px 20px 20px;
	box-sizing:border-box;
	box-shadow:0px 0px 60px black;
	}
}

#messagebox h4{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	display:block;
	width:auto;
	height:60px;
	line-height:60px;
	background-color:rgba(168,168,168,1.00);
	margin:0px auto 10px auto;
	text-align:center;
	}

#messagebox p{
	position:absolute;
	top:90px;
	left:10px;
	right:10px;
	bottom:90px;
	display:block;
	width:90%;
	overflow:auto;
	margin:20px auto 10px auto;
	font-size:13px;
	letter-spacing:0.5px;
	line-height:18px;
	text-align:left;
	}

input[type="submit"],
input[type="button"],
button{
	width: auto;
	line-height: 45px;
	font-size: 15px;
	font-weight: 500;
	padding: 0px 22px;
	border-radius: 25px;
	background-color: rgba(126,176,196,1.00);
	color: white;
	cursor: pointer;
	-webkit-appearance: none;
	border: 0;
	margin: 10px auto;
	transition: all 0.5s;
}
	
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover{
	background-color: rgba(28,132,175,1.00);
    background-image: linear-gradient(0deg, rgba(20,130,180, 1.0) 10%, rgba(44, 166, 133, 1.0) 88%);
	transform: scale(1.033);	
}

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

#left_slice{
	position:fixed;
	display: flex;
	top:0px;
    left:0px;
	bottom:0px;
    width: min(90%, 300px);
    height:100vh;
    height: 100svh;
    flex-direction: column;
	margin:0px 0px 0px 0px;
	padding:20px 0.5%;
	box-sizing: border-box;
	overflow-y:scroll;
    overflow-x:hidden;
	background-color: rgba(48,73,165,1.00);
    background-image: linear-gradient(100deg, rgba(14,14,183,1.00) 25%, rgba(33,121,212,1.00) 90%);
	z-index: 9000;
    translate: -101% 0px;
	transition:all 0.1s linear;
    box-shadow: 4px 0px 10px black, 0px 0px 2px rgba(1,2,3,0.4);
}

#menushow:checked ~ #left_slice {
    translate: 0% 0px;    
    box-shadow: 4px 0px 10px black, 25px 0px 15px rgba(1,2,3,0.4);
}

#left_slice a{ width:100%; 	box-sizing: border-box; }

#left_slice h3{
	display:block;
	float: left;
	width: 100%;
	height:auto;
	font-size: 22px;
	font-weight: 800;
	line-height: 28px;
	color:yellow;
	margin: 12px auto 3px auto;
	padding: 0px 0px 0px 5%;
	box-sizing: border-box;
}

#left_slice .cnappi {
	position: relative;
	display: block;
	float: left;
	margin:2px auto;
	font-size:15px;
	border-radius:3px;
	color:rgba(255,255,255,1.00);
	height:23px;
	line-height:23px;
	width: 100%;
	font-weight:500;
	text-align:left;
    box-sizing: border-box;
	padding:0px 0% 0px 5%;
	transition:all 0.2s;
	}

#left_slice .cnappi:hover{
	background-color: rgba(179,179,179,1.00);
	color:white;
	}

#left_slice .spacespace{
    display:block;
    float:left;
    width:100%;
    height:10px
}

#left_slice .new:after{
	position:absolute;
	top:0px;
	right:5px;
	bottom:0px;
	content:"Uusi";
	width:43px;
	height:20px;
	line-height: 20px;
	text-align: center;
	background-color: rgba(255,144,67,1.00);
	color:White;
	border-radius: 100px;
	margin:auto
}

#right_slice{
display:flex;
bottom:0px;
width:100%;
flex-direction: column;
height:auto;
box-sizing: border-box;
padding:0px 2%;
overflow-x:hidden;
overflow-y:auto;
z-index:99;
text-align: center;
}

#right_slice a{
	color:inherit;
	text-decoration: none;
	cursor: pointer;
}

@keyframes wlc{
    0%{ translate: 0px 0px; }
    80%{ translate: 0px 0px; }
    90%{ translate: 0px 10px; }
    100%{ translate: 0px -100px; }
}

@keyframes wlc{
    0%{ translate: 0px 0px; }
    80%{ translate: 0px 0px; }
    90%{ translate: 0px 10px; }
    100%{ translate: 0px -200vh; }
}

.topx {
    position:fixed;
    z-index: 9090;
    top:0px;
    left:0px;
    width:100%;
    height:100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    translate: 0px -100px;
    margin: 0px;
    padding: 0px;
    animation: 3s wlc 0s linear 1 forwards;
}

.topx:before {
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    height: 100dvh;
    content:"";
    z-index: -1;
    text-align: center;
    animation: 3s wlc2 0s linear 1 forwards;
    background-color:rgba(58,58,58,0.71);
    backdrop-filter:blur(5px);
}

.topx .title{
	display:flex;
	width:auto;
	font-size:25px;
	font-weight:900;
	height:auto;
	color:rgba(46,115,253,1.00);
	line-height:30px;
	margin:15px 0px 5px 0px;
	text-align:center;
	}

.topx .subtitle{
	display: flex;
	width: auto;
	height: auto;
	line-height: 22px;
	text-align: center;
	font-size:15px;
	font-weight: 500;
	color:rgba(254,254,254,1.00);
	padding:0;
	margin:5px 0px 25px 0px;
}

#right_slice .tietoots{
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
	line-height: 22px;
	text-align: center;
	font-size:15px;
	font-weight: 500;
	color:rgba(87,87,87,1.00);
	padding:0;
	margin:20px auto 5px auto;
}

#right_slice .splitinfo{
	width: 100%;
	height:auto;
	text-align: left;
	color:white;
	font-size: 16px;
	font-weight: 600;
	margin: 40px 0px 10px 0px;
}

#right_slice .formfieldrow {
	position:relative;
	display: block;
	width:100%;
	height:55px;
	margin:12px auto 12px auto;
	background-color:white;
	padding: 0px 15px;
	box-sizing: border-box;
	border-radius: 40px;
	overflow: hidden;
}

#right_slice .formfieldrow .tietoots{
	display: inline-block;
	width:190px;
	height:20px;
	line-height: 20px;
	position: absolute;
	top:5px;
	left:25px;
	font-size:13px;
	font-weight: 500;
	text-align: left;
	color: rgba(141,141,141,1.00);
	margin:auto;
	z-index: 900;
}

#right_slice .formfieldrow input,
#right_slice .formfieldrow button,
#right_slice .formfieldrow select{
	display: block;
	position: absolute;
	width: calc( 100% - 10px );
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
	top:0px;
	bottom:0px;
	left:5px;
	right:5px;
	border:0;
	-webkit-appearance:none;
	border-radius: 100px;
	padding:12px 20px 0px 20px;
	margin:auto;
	font-size:16px;
	z-index: 777;
}

#right_slice .formfieldrow #btnacti,
#right_slice .formfieldrow #subacti{
	display:inline-block;
	position:absolute;
	top:0px;
	left:inherit;
	bottom:0px;
	right:20px;
	width:90px;
	height:40px;
	padding: 0;
	line-height: 40px;
	margin:auto;
	z-index: 1010;
}

#right_slice .setuprow {
	position:relative;
	display: block;
	width:100%;
	height:50px;
	margin:12px auto 12px auto;
	background-color:white;
	padding: 0px 15px;
	box-sizing: border-box;
	border-radius: 40px;
}

#right_slice .setuprow h6 {
	position: absolute;
	display: block;
	top:0px;
	bottom:0px;
	width: calc( 100% - 100px );
	height:22px;
	line-height: 22px;
	left:20px;
	right:80px;
	font-weight: 500;
	margin:auto;
	padding: 0px;
	text-align: left;
	font-size:17px;
}

#right_slice .setuprow .values {
	position:absolute;
	top:0px;
	bottom:0px;
	right:25px;
	width:50px;
	height:30px;
	line-height: 30px;
	font-size:20px;
	font-weight: 600;
	margin:auto;
	text-align: right;
}

#right_slice .setuprow h6:hover ~ :before {
	display: block;
	width: auto;
	height:auto;
	content: attr('data-rel');
	font-weight: 300;
	font-size: 25px;
	cursor: pointer;
	text-align: center;
	background-color: red;
	border:1px solid rgba(42,203,211,1.00);
	border-radius: 3px;
}

#right_slice .setuprow select {
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width: auto;
	height:auto;
	margin:auto;
	}

#right_slice .setuprow input[type="range"] {
	position: absolute;
	top:0px;
	bottom:0px;
	right:20px;
	width:50px;
	margin: auto;
}

#right_slice .setuprow input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
}

#right_slice .setuprow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

#right_slice .setuprow input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}


/* Special styling for WebKit/Blink */
#right_slice .setuprow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #FFAA1E;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
#right_slice .setuprow input[type=range]::-moz-range-thumb {
  border: 1px solid #FFAA1E;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
#right_slice .setuprow input[type=range]::-ms-thumb {
  border: 1px solid #FFAA1E;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
}

#right_slice .setuprow input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 30px;
  cursor: pointer;
  background: #FFAA1E;
  border-radius: 50px;
}

#right_slice .setuprow input[type=range]:focus::-webkit-slider-runnable-track {
 background: #FFAA1E;
 }

#right_slice .piece h5{
	display: block;
	width:100%;
	height:auto;
	font-size:20px;
	line-height: 20px;
	margin: 0;
	padding: 0;
	color:rgba(105,105,105,1.00);
	}

#right_slice .piece .pr{
	color:rgba(69,69,69,1.00);
	display: block;
	width:100%;
	height:15px;
	line-height:15px;
	font-size:11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin:3px auto 2px auto;
	}

#right_slice .cnappi{
	position:fixed;
	width:90px;
	top:10px;
	right:10px;
	padding:0px 10px 0px 10px;
	height:30px;
	line-height:30px;
	text-align:center;
	}

#right_slice .piece,
#right_slice .piece_all{
	position:relative;
	display:inline-block;
	width:200px;
	height:250px;
	padding:15px 10px 15px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color:white;
	vertical-align: top;
	text-align: left;
	margin:20px 10px 0px 10px;
}

#right_slice .piece_all{
	width:95%;
	height: auto;
}

#right_slice .contentti{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
	margin:0px auto 0px auto;
	box-sizing: border-box;
	width:100%;
	height:auto;
	text-align: left;
	padding: 50px 0%;
}

#right_slice .sel select {
	position: relative;
	display:inline-block;
	width:auto;
	height:33px;
	line-height:33px;
	font-weight: 800;
	font-size: 14px;
	box-sizing: border-box;
	border-radius: 50px;
	margin:0px auto 0px auto;
	padding:0px 15px 0px 15px;
	-webkit-appearance:none;
	appearance:none;
	border:1px solid rgba(181,181,181,1.00);
	outline: none;
	cursor: pointer;
}

#right_slice .dayRow{
	position: relative;
	display:block;
	width:100%;
	height:50px;
	line-height: 50px;
	margin: 12px auto 12px auto;
	padding:0px 3% 0px 3%;
	text-align: right;
	box-sizing: border-box;
	background-color:rgba(255,255,255,1.00);
	border-radius: 100px;
}

#right_slice .dayRow p{
	display: inline-flex;
	position: absolute;
	top:0px;
	bottom:0px;
	left:20px;
	font-weight: 900;
	width: auto;
	height: auto;
	margin: auto;
}

#right_slice .dayRow span {margin: auto;}

#right_slice .dayRow select {
	display:inline-block;
	width:auto;
	height:25px;
	margin:0px 0px 0px 0px;
	padding:0px 10px 0px 10px;
	top:0px;
	bottom:0px;
	-webkit-appearance:none;
}

#right_slice .dayRow select:nth-of-type(0){ right: 200px; }
#right_slice .dayRow select:nth-of-type(1){ right: 0px; }



#right_slice .radio,
#right_slice .editable{
	position:relative;
	display:inline-block;
	width:100%;
	height:auto;
	padding:15px 15px;
	box-sizing:border-box;
	margin:10px auto 0px auto;
	background-color:rgba(255,255,255,1.00);
	border-radius: 10px;
	overflow: hidden;
	}

#right_slice .editable div{
	display: block;
	width: 95%;
	height: 25px;
	margin: 10px auto;
	
	}

#right_slice .editable div input{
	width:100%;
	height:20px;
	border:0;
	background-color:rgba(220,220,220,1.00);
	padding:0px 10px;
	box-sizing: border-box;
	outline:none;
	-webkit-appearance:none;
	}

#right_slice .radio .nimi,
#right_slice .radio .url,
#right_slice .radio .play{
	display:block;
	float:left;
	width:100%;
	height:auto;
	line-height:23px;
	font-size:12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	}
	
#right_slice .radio .edit{
	display:block;
	position:absolute;
	top:10px;
	right:10px;
	width:auto;
	height:30px;
	line-height:30px;
	}

#right_slice .contentti .note{
	position:absolute;
	left:10px;
	bottom:5px;
	color:rgba(66,64,64,1.00);
	width: calc( 100% - 5px - 25% - 10px);
	height:25px;
	padding:0px 0px;
	line-height:25px;
	margin:0px auto;
	font-size:12px;
	text-align: left;
	border-radius:5px;
	border:0;
}

#right_slice .contentti .opt_day{
	display:block;
	float:left;
	width:105px;
	height:22px;
	font-family:Arial;
	font-size:12px;
	font-weight:500;
	line-height:22px;
	text-align:left;
	padding:0px 0px 0px 5px;
	box-sizing:border-box;
	margin:6px 0px 4px 0px;
	border:1px solid rgba(198,198,198,0.78);
}

#right_slice .contentti .opt_day input{
	display:block;
	float:left;
	width:22px;
	height:22px;
	margin:0px 0px 0px 0px;
}