/* Custom styling for Backend */
:root {
    --svgUrlProfile: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 220 220" fill="none"><rect width="220" height="220" x="0" y="0" fill="%234d4d4d"/><circle cx="110" cy="220" r="110" fill="white" /><circle cx="110" cy="60" r="66" fill="white" stroke="%234d4d4d" stroke-width="22"/></svg>');
    --svgUrlLogin: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 220 220" fill="none"><rect width="220" height="220" fill="%234d4d4d"/><path d="M 110 55 L 110 44 Q 110 33 121 33 L 187 33 Q 198 33 198 44 L 198 176 Q 198 187 187 187 L 121 187 Q 110 187 110 176 L 110 165" stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/><path d="M 33 110 L 121 110 M 99 88 L 121 110 L 99 132" stroke="white" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
    --svgUrlLogout: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 220 220" fill="none"><rect width="220" height="220" fill="%234d4d4d"/><path d="M 110 55 L 110 44 Q 110 33 99 33 L 33 33 Q 22 33 22 44 L 22 176 Q 22 187 33 187 L 99 187 Q 110 187 110 176 L 110 165" stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/><path d="M 88 110 L 176 110 M 154 88 L 176 110 L 154 132" stroke="white" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
}

html, body {
    height: 100%;
    overflow: hidden;
}
/*.label:not(:last-child) {
    margin-bottom: 0.25em;
}*/
label {
    font-weight: var(--font-semi-bold);
}
/* Labels in horizontal formset rows before selects (e.g., Role in contacts) */
.field.is-grouped .control > label:has(+ .select) {
    font-weight: var(--font-semi-bold);
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    line-height: 2.5em;
}
/* Labels in horizontal formset rows before inputs (e.g., Name, Description in photos) */
.field.is-grouped .control > label:has(+ input) {
    font-weight: var(--font-semi-bold);
    display: block;
    margin-bottom: 0.1em;
}
/* Checkbox labels in horizontal formset rows (e.g., Delete) */
.field.is-grouped .control > label.checkbox {
    font-weight: var(--font-semi-bold);
    line-height: 2.5em;
    cursor: pointer;
    margin-left: 0.5rem;
}
.control {
    margin-top: 0.125em;
}
.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* top-right nav buttons */
#button-profile, #button-login, #button-logout {
    background-repeat: no-repeat;
    background-position-x: 93%;
    background-position-y: 2px;
}
#button-profile {
    background-image: var(--svgUrlProfile);
}
#button-login {
    background-image: var(--svgUrlLogin);
}
#button-logout {
    background-image: var(--svgUrlLogout);
}
#button-login:hover::after, #button-logout:hover::after, #button-profile:hover::after, #button-register:hover::after  {
    position: absolute;
    width: 182px;
    background-color: var(--highlight);
    color: var(--whiteGrey);
    border-radius: 2px;
    box-shadow: 1px 1px 5px 0 var(--black-40);
    text-align: right;
    text-transform: none;
    font-weight: bold;
    font-size: 90%;
    line-height: 1.2em;
    padding: 5px 7px;
    z-index: 1000;
    opacity: 0.925;
}
#button-login:hover::after, #button-logout:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: pre; /* allows \A to render as a line break */
    right: 23px;
    top: 54px;
    z-index: 999;
}
#button-register:hover::after, #button-profile:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: pre; /* allows \A to render as a line break */
    right: 136px;
    top: 54px;
    z-index: 1000;
}

/* general text */
.block:not(:last-child), .box:not(:last-child), .breadcrumb:not(:last-child), .content:not(:last-child), .level:not(:last-child), .message:not(:last-child), .notification:not(:last-child), .pagination:not(:last-child), .progress:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .tabs:not(:last-child), .title:not(:last-child) {
  margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semi-bold) !important;
}
h2 {
    margin-top: 0.5em;
    margin-bottom: 1rem;
    font-weight: var(--font-semi-bold);
}
h2.title.is-4 {
    margin-top: 0.25em;
}

.notification {
    font-weight: var(--font-semi-bold);
    padding: 1rem 1.25rem 1rem 1.25rem;
    border: solid 2px var(--whiteYellow);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    border-radius: 6px;
}
.help.is-danger {
    font-size: 0.9rem;
    font-weight: var(--font-semi-bold);
    background: rgba(241,70,104,0.25);
    border-radius: 3px;
    margin: 0.33rem 0 0 0;
    padding: 0.125rem 0.25rem;
}
.help.is-danger::before {
    content: "⚠️ ";
    position: relative;
    bottom: 1px;
}

