.ski-schnee-wetter .desktop{display: none;}
.h-line{height: 1px; width: 100%; background-color: #0bc2e0;}
.platzhalterDia{background-color: #f5f8f9; height: 250px; width: 100%;}
.mobile{display: block;}
.desktop{display: none;}
.ski-schnee-wetter .alert{width: 100%; background-color: #167199; color: #fff;}
.ski-schnee-wetter .alert p{padding: 0.2rem; font-size: 1.1rem!important; font-weight: 300; display: flex; align-items: center;}
.ski-schnee-wetter .alert p i{color: #0bc2e0; margin-right: 0.5rem; font-size: 1.5rem;}
/*.ski-schnee-wetter .row{width: 100%;}*/
.ski-schnee-wetter .table-data h3{ font-size: 1.5rem; text-transform: uppercase; text-align: left; color: #167199;}
.ski-schnee-wetter .table-data .table-responsive{font-size: 0.9rem;}
.ski-schnee-wetter .table-data h4 { font-size: 1.4rem!important; color: #167199; margin: 0;}
.ski-schnee-wetter .table-data h5 { font-size: 1.2rem; text-align: left; color: #212529;}
.ski-schnee-wetter .table-data .align-right{text-align: right;}
.ski-schnee-wetter .table-data .no-border{border-bottom: none!important;}
.ski-schnee-wetter .table-data .table-responsive tr{border-bottom: 1px solid #0bc2e0;}

.ski-schnee-wetter .table-data .list-group-item span { width: 100%; font-size: 1.2rem; color: #093554;}
.ski-schnee-wetter .table-data .card-body{padding: 1.5rem;}
.ski-schnee-wetter .table-data .list-group-item { flex-wrap: wrap; background-color: unset; border: none;padding: 0.5rem 0rem; display: flex; align-items: center;}

#SchneeWetterTab .nav-item{ width: 100%;display: flex;justify-content: center;}
#SchneeWetterTab .nav-item button{ background-color: #f5f8f9; width: 100%; text-align: center; border: none; border-radius: 0; color: #093554; font-size: 1.2rem;}
#SchneeWetterTab .nav-item button:hover{ color: #0bc2e0;border-color: #FF6600!important; border-bottom: 2px solid #FF6600;}
#SchneeWetterTab .nav-link.active{ background-color: #093554; color: #fff;border-color: #FF6600!important; border-bottom: 2px solid #FF6600;}

#SchneeWetterContent .active{display: flex;justify-content: center; flex-wrap: wrap;}
#SchneeWetterContent .card{border: none;border-radius: 0; height: 100%;}
#SchneeWetterContent h4{text-align: left; font-size: 1.5rem; text-transform: uppercase; color: #167199;}

#wetterContent .weather-data .nav-tabs .nav-item:first-child{width: unset;}
#wetterContent .weather-data .row{width: 100%;}

/*Schneebericht Element*/
.schneebericht-element{}
.schneebericht-element .schneebericht-wrap{ position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; background-image: url("/rendercontrol/images/schneehoehen/mountain_gray_space.svg"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.schneebericht-element .schneebericht-data{ width: 100%; display: flex; margin: 1rem 0rem;}
.schneebericht-element .schneebericht-data p{font-size: 1.2rem; margin-bottom: 0; display: flex; align-content: center; align-items: center; font-weight: 300; color: #167199;}
.schneebericht-element .schneebericht-data p span{color: #212529;  font-weight: 300; }
.schneebericht-element .top{ display: flex; justify-content: space-between; border-bottom: #0bc2e0 1px solid; padding-bottom: 0.5rem; margin-bottom: 0.5rem;}
.schneebericht-element .bottom{ display: flex; justify-content: space-between; margin-top: 0; margin-bottom: 1rem;}

.snowline{ border-bottom: 2px dotted #FF6600;display: flex; justify-content: flex-end;}
.snowline p{color: #FF6600!important; font-size: 1.2rem;}
.snowline p span{color: #212529; margin-left: 0.5rem;}

.schneebericht-element .schneebericht-data p img{width: 20px;}
.schneebericht-element .schneebericht-data p .weather-img{width: auto; height: 40px;}

/*Push-Benachrichtigung*/
.push-message{border: none; border-radius: 0;}
.push-message .bell-wrap{background-color: #093554;}
.push-message a{margin: auto; font-size: 3.5rem;padding: 0.5rem; color: #fff;}
.push-message a:hover{color: #0bc2e0;}
.push-message .card-body{padding: 1rem;}
.push-message h5{text-align: left; color: #093554; margin: 0;}


/*Wetterdaten*/
.weather-data{background-color: #fff;}
.weather-data h4{}
.weather-data h3{ font-size: 1.5rem; text-transform: uppercase; text-align: left; color: #167199;}
.weather-data .card{height: unset!important;}
.weather-data .card .card-body{padding: 0;}

/*.weather-data .nav-tabs{border-color: #0bc2e0!important;}*/
.weather-data .nav-item{margin-right: 0.3rem;margin-top: 0.3rem;}
.weather-data .nav-tabs{border-bottom: 1px solid #808080;display: flex; flex-wrap: nowrap;}
.weather-data .nav-tabs .nav-link{padding: 0.5rem 0.3rem; background-color: #f5f8f9; border-color: unset; width: 100%; display: flex; justify-content: center; border: none; color: #167199; border-radius: 0;}
.weather-data .nav-tabs .nav-item.show .nav-link,.weather-data .nav-tabs .nav-link.active{border-color: #FF6600!important; border-bottom: 2px solid #FF6600; background-color: #093554!important; color: #fff!important;}
.weather-data .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border: none; color: #0bc2e0; border-color: #FF6600!important;border-bottom: 2px solid #FF6600;}

.weather-data .tab-content h5{text-align: left; color: #167199; font-size: 1.6rem;}
.weather-data .tab-content img{ width: 125px;}
.weather-data .tab-content .border-bottom{border-bottom: 1px solid #808080!important;}

.weather-data .tab-content .row{padding: 0;}
.weather-data .tab-content .left-panel{padding: 1rem;}
.weather-data .tab-content .left-panel p{margin: 0;font-size: 1.3rem; font-weight: 300; width: 100%;}
.weather-data .tab-content .left-panel span{font-size: 1.6rem; font-weight: 300;}
.weather-data .tab-content .left-panel span:first-child{font-size: 2rem; color: #167199;}
.weather-data .tab-content .left-panel .col{ display: flex; flex-wrap: wrap; align-items: center; align-content: center;}
.weather-data .tab-content .right-panel{ /*background-color: #f5f8f9;*/display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 0.5rem; font-weight: 400; font-size: 0.9rem;}
.weather-data .tab-content .right-panel .list-group-item{flex-wrap: wrap; background-color: unset; border: none;display: flex; align-items: center;}
.weather-data .tab-content .right-panel .list-group-item i{color: #0bc2e0; width: 25px; font-size: 1.2rem;}
.weather-data .tab-content .right-panel .list-group-item span{width: 100%; font-size: 1.2rem; color: #093554;}
.weather-data .tab-content .right-panel .col-6{width: 100%;}

/*Weather tab*/
.top-selection .col{min-width: 110px;}

/* justus added */
.top-selection .col{min-width: 110px; height: 100%;}
/* justus added end */

.top-selection .selected .card{border-bottom: 3px solid #FF6600!important;}
.top-selection{-webkit-overflow-scrolling: touch; /* lets it scroll lazy */-webkit-overflow-scrolling: auto; /* stop scrolling immediately */ display: flex!important; flex-direction: row; flex-wrap: nowrap!important; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */}
.top-selection .selected .card-header{background-color: #093554!important; padding: 0.5rem; border-radius: 0; border: none; text-align: center;}
.top-selection .selected .card-header h5{color: #fff!important; font-size: 1.1rem; margin: 0; font-weight: 400;}
.top-selection .selected .card-header h6{color: #0bc2e0!important; text-align: center; font-weight: 300;}
.top-selection .selected .card-header .mobile{color: #fff;}

.top-selection .col:hover .card-header h5{color: #0bc2e0;}
.top-selection .col:hover .card{border-bottom: 2px solid #FF6600!important;}
.top-selection .col:hover .card-header h6{color: #0bc2e0;}
.top-selection .col:hover .card-header .mobile{color: #0bc2e0;}
.top-selection .col:hover .card img{filter: brightness(1.1) contrast(1.1);}

.top-selection .card .card-header{background-color: #fff; padding: 0.5rem; border-radius: 0; border: none; text-align: center;}
.top-selection .card .card-header h5{color: #167199; font-size: 1.1rem; margin: 0; font-weight: 400; display: none;}
.top-selection .card .card-header h6{color: #167199; text-align: center; font-weight: 300; margin: 0; display: none;}
.top-selection .card .card-header .mobile{margin: 0;}

.top-selection .card .card-body{display: flex; justify-content: center; flex-wrap: wrap; padding: 0.5rem; align-items: flex-start;}
.top-selection .card .card-body p{margin: 0; font-size: 1rem; color: #212529; font-weight: 300;}   
.top-selection .card .card-body p span:first-child{color: #167199; font-size: 1.1rem; font-weight: 400;}
.top-selection .card .card-body .h-line{height: 1px; width: 100%; background-color: #0bc2e0;}
.top-selection .card .card-body img{margin-top: 0.5rem; width: 75px; transition: 0.5s;}


.top-selection  .button-14 .card{ background-color: #167199;}
.top-selection .button-14 .card-body{ display: flex; justify-content: center; align-items: center;}
.top-selection  .button-14 .card h5{ color: #fff; font-size: 1.1rem;}
.top-selection  .button-14:hover .card{background-color: #0bc2e0;}


/*Weather-charts*/
.prognose{background-color: #fff;}
.prognose h5 {text-align: left; margin: 0; font-size: 1.3rem; color: #167199; font-weight: 400;}
.prognose p{flex-wrap: wrap; margin: 0; width: 100%; font-size: 0.9rem; font-weight: 400; display: flex; align-items: center;}
.prognose .p-text{font-size: 1.2rem; font-weight: 300;}
.prognose p i{width: 30px; color: #0bc2e0;}
.prognose img{width: 150px; margin: auto;}
.prognose p span:first-child{font-size: 1.3rem; color: #167199;}
.prognose p span{width: 100%;}
.prognose .nav-pills .nav-link.active,.prognose .nav-pills .show>.nav-link{ color: #fff; background-color: #093554!important;  border-bottom: 2px solid #FF6600; border-radius: 0; align-items: center;}
.prognose .weather span{width: unset;margin-right: unset;margin-left: 0.2rem;}
.prognose .weather span:first-child{font-size: 1.6rem; margin-right: 0.2rem;}
.prognose .weather p{font-size: 1.4rem; font-weight: 300;}
.prognose .nav-item{width: 100%; border-radius: 0;}
.prognose .nav-link{border: 1px solid #ddd!important; color: #167199; font-size: 1.1rem; width: 100%; border-radius: 0!important;}
.prognose .nav-link:hover{color: #0bc2e0;  border-radius: 0;  border-bottom: 2px solid #FF6600;}
.prognose .nav-link i{margin-right: 0.2rem; color: #0bc2e0;}
.weather-charts .card{padding: 1rem;}
.prognose .nav-item{margin-right: 0.3rem;}

.chart-container{position: relative; height:auto; width:80vw;}
.chart-container canvas{max-height: 300px;}
.donut-chart h5{font-size: 1.4rem; color: #167199;margin: 0;text-transform: uppercase;}
.donut-chart .card{padding: 1rem;}

/*Weather Content */
.weather-14 .card{max-width: 300px; margin: auto;}
.weather-14 .card .card-header{background-color: #167199;font-weight: 500;  color: #fff; border-radius: 0; border: none; font-size: 1.1rem; text-transform: uppercase;}
.weather-14 .card img{width: 75px;}
.weather-14 .card h5{text-align: left; margin: 0; font-size: 1.3rem; color: #093554;}
.weather-14 .card .card-body{display: flex; flex-wrap: wrap; padding: 0.5rem;}
.weather-14 .card .card-body p{font-size: 0.9rem; margin-bottom: 0.5rem; display: flex;flex-wrap: wrap; align-items: center; }
.weather-14 .card .card-body p .value{color: #167199; font-size: 1.1rem; font-weight: 400; width: unset; display: flex; align-items: center;margin-left: 0.2rem;}
.weather-14 .card .average-value{flex-direction: column; margin: 0; align-content: center; justify-content: center;}
.weather-14 .card .average-value span:first-child{border-bottom: 1px solid #0bc2e0; font-size: 1.4rem; color: #167199;}
.weather-14 .card .average-value span{font-size: 1.1rem; margin-right: 0.2rem;}
.weather-14 .card .card-body p i{margin-right: 0.2rem; width: 20px; color: #0bc2e0;}


/*Super Small Devices*/
@media (min-width: 300px) {
}

@media (min-width: 450px) {
    .weather-data .tab-content .right-panel .col-6{width: 50%;}
    /*.weather-data .nav-item{width: 47%;}*/
    .weather-data .nav-tabs .nav-link{padding: 0.5rem 0.8rem;}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
#SchneeWetterTab .nav-item{width: 50%;}

.prognose .nav-item{width: unset; min-width: 25%;}
.weather-14 .card .card-body p .value{margin-left: unset;}

.chart-container{ width:100%;}


}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .weather-data .nav-item{margin: unset; margin-right: 0.5rem;margin-top: 0.5rem; width: unset;}
    .top-selection .card .card-header h5{display: block;}
    .top-selection .card .card-header h6{display: block;}
    .top-selection .card .card-header .mobile{display: none;}
    .mobile{display: none;}
    .desktop{display: block;}
    .ski-schnee-wetter .desktop{display: block;}
    .weather-14 .card .card-body p .value{width: 100%;}

    .top-selection::-webkit-scrollbar { display: none;}
    .top-selection{-ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */}



    


}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .weather-data .tab-content .right-panel .col-6{width: 37%;}
    .weather-data .nav-item{width: unset;}
}

@media (min-width: 1000px) {
}

@media (min-width: 1100px) {

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 

}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { }