.STFUI_button
{
	cursor: pointer;
	display: inline-block;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	margin: 5px;
	-webkit-tap-highlight-color: transparent;
	transition: all 0.2s;
}
	.STFUI_button.STFUI_SIZE_xs
	{
		font-size: 10px;
		border-radius: 8px;
		padding: 7px 12px;
	}
	.STFUI_button.STFUI_SIZE_sm
	{
		font-size: 15px;
		border-radius: 9px;
		padding: 8px 15px;
	}
	.STFUI_button.STFUI_SIZE_md
	{
		font-size: 20px;
		border-radius: 10px;
		padding: 10px 20px;
	}
	.STFUI_button.STFUI_SIZE_lg
	{
		font-size: 30px;
		border-radius: 10px;
		padding: 15px 30px;
	}
	.STFUI_button.STFUI_SIZE_xl
	{
		font-size: 40px;
		border-radius: 10px;
		padding: 20px 40px;
	}

	.STFUI_button.STFUI_COLOR_default
	{
		box-shadow: 0 3px 4px #8cb5f4;
		color: white;
		background: #4186f3;
	}
		.STFUI_button.STFUI_COLOR_default:hover
		{
			background: #5f9bf9;
		}
		.STFUI_button.STFUI_COLOR_default:active
		{
			background: #3972ce;
		}
	.STFUI_button.STFUI_COLOR_link
	{
		color: #4186f3;
	}
		.STFUI_button.STFUI_COLOR_link:hover
		{
			color: #5f9bf9;
		}
		.STFUI_button.STFUI_COLOR_link:active
		{
			color: #3972ce;
		}
	.STFUI_button.STFUI_COLOR_disabled
	{
		color: #888;
		background: #ddd;
	}
		.STFUI_button.STFUI_COLOR_disabled:hover
		{
			background: #eee;
			color: #aaa;
		}
		.STFUI_button.STFUI_COLOR_disabled:active
		{
			background: #ccc;
			color: #333;
		}
	.STFUI_button.STFUI_COLOR_success
	{
		box-shadow: 0 3px 4px #8cf4a1;
		color: white;
		background: #59e63a;
	}
		.STFUI_button.STFUI_COLOR_success:hover
		{
			background: #5dd243;
		}
		.STFUI_button.STFUI_COLOR_success:active
		{
			background: #479d34;
		}
	.STFUI_button.STFUI_COLOR_warning
	{
		box-shadow: 0 3px 4px #f1f48c;
		color: white;
		background: #e3d72a;
	}
		.STFUI_button.STFUI_COLOR_warning:hover
		{
			background: #f2e52f;
		}
		.STFUI_button.STFUI_COLOR_warning:active
		{
			background: #d7cb28;
		}
	.STFUI_button.STFUI_COLOR_danger
	{
		box-shadow: 0 3px 4px #f48c8c;
		color: white;
		background: #bf4141;
	}
		.STFUI_button.STFUI_COLOR_danger:hover
		{
			background: #ea3d3d;
		}
		.STFUI_button.STFUI_COLOR_danger:active
		{
			background: #8e2828;
		}

.STFUI_checkbox
{
	width: 33px;
	height: 33px;
	background: white;
	box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
	.STFUI_checkbox i
	{
		position: absolute;
		color: #4186f3;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.1s;
		font-size: 10px;
		opacity: 0;
	}
		.STFUI_checkbox.ticked i
		{
			font-size: 13px;
			opacity: 1;
		}

.STFUI_code_editor
{
	height: 500px;
	width: 100%;
	overflow: auto;
	background: #272822;
	color: #F8F8F2;
	padding: 20px;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 10px 0;
}
	.STFUI_code_editor pre
	{
		height: 100%;
		width: 100%;
		margin: 0;
    }
        .STFUI_code_editor pre:focus
        {
            outline: 0px solid transparent;
        }

	.STFUI_code_editor *::selection,
	.STFUI_code_editor *::-moz-selection
	{
		background: rgba(255,255,255,0.2);
		border: 2px solid yellow;
    }

.STFUI_code_preview
{
	max-height: 500px;
	width: 100%;
	overflow: auto;
	background: #272822;
	color: #F8F8F2;
	padding: 20px;
	box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),0 8px 16px -8px hsla(0, 0%, 0%, 0.3),0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
	border-radius: 8px;
	box-sizing: border-box;
	margin: 10px 0;
}
	.STFUI_code_preview pre
	{
		height: 100%;
		width: 100%;
		margin: 0;
	}

	.STFUI_code_preview *::selection,
	.STFUI_code_preview *::-moz-selection
	{
		background: rgba(255,255,255,0.2);
		border: 2px solid yellow;
	}

