:root{
	--default-color: #2a508f;
	--default-hover-color: #2058b5;
}

*{
	font-family: 'LineSeed', 'LineSeedTH';
	box-sizing: border-box;
	scrollbar-width: thin;
}

input.detail, select.detail, textarea.detail{
	background: #fff;
    /* border: none; */
    /* color: gray; */
	border: 1px dashed #d1d5db;
    opacity: 1;
    appearance: none;
}

textarea{
	min-height: 200px;
}

video{
	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	border-radius: .375rem;
}

.default-color{
	background-color: var(--default-color);
}

.default-color:hover{
	background-color: var(--default-hover-color);
}

.selected{
	border-radius: .25rem;
    --tw-text-opacity: 1;
    /* color: var(--default-color); */
	color: #4f46e5;
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.error, .error input, .error select, .error textarea{
	color: red;
}

.error input, .error select, .error textarea{
	border-color: red;
}

@keyframes slideInFromLeft{
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slideInFromRight{
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slideInFromTop{
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}
	100% {
		transform-origin: top;
		transform: scaleY(1);
	}
}

@keyframes slideInFromBottom{
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}

.animate-slide-in-left{
	animation: slideInFromLeft 0.2s ease-out;
}

.animate-slide-in-right{
	animation: slideInFromRight 0.2s ease-out;
}

.animate-slide-in-top{
	animation: slideInFromTop .3s ease-out;
}

.animate-slide-in-bottom{
	animation: slideInFromBottom 0.2s ease-out;
}

#sidebar{
	transition: .2s;
	/* min-width: 16rem; */
}

#sidebar li.letter{
	transition: .2s;
}

#sidebar.less{
	width: 76px;
}

#sidebar.less nav{
	overflow: hidden !important;
}

#sidebar.less #logo, #sidebar.less #title{
	display: none;
}

#sidebar.less #menu{
	margin: auto;
}

#sidebar.less li.letter{
	font-size: 10px;
	text-align: center;
}

#sidebar.less li.menu{
	width: 43.19px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
	background: rgba(243,244,246, 1);
}

#sidebar.less li.menu.logout{
	padding: .5rem;
}

#sidebar.less div.menuLetter{
	visibility: hidden;
	display: block;
    width: 1ch;
	white-space: nowrap;
	padding: 0;
}

#sidebar.less div.menuLetter::first-letter{
	visibility: visible;
}

#sidebar .menuList, #sidebar-mobile .menuList{
	height: 3px;
	/* background: linear-gradient(90deg, rgba(189,186,245,1) 0%, rgba(79,70,229,1) 30%); */
	background-color: var(--default-color);
	width: 25px;
}

#sidebar.less li.menu:hover{
	background: #d9d9d9;
	transition: .2s;
}

#sidebar.less li.menu#logout:hover{
	background: #ffd5d5;
}

#datacontainer #form_grid, #datacontainer #detail_grid{
	max-height: calc(100vh - 174px);
}

#datacontainer #form_title , #datacontainer #detail_title{
	border-radius: .375rem .375rem 0 0;
}

#datacontainer #operation{
	border-radius: 0 0 .375rem .375rem;
}

#form_form_container.maximize, #detail_detail_container.maximize{
	position: fixed;
	right: 0;
	transition: .2s;
}

#form_form_container, #detail_detail_container{
	width: 100%;
}

#datacontainer_table{
	border-radius: 0 0 .375rem .375rem;
}

#sidebar #sidebar_menu{
	min-height: calc(100vh - 150px);
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}

#sidebar-menu-mobile .menu{
	border: 1px dashed #2a508f;
	border-radius: .375rem;
}

#sidebar-nav-mobile .logout{
	border: 1px dashed red;
	border-radius: .375rem;
}

#sidebar-menu-mobile .menu.selected{
	background: #2a508f;
    color: #fff;
}

th{
	white-space: nowrap;
}

.ql-editor{
	min-height: 200px;
	overflow: hidden !important;
    height: fit-content !important;
}

.ql-snow .ql-tooltip{
	left: calc(50% - (329.92px / 2)) !important;
}

.ql-created.ql-editor{
	overflow: hidden;
}

.ql-editor .ql-video{
	width: 100%;
	height: 100%;
    aspect-ratio: 16 / 9;
}

.spinner {
	width: 130px;
	height: 130px;
	display: grid;
	border: 4.5px solid #0000;
	border-radius: 50%;
	border-color: #dbdcef #0000;
	animation: spinner-e04l1k 1s infinite linear;
}

.spinner::before,
.spinner::after {
	content: "";
	grid-area: 1/1;
	margin: 2.2px;
	border: inherit;
	border-radius: 50%;
}

.spinner::before {
	border-color: #474bff #0000;
	animation: inherit;
	animation-duration: 0.5s;
	animation-direction: reverse;
}

.spinner::after {
   	margin: 8.9px;
}

@keyframes spinner-e04l1k {
	100% {
		transform: rotate(1turn);
	}
}

.wave span{
	display: inline-block;
	animation: wave 1.2s infinite ease-in-out;
}

@keyframes wave {
	0%, 100% { transform: translateY(0); }
	90% { transform: translateY(-8px); }
}

.spinner-basic {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(farthest-side, #00bc7d 94%,#0000) top/9px 9px no-repeat,
			conic-gradient(#0000 30%, #00bc7d);
	-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
	animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
   100% {
      transform: rotate(1turn);
   }
}

.athena-quill-toolbar .ql-toolbar.ql-snow{
	border-bottom: none;
}

.ql-editor.ql-web-html{
	min-height: unset;
}

@media screen and (max-width: 640px){
	*{
		font-size: 13px;
	}

	#sidebar.less{
		width: 63px;
		padding: 10px;
	}

	.group_input{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	#datacontainer_form{
		font-size: 13px;
	}

	.inputBox{
		/* padding-bottom: 10px;
		margin-bottom: 10px; */
		width: 100% !important;
        /* margin: 0; */
        padding: 0;
	}

	.inputBox input, .inputBox select, .inputBox textarea{
		width: 150px;
	}

	#datacontainer #form_title, #datacontainer #detail_title{
		padding: 10px;
	}

	#datacontainer #form_grid, #datacontainer #detail_grid{
		padding: 10px;
		/* max-height: calc(100vh - 94px) !important; */
		/* min-height: calc(100vh - (50.25px + 40.25px)) !important; */
		min-height: calc(100vh - 146px) !important;
	}

	#mainContainer{
		padding: 0;
		padding-left: 1px;
		padding-top: 55px;
	}

	#datacontainer #operation{
		padding: 10px;
		border-radius: 0;
	}

	#table_container{
		padding: 10px;
	}
	
	.filter_container #form_grid_container{
		overflow: auto;
		padding: 10px;
	}

	.filter_header{
		padding: 10px;
	}

	.filter_operation{
		padding: 10px;
	}

	#dialog .dialog_container .dialog_content.size_s,
	#dialog .dialog_container .dialog_content.size_m,
	#dialog .dialog_container .dialog_content.size_l,
	#dialog .dialog_container .dialog_content.size_xl,
	#dialog .dialog_container .dialog_content.size_xxl{
		width: 100%;
	}

	#form_form_container, #detail_detail_container{
		width: 100%;
	}
}

@media screen and (max-width: 768px){
	#mainContainer{
		padding: 0;
		padding-inline: 10px;
		padding-top: 57px;
	}
}