/* FONT
================================================== */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap&subset=latin-ext');

/* BASE
================================================== */

html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
}

*, *:focus {
	outline: none !important;
}

body {
	font-size: .875rem;
	line-height: 1.5;
    font-weight: 400;
	color: #000;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

body, input, button, textarea {
	font-family: Montserrat, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
	font-weight: 700;
}

h1, .h1 {
	font-size: 2.1rem;
}

h2, .h2 {
    margin-left: 0.2rem;
	font-size: 1.9rem;
}

h3, .h3 {
	font-size: 1.7rem;
    margin-left: .2rem;
}

h4, .h4 {
	font-size: 1.45rem;
}

h5, .h5 {
	font-size: 1.225rem;
    margin-bottom: 1rem;
}

h6, .h6 {
	font-size: 1.125rem;
    margin-bottom: 1rem;
}

p,
ul,
ol,
table,
figure {
	margin-bottom: 2rem;
}

a, input, textarea, button {
    -webkit-transition: color .3s, background-color .3s, border-color .3s, opacity .3s;
            transition: color .3s, background-color .3s, border-color .3s, opacity .3s;
}

a,
a:focus {
    text-decoration: none;
	color: #137DB1;
}

a:hover {
    text-decoration: underline;
	color: #221F1F;
}

/* use this if you want mark visited links */
.link-marked a:visited {
    color: #8cd0f3; /* lighter version of 137DB1 */
}
.link-marked .period-closed a:visited {
    color: red;
}

img {
	max-width: 100%;
}

figure img {
	width: 100%;
}

hr {
    margin: 2rem auto;
    border: 0;
    border-top: 1px solid #000;
}

/* LAYOUT
================================================== */

.container {
    min-width: 1800px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-size: 120%;
}

.logo {
    width: 300px;
}

.navigation a {
    display: inline-block;
    margin: 0 .23rem;
}

.header td {
    vertical-align: middle;
    border-bottom: 1px solid #c0c0c0;
}

/* COMPONENTS
================================================== */

/*
    UI widget content
*/

body .ui-widget {
    font-size: inherit;
}

body .ui-widget-content a {
    color: #137DB1;
}

body .ui-widget-content table thead a,
body .ui-widget-content table thead a:hover,
body .ui-widget-content table thead a:focus,
body .ui-widget-content table th a,
body .ui-widget-content table th a:hover,
body .ui-widget-content table th a:focus {
    color: #fff;
}

body .ui-widget-content thead a:hover,
body .ui-widget-content th a:hover {
    opacity: .6;
}

/*
    Alert
*/

/* vpecsi: added aliases for flash message categories*/
.alert {
    margin-bottom: .5rem;
    padding: .5rem 1.5rem;
    border: 2px solid transparent;
    font-weight: 700;
    border-radius: .5rem;
}

.alert--danger, .error {
    color: #AE171B;
    border-color: #AE171B;
}

.alert--info, .info, .message {
    color: #35BBFE;
    border-color: #35BBFE;
}

.alert--success, .success {
    color: #3db282;
    border-color: #3db282;
}

.alert--warning, .warning {
    color: #ee9a16;
    border-color: #ee9a16;
}

/*
    Titles
*/

.headline {
    margin-top: 2rem;
    text-align: center;
}

/*
    Form components
*/

.form-group {
    display: block;
    margin-bottom: 2rem;
}

.form-group-sm {
    display: block;
    margin-bottom: 1rem;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
textarea,
select {
    display: block;
    width: 100%;
    padding: .5rem;
    border: 1px solid #000;
    font-size: .875rem;
    line-height: 1.25;
    text-indent: 0;
    color: #000;
    background: #fff;
    border-radius: .5rem;
}


select {
    padding-left: .625rem;
}

/* vpecsi: form border not needed (and ugly) inside the treeselect input field */
.spot-tree input {
    border: 0px;
}
.spot-tree spots {
    border-radius: 0.5rem;
}

.dutytree input {
    border: 0px;
}
.dutytree spots {
    border-radius: 0.5rem;
}

.label-horizontal {
    display: inline-block;
    padding-top: .5rem;
}

body .select2-container {
    width: 100% !important;

}

body .select2-container .select2-selection--single {
    height: 2.1875rem;
    border-color: #000;
    border-radius: .5rem;
}

body .select2-container .select2-selection--single .select2-selection__rendered {
    padding: .4rem 1rem;
    line-height: 1.5;
}

body .select2-container--default.select2-container--disabled .select2-selection--single {
    background: #fff;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: .3rem;
}

.select2-results__options {
    font-size: larger;
}

/*
    Buttons
*/

body input[type="submit"],
body input[type="button"],
body button,
body .btn,
body a.btn,
body input[type="submit"]:focus,
body input[type="button"]:focus,
body button:focus,
body .btn:focus {
    display: inline-block;
    padding: .5rem;
    border: 1px solid #137DB1;
    font-size: .875rem;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: #137DB1;
    cursor: pointer;
    border-radius: .5rem;
    -webkit-transition: all .3s;
            transition: all .3s;
}

body input[type="submit"]:hover,
body input[type="button"]:hover,
body button:hover,
body .btn:hover,
body input[type="submit"].active,
body input[type="button"].active,
body button.active,
body .btn.active {
    text-decoration: none;
    color: #fff;
    background: #003654;
    border-radius: .5rem;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
            box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

body .btn-error,
body a.btn-error {
    border-color: #AE171B;
    background: #AE171B;
}

body .btn-error:hover,
body a.btn-error:hover {
    border-color: #7E070B;
    background: #7E070B;
}

.btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

.checkbox {
    position: relative;
    display: inline-block;
    padding-left: 2rem;
    color: pointer;
}

    .checkbox input {
        position: absolute;
        visibility: hidden;
        z-index: -1;
        opacity: 0;
    }

    .checkbox input + span {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid #000;
        border-radius: .25rem;
    }

    .checkbox input + span:after {
        position: absolute;
        visibility: hidden;
        content: "";
        top: .25rem;
        right: .25rem;
        bottom: .25rem;
        left: .25rem;
        background: #000;
        opacity: 0;
        border-radius: .25rem;
        -webkit-transition: all .3s;
                transition: all .3s;
    }

    .checkbox input[type="radio"] + span,
    .checkbox input[type="radio"] + span:after {
        border-radius: 100%;
    }

    .checkbox input:checked + span:after {
        visibility: visible;
        opacity: 1;
    }

.btn--icon i {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 5rem;
}

.btn-fake-link {
  all: unset; /* vpecsi: remove button formatting */
  background: none!important;
  border: none;
  padding: 0!important;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  font-size: 2rem;
  margin-right: 1rem;
  -webkit-transition: 0s;
  transition: 0s;
}


.icon-btn,
.icon-btn:hover,
.icon-btn:focus {
    text-decoration: none;
}

.icon-btn {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    font-size: 2rem;
    margin-right: 1rem;
}

.icon-btn:last-child {
    margin-right: 0;
}

.icon-btn--sm {
    font-size: 1.5rem;
    margin-right: .5rem;
}

button[disabled]{
    border: none;
    background-color: #cccccc;
    color: #666666;
}
button[disabled]:hover{
    border: none;
    background-color: #cccccc;
    color: #666666;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*
    Tooltip
*/

[data-tooltip] {
    position: relative;
}

[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    content: "";
    z-index: 1;
    top: 50%;
    left: 100%;
    margin: -6px 0 0 0;
    border-right: 6px solid rgba(0, 0, 0, .8);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    opacity: 0;
    -webkit-transition: all .3s;
            transition: all .3s;
}

[data-tooltip]:after {
    position: absolute;
    visibility: hidden;
    content: attr(data-tooltip);
    z-index: 1;
    top: 50%;
    left: 100%;
    width: 260px;
    margin-left: 6px;
    padding: .5rem 1rem;
    font-size: .875rem;
    text-align: center;
    text-transform: none;
    font-weight: 400;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    border-radius: .5rem;
    -webkit-transition: all .3s;
            transition: all .3s;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}

.icon-btn[data-tooltip]:before {
    margin-left: -6px;
}

.icon-btn[data-tooltip]:after {
    margin-left: 0;
}

.tooltip-left[data-tooltip]:before {
    z-index: 1;
    top: 50%;
    left: -900%;
    border-right: 6px solid transparent; /* this hides the arrow, in the future it would be nice to create arrow for this one too */
}

.tooltip-left[data-tooltip]:after {
    z-index: 1;
    top: 50%;
    left: -900%;
}

.tooltip-bottom[data-tooltip]:before {
    z-index: 1;
    top: 190%;
    left: -350%;
    border-right: 6px solid transparent; /* this hides the arrow, in the future it would be nice to create arrow for this one too */

}

.tooltip-bottom[data-tooltip]:after {
    z-index: 1;
    top: 190%;
    left: -350%;
}

/*
    Table
*/

table {
    border-collapse: collapse;
}

td,
th {
    padding: .5rem;
    vertical-align: top;
}

thead {
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    background: #137DB1;
}

    thead a,
    thead a:hover,
    thead a:focus,
    th a,
    th a:hover,
    th a:focus {
        color: #fff;
    }

    thead a:hover,
    th a:hover {
        opacity: .6;
    }

.table--equal {
    table-layout: fixed;
}

.table {
    font-size: 100%;
    border: 1px solid #000;
    border-bottom: 0;
}

.table th,
.table td {
    vertical-align: middle;
    text-align: left;
    border: 1px solid gray;
}

.table .icon-btn {
    line-height: 1;
}

.table .icon-btn + .icon-btn {
    margin-top: .5rem;
}

.table tbody tr:nth-child(even) td {
    background: #f6f6f6;
}

.table tbody tr:nth-child(odd) td {
    background: #ffffff ;
}

.table-w50 {
    width: 50%;
}

.table-simple th,
.table-simple td {
    border: 1px solid #000;
}

.table-simple tbody tr:nth-child(even) th,
.table-simple tbody tr:nth-child(even) td {
    background: transparent;
}

    .table table {
        margin: 0;
    }

        .table table th,
        .table table td {
            padding: 0 .25rem;
            border: 0;
        }

.table-dense {
    max-width:1750px;
	font-size: 90%;
	line-height: 1;
    font-weight: 400;
	color: #000;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}


.divTableHeader {
    display:grid;
    grid-template-columns: 10% 10% 80%;
    border: 2px solid #111;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    background: #137DB1;
}

.divTableHeaderCell {
    border-right: 1px solid #111;
    padding: 0 .25rem;
}

.divTableRow {
    display:grid;
    grid-template-columns: 10% 10% 80%;
    border: 2px solid #111;
    border-top: 0px solid #000;

}
.divTableCell {
    border-right: 1px solid #111;
    padding: 0 .25rem;
}

/*
    Boxed
*/

.gray-box, .boxed{
    background-color: rgb(246, 246, 246);
    padding: 1rem;
    border-radius: 10px;
    margin: 6px;
}


.container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


.form-row {
    padding-bottom: 10px;
}

.event-mnt-header {
    grid-area: header;
}

.event-mnt-header-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.event-mnt-messages {
    grid-area: messages;
}

.event-mnt-schedule {
    grid-area: schedule;
}

.event-mnt {
    display: grid;
    grid-template-columns: 27% 27% 16% 25%;
    grid-template-rows: 2;
    grid-gap: 0.2em;

}

.event-mnt-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 2;
    grid-gap: 2em;

}

.event-mnt-schedule-grid {
    display: grid;
    grid-template-columns: 37% 60%;
    grid-template-rows: auto;
    grid-gap: 3.6em;

}

.event-mnt-pt {
    width:50%;
    min-width:760px;

}

.form-field {
    margin-bottom: 10px;
}

.event-plan {
    width: 77%;

}
.event-schedule {
    width: 100%;

}

.event-mnt-textarea {
    height:100px;
}

.larger-fonts {
    font-size: 120%;
}

body .ui-tabs-nav.ui-corner-all,
body .ui-tabs-nav.ui-corner-bottom,
body .ui-tabs-nav.ui-corner-left,
body .ui-tabs-nav.ui-corner-bl {
    border-radius: 0;
}

body .ui-tabs .ui-tabs-panel {
    padding: 0;
}

body .ui-tabs-panel {
    padding: 0;
    bottom: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

body .ui-tabs-nav {
    border: 0;
    background: transparent;
}

body .ui-tabs .ui-tabs-nav {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 2rem;
    border-bottom: 1px solid #000;
}

body .ui-tabs .ui-tabs-nav li,
body .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin: 0;
    padding: 0;
}

body .ui-state-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active,
body .ui-state-default,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default {
    border: 0;
    font-weight: 400;
    background: transparent;
}


body .ui-tabs-nav .ui-state-default a,
body .ui-tabs-nav .ui-state-default a:link,
body .ui-tabs-nav .ui-state-default a:visited {
    display: block;
    color: #000;
    border-bottom: 5px solid transparent;
}

body .ui-tabs-nav .ui-state-active a,
body .ui-tabs-nav .ui-state-active a:link,
body .ui-tabs-nav .ui-state-active a:visited {
    border-bottom-color: #137DB1;
}





body .ui-tabs-nav .ui-state-default,
body .ui-tabs-nav .ui-widget-content .ui-state-default,
body .ui-tabs-nav .ui-widget-header .ui-state-default {
    border-top: 0;
}

body .ui-tabs {
    bottom: auto;
    padding: 1rem;
    border: 0;
    background: #f6f6f6;
    border-radius: .5rem;
}

body .ui-datepicker .ui-datepicker-title select {
    display: inline-block;
    width: 45%;
    margin: 0 .25rem;
    padding: .25rem;
}

body .ui-datepicker .ui-datepicker-header {
    border: 0;
    background: #137DB1;
    border-radius: 0;
}

body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next,
body .ui-datepicker .ui-datepicker-prev-hover,
body .ui-datepicker .ui-datepicker-next-hover {
    top: 5px;
}

body .ui-datepicker .ui-datepicker-buttonpane {
    clear: both;
}

body .ui-datepicker .ui-datepicker-buttonpane button {
    color: #fff;
    background: #137DB1;
    border-radius: .5rem;
}

body .ui-slider .ui-slider-handle {
    background: #137DB1;
}

/*
    Sidebar menu
*/

#operator-menu,
#operator-menu ul {
    padding: 0;
    list-style-type: none;
}

    #operator-menu a {
        display: block;
        padding: 2px 2px;
    }

    #operator-menu ul {
        position: absolute;
        display: none;
        z-index: 10;
        top: 100%;
        left: 0;
        min-width: 120px;
        background: #137DB1;
        border-radius: 5px;
    }

    #operator-menu li:hover > ul {
        display: block;
    }

        #operator-menu ul a {
            color: #fff;
            border-radius: 5px;
        }

            #operator-menu ul a:hover {
                text-decoration: none;
                color: #fff;
                background: #003654;
            }