.STFUI_gallery
{
	position: relative;
	width: 300px;
	height: 200px;
	border-radius: 8px;
	transition: all 0.2s;
}
	.STFUI_gallery .STFUI_gallery_wrapper
	{
		transition: all 0.5s;
	}
	.STFUI_gallery .STFUI_gallery_size
	{
		position: absolute;
		cursor: pointer;
		font-size: 60px;
		width: 60px;
		height: 60px;
		text-align: center;
		color: white;
		opacity: 0;
		transition: opacity 0.2s;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		-webkit-tap-highlight-color: transparent;
		filter: drop-shadow(0 0 5px black);
	}
	.STFUI_gallery .STFUI_gallery_previous,
	.STFUI_gallery .STFUI_gallery_next
	{
		position: absolute;
		cursor: pointer;
		font-size: 30px;
		width: 30px;
		height: 30px;
		text-align: center;
		color: white;
		opacity: 0;
		filter: drop-shadow(0 0 5px black);
		-webkit-tap-highlight-color: transparent;
		transition: all 0.2s;
	}
		.STFUI_gallery:hover .STFUI_gallery_previous,
		.STFUI_gallery:hover .STFUI_gallery_next,
		.STFUI_gallery:hover .STFUI_gallery_size
		{
			opacity: 0.5;
		}
		.STFUI_gallery .STFUI_gallery_size:hover,
		.STFUI_gallery .STFUI_gallery_previous:hover,
		.STFUI_gallery .STFUI_gallery_next:hover
		{
			opacity: 1;
		}
		.STFUI_gallery .STFUI_gallery_previous,
		.STFUI_gallery .STFUI_gallery_next
		{
			top: 50%;
			transform: translate(0, -50%);
		}
			.STFUI_gallery .STFUI_gallery_previous
			{
				left: 20px;
			}
			.STFUI_gallery .STFUI_gallery_next
			{
				right: 20px;
			}
	.STFUI_gallery .STFUI_gallery_items_container
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		border-radius: 8px;
		overflow: hidden;
		transition: all 0.5s;
	}
		.STFUI_gallery .STFUI_gallery_items_container .STFUI_gallery_items
		{
			height: 100%;
			white-space: nowrap;
			position: relative;
			transition: left 0.3s;
		}
			.STFUI_gallery .STFUI_gallery_items_container .STFUI_gallery_items .STFUI_gallery_item
			{
				width: 100%;
				height: 100%;
				display: inline-block;
				position: relative;
			}
				.STFUI_gallery .STFUI_gallery_items_container .STFUI_gallery_items .STFUI_gallery_item img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border: 0;
				}
	.STFUI_gallery.minimalized
	{
		box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),0 8px 16px -8px hsla(0, 0%, 0%, 0.3),0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
	}
		.STFUI_gallery.minimalized .STFUI_gallery_wrapper
		{
			position: relative;
			width: 300px;
			height: 200px;
		}
	.STFUI_gallery.fullscreen
	{
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}
		.STFUI_gallery.fullscreen .STFUI_gallery_wrapper
		{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 50;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 0;
		}
		.STFUI_gallery.fullscreen .STFUI_gallery_items_container
		{
			width: calc(100% - 110px);
			height: calc(100% - 20px);
		}
		.STFUI_gallery.fullscreen .STFUI_gallery_size
		{
			right: 40px;
			top: 40px;
			font-size: 30px;
			width: 30px;
			height: 30px;
		}

