@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

html { font-family: 'Bree Serif', serif !important; }

.info-card { border-radius: 5px; border: 1px solid #ccc; flex: 1; margin-bottom: 20px; }
.info-card-header { border-bottom: 1px solid #ccc; padding: 10px 16px; display: flex; align-items: center; min-height: 28px; }
.info-card-content { padding: 16px; display: flex; }
.info-card-content-column { flex: 1; }

.info-card-grid { display: grid; grid-gap: 10px 40px; grid-template-columns: min-content; }
.info-card-grid-1 { grid-column: 1; margin: 0; font-size: 100%; color: #555; white-space: nowrap; }
.info-card-grid-2 { grid-column: 2; }

.flex-columns { display: flex; }
.flex-columns > * { flex: 1 1 100%; }
.flex-columns > * + * { margin-left: 20px; }

.info-box { border-radius: 3px; padding: 10px 20px; padding-left: 16px; border: 1px solid #4893ec; border-left-color: rgb(72, 147, 236); border-left-style: solid; border-left-width: 1px; border-left: 5px solid #4893ec; background-size: 24px; background-position: 14px center; background-repeat: no-repeat; margin-bottom: 10px; }
.info-box:before { content: "\f05a"; display: inline-block; font-family: "Font Awesome 5 Pro"; font-size: 20px; vertical-align: sub; margin-right: 10px; color: rgb(72, 147, 236); }

.mox-message.warning { border-color: #ffd505; background-color: #ffd5052b; background-image: none; position: relative; }
.mox-message.warning:before { line-height: 20px; content: '\f071'; display: block; position: absolute; font-size: 20px; top: calc(50% - 10px); left: 14px; color: #846e00; font-family: "Font Awesome 5 Pro"; }
.mox-message.info { border-color: #4893ec; background-color: #4893ec12; background-image: none; position: relative; }
.mox-message.info::before { line-height: 20px; content: '\f06a'; display: block; position: absolute; font-size: 20px; top: calc(50% - 10px); left: 14px; color: #4893ec; font-family: "Font Awesome 5 Pro"; }

.mox-message .mox-button { background-color: #dfdfdf; }
.mox-message .mox-button:hover { background-color: #d0d0d0; }

.mb { margin-bottom: 0.5em; }

.inline-form { display: inline-block; }
.pay-button { background-color: #65BEEC; color: #fff !important; font-size: 1.1rem; font-weight: 500; padding: 8px; border-radius: 5px; border: 0; cursor: pointer; min-width: 72px; }

.pay-button:hover { background-color: #3a96c6; }

.complete-message { border-radius: 3px; padding: 0px 10px; padding-left: 20px; border: 1px solid #94b6af; border-left: 5px solid #20bea1; background-image: url(/public/static/icons/message-check.svg); background-size: 24px; background-position: 14px center; background-repeat: no-repeat; padding-left: 55px; margin-bottom: 10px; }

.error-message { border-radius: 3px; padding: 0px 10px; padding-left: 20px; border: 1px solid #970000; border-left: 5px solid #ff0000; background-image: url(/public/static/icons/message-cross.svg); background-size: 24px; background-position: 14px center; background-repeat: no-repeat; padding-left: 55px; margin-bottom: 10px; }

.lds-bars { display: inline-block; position: relative; width: 80px; height: 80px; }

.lds-bars div { display: inline-block; position: absolute; left: 8px; width: 16px; background: #65c333; animation: lds-bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; }

.lds-bars div:nth-child(1) { left: 8px; animation-delay: -0.24s; }

.lds-bars div:nth-child(2) { left: 32px; animation-delay: -0.12s; }

.lds-bars div:nth-child(3) { left: 56px; animation-delay: 0; }

@keyframes lds-bars {
	0% { top: 8px; height: 64px; }

	50%, 100% { top: 24px; height: 32px; }
}

a { font-size: 1.2em; color: #000; }
a:visited { color: #000 }

.download-template-file { font-size: 14em; }

.status { white-space: nowrap; }

.status a:before { display: inline-block; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #eee; margin-top: 5px; margin-right: 7px; }

.status.open a:before { background-color: #4893ec; }

.status.completed a:before { background-color: green; }

.status.rejected a:before { background-color: red; }

.status.sync a:before { background-color: #ffd505; }

.status.new a:before { background-color: #4893ec; }

.status.error a:before { background-color: red; }

.status.paid a:before { background-color: green; }

.status.created a:before { background-color: green; }

/**************************************************************
    DATATABLE
***************************************************************/
.mox-datatable { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-feature-settings: "tnum"; }

.mox-datatable a { text-decoration: none; color: #24292e; }

.mox-datatable tr th { padding: 0; text-align: left; background-color: #f5f5f8; }

.mox-datatable tr th > a,
.mox-datatable tr th > span { padding: 8px 10px; display: block; border-bottom: 1px solid #eaeaea; border-top: 1px solid #eaeaea; font-weight: 500; }

.mox-datatable tr td { text-align: left; padding: 0; border-bottom: 1px solid #eaeaea; }

.mox-datatable tr td a { padding: 8px 10px; display: block; }

.mox-datatable tr td span { padding: 8px 10px; display: block; }

.mox-datatable-empty { font-weight: 500; text-align: center; padding: 8px 10px; background-color: #f5f5f8; border-bottom: 1px solid #eaeaea; border-top: 1px solid #eaeaea; }

.mox-datatable-loader { background-image: url('/mox/static/svg/loader-button-black.svg'); height: 40px; background-position: center; background-size: 28px; background-repeat: no-repeat; }

.mox-datatable tr th.buttons { width: 180px; }

.mox-datatable tr td.buttons .buttons-list { list-style: none; padding: 0 8px; margin: 0; text-align: right; }

.mox-datatable tr td.buttons .buttons-list li { display: inline-block; }

.mox-datatable .buttons-list .mox-datatable-button { vertical-align: middle; border: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; display: inline-block; background-color: transparent; min-width: 2em; height: 2em; background-size: 20px; background-position: center; background-repeat: no-repeat; padding: 0; border-radius: 3px; }

.mox-datatable .buttons-list .mox-datatable-button:hover { background-color: #ccc; }

.mox-datatable .buttons-list .mox-datatable-button.display { background-image: url('/mox/static/images/display.png') }

.mox-datatable .buttons-list .mox-datatable-button.edit { background-image: url('/mox/static/images/edit.png') }

.mox-datatable .buttons-list .mox-datatable-button.delete { background-image: url('/mox/static/images/delete.png') }

.mox-datatable .buttons-list .mox-datatable-button.delete:hover { background-color: #faa; }

.mox-datatable tr th.sortable a:hover { background-color: #eee; }

.mox-datatable tr:hover td { background-color: #eee; }

.mox-datatable tr th.sortable.ascending { }

.mox-datatable tr th.sortable.descending { }

.mox-pager { list-style: none; margin: 0; padding: 0; border-radius: 3px; border: 1px solid #cacaca; display: inline-block; }

.mox-pager li { display: block; float: left; text-align: center; }

.mox-pager li a { text-decoration: none; color: #24292e; display: block; padding: 6px 4px; font-weight: 500; min-width: 28px; }

.mox-pager li.disabled a { color: #bbb; pointer-events: none; }

.mox-pager li.selected,
.mox-pager li:not(.disabled):hover { background-color: #f5f5f8; }

.mox-pager li + li { border-left: 1px solid #cacaca; }

.mox-content .mox-filters { display: flex; flex-direction: row; list-style: none; padding: 0; margin: 0; margin-top: 10px; margin-bottom: 0; flex-wrap: wrap; }

.mox-content .mox-filters input[type=text],
.mox-content .mox-filters input[type=date],
.mox-content .mox-filters input[type=number] { box-sizing: border-box; border: 1px solid #cacaca; padding: 4.5px; border-radius: 3px; margin: 0; line-height: 17px; }

.mox-content .mox-filters select { box-sizing: border-box; border: 1px solid #cacaca; padding: 0 4.5px; border-radius: 3px; margin: 0; height: 28px; }

.mox-content .mox-filters > li { margin-bottom: 10px; margin-right: 5px; }

.mox-content .mox-filters > .break { flex-grow: 1; }

.mox-content .mox-filters > .spacing { padding-right: 10px; border-right: 1px solid #eee; margin-right: 10px; }

.mox-table-scroll-wrapper { margin: 0 -16px; padding: 0 16px; overflow-x: auto; }

.mox-datatable.clean tr:nth-of-type(2n+1) td { background-color: #fff; }

.mox-datatable.clean tr th > a, .mox-datatable.clean tr th > span { padding: 4px 8px; border: 0; font-weight: normal; font-size: 0.85em }

.mox-datatable.clean tr th { padding-bottom: 5px; color: #777; }

.mox-datatable.clean tr td span { padding: 4px 8px; }

.mox-datatable.clean tr td a { padding: 4px 8px; }

.mox-datatable.clean tr:hover td { background-color: #eee; }

.mox-datatable input[type=text], .mox-datatable input[type=date], .mox-datatable input[type=time] { background-color: transparent; margin-left: -4px; border: 1px solid transparent; padding: 1px 4px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; }

.mox-datatable tr:hover input[type=text], .mox-datatable tr:hover input[type=date], .mox-datatable tr:hover input[type=time] { background-color: white; border: 1px solid #bbb; }

.mox-datatable tr td.unpadded span { padding: 0 10px; }

.mox-datatable.clean tr td.unpadded span { padding: 0 8px; }

.mox-datatable tr td.unpadded a { padding: 0 10px; }

.mox-datatable.clean tr td.unpadded a { padding: 0 8px; }

.mox-datatable .hidden { display: none; }

.mox-datatable .group { background-color: #f5f5f8; font-weight: bold; }

.center-screen { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 80vh; }

.login-left { border-radius: 10px 0px 0px 10px; margin: 0; background-color: #161616d9; display: flex; justify-content: center; align-items: center; text-align: center; user-select: none; padding: 20px; }

.login-left h1 { font-size: 3.2rem; padding: 0px; margin: 0px; color: #F5F5F5; font-weight: 400; }

.login-left h2 { font-size: 1.8rem; padding: 0px; margin: 0px; font-weight: 200; color: #F5F5F5; }

.login-right { margin: 0px !important; border-radius: 0px 10px 10px 0px; background-color: #F5F5F5; display: flex; justify-content: center; align-items: center; text-align: center; min-width: 35vw; padding: 20px; }

.login-right input[type='text'] { width: 25vw !important; border-radius: 1px !important; }

.login-right input[type='password'] { width: 25vw !important; border-radius: 1px !important; }

.login-card { min-width: 55vw; padding: 20px !important; }

.portal-button { border-radius: 2px; padding: 10px; border: 2px solid #FFD500; background-color: transparent; cursor: pointer; font-family: 'Bree Serif', serif; font-size: 1.2rem; font-weight: 400; transition-duration: 0.3s; user-select: none; text-decoration: none; }

.portal-button:hover { background-color: #FFD500; transition-duration: 0.3s; }

.portal-button:active { border: 2px solid #ebc500; background-color: #ebc500; transition-duration: 0.3s; }

.portal-button-disabled { background-color: #b0b0b0; cursor: default; font-family: 'Bree Serif', serif; border-radius: 2px; padding: 10px; transition-duration: 0.3s; user-select: none; }

.portal-button-disabled .tooltiptext { visibility: hidden; width: 120px; background-color: #333333dc; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; font-size: 1rem; }

.portal-button-disabled:hover .tooltiptext { visibility: visible; }


.portal-header { background-image: url('/Public/Static/images/algen-bg-start.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; max-width: 100vw; min-height: 18vh; margin: 0; padding: 0; }

.portal-logo { position: absolute; left: 0; top: 0; }

.portal-tab { display: flex; margin-left: 16px; height: 8vh; padding: 0px 10px; background-color: #FFD500; }

.portal-tab h3 { display: inline-block; align-self: flex-end; margin: 4px; font-weight: 500; font-size: 1.3rem; }

.portal-company { justify-content: center; align-items: center; text-align: center; text-transform: uppercase; }

.portal-company img { width: 40px; }

.portal-company h2 { color: #F5F5F5; font-weight: 400; margin-left: 0; }

.portal-menu { min-width: 200px; max-width: 200px; border: 1.5px solid #FFD500; padding: 10px 20px; height: 210px; }

.portal-menu-header { background-color: #FFD500; text-align: center; padding: 10px 70px; font-size: 1.2rem; text-transform: uppercase; }

.portal-menu-item { display: block; text-decoration: none; cursor: pointer; padding: 4px 0px; }

.portal-menu-item:hover { text-decoration: underline; }

.portal-content { min-width: 90%; }

.portal-content input[type='text'] { border-radius: 1px !important; }

.portal-content select { border-radius: 1px !important; }

.portal-content textarea { border-radius: 1px !important; }

.portal-h1 { padding: 2px; margin: 0; font-size: 3rem; font-weight: 400; color: #FFD500; text-transform: uppercase; }

.portal-case-link { position: absolute; right: 8px; text-decoration: none; text-transform: uppercase; }

.vresize { resize: vertical; }
.disabled { color: #bbb; pointer-events: none; background-color: #f1f1f1 !important;}

@media (max-width: 1200px) { .login-left h1 { font-size: 2.2rem; padding: 0px; margin: 0px; color: #F5F5F5; font-weight: 400; }
}

@media (max-width: 570px) {
	.login-left h1 { font-size: 1.8rem; padding: 0px; margin: 0px; color: #F5F5F5; font-weight: 400; }
	.login-left div img { height: 100px; }
}

@media (max-width: 500px) {
	.login-left h1 { font-size: 1.2rem; padding: 0px; margin: 0px; color: #F5F5F5; font-weight: 400; }	
}