/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.picture-item tr {
    line-height: 0.9em;
}

.CTA > button{
    font-size: 1.2em;
    border-radius: 2px;
    background: #fe4847;
    color: #fff;
    border: 0px;
    padding: 6px 19px;
    box-shadow: 4px 2px 5px #e0e0e0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin: 1em auto 1em auto;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    cursor: pointer;
}


/* --- <afterBuy.php> --- */

div.afterBuy {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top:-30%;
}

body.afterBuy {
margin: 0;
}

/* --- </afterBuy.php> --- */


/* --- <account.php> --- */
.center {
    margin-left:auto;margin-right:auto;display:block;
    text-align: center;
}
.login > p {
    max-width: 400px;
    text-align: center;
    margin-left:auto;margin-right:auto;display:block;
    margin-bottom: 2em;
}
.login > hr {
    max-width: 350px;
    margin: 2.3em auto 2em auto;
    border-radius: 5px;
}
.loginError{
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 200px;
    text-align: center;
    background: #f7c2c2;
    border-radius: 2px;
    display: none;
    padding: 0.2em 1em;
    font-size: 90%;
    border: 1px dotted #9e9e9e;
}
.BtLogin:focus {
    outline: none;
}
.BtLogin {
    background-color: #fc494b;
    color: #fff;
    border: none;
    box-shadow: 1px 1px 1px #000;
    font-size: 110%;
    padding: 0.3em 1em 0.2em 1em;
    border-radius: 2px;
    margin: 1em auto;
    cursor: pointer;
}

.BtSignup {
    background-color: #fc494b;
    color: #fff;
    border: none;
    box-shadow: 1px 1px 1px #000;
    font-size: 110%;
    padding: 0.3em 1em 0.2em 1em;
    border-radius: 2px;
    margin: 1em auto;
    cursor: pointer;
}
.BtSignup:focus {
    outline: none;
}

.login > input {
    display:block;
    padding: 0.5em;
    margin: 1em auto;
}
.login {
    margin: 50px auto 20em auto;
    width: 90vw;
    max-width: 740px;
    background: #f5f5f5;
    padding: 1em 2em 3em 2em;
    border-radius: 5px;
    display: block;
}
/* --- </account.php> --- */