.STFUI_input
{
	border: none;
	background: white;
	box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e, inset 0 0 0 100px white;
	border-radius: 10px;
	padding: 11px 11px 9px 11px;
	color: rgb(66, 66, 66);
	font-size: 15px;
	width: 150px;
	height: 15px;
	margin: 5px 8px;
	vertical-align: bottom;
	transition: all 0.2s;
	filter: none;
}
	.STFUI_input:hover
	{
		box-shadow: 0 0 1px #0007,0 0 10px #0003, 0 3px 4px #0000003e, inset 0 0 0 100px white;
	}
	.STFUI_input:focus
	{
		outline: none;
		box-shadow: 0 0 0px 2px #3b95df, 0 0 1px 6px #3b95df55, inset 0 0 0 100px white;
	}
	.STFUI_input.STFUI_COLOR_disabled,
	.STFUI_input.STFUI_COLOR_disabled:hover
	{
		box-shadow: 0 0 1px #0005, 0 0 10px #0003, 0 3px 4px #0000001e, inset 0 0 0 100px white;
		background: #eeeeee;
	}
	.STFUI_input.STFUI_COLOR_danger
	{
		box-shadow: 0 0 0px 2px #ea3d3d, 0 0 1px 6px #ea3d3d55, inset 0 0 0 100px white;
	}
	.STFUI_input.STFUI_COLOR_warning
	{
		box-shadow: 0 0 0px 2px #eaa608, 0 0 1px 6px #eaa60855, inset 0 0 0 100px white;
	}
	.STFUI_input.STFUI_COLOR_success
	{
		box-shadow: 0 0 0px 2px #5dd243, 0 0 1px 6px #5dd24355, inset 0 0 0 100px white;
	}

.STFUI_input_number
{
	border: none;
	background: white;
	box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e, inset 0 0 0 100px white;
	border-radius: 10px;
	width: 164px;
	margin: 5px 8px;
	position: relative;
	height: 35px;
	display: inline-block;
	transition: all 0.2s;
	vertical-align: bottom;
	filter: none;
}
	.STFUI_input_number:hover
	{
		box-shadow: 0 0 1px #0007,0 0 10px #0003, 0 3px 4px #0000003e, inset 0 0 0 100px white;
	}
	.STFUI_input_number.focused
	{
		box-shadow: 0 0 0px 2px #3b95df, 0 0 1px 6px #3b95df55, inset 0 0 0 100px white;
	}
	.STFUI_input_number input
	{
		width: calc(100% - 72px);
		border: none;
		padding: 11px 0 9px 0;
		border-radius: 6px;
		color: rgb(66, 66, 66);
		font-size: 15px;
		height: 35px;
		text-align: center;
		box-sizing: border-box;
		float: left;
	}
		.STFUI_input_number input:focus
		{
			outline: none;
		}
		.STFUI_input_number .STFUI_input_number_button
		{
			font-size: 10px;
			color: #3b95df;
			position: relative;
			width: 24px;
			height: 24px;
			margin: 6px;
			border-radius: 6px;
			cursor: pointer;
			float: left;
			-webkit-tap-highlight-color: transparent;
			transition: all 0.2s;
		}
			.STFUI_input_number .STFUI_input_number_button i
			{
				position: absolute;
				transform: translate(-50%, -50%);
				top: 50%;
				left: 50%;
			}
			.STFUI_input_number .STFUI_input_number_button:hover
			{
				background: #3b95df55;
				color: #3b95df;
			}
			.STFUI_input_number .STFUI_input_number_button:active
			{
				background: #3b95df55;
				color: #2a6ba0;
			}

	.STFUI_input_number.STFUI_COLOR_disabled,
	.STFUI_input_number.STFUI_COLOR_disabled:hover
	{
		box-shadow: 0 0 1px #0005, 0 0 10px #0003, 0 3px 4px #0000001e, inset 0 0 0 100px white;
		background: #eeeeee;
	}
	.STFUI_input_number.STFUI_COLOR_danger
	{
		box-shadow: 0 0 0px 2px #ea3d3d, 0 0 1px 6px #ea3d3d55, inset 0 0 0 100px white;
	}
		.STFUI_input_number.STFUI_COLOR_danger .STFUI_input_number_button
		{
			color: #ea3d3d;
		}
			.STFUI_input_number.STFUI_COLOR_danger .STFUI_input_number_button:hover
			{
				background: #ea3d3d55;
				color: #ea3d3d;
			}
			.STFUI_input_number.STFUI_COLOR_danger .STFUI_input_number_button:active
			{
				background: #ea3d3d55;
				color: #b42f2f;
			}
	.STFUI_input_number.STFUI_COLOR_warning
	{
		box-shadow: 0 0 0px 2px #eaa608, 0 0 1px 6px #eaa60855, inset 0 0 0 100px white;
	}
	.STFUI_input_number.STFUI_COLOR_success
	{
		box-shadow: 0 0 0px 2px #5dd243, 0 0 1px 6px #5dd24355, inset 0 0 0 100px white;
	}

