/* define project color */
:root {
	/* CIS */
	--appColor1: #C7000B;
	--appColor2: #E45E00;
	--appColor3: #F1BC00;
	/* usage */
	--appDark: var(--appColor2);
	--appBtn: var(--appColor2);
	--appBorder: var(--appColor1);
	--appBackground: #FAF5F9;
	--appBackground2: #DB4F2C;
}

body {
	background-color: var(--white);	
}

.app_with_bg {
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/bg_home.png);
}

.modal-body {
	background-color: var(--appBackground);	
}

.modal-content {
	border-radius: 20px;
}

/* override bootstrap-select */
.bootstrap-select > .dropdown-toggle { 
	border: 1px solid rgba(0, 0, 0, 0.125)
}

/* override icheck */
.icheck-success>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before,
.icheck-success>input:first-child:not(:checked):not(:disabled):hover+label::before {
    border-color: var(--appBorder);
}
.icheck-success>input:first-child:checked+input[type=hidden]+label::before,
.icheck-success>input:first-child:checked+label::before {
	background-color: var(--appDark);
    border-color: var(--appBorder);
}

/* override bs-stepper */
.active .bs-stepper-circle {
	background-color: var(--appDark);
}

/* override xxx-lightblue */
.text-lightblue
{
    color: var(--appDark)!important;
}
.navbar-lightblue,
.btn-lightblue,
.bg-lightblue 
{
	background: linear-gradient(90deg, var(--appColor1), var(--appColor2), var(--appColor3));
}
.card-lightblue.card-outline {
    border-top: 3px solid var(--appDark);
}
.sidebar-dark-lightblue .nav-sidebar > .nav-item > .nav-link.active, 
.sidebar-light-lightblue .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--appDark)!important;
    color: #fff;
}

/* override xxx-orange */
.text-orange {
    color: var(--appBtn)!important;
}

/* override form-control:focus */
.form-control:focus {
    outline: auto;
    outline-color: var(--appColor2);
}

/* override list-group */
.list-group {
    border-radius: 0.6rem;
}

/* override .rounded */
.rounded {
    border-radius: 0.6rem!important;
}

.spinner-myapp {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 9999;
}

.color-myapp {
	color: lightblue;
}

.color-myapp2 {
	color: var(--appBtn);
}

.bg-myapp {
	background: linear-gradient(90deg, var(--appColor1), var(--appColor2), var(--appColor3));
	color: white;
}

.btn-myapp {
	border: 0;
	background: linear-gradient(90deg, var(--appColor1), var(--appColor2), var(--appColor3));
	color: white;
	/* btn-text-myapp */
	border-radius: 1.4rem;
	padding: 0.4em 0 0.4em 0;
	font-family: SF Pro Text;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 27px;
	align-items: center;
	text-align: center;
	letter-spacing: -0.28px;
}

.btn-myapp:active {
	border-color: var(--appColor1);
	background: var(--appColor3);
}

.btn-text-myapp {
	font-family: SF Pro Text;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 21px;
	align-items: center;
	text-align: center;
	letter-spacing: -0.28px;
	color: var(--appBackground);
}

.btn-myapp2 {
	border-color: var(--appColor2);
	background: white;
	color: var(--appColor1);
	/* btn-text-myapp */
	border-radius: 1.4rem;
	padding: 0.4em 0 0.4em 0;
	font-family: SF Pro Text;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 27px;
	align-items: center;
	text-align: center;
	letter-spacing: -0.28px;
}

.list-group-myapp {
	background: var(--appBackground);
}

.badge-myapp {
	margin-left: -0.4em;
    margin-top: 0.6em;
    background-color: var(--appBtn);
}

.nav-link-myapp {
	border-color: #FFF #FFF #FFF #FFF !important;
}

.nav-link-myapp:hover {
	border-color: #FFF #FFF #FFF #FFF !important;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 3px solid;
	font-weight: bold;
	color: #000;
}

.nav-item-myapp a {
	color: #8C8C8C;
}

.nav-link-myapp.active {
	border-color: #FFF #FFF var(--appDark) #FFF !important;
	border-bottom: 3px solid;
}


/* special for payment page */
.list-group-item-noborder {
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
.list-group-item-noborder:last-child {
	border-bottom: 0;
}

.message-truncate {
	-webkit-line-clamp: 2;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

/* modify carousel icon */
.carousel-indicators li {
    width: 8px;
    height: 8px;
    border-radius: 100%;
}
.carousel-indicators {
    bottom: -20px;
}

.w-90 {
    width: 90%!important;
}

.bg-txnListDonate {
  background-color: #ffeeba;
}


/* 自動登出計時器樣式 */
.countdown-timer {
  color: var(--appColor1);
  font-weight: bold;
}