/*@import url('https://fonts.cdnfonts.com/css/haksen');*/


@font-face {
    font-family: "haksen";
    src: url("../fonts/HAKSEN FONT.otf");
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    outline: 0.063em solid rgba(0, 0, 0, 0);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
/*  font-family: sans-serif;*/
  font-family: haksen;
}



.lotto-number-container {
  padding: 36px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: -48px;
}

.lotto-ball {
  font-family: HAKSEN, sans-serif;
  position: relative;
  height: 70px;
  width: 70px;
  min-width: 70px;
  border-radius: 50%;
  margin: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0,0,0,.65) -.2rem -.2rem .666rem inset,rgba(0,0,0,.2) .125rem .125rem .375rem;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  background: #c7c6cf radial-gradient(125% 100% ellipse at 15% 20%,rgba(255,255,255,.95) 13%,rgba(255,255,255,.65) 17%,rgba(255,255,255,.25) 22%,rgba(0,0,0,0) 100%) 0 0 no-repeat;
}

.ballspin {
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-name: ballSpin;
}


@keyframes ballSpin {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.5)
  }

  100% {
    transform: scale(1)
  }
}

.euro-ball {
  font-family: HAKSEN, sans-serif;
  position: relative;
  height: 70px;
  width: 70px;
  min-width: 70px;
  border-radius: 50%;
  margin: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0,0,0,.65) -.2rem -.2rem .666rem inset,rgba(0,0,0,.2) .125rem .125rem .375rem;
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  background: #bc670a radial-gradient(125% 100% ellipse at 15% 20%,rgba(255,255,255,.95) 13%,rgba(255,255,255,.65) 17%,rgba(255,255,255,.25) 22%,rgba(0,0,0,0) 100%) 0 0 no-repeat;
}



.euro-ball:not(:last-child) {
  margin-left: 32px;
}

.lotto-number {
  font-size: 28px;
  font-weight: bold;
}

.scale-hover {
  transition: all 0.5s;
}

.scale-hover:hover {
  transform: scale(1.05);
}

.dropdown-item:not(:last-child) {
  border-bottom: 1px solid #0E0040;
}
.dropdown-item {
  cursor: pointer;
}

.dropdown-menu {
  border-radius: 2px !important;
}

/**/
body{
  background-color: #0E0040; 
  min-width: fit-content
}
.lotto_logo{
  padding-top: 25px; 
  text-align: center;
}
.lotto_logo img{
  max-width: 550px;
}
.lotto_header_bottom{
  font-family: HAKSEN, sans-serif; 
  color: rgb(255,255,255);
  font-size: 16px;
      text-align: center;
}


.lotto_fields{
  margin-top: 25px; 
      flex-direction: row;
    gap: 30px;
}
.lotto_dropdown{
  margin-bottom: 25px;
      width: 100%;
}
.lotto_dropdown_btn{
/*  width: 235px; */
/*  min-width: 235px; */
  height: 37px; 
  background: rgb(253,207,119); 
  font-size: 14px; 
  color: #0E0040; 
  border-style: none;
  border-radius: 2px;
  width: 100%;
}

.lotto_dropdown_btn i{
  margin-left: 8px;
}
.lotto_dropdown_menu{
  padding: 0 !important; 
  width:100%;

}
.lotto_dropdown_btn.show,
.lotto_dropdown_btn:hover,
.lotto_dropdown_btn:active,
.lotto_dropdown_btn:focus{
      background: #FDCF77FF;
      color: #0D0040;
}
.lotto_dropdown_menu a{
    background: #810000;
    color: #fff !important;
    font-size: 14px; 
}
.lotto_dropdown_menu a:not(:last-child){
    border-bottom: 1px solid #fff !important;
}
.lotto_dropdown_menu a:hover,
.lotto_dropdown_menu a:focus,
.lotto_dropdown_menu a:active{
   background: #ffff00;
   color: #00008b !important;
}
.lotto_btn_input_wish {
    height: 37px;
    background: rgb(253,207,119);
    font-size: 14px; color: #0E0040;
    border-style: none;
    border-radius: 2px;
    max-width: 400px;
    font-family: HAKSEN, sans-serif;"
    color: #0E0040;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;

}

.lotto_btn_input_wish input{
    background: rgb(255,255,255);
    border-style: none;
    padding-left: 16px;
    border-radius: 2px;
    color: #0E0040;
    margin-left: 12px;
    text-align: center;
}


