@import "../../../Base/Content/sass/bootstrap/variables";
@import "../../../Base/Content/sass/compass/css3";
@import "../../Branding/Content/Partials/Variables";

.wizdom-weather {
    .todayContainer {
        width: 100%;
        height: 100px;
        @include border-top-radius(inherit);
        background-color: rgb(52, 152, 219);
        color: white;
        display: table;

        > div {
            display: table-cell;
            width: 50%;
            height: 100%;
            vertical-align: middle;

            .icon {
                width: 100%;
                text-align: right;
            }
        }

        .temperature {
            font-size: 32px;
            font-weight: 100;
        }

        .city {
        }
    }

    .foreCastContainer {
        /*height: 50px;*/
        border-radius: 0 0 5px 5px;
        display: table;
        width: 100%;

        > div {
            /*float: left;*/
            display: table-cell;
            width: 25%;
            text-align: center;
            padding: 10px 0 10px 0;

            .icon {
                width: 50px;
                height: 50px;
            }

            .dayText {
                font-weight: 500;
                text-transform: uppercase;
            }
        }
    }
    /*.icon {
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;

        &.icon-01d {
            background-image: url('WeatherIcons/01d.png');
        }

        &.icon-02d {
            background-image: url('WeatherIcons/02d.png');
        }

        &.icon-03d {
            background-image: url('WeatherIcons/03d.png');
        }

        &.icon-04d {
            background-image: url('WeatherIcons/04d.png');
        }

        &.icon-09d {
            background-image: url('WeatherIcons/09d.png');
        }

        &.icon-10d {
            background-image: url('WeatherIcons/10d.png');
        }

        &.icon-11d {
            background-image: url('WeatherIcons/11d.png');
        }

        &.icon-13d {
            background-image: url('WeatherIcons/13d.png');
        }

        &.icon-50d {
            background-image: url('WeatherIcons/50d.png');
        }

        &.icon-01n {
            background-image: url('WeatherIcons/01n.png');
        }

        &.icon-02n {
            background-image: url('WeatherIcons/02n.png');
        }

        &.icon-03n {
            background-image: url('WeatherIcons/03n.png');
        }

        &.icon-04n {
            background-image: url('WeatherIcons/04n.png');
        }

        &.icon-09n {
            background-image: url('WeatherIcons/09n.png');
        }

        &.icon-10n {
            background-image: url('WeatherIcons/10n.png');
        }

        &.icon-11n {
            background-image: url('WeatherIcons/11n.png');
        }

        &.icon-13n {
            background-image: url('WeatherIcons/13n.png');
        }

        &.icon-50n {
            background-image: url('WeatherIcons/50n.png');
        }
    }*/
    .icon {
        display: inline-block;
        font-family: FabricMDL2Icons;
        font-style: normal;
        font-weight: 400;
        speak: none;
        font-size: 45px;
        line-height: 50px !important;

        &.icon-01d:before {
            content: "\E9BD";
        }

        &.icon-01n:before {
            content: "\E9C2";
        }

        &.icon-02d:before {
            content: "\E9C0";
        }

        &.icon-02n:before {
            content: "\E9C1";
        }

        &.icon-03d:before {
            content: "\E9BF";
        }

        &.icon-03n:before {
            content: "\E9BF";
        }

        &.icon-04d:before {
            content: "\E9BF";
        }

        &.icon-04n:before {
            content: "\E9BF";
        }

        &.icon-09d:before {
            content: "\E9C4";
        }

        &.icon-09n:before {
            content: "\E9C4";
        }

        &.icon-10d:before {
            content: "\E9C3";
        }

        &.icon-10n:before {
            content: "\EA0F";
        }

        &.icon-11d:before {
            content: "\E9C6";
        }

        &.icon-11n:before {
            content: "\E9C6";
        }

        &.icon-13d:before {
            content: "\E9C8";
        }

        &.icon-13n:before {
            content: "\E9C8";
        }

        &.icon-50d:before {
            content: "\E9CB";
        }

        &.icon-50n:before {
            content: "\E9CB";
        }
    }

    .w365-searchLink {
        height: 32px;
        width: 32px;
        float: right;
        display: inline-block;
        vertical-align: top;
        background-color: transparent;
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;

        .ms-Icon {
            padding-top: 7px;
            font-size: 16px;
            color: #000000;
        }
    }

    .w365-searchImg {
        left: -53px;
        top: -1px;
        position: absolute;
    }

    .input-group-addon {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 5px;
        padding-right: 6px;

        .glyphicon {
            font-size: 18px;
            margin-top: 6px;
        }
    }

    .form-control-feedback {
        right: 35px;
        pointer-events: all;
        width: auto;
        height: auto;
        line-height: normal;
        top: 10px;
    }

    .form-control-feedback:hover {
        cursor: pointer;
    }

    .city-search-result {
        max-height: 100px;
        overflow: auto;
    }

    .search-result {
        list-style: none;
        border: 1px solid #eee;
        border-bottom: 0;
        padding: 0;
    }

    .search-result li {
        border-bottom: 1px solid #eee;
        padding: 2px;
    }

    .fav-city-container {
        overflow: auto;
        max-height: 100px;
    }

    ul.fav-cities {
        padding-left: 0;
    }

    li {
        list-style: none;
    }

    .margin-zero {
        margin: 0;
    }

    .tooltip-container {
        float: left;
        color: black;
        padding: 15px;
        min-width: 250px;

        .col-md-12 {
            padding: 0;
        }
    }

    .current-location-icon {
        margin-right: 5px;
    }

    .padding-left-zero {
        padding-left: 0;
    }

    .favourite-icon {
        float: right;
        cursor: pointer;
    }

    .temparature-select {
        width: 100%;
    }

    .locationmarker {
        cursor: pointer;
        color: #fff;
    }


    .container-fluid .col-sm-12 .form-group {
        min-height: auto !important;
    }

    .normal-weight {
        font-weight: normal !important;
    }

    .all-round-border {
        -webkit-border-radius: inherit;
        -moz-border-radius: inherit;
        border-radius: inherit;
    }

    .search-query {
        padding-right: 28px;
    }

    .search-waiting {
        right: 25px;
        top: 5px;
        background: transparent;
        z-index: 1000;
    }

    .location-search-icon {
        right: 36px;
        background: transparent;
        z-index: 1000;
    }

    .change-location-waiting-icon {
        height: 16px;
        width: 16px;
    }
}
