/* transition: all 0.2s ease-in; */

/* Weather Widget */

/* Primary styles */
#weatherWidget,
#weatherWidget h2,
#weatherWidget p,
#weatherWidget span,
#weatherWidget a {
    font-family: "Montserrat", sans-serif !important;
    color: #2f2c42 !important;
    text-decoration: none !important;
}

#current-city,
#weather-description {
    text-transform: capitalize;
}

/* Card styles */
#weatherWidget .card {
    overflow: hidden;
    border: none;
    border-radius: 20px;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}

#weatherWidget .card-middle-body {
    padding: 0 5rem;
}

#weatherWidget .card-bottom {
    margin-top: 1rem;
    padding: 1rem;
}

#weatherWidget .card-middle-body .text-wrapper {
    padding-top: 2.5rem;
}

/* Card Text Styles */
#weatherWidget .temperature,
#weatherWidget .temperature-unit {
    font-size: 5rem;
    font-weight: 800;
    display: inline;
}

#weatherWidget .wind,
#weatherWidget .chance-of-rain,
#weatherWidget #humidity {
    font-size: 0.8rem;
    font-weight: 800;
}

#weatherWidget .measure {
    position: relative;
    font-size: 1.2rem;
    top: -2.5rem;
}

#weatherWidget .check-additional-hours {
    display: block;
    text-align: center;
    font-weight: 800;
}

#weatherWidget .additional-time,
#weatherWidget .additional-degree-info {
    font-size: 0.6rem;
    text-align: center;
    display: block;
    font-weight: 800;
}

/* Card image and icon styles */
#weatherWidget .illustration img {
    width: 25rem;
}

#weatherWidget .primary-weather-icon {
    width: 3rem;
    margin-bottom: 0.5rem;
}

#weatherWidget .weather-icon {
    width: 1.5rem;
    display: block;
    margin: 10px auto;
}

#weatherWidget .weather-icon-small {
    width: 1rem;
}

/* Additional weather */
#weatherWidget .current-location-icon {
    height: 1.5rem;
    border: none;
}

#weatherWidget .city-error {
    text-align: center;
    margin-top: 1rem;
}

#weatherWidget .city-not-found {
    font-size: 0.6rem;
    font-weight: bold;
}

#weatherWidget .open-source {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
}

#weatherWidget .open {
    text-decoration: underline;
    color: #2f2c42;
}

    #weatherWidget .open:hover {
        color: #2f2c42c5;
    }

#weatherWidget #current-location-addon:hover {
    cursor: pointer;
}

#weatherWidget #current-location-addon img {
    height: 1.5rem;
}

#weatherWidget #current-location-addon {
    border: none;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}

/* media queries -responsive fixes */

/* Mobile */
@media (max-width: 770px) {
    #weatherWidget .card-row .card-column {
        width: 35rem;
    }

    #weatherWidget .illustration img {
        width: 14rem;
        margin-top: 4rem;
    }

    #weatherWidget .temperature {
        font-size: 2rem;
        margin-bottom: 0;
    }

    #weatherWidget .measure {
        position: relative;
        font-size: 0.9rem;
        top: -0.9rem;
    }

    #weatherWidget .weather-message {
        font-size: 0.72rem;
    }

    #weatherWidget .wind,
    #weatherWidget .chance-of-rain {
        font-size: 0.63rem;
    }

    #weatherWidget .card-bottom {
        padding: 0;
        padding-bottom: 2rem;
    }

    #weatherWidget .card-main-body {
        padding: 0 2rem;
    }

    #weatherWidget .card-middle-body {
        padding: 0;
    }

    #weatherWidget .weather-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #weatherWidget .illustration-col {
        display: none !important;
    }
}

/* Desktop */
@media (min-width: 1560px) {
    #weatherWidget {
        flex: 0 0 50%;
        max-width: 50%;
    }

        #weatherWidget .card-row .card-column {
            width: 50rem;
        }

        #weatherWidget .col-6 .col-smaller {
            width: 30%;
        }

        #weatherWidget .measure {
            margin-left: 0.4rem;
        }
}

/* Daily Quote Widget */

/* Primary styles */
#dailyQuoteWidget {
    font-family: "Montserrat", sans-serif !important;
    color: #2f2c42 !important;
    text-decoration: none !important;
    padding-top: 15px;
}

    #dailyQuoteWidget div {
        color: #2f2c42 !important;
    }

    #dailyQuoteWidget b {
        font-size: 2rem;
        font-family: "Montserrat", sans-serif !important;
        font-weight: normal;
        padding-bottom: 15px;
    }

    #dailyQuoteWidget br {
        display: none !important;
    }

/* Card styles */
#dailyQuoteWidget .card {
    overflow: hidden;
    border: none;
    border-radius: 20px;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}

    #dailyQuoteWidget .card-middle-body {
        padding: 15px 5rem;
    }

#dailyQuoteWidget .card-bottom {
    margin-top: 1rem;
    padding: 1rem;
}

#dailyQuoteWidget .card-middle-body .text-wrapper {
    padding-top: 2.5rem;
}

@media (max-width: 770px) {
    #dailyQuoteWidget .card-row .card-column {
        width: 35rem;
    }

    #dailyQuoteWidget .card-bottom {
        padding: 0;
        padding-bottom: 2rem;
    }

    #dailyQuoteWidget .card-main-body {
        padding: 0 2rem;
    }

    #dailyQuoteWidget .card-middle-body {
        padding: 15px 0px;
    }
}

@media (min-width: 1560px) {
    #dailyQuoteWidget {
        flex: 0 0 50%;
        max-width: 50%;
        padding-top: 0px !important;
        padding-left: 0px !important;
    }

        #dailyQuoteWidget .card-row .card-column {
            width: 50rem;
        }

        #dailyQuoteWidget .col-6 .col-smaller {
            width: 30%;
        }
}

blockquote {
    /*font-style: normal;*/
    margin: 0px;
}

    blockquote p {
        font-size: 14px;
        text-align: right;
        padding: 0;
        color: #ffffff;
        display: block;
    }

        blockquote p:last-of-type {
            margin: 0px;
        }

        blockquote p.title {
            font-size: 16px;
            font-weight: 600;
            text-align: left;
            padding: 0 0 10px 20px;
            position: relative;
        }

        blockquote p.quote {
            font-size: 16px;
            text-align: left;
            padding: 0 0 10px 20px;
            position: relative;
        }

            blockquote p.quote:before, blockquote p.quote:after {
                content: '”';
                font-size: 32px;
                color: #ffffff;
                font-weight: bold;
                vertical-align: top;
                line-height: 0.8
            }

            blockquote p.quote:before {
                content: '‟';
                /*position: absolute;*/
                left: 0;
            }

    blockquote span.author {
        font-size: 14px;
        font-weight: 600;
    }