/* CSS Variables */
:root {
	
	/* Action buttons */
	--bpi-red		: #b11116;
	--bpi-red-light	: #ee4f53;
	--bpi-red-dark	: #8e0e12;
	--bpi-gradient	: linear-gradient(73.49deg, var(--bpi-red) 0%, var(--bpi-red-light) 98.48%);
	
	/* Cancel button */
	--btn-cancel-bg			: #f8f9fa;
	--btn-cancel-hover		: #3d5159; /* #e9ecef */
	--btn-cancel-press		: #374a52; /* #dde1e3 */
	--btn-cancel-border		: #3d5159;
	--btn-cancel-text		: #3d5159;
	--btn-cancel-text-hover	: #f8f9fa;
	
	--bpi-grey		: #757575;
	--focus-shadow	: 0 4px 8px 2px rgba(0, 0, 0, 0.16);
	
	/* Tab */
	--tab-active-bg		: var(--bpi-red-light);
	
	/* Text */
	--content-text	: #000000;
	--link-color	: #20a39e;
}

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

body {
	height: 100%;
	font-family: 'DM Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: var(--content-text);
}

/* Links */
a {
	color: #20a39e;
}

a:hover,
a:focus {
	color: #20a39e;
	font-weight: 400;
	text-decoration: underline;
}

/* Alerts */ 
.alert {
	color: var(--content-text);
}


/* Used in margins */
.mt-1 {
	margin-top: 0.25rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-3 {
	margin-top: 1rem;
}

.mt-4 {
	margin-top: 1.5rem;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 1rem;
}

.mb-4 {
	margin-bottom: 1.5rem;
}

.d-none {
	display: none;
}

.d-block {
	display: block;
}


/* Used in Appraisal */
.row-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.full-height{
	height: 100%;
}

#toast-container > div {
	width: 400px;
}


#toast-container > .toast-success {
	background-color: #fbfaf8;
	background-image: none !important;
	border: 1px solid #9a9997;
	color: #333333;
	padding-left: 60px;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	opacity: 1;
}

#toast-container > .toast-success::before {
	content: '\2714';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 48px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	background-color: #b11116;
}

#toast-container > .toast-success .toast-close-button {
	color: #555555;
	text-shadow: none;
	font-size: 24px;
	font-weight: normal;
	opacity: 1;
	
}

#toast-container > .toast-success .toast-message {
	display: block;
	width: 100%;
}

#toast-container > .toast-error {
	background-color: #fbfaf8;
	background-image: none !important;
	border: 1px solid #9a9997;
	color: #333333;
	padding-left: 60px;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	opacity: 1;
}

#toast-container > .toast-error::before {
	content: '\2716';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 48px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	background-color: #b11116;
}

#toast-container > .toast-error .toast-close-button {
	color: #555555;
	text-shadow: none;
	font-size: 24px;
	font-weight: normal;
	opacity: 1;
}


#toast-container > .toast-error .toast-message {
	display: block;
	width: 100%;
}


/* Checkbok */
input[type="checkbox"],
.form-check-input[type="checkbox"],
.status_checkbox[type="checkbox"],
.approval_table_checkbox[type="checkbox"] {
	-moz-appearance: none !important;
	     appearance: none !important;
	-webkit-appearance: none !important;
	width: 15px !important;
	height: 15px !important;
	border: 1.5px solid #c0c0c0 !important;
	border-radius: 2px !important;
	background-color: #fff !important;
	cursor: pointer !important;
	position: relative !important;
	vertical-align: middle !important;
	margin-top: 2px !important;
	-webkit-transition: border-color 0.15s;
	-o-transition: border-color 0.15s;
	transition: border-color 0.15s;
	outline: none !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	-ms-flex-negative: 0 !important;
	    flex-shrink: 0 !important;
    display: inline-block !important;
    overflow: visible !important;
}

input[type="checkbox"]:hover,
.form-check-input[type="checkbox"]:hover,
.status_checkbox[type="checkbox"]:hover,
.approval_table_checkbox[type="checkbox"]:hover {
	border-color: #999 !important;
}

input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked,
.status_checkbox[type="checkbox"]:checked,
.approval_table_checkbox[type="checkbox"]:checked {
	border-color: #c0c0c0 !important;
	background-color: #fff !important;
}

input[type="checkbox"]:checked::after,
.form-check-input[type="checkbox"]:checked::after,
.status_checkbox[type="checkbox"]:checked::after,
.approval_table_checkbox[type="checkbox"]:checked::after  {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 45% !important;
	width: 5px !important;
	height: 9px !important;
	border-right: 2px solid var(--bpi-red) !important;
	border-bottom: 2px solid var(--bpi-red) !important;
	-webkit-transform: translate(-50%, -50%) rotate(45deg) !important;
	    -ms-transform: translate(-50%, -50%) rotate(45deg) !important;
	        transform: translate(-50%, -50%) rotate(45deg) !important;
	display: block !important;
    overflow: visible !important;
}

table.datatables_temp1 td,
table.datatables_temp1 th,
table.datatables_temp2 td, 
table.datatables_temp2 th{
    overflow: visible !important;
	
}

select.form-control {
	border: 1px solid #ccc !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	-webkit-transition: border-color 0.15s;
	-o-transition: border-color 0.15s;
	transition: border-color 0.15s;
	cursor: pointer;
}

select.form-control:hover {
	border-color: #999 !important;
}

select.form-control:focus {
	border-color: #999 !important;
	outline: none !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

select.form-control option {
	background-color: #fff !important;
	color: #555;
}

select.form-control option:hover {
	background-color: #ebebeb !important;
}

select.form-control option:checked {
	background-color: #ddd !important;
	color: #333;
}