/* --- <mainMenu> --- */
.mainMenu{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.mainMenu > a {
    flex: 1;
    text-align: center;
    vertical-align: middle;
    padding: 1em;
    color: white;
    background-color: #fe4847;
    margin: 1px;
}

.mainMenu > a:hover {
    color: white;
    background-color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.mainMenu > a:visited {
    color: #fff;
}

/* --- </mainMenu> --- */



/* --- <alerts> --- */

.deleteYes {
    flex:1;
    margin:0 1em;
    padding: 0.3em 0;
}

.deleteNo {
    flex:1;
    margin:0 1em;
    padding: 0.3em 0;
}

.alertDeleteMessage {
    width: 90%;
    padding: 0 1em;
    text-align: center;
}

.alertDelete {
    background: #fff;
    border-radius: 5px;
    margin-top: 2em;
    width: 70%;
    max-width: 350px;
    margin-left:auto;margin-right:auto;display:block;
    box-shadow: 3px 5px 5px #cecece;
    display: none;
}
.alertDeleteContent{
    padding: 0.5em 1em 0.2em 1em;
    display:flex;
    padding-bottom:1em;
}
.alertDelete > h2 {
    width: 100%;
    background: #fc4a4b;
    border-radius: 5px 5px 0 0;
    height: 2em;
    padding: 0.5em 1em 0.2em 1em;
    font-size: 95%;
    color: #fff;
    font-weight: 300;
}
.alertManageResult {
    background-color: #ffc3c3; /* caffc3 */
    margin-top: 1em;
    text-align: center;
    padding: 0.5em 1em;
    border: 1px dotted #000;
    font-size: 80%;
    display: none;
}

button.addAlert {
    margin-top: 1.5em;
}

.alertChange {
    cursor: pointer;
}
.alertChange:hover {
    text-decoration: none;
    cursor: pointer;
}
.svgIcon{
    height: 0.9em;
    color: #fff;
    margin: 0 0 -2px 0;
    stroke: #fff;
    fill: #fff;
}

div.alertsTable {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
}

.alertsTableHead:first-child{
    border-radius: 5px 0 0 0;
}

.alertsTableHead:last-child{
    border-radius: 0 5px 0 0;
}

.alertsTable.alertsTable .alertsTableCell, .alertsTable.alertsTable .alertsTableHead {
}
.alertsTable.alertsTable .alertsTableHeading {
    background: #fc494b;
    color: #fff;
}
.alertsTable.alertsTable .alertsTableHeading .alertsTableHead {
  font-size: 15px;
  font-weight: 300;
  vertical-align: middle;
}
.alertsTable{ display: table; }
.alertsTableRow { display: table-row; }

.alertsTableHeading > .alertsTableRow {
    height: 2em;
}

.alertsTableHeading { display: table-header-group;}
.alertsTableCell, .alertsTableHead { 
    display: table-cell;
    width:max-content;
}
.alertsTableHeading { display: table-header-group;}
.alertsTableFoot { display: table-footer-group;}
.alertsTableBody { 
    display: table-row-group;
    font-size: 80%;
}

.alertsTableBody > .alertsTableRow:hover{
    background-color: #E4E4E4;
}

.alertsTableCell{
    padding: 0.2em 0.25em;
}

.tid{
    text-align: center !important;
    width: 2em;
}
.tname {
    width: 20%;
    display: none;
}
.tkrit {
    overflow: wrap;
}
.tlive {
    width:3em;
    text-align: center;
}
.tavg {
    width:3em;
    text-align: center;
}
.tmail {
    width:3em;
    text-align: center;
}
.tedt{
    width: 3em;
    text-align: center !important;
}
.tnull{
    width: 100%;
    text-align: center !important;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    display: none;
    caption-side: bottom;
    border-radius: 0 0 5px 5px;
    padding: 0.5em 0 0.2em 0;
}

.tload{
    width: 100%;
    text-align: center !important;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    display: none;
    caption-side: bottom;
    border-radius: 0 0 5px 5px;
    padding: 0.5em 0 0.2em 0;
}

.alerts {
    margin: 50px auto 20em auto;
    width: 90vw;
    max-width: 740px;
    background: #f5f5f5;
    padding: 1em 2em 3em 2em;
    border-radius: 5px;
}

.alertEditX {
    float: right;
    position: relative;
    font-size: 1.5em;
    top: -0.3em;
    cursor: pointer;
}

.alertEdit{
    background: #fff;
    border-radius: 5px;
    margin-top:2em;
    display: none;
}

.alertEdit > h2{
    width: 100%;
    background: #fc4a4b;
    border-radius: 5px 5px 0 0;
    height: 2em;
    padding: 0.5em 1em 0.2em 1em;
    font-size: 95%;
    color: #fff;
    font-weight: 300;
}

div.alertEdit > .alertSave {
    width: 100%;
    background-color: #fff;
    padding-bottom: 2em;
    border-radius: 0 0 5px 5px;
        padding-bottom: 2em;
}

div.alertSave > button {
    font-size: 1.5em;
    padding: 0.2em 1em;
    background-color: #efefef;
    color: #545454;
    box-shadow: 2px 2px 5px 0px #0000006e;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 60%;
    cursor: pointer;
}
div.alertSave > button:hover {
    background-color: #e0dede;
}

.alertSettings {
    
    padding: 0.5em 1em 0.2em 1em;
}

.alertResults {
    width: 100%;
    background: #fff;
    border-radius: 0 0 5px 5px;
    font-size: 95%;
    color: #000;
    padding: 2em 0;
    overflow: hidden;
}

.alertResultsNow{
    width: 50%;
    float:left;
    text-align: center;
}

.alertResultsAvg{
    width: 50%;
    float: right;
    text-align: center;
}

.alertResultsNumber{
    font-size: 3em;
}

.alertResultsText {
    font-size: 0.8em;
    color: #888;
    font-weight: 100;
}


.chosen-container {
    width: max-width;
    min-width: 5em;
}

/* --- </alerts> --- */



/* --- <confetti> --- */

.willkommen {

    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    top: calc(72px + 20vh);
    width: 80vw;
    background: #fffffff2;
    left: 0;
    right: 0;
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 5px;
    max-width: 550px;
}

/* --- </confetti> --- */

.impressum {
    margin-left:auto;margin-right:auto;display:block;
    max-width: 350px;
    text-align: justify;
    text-transform: uppercase;
    margin-bottom: 3em;
    height:200px;
    margin-bottom:20em;
}

.impressum #imp1 {
    float:left;
    width: 50%;
}
.impressum #imp2 {
    float:right;
    width: 50%
}