.STFUI_select
{
	display: inline-block;
	position: relative;
	user-select: none;
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	vertical-align: bottom;
	margin: 5px;
}
	.STFUI_select .STFUI_select_input
	{
		border: none;
		color: #333;
		padding: 9px 50px 11px 15px;
		background: white;
		box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e;
		border-radius: 10px;
		font-size: 15px;
		height: 15px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}
	.STFUI_select i.STFUI_select_status_icon
	{
		position: absolute;
		right: 15px;
		top: 50%;
		color: #4186f3;
		cursor: pointer;
		font-size: 13px;
		-webkit-tap-highlight-color: transparent;
		transform: translate(0, -50%);
	}
	.STFUI_select .STFUI_select_options_container
	{
		position: absolute;
		background: white;
		box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e;
		width: 100%;
		box-sizing: border-box;
		top: 30px;
		border-radius: 10px;
		z-index: 1;
		font-size: 15px;
		opacity: 0;
		transform: scale(0);
		overflow: auto;
		transition: opacity 0.2s, top 0.2s, bottom 0.2s;
	}
		.STFUI_select .STFUI_select_options_container.visible
		{
			transform: scale(1);
		}
		.STFUI_select .STFUI_select_options_container.top
		{
			bottom: 30px;
			top: auto;
			transition: opacity 0.2s, bottom 0.2s;
		}
		.STFUI_select.open .STFUI_select_options_container
		{
			top: 45px;
			opacity: 1;
			z-index: 3;
		}
			.STFUI_select.open .STFUI_select_options_container.top
			{
				bottom: 45px;
				top: auto;
			}
		.STFUI_select .STFUI_select_options_container .STFUI_select_item
		{
			cursor: pointer;
			padding: 9px 50px 11px 15px;
			color: #888;
			-webkit-tap-highlight-color: transparent;
			transition: background 0.5s, color 0.5s;
		}
			.STFUI_select .STFUI_select_options_container .STFUI_select_item.active
			{
				color: #4186f3;
				background: #f4f8ff;
			}
			.STFUI_select .STFUI_select_options_container .STFUI_select_item:last-child
			{
				border-radius: 0 0 10px 10px;
			}
				.STFUI_select .STFUI_select_options_container .STFUI_select_item:last-child::after
				{
					content:"";
					height: 10px;
					width: 100%;
					display: block;
				}
			.STFUI_select .STFUI_select_options_container .STFUI_select_item:first-child
			{
				border-radius: 10px 10px 0 0;
			}
				.STFUI_select .STFUI_select_options_container .STFUI_select_item:first-child::before
				{
					content:"";
					height: 10px;
					width: 100%;
					display: block;
				}
		.STFUI_select .STFUI_select_options_container .STFUI_select_item:hover
		{
			color: #333;
		}

