﻿/* =========================================================
    DESIGN TOKENS
    ========================================================= */

:root {
	--color-green: #00520C;
	--color-green50: #B9E4C7;
	--color-red: #990000;
	--color-red50: #FECFC3;
	--color-blue: #004875;
	--color-blue50: #C2ECFF;
	--color-yellow: #703400;
	--color-yellow50: #FFE6B8;
	--color-grey: #202122;
	--color-grey50: #E0E0E1;
	--color-purple: #5E35B1;
	--color-purple50: #EDE7FC;
}

/* COLORS 
    BODY: #202122
    RABOBANK BLUE: #0059FF;
    RABOBANK ORANGE: #FA6400;
    
    GREEN       #00520C
    GREEN 50    #B9E4C7
    RED         #990000
    RED 50      #FECFC3
    BLUE        #004875
    BLUE 50     #C2ECFF
    YELLOW      #703400
    YELLOW 50   #FFE6B8
    GREY        #202122
    GREY 50     #E0E0E1
    PURPLE      #5E35B1
    PURPLE 50   #EDE7FC
    
    PRIMARY
    BLUE DEFAULT    #0059FF
    BLUE HOVER      #004EF5
    BLUE ACTIVE     #0033DB
    BLUE FOCUS      #0059FF
    BLUE LOADING    #0059FF
    DISABLED        #E0E0E1

    
    /* AVAILABLE FONTS
    
    font-family:'Myriad Pro Regular';
    font-family:'Myriad Pro Condensed';
    font-family:'Myriad Pro Condensed Italic';
    font-family:'Myriad Pro Light';
    font-family:'Myriad Pro Semibold';
    font-family:'Myriad Pro Semibold Italic';
    font-family:'Myriad Pro Bold Condensed';
    font-family:'Myriad Pro Bold';
    font-family:'Myriad Pro Bold Italic';
    font-family:'Myriad Pro Bold Condensed Italic';
    
    */

@font-face {
	font-family: 'Myriad Pro Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed Italic'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Light';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Light'), url('/Content/app/NewUI/rabobank/fonts/MyriadPro-Light.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Semibold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Semibold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold Italic'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Italic'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed Italic'), url('/Content/app/NewUI/rabobank/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

/* END FONTS */

/* ICONS */

.fas, .far {
	font-family: "Font Awesome 6 Pro" !important;
	font-weight: 500 !important; /* Light */
	font-size: 20px;
	-webkit-font-smoothing: antialiased;
}

.activeFilterRemove .far {
	font-size: 12px;
}

/* END ICONS */

body {
	color: #202122;
	font-family: "Myriad Pro Regular",Georgia, Segoe UI, Helvetica Neue, arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* TITLES */
h1,
h3,
h4,
h5,
h6 {
	color: #0059FF;
	font-weight: 400;
}

/*h1 {
	display: none !important;
}*/

h2 {
	color: #202122;
	font-size: 21px;
	text-transform: capitalize;
}

h4 {
	color: #202122;
	font-size: 21px;
	text-transform: capitalize;
	padding-top: 15px;
	padding-bottom: 15px;
}

a, .platform-v2 a {
	color: #0059FF;
}

/* BACKGROUNDS */
.bg-blue5 {
	background-color: #F6F6F6;
}


/* BLOCKS */
.content-block {
	border: none;
	box-shadow: 0 -1px 3px 0 hsla(220, 3%, 15%, .03), 0 1px 2px -5px hsla(220, 3%, 15%, .02), 0 2px 5px -5px hsla(220, 3%, 15%, .04), 0 4px 12px -5px hsla(220, 3%, 15%, .05), 0 8px 12px -5px hsla(220, 3%, 15%, .07)
}

/* HIDDEN BLOCKS */

#controllerActions {
	display: none;
}

.workshop-block {
	display: none;
}

#timeregistration-projects, #beta, #dashboard, #mfa, #mobileApp, #approval, #reset {
	display: none;
}


/* BUTTONS */

.btn {
	height: 46px;
	padding: 12px 24px !important;
	font-family: 'Myriad Pro Bold';
	font-size: 16px;
	line-height: 1;
}

.btn-sm, #mergeRelationBtn {
	height: 32px;
	padding: 6px 12px !important;
	font-size: 14px;
}

	.btn-sm i {
		font-size: 16px;
	}

.flex-fill > .btn, .flex-fill > .btn-group {
	margin-right: 5px;
}


.btn-primary, a.btn-primary {
	background-color: #0059FF;
	border: none;
	box-shadow: 0px 0px 0px 1px #0059FF inset;
	color: #fff;
}

	.btn-primary:hover, a.btn-primary:hover {
		background-color: #004EF5;
	}

	.btn-primary:active, a.btn-primary:active {
		background-color: #0033DB;
	}

	.btn-primary:focus, a.btn-primary:focus {
		border-radius: 4px;
		background: #0059FF;
		/* Focus Ring */
		box-shadow: 0 0 0 2px #FFF, 0 0 0 5px #0058FF;
	}

.gridSelectedItemsRemove i {
	font-size: 12px
}

