:root {
    --color-primary-lightest: hsl(195, 80%, 94%);
    --color-primary: hsl(195, 100%, 45%);
    --color-primary-darker: hsl(195, 100%, 35%);
    --color-primary-darkest: hsl(195, 100%, 25%);

    --color-secondary: #003e6e;
    --color-dark: #062d4a;
    --color-complementary: #df6639;
    --color-white: #ffffff;
    --color-grey-lighter: #f7f7f7;
    --color-grey-light: #ecf0f1;
    --color-grey: #c8c8c8;
    --color-grey-dark: #919292;
    --color-grey-darker: #757575;

    --color-green: #28a745;
    --color-green-dark: #1c7a32;
    --color-orange: #df6639;
    --color-red: #dc3545;
    --color-red-dark: #be2c3b;

    --color-text: #495057;

    --state-grey: #ecf0f1;
    --state-grey-dark: #9d9e9f;
    --state-blue: var(--color-primary);
    --state-green: var(--color-green);
    --state-orange: var(--color-orange);
    --state-red: var(--color-red);

    --color-alert-info: #cce5ff;
    --color-alert-warning: #fff3cd;
    --color-alert-danger: #f5c6cb;

    --nav-height: 98px;
    --nav-height-slim: 58px;
    --nav-padding: 1.3rem;
    --nav-padding-slim: 0.5rem;
    --searchbar-height: 42px;
    --under-construction-height: 45px;
}

body {
    color: var(--color-text);
}
a {
    color: var(--color-primary-darker);
}

h2, h3, h4 {
    margin-top: 30px;
}


/**
 * transitions
 */
.fade-enter-active,
.fade-leave-active {
    transition-duration: .3s;
    transition-property: opacity;
    transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    transition-duration: 0.3s;
    transition-property: opacity, transform;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    transform: translate(2em, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    transform: translate(-2em, 0);
}



/**
 * basic styling
 */

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary.active,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-darker) !important;
    border-color: var(--color-primary-darker) !important;
}

.btn-green {
    background-color: var(--color-green);
    border-color: var(--color-green);
}
.btn-green:hover,
.btn-green:focus {
    background-color: var(--color-green-dark) !important;
    border-color: var(--color-green-dark) !important;
}

.btn-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-red {
    background-color: var(--color-red);
    border-color: var(--color-red);
}
.btn-red:hover,
.btn-red:focus {
    background-color: var(--color-red-dark) !important;
    border-color: var(--color-red-dark) !important;
}

.btn-grey {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}
.btn-grey:hover,
.btn-grey:focus {
    background-color: var(--color-grey-dark) !important;
    border-color: var(--color-grey-dark) !important;
}

.btn-outline,
.btn-outline:enabled:hover {
  color: var(--color-text);
  background-color: #ffffff !important;
  border-color: #ced4da;
}
.btn-outline:not(.p-disabled):hover,
.btn-outline:not(.p-disabled).p-focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-lightest);
}


.p-button:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary-light), 0 1px 2px 0 black;
}



.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.alert.alert-info {
    background-color: var(--color-alert-info);
}


/**
 * forms
 */

.form {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-light);
    border-radius: 5px;
}
.form-footer {
    margin: 0;
    padding-bottom: 15px;
}
.form-footer button {
    margin-left: 10px;
}
.form-space {
    border-bottom: 1px solid var(--color-grey-light);
    margin-top: 1lh;
    margin-bottom: 1lh;
}
.form-required {
    color: #f00;
}
.form-validation {
    font-size: 12px;
    color: #f00;
}
.form-input-invalid {
    border-color: #f00;
}
.form label {
    font-size: 14px;
}
.hint {
    color: var(--color-grey-dark);
}
.field {
    margin-bottom: 20px;
}
.field-checkbox {
    align-items: center;
    display: flex;
    margin-bottom: 1rem;
}
.field-checkbox > label,
.field-radiobutton > label {
    line-height: 1;
    margin-left: 0.5rem;
}



/**
 * prime vue theme adaption
 */

.w-100 .p-component {
    width: 100%;
}
/*
.p-component {
    padding-top: 10px;
    padding-bottom: 10px;
}
*/
.p-dialog {
    box-shadow: none;
}

.p-dialog .p-dialog-footer button {
    margin: 0;
}

.my-dialog {
    width: 70vw;
    height: 70vh;
}
.my-dialog.p-dialog .p-dialog-content {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0;
}
.my-dialog.p-dialog .p-tabview {
    padding: 0;
}
.my-dialog.p-dialog .p-dialog-footer button {
    margin-left: 10px;
}

