.container-fluid{
    max-width: 1320px;
}
.card {
    min-width: 355px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}
.weather-station,
.top-box,
.image-box,
.outdoor-box,
.wind-box {
    position: relative;
}
/* .hidden {
    opacity: 0;
} */

/* ------ Boxes ------*/
/* --------------------------------------------------------------------- */

.weather-station {
    padding: 2rem;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-white);
    /* font-family: var(--font-alegreya-sans-sc); */
}
.top-box {
    background-color: var(--color-green);
    padding: 1rem 0;
    transition-delay: .15s;
    transition: 1s;
}
.image-box,
.outdoor-box {
    background: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 0% 0%/20px 20px no-repeat, radial-gradient(circle at 0 100%, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 100% 0%/20px 20px no-repeat, radial-gradient(circle at 100% 0, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 0% 100%/20px 20px no-repeat, radial-gradient(circle at 0 0, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 100% 100%/20px 20px no-repeat, linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)) 50% 50%/calc(100% - 4px) calc(100% - 40px) no-repeat, linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)) 50% 50%/calc(100% - 40px) calc(100% - 4px) no-repeat, repeating-linear-gradient(rgba(233,105,33,0.6) 0%, rgba(111,159,88,0.75) 51%, #cfbd5e 100%);
}
.outdoor-box {
	border-radius: var(--br-medium);
    padding: 2rem 1rem;
    transition: 1s;
    transition-delay: .5s;
}
.outdoor-box .time {
    margin-right: auto;
    padding-left: 1rem;
    font-size: 16px;
}
.outdoor-box .wind {
    align-self: center;
}
.outdoor-box .pretipication {
    padding-top: 4rem;
}
.outdoor-box .pretipication p:not(:first-child) {
    display: inline-block;
}
.temp-humidity {
    padding-top: 2rem;
}
.temperature-box p:not(:first-child) {
    display: inline-block;
}
.humidity-box p:first-child {
    display: inline-block
}
.humidity-box p:not(:first-child) {
    font-size: var(--font-size-lg);
    display: inline-block;
}
.humidity-box img {
    vertical-align: initial;
    margin-left: .5rem;
}
.wind-pressure-wrapper {
    align-self: flex-end;
}
.wind-box {
    padding: 2rem 1rem;
    display: block;
    border-radius: var(--br-medium);
    background: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 0% 0%/20px 20px no-repeat, radial-gradient(circle at 0 100%, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 100% 0%/20px 20px no-repeat, radial-gradient(circle at 100% 0, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 0% 100%/20px 20px no-repeat, radial-gradient(circle at 0 0, rgba(0,0,0,1) 0, rgba(0,0,0,1) 18px, transparent 18px) 100% 100%/20px 20px no-repeat, linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)) 50% 50%/calc(100% - 4px) calc(100% - 40px) no-repeat, linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)) 50% 50%/calc(100% - 40px) calc(100% - 4px) no-repeat, repeating-linear-gradient(rgba(233,105,33,0.6) 0%, rgba(111,159,88,0.75) 51%, #cfbd5e 100%);
}
.wind-box .unit {
    display: inline-block;
}


/* --- Inside sensor --- */
.inside-sensor .title {
    color: var(--color-orange);
}
.inside-sensor .battery-svg {
    margin-left: auto;
    margin-right: 5rem;
}
.inside-sensor .wifi-status-svg {
    padding-right: 5rem;
}

.inside-sensor .image-box {
    padding: 2rem 1rem;
}
.inside-sensor .time {
    margin-right: auto;
    padding-left: 1rem;
    font-size: 16px;
}
.inside-sensor .humidity-box p:first-child {
    display: block;
}
.inside-sensor .humidity-box p:last-child {
    display: inline-block;
}