.footer {
    text-align: center;
    background: #f5f5f5;
    color: #fff;
    padding: 1em 5em;
    font-size: 80%;
    margin: 3em 0 0 0;
    border-top: 1px dotted #d8d8d8;
}

.footer a, .footer a:visited, .footer a:hover{
    color: #777777;
    text-decoration: none;
    text-transform: uppercase;
}


.back {
    font-weight: bold;
    margin-left:auto;margin-right:auto;display:block;
    text-align: center;
    margin: 2em auto;
}

.faq .a {
    display: none;
    padding: 1em 2em;
    margin-top:-1.5em;
}

.faq .q:before {
    content: "\25BC";
    float: right;
    top: 0;
    right: -1em;
    position: relative;
}

div.faq {
    width: 100vw;
    margin-left:auto;margin-right:auto;display:block;
    margin-bottom: 20em;
}

.faq img {
    margin: 1vw auto 1vw auto;
    display: block;
    max-width: 80%;
}

.faq .q {
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    background: #ffffff;
    border-radius: 3px;
    line-height: 150%;
    padding: 1em 2em;
    cursor: pointer;
}

.faq .q:hover {
    background: #fc4a4b;
    color:white;
}

@media only screen and (min-width: 950px) {
    div.faq {
        width: 70vw;
        max-width: 700px;
    }
}



/* ======== < Signup Modal >  ======== */

* {
  box-sizing: border-box;
}

.createAlert {
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    color: #055bb5;
}

body {
    overflow: scroll;
}

.modal-signup {
    position: fixed;
    border: 1px solid #00000026;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 5px 5px 5px #0003;
    overflow: auto;
    top: 5vh;
    left: calc(5px + 6vw);
    right: calc(5px + 6vw);
    display: none;
    height: 90vh;
    overflow: scroll;
}

@media only screen and (min-height: 970px) {
    .modal-signup {
        height: unset;
        max-width: 870px;
        margin-left: auto;
        margin-right: auto;

    }
}

.signupWrapper {
    padding: 5%;
    display: grid;
}

.signupHeader {
    height: fit-content;
    margin-bottom: 1em;
    background-color: #f3f3f3;
    padding: 1em 1em;
    border-radius: 0.25em;
}

[class*="signupPreview-"] {
    display:none;
}

.signupPreview-2 {
    display:block;
}

.signupHighlight {
    background: #fe5554;
    color: #fff;
    box-shadow: 2px 2px 4px #00000052;
    text-shadow: 1px 1px 1px #00000038;
}

.signupChoice {
    float: left;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    font-weight: 700;
    font-size: 150%;
    height: 100%;
    border-radius: 0.3em;
}

.signupChoice:hover {
    background: #fe5554;
    box-shadow: 2px 2px 4px #00000052;
}

/* For mobile: */
.signupChoice {
    width: 100%;
    text-align: center;
    margin: 2px;
}
.signupChoice span {
    font-weight: 100;
    font-size: 80%;
}
.choiceWrapper {
        margin-left: 0.3em;
        padding: 0;
        width: fit-content;
        display: block;
        text-align: left;
        margin-bottom: 0.7em;
        margin-top: 0.7em;
}

