/** Default  Font **/
@import url("https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap");

/** Japanese  Font **/
/*
@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap");
*/

/** Icons (BoxIcons) **/
@import url("https://cdn.reifycs.net/css/boxicons-subset.min.css");
/* @import url("https://www.reifycs.local/css/boxicons-subset.min.css"); */

/** Icons (Font Awesome) **/
/* @import url("https://www.reifycs.local/css/fontawesome-subset.css"); */

/* Set variables */
:root {
	/** Note: the font files specified in the font CSS are fixed on the CDN site. **/
	/** boxicons & font awaesome **/

	/*
	--home-img: url("https://www.reifycs.local/img/home.jpg");
	--theme-orange-img: url("https://www.reifycs.local/img/jumbotron_orange.webp");
	--theme-green-img: url("https://www.reifycs.local/img/jumbotron_green.webp");
	--theme-blue-img: url("https://www.reifycs.local/img/jumbotron_blue.webp");
	--theme-gray-img: url("https://www.reifycs.local/img/jumbotron_gray.webp");
	--theme-red-img: url("https://www.reifycs.local/img/jumbotron_red.webp");
	*/
	--home-img: url("https://cdn.reifycs.net/img/home.jpg");
	--theme-orange-img: url("https://cdn.reifycs.net/img/jumbotron_orange.webp");
	--theme-green-img: url("https://cdn.reifycs.net/img/jumbotron_green.webp");
	--theme-blue-img: url("https://cdn.reifycs.net/img/jumbotron_blue.webp");
	--theme-gray-img: url("https://cdn.reifycs.net/img/jumbotron_gray.webp");
	--theme-red-img: url("https://cdn.reifycs.net/img/jumbotron_red.webp");
}

/*  ------------------------ */
/* -- Page Theme Part -- */
/*  ------------------------ */
/* Top-page theme */
#themeTop,
.themeTop {
	/*  
    --main-theme-color: #279B8F;
    --main-theme-color-rgb: 39, 155, 143;
    --main-theme-focused-color: #1C6E66;
    --main-theme-active-color: #2EB4A7;
    --main-theme-disabled-color: #7EDED5;
    */
	--main-theme-color: #605c5c;
	--main-theme-color-rgb: 96, 92, 92;
	--main-theme-focused-color: #3b3838;
	--main-theme-active-color: #706666;
	--main-theme-disabled-color: #c5c3c3;
}

#themeTop .home {
	/* background: url(../img/home.jpg) no-repeat center center fixed; */
	/* background: url( var(--cdn-url) + '/img/home.jpg') no-repeat center center fixed; */
	background: var(--home-img) no-repeat center center fixed;
	background-size: cover;
	color: white;
}

#themeTop .home .btn-home {
	color: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.4);
	border-width: 2px;
}

#themeTop .home .btn-home:hover {
	color: black;
	background-color: rgba(255, 255, 255, 0.9);
}

/* Orange page theme */
#themeOrange,
.themeOrange {
	--main-theme-color: #f59e00;
	--main-theme-color-rgb: 245, 158, 0;
	--main-theme-focused-color: #ee7800;
	--main-theme-active-color: #ff8000;
	--main-theme-disabled-color: #ffa143;
}

#themeOrange .jumbotron-image {
	background: var(--theme-orange-img) no-repeat right center fixed;
	background-size: cover;
	color: white;
	min-height: 740px;
}

/* Green page theme */
#themeGreen,
.themeGreen {
	--main-theme-color: #376729;
	--main-theme-color-rgb: 55, 103, 41;
	--main-theme-focused-color: #0a3c1f;
	--main-theme-active-color: #106032;
	--main-theme-disabled-color: #68b47c;
}

#themeGreen .jumbotron-image {
	background: var(--theme-green-img) no-repeat right center fixed;
	background-size: cover;
	color: white;
	min-height: 740px;
}

/* Blue page theme */
#themeBlue,
.themeBlue {
	--main-theme-color: #2f5597;
	--main-theme-color-rgb: 47, 85, 151;
	--main-theme-focused-color: #203864;
	--main-theme-active-color: #4874c4;
	--main-theme-disabled-color: #8faadc;
}

