/*Normal Css*/
html, body{padding:0; margin:0; }
*, ::after, ::before {
    box-sizing: border-box;
}
.me-3{margin-right:20px;}
.just-end{text-align: right;}

.weather-row{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
.weather-align-items-start{-ms-flex-align: start!important; align-items: flex-start!important;}
.weather-align-items-center{-ms-flex-align: center!important; align-items: center!important;}
.weather-align-items-end{-ms-flex-align: end!important; align-items: flex-end!important;}
.weather-xl-3, .weather-xl-4, .weather-xl-8, .weather-xl-9, .weather-lg-3, .weather-lg-4, .weather-lg-8, .weather-lg-9, .weather-md-3, .weather-md-4, .weather-md-5, .weather-md-6, .weather-md-7, .weather-md-8, .weather-md-9, .weather-sm-3, .weather-sm-4, .weather-sm-8, .weather-sm-9{width:100%; padding:0 15px;}

@media (min-width:600px){
	.weather-sm-3{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.weather-sm-4{-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
	.weather-sm-5{-ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%;}
	.weather-sm-6{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.weather-sm-7{-ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%;}
	.weather-sm-8{-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
	.weather-sm-9{-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
}
@media (min-width:768px){
	.weather-md-3{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.weather-md-4{-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
	.weather-md-5{-ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%;}
	.weather-md-6{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.weather-md-7{-ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%;}
	.weather-md-8{-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
	.weather-md-9{-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
}
@media (min-width:991px){
	.weather-lg-3{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.weather-lg-4{-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
	.weather-lg-8{-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
	.weather-lg-9{-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
}
@media (min-width:1400px){
	.weather-xl-3{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.weather-xl-4{-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
	.weather-xl-8{-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
	.weather-xl-9{-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
}
/*Normal Css End*/

/*Canlendar Top Css Start*/
.weather-container{padding:0 15px; max-width:1500px; margin:0 auto}
.weather-calendar-top{padding:30px 0; background: linear-gradient(135deg,  rgba(32,142,195,1) 0%,rgba(45,148,191,1) 100%); font-family: 'Poppins', sans-serif; color:#fff; position: relative;}
.weather-calendar-top:after{content:''; position: absolute; top:0; right:0; bottom:0; left:0; background-image:url(/widgets/weather-calendar/img/calendar-vector.png); background-repeat: no-repeat; background-position:100% center; z-index:0;}
.weather-calendar-top .weather-container{position: relative; z-index:2;}
.weather-title, .weather-control-label{font-size:21px; color:#99D7F4; font-weight:400; margin-bottom:30px; font-weight: 600;}
.weather-div{display: flex; gap: 30px; align-items:center;}
.weather-dgree-number{position: relative; display: inline-block;}
.weather-dgree-number big{font-size: 80px; line-height:70px; color: #fff; font-weight: 700;}
.weather-dgree-icon {position: absolute; top: -26px; left: 100%; display: flex; color:#fff; align-items: center; gap:10px;}
.weather-dgree-icon span{font-size:30px;}
.dgree-circle{width:9px; height:9px; border-radius:50%; border:3px solid #fff; display: inline-block;}
.weather-dgree-text{font-size:18px; color:#99D7F4; font-weight:400; white-space: nowrap; font-weight: 600;}
.weather-edit{width: 25px; height: 25px; background: #fff; border-radius: 50%; text-align: center; display: inline-block; border:1px solid #0A7DB4;}
.weather-edit img{margin-top: 2px;}

.weather-drop{position: absolute; top: -6px; left: 100%; width:25px; height:25px;}
/*.weather-drop:hover .weather-ul, .weather-drop:focus .weather-ul{display: block;}*/
.weather-ul{display: none; position: absolute; top:100%; left:50%; min-width:170px; background-color:#fff; border:1px solid #d9d9d9; box-shadow:0 6px 12px 0 rgba(0,0,0,0.15); border-radius:6px; list-style: none; padding:0; margin:8px 0 0; -webkit-transform: translateX(-50%); transform: translateX(-50%)}
.weather-ul.active{display:block;}
.weather-ul:before{content:''; position: absolute; bottom:100%; left:50%; margin-left:-8px; border:8px solid transparent; border-bottom-color:#fff;}
.weather-ul li{display: block;}
.weather-ul li a, .weather-ul li button{display: block; background-color:#fff; border:0; border-bottom:1px solid #d9d9d9; font-size:14px; text-transform: capitalize; padding:6px 12px; color:#000; text-decoration: none;}
.weather-ul li a:hover, .weather-ul li button:hover{color:#208ec3; text-decoration: none;}
.weather-ul li:first-child a, .weather-ul li:first-child button{border-radius:6px 6px 0 0;}
.weather-ul li:last-child a, .weather-ul li:last-child button{border-radius:0 0 6px 6px; border:0;}


.weather-inline-form{display: inline-block; vertical-align:top}
.weather-control-label{display: block; margin-bottom:5px; text-align:left; font-weight: 600;}
.weather-control-form{height: 50px; background: #459FD4; border: 0; padding: 4px 21px; color:#7CD9FF; font-size:22px; border-radius:6px; outline: none; box-shadow: none;}
.weather-control-form::-webkit-input-placeholder{color:#7CD9FF;}
.weather-control-form::-moz-placeholder{color:#7CD9FF;}
.weather-control-form:-ms-input-placeholder{color:#7CD9FF;}
.weather-control-form:-moz-placeholder{color:#7CD9FF;}
.location-icon{background-image:url(/widgets/weather-calendar/img/location-icon.png); background-repeat: no-repeat; background-position:15px 50%; padding-left:52px; width: 340px; }
.weather-radio-label{font-size:24px; color:#fff; font-weight:normal; cursor:pointer; margin-right:15px; display: inline-block; vertical-align: top; cursor: pointer;}
.weather-radio-label input[type="radio"]{width:32px; height:32px; display: inline-block; vertical-align: middle; border:0; outline: none; box-shadow:none; margin-top:0; cursor: pointer;}
.weather-radio-label span{display: inline-block; vertical-align: middle;}

.weather-calendar-box{font-family: 'Poppins', sans-serif; padding-bottom:60px;}
.weather-temperature sup, .indicator-number sup{width: 6px; height: 6px; border-radius: 50%; border: 1px solid #000; display: inline-block; margin: 0px 3px 0 1px; position: relative; top: -1px; font-size: default; line-height: default; vertical-align: super;}
.date-disable .weather-temperature sup{border-color:rgba(3, 3, 3, 0.60);}
.calendar-week-box.blank-date{visibility: hidden;}
.hideDiv{
	display: none !important;
}
@media (min-width:768px){
	/*Canlendar Top Css End*/
	.weather-calendar-week{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-left:1px solid #d9d9d9;}
	.calendar-week-name, .calendar-week-box{-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;  border-bottom:1px solid rgb(0 0 0 / 10%); border-right:1px solid rgb(0 0 0 / 10%); padding:20px;}
	.calendar-week-name{border-bottom:0; text-align: center; font-size:16px; font-weight:500; color:rgba(0,0,0,0.5); border-bottom:1px solid #d9d9d9; padding-top:10px; padding-bottom:10px;}
	.calendar-week-date{color: #030303; font-weight: 600;}
	.calendar-week-box{text-align: center; height: 250px; display: grid; align-content: space-between; position: relative; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
	.calendar-week-box:hover{background-color:#fff; z-index:5; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.15);
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
	}
	.calendar-week-box:before{content:''; position: absolute; top:0; left:0; width:100%; height:100%; border:5px solid transparent; background-color:transparent; }
	.calendar-week-box.active:before{border-color:#0081ED;}
	/*.blue-active.calendar-week-box:hover:before, .orange-active.calendar-week-box:hover:before, .green-active.calendar-week-box:hover:before, .yellow-active.calendar-week-box:hover:before, .red-active.calendar-week-box:hover:before, .date-disable.calendar-week-box:hover:before, .blank-date.calendar-week-box:hover:before{opacity:0;}*/

	.date-disable:after{content:''; position: absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(3, 3, 3, 0.2);}
	.date-disable:before{display: none;}
	.date-disable:hover{background-color:#fff;}
	.date-disable .calendar-week-date, .date-disable .calendar-week-img, .date-disable .weather-temperature-div{opacity:0.65;}
	.date-disable .calendar-week-date, .date-disable .weather-temperature strong{color:rgba(3, 3, 3, 0.60);}
	.date-disable:hover{box-shadow:none;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
		}

	.web-hide{display: none;}

}


.weather-temperature-div{display: flex; justify-content: space-between; text-align: left;}
.weather-temperature:last-child{text-align: right;}
.weather-temperature span{display: block; color: rgba(0,0,0,0.4); font-size: 17px; font-weight: 500; line-height: 18px;}
.weather-temperature strong{font-weight: 500; color: #030303; font-size:20px; position: relative;}

.blue-active, .blue-indicator .indicator-color-box{background: #76b9ff;}
.blue-active .calendar-week-date, .blue-active .weather-temperature strong, .orange-active .calendar-week-date, .orange-active .weather-temperature strong, .green-active .calendar-week-date, .green-active .weather-temperature strong, .yellow-active .calendar-week-date, .yellow-active .weather-temperature strong, .red-active .calendar-week-date, .red-active .weather-temperature strong{color:rgb(0 0 0 / 60%);}
.blue-active .weather-temperature span, .green-active .weather-temperature span, .orange-active .weather-temperature span, .yellow-active .weather-temperature span, .red-active .weather-temperature span{color:rgb(0 0 0 / 50%);}
/* .orange-active .weather-temperature span, .yellow-active .weather-temperature span, .red-active .weather-temperature span{color: rgb(255 255 255 / 60%);} */
.blue-active .weather-temperature sup, .orange-active .weather-temperature sup, .green-active .weather-temperature sup, .yellow-active .weather-temperature sup, .red-active .weather-temperature sup{border-color:rgb(0 0 0 / 60%);}
.white-active .weather-temperature span{color: rgb(0 0 0 / 40%);}
.white-active .weather-temperature sup{border-color:#000;}

.white-active, .white-indicator .indicator-color-box{background:#fff;}
.orange-active, .orange-indicator .indicator-color-box{background:#ffa06b;}
.green-active, .green-indicator .indicator-color-box{background:#84d3b7;}
.yellow-active, .yellow-indicator .indicator-color-box{background:#ffcb80;}
.red-active, .red-indicator .indicator-color-box{background:#ff7e62;}

.white-indicator .indicator-color-box{border-color:#d9d9d9;}
.orange-indicator .indicator-color-box{border-color:#ffa06b;}
.green-indicator .indicator-color-box{border-color:#84d3b7;}
.yellow-indicator .indicator-color-box{border-color:#ffcb80;}
.red-indicator .indicator-color-box{border-color:#ff7e62;}


.weather-indicator{margin-top:60px;}
.weather-indicator-list{display: inline-block; margin:0 22px 15px 0;}
.indicator-color-box{width:24px; height:24px; border-radius:2px; background-color:#000; display: inline-block;  vertical-align: middle; margin-right:8px; border:1px solid transparent;}
.indicator-number{display: inline-block; vertical-align: middle; color:rgba(3, 3, 3, 0.65); font-size:20px;}
.indicator-number small{width:11px; height:1px; background:rgba(0, 0, 0, 0.65); display: inline-block; vertical-align: middle;}

.weather-calendar-error{padding:30px 0; min-height: calc(100vh - 360px); display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif;}
.weather-calendar-error-inner{text-align: center;}
.weather-calendar-error span{font-size:30px; line-height:30px; text-transform: capitalize; color: #ed5565; font-weight: 500; display: block; margin:0;}
.weather-calendar-error p{font-size:16px; line-height:26px; color: #333; font-weight:400; margin:6px 0 15px;}
.weather-calendar-error a{display: inline-block; padding:8px 30px; background-color: #2b93c0; color: #fff; text-decoration: none; border-radius: 6px;}


@media (max-width:1450px){
	.weather-radio-label{font-size:20px;}
	.location-icon{width:310px;}

}

@media (max-width:1350px){
	.weather-radio-label, .calendar-week-name, .weather-temperature span, .weather-temperature strong, .indicator-number{font-size: 14px;}
}

@media (max-width:1199px){
	.weather-dgree-number big {font-size: 60px; line-height: 60px;}
	.weather-dgree-text{font-size:16px;}
	.weather-dgree-icon span{font-size:22px;}
	.weather-dgree-icon{top:-8px}
	.cloud-img{max-width:70px;}
	.weather-title, .weather-control-label{font-size:16px;}
	/* .weather-radio-label, .calendar-week-name, .weather-temperature span, .weather-temperature strong, .indicator-number{font-size: 14px;} */
	.weather-radio-label input[type="radio"]{width: 20px; height: 20px;}
	.weather-control-form{height:40px; font-size:16px;}
	.location-icon{background-size:15px; padding-left:40px;}
	.weather-calendar-top{padding:20px 0;}
	.calendar-week-name, .calendar-week-box{padding:10px;}
	.calendar-week-box{height:195px;}
	.calendar-week-box:before{border-width:4px;}
	.indicator-color-box{width: 15px; height: 15px; margin-right:3px;}
	.weather-indicator{margin-top: 30px;}
	.weather-calendar-box{padding-bottom:10px;}
	.location-icon{width: 250px;}
	.weather-calendar-error{min-height: calc(100vh - 190px);}
}

@media (max-width:991px){
	.weather-calendar-top:after{display: none;}
	.weather-calendar-top .weather-form-group{display: block;}
	.weather-calendar-top .me-3{margin:0 0 12px;}
	.just-end{text-align:left;}
	.location-icon{width: 100%;}
	.weather-div{gap:10px;}
	.weather-radio-label, .calendar-week-name, .weather-temperature span, .weather-temperature strong, .indicator-number{font-size: 12px;}
	.calendar-week-name, .calendar-week-box{padding:6px;}
}

@media (max-width:820px){
	.weather-radio-label, .calendar-week-name, .weather-temperature span, .weather-temperature strong, .indicator-number{font-size: 12px;}
	.calendar-week-name, .calendar-week-box{padding:4px;}
}

@media (max-width:767px){
	.weather-calendar-box{padding: 20px 0 6px;}
	.cloud-img{max-width: 50px;}
	.weather-dgree-number big{font-size: 52px; line-height: 50px;}
	.weather-title{margin-bottom:10px;}
	.weather-div{border-bottom: 1px solid #ffffff4d; padding-bottom: 20px; margin-bottom: 20px;}
	.hide-mobile, .date-disable{display: none !important;}
	.calendar-week-box{height: auto; padding:0; display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom:20px;}
	.calendar-week-img{position: absolute; top: 0; left:50%; bottom: 0; display: flex; align-items: center; margin-left:32px;}
	.calendar-week-img img{max-width:48px;}
	.weather-temperature-div{width: 100%; background: #f9f9f9; padding: 12px; border-radius: 8px;}
	.calendar-week-top{min-width:110px; max-width:110px;}
	.mobile-week-name{font-size: 14px; line-height:16px; color: #959595; font-weight: 300;}
	.calendar-week-date{font-size: 16px; font-weight: 600;}
	
	.blue-active, .orange-active, .green-active, .yellow-active, .red-active{background-color:transparent;}
	.blue-active .weather-temperature-div{background:#76b9ff;}
	.orange-active .weather-temperature-div{background:#ffa06b;}
	.green-active .weather-temperature-div{background:#84d3b7;}
	.yellow-active .weather-temperature-div{background:#ffcb80;}
	.red-active .weather-temperature-div{background:#ff7e62;}
	.white-active .weather-temperature-div{background:#f9f6f6;}




	.blue-active .calendar-week-date, .orange-active .calendar-week-date, .green-active .calendar-week-date, .yellow-active .calendar-week-date, .red-active .calendar-week-date{color:#000;}

	.indicator-color-box{width: 12px; height: 12px;}
	.weather-radio-label, .calendar-week-name, .weather-temperature span, .weather-temperature strong, .indicator-number{font-size:13px;}
	.indicator-number small{width:6px;}
	.weather-indicator{margin-top: 0; border-top: 1px solid #f9f6f6; padding-top: 10px;}
	.weather-indicator-list{margin: 0 12px 6px 0;}
}

@media (max-width:600px){
	.weather-calendar-error{min-height: calc(100vh - 360px);}
}