@media only screen and (min-width: 950px) {
    .signupChoice {width: calc(33% - 2px);}
    .choiceWrapper {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0 1em 0 0;
    }
}

[class*="signupChoice"] > * > input {
    float: left;
    height: 2em;
    display: table-cell;
    vertical-align: middle;
    margin: 0 1em 0 0;
    margin-top: calc(1em - 2px);
}

[class*="signupChoice"] > * > label {
    display: table-cell;
    vertical-align: middle;
    height: 2em;
}

.signupPreview {
    width: 90%;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    margin-top:1.5em;
}

.signupPreview ul {
    list-style: none;
    padding: 0px;
    width: 90%;
    margin-left:auto;margin-right:auto;display:block;
}

.signupPreview li {
    margin-left: 1.5em;
}

.signupPreview li:before {
    content: "✅";
    margin: 0 0.5em 0 -1.5em;
    position: relative;
    top: 2px;
}

.signupPreview h3 {
    font-size:1.8em;
    margin-top:0;
    text-align: center;
}

.signupPreview button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 150%;
    margin-top: 1.5em;
    background: #58a1ff;
    border: 1px solid #ffffff;
    box-shadow: 2px 3px 5px #bbbbbb78;
    border-radius: 10px;
    color: #fff;
    padding: 0.3em 1em;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    font-weight: 100;
    text-shadow: 1px 1px 3px #00000029;
}

@media only screen and (max-height: 970px) {
    .signupPreview button {margin-bottom: 2em;}
}

.signupPreview button:hover {
    background-color: #2f7adc;
}

.hoverGreen{
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}

.hoverGreen:hover {
    background: #2ECC71;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}


/* ======== </ Signup Modal >  ======== */



[id^=dialog] {
    display: none;
}

/* jQuery UI Dialog */
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.filterOptions { border: 1px solid transparent; padding: 0.3em; }
.ui-widget-header {
    border: 1px solid #ddd !important;
    background: #fd5555 !important;
    color: #fff !important;
}
#dialog-login {
    height:fit-content !important;
}
/* / jQuery UI Dialog */



.account {
    float: right;
    top: 2vw;
    position: absolute;
    right: 2vw;
    font-size: calc(8px + 1.0vw);
}

.bust {
    height: calc(8px + 3vw);
    max-height: 33px;
    cursor: pointer;
}

.warning { 
    transition: all .2s ease-in-out; 
}

.warning:hover {
    transform: scale(1.5);
}

p.shuffleTeaser {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    position: relative;
    max-width: 480px;
    font-weight: bold;
    color: #fff;
    background: #74b7ff;
    padding: 1.5vw 3vw;
    border-radius: 7px;
    box-shadow: 0px 0px 18px 9px #fff;
    width: 70vw;
    font-size:30px;
    top: -400px;
}

@media screen and (max-width: 992px) {
  p.shuffleTeaser {
    font-size: calc(10px + 1.8vw);
    top: calc(-21vw + -105px);
  }
}


.ResultCount {
    position: fixed;
    bottom: 0;
    background-color: #fde4a8;
    text-align: center;
    left: 0;
    padding: 0 8vw;
    width:100vw;
    border-top: 1px solid #0000001a;
    box-sizing: border-box;
    display:none;
}
.ResultCount p {
    margin: 0 auto 0.5em auto;
}
.ResultCount p:nth-child(1) {
    font-weight: bold;
    margin-top: 0.5em;
    font-size:150%;
}

.alertad {
    font-weight: bold;
    text-decoration: underline;
}

div.shuffle_container {
    margin-bottom: 10vh;
}

div.InfoBox {
    display: none;
    margin-top: 20px;
    background-color: #f7f7f7;
    padding: 15px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: calc(2px + 0.2vw);
    border: 1px solid #0000002e;
    font-size: calc(9px + 0.6vh);
    max-width: 46em;
}