.btn-secondary, .btn-search {
	box-shadow: 0px 0px 0px 1px #0059FF inset;
	/*border: 1px solid #0059FF !important;*/
	color: #0059FF;
	background-color: #fff;
}

.buttonRow .btn-secondary {
	border: 1px solid #0059FF;
	margin-right: 10px
}

#gridform .btn-sm, #gridform .btn-secondary, .input-group-append .btn-secondary, .btn-search, .dropdown-toggledd {
	height: 46px !important;
	box-shadow: 0px 0px 0px 1px #0059FF inset;
	min-width: 46px;
	text-align: center;
}

.dropdown-item i {
	color: #0059FF;
}

button.btn-sm.dropdown-toggle {
	height: 32px !important;
}

.dropdown-toggle-split {
	padding-left: .5625rem !important;
	padding-right: .5625rem !important;
}


.phoneNumberButton {
	font-size: 16px !important;
	padding: 12px !important;
}

.input-group-append .btn-secondary, .btn-search {
	padding-left: 12px !important;
	padding-right: 12px !important;
	min-width: 55px;
}

	.btn-secondary:hover, a.btn-secondary:hover, .btn-search:hover {
		background-color: rgba(0, 89, 255, 0.08);
		color: #0059FF;
	}

	.btn-secondary:active, a.btn-secondary:active, .btn-search:hover {
		background-color: rgba(0, 89, 255, 0.08);
		color: #0059FF;
	}

	.btn-secondary:focus, a.btn-secondary:focus, .btn-search:hover {
		border-radius: 4px;
		background: var(--rds-body-color-background);
		/* Focus Ring */
		box-shadow: 0 0 0 2px #FFF, 0 0 0 5px #0058FF;
		color: #0059FF;
	}

.btn-tertiary {
	color: #0059FF;
	padding: 12px !important;
}

.btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active, .toggleActiveBtn {
	color: #0059FF;
	box-shadow: 0px 0px 0px 1px #0059FF inset;
}

/* HIDDEN BUTTONS */

/*#addInvoiceButton {
	display: none;
}*/

/* FORMS */

.form-control, .input-group-sm > .custom-select, .input-group-sm > .form-control:not(textarea), .reducedSpace .form-control {
	border: 1px solid #737578;
	height: 46px;
	font-size: 16px;
}

.reducedSpace textarea.form-control {
	min-height: 42px;
	padding: 12px;
	margin-right: 10px;
	overflow: hidden;
}

#NewPayment_Description {
	margin-right: 0px !important;
}


.form-control::-webkit-input-placeholder {
	color: #737578;
}

.input-group-prepend, .input-group-text {
	background-color: #fff;
	height: 46px;
}

#orderlines .input-group-prepend .input-group-text {
	height: 46px;
}

.input-group-text {
	border: 1px solid #737578;
	min-width: 46px;
	text-align: center;
}

.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: #0059FF;
	background-color: #0059FF;
}

.input-group-text {
	display: flex;
	align-items: center; /* vertical center */
	justify-content: center;
	font-size: 20px !important;
}

input.decimal {
	text-align: left;
}

.dropdown-menu {
	line-height: 32px;
}

.form-control-plaintext {
	font-size: 16px
}

@media (min-width: 767px) {
	.reducedSpace .input-group > .input-group-append .btn, .reducedSpace .input-group > .input-group-prepend > .input-group-text, .reducedSpace .input-group > .input-group-append > .input-group-text, .reducedSpace .input-group .btn {
		height: auto;
	}
}

/* ORDER LINES */

#orderLinesTable td {
	padding-right: 10px !important;
}

#orderLinesTable .priceExclVAT, #orderLinesTable .scale2 {
	min-width: 100px !important;
}

#OrderPayments .content-block {
	margin: 0px;
}

/* LIST VIEWS */

/*tr {
	height: 64px;
}*/

.table thead th {
	font-size: 16px;
	color: #202122;
	font-family: 'Myriad Pro Semibold';
}

.table th, .table td {
	padding: 16px;
}

.table thead i {
	font-size: 20px;
	font-weight: 300;
}

/* TABS */

.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .nav-pills .nav-link {
	font-size: 16px;
	font-weight: 500;
	color: #202122;
	background-color: #fff !important;
	padding-top: 15px;
}

	.nav-pills .nav-link.active {
		border-bottom: 2px solid #fa6400;
	}

/* SPECIAL */

.actionFooter {
	width: 100%;
	left: 0;
	height: 79px
}

/* Native color picker reset */
.colorPicker {
	appearance: none;
	-webkit-appearance: none;
	width: 42px;
	height: 42px;
	border: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
	padding: 10px !important;
}

	/* Chrome/Safari swatch */
	.colorPicker::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	.colorPicker::-webkit-color-swatch {
		border: none;
		box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
	}

	/* Firefox */
	.colorPicker::-moz-color-swatch {
		border: none;
	}

	/* Hover polish */
	.colorPicker:hover {
		transform: scale(1.04);
	}

.decimal {
	text-align: right;
}

a.showPDFInvoice {
	color: #0059FF;
}

