/* -------------------
BEGIN  
Sitecore Resource: 073fa5d5-1d69-4fc9-ae9c-ffc1c0db822d
   -------------------*/

.btnResidentia {
  border-radius: 3px;
  background-color: #f0efef;
  border: solid 1px #d9e3ec;
  text-align: center;
  padding: 30px;
  margin: 5px;
}
.btnResidentia:focus {
  background-color: #0864b1 !important;
  color: white !important;
}
.btnResidentia:focus > span {
  color: white !important;
}
.btnResidentia:focus > h5 {
  color: white !important;
}
.btnResidentia:hover {
  background-color: #0864b1;
  color: white;
  text-decoration: none !important;
}
.btnResidentia:hover > span {
  color: white;
}
.btnResidentia:hover > h5 {
  color: white !important;
}
.btnResidentia h5 {
  color: #0864b1;
  font-family: "FFNettoWeb", Arial, sans-serif;
  font-weight: bold;
}
.btnResidentia span {
  text-align: justify;
  font-weight: normal;
}
.text-align_Center {
  text-align: center;
}
@media screen and (max-width: 640px) {
  .pad-job {
    padding: 0 !important;
    margin-top: 10px;
  }
  .pad-job .jobAdd {
    position: relative;
    right: 10px;
  }
}
.jbinput {
  width: 100% !important;
  border-radius: 8px !important;
}
.jobAdd {
  line-height: 6.5px !important;
  height: 45px !important;
  border-radius: 6px !important;
  width: 115px !important;
  color: white !important;
}
.pad-job {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
span.field-validation-error {
  color: red;
  font-weight: 100;
  font-family: "Segoe UI", sans-serif, arial !important;
}
.field-validation-error span {
  color: red;
  font-weight: 100;
  font-family: "Segoe UI", sans-serif, arial !important;
}
.validation-summary-errors ul li {
  color: red;
  font-weight: 100;
  font-family: "Segoe UI", sans-serif, arial !important;
}
.mar-top {
  margin-top: 10px;
}
/*Place holder*/

::-webkit-input-placeholder {
  /* Chrome */
  color: #d4dadc !important;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #d4dadc !important;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #d4dadc !important;
  opacity: 1;
}
:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #d4dadc !important;
  opacity: 1;
}
/*HExagon*/

