/*------------------------------------------ 
Color Setting
--------------------------------------------*/ :root, [data-bs-theme=light] {
  /* Custom */
  --red: #fa8a86; /*--- Red --*/
  --red-rgb: 250, 138, 134;
  --gray-lighter: #fbfbfb; /*--- Lighter Gray --*/
  --gray-lighter-rgb: 251, 251, 251;
  --gray-light: #F3F3F3; /*--- Light Gray --*/
  --gray-light-rgb: 243, 243, 243;
  --gray: #DEDEDF; /*--- Gray --*/
  --gray-rgb: 222, 222, 223;
  --gray-dark: #c9c9c9; /*--- Dark Gray --*/
  --gray-dark-rgb: 201, 201, 201;
  --gray-heavy: #707070; /*--- Heavy Gray --*/
  --gray-heavy-rgb: 112, 112, 112;
  --white: #FFFFFF; /*--- White --*/
  --white-rgb: 255, 255, 255;
  --black: #010000; /*--- Black --*/
  --black-rgb: 1, 0, 0;
  --black-light: #3D3D3D; /*--- Light Black --*/
  --black-light-rgb: 61, 61, 61;
}
/*------------------------------------------ 
Basic
--------------------------------------------*/
body {
  background-color: var(--black) !important;
  color: var(--black);
}
a.basic, a {
  color: var(--gray-dark);
}
a.basic:hover, a:hover {
  color: var(--white);
}
a.basic:focus, a:focus {
  color: var(--white);
}
.text-transparent {
  color: transparent;
}
.text-shadow-lg {
  text-shadow: 0 .25rem .75rem RGBA(var(--black-rgb), .35);
}
.text-shadow-dark {
  text-shadow: 0 .5rem .75rem RGBA(var(--black-rgb), .75);
}
.text-shadow-w {
  text-shadow: 0 .125rem .75rem RGBA(var(--white-rgb), 1);
}
/*------------------------------------------ 
Button
--------------------------------------------*/
.btn-yes {
  background-color: var(--black-light);
  color: var(--white) !important;
}
.btn-yes:focus, .btn-yes:hover {
  background-color: var(--black) !important;
  color: var(--white);
}
.btn-leave {
  background-color: var(--gray);
  color: var(--black) !important;
}
.btn-leave:focus, .btn-leave:hover {
  background-color: var(--gray-dark) !important;
  color: var(--black);
}
/*------------------------------------------ 
Main NAV
--------------------------------------------*/
.mainnav .navbar-nav .nav-link {
  color: var(--gray-dark);
}
.mainnav .navbar-nav .active .nav-link, .mainnav .navbar-nav .nav-link:hover, .mainnav .navbar-nav .nav-link:focus {
  color: var(--white);
}
.navbar .offcanvas {
  background-color: var(--black);
}
/*------------------------------------------ 
Modal
--------------------------------------------*/
.info-card-remark .modal-header .btn-close {
  background-color: var(--white);
}
.info-card-nav .btn-close {
  background-color: var(--black);
}
.modal-detail .modal-content {
  background-color: transparent;
  color: var(--white);
}
.modal-detail .modal-content a{
  color: #ff625c;
}
.modal-detail .modal-content a:hover{
  color: var(--white);
}
.modal-backdrop.show {
  opacity: .95 !important;
}
.modal-detail table:not(.not-hover) > tbody > tr:hover{
  background-color: RGBA(var(--white-rgb), .15)
}
.modal-detail table.choose-list > tr:hover,
.modal-detail table.choose-list tr td.has-bg {
  background-color: RGBA(var(--white-rgb), .15)
}
/*------------------------------------------ 
Table
--------------------------------------------*/
table.bg-transparent th,table.bg-transparent td{
	background-color: transparent;
	color: var(--white);
}
/*------------------------------------------ 
Basic Footer
--------------------------------------------*/
.bot-nav li a {
  color: var(--white);
}
.bot-nav li a:hover {
  color: var(--gray-dark);
}
.bot-nav li::after {
  background-color: var(--gray-dark);
}
/*------------------------------------------ 
Color Name - red
--------------------------------------------*/
.bg-red {
  background-color: var(--red) !important;
}
.text-red {
  color: var(--red) !important;
}
.border-red {
  border-color: var(--red) !important;
}
/*------------------------------------------ 
Color Name - gray-lighter
--------------------------------------------*/
.bg-gray-lighter {
  background-color: var(--gray-lighter) !important;
}
.text-gray-lighter {
  color: var(--gray-lighter) !important;
}
.border-gray-lighter {
  border-color: var(--gray-lighter) !important;
}
/*------------------------------------------ 
Color Name - gray-light
--------------------------------------------*/
.bg-gray-light {
  background-color: var(--gray-light) !important;
}
.text-gray-light {
  color: var(--gray-light) !important;
}
.border-gray-light {
  border-color: var(--gray-light) !important;
}
/*------------------------------------------ 
Color Name - gray
--------------------------------------------*/
.bg-gray {
  background-color: var(--gray) !important;
}
.text-gray {
  color: var(--gray) !important;
}
.border-gray {
  border-color: var(--gray) !important;
}
/*------------------------------------------ 
Color Name - gray-dark
--------------------------------------------*/
.bg-gray-dark {
  background-color: var(--gray-dark) !important;
}
.text-gray-dark {
  color: var(--gray-dark) !important;
}
.border-gray-dark {
  border-color: var(--gray-dark) !important;
}
/*------------------------------------------ 
Color Name - gray-heavy
--------------------------------------------*/
.bg-gray-heavy {
  background-color: var(--gray-heavy) !important;
}
.text-gray-heavy {
  color: var(--gray-heavy) !important;
}
.border-gray-heavy {
  border-color: var(--gray-heavy) !important;
}
/*------------------------------------------ 
Color Name - white
--------------------------------------------*/
.bg-white {
  background-color: var(--white) !important;
}
.text-white {
  color: var(--white) !important;
}
.border-white {
  border-color: var(--white) !important;
}
/*------------------------------------------ 
Color Name - black
--------------------------------------------*/
.bg-black {
  background-color: var(--black) !important;
}
.text-black {
  color: var(--black) !important;
}
.border-black {
  border-color: var(--black) !important;
}
/*------------------------------------------ 
Color Name - black light
--------------------------------------------*/
.bg-black-light {
  background-color: var(--black-light) !important;
}
.text-black-light {
  color: var(--black-light) !important;
}
.border-black-light {
  border-color: var(--black-light) !important;
}
/*------------------------------------------ 
Section 
--------------------------------------------*/
.section.client .card-right::after, .section.client .card-left::after {
  background-color: RGBA(var(--black-rgb), .5);
}
.section.courtesy .point-block {
  background-color: RGBA(var(--black-rgb), .75);
}
.section .card-item .info::after {
  border-color: transparent;
  background: linear-gradient(45deg, #cccccc, #333333) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.section .card-item .info {
  background-color: RGBA(var(--black-rgb), .15)
}
.section .card-item .info:focus, .section .card-item .info:hover {
  background-color: RGBA(var(--black-rgb), .5)
}
.section .card-item-full .info::before {
  border-color: RGBA(var(--white-rgb), .5)
}
.section .card-item-full .info::after {
  background-color: RGBA(var(--black-rgb), .45)
}
.section .card-item-full:focus .info::after, .section .card-item-full:hover .info::after {
  background-color: RGBA(var(--black-rgb), .75)
}
/*------------------------------------------ 
Btn More 
--------------------------------------------*/
.btn-more:focus, .btn-more:hover, .btn-more {
  background: rgb(231, 227, 224);
  background: -moz-linear-gradient(45deg, rgba(231, 227, 224, 1) 0%, rgba(191, 191, 191, 1) 23%, rgba(229, 229, 230, 1) 44%, rgba(229, 229, 230, 1) 66%, rgba(149, 149, 149, 1) 92%, rgba(208, 208, 208, 1) 100%);
  background: -webkit-linear-gradient(45deg, rgba(231, 227, 224, 1) 0%, rgba(191, 191, 191, 1) 23%, rgba(229, 229, 230, 1) 44%, rgba(229, 229, 230, 1) 66%, rgba(149, 149, 149, 1) 92%, rgba(208, 208, 208, 1) 100%);
  background: linear-gradient(45deg, rgba(231, 227, 224, 1) 0%, rgba(191, 191, 191, 1) 23%, rgba(229, 229, 230, 1) 44%, rgba(229, 229, 230, 1) 66%, rgba(149, 149, 149, 1) 92%, rgba(208, 208, 208, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7e3e0", endColorstr="#d0d0d0", GradientType=1);
  box-shadow: 0 .5rem .75rem RGBA(var(--black-rgb), .35) !important;
  color: var(--black) !important;
}
.btn-more::after, .btn-more::before {
  background: linear-gradient(to right, RGBA(var(--white-rgb), .5) 0%, RGBA(var(--white-rgb), 0) 100%);
  opacity: .5;
}
.btn-more::after {
  opacity: 0;
}
.btn-more:hover, .btn-more:focus {
  box-shadow: 0 .1rem .25rem RGBA(var(--black-rgb), .15) !important;
}
/*------------------------------------------ 
Btn Text More 
--------------------------------------------*/
.btn-text-more {
  color: #818181;
}
a :hover .btn-text-more, a:focus .btn-text-more {
  color: #ffffff;
}
/*------------------------------------------ 
Text Item
--------------------------------------------*/
.section .text-item .info::after {
  background-color: RGBA(var(--white-rgb), .5)
}
/*------------------------------------------ 
Footer
--------------------------------------------*/
footer .title {
  color: var(--gray);
}
footer a, footer .nav .nav-item .nav-link {
  color: var(--gray-dark);
}
footer a:hover, footer .nav .nav-item .nav-link:hover {
  color: var(--white);
}
footer a:focus, footer .nav .nav-item .nav-link:focus {
  color: var(--white);
}
@media (max-width: 575.98px) and (orientation:portrait) {
  .section.detail .info.text-black {
    color: var(--white) !important;
    text-shadow: 0 .05rem .05rem RGBA(var(--black-rgb), 1);
  }
}