:root {
  --green: rgb(30,51,22);
  --lgreen: rgb(139,147,128);
  --yellow: rgb(225,201,67);
  --beige: rgb(250,241,226);
  --brown: rgb(91,77,50);
  --title-font: "Londrina Solid", sans-serif;
  --filter-green: brightness(0) saturate(100%) invert(13%) sepia(63%) saturate(470%) hue-rotate(59deg) brightness(94%) contrast(91%);
  --filter-beige: invert(93%) sepia(22%) saturate(127%) hue-rotate(353deg) brightness(97%) contrast(102%);
}
html{position: relative;}
body,.card,.navbar-toggler-icon {font-family: "Lato", sans-serif; font-weight: 400;color: var(--brown); background-color: var(--beige);}
.shoutout {padding: 2em; width: 100%;color: var(--beige); font-size: 1.3em; border-radius: 0 0 .4em .4em;}
.shoutout h1 {font-size: 5em!important}
.bg-white {background-color: #fff!important;} 
.text-beige {color: var(--beige)}
.text-green,.green {color: var(--green)};
.bg-beige {background-color: var(--beige)!important;} 
.btn-yellow,.btn-yellow:hover {background-color: var(--yellow)!important; color: var(--green); cursor: pointer} 
footer,.bg-green {background-color: var(--green)!important;}
footer {color: var(--beige); border-radius: .4em .4em 0 0;}
.form-label {font-weight: bold;}
.form-label-checkbox {font-weight: normal!important}
.col-story img {object-fit: cover; width: 100%; height: 300px;}
h1,h2,h3,.card-title {
  font-family: var(--title-font);
  font-optical-sizing: auto!important;
  font-weight: 900!important;
  font-style: normal!important;
}
h1 {font-size: 2em}
h2 {font-size: 1.6em}
h2 {border-bottom: 1px solid var(--brown); font-family:"Londrina Solid"!important}
h2>button {position: relative; top: -.4em;}
.accordion-header,.accordion-button {background-color: var(--lgreen)!important;border-color: var(--green)!important;}
.card-title {font-size: 2em}
.card-title-flag {width: 1.1em; margin-right: .3em; margin-bottom: .2em}
.card-image-top {width: 100%; height: 15vw; object-fit: cover;}
.card-body {height:10vw}
.navbar {background-color: var(--green);}
.logo,.social-icon,.filter-beige {filter: var(--filter-beige);}
.jumbotron-icon {filter: var(--filter-green); width: 150px;}
.footer img.logo {width: 200px;}
.social-icon {width: 2em;}
.navbar-brand {margin: 0; padding: 0; font-family: var(--title-font); font-size: 1.6em;}
.nav-link,.navbar-brand {color: var(--beige)!important}
.nav-link:hover,.nav-link.active {text-decoration: underline;}
fieldset {border: 1px solid #000!important; border-radius: 8px!important; padding: 0 0.5em!important;}
legend {font-size: 1em; font-weight: bold; text-decoration: none!important; padding: 0!important; margin: 0!important; border-bottom: none!important;width: auto!important}
code {word-wrap: break-word;}
.page-header {margin: 0 0 1.5em 0}
section {border-top: 1px solid var(--lgreen); margin: 2em 0}
section:first-child {border-top: none}
.navbar-fixed-top {z-index: 3!important}
.navbar-link {color: var(--lgreen)!important}
.table-sortable th {vertical-align: top!important; background-color: #eee;}
.no-sort::after {display: none!important; }
.no-sort {cursor: default!important; padding-left: .8em!important }
.text-small {font-size: .8em}
.text-comment {font-size: .7vw; color: #ccc}
.reldiv {display: inline-block; margin-right: .4em;line-height: .8em;}
.fieldset {border-radius: 0!important; border: none!important; background-color: #eee; margin-bottom: 2em}
.fieldset >legend {position: relative; padding: .5em!important; height: 2em; left: -.5em; top: -1em; background-color: #eee}
.table-bordered thead:first-child {background-color: #ddd}
.table-bordered .normal {background-color: transparent}
.help-block {font-size: .9em; font-style: italic}
.footnote {font-size: .8em; font-style: italic; text-align: right}
.table-middle tr>td,.table-form tr>td:not(:first-child) {vertical-align: middle!important;}
.container-dark {color: var(--beige); background-color: var(--green);}
.container-dark input,.form-dark select,.form-dark textarea {background-color: var(--lgreen)!important;}
.table-form {overflow: hidden!important}
.table-form tr>td:first-child {width: 30%; padding:.5em!important;vertical-align: top!important;}
.table-form input[type='text'],.table-form input[type='password'],.table-form input[type='date'],.table-form input[type='email'],.table-form textarea,.table-form input[type='url'],.table-form select {display: block; padding: 2px .5em !important; margin: 0 !important; border: 0 !important; width: 100% !important; border-radius: 0 !important; line-height: 1 !important;}
.table-form textarea {padding-top: .8em!important}
.table-form .bootstrap-select .btn {border: none!important; padding-left:.5em!important}
.table-form input[type='checkbox'] {display: block; float: left; margin:.2em!important; width: auto!important; }
.table-form tr>td {height: 2.4em!important; margin: 0!important; padding: 0!important;}
.table-form label {display: block; float: left; font-weight: normal; margin: .35em 1em .35em .35em!important}
.table-form tr>td.text-static {padding-left: .5em!important}
.table-form .form-control-static,.table-form .help-block {margin-left: .5em}
.table-slider {position:relative; margin: 0; height: 2.6em; border: none}
.table-slider tr>td {text-align: center;  border-right: 1px solid var(--tyellow)}
.table-form-large tr>td:first-child {width: 60%!important}
.nopadding {padding: 0 !important;  margin: 0 !important;}
.nopadding:first-child {padding-left: 1.1em!important}
.nopadding:last-child {padding-right: 1.1em!important}
.mcheckbox label {font-weight: normal}
.tab-content{border: 1px solid #ccc; border-top: none; padding:1em}
.sub-header {margin:0; padding: 0; width: 100%}
.modal .btn-submit {margin:0!important}
ol.breadcrumb {padding: .7em 1em; background-color: var(--tyellow)}
.btn-primary,.btn-secondary:hover {color: var(--yellow); background-color: var(--green);}
.btn-secondary,.btn-primary:hover {color: var(--green); background-color: var(--yellow);}
.btn-submit {margin-top: 1em;}
.text-bold {font-weight: bold!important}
.panel-heading a,.panel-heading a:hover {text-decoration: none}
.panel-heading a:after {font-family:'FontAwesome'; content:"\f13a"; float: right; color: grey;}
.panel-heading a.collapsed:after {content:"\f139"}
.trash:before {color: rgba(255,0,0,.8)!important}
.explain {margin: 1em 0;}
hr {clear: both}
.off {display: none}
.modal-title {color:  var(--green)}
.row.striped {border: 1px solid transparent; border-bottom: 1px solid #ddd}
.inactive,.row-inactive td {color: #aaa!important}
.row.striped:last-child {border-bottom: 1px solid transparent!important;}
.clickable,.pointer {cursor: pointer!important}
.bgcolor-success {background-color: #41d060!important; color: #fff!important}
.bgcolor-info {background-color: #47b8e7!important; color: #fff!important}
.bgcolor-warning {background-color: #fcf8e3!important; color: #8a6d3b!important}
.bgcolor-danger {background-color: #ff3333!important; color: #fff!important}
.color-success,.icon-success:before {color: #41d060!important;}
.color-info {color: #47b8e7}
.color-warning {color: #8a6d3b!important;}
.color-danger,.icon-danger:before {color: #ff3333}
.amount,.currency {text-align: right}
.currency:before {content: '€ '}
td.amount,td.currency,th.amount,th.currency {width: 1em}
.form-inline label {display: inline-block; height: 2.2em; line-height: 2.2em; margin: 0;}
.form-inline .form-group {margin:0;}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {background-color: #fcfcfc!important;}
.form-control.alert-danger {background-repeat: no-repeat; background-position: right 10px center; background-image: url(../images/warning.png)!important}
.alert-container {position: relative}
.input-group .alert-container {top: 2.3em}
.alert-comment {position: absolute; z-index: 9999; top:-2.2em; right: 3em; font-size: .8em; white-space: nowrap;}
.selectize-input {background-color: inherit!important}
.selectize-input {vertical-align: middle; padding:0!important; margin:0 0 0 0; border: none!important; border-radius: none!important; box-shadow: none!important; background: inherit!important; color: inherit;}
.selectize-dropdown,.selectize-input,.selectize-input input {line-height: 2.6em!important}
.tooltip > .tooltip-inner {background-color: var(--yellow)}
.tooltip.top > .tooltip-arrow {border-top: 5px solid var(--yellow);}
.tooltip-error + .tooltip > .tooltip-arrow {border-top-color: #a94442}
.tooltip-error + .tooltip > .tooltip-inner {background-color: #a94442!important;}
.label {font-style: italic}
a.external-link:hover {text-decoration: none}
a.external-link:after {font-family: 'FontAwesome'!important; content: '\f08e'!important}
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #d9534f;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f0ad4e;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #5bc0de;
}

.modal.in {
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
  }
  .modal.in .modal-dialog.aside {
    -webkit-transform: -340px;
    -moz-transform: -340px;
    -ms-transform: -340px;
    -o-transform: -340px;
    transform: -340px;
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(-340px);
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(-340px);
    -o-transform: scale(0.8) rotateY(45deg) translateZ(-340px);
    transform: scale(0.8) rotateY(45deg) translateZ(-340px);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .modal.in .modal-dialog.aside.aside-1 {
    -webkit-transform: calc(-340px + 40px);
    -moz-transform: calc(-340px + 40px);
    -ms-transform: calc(-340px + 40px);
    -o-transform: calc(-340px + 40px);
    transform: calc(-340px + 40px);
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + 40px));
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + 40px));
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + 40px));
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + 40px));
  }
  .modal.in .modal-dialog.aside.aside-2 {
    -webkit-transform: calc(-340px + (40px * 2));
    -moz-transform: calc(-340px + (40px * 2));
    -ms-transform: calc(-340px + (40px * 2));
    -o-transform: calc(-340px + (40px * 2));
    transform: calc(-340px + (40px * 2));
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 2)));
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 2)));
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 2)));
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 2)));
  }
  .modal.in .modal-dialog.aside.aside-3 {
    -webkit-transform: calc(-340px + (40px * 3));
    -moz-transform: calc(-340px + (40px * 3));
    -ms-transform: calc(-340px + (40px * 3));
    -o-transform: calc(-340px + (40px * 3));
    transform: calc(-340px + (40px * 3));
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 3)));
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 3)));
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 3)));
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-340px + (40px * 3)));
  }

@media (max-width: 768px) {
    body{font-size: 16px;}
}