.lotto_btn_input{
  width: 235px; 
  min-width: 235px; 
  height: 37px; 
  background: #FDCF77FF; 
  border-radius: 2px; 
  font-size: 14px; 
  color: #0E0040; 
  display: flex; 
  justify-content: center; 
  align-items: center;  
  margin-bottom: 25px;
}

.lotto_btn_input input{
  background: rgb(255,255,255); 
  border-style: none; 
  padding-left: 16px; 
  border-radius: 2px; 
  color: #0E0040;  
  margin-left: 12px; 
  text-align: center;
}

.lotto_btn_group{
  margin-bottom: 25px;
}

.lotto_btn{

    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    cursor: pointer;
}
.lotto_btn_large{
    width: 100%;
}

.lotto_btn_large_wish_number{
    width: 100%;
}

.lotto_result{
  width: 100%;
  margin: 0;
  max-width: 1200px
}


.button-shiny {
    border-radius: 2px;
    border: none !important;
    position: relative;
    display: inline-block;
    color: #0E0040 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 -1px 2px rgba(0, 0, 0, 0.2);
    background: rgba(67, 67, 67, 1);
    box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.25),
            0 1px 0 rgba(255, 255, 255, 0.25) inset,
            0 0 0 rgba(0, 0, 0, 0.5) inset,
            0 1.10em 0 rgba(255, 255, 255, 0.25) inset,
            0 -1.10em 1.25em rgba(0, 0, 0, 0.32) inset,
            0 1.10rem 1.25em rgba(255, 255, 255, 0.05) inset,
            0 1.10em 6px rgba(255, 255, 255, .1) inset;

    transition: all 150ms linear 0s;

    text-transform: uppercase;
    font-family: 'HAKSEN';
    font-weight: 600;
    text-align: center;
    text-decoration: none;


    overflow: clip;
    overflow-clip-margin: content-box;

    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 110% 120%;
    background-position: center center;
}


.button-shiny:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: inherit;
    background: -moz-linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(50%, rgba(255, 255, 255, 1)),
    color-stop(100%, rgba(255, 255, 255, 0))
    );
    background: -webkit-linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    padding: x 12px;
    top: 0;
    left: 9%;
    height: 1.5px;
    width: 50%;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
    opacity: .6;
    transition: all 150ms ease-in-out 0s;
}

.button-shiny:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: inherit;
    background: -moz-linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(50%, rgba(255, 255, 255, 1)),
    color-stop(100%, rgba(255, 255, 255, 0))
    );
    background: -webkit-linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
    );
    padding: x 12px;
    bottom: 0;
    right: 12%;
    height: 1.5px;
    width: 40%;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
    opacity: .2;
    transition: all 150ms ease-in-out 0s;
}


.button-shiny:hover:before {
    left: 45%;
    opacity: 1;
}

.button-shiny:hover:after {
    right: 55%;
    opacity: .3;
}

.dropdown-selected {
    background: radial-gradient(100% 100% at 50% 13%, rgb(255 233 18) 0%, #ffcc00 20%, #ffe500 80%) !important;
}

.button-shiny.gold {
    color: #0E0040 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 -1px 2px rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg,
    rgba(238, 204, 102, 1) 0%,
    rgba(223, 155, 67, 1) 100%
    );

    background: radial-gradient(100% 100% at 50% 15%,
    rgba(238, 204, 102, 1),
    rgba(223, 155, 67, 1) 80%
    );

    background: radial-gradient(100% 100% at 50% 13%,
    rgba(254, 231, 163, 1) 0%,
    rgba(241, 209, 124, 1) 20%,
    rgba(191, 146, 45, 1) 80%
    );

    background-repeat: no-repeat;
    background-size: 110% 120%;
    background-position: center center;
}

.title_container {
    color: #0E0040 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 -1px 2px rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(238, 204, 102, 1) 0%, rgba(223, 155, 67, 1) 100%) !important;
    background: radial-gradient(100% 100% at 50% 15%, rgba(238, 204, 102, 1), rgba(223, 155, 67, 1) 80%) !important;
    background: radial-gradient(100% 100% at 50% 13%, rgba(254, 231, 163, 1) 0%, rgba(241, 209, 124, 1) 20%, rgba(191, 146, 45, 1) 80%) !important;
    background-repeat: no-repeat;
    background-size: 110% 120%;
    background-position: center center;
}