.badge-info {
	background-color: #E03100;
	font-weight: 400;
	padding: 4px 6px 2px 5px;
}

.activeFilter, .gridSelectedItems {
	background-color: #E0E0E1;
	border-radius: 20px;
	height: 30px;
	padding: 9px 12px 8px 12px;
}

.gridSelectedItems {
	padding-top: 9px;
}


.badge a, .badge a:hover {
	background-color: #000061;
	border-radius: 10px;
	color: #fff;
	padding: 4px 5px 1px 5px;
	margin-left: 5px
}

/* STATES */

/*
    GREEN       #00520C
    GREEN 50    #B9E4C7
    RED         #990000
    RED 50      #FECFC3
    BLUE        #004875
    BLUE 50     #C2ECFF
    YELLOW      #703400
    YELLOW 50   #FFE6B8
    GREY        #202122
    GREY 50     #E0E0E1
    PURPLE      #5E35B1
    PURPLE 50   #EDE7FC
    */

.status {
	width: fit-content !important;
	/*background-color: #fff;*/
}


.statusLeft, .statusRight {
	width: fit-content !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	line-height: 1;
	padding: 6px 6px 4px 6px;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: normal;
}

.statusRight {
	margin-left: 5px;
	background-color: #FECFC3 !important;
	color: #990000 !important;
}

.statusTypeToPayExpired .statusLeft {
	background-color: #FECFC3;
	color: #990000
}

.statusTypeCredited .statusLeft {
	background-color: #00520C;
}

.statusTypeDraftExpired .statusLeft {
	background-color: #C2ECFF;
	color: #004875;
}

.statusTypeToDomiciliateExpired .statusLeft {
	background-color: #5E35B1;
	color: #fff;
}

.statusTypeToSendExpired .statusLeft, .statusTypeToSend .statusLeft {
	background-color: #004875;
	color: #fff;
}

.statusTypePaid, .statusLeft {
	background-color: #B9E4C7;
	/*color:#00520C;*/
	background-color: var(--color-green50);
	color: var(--color-green);
}

span#statusTypeBadge.statusTypeToPay, span#statusTypeBadge.statusTypeDraft, span#statusTypeBadge.statusTypeToSend, span#statusTypeBadge.statusTypePaid {
	width: fit-content !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	line-height: 1;
	padding: 6px 6px 4px 6px;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: normal;
}

span#statusTypeBadge.statusTypeToPay, span#statusTypeBadge.statusTypePaid {
	background-color: #B9E4C7;
	color: #00520C;
}

span#statusTypeBadge.statusTypeDraft {
	background-color: #C2ECFF;
	color: #004875;
}

span#statusTypeBadge.statusTypeToSend {
	background-color: #004875;
	color: #fff;
}

/* PEPPOL BADGE */

.peppolBadgeLoader .badge-success {
	background-color: #B9E4C7;
	color: #00520C;
	width: fit-content !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	line-height: 1;
	padding: 6px 6px 4px 6px;
	border-radius: 6px;
	box-sizing: border-box;
	font-weight: normal;
}

/* INVOICE DETAIL */

#AttachmentGridcontent > table > tbody > tr > td:nth-child(4) {
	min-width: 120px;
}

.vertical-timeline {
	padding: 20px 15px !important;
	border-top: 1px solid #E0E0E1;
}

.vertical-timeline-element-icon {
	margin-left: -14px;
}

/* CUSTOMER LIST / SUPPLIER LIST */


/* CUSTOMER DETAIL / SUPPLIER DETAIL */

#HistoryContent {
	padding-bottom: 15px;
}

/* ACCORDION */

.accordion .card-header {
	height: 64px;
}

	.accordion .card-header .btn {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

.accordionItemHeader {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.card .tooltipIcon {
	margin-right: 10px
}

.card li {
	line-height: 32px
}


/* PAGINATION */

.pagination {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0;
	margin: 0;
}

	.pagination .page-item {
		list-style: none;
	}

	.pagination .page-link {
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 50% !important;
		background: transparent;
		color: #222;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}

	.pagination .page-item.active .page-link {
		border: 1px solid #000;
		background: #fff;
		color: #222;
	}

	.pagination .page-link:hover {
		background: transparent;
		color: #000;
	}

	.pagination .page-link:focus {
		box-shadow: none;
	}

/* PDF VIEWER */

.fileViewerControlsTop {
	padding: 0px !important;
}

/* DATE PICKER */

.ui-datepicker-prev span {
	background-color: #0059FF;
}

.ui-datepicker-next span {
	background-color: #0059FF;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border: 1px solid #0059FF;
	color: #0059FF;
}

.ui-state-active, .ui-widget-content .ui-state-active {
	background: #0059FF;
}

.ui-state-default, .ui-widget-content .ui-state-default {
	border: 2px solid #fff;
}

.ui-datepicker td a:hover {
	color: #0059FF;
	border: 2px solid #0059FF;
}

/* FOR DURING THE CREATION OF THE STYLE SHEET */

/*.navbar {
	display: none;
}

.billit-sidebar {
	display: none;
}

.billit-content.billit-sidebar-show {
	margin: 0px !important;
}
*/