/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Version: 2.2.0
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Main Css File
*/
/*@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap");*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');

body, h1, h2, h3, h4, h5, h6 {
	font-family         : "Noto Sans JP", sans-serif;
	font-optical-sizing : auto;
	font-weight         : normal;
	font-style          : normal;
}

.authentication-bg {
	background-image : none;
}

.btn-primary,
.btn-secondary,
.btn-danger {
	min-width : 150px;
}

.sidebar-menu-scroll {
	margin-top : 100px;
}

.sidebar-menu-scroll.no-logo {
	margin-top : 75px;
}

#sidebar-menu ul li a .nav-icon {
	top : -3px;
}

.footer {
	background-color   : transparent;
	border-top         : none;
	-webkit-box-shadow : none;
	box-shadow         : none;
}

#page-header-user-dropdown-v {
	background         : var(--bs-sidebar-bg);
	-webkit-box-shadow : 0 -2px 5px rgba(52, 58, 64, .06);
	box-shadow         : 0 -2px 5px rgba(52, 58, 64, .06);
	border             : 1px solid var(--bs-sidebar-border-color);
	white-space        : nowrap;
	overflow           : hidden;
	width              : 180px;
	padding            : 10px 20px 10px 10px;
	height             : auto;
	margin             : 0 12px;
}

#page-header-user-dropdown-v i {
	padding-top : 5px;
}

#page-header-user-dropdown-v span {
	text-overflow         : ellipsis;
	-webkit-text-overflow : ellipsis;
	-o-text-overflow      : ellipsis;
	white-space           : nowrap;
	overflow              : hidden;
}

.navbar-header .right-logo {
	display : none !important;
	margin  : 0 0 0 auto;
}

#page-main-contents .card-title-icon {
	font-size   : 28px;
	top         : 5px;
	margin      : 0 5px 5px 0;
	line-height : 70%;
}

#page-main-contents .form-err-icon {
	font-size : 21px;
	top       : 3px;
	margin    : 0 5px 0 0;
}

#page-main-contents .card-title-desc {
	padding : 10px 0;
}

#page-main-contents .table {
	margin : 0;
}

form.myForm .form-select .placeholder {
	color   : var(--bs-secondary-color);
	opacity : 1;
}

form.myForm label .badge {
	margin-right : 5px;
}

.bx.icon {
	margin-right : 4px;
	top          : 1px;
}

@media (max-width : 991.98px) {
	#page-main-contents {
		margin : 30px 0 0 0;
	}

	.navbar-header .right-logo {
		display : block !important;
	}

	.navbar-header .logo span.logo-lg {
		display : block !important;
		margin  : 0 0 5px 0;
		padding : 0 13px 0 0;
	}
}

.gridjs-th-content {
	white-space    : break-spaces;
	vertical-align : top;
}

@media (max-width : 600px) {
	.navbar-header .right-logo {
		display : none !important;
	}

	.page-title-box h4 {
		font-size : 16px !important;
	}
}

:root {
	--bs-border-color : #cccccc;
}

[data-bs-theme=light] {
	#idMyForm input,
	#idMyForm textarea,
	#idMyForm select,
	#idMyForm select option {
		background-color : #F8F9FB;
	}
	#idMyForm input[type=checkbox]:checked,
	#idMyForm input[type=radio]:checked{
		border-color: #142245;
		background-color: #142245;
	}
	.btn-primary {
		background-color : #142245;
	}

	.btn-subtle-primary:hover {
		background-color : #142245 !important;
	}
}

[data-bs-theme=dark] {
	#idMyForm input,
	#idMyForm textarea,
	#idMyForm select,
	#idMyForm select option {
		background-color : #1A1D1F;
	}
	#idMyForm input[type=checkbox]:checked,
	#idMyForm input[type=radio]:checked{
		background-color: #1f58c7;
		border-color: #1f58c7;
	}

	.form-control::placeholder {
		opacity : 0.2;
	}

	.gridjs-container {
		color : var(--bs-body-color);
	}

	.gridjs-head {
		margin-bottom : 15px;
		position      : relative;
		z-index       : 1;
	}

	.gridjs-wrapper {
		-webkit-box-shadow : none;
		box-shadow         : none;
		border             : none;
	}

	.gridjs-wrapper::-webkit-scrollbar {
		-webkit-appearance : none;
	}

	.gridjs-wrapper::-webkit-scrollbar:vertical {
		width : 12px;
	}

	.gridjs-wrapper::-webkit-scrollbar:horizontal {
		height : 12px;
	}

	.gridjs-wrapper::-webkit-scrollbar-thumb {
		background-color : rgba(19, 21, 22, 0.075);
		border-radius    : 10px;
		border           : 2px solid var(--bs-border-color);
	}

	.gridjs-wrapper::-webkit-scrollbar-track {
		border-radius    : 10px;
		background-color : var(--bs-secondary-bg);
	}

	.gridjs-table {
		width : 100%;
	}

	th.gridjs-th,
	td.gridjs-td {
		border              : 0px solid var(--bs-border-color);
		border-bottom-width : 2px;
		padding             : 0.75rem 0.75rem;
	}

	th.gridjs-th {
		border-top : 0;
		/*color            : var(--bs-body-color);*/
		/*background-color : var(--bs-table-bg);*/
	}

	th.gridjs-th-sort:focus, th.gridjs-th-sort:hover {
		/*background-color : var(--bs-secondary-bg);*/
	}

	.gridjs-footer {
		-webkit-box-shadow : none;
		box-shadow         : none;
		border             : none;
		border-top         : 0;
	}

	.gridjs-pagination {
		color : var(--bs-body-color);
	}

	.gridjs-pagination .gridjs-pages button {
		border        : none !important;
		border-radius : 30px !important;
		margin        : 0 5px;
		border        : none;
		min-width     : 32px;
		height        : 32px;
		padding       : 0;
		text-align    : center;
		line-height   : 32px;
	}

	.gridjs-pagination .gridjs-pages button:disabled, .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-pagination .gridjs-pages button[disabled] {
		color : var(--bs-secondary-color);
	}

	.gridjs-pagination .gridjs-pages button:hover {
		background-color : var(--bs-tertiary-bg);
		color            : var(--bs-link-color);
	}

	.gridjs-pagination .gridjs-pages button:focus {
		-webkit-box-shadow : none;
		box-shadow         : none;
		margin             : 0 5px !important;
	}

	.gridjs-pagination .gridjs-pages button:last-child:hover, .gridjs-pagination .gridjs-pages button:first-child:hover {
		background-color : transparent;
	}

	.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
		background-color : #1f58c7;
		color            : #fff;
		font-weight      : 500;
		border-color     : #1f58c7;
	}

	input.gridjs-input {
		/*border-color: var(--bs-border-color);*/
		background-color : var(--bs-secondary-bg);
		color            : var(--bs-body-color);
		font-size        : 13px;
		border-radius    : 30px;
	}

	input.gridjs-input:focus {
		-webkit-box-shadow : none;
		box-shadow         : none;
		border-color       : #8face3;
		background-color   : var(--bs-secondary-bg);
	}

	.gridjs-tbody, td.gridjs-td {
		background-color : var(--bs-secondary-bg) !important;
	}

	.gridjs-footer {
		background : var(--bs-secondary-bg);
	}

	.gridjs-pagination .gridjs-pages button {
		background-color : var(--bs-pagination-bg);
	}

	.gridjs-pagination .gridjs-pages button[disabled] {
		background-color : var(--bs-pagination-disabled-bg);
	}
}