.STFUI_table
{
    border-collapse: collapse;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}
    .STFUI_table > tr
    {
        border-collapse: collapse;
    }
        .STFUI_table > tr:first-child
        {
            
        }
            .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td
            {
                background: #f8f6ff;
                color: #666;
            }
            .STFUI_table > tr.STFUI_table_header > td,
            .STFUI_table.STFUI_STYLE_striped > tr.STFUI_table_header > td
            {
                padding: 20px;
                background: #6f7bdb;
                text-shadow: 0 2px 5px #555;
                color: white;
            }
                .STFUI_table > tr:first-child > td:first-child
                {
                    border-top-left-radius: 10px;
                }
                .STFUI_table > tr:first-child > td:last-child
                {
                    border-top-right-radius: 10px;
                }
                .STFUI_table > tr:last-child > td:first-child
                {
                    border-bottom-left-radius: 10px;
                }
                .STFUI_table > tr:last-child > td:last-child
                {
                    border-bottom-right-radius: 10px;
                }
        .STFUI_table > tr > td
        {
            border-collapse: collapse;
            background: white;
            padding: 15px 20px;
            color: #888;
        }
            .STFUI_table > tr > td.STFUI_COLOR_default
            {
                background: white;
                color: #888;
            }
                .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td.STFUI_COLOR_default
                {
                    background: #f8f6ff;
                    color: #666;
                }
            .STFUI_table > tr > td.STFUI_COLOR_disabled
            {
                background: #eee;
                color: #aaa;
            }
                .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td.STFUI_COLOR_disabled
                {
                    color: #888;
                    background: #ddd;
                }
            .STFUI_table > tr > td.STFUI_COLOR_success
            {
                color: white;
                background: #58bf41;
            }
                .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td.STFUI_COLOR_success
                {
                    color: white;
                    background: #479d34;
                }
            .STFUI_table > tr > td.STFUI_COLOR_warning
            {
                color: white;
                background: #dba119;
            }
                .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td.STFUI_COLOR_warning
                {
                    color: white;
                    background: #ae7e0f;
                }
            .STFUI_table > tr > td.STFUI_COLOR_danger
            {
                color: white;
                background: #bf4141;
            }
                .STFUI_table.STFUI_STYLE_striped > tr:nth-child(2n+1) > td.STFUI_COLOR_danger
                {
                    color: white;
                    background: #8e2828;
                }

.STFUI_toggle
{
	width: 60px;
	height: 33px;
	background: white;
	box-shadow: 0 0 1px #0003, 0 0 10px #0002, 0 3px 4px #0000001e;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
    .STFUI_toggle .value
    {
        width: 19px;
        height: 19px;
        background: white;
        box-shadow: 0 0 1px #0002, 0 0 10px #0001, 0 3px 4px #0000001e;
        border-radius: 6px;
        cursor: pointer;
        position: absolute;
        top: 7px;
        left: 7px;
        -webkit-tap-highlight-color: transparent;
        transition: left 0.2s, background 0.2s, box-shadow 0.2s;
    }
        .STFUI_toggle.true .value
        {
            box-shadow: 0 3px 4px #8cb5f4;
            background: #4186f3;
            left: 34px;
        }

.STFUI_toggle_button
{
	width: 200px;
	height: 24px;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	transition: all 0.2s;
	box-shadow: 0 0 4px #888;
	color: white;
	background: #4186f3;
	font-size: 20px;
	border-radius: 3px;
	padding: 10px 20px;
	margin: 20px 5px;
}
	.STFUI_toggle_button .STFUI_toggle_button_item
	{
		width: auto;
		text-align: center;
		position: absolute;
		top: 50%;
	}
	.STFUI_toggle_button .STFUI_toggle_button_item.hidden
	{
		transform: translate(-50%, -50%) scale(0);
		left: 0%;
		animation: custom_toggle_button_hide 0.2s;
	}
		@keyframes custom_toggle_button_hide
		{
			0%
			{
				transform: translate(-50%, -50%) scale(1);
				left: 50%;
				opacity: 1;
			}
			100%
			{
				transform: translate(-50%, -50%) scale(0);
				left: 100%;
				opacity: 0;
			}
		}
	.STFUI_toggle_button .STFUI_toggle_button_item.visible
	{
		transform: translate(-50%, -50%) scale(1);
		left: 50%;
		animation: custom_toggle_button_show 0.2s;
	}
		@keyframes custom_toggle_button_show
		{
			0%
			{
				transform: translate(-50%, -50%) scale(0);
				left: 0%;
				opacity: 0;
			}
			100%
			{
				transform: translate(-50%, -50%) scale(1);
				left: 50%;
				opacity: 1;
			}
		}