.InfoBox p {
    margin-bottom:0;
}

.InfoBox p:nth-child(1) {
    font-weight:bold;
    font-size: 150%;
    line-height: 100%;
    margin: 0 auto;
}

div.StickyBottom {
    position: fixed;
    bottom: 0;
    background: #c3e3fb;
    width: 100vw;
    left: 0;
    text-align: left;
    font-weight: normal;
    border-top: 1px dotted #0000003d;
    display: none;
    font-size: calc(3px + 1.5vh);
    padding: 0 9vw;
}


.StickyBottom > div.close {
    left: calc(100vw - 1em);
    width: 100vw;
    position: fixed;
    font-size: 1.5em;
    color: #0000009c;
    padding: 0.2em 0 0 0;
}

.StickyBottom > div.close:hover {
    font-weight: bold;
    cursor: pointer;
}

.StickyBottomContent p:nth-child(1) {
    font-weight:bold;
    font-size: 150%;
    line-height: 100%;
    margin-bottom: 0;
}


div.alert-red-danger {
    box-sizing:border-box;
    border:0 solid #e2e8f0;
    width: 80vw;
    margin: auto;
}

div.alert-red-danger div:nth-child(1) {
    --bg-opacity: 1!important;
    background-color: #fe4847!important;
    background-color: rgba(254, 72, 71, var(--bg-opacity))!important;
    border-top-left-radius: .25rem!important;
    border-top-right-radius: .25rem!important;
    font-weight: 700!important;
    padding-top: .5rem!important;
    padding-bottom: .5rem!important;
    padding-left: 1rem!important;
    padding-right: 1rem!important;
    --text-opacity: 1!important;
    color: #fff!important;
    color: rgba(255, 255, 255, var(--text-opacity))!important;
}


div.alert-red-danger div:nth-child(2) {
    --bg-opacity: 1!important;
    background-color: #fff5f5!important;
    background-color: rgba(255, 245, 245, var(--bg-opacity))!important;
    --border-opacity: 1!important;
    border-color: #fc8181!important;
    border-color: rgba(252, 129, 129, var(--border-opacity))!important;
    border-bottom-right-radius: .25rem!important;
    border-bottom-left-radius: .25rem!important;
    border-width: 1px!important;
    border-top-width: 0!important;
    padding-top: .75rem!important;
    padding-bottom: .75rem!important;
    padding-left: 1rem!important;
    padding-right: 1rem!important;
    --text-opacity: 1!important;
    color: #c53030!important;
    color: rgba(197, 48, 48, var(--text-opacity))!important;
}

div.alert-orange-leftaccent {
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    --bg-opacity: 1;
    background-color: #fffaf0;
    background-color: rgba(255, 250, 240, var(--bg-opacity));
    --border-opacity: 1;
    border-color: #ed8936;
    border-color: rgba(237, 137, 54, var(--border-opacity));
    border-left-width: 4px;
    padding: 1rem;
    --text-opacity: 1;
    color: #c05621;
    color: rgba(192, 86, 33, var(--text-opacity));
    width: 80vw;
    margin: auto;
}

div.alert-orange-leftaccent p:nth-child(1) {
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    margin: 0; font-weight: 700;
}

div.alert-orange-leftaccent p {
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    margin: 0;
}

div.alert-blue-info {
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    --bg-opacity: 1;
    background-color: #4299e1;
    background-color: rgba(66, 153, 225, var(--bg-opacity));
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: .875rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    width: 59vw;
    margin: auto;
    border-radius: 4px;
    margin-top: 1em;
}

div.alert-blue-info > svg {
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    display: block;
    vertical-align: middle;
    height: 1rem;
    margin-right: .5rem;
    fill: currentColor;
    width: 1rem;
}

div.alert-blue-info > svg path {
    box-sizing: border-box; 
    border: 0 solid #e2e8f0;
}

