@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body{
	margin:0;
	background: #0b1021;
	color: #e9ecf5;

	font-family: "Manrope", "Segoe UI", Arial, sans-serif;
	font-weight: 500;
	font-size: 18px;

	overflow: hidden;
}
canvas{
	position:absolute;
	top:0; left:0;
}

#canvasses{
	position:absolute;
	top:0; left:0;
	width: calc(100% - 300px);
	height: 100%;
}
#canvasses[fullscreen=yes]{
	width: 100%;
}
#canvasses[cursor=ink]{
	cursor: url('cursors/ink.png') 0 30, auto;
}
#canvasses[cursor=drag]{
	cursor: url('cursors/drag.png') 15 15, auto;
}
#canvasses[cursor=erase]{
	cursor: url('cursors/erase.png') 5 25, auto;
}
#canvasses[cursor=label]{
	cursor: url('cursors/label.png') 15 15, auto;
}



/**********
 PLAY CONTROLS
**********/

#playbar{
	position: absolute;
	bottom: 15px;
	left: calc(50% - 275px); /* 50% - half of (playbar width + sidebar width)*/

	width: 250px;
	height: 75px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#playbar[fullscreen=yes]{
	left: calc(50% - 125px); /* 50% - half of (playbar width)*/
}
#playbar .component_button{
	position: absolute;
	bottom: 0;
	width: 230px;
	height: 25px;
	background: #1f2a44;
	color: #e9ecf5;
	border: 1px solid rgba(255,255,255,0.08);
}
#playbar .component_button:hover{
	background: #2a3756;
}
#playbar .play_slider{
	width: 190px;
    position: absolute;
    left: 30px;
    margin: 0;
}
.play_button_icon{
	width: 25px;
	height: 25px;
	background-image: url(icons/controls.png);
	display: inline-block;
	background-size: 400% 100%;
}
.play_button_icon[icon="0"]{ background-position: 0 0; }
.play_button_icon[icon="1"]{ background-position: -25px 0; }
.play_button_icon[icon="2"]{ background-position: -50px 0; }
.play_button_icon[icon="3"]{ background-position: -75px 0; }
.play_button_label{
	display: inline-block;
	position: relative;
    top: -5px;
}
div[big=yes] .play_button_icon{
	width: 30px;
	height: 30px;
}
div[big=yes] .play_button_label{
	top: -3px;
}



/**********
 TOOLBAR 
**********/

#toolbar{
	position: absolute;
	left: 0px;
	top: calc(33% - 142.5px); /* 33% - half of toolbar height */

	width:75px; height:280px;
	padding: 5px;
	background-color: #0f172a;
	border-right: 1px solid rgba(255,255,255,0.08);

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#toolbar[mode=play]{
	display: none;
}

.toolbar_button{
	width:60px; height:60px;
	margin: 5px;
	border: 2px solid #1f2a44;
	cursor: pointer;
	background-size: 100% 100%;
	background-color: #f6f7fb;
	border-radius: 12px;
}
.toolbar_button[selected=yes]{
	border: 2px solid #6ad7ff;
	background-color: #ffffff;
	box-shadow: 0 0 0 2px rgba(106, 215, 255, 0.4) inset;
}

/**********
 SIDEBAR 
**********/

#sidebar{
	position: absolute;
	top:0; right:0;
	width: 300px;
	height: 100%;
	background: #0f172a;
	color: #e9ecf5;

	font-weight: 500;
	font-size: 16px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#sidebar > div{
	margin: 0;
	padding: 16px 20px 24px;
}
#sidebar > div > div{
	margin-bottom: 20px;
}
#sidebar[mode=play]{
	background: #0b1021;
	color: #9fb2d8;
}
#sidebar .mini_button{
	background: #1f2a44;
	color: #e9ecf5;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 16px;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	cursor: pointer;
}
#sidebar .mini_button + .mini_button{
	margin-left: 6px;
	margin-top: 6px;
}
#sidebar .mini_button.save_button{
	margin-top: 10px;
	background: #f59e0b;
	color: #0b1021;
	font-weight: 600;
}
#sidebar .mini_button.save_button:hover{
	background: #fbbf24;
}
#sidebar .mini_button:hover{
	background: #2a3756;
}
#sidebar[mode=play] .mini_button{
	background: #1f2a44;
	color: #c9eeff;
}
#sidebar[mode=play] .mini_button:hover{
	background: #2a3756;
}
#sidebar a{ color: #c9eeff; }
#sidebar a:hover{ color: #6ad7ff; }
#sidebar hr{
	border: none;
	border-bottom: 2px solid rgba(255,255,255,0.08);
	width: 100%;
	position: relative;
	left: 0;
	margin: 14px 0;
}
.component_input{
	border: 1px solid rgba(255,255,255,0.08);
	background: #0b1021;
	color: #e9ecf5;
	
	width:calc(100% - 10px);
	height:22px;
	padding: 5px;
	
	font-size: 18px;
	font-weight: 500;
}
.component_textarea{
	border: 1px solid rgba(255,255,255,0.08);
	background: #0b1021;
	color: #e9ecf5;
	width:calc(100% - 10px);
	height: 100px;
	padding: 5px;
	font-size: 16px;
	font-weight: 500;
}
.component_output{
	border: 1px solid rgba(255,255,255,0.08);
	width:100%;
	background: #111a2f;
	color: #9fb2d8;
	font-size: 15px;
	font-weight: 500;
}
.component_slider{
	position: relative;
	width: 250px;
	height: 52px;
}
.component_slider_graphic{
	position: absolute;
	width: 250px;
	height: 40px;
	cursor: pointer;
}
.component_slider_pointer{
	position: absolute;
	top: 42px;
	width: 15px;
	height: 10px;
}
.component_label{
	margin-bottom: 5px;
}
.component_button{

	width: calc(100% - 20px);
	background: linear-gradient(120deg, #fca63d, #f76c1b);
	color: #0b0d14;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid rgba(255,255,255,0.08);

	cursor: pointer;
}
.component_button:hover{
	background: linear-gradient(120deg, #ffb55b, #ff7f2a);
}
.component_button[header=yes]{
	position: absolute;
	top:0; left:0;
	width: 280px;
	background: #111a2f;
    border-radius: 0px;
    color: #9fb2d8;
}
.component_button[header=yes]:hover{
	background: #1a2542;
}



/**********

MODAL

**********/

#modal_container{
	display: none;
	position: absolute;
	width: 100%; height: 100%;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#modal_container[show=yes]{
	display: block;
}
#modal_bg{
	position: absolute;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.8);
}
#modal{

	position: absolute;
	top:0; left:0; right:0; bottom:0;
	margin: auto;

	width: 600px; height: 300px;
	padding: 10px;
	background: #0f172a;
	border: 1px solid rgba(255,255,255,0.08);
	color: #e9ecf5;
}
#modal_close{
	width: 120px;
	font-weight: 500;
	color: #9fb2d8;
	cursor: pointer;
}
#modal_close:hover{
	color: #e9ecf5;
}
#modal_page{
	margin: 15px;
	font-size: 20px;
	font-weight: 500;
	color: #e9ecf5;
}
#modal iframe{
	border: none;
}