#themeBlue .jumbotron-image {
	background: var(--theme-blue-img) no-repeat right center fixed;
	background-size: cover;
	color: white;
	min-height: 520px;
}

/* Gray page theme */
#themeGray,
.themeGray {
	--main-theme-color: #605c5c;
	--main-theme-color-rgb: 96, 92, 92;
	--main-theme-focused-color: #3b3838;
	--main-theme-active-color: #706666;
	--main-theme-disabled-color: #c5c3c3;
}

#themeGray .jumbotron-image {
	background: var(--theme-gray-img) no-repeat right center fixed;
	background-size: cover;
	color: white;
	min-height: 520px;
}

/* Red page theme */
#themeRed,
.themeRed {
	--main-theme-color: #ba2718;
	--main-theme-color-rgb: 186, 39, 24;
	--main-theme-focused-color: #7b1a10;
	--main-theme-active-color: #e33b29;
	--main-theme-disabled-color: #ec766a;
}

#themeRed .jumbotron-image {
	background: var(--theme-red-img) no-repeat right center fixed;
	background-size: cover;
	color: white;
	min-height: 520px;
}

.common-modal {
	--main-theme-color: #2f5597;
	--main-theme-color-rgb: 47, 85, 151;
	--main-theme-focused-color: #203864;
	--main-theme-active-color: #4874c4;
	--main-theme-disabled-color: #8faadc;

	/* Bootstrap default: #dee2e6; */
	/* --bs-border-color: #dee2e6; */
	--bs-border-color: #c4cbd2;
}

/*  ------------------------ */
/* -- Contact us Design Part -- */
/*  ------------------------ */
#contactus {
	background-color: #f6f6f6;
	color: #081c3a;
}

.colored-title {
	color: var(--main-theme-focused-color);
}

/* Page font */
body {
	font-family: "Poppins", "M PLUS Rounded 1c";
}

/* Common logo image */
.home-logo {
	margin-bottom: -2px;
}

/*  ------------------------ */
/* -- Footer Design Part -- */
/*  ------------------------ */
.border-bottom-muted {
	border-bottom: 0.15px var(--bs-border-style) rgba(108, 117, 125, 0.35) !important;
}

footer li a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.5) !important;
}

footer li a:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}

.footer-icon-link {
	color: rgba(255, 255, 255, 0.5) !important;
}

.footer-icon-link:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}

/*  ------------------------ */
/* -- Navbar Dropdown Menu Design Part -- */
/*  ------------------------ */
#navbarNav .dropdown-menu-transparent {
	--bs-dropdown-color: #dee2e6;
	--bs-dropdown-bg: transparent;
	--bs-dropdown-border-color: var(--bs-border-color-translucent);
	--bs-dropdown-box-shadow: ;
	--bs-dropdown-link-color: #dee2e6;
	--bs-dropdown-link-hover-color: #fff;
	--bs-dropdown-divider-bg: var(--bs-border-color-translucent);
	--bs-dropdown-link-hover-bg: transparent;
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-active-bg: #0d6efd;
	--bs-dropdown-link-disabled-color: #adb5bd;
	--bs-dropdown-header-color: #adb5bd;

	background-color: transparent;
}

@media (min-width: 992px) {
	#navbarNav .dropdown-menu-transparent {
		background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
	}
}

.dark-theme-link {
	/* color: #0070C0; */
	/* color: #0d6efd; */
	color: #99ccff;
	text-decoration: none;
}

.dark-theme-link:hover {
	/* color: #0a58ca; */
	color: #3399ff;
}

#navbarNav .nav-dropdown-link {
	color: var(--bs-nav-link-color);
}

#navbarNav .nav-dropdown-link:hover,
#navbarNav .nav-dropdown-link:focus {
	color: var(--bs-nav-link-hover-color);
	background-color: transparent;
}

#navbarNav .nav-dropdown-link.disabled {
	color: var(--bs-nav-link-disabled-color);
	pointer-events: none;
	cursor: default;
}

#navbarNav .nav-dropdown-link.active {
	color: var(--bs-nav-tabs-link-active-color);
	background-color: var(--bs-nav-tabs-link-active-bg);
	border-color: var(--bs-nav-tabs-link-active-border-color);
}

.header-icon {
	margin-left: 3px;
	margin-bottom: -13px;
}

