.login{ background:url(../img/loginbg.png) no-repeat center center; background-size:cover; height:100vh;}
.login header{ width:100%; clear:both; overflow:hidden; padding:  35px;}

.logincontent{ width:100%; clear:both; padding: 0 10%; overflow:hidden; position:relative; margin-top:8%}
.logininner{ width:100%; max-width:710px; position:relative;}
.logininner h2{ font-size:36px; color:#fff;   margin: 0 0 15px 0; padding:0;font-family: 'helveticaneuebold';}

.loginformRow{ width:100%; clear:both; overflow:hidden; margin:0; padding:0; font-family: 'helveticaneuebold'}
.loginformRow input{ display:block; background:#fff; color:#000; height:64px; border:1px solid #707070; padding:0 12px; width:100%; margin:0 0 20px;   }
.loginformRow  label{ margin:0; padding:0 0 0 35px; font-size:16px ; color:#fff; margin:0 0 20px;}
.loginformRow  label input{ display:block; float:left; margin:0 10px 0 0; width:auto; height:auto;}
.loginformRow  label a{ color:#FF4E06}
.checkcon {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

.checkcon input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.loginformRow input:focus{ outline:0;}
.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;}
.checkcon:hover input ~ .checkmark {background-color: #ccc;}
.checkcon input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: "";position: absolute;display: none;}
.checkcon input:checked ~ .checkmark:after {display: block;}
.checkcon .checkmark:after {left: 8px;top: 5px;width: 8px;height: 15px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);border-radius:4px;}
.loginformRow input.loginbtn{font-family: 'helveticaneuemedium'; background:#FF4E06; color:#fff; font-size:25px; width:auto; height:50px; border:0; border-radius:4px; padding:0 15px;}
.loginformRow a.needaccount {font-family: 'helveticaneuemedium';background: #FF8D5F;color: #fff;font-size: 17px;height: 40px;border: 0;border-radius: 4px;padding: 0 15px;display: inline-block;line-height: 40px;text-decoration: none;}
.loginformRow a.needaccount:hover{background:#FF4E06;}


.wrapper  {width: 100%;display: flex;height: 100%;position: relative;padding: 0 0 0 320px; flex-flow: wrap;}
.leftside{ position:absolute; height:100%; background:#e6e8f1; width:320px; left:0; top:0;}
.sideTop {width: 100%;height: 155px;background: #404040;text-align: center;display: flex;justify-content: center;flex-flow: column;align-items: center;}
.prfileCol{ width:100%; overflow:hidden; border-bottom:1px solid #C1C1C1; padding:20px 25px;}
.prfileImg{ float:left; margin:0 15px 0 0;}
.prfileImg img{ display:block; width:68px; height:68px; border-radius:100%;}
.prfileCol h2{ margin:0; padding:3px 0 4px;     font-family: 'Montserrat', sans-serif; font-size:18px; font-weight:600; color:#5466A2;}
.prfileCol h2 span{ font-size:10px; color:#2F2F2F; display:block;}
.prfileCol a.myaccountlink {background: #5466A2;color: #fff;font-family: 'Montserrat', sans-serif;font-size: 12px;font-weight: 600;text-decoration: none;padding: 2px 7px;display: inline-block;}
.prfileCol a.myaccountlink:hover{ background:#FF4C00;}



/*------------------------------------------------Mobile Memu Style Start Here ****
---------------------------------------------------------------------------------------*/
.side-menu-wrapper {overflow: hidden;position:fixed;top:85px;right: -320px;height:auto; transition: 0.5s;width: 320px;z-index:9999999;background: #e6e8f1;padding: 0; height:100%;}
.side-menu-wrapper ul{padding:0;margin:0;width:100%;height:100%;list-style:none;overflow-y: auto; }
.side-menu-wrapper  ul  li a {     font-family: 'Montserrat', sans-serif; font-weight:600; display:block;color:#5466A2;transition: 0.3s;text-decoration: none;font-size:16px;text-transform:capitalize;padding:18px;}

.side-menu-wrapper a.menu-close {float: right;color: #000;display: block;font-size: 35px;margin: 0;padding: 0;text-decoration: none;position: absolute;top: 22px;right: 9px;}
.side-menu-overlay {top: 0;left: 0;width: 0;height: 100%;opacity: 0;position: fixed;z-index:999999;overflow-y: auto;overflow-x: hidden;text-align: center;transition:opacity 1s;background-color: rgba(0,0,0,.7);}
.side-menu-wrapper  ul  li:hover a, .side-menu-wrapper  ul  li.currentdrop a {color:#fff; background:#5466A2;}
.side-menu-wrapper  ul  li a i{ font-size:24px; margin-right:10px;}
.side-menu-wrapper  ul  li  .sub-menu{margin:0; width:100%;display:none; padding:0 0 0 0 ; background:#5466A2; }
.side-menu-wrapper  ul  li.currentdrop  .sub-menu{margin:0;  width:100%;display:block; padding:0 0 0 0 ;}
.side-menu-wrapper  ul .sub-menu li{ list-style:none; display:block;}
.side-menu-wrapper  ul .sub-menu li a{ color:#fff; font-size:14px;display:block;padding:10px 35px; text-decoration:none;   }
.side-menu-wrapper  ul .sub-menu li:hover a{ background: #3EBAA7; text-decoration:none; padding:10px 40px; color:#fff;}
.slide-menu-open{ display:none;}
/*.side-menu-wrapper svg{display:none !important;} */


.side-menu-wrapper ul li.menu-item-has-children{ background:url(../img/arrow.png) no-repeat 100% 10px; background-size:12px;}
.side-menu-wrapper  ul .sub-menu li .sub-menu{ display:none;}
.side-menu-wrapper  ul .sub-menu li:hover .sub-menu { display:block;}
.side-menu-wrapper  ul .sub-menu li:hover .sub-menu li:hover a{ background:var(--bs-orange);  }


/*------------------------------------------------Mobile Memu Style End Here ****
---------------------------------------------------------------------------------------*/




.rightside{ width:94%; clear:both; overflow:hidden; height:100%; margin:0 auto;}
.pagetitle{ text-align:center; position: relative;}
.pagetitle h2{ font-size:40px; margin:25px 0; padding:0; color:#212121; font-family: 'Open Sans', sans-serif; font-weight:700;}

.bluebox { width:100%; clear:both; overflow:hidden; position:relative; border-radius:12px; background:#5466A2; padding:20px 30px;  font-family: 'Open Sans', sans-serif; margin-bottom:20px; }
.weatherCol h3{ float:left; font-size:45px; font-weight:700; color:#fff; margin:0; padding:0;}
.weatherCol h3 span{  font-size:18px; font-weight:400; color:#fff; margin:0; padding:0; display:block; clear:both;}

.weatherinfo{ float:right;}
.weatherinfo h4{ float:left; font-size:60px; font-weight:400; color:#fff; margin:0; padding:0; line-height: 73px;}
.weatherinfo h4 span{  font-weight:700; font-size:70px; }

.boxSec{width:100%; clear:both; overflow:hidden; position:relative; border-radius:12px; background:#fff; padding:0;  font-family: 'Open Sans', sans-serif; -webkit-box-shadow: 0px 0px 5px 0px rgba(69,69,69,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(69,69,69,1);
box-shadow: 0px 0px 5px 0px rgba(69,69,69,1); min-height:350px; margin:5px auto 20px;}

.boxtitle {width: 100%;clear: both;background: #ccc;overflow: hidden;padding: 15px 25px;height: 90px;display: flex;flex-flow: wrap;align-content: center;}
.boxtitle h2{ float:left; font-size:25px; font-weight:700; color:#fff; margin:0; padding:0;}
.boxtitle h2 span{  font-size:16px; font-weight:400; color:#fff; margin:0; padding:0; display:block; clear:both;}
.greenboxtitle{ background:#3EBAA7;}
.redboxtitle{ background:#9F1359;}


footer{ width:100%; clear:both; position:relative; margin:10px 0 ; text-align:center;}
.actFeedRow {font-family: 'Open Sans', sans-serif;width: 100%;clear: both;padding: 10px 20px;display: flex;flex-flow: wrap;justify-content: space-between;align-items: center;}
.odd{ background:#E8E8E8;}
.actFeedRow  p{ color:#333333; font-size:16px; margin:0; padding:0;}
.actFeedRow a.viewlink{ float:right; font-size:16px; color:#fff; text-transform:uppercase; text-decoration:none; background:#3473FF; width:95px; height:33px; border-radius:6px; display: block; text-align:center; line-height:33px;}
.actFeedRow a.viewlink:hover{ background:#3EBAA7;}

.proManRow{font-family: 'Open Sans', sans-serif;width: 100%;clear: both;padding: 30px 20px 0; }
.proManRow h1{ margin:0; padding:0; font-size:16px; font-weight:600; color:#333333;}
.proManRow p{ margin:0; padding:0; font-size:14px; font-weight:400; color:#333333;}

.upEventRow {font-family: 'Open Sans', sans-serif;width: 100%;clear: both;padding: 20px 20px;display: flex;flex-flow: wrap;justify-content:;align-items: center; border-bottom:2px solid #707070;}
.upEventRow h2{ font-size:14px; margin:0; padding:0; color:#333;}
.eventIcon{ float:left; margin:0 15px 0 0}

.backto {display: inline-block;font-size: 14px;font-weight: 600;color: #1D62FF;text-decoration: none;text-align: left;float: right;position: relative;margin: 15px;}
.backto i {float: right !important;display: block !important;margin: 3px 0 0 6px !important;font-size: 18px;}
.backto:hover { color:#3EBAA7;}

.blueboxtitle{background:#5466A2;}
.openServiceRow{font-family: 'Open Sans', sans-serif;width: 100%;clear: both;padding: 20px 20px;display: flex;flex-flow: wrap;justify-content: space-between;align-items: center; border-bottom:2px solid #707070;}
.openServiceRow p{ font-size:14px; margin:0; padding:0; color:#333;}
.openServiceRow a{ font-size:16px; font-weight:600; text-decoration:none;}
.redcolor{ color:#CE0C0C;}
.yellowcolor{ color:#F4BE11;}
.bluecolor{ color:#3473FF;}
.editlink {font-family: 'Open Sans', sans-serif;font-size: 20px;font-weight: 600;text-decoration: none;position: absolute;bottom: 10px;right: 18px;}


.myaccountRow{ width:100%; clear:both; overflow:hidden; padding:0 30px 0;}
.myaccountRow ul {margin: 0;padding:20px  35px;border-bottom: 1px solid #707070;width: 100%;overflow: hidden;display: flex;align-items: center;}
.myaccountRow ul li{font-family: 'Open Sans', sans-serif; display:block; float:left; width:33.333%; list-style:none;}


.notificationsRow ul li{font-family: 'Open Sans', sans-serif; display:block; float:left; width:15%; list-style:none;}
.notificationsRow ul li:first-child{ width:70%;}
.notificationsRow ul li:last-child{ text-align:right;}
.switchcol{ float:right;}

.emergencyContacts ul li{font-family: 'Open Sans', sans-serif; display:block; float:left; width:20%; list-style:none;}
.emergencyContacts ul li:first-child{ width:60%;}
.emergencyContacts ul li:last-child{ text-align:right;}

.ledgerRow ul li{font-family: 'Open Sans', sans-serif; display:block; float:left; width:10%; list-style:none;}
.ledgerRow ul li:first-child{ width:80%;}
.ledgerRow ul li:last-child{ text-align:right;}


.correspondRow ul li{font-family: 'Open Sans', sans-serif; display:block; float:left; width:40%; list-style:none;}
.correspondRow ul li:first-child{ width:20%;}
.correspondRow ul li:last-child{ text-align:right;}

.myaccountRow ul li span{ font-size:10px; display:block;}
.myaccountRow ul li h2{ font-size:20px; font-weight:600; color:#1C1C1C; margin:0; padding:0;}
.myaccountRow ul li a.editlink {display: inline-block;font-size: 18px;font-weight: 600;color: #1D62FF;text-decoration: none;text-align: right;float: right;position: relative;margin: 0 0 0;bottom: 0;right: 0;}
.myaccountRow ul li a.editlink i {float: right;display: block !important;margin: 4px 0 0 5px !important;}
.myaccountRowLast  ul{ border-bottom:0;}

.ledview  {float: right;font-size: 16px;color: #fff;text-transform: uppercase;text-decoration: none;background: #535E83;width: 90px;height: 30px;border-radius: 6px;display: block;text-align: center;line-height: 30px;}
.ledview:hover { background:#27AC1C; color:#fff;}


.myaccountRow ul li h3 {float: left;margin: 10px 10px 0 0;font-size: 16px;font-weight: 600;}
.myaccountRow ul li input {display: none;}
.myaccountRow ul li .toggleWrapper {z-index: 3;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s;width: 36px;height: 36px;border-radius: 50%;background-color: #c4c4c4;}
.myaccountRow ul li .toggleWrapper:active {width: 36px;height: 36px;}
.myaccountRow ul li .toggleWrapper:active .toggle {height: 17px;width: 17px;}
.myaccountRow ul li .toggleWrapper .toggle {transition: all 0.2s ease-in-out;height: 20px;width:20px;background-color: transparent;border: 10px solid #fff;border-radius: 50%;cursor: pointer;animation: red 0.7s linear forwards;}
.myaccountRow ul li .background {position: absolute;height: 100vh;width: 100vw;background-color: #fef5f4;}
.myaccountRow ul li input:checked ~ .background {background-color: #f9faf7;}
.myaccountRow ul li input:checked + .toggleWrapper {background-color: #5abf25;}
.myaccountRow ul li input:checked + .offswitch{  background-color: #ce0c0c;}
.myaccountRow ul li input:checked + .toggleWrapper:active {}
.myaccountRow ul li input:checked + .toggleWrapper .toggle {width: 0;background-color: #fff;border-color: transparent;border-radius: 30px;animation: green 0.7s linear forwards !important;}


@keyframes red {0% {height: 30px;width: 0;border-width: 5px;}
55% {height: 13px;width: 27px;border-width: 10px;}
70% {height: 20px;width: 20px;border-width: 10px;}
85% {height: 15px;width: 25px;border-width: 10px;}
100% {height: 20px;width: 20px;border-width: 10px;}
}
@keyframes green {
0% {height: 20px;width: 20px;border-width: 10px;}
25%, 55%, 85% {height: 30px;width: 5px;border-width: 5px;}
40%, 70%, 100% {height: 30px;width: 0;border-width: 5px;}
}