/* ========================================================
  MKF baseのCSS
=========================================================== */

/* ============================================== */
/* 共通色設定                                     */
/* ============================================== */
* {
	--base-main-bg-color			: #f3f3f3;
	--base-button-bg-color			: #ca5599;
	--base-button-font-color		: #FFFFFF;
	--base-button-hover-bg-color	: #ca5599;
	--base-button-hover-font-color	: #FFFFFF;
	--base-label-bg-color			: #ca5599;
	--base-label-font-color			: #FFFFFF;

	--base-navbar-bg-color			: #ca5599;
	--base-navbar-font-color		: #FFFFFF;
}

*, *::before, *::after {
  box-sizing: border-box;
}


/* ============================================== */
/*  タグ共通CSS設定                               */
/* ============================================== */
body,html {
	margin				: 0;
	padding				: 0!important;
	box-sizing			: border-box;
	background-color	: var(--base-main-bg-color);
}
.card-header {
	padding				: 6px;
}
.card-body {
	padding				: 6px;
}

.container {
	padding-top			: 20px;
	padding-bottom		: 20px;
}

/* ============================================== */
/*  bootstrapクラス上書き                         */
/* ============================================== */
.navbar {
	background-color	: var(--base-navbar-bg-color);
	padding				: 2px 0;
}

.navbar-brand {
	color				: var(--base-navbar-font-color);
}

.navbar-text {
	color				: var(--base-navbar-font-color);
}


.btn {
	background-color	: var(--base-button-bg-color);
    border-color        : var(--base-button-bg-color);
	color				: var(--base-button-font-color);
}

.btn:focus {
	box-shadow			: none !important;
	outline				: 0px !important;
}
.btn:hover {
	background-color	: var(--base-button-hover-bg-color) !important;
	color				: var(--base-button-hover-font-color) !important;
}
.btn:active {
	background-color	: var(--base-button-hover-bg-color) !important;
	color				: var(--base-button-hover-font-color) !important;
}
.btn-outline-secondary {

    color               : #6c757d;
    border-color        : #6c757d;
    background-color    : #fff;
}

.input-group {

	.input-group-label-left {
		background			: var(--base-label-bg-color);
		color				: var(--base-label-font-color);
		border				: 0 !important;
		border-radius		: 0.25rem 0 0 0.25rem !important;
	}

	.form-control:focus {
		box-shadow			: none !important;
		outline				: 0px !important;
	}

}