* {
    --primary-color: #ffdf16;
    --primary-color-lighter: #ffee7c;

    --dark-gray-color: #181818;
    --white-color: #FFF;
    --light-gray-color: #F2F2F2;

    --primary-font: Calibri;

    --body-font: var(--primary-font), Arial, Helvetica, sans-serif;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
div {
	box-sizing: border-box;
}
button {
	cursor: pointer;
}

/* HTML */
html {
    scroll-behavior: smooth;
    background: var(--white-color);
    color: var(--dark-gray-color);
    height: 100%;
}

/* Body */
body{
    background: var(--white-color);
    color: var(--dark-gray-color);
    font-family: var(--body-font);
    font-size: 1em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
	width: 100%;
    padding: 0;
}
header {
    padding: 1em;
}
#container {
    padding: 1em;
}
.but {
	background: var(--primary-color);
	color: var(--dark-gray-color);
	display: inline-block;
	font-size: 1rem;
    padding: .5em 1.25em;
	text-decoration:none;
	text-align:center;
    font-weight: bold;
	border-radius: 4px;
    transition: 200ms ease all;
    border: 0;
    font-family: var(--primary-font), Arial, Helvetica, sans-serif;
}
.but:hover {
    background: var(--primary-color-lighter);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.bold {
    font-weight: bold;
}
.smallbut {
    font-size: .75em;
    padding: .5em .75em;
}     
.clear {
    clear:both;   
}
label {
   font-size: 1em;
}
#pdvoffice-table * {
    font-size: .875rem;
}
#pdvoffice-table td {
    padding: .375em .75em;
    vertical-align: middle;
}

#pdvoffice-table tr:nth-child(even) {
    background: #f5f5f5;
}
#pdvoffice-table tr:nth-child(odd) {
    background: #fff;
}
#pdvoffice-table tbody > tr td {
    transition: 200ms ease all;
}
#pdvoffice-table tbody > tr:hover td {
    background: rgba(0,0,0,.075);
}
#pdvoffice-table thead td {
    background-color: var(--primary-color);
    color:var(--dark-gray-color);
    font-weight: bold;
    padding: .75em;
    white-space: nowrap;
}

#pdvoffice-table thead  tr {
    
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]).form-control,
textarea.form-control,
select.form-control {
    font-family: var(--body-font);
    font-size: 1rem;
    background: var(--light-gray-color);
    border: 0;
    color: var(--dark-gray-color);
    line-height: 1.5;
    padding: .75em 1em;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 300ms ease all;
    outline: 0;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: .675em;
    max-width: 600px;
    .row {
        display: flex;
        flex-direction: column;
        gap: .25em;
        > *:not(.btn) {
            display: block;
        }
        .form-control,
        .multi-select-button {
            width: 100%;
        }
        &[data-cols="2"] {
            flex-direction: row;
            gap: .5em;
            .row {
                flex: 0 0 calc(50% - .25em);
                max-width: calc(50% - .25em);
            }
        }
        .double-stack {
            display: flex;
            gap: .5em;
        }
    }
    label {
        cursor: pointer;
        font-size: 1em;
    }
}

.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
    background: var(--light-gray-color);
}
.login > table {
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    background: var(--white-color);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.login > table > tbody > tr > td[width="20%"] {
    display: none;
}
.login > table > tbody {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2em;
}
.login > table > tbody tr {
    width: 100%;
    display: block;
}
.login > table > tbody tr > td {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5em;
    text-align: center;
}
.login > table > tbody tr > td img {
    max-width: 200px;
    margin: 0 auto;
}
.login > table > tbody tr > td h1 {
    margin: 0;
    font-size: 1.5em;
    color: currentColor;
    border: 0;
}
.login > table > tbody tr > td #container {
    margin: 0;
    line-height: inherit;
    font-size: inherit;
}
.login > table > tbody tr > td #customForm {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75em;
}
.login > table > tbody tr > td #customForm .clear {
    display: none;
}
.login > table > tbody tr > td #customForm div,
.login > table > tbody tr > td #customForm .formgroup {
    margin: 0;
}
.login > table > tbody tr > td #customForm .formgroup span:not(.error) {
    display: none;
}
.login > table > tbody tr > td #customForm .formgroup span.error {
    color: #c01e2e;
    font-size: .875rem;
    margin: .5em 0 0;
    display: block;
    font-family: var(--primary-font), Arial, Helvetica, sans-serif;
}
.login > table > tbody tr > td #customForm label {
    font-size: inherit;
    color: inherit;
    font-weight: normal;
    font-family: var(--primary-font), Arial, Helvetica, sans-serif;
}
.login #customForm input {
    font-family: var(--body-font);
    font-size: 1rem;
    background: var(--light-gray-color);
    border: 0;
    color: var(--dark-gray-color);
    line-height: 1.5;
    padding: .75em 1em;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 300ms ease all;
    outline: 0;
    width: 100% !important;
    margin: 0;
}
.login #customForm .but {
    font-family: var(--primary-font), Arial, Helvetica, sans-serif;
	background: var(--primary-color);
	color: var(--dark-gray-color);
	display: block;
	font-size: 1rem;
    padding: .5em 1.25em;
	text-decoration:none;
	text-align:center;
    font-weight: bold;
	border-radius: 4px;
    transition: 200ms ease all;
    border: 0;
    height: 2.5em;
    margin: 0 auto;
    float: none;
    width: 100%;
    max-width: 200px;
}
.login #customForm .but span {
    font-size: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    line-height: unset;
}