/* forms */
.button {
    font-weight: var(--font-bold);
    border: solid 2px var(--whiteYellow) !important;;
    box-shadow: 0px 0px 4px 0 var(--black-20);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}
.button:hover, .button.is-hovered, .button:focus {
    opacity: 0.66;
    border: solid 2px var(--whiteYellow) !important;
    box-shadow: 0px 0px 4px 0 var(--black-25);
    text-decoration: none;
}

.button.is-primary, .button.is-primary:hover, .button.is-primary:focus {
    background-color: var(--highlight);
}
.button.is-link, .button.is-link:hover, .button.is-link:focus {
    /* background-color: #485fc7; */
    background-color: var(--highlight);
}
.button.is-link a {
    text-decoration: none !important;
}
.button a {
    /* Ensure nested links inherit button styling */
    color: inherit;
    text-decoration: none;
    display: inline-block;
}
.button a:focus, .button a:active {
    color: inherit;
    text-decoration: none;
}
.button.is-info, .button.is-info:hover, .button.is-info:focus {
    /* e.g. use for: details */
    /*background-color: #3e8ed0;*/
    background-color: var(--highlightLight);
}
.button.is-success, .button.is-success:hover, .button.is-success:focus {
    /* e.g. use for: new   #48c78e; */
    background-color: #8abda6
}
.button.is-warning, .button.is-warning:hover, .button.is-warning:focus {
    /* e.g. use for: edit ffe08a*/
    background-color: #fce5a5;
}
.button.is-danger, .button.is-danger:hover, .button.is-danger:focus {
    /* e.g. use for: delete */
    background-color: #f14668;
}
.button.in-neutral {
    background-color: var(--greyCCC);
}
.button button, button:hover, .button a:hover, .button button:focus {
    text-decoration: none;
}

/* Vertical centering */
.columns.is-vcentered {
    /* Calculate available height: viewport - header - footer - container padding */
    min-height: calc(100vh - var(--headerHeight, 70px) - var(--footerHeight, 50px) - 3rem);
    align-items: center;
}

/* box */
.box-light {
    border: solid 1px var(--grey-25);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background-color: var(--greyEEE);
    box-shadow: 0 0 4px var(--black-05);
}

/* Reduce top padding for the first heading inside a box */
.box h3:first-of-type {
    margin-top: 0.25rem;
}

.card {
    box-shadow: 0px 0px 8px 0 var(--black-10);
    transition: all 0.2s ease-in-out;
}
.card:hover {
    /*background-color: var(--whiteGrey);*/
    box-shadow: 0px 0px 8px 0 var(--black-20);
}

.dashboard-card p.subtitle.is-6 {
    padding-top: 0.75rem;
    margin-bottom: 0.25rem;
}
.card-content {
    padding: 1rem 1.25rem 1.25rem 1.25rem;
}

.numbercount {
    border: solid 1px var(--greyBBB);
    border-radius: 4px;
    padding: 0 0.3rem;
    background-color: var(--greyEEE);
    margin: 0 0.1rem;
    font-weight: var(--font-semi-bold);
    font-family: Consolas;
    font-size: 90%;
}
.numbercount.green {
    background-color: lightgreen;
}
.numbercount.red {
    background-color: orange;
}
/* tables */
table {
    border-collapse: collapse;
    box-shadow: 0 0 4px var(--black-10);
}
tr:nth-child(2n) {
  background-color: var(--greyF8);
  transition: all 0.25s ease;
}
tr:nth-child(2n):not(.header-row):hover, tr:nth-child(2n+1):not(.header-row):hover {
  background-color: var(--greyEEE);
  transition: all 0.25s ease;
}
.field tr:nth-child(2n), .field tr:nth-child(2n):hover, .field tr:nth-child(1n), .field tr:nth-child(1n):hover {
  background-color: transparent;
  transition: all 0.25s ease;
}


.table thead, .has-background-light {
  background-color: var(--greyDDD) !important;
  transition: all 0.25s ease;
}
.table thead:hover, .has-background-light:hover {
  background-color: var(--greyCCC) !important;
}

.disturbances-field .control table.table {
    margin-left: 0 !important;
}
.disturbances-field .control table.table th, .disturbances-field .control table.table td {
    border: none;
    padding: 0.5em 0;
}

label[for="id_disturbances"], .field.accessibility-field label {
    display: none;
}


.ds-box {
  padding-right: 15px !important;
  padding-left: 15px;
}

