/* Velallisen online-palvelu - ilme oma.bill.fi:n (cls.css) mukaan */

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Light.woff2') format("woff2");
}

:root {
	--bill-purple: #8449BF;
	--bill-cyan: #25C7D9;
	--bill-pink-light: #F28DD71F;
	--bill-grey: #F5F5F5;
}

@media (min-width: 1200px) {
	.container { max-width: 1440px; }
}

body, table, .card-body {
	font-size: 14px !important;
	font-family: "Montserrat", sans-serif;
	background-color: #FFFFFF;
}

.cls-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cls-content {
	flex: 1 0 auto;
}

h1, h2, h3, h4, h5 {
	font-family: "Montserrat", sans-serif;
	color: var(--bill-purple);
}

h3, h4, h5 { font-size: 1.2rem; }

.alert h1, .alert h2, .alert h3, .alert h4, .alert h5 { color: inherit; }

/* Navigaatio */

.bg-dark { background-color: var(--bill-purple) !important; }

.navbar-dark .navbar-nav .nav-link { color: #FFFFFF !important; }
.navbar-dark .navbar-nav .nav-item.active .nav-link { font-weight: bold; text-decoration: underline; }

.loginTitle { color: #FFFFFF; }

.billLogo {
	width: 56px;
	height: 25px;
	margin-left: 0.5rem;
	margin-bottom: 4px;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
	color: #FFFFFF !important;
	background-color: var(--bill-purple) !important;
}

/* Napit */

.btn-primary {
	color: #FFFFFF;
	background-color: var(--bill-purple);
	border-color: var(--bill-purple);
	border-radius: 100px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
	color: var(--bill-purple);
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.btn-primary:disabled {
	color: #FFFFFF;
	background-color: #343a40;
	border-color: #343a40;
}

.navbar .btn-primary {
	color: var(--bill-purple);
	background-color: #FFFFFF;
	border-color: #FFFFFF;
}
.navbar .btn-primary:hover, .navbar .btn-primary:focus {
	background-color: var(--bill-grey);
	border-color: var(--bill-grey);
}

.btn-default {
	color: #333333 !important;
	background-color: var(--bill-grey) !important;
	border: 1px solid #CCCCCC !important;
	border-radius: 100px;
}
.btn-default:hover, .btn-default:focus {
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

.cls-button { padding: 6px 24px !important; }

.cls-login-button {
	width: 100%;
	font-weight: bold !important;
}

/* Muut varit */

a:not(.btn) { color: var(--bill-purple) !important; }
.navbar-dark a.nav-link { color: #FFFFFF !important; }

.alert-primary { background-color: var(--bill-cyan) !important; color: #FFFFFF !important; border-color: var(--bill-cyan) !important; }
.alert-info { background-color: #e9ecef !important; color: #212529 !important; border-color: #e9ecef !important; }
.alert-danger { background-color: var(--bill-pink-light) !important; color: #000000 !important; border-color: var(--bill-pink-light) !important; }

.card-header .card-title { color: var(--bill-purple); }

/* Kortit */

.card {
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);
	border: 1px solid #e5e9f2;
	border-radius: .2rem;
}
.card-header {
	padding: .75rem 1.25rem;
	background-color: #FFFFFF;
	border-bottom: 1px solid #e5e9f2;
}

/* Valintalistat (Omat velat: Avoimet/Paattyneet): valittu harmaalla kuten footer */

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
	background-color: var(--bill-grey);
	border-color: rgba(0,0,0,.125);
	color: #212529 !important;
	font-weight: bold;
}

/* Perintatoimeksiantoon lisatty lasku: tiedot avattavassa osassa ilman toista kehysta */
.cls-added-details > .card {
	border: 0;
	border-top: 1px solid #e5e9f2;
	box-shadow: none;
	margin-bottom: 0;
}

/* Saatavan valilehdet */

.card-header-tabs .nav-link { color: var(--bill-purple); }
.card-header-tabs .nav-link.active { font-weight: bold; }

/* Sivukohtaiset */

.cls-login {
	max-width: 420px;
	margin: 40px auto 10px auto;
}

.faq-question {
	color: var(--bill-purple) !important;
	font-weight: bold;
	padding: .75rem 1.25rem;
	white-space: normal;
}
.faq-question:hover, .faq-question:focus {
	text-decoration: none;
	background-color: var(--bill-grey);
}

.cls-paymentplan {
	max-width: 760px;
}

.cls-welcome {
	max-width: 640px;
	margin-top: 40px;
}

.cls-main input[type="text"], .cls-main input[type="password"], .cls-main input[type="email"], .cls-main input[type="tel"], .cls-main textarea {
	background: #faffff;
}

.table td, .table th { vertical-align: middle; }
.cls-numberalign { text-align: right; }

/* Footer */

.cls-footer {
	flex-shrink: 0;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	background-color: var(--bill-grey);
	padding: 1.1em 0.5em 0.4em 0.5em;
	border-top: 1px solid #f0f0f0;
}