div.alert-blue-info > p {
    box-sizing: border-box; 
    border: 0 solid #e2e8f0; 
    margin: 0;
}

.MarketInfo {
    display: none;
    background: #9ddaff;
    border-radius: 5px;
    color: #3a3a3a;
    font-size: font-size: calc(6pt + 1vh);
    text-align: justify;;
    padding: 1vh 8vh;
    margin-top:5vh;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.MarketInfo p {
    margin: 0.6em 0;
    line-height: 115%;
    font-weight: 400;
    text-align: left;
}


.table { 
    display: table;
    border-spacing: 0.5em;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.table-row {
   display: table-row; 
}
.table-cell {
   display: table-cell; 
   vertical-align: middle;
}

.bulb {
    font-size: calc(7pt + 5vh);
    text-align: center;
    vertical-align: top;
    position: relative;
    padding: 5px;
    left: -20px;
}

.message-bottom {
    position: fixed;
    bottom: 0;
    background-color: #fde4a8;
    text-align: center;
    left: 0;
    padding: 0 8vw;
    display:none;
    width:100vw;
}


.message-bottom h1 {
    font-size: calc(6pt + 3vh);
    margin-bottom: 0;
}

.message-bottom h2 {
    color: #00000082;
    font-weight: normal;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: calc(6pt + 1vh);
    padding: 2vh 11vh;
    text-align: justify;
    margin-top: 0;
}

body {
    /*font-family:Arial,Verdana,Helvetica,sans-serif;*/
    font-family: Roboto, sans-serif;
    font-weight: 300;
}

.no-border {
	font-weight: 100;
}

.blur {
    filter:blur(5px);
    webkit-filter:blur(5px);
}

/*.modal-signup {
    position: fixed;
    border: 1px solid #00000026;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 5px 5px 5px #0003;
    overflow: auto;
    top: 10vh;
    left: 15vw;
    right: 15vw;
    display: none;
    min-height: max-content;
    height: 70vh;

}*/

/* The Close Button */
.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding: 0 5px 0 0;
}

.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#canvasnotice {
    display: block;
    text-align: center;
    font-size: 80px;
    background: #ffffff;
    z-index: 99;
    position: relative;
    font-size:calc(10px + 8vw);
}

#canvasnotice > h1, canvasnotice > h2, canvasnotice > h3 {
    margin:0px;
	text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}

#canvasnotice > h2 {
    margin-top:-20px;
    font-size: 80%;
    margin-bottom: 0.3em;
}

#canvasnotice > h3 {
    font-size: 30%;
    font-weight: normal;
    color: #929292;
    margin-top: 0.1em;
}

.status {
    background-color: #ececec;
    margin-top: 35px;
    font-size: 10pt;
    text-align: center;
    padding: 5px 5px;
    color: #444141;
    border: 1px dotted #00000008;
    font-weight: 100;
}

.tippy-tooltip.honeybee-theme {
  /* Your styling here. Example: */
  background-color: yellow;
  border: 2px solid orange;
}

.filter-group > h2 {
    margin: 20px 0 0 0;
    font-weight: 400;
}

.import-wrapper {
    display: inline-block;
}

button.down {
    background-color:#fe4847;
    color:white;
}

.filter-price {
    margin: 10px auto;
    font-size: 110%;
    width: 5em;
}

#FilterReset {
    text-align: right;
    display: inline;
    float: right;
    cursor: pointer;
    font-size: 1.5em;
}

#ResetChart {
    position: relative;
    right: 0;
    top: 6px;
    background: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: bold;
    color: #0000003b;
    font-family: Arial, sans-serif;
    border: 1px solid #0000000a;
    cursor: pointer;
    font-size: calc(7px + 0.4vw);
    margin-bottom: 5px;
    background: #0000000f;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: max-content;
}

#ResetChart:hover {
    color: #00000063;
    text-decoration: underline;
}

.filter-km {
    margin: 10px auto;
    font-size: 110%;
    width: 40px;
}