.app-header {
    border-bottom: 2px solid var(--light-gray-color);
    padding: 0 0 1em;
    margin: 0 0 1em;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    align-items: center;
}
.app-search #container {
    padding: 1em 0 2em !important;
    
}
.app-search #container #customForm {
    display: flex;
    gap: 1em;
    align-items: center;
}
.app-search #container #customForm .clear {
    display: none;
}
.app-search #container #customForm .formgroup,
.app-search #container #customForm #formgroup {
    display: flex;
    flex-direction: column;
    gap: .25em;
    float: none !important;
    margin: 0 !important;
    min-width: 200px;
    max-width: 300px;
}
.app-search #container #customForm .formgroup > span,
.app-search #container #customForm #formgroup > span {
    display: none !important;
}
.app-search #container #customForm input,
.app-search #container #customForm .chosen-container {
    font-family: var(--body-font);
    font-size: 1rem;
    background: var(--light-gray-color);
    border: 0;
    color: var(--dark-gray-color);
    line-height: 1.5;
    padding: .75em 1em;
    border-radius: 4px;
    box-sizing: border-box;
    transition: 300ms ease all;
    outline: 0;
    width: 100% !important;
    margin: 0;
}
.app-search #container #customForm .chosen-container {
    padding: 0;
}
.chosen-container-single .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTEuOTk5OSAxMy4xNzE0TDE2Ljk0OTcgOC4yMjE2OEwxOC4zNjM5IDkuNjM1ODlMMTEuOTk5OSAxNS45OTk5TDUuNjM1OTkgOS42MzU4OUw3LjA1MDIgOC4yMjE2OEwxMS45OTk5IDEzLjE3MTRaIj48L3BhdGg+PC9zdmc+") 95% 50% no-repeat !important;
    background-size: 1.25em !important;
    padding: .75em 1em;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.chosen-container-active.chosen-with-drop .chosen-single {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTEuOTk5OSAxMC44Mjg0TDcuMDUwMiAxNS43NzgyTDUuNjM1OTkgMTQuMzY0TDExLjk5OTkgOEwxOC4zNjM5IDE0LjM2NEwxNi45NDk3IDE1Ljc3ODJMMTEuOTk5OSAxMC44Mjg0WiI+PC9wYXRoPjwvc3ZnPg==") 95% 50% no-repeat !important;
    background-size: 1.25em !important;
}
.chosen-container.chosen-with-drop .chosen-drop {
    border: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.chosen-container .chosen-drop .chosen-search {
    padding: .5em;
}
.chosen-container .chosen-drop .chosen-results {
    max-height: 20em;
    padding: 0;
    margin: 0;
}
.chosen-container .chosen-drop .chosen-results li {
    padding: .675em .75em;
    transition: 200ms ease all;
}
.chosen-container .chosen-drop .chosen-results li.active-result {
}
.chosen-container .chosen-drop .chosen-results li.result-selected {
    font-weight: bold;
    background: var(--light-gray-color)
}
.chosen-container .chosen-drop .chosen-results li.highlighted {
    background: var(--primary-color);
    color: var(--dark-gray-color);
}
.app-search #container #customForm div:last-child {
    align-self: flex-end;
}
.app-search #container #customForm .submitform.but {
    min-height: 3em;
    line-height: 2em;
}