/* --- Pressure --- */
.pressure-value,
.hpa {
    top: 2.25rem;
    right: 1.5rem;
    font-size: var(--font-size-md);
}
.pressure-value {
    top: 4rem;
    right: 1rem;
    font-size: var(--font-size-xl);
    display: inline-block;
    /* font-family: var(--font-digital-numbers); */
}
.pressure-text {
    top: 1rem;
    right: 1.5rem;
}
/*Pretipication*/
.mmh {
    top: 8.5rem;
    left: 9.25rem;
}
.pretipication-value {
    top: 4rem;
    left: 1.25rem;
    font-size: var(--font-size-xl);
    /* font-family: var(--font-digital-numbers); */
}
.pretipication-text {
    top: 1rem;
    left: 1.25rem;
}
/*Wind Force & Wind Direction*/
.bft {
    top: 8rem;
    left: 4rem;
}
.wind-force-value {
    top: 3.25rem;
    left: 0;
    display: inline-block;
    font-size: var(--font-size-xl);
    /*font-family: var(--font-digital-numbers);*/
}
.wind-force-text {
    top: 0;
    left: 0.5rem;
    width: 10rem;
}
.nne,
.wind-force-box {
    top: 29rem;
    left: 1.25rem;
}
.nne {
    top: 5.5rem;
    left: 0.75rem;
}
.wind-direction {
    top: 29rem;
    right: 11rem;
    font-size: var(--font-size-lg);
    font-family: var(--font-digital-numbers);
}
/*Moon Phase*/
.moon {
    display: block;
}
.moon-phase{
    top: 1rem;
    left: 1.25rem;
}
/*Battery*/
.battery-box {
    top: 18.75rem;
    right: 8rem;
    color: var(--color-orange);
}
/*Temperature*/
.temperature-box{
    top: 2.25rem;
    left: 1.25rem;
    font-size: var(--font-size-lg);
    /*font-family: var(--font-digital-numbers); */
}
.temperature-o {
    top: 2.5rem;
    left: 15.5rem;
    font-size: var(--font-size-md);
    /*font-family: var(--font-alegreya-sans-sc);*/
}
.temperature-c {
    top: 2.5rem;
    left: 17rem;
}
.temperature-int,
.temperature-float {
    font-weight: 400;
    font-family: inherit;
}
.temperature-float {
    top: 8.75rem;
    left: 17rem;
    font-size: inherit;
}
.temperature-int {
    top: 1.45rem;
    left: -1rem;
    font-size: var(--font-size-xxl);
}
.temperature-text {
    top: 0;
    left: 0;
    font-size: var(--font-size-sm);
    /*font-family: var(--font-alegreya-sans-sc);*/
    width: max-content;
}
/*Humidity*/
.humidity-value,
.humidity {
    margin: 0;
    display: inline-block;
}
.humidity {
    top: 0.8rem;
    left: 0;
}
.humidity-value {
    top: 3.31rem;
    left: 0;
    font-size: var(--font-size-xl);
    /*font-family: var(--font-digital-numbers);*/
}
.humidity-box {
    top: 18rem;
    left: 1.25rem;
    color: var(--color-blue);
}
/*Date & Time*/
.out-sensor,
.date,
.time{
    display: inline-block;
}
.time {
    top: 2.25rem;
    left: 2.25rem;
    font-size: var(--font-size-sm);
    /* font-family: var(--font-digital-numbers);*/
}
.date {
    top: 2.25rem;
    left: 2.25rem;
    /*font-family: var(--font-digital-numbers);*/
    font-size: var(--font-size-sm);
}
.out-sensor {
    top: 2.25rem;
    left: 7rem;
    /*font-family: var(--font-seravek);*/
    color: var(--color-orange);
}
/*Icons*/
.moon-phase-svg,
.pretipication-svg,
.wind-force-svg,
.wind-deg-svg,
.image-svg {
    filter: invert(1);
}
.pretipication-svg {
    top: 1.5rem;
    right: 2rem;
    height: 8rem;
}
.moon-phase-svg {
    top: 4.5rem;
    left: 0.3rem;
    width: 6rem;
    height: 6rem;
}
.wind-force-svg {
    top: 1rem;
    left: 3rem;
    width: 7rem;
    height: 5rem;
    overflow: hidden;
    vertical-align: initial;
}
.humidity-svg {
    height: 1.5rem;
    width: 1.5rem;
    top: 0;
    left: 7rem;
}
.pressure-svg {
    height: 4rem;
    width: 4rem;
    top: 0;
    left: 7rem;
}
.battery-svg{
    width: 6rem;
    height: 3rem;
    top: 3rem;
}
.wifi-status-svg,
.in-sensor-svg,
.out-sensor-svg{
    height: 3.25rem;
    top: 1.25rem;
    overflow: hidden;
}
.wifi-status-svg {
    right: 6.25rem;
}
.in-sensor-svg {
    right: 2.25rem;
}
.out-sensor-svg {
    left: 2.25rem;
}
.wind-deg-svg {
    top: -3rem;
    left: 2rem;
    width: 8rem;
    height: 8rem;
    filter: none;
}
/*Image Icons & Containers*/
.grass-svg {
    bottom: 0;
    width: 100%;
}
.image-svg {
    height: 100%;
    width: 100%;
}
[class^="image-box-"]{
    width: 6rem;
    height: 6rem;
}
.image-box-1,
.image-box-2,
.image-box-3 {
    top: 1rem;
}
.image-box-4,
.image-box-5,
.image-box-6 {
    top: 6rem;
}
.image-box-7,
.image-box-8,
.image-box-9 {
    top: 11rem;
}
.image-box-1,
.image-box-4,
.image-box-7 {
    left: 2rem;
}
.image-box-2,
.image-box-5,
.image-box-8 {
    left: 9.5rem;
}
.image-box-3,
.image-box-6,
.image-box-9 {
    left: 17rem;
}
/*Responsive Fix */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wind-box-last{
        right: 7vw !important;
    }

}
@media only screen and (min-width: 768px) and (max-width: 1199px)  {
    .weather-station{
        max-width: 1000px;
    }
    .grass-svg {
        display: none;
    }
    .custom-card.image-box{
        height: 18rem;
    }
    .wind-box-last{
        position: absolute;
        bottom: 90px;
        right: 1vw;
        background: transparent;
    }
    .custom-card{
        max-width: 1000px;
    }
    .pressure-value {
        right: 0.25rem;
    }
    .wifi-status-svg {
        right: 5.25rem;
    }
    .in-sensor-svg {
        right: 1.25rem;
    }
}
@media (max-width: 767px){
    .card{
        max-width: 410px;
    }
    [class^="image-box-"] {
        width: 4.5rem;
        height: 4.5rem;
    }
    .outside-humidity {
        display: inline-block!important;
    }
    .outside-humidity p:last-child {
        display: inline-block!important;
    }
    .humidity-box .title {
        margin: 2rem 0;
    }
}

@media only screen and (max-width: 410px){
    :root {
        --font-size-sm: 17px;
        --font-size-md: 21px;
        --font-size-lg: 42px;
        --font-size-xl: 68px;
        --font-size-xxl: 145px;
    }
    .card {
        min-width: auto;
    }
    .temperature-o {
        left: 14rem;
    }
    .temperature-c,
    .temperature-float  {
        left: 15rem;
    }
    [class^="image-box-"] {
        width: 4rem;
        height: 4rem;
    }
    .image-box-2,
    .image-box-5,
    .image-box-8 {
        left: 8rem;
    }
    .image-box-3,
    .image-box-6,
    .image-box-9 {
        left: 14rem;
    }
    .wind-direction {
        right: 7.5rem;
    }
    .wind-deg-svg {
        top: -1rem;
        left: 1rem;
        width: 6rem;
        height: 6rem;
    }
    .pretipication-svg {
        right: 0;
    }
    .mmh {
        top: 7.5rem;
        left: 8.25rem;
    }
    .pressure-value {
        font-size: 55px;
    }
}