.filter-ez_year {
    margin: 10px auto;
    font-size: 110%;
}

.filter-ez_month {
    margin: 10px auto;
    font-size: 110%;
    display:none;
}

.filter-ap {
    margin: 10px auto;
    font-size: 110%;
}

.filter-keywords {
    margin: 10px auto;
    font-size: 110%;
    width: 150px;
    margin-left:auto;margin-right:auto;display:block;
}

.filter-plz {
    margin: 10px auto;
    width: 60px;
    font-size: 110%;
}

.filter-radius {
    margin: 10px auto;
    font-size: 110%;
}

.filter-kwh {
    margin: 10px auto;
    font-size: 110%;
}

.filter-model {
    margin: 10px auto;
    font-size: 110%;
}

.filterbutton {
    margin: 10px auto;
    min-height: 30px;
    padding: 2px 8px;
    box-shadow: 3px 3px 2px #00000014;
}


li {margin-bottom:0.8em;}

div.filters {
    margin-top: 20px;
    background-color: #f7f7f7;
    padding: 15px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.filter-wrapper {
    display: flex;flex-direction: column; /* old browser */
    display: grid;  
    grid-gap: 6px;  
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /*grid-template-rows: repeat(2, 200px); */
    max-width: 1000px;
    margin-left:auto;margin-right:auto;
}

div.filter-header {
    background-color: #fe4847;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 6px 10px;
    margin: -15px -15px 10px -15px;
    box-shadow: 0px 4px 0px #bbb;
}

.filter-group {  
    text-align: center;
    border: 1px solid #000000a6;
    border-radius: 6px;
    /*padding-bottom: 5vh;*/
    padding-bottom: 1em;
}

.filter-group > input {
    display: inline;
}

.colorselectorwrapper {
    margin: 0 auto;
    width: 150px;
}

.colorselector {
        width:25px;
        height:25px;
        border:1px solid #0000003b;
        margin:10px 5px 0px 5px;
        padding:5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        opacity: 1;
        /*box-shadow: 0px 1px 1px 2px #d0d0d0;*/
        position: relative;
        box-shadow: 
            inset 0 0 0 4px #fff, 
            inset 0 0 0 5px #737373, 
            inset 0 0 0 1px #737373;
        border-radius: 25px;
        border: 1px solid #737373;
        float:left;
    }

    #filter-color_red {background-color: #ff0000;}
    #filter-color_blue {background-color: #0000ff;}
    #filter-color_black {background-color: #000000;}
    #filter-color_brown {background-color: #7d3818;}
    #filter-color_gray {background-color: #888;}
    #filter-color_green {background-color: #14b101;}
    #filter-color_white {background-color: #ffffff;}
    #filter-color_unknown {
        background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
        background-size: 5px 5px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }

    .color_on {
        box-shadow: 
            inset 0 0 0 4px #fff,
            inset 0 0 0 5px #737373,
            inset 0 0 0 1px #737373,
            0 0 0 3px #0000006b;
    }


    .color_off {
        box-shadow: 
            inset 0 0 0 4px #fff, 
            inset 0 0 0 5px #737373, 
            inset 0 0 0 1px #737373;
    }



div.ForCanvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
margin-top: 1vh;
width: 80vw;
margin-left: auto;
margin-right: auto;
display: block;
}

/* ---- */

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
a{color:#0f1115;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;}

.top-bar {
    margin-top: 4vh;
}

.brand {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width: max-content;
    width: fit-content;
    color: #000;
}
.brand ul {
    padding: 0;
}

.brand li {
    list-style: none;
    font-size: calc(10px + 4vw);
    font-weight: 100;
}
.brand li:before{
    content: "";
    display: inline-block;
    height: 5vw;
    width: 5vw;
    background-size: contain;
    background-image: url(/img/teslafinder-logo.svg);
    vertical-align: middle;
    margin-right: 1vh;
    background-repeat: no-repeat;
    margin-top: -0.5vw;
}