/* Overwrite navbar color */
.bg-dark {
	--bs-bg-opacity: 0.8;
	background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-footer {
	--bs-bg-opacity: 0.92;
	background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

/* Overwrite navbar-toggler button border */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
	border: 0.1px solid var(--bs-navbar-brand-color);
}

.dropdown-menu-transparent {
	background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
	border-color: transparent;
	border-radius: 0px;
}

.navbar-dark .navbar-toggler {
	border-color: transparent !important;
}

/*  ------------------------ */
/* -- Text and Button colors Part -- */
/*  ------------------------ */
.bg-primary {
	background-color: var(--main-theme-color) !important;
	border-color: var(--main-theme-color);
}

.border-primary {
	border-color: var(--main-theme-color) !important;
}

.text-primary {
	color: var(--main-theme-color) !important;
}

.btn-primary {
	background-color: var(--main-theme-color);
	border-color: var(--main-theme-color);
}

.btn-primary:disabled {
	background-color: var(--main-theme-disabled-color);
	border-color: var(--main-theme-disabled-color);
	color: white;
}

.btn-primary:hover {
	background-color: var(--main-theme-focused-color);
	border-color: var(--main-theme-focused-color);
	color: white;
}

.btn-primary:active {
	background-color: var(--main-theme-active-color) !important;
	border-color: var(--main-theme-active-color) !important;
	color: white;
}

.btn-outline-primary {
	border-color: var(--main-theme-color);
	color: var(--main-theme-color);
}

.btn-outline-primary:disabled {
	border-color: var(--main-theme-disabled-color);
	color: var(--main-theme-disabled-color);
}

.btn-outline-primary:hover {
	border-color: var(--main-theme-focused-color);
	background-color: var(--main-theme-focused-color);
	color: white;
}

.btn-outline-primary:active {
	background-color: var(--main-theme-active-color) !important;
	border-color: var(--main-theme-active-color) !important;
	color: white;
}

/* -- form focused color -- */
.form-control:focus {
	border-color: var(--main-theme-color);
	box-shadow: 0px 0px 2px 2px var(--main-theme-color);
}

/* -- FAQ accordion design -- */
.accordion-button {
	background-color: white !important;
	color: var(--main-theme-color) !important;
	font-weight: bold;
}

.accordion-button.collapsed {
	background-color: white !important;
	color: var(--bs-text);
	font-weight: normal !important;
}

.accordion-button:focus {
	box-shadow: none;
	border-color: var(--main-theme-color);
	color: var(--main-theme-color);
	font-weight: bold;
}

.accordion-button:hover {
	color: var(--main-theme-color);
	font-weight: bold;
	box-shadow: 0px 0px 4px 4px var(--main-theme-color);
	z-index: 100;
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* -- Table design -- */
table i {
	color: var(--main-theme-color);
}

/* -- Carousel design -- */
.carousel .carousel-indicators button {
	width: 12px;
	height: 12px;
	border-radius: 100%;
	background-color: var(--main-theme-color);
}

.carousel-indicators {
	bottom: -35px;
}

/* -- Icon background for the footer SNS links -- */
.link-icon-box {
	background-color: #3e4348;
	border-color: #3e4348;

	margin-right: 5px;
	margin-bottom: 10px;
}

/* -- hr tag for section separator line -- */
main hr {
	margin-top: 35px;
	margin-bottom: 0px;
}

.hr-d-none {
	border-style: none;
}

section {
	margin-top: 30px;
	padding-top: 30px;
}

.last-section {
	margin-top: 0px;
	padding-top: 30px;
	padding-bottom: 35px;
}

.last-section h1 {
	margin-top: 30px;
}

.d-hidden {
	visibility: hidden;
}

/*  ------------------------ */
/* -- Modal Window Part -- */
/*  ------------------------ */
.close-boxicon {
	color: #cbcbcc;
}

.close-boxicon:hover {
	color: #000010;
}

.message-boxicon {
	color: var(--main-theme-color);
	background: rgba(var(--main-theme-color-rgb), 0.15);
	border-radius: 50%;
	padding: 12px;
	text-align: center;
}

/* Privacy Policy */
#privacy_policy {
	margin-top: 10px;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 0px;
}

#privacy_policy p {
	/* text-align: justify; */
	line-height: 1.5em;
}

