html,
body {
	height: 100%;
}

a {
	color: #333;
	text-decoration: none;
}

.max-width {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.bg-lightgray {
	background-color: #f7f7f7;
}

.bg-white {
	background-color: #fff;
}

.left_box {
	float: left;
	text-align: left;
}
.left_box2 {
	float: left;
	text-align: left;
	margin-left: 3px;
}
.right_box {
	float: right;
	text-align: right;
}
.box_w {
	width: 70%;
}

.form-signin {
	align-items: center;
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: auto;
}

.form-signin .checkbox {
	font-weight: 400;
}

.form-signin .form-floating:focus-within {
	z-index: 2;
}

.form_line {
	border: 1px;
	border-bottom-style: solid;
	border-top-style: none;
	border-left-style: none;
	border-right-style: none;
}
.text_box {
	padding: 13px 0;
}
.btn-primary {
	color: #fff;
	background-color: #41a6f9;
	border-color: #41a6f9;
}

.coyright-navigation {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 0;
	padding: 3px 0;
	font-size: 0.6rem;
	color: #b8b6b6;
}

.main-navigation {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 24px;
	padding: 8px 0;
}

.main-navigation div.row {
	width: 90%;
	margin: 0 auto;
}

.main-navigation img {
	width: 40%;
	opacity: 0.6;
}

.main-navigation div {
	font-size: 0.6rem;
	color: #b8b6b6;
}

.main-navigation div.active img {
	opacity: 1;
}

.main-navigation div.active div {
	color: #1887d7;
}

.class_light {
	color: #c0cf92;
}
.class_light.normal {
	color: #64846b;
}
.class_light.empty {
	color: #c99071;
}
.class_light.driving {
	color: #f7b852;
}
.class_light.offline {
	color: #cccccc;
}
.class_number_bg {
	color: #fff;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	font-size: 0.8rem;
	background-color: #61b7d9;
	display: inline-block;
}
.list_but {
	padding-bottom: 10px;
}
.list_but img {
	width: 60%;
}
.list_but div.bold {
	margin-top: -5px;
}

.form-info {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	padding-bottom: 90px;
	margin: 0 auto;
	overflow-x: hidden;
}

.form-info {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

.form-info::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}

nav ul {
	list-style: none;
	padding: 0;
	color: #333;
	margin: 0;
}

nav li {
	display: inline-block;
	width: calc(100vw / 3.4);
	padding: 5px 0;
}

nav li a {
	color: #333;
}
nav li a img {
	width: 40%;
}
nav p {
	font-size: 0.9em;
}

nav li:hover {
	transform: scale(1.2);
	transition: 1s;
}

/*bootstrap*/
.form-control {
	border-radius: 0rem;
	color: #000;
}

.row > * {
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) / 8);
	padding-left: calc(var(--bs-gutter-x) / 8);
}

.hide {
	display: none !important;
}

.info-user-icon {
	width: 55px;
	height: 55px;
}

.info-user-name {
	line-height: 55px;
}

.bold {
	font-weight: bold !important;
}

.btn-function > img {
	opacity: 1;
}

.btn-function > div {
	color: #1887d7;
}
.btn-function.disabled > img {
	opacity: 0.6;
}

.btn-function.disabled > div {
	color: #aaaaaa;
}

.fs12 {
	font-size: 12px;
}

.fs14 {
	font-size: 14px;
}

.fs16 {
	font-size: 16px;
}

.fs18 {
	font-size: 18px;
}

.fs20 {
	font-size: 20px;
}

.fs22 {
	font-size: 22px;
}

.fs24 {
	font-size: 24px;
}

.card {
	border: 1px solid #e7e7e7;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	border-radius: 8px;
}

.card-close,
.history-delete {
	position: absolute;
	top: 3px;
	right: 9px;
	font-size: 15px;
	cursor: pointer;
}

.input-score-title {
	font-family: 'Roboto Mono';
	font-weight: bold;
}

.input-score {
	text-align: center;
	width: 55px;
	height: 55px;
	border-radius: 5px;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
}

.btn-primary,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:visited {
	background-color: #1887d7;
	border-color: #1887d7;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	padding: 6px 60px;
}

.flex {
	display: flex;
}

.lightgray {
	color: #a7a7a7;
}

.mr-3 {
	margin-right: 3px;
}

.Roboto-Mono {
	font-family: 'Roboto Mono';
}

.hide {
	display: none;
}

.w-other {
	width: calc(50% - 12px);
	min-height: 1px;
}

.gender-card {
	cursor: pointer;
	opacity: 0.4;
}

.gender-card.active {
	opacity: 1;
}

.white-border-circle {
	box-sizing: border-box;
	border-radius: 100%;
	border: 5px solid #ffffff;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.switch-button {
	cursor: pointer;
}

@media (min-width: 600px) {
	#bottom-bar {
		max-width: 330px;
	}

	.page-content {
		padding-top: 10vh;
	}

	.main-navigation {
		position: relative;
	}

	.coyright-navigation {
		position: relative;
		padding: 0;
		margin-top: -15px;
	}

	#home-block,
	#history-block,
	#info-block {
		min-height: 750px;
		max-height: 750px;
	}
}

@media (min-width: 600px) and (max-height: 800px) {
	.page-content {
		padding-top: 0;
	}
}