.p-inputtext.p-inputtext-sm {
    padding: 7px 12px;
}
.p-inputtext:enabled:focus,
.p-inputtext:enabled:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-lightest);
}
.p-inputtext-fake {
    vertical-align: bottom;
    padding: 7px 12px;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-button-label {
    font-weight: 600;
}
.p-splitbutton.p-button-text > .p-button {
    color: #6c6c6c !important;
    background-color: #fff !important;
}

.p-button.p-button-text {
    box-shadow: none;
}
.p-button.p-button-text:enabled:active,
.p-button.p-button-text:enabled:focus,
.p-button.p-button-text:enabled:hover {
    border-color: transparent;
    background: none;
}
.p-button.p-button-icon-only.p-button-rounded.p-btn-table-icon {
    font-size: 12px;
    height: 30px;
    width: 30px;
}
.p-button.p-button-icon-only.p-button-rounded.p-btn-table-icon[disabled] {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}
.p-button-text.p-button-text-multi.btn-primary {
    color: var(--color-primary) !important;
    background-color: #ffffff !important;
    display: inline-block;
}
.p-button-text.p-button-text-multi.btn-primary:active,
.p-button-text.p-button-text-multi.btn-primary:focus,
.p-button-text.p-button-text-multi.btn-primary:hover {
    border: 1px solid var(--color-primary);
}

.p-checkbox {
    cursor: pointer;
    display: inline-flex;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: bottom;
}
.p-checkbox .p-checkbox-box.p-highlight {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
    border-color: var(--color-primary);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
    border-color: var(--color-primary);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
}


.p-inputwrapper-focus {
    border-color: var(--color-primary);
}

.p-dropdown:not(.p-disabled):hover,
.p-dropdown:not(.p-disabled).p-focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-lightest);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
    color: var(--color-text);
    background-color: var(--color-primary-lightest);
}


.p-dropdown.p-inputtext-sm {
    padding-top: 0;
    padding-bottom: 0;
}
.p-dropdown.p-inputtext-sm .p-dropdown-label {
    padding: 7px 12px;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
    padding: 7px 12px;
}
/*
.p-inputtext.p-dropdown-label {
    padding: 0 7px 0;
}
*/
.p-dropdown-panel .p-dropdown-items {
    padding: 0;
}

.p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-tbody > tr > td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.p-datatable .inline-input {
    max-width: 100%;
    margin-left: -13px;
    font-size: 1rem;
}
.p-datatable .inline-input .p-inputtext.p-inputtext-sm {
    font-size: 1rem;
}
.p-editable-column {
    padding-left: 0;
    padding-right: 0;
}

.p-datatable .p-sortable-column.p-highlight,
.p-datatable .p-sortable-column:hover,
.p-datatable .p-sortable-column.p-highlight:hover {
  color: var(--color-text);
  background-color: var(--color-primary-lightest);
}
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
  color: var(--color-text);
}

.p-datatable .p-sortable-column:focus {
  box-shadow: inset 0 0 0 0.15rem var(--color-primary-light);;
}

.p-datatable-wrapper {
  overflow-x: auto;
}

.table-buttons {
    width: 100px;
    white-space: nowrap;
}


.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    color: var(--color-text);
    background-color: var(--color-primary-lightest);
}

.p-tabview .p-tabview-nav .p-tabview-nav-link {
    color: var(--color-grey-dark);
    text-decoration: none;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
    box-shadow: none;
}

.p-inputgroup-sm .p-inputgroup-addon {
    padding: 0;
    width: 37px;
    min-width: 37px;
    max-width: 37px;
}
.p-inputgroup-sm .p-button {
    padding: 0;
    width: 37px;
}


.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
    background-color: var(--color-primary);
}
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
    /*background: var(--color-grey-light);*/
    color: var(--color-primary);
}
.p-galleria .p-galleria-item-nav,
.p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
    color: var(--color-primary);
    background-color: #ffffffa0;
}
.p-link:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary-lightest);
}
.p-togglebutton.p-button.p-highlight{
  border: none;
  background: var(--color-primary);
}
.p-togglebutton.p-button.p-highlight:hover{
  background: var(--color-primary-darker);
}

.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover,
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight){
  border: none;
}



/**
 * tooltips / popper
 */

.tooltipx {
    display: none;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.tooltipx[data-show] {
    display: block;
}

.tooltipx-arrow,
.tooltipx-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

.tooltipx-arrow {
    visibility: hidden;
}

.tooltipx-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

.tooltipx[data-popper-placement^='top']>.tooltipx-arrow {
    bottom: -4px;
}

.tooltipx[data-popper-placement^='bottom']>.tooltipx-arrow {
    top: -4px;
}

.tooltipx[data-popper-placement^='left']>.tooltipx-arrow {
    right: -4px;
}

.tooltipx[data-popper-placement^='right']>.tooltipx-arrow {
    left: -4px;
}

.datatable-search-bar {
  padding: 5px 10px;
  font-size: 0.875rem;
}