.lotto_btn {
    font-size: 16px;
    max-width: 400px;
    font-family: HAKSEN, sans-serif;";
    background-color: #0078d0;
    border: 0;
    border-radius: 2px;
  color: #fff;
   cursor: pointer;
   display: inline-block;
   font-weight: 600;
   outline: 0;
   position: relative;
   text-align: center;
   text-decoration: none;
   transition: all .3s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
}

.lotto_dropdown_btn{
      display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.lotto_dropdown_menu .dropdown-item {
    display: flex;
    justify-content: space-between;
}

.lotto_dropdown_menu .dropdown-item strong span {
    display: inline-block;
    width: 20px; 
    text-align: center; 
        text-align: center;
    margin-right: 10px;
}

.lotto_flag_btn{
    width: 30px;
    height: 18px;
    display: flex;
    background-size: cover !important;
    background-repeat: no-repeat !important;
} 
.lotto_flag_switz{
  background: url(../img/switzerland.jpeg);
}
.lotto_flag_austria{
  background: url(../img/austria.png);
}
.lotto_flag_germany{
  background: url(../img/germany.jpeg);
}
.lotto_flag_eu{
  background: url(../img/european_union.jpeg);
}




/**/
/*#clock {
   width: 14em;
   height: 15em;
   border-radius: 50%;
   margin: auto;
   position: relative;
       font-size: 11px;
 }
 
 #clock div, .faceBox {
   border: 0;
   background-color: black;
   position: absolute;
   transform-origin: center bottom;
   -webkit-transform-origin: center bottom;
   -moz-transform-origin: center bottom;
   -o-transform-origin: center bottom;
   transform: rotate(0deg);
 }
 
 #clock #hour {
   border-radius: 0.75em 0.75em 0 0;
   width: 0.5em;
   height: 3.8em;
   top: 8.2em;
   left: 6.5em;
   z-index: 30;
   background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
 }
 
 #clock #minute {
   border-radius: 0.5em;
   width: 0.4em;
   height: 4.3em;
   top: 8em;
   left: 6.55em;
   z-index: 20;
   background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
 }
 
 #clock #second {
   border-radius: 0.25em;
   width: 0.2em;
   height: 5em;
   top: 7em;
   left: 6.5em;
   z-index: 10;
   background-color: red;
 }
 
 #clock #center {
   height:1em;
   width: 1em;
   border-radius:50%;
   top: 11.7em;
   left:6.2em;
   z-index:50;
   transform:rotate(0deg);
   background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
 }*/
 
 .smallTick, .mediumTick, .tickNum {
   display: none;
 }

 .faceBox {
   border: 0;
   width: 0;
   height: 15em;
   top:0;
   left: 15em;
   position: absolute;
   text-align: center;
   overflow: visible;
   margin: 0 auto;
 }
 


.lotto_clock_block{
position: relative;
/*    height: 300px;*/
}
 .lotto_watch_img{ 
        position: absolute;
    margin: auto;
    left: 4px;
    right: 0;
    text-align: center;
    top: -3%;
    min-height: 300px;
    min-width: 235.2px !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.weather{
    max-width: 250px;
    max-height: 450px;
    margin-left:auto;
    margin-right: 50px;
    background-color: transparent;
    
    /** background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 
    box-shadow: 10px 5px 5px black;
    **/
    opacity: 0.75;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: auto;
  
}


.lotto_header_logos{
  display: flex;
    flex-direction: row;
    gap: 30px;
        align-items: center;

}
.lotto_header_logos_item {
    width: 100%;
    display: block;
    position: relative;
    text-align: center;
}
.lotto_header_logos_item img{
      width: 70%;
}
/*
   #clock #hour {
   left: 6.5em;
   top:4.2em;
 }
 
 #clock #minute {
   left: 6.55em;
    top:4em;
 }
 
 #clock #second {
   left: 6.5em;
    top:3em;
 }
 
 #clock #center {
   left:6.2em;
    top:7.6em;
 }*/
     .lotto_btn_input {
      width: 100%;
        flex: auto;
    }
    .lotto_clock_block{
      height: 220px;
    }
    .lotto_clock_block .lotto_watch_img{
    min-height: 220px;
    min-width: 200px !important;
    }


.clock{
    width: 200px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/clock-450.png) center center;
    background-size: cover;
}

.clock:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    border-radius: 50%;
    z-index: 999;
}

