@import "variables.less";

* , :before, :after { .transition(all, .2s, linear); }

.bg { background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(223,233,243,1) 100%); background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%); background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfe9f3',GradientType=0 ); }
body {
	overflow-y: overlay; margin: 0; min-height: 100vh; .bg;
	&::-webkit-scrollbar { width: 13px; }
	&::-webkit-scrollbar-thumb { border-radius: 8px; border: 4px solid transparent; background-clip: content-box; background-color: rgb(132 132 132 / 50%); }
}

#login_box {
	width: 90%;
	form {
		padding: 1.5rem 2rem; background-clip: border-box; border: 0 solid transparent; border-radius: 0.25rem; box-shadow: 0 0 0.875rem 0 rgb(53 64 82 / 5%);
		&.form_og { padding: 0; }
		.in_group {
			display: flex; flex-wrap: wrap; align-items: stretch;
			input { width: 1%; flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
			.group {
				margin-left: -1px; display: flex;
				a { border-top-left-radius: 0; border-bottom-left-radius: 0; line-height: 180%; }
			}
		}
	}
	.btns a img { width: 30px; height: 30px; }
	
	@media screen and (max-width: 640px) {
		form {
			padding: .5rem 2rem;
			&.form_og { padding: 0; }
		}
	}
	@media screen and (min-width: 551px) { width: 500px; }
}
#lodbg {
	text-align: center;
	.loader-circle { .circular(50px); border: 2px rgba(0, 0, 0, .6) solid; border-left-color: rgb(237 243 248); display: inline-block; .animation(circle infinite .75s linear); }
	@keyframes circle { 0% { .rotate(0); } 100% { .rotate(360deg); } }
	@-webkit-keyframes circle { 0% { .rotate(0); } 100% { .rotate(360deg); } }
}
.list_box {
	li {
		position: relative; border-bottom: 1px @g_200 solid; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch;
		p { display: flex; align-items: stretch; justify-content: center; }
        label , font { position: relative; padding: .3rem .7rem; width: 100%; display: flex; }
		font { padding: .8rem .7rem; align-items: center; line-height: 1.3; font-weight: 300; font-size: 16px; flex-wrap: wrap; }
		@media screen and (min-width: 769px){
			p { flex-wrap: wrap; }
			label { background: @white; border-bottom: 2px @g_200 solid; display: none; }
			&:first-child {
				p { align-items: flex-start; }
				label { display: flex; }
			}
			&:last-child { border-bottom: 0; }
			&:nth-child(2n) { background: @g_100; }
			&:hover { background: @g_200; }
		}
		@media screen and (max-width: 768px){
			margin: 0 .7rem 1rem; border: 1px @g_200 solid;
			p {
				align-items: center; justify-content: flex-start; border-bottom: 1px @g_200 solid;
				label { width: 150px; font-size: 16px; }
				&:last-child { border-bottom: 0; }
			}
			&:first-child { margin-top: 1rem; }
			&:nth-child(2n) { background: @g_100; }
		}
	}
}