#operator-menu > li {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-size: 100%;
}

body #cookie-bar {
    padding: 10px;
    background: #137DB1;
}

body #cookie-bar a {
    padding: 5px 10px;
}

body #cookie-bar .cb-enable {
    background: #090;
}

body #cookie-bar .cb-enable:Hover {
    background: #070;
}

body #cookie-bar .cb-policy {
    color: #137DB1;
    background: #fff;
}

body #cookie-bar .cb-policy:hover {
    color: #137DB1;
    background: rgba(255, 255, 255, .8);
}

/* GLOBALS
================================================== */

.w-100 {
    width: 100%;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

table .vertical-top {
    vertical-align: top;
}

table .vertical-middle {
    vertical-align: middle;
}

table .vertical-bottom {
    vertical-align: bottom;
}

.content-center {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.event-schedules-plan-too-few {
    display: inline-block;
    padding: .125rem .25rem 0;
    font-weight: bold;
    color: #fff;
    background: #AE171B;
    border-radius: .25rem;
}

.event-schedules-plan-OK {
    font-weight: bold;
    color: #3db282;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

.miw-400 {
    min-width: 400px;
}

.pt-1 {
    display: inline-block;
    padding-top: .5rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: .5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: .5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.no-border {
    border: 0 !important;
}

.no-border-top {
    border-top: 0 !important;
}

.no-border-right {
    border-right: 0 !important;
}

.no-border-bottom {
    border-bottom: 0 !important;
}

.no-border-left {
    border-left: 0 !important;
}

.calendar-PWD, .calendar-PWD a {
    /*color: Black;*/
}
.calendar-RD, .calendar-RD a {
    color: Red;
}
.calendar-HD, .calendar-HD a {
    color: DarkRed;
}

.badge {
    padding-top: 5em;
    display: inline-block;
    min-width: 2em;
    padding: .3em;
    border-radius: 50%;
    font-size: 70%;
    text-align: center;
    background: #FF0000;
    color: #fefefe;
}

/**********************************
Responsive components
see: https://webmadewell.com/css-grid-responsive-layouts/
***********************************/
.layout-grid-simpleform {
    padding: 2%;
    display: grid;
    grid-template-columns: 0% 95% 0%;
    grid-row-gap: 20px;
}

@media only screen and (min-width: 800px) {
    .layout-grid-simpleform {
        grid-template-columns: 1fr 800px 1fr;
        grid-row-gap: 15px;
    }
}

.main-element {
    display: grid;
    grid-row-gap: .7em;
}

.responsive-fields-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: .5em;
    grid-row-gap: 15px;
}

@media only screen and (min-width: 640px) {
    .responsive-fields-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: .5em;
        grid-row-gap: 15px;
    }
}

.responsive-fields-3 {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: .5em;
    grid-row-gap: 15px;
}

@media only screen and (min-width: 640px) {
    .responsive-fields-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: .5em;
        grid-row-gap: 15px;
    }
}

.submit-button {
    margin-top: 1em;
}
.period-closed, .period-closed a{
    color:red;
}
.summary-item{
    border-top:1px solid #aaa;
}
.hidden {
    color:transparent;
}

.la-exclamation-triangle {
    color:#AE171B;
}
/*.la-exclamation-triangle.unchecked {
    color:lightgrey;
}*/

.la-exclamation-triangle.unchecked .exclamation-title {
    display:none;
}
.exclamation-title {
    font-size:1rem;
}

tr.tr-hide {
    /*display:none;*/
    border:5px solid red;
}