.clock .hour,
.clock .min,
.clock .sec{
    position: absolute;
}

.clock .hour, .hr{
    width: 70px;
    height: 70px;
}
.clock .min, .mn{
    width: 80px;
    height: 80px;
}
.clock .sec, .sc{
    width: 75px;
    height: 75px;
}

.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}



.hr:before{
    content: '';
    position: absolute;
    width: 4.5px;
    height: 35px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.mn:before{
    content: '';
    position: absolute;
    width: 3.5px;
    height: 40px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
   radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sc:before{
    content: '';
    position: absolute;
    width: 1.5px;
    height: 50px;
    background-color: #f00;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

@media screen and (max-width: 1390px){

  .lotto_fields{
        gap: 10px;
      margin-bottom: 10px;
  }

  .lotto_flex_1{
    flex: 1;
  }

  .lotto_dropdown_btn,
  .lotto_btn_input,
  .lotto_dropdown_menu a{
    font-size: 12px;
  }
  .lotto_header_logos{
     gap: 10px;
  }
  .lotto_btn_input{
        width: auto;
    min-width: auto;
  }
/*   #clock #hour {
   left: 7.5em;
 }
 
 #clock #minute {
   left: 7.55em;
 }
 
 #clock #second {
   left: 7.5em;
 }
 
 #clock #center {
   left:7.2em;
 }*/
}

@media (min-width: 1000px) and (max-width: 1200px){
 /* .dropdown-menu-container {
    scale: 0.8;
  }*/
  .lotto_fields{
        gap: 10px;
  }
  .lotto_flex_1{
    flex: 1;
  }
  .lotto_dropdown_btn,
  .lotto_btn_input,
  .lotto_dropdown_menu a{
    font-size: 12px;
  }
  .lotto_header_logos{
     gap: 10px;
  }
/*  #clock #center {
   left:7.7em;
 }
  #clock #hour {
   left: 8em;
 }
 
 #clock #minute {
   left: 8.05em;
 }
 
 #clock #second {
   left: 8em;
 }*/
 
}
@media screen and (max-width: 992px) {
  .lotto_fields{
        gap: 10px;
  }
  .lotto_dropdown{
    margin-bottom: 5px;
    max-width: 400px;
  }
  .lotto_dropdown_menu{
    width: 100%;
  }
  .lotto_header_logos{
      margin-top: 25px !important;
     gap: 10px;
  }
  .lotto_header_logos{
    flex-wrap: wrap;
  }
  .lotto_header_logos_item{
        flex: 1;
  }

    .lotto_clock_block {
        flex: 0 0 100%;
        order: 2 !important; /* Setzt die Uhr ans Ende */
    }
    .lotto_header_logos_item {
        order: 0; /* Setzt die anderen Elemente an den Anfang */
    }
/*     #clock #hour {
   left: 6.5em;
   top:4.2em;
 }
 
 #clock #minute {
   left: 6.55em;
    top:4em;
 }
 
 #clock #second {
   left: 6.5em;
    top:3em;
 }
 
 #clock #center {
   left:6.2em;
    top:7.6em;
 }*/
     .lotto_btn_input {
        width: 100%;
        flex: auto;
    }
    .lotto_btn_input_wish {
        flex: auto;
    }
    .lotto_clock_block{
      height: 220px;
          width: 200px;
    margin: auto;
    margin-bottom: 10px;
    }
    .lotto_clock_block .lotto_watch_img{
    min-height: 220px;
    min-width: 200px !important;
    }

}

@media (min-width: 351px) and (max-width: 600px) {

  .euro-ball {
    margin: 0px !important;
    scale: 0.8;
  }

  .lotto-ball {
    margin: 0px !important;
    scale: 0.8;
  }
  .lotto_logo img{
    width: 90%;
  }
  .lotto_btn{
        font-size: 14px;
  }
}


@media (max-width: 350px){

  .euro-ball {
    margin: 0 -8px !important;
    scale: 0.6;
  }
  .lotto_logo img{
    width: 90%;
  }
  .lotto_btn{
        font-size: 14px;
  }

  .lotto-ball {
    margin: 0 -8px !important;
    scale: 0.6;
  }
}