/*  ------------------------ */
/* -- Cookie Consent Part -- */
/*  ------------------------ */
.cookie-consent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 0.8em;
	color: #fff;
	background: rgba(59, 113, 202, 0.88);
	padding: 1.2em;
	border: solid rgba(59, 113, 202, 1) 0.2px;
	box-sizing: border-box;
	visibility: hidden;
}

.cookie-consent.is-shown {
	visibility: visible;
}

.cookie-consent a {
	color: lightblue !important;
}

.cookie-agree {
	color: lightblue;
}

.cookie-agree:hover {
	color: white;
	cursor: pointer;
}

/*  ------------------------ */
/* -- Text Alignment Part -- */
/*  ------------------------ */
.text-justify {
	text-align: justify;
}

/* Cokie consent animation to hide */
.cc-hide {
	animation: hide 1s linear 0s;
	animation-fill-mode: forwards;
}

@keyframes hide {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}

/*  ------------------------ */
/* -- Text Decolation Part -- */
/*  ------------------------ */
a {
	text-decoration: none;
}

.body-link {
	cursor: pointer;
	color: var(--main-theme-color);
	text-decoration: none;
	margin-left: 2px;
	margin-right: 2px;
	font-weight: bold;
}

.body-link:hover {
	color: var(--main-theme-disabled-color);
}

/* Tutorial Contents */
.tutorial-card {
	margin-top: 30px;
}

.card-img {
	/* margin-top: -30px; */
	width: 12%;
	min-width: 35px;
	max-width: 50px;
}

.ul-square {
	list-style-type: square;
	margin-left: -15px;
}

/* Font size */
.fs-095 {
	font-size: 0.95em !important;
}

/* Font color */
.code-color {
	color: #d63384;
}

/*  ------------------------ */
/* -- Image Decolation Part -- */
/*  ------------------------ */
.rounded-circle-border {
	border-color: #f8f8f8 !important;
	border-width: 10px !important;
}

/*  ------------------------ */
/* -- Modal muvie part -- */
/*  ------------------------ */
.modal-movie-content {
	background-color: transparent;
	border-color: transparent;
}

.modal-movie-btn-close {
	margin-right: -15px !important;
	margin-bottom: -10px !important;
	width: 5px !important;
	height: 5px !important;
}

/*  ------------------------ */
/* -- Login page & Modal login Design Part -- */
/*  ------------------------ */
.alert-danger a {
	text-decoration: none;
	color: #a52834;
	font-weight: bold;
}

.text-justify {
	text-align: justify;
}

.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 4.5px;
	background-color: #cccccc;
}

.dot-active {
	/* background-color: var(--main-theme-active-color); */
	background-color: var(--main-theme-color);
}

.success-ficon {
	margin-top: -5px;
	margin-left: -30px;
	color: #198754;
	font-size: 2.5rem !important;
	font-weight: 900 !important;
}

.action-messagebox {
	border-radius: 7px 7px 7px 7px;
	background: #000000 !important;
	transition: opacity 1s, visibility 1s;
	color: white;
	margin: 0 auto;
	max-width: 320px !important;
	padding: 10px;
	opacity: 0;
	visibility: hidden;
}

.action-messagebox.is-shown {
	opacity: 1;
	visibility: visible;
}

.resend-vcode-link * {
	color: var(--main-theme-active-color);
}

.is-disabled * {
	color: #6c757d;
	display: inline-block;
	/* For IE11/ MS Edge bug */
	pointer-events: none;
	text-decoration: none;
}

.alert-with-icon {
	padding-left: 3.3rem;
	justify-content: center;
	align-items: center;
	text-align: left !important;
}

.alert-with-icon::before {
	content: "";
	position: absolute;
	left: 0.8rem;
	width: 20px;
	height: 20px;
	background: #a52834;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>')
		no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>')
		no-repeat center / contain;
}

/*  ------------------------ */
/* -- Privacy Policy -- */
/*  ------------------------ */
#privacy_policy ul {
	list-style-type: square;
	margin-left: -10px !important;
}
#privacy_policy li {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 10px;
	line-height: 1.4;
}