body {
	color: #2c3e50;
	margin: 0;
	width: 96vw;
	height: 96vh;
	margin-top: 2vh;
	margin-left: 2vw;
}
.hidden {
	display: none;
}

/*****  CONTAINER & BUTTONS  *****/

#result {
	z-index: 1;
	height: 600px;
	width:  100%;
	cursor: pointer;
	/*border: 1px dotted blue;*/
	border: 3px dashed #f2f2f2;
	overflow: hidden;
}

/* Extra small devices (phones, 600px and down) */
/*
@media only screen and (max-width: 600px) {

	#main_recorder_comic_container {
	display: block;
	}

// Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {
#main_recorder_comic_container {
	display: block;
	}
	*/
	
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}


#result:-webkit-full-screen  {
  width: 100%;
  height: 100%;
}

.tools {	
	opacity: 1;
	color: white;	
	padding: 0 1rem;
	z-index: 95;
	/*font-size: 1rem;	
	line-height: 1rem;*/
}
.panelpages input {
	display: none;
}
input[name=panelview]:checked + span {
	width: 1em;
	height: 1em;
}
input[name=panelview]:checked + span,
input[name=panelview]:not(:checked) + span + span {
	background-color: #9b59b6;
}

/*****  PANELS  *****/
.panel {
	z-index: 10;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
#result.debug .container:not(.zoomed) .panel {
	border: 2px solid red;
	margin-left: -2px;
	margin-top: -2px;
}
#result.debug .container:not(.zoomed) .panel:hover {
	background-color: rgba(52,152,219,0.5);
}
#result:not(.debug) .container .panel *,
#result.debug .container.zoomed .panel * {
	display: none;
}
#result.debug .container:not(.zoomed) .panel span {
	color: white;
	font-size: 75%;
	background-color: black;
	opacity: 0.8;
	border-radius: 30px;
	padding: 2px 6px;
}
#result.debug .container:not(.zoomed) .panel span.panelnb { font-size: 150%; }
/*.panel span.top     { position: absolute; top: 0;    left: 45%; }
.panel span.bottom  { position: absolute; bottom: 0; left: 45%; }
.panel span.left    { position: absolute; left: 0;   top: 45%; }
.panel span.right   { position: absolute; right: 0;  top: 45%; }*/

// before is kumiko code

/*
.play_toolbar {
    -webkit-text-stroke: thin #19252d !important;
    color: #f2f2f2 !important;
}*/
/*
#play_toolbar:hover {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
*/
div.play_toolbar > i.tools > i.fas {
	/*padding:10rem;
	opacity:0.5;*/
	/*height:100%;
	width:100%;*/
}

.prevPanel,
.playStory,
.nextPanel {
	height:100%;
	width:100%;
	display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   
   /*-webkit-text-stroke: thick #19252d !important;*/
   
    color: #f2f2f2 !important;
   /*
	display: flex;
    justify-content: center;
    align-items: center;
    text-align:center !important;*/
}
/*
.playStory{
	width:20%;
}
.prevPanel,
.nextPanel {
	width:40%;
}*/
/*
.mount {
	width:100%;
	height:auto;
}*/

#main_recorder_comic_container {
	display: flex !important;
	
	/*justify-content: center;
	align-items: center;*/
}