.help {
    /* inline help texts below fields */
    display: block;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.has-help {
    display: flex;
    flex-direction: row-reverse;
}
.has-help .container {
    flex: 1;
    margin: 0;
}
.has-help .title.is-4 {    
    margin-top: 0.25rem;
} 
.has-help .helpbox {
    width: calc(30% - 3rem);
    position: sticky;
    top: 6.25rem;
    margin-left: 2.5rem;
    margin-right: 0.25rem;
    padding: 1rem;
    background: rgba(255,255,255,0.5);
    overflow-y: auto;
    height: fit-content;
    font-size: 1rem;
}
.has-help .helpbox p br, .has-help .helpbox p {
    display: block;
    content: "";
    margin: 0.33rem 0 0 0;
}

.api.headline {
    float: right; 
    margin-left: 0.5rem; 
    margin-top: 0.8rem; 
    cursor: pointer;
}

.subheadline {
    margin: 0 0 1.5rem 0;
}

.subheadline .api {
    margin-right: 0.5rem;     
    cursor: pointer;
}

span.help-sign {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAADz0lEQVR4nO1Z20sUURgftB7qrdtDuuYcFYkIiu49SU9BBb1ERvUX9FBBkOWLPWT5UITpOetqF3yIas0uGlJpQYTRVdBM0iQ1rbyssp7j3le+OLtqzo65c2Zmx4L94IOFWeb7fffLSFKSkpQk4+SE1MyK8Z2I0EKZsFqE2WdE2JiMaZBz5Deh7dFn9GwmGd8hFUGKtNCUjb0ZiLAShOkAIgxEWCa0X8bsYk6px2Y58JxSugoR5pAxDYgCVymCaUDGjKSVja+wBHwWYYcRZqNGgc/BLhmz/IQB3+yAxTJmVQkADjFszyuCRaaCX+2ApQjTBgvAQzQ/2GMu0zTLWwkezVLCFE9YFDYwd4IzYgg8srMjCwUeTSthZwd1gedlTcZsRERYtp3B0TovVH8KwsdfYegem4Qe9yS0DoWh5ksIjjf6YG2lsBKuXAddKW59whwigjZen4CHnSHop5PzcvNACHbd8giGEi0XAs+7o0iTyqlg8KwnGBf8NLcMhmHDtQmBhKZ+m92TLmL9EhELnWz0qUD2uifhUVcoEjqdo2HV8+Jmv5gXCLugDX0RpPA5ReTl9V+V1udxv8/pnXm+vXoCOlxKJV72hcRyAdMBPjTGxR+dKsUSrX1ECa66Laj6T0VLQPGfrrGwaDIDsru3aQgfWij6Yi3hcemtcQWyCD0TXwHM7gtbRgM39Sor1NNvai+h+HlQE1cBvniYDb7ghTrJTzT6dChA27R4wNRRmTevvnEl+IbuYKTpIVEFMBuJ7wETlpRpPvbEqwL/5kcINt3Q3gOQ0gN+yxTgZbQ3BvzrgVCkpOp9p6xFAbNCqC6mN3wYDOu2PBIKIROSeH3VhMr6++/9aWwGPNCmQQFWa1TQXqdXAf7dT8GuS/7KzoQ0sljOf+BRKHCnQ7zmo7k9UBBXAX50Msla5jP2bNU6zH1fcLAkxvqY9mm+5vGLmRFhOXYG51754XlvdJzefdtjggKsWErUQhPLp2NGh7bhMKyrNFb/bSILzZQXiF6BPGljZ589d42UUXpVEiVblXu5TNiwHoFX3gdU29mWm7o94NJ9N80k7JAeobzjNvaEZrazU03ikyea5nJ6QDJC/FapVzhXJNfBrA0dFTkhNVFLDpqHZczqTTvy8kMrv1VaBp6wOttlWCKZSdwaRiqTSNjkmX1en038Vil6ctQWMnTIcMIKlVhMy3mDMQweUx+3+hriXmYJeIUidk86v5jpmZ34bCMTdj6jzJMmLTgVQQo/OvG7DT998MWDb3bRD3g0EPlNaOvUs4LIVPkvfGZNUpKk/59+A8O2EmzFsqt5AAAAAElFTkSuQmCC');
    background-size: contain;
    float: right; 
    width: 33px;
    height: 33px;
    transition: all 0.25s ease-in-out;
}
span.help-sign:hover {
    cursor: help;
    opacity: 0.75;
}