.hexagonGreen {
  position: relative;
  width: 81px;
  content: "\2714";
  height: 45.74px;
  background-color: #3db08e;
  margin: 28.87px 0;
  float: left;
  margin-left: 11%;
  margin-top: 10%;
}
.hexagonGreen:before,
.hexagonGreen:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 40px solid transparent;
  border-right: 41px solid transparent;
}
.hexagonGreen:before {
  bottom: 100%;
  border-bottom: 22.87px solid #3db08e;
}
.hexagonGreen:after {
  top: 100%;
  width: 0;
  border-top: 20.87px solid #3db08e;
}
.hexagonOrange {
  position: relative;
  width: 81px;
  content: "\2714";
  height: 45.74px;
  background-color: orange;
  margin: 28.87px 0;
  float: left;
  margin-left: 11%;
  margin-top: 10%;
}
.hexagonOrange:before,
.hexagonOrange:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 40px solid transparent;
  border-right: 41px solid transparent;
}
.hexagonOrange:before {
  bottom: 100%;
  border-bottom: 22.87px solid orange;
}
.hexagonOrange:after {
  top: 100%;
  width: 0;
  border-top: 20.87px solid orange;
}
.hexagonRed {
  position: relative;
  width: 81px;
  content: "\2714";
  height: 45.74px;
  background-color: red;
  margin: 28.87px 0;
  float: left;
  margin-left: 11%;
  margin-top: 10%;
}
.hexagonRed:before,
.hexagonRed:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 40px solid transparent;
  border-right: 41px solid transparent;
}
.hexagonRed:before {
  bottom: 100%;
  border-bottom: 22.87px solid red;
}
.hexagonRed:after {
  top: 100%;
  width: 0;
  border-top: 20.87px solid red;
}
.hexagonGrey {
  position: relative;
  width: 81px;
  content: "\2714";
  height: 45.74px;
  background-color: gray;
  margin: 28.87px 0;
  float: left;
  margin-left: 11%;
  margin-top: 10%;
}
.hexagonGrey:before,
.hexagonGrey:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 40px solid transparent;
  border-right: 41px solid transparent;
}
.hexagonGrey:before {
  bottom: 100%;
  border-bottom: 22.87px solid gray;
}
.hexagonGrey:after {
  top: 100%;
  width: 0;
  border-top: 20.87px solid gray;
}
.box {
  border: 1px solid black;
  background-color: #cccccc;
  width: 100px;
  height: 100px;
  position: absolute;
}
.line {
  width: 1px;
  height: 100px;
  background-color: black;
  position: absolute;
  z-index: -1;
}
#box1 {
  top: 0;
  left: 0;
}
#box2 {
  top: 200px;
  left: 0;
}
#box3 {
  top: 250px;
  left: 200px;
}
#line1 {
  top: 100px;
  left: 50px;
}
#line2 {
  /*top: 431px;*/
  left: 409px;
  height: 146px;
  transform: rotate(120deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(90deg);
  width: 5px;
  background-color: #edf739 !important;
}
#line3 {
  /*top: 431px;*/
  left: 635px;
  height: 145px;
  transform: rotate(120deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(90deg);
  width: 5px;
  background-color: #edf739 !important;
}
#line4 {
  /*top: 431px;*/
  left: 861px;
  height: 146px;
  transform: rotate(120deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(90deg);
  width: 5px;
  background-color: #edf739 !important;
}
.status-icon {
  color: white;
  font-size: 31px;
  left: 29px;
  top: 9px;
  position: absolute;
}
.content {
  margin-top: 40%;
  width: 75%;
}
.small-offset-2 {
  margin-left: 22.66667% !important;
}
@media screen and (min-width: 361px) and (max-width: 640px) {
  .content {
    margin-top: 28%;
    width: 60%;
  }
  .mar-div {
    margin-left: 80px !important;
  }
}
@media screen and (min-width: 376px) and (max-width: 812px) {
  .mar-div {
    padding-left: 15px !important;
  }
}
.mar-div {
  padding-left: 117px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .desktop-mode {
    margin-bottom: 36% !important;
  }
}
@media (min-width: 992px) {
  .desktop-mode {
    margin-bottom: 23% !important;
  }
}
@media (max-width: 767px) {
  .desktop-mode {
    display: none !important;
  }
  .mobile-mode {
    display: block !important;
  }
  .line {
    display: none !important;
  }
  .column.mobile-mode {
    margin-left: 0px !important;
  }
  .mobile-box {
    float: inherit;
  }
  .mobile-box .content {
    margin-left: 143px;
    margin-top: 21px;
  }
}
@media screen and (max-width: 360px) {
  .mobile-box .content {
    margin-left: 120px;
    width: auto;
    margin-top: 10px;
  }
}
@media screen and (min-width: 1440px) {
  .line {
    margin-top: 6%;
  }
  #line2 {
    left: 384px;
    height: 125px;
  }
  #line3 {
    left: 590px;
    height: 125px;
  }
  #line4 {
    left: 796px;
    height: 124px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .line {
    margin-top: 7%;
  }
  #line2 {
    left: 218px;
    height: 78px;
  }
  #line3 {
    left: 376px;
    height: 78px;
  }
  #line4 {
    left: 535px;
    height: 78px;
  }
  .btn-small {
    float: right;
  }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {
  .line {
    margin-top: 6.5%;
  }
  #line2 {
    left: 255px;
    height: 103px;
  }
  #line3 {
    left: 439px;
    height: 103px;
  }
  #line4 {
    left: 623px;
    height: 103px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .line {
    margin-top: 6.5%;
  }
  #line2 {
    left: 334px;
    height: 104px;
  }
  #line3 {
    left: 517px;
    height: 104px;
  }
  #line4 {
    left: 702px;
    height: 104px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .line {
    margin-top: 6%;
  }
  #line2 {
    left: 384px;
    height: 125px;
  }
  #line3 {
    left: 590px;
    height: 125px;
  }
  #line4 {
    left: 796px;
    height: 124px;
  }
}
/*Fix recaptch box trimming issue- start*/

@media (max-width: 375px) {
  .g-recaptcha {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}
@media (max-width: 320px) {
  .g-recaptcha {
    transform: scale(0.73);
    -webkit-transform: scale(0.73);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}
/*Fix recaptch box trimming issue- end*/

.btn-small {
  color: white !important;
}
@media screen and (min-width: 992px) {
  .btn-small {
    margin-left: 40%;
  }
}
/* -------------------
BEGIN  
Sitecore Resource: 5f29e671-5e3f-4487-9e94-d125cba4d2d0
   -------------------*/

/*
#login_box_right,
#resAppform,
#ElecSupply .tile-layout,
#ExistingApplication, 
#storageform, 
.solar, 
#resAppform, 
#ElecSupply .tile-layout,
.row .pad-job,
#main_body #login_body .row.cleardef.cl,
#claimform,
#insuranceform
{
    display: none;
}
*/