.SecureAlertError{ padding: 20px; background-color: #f2dede; text-align: center; color:#a94442; margin-bottom: 40px; }
.SecureAlertAlert{ padding: 20px; background-color: #fcf8e3; text-align: center; color:#8a6d3b; margin-bottom: 40px; }
.SecureAlertSuccess{ padding: 20px; background-color: #dff0d8; text-align: center; color:#3c763d; margin-bottom: 40px; }


.LoginFormContainer{ width: 100%;  margin: auto; position: relative; }
.LoginForm{  width: 100%; max-width: 400px; margin: auto; padding: 100px 20px; }

.Col50{
    width: calc(50% - 5px);
    margin-left: 5px;
    margin-right: 5px;
}
.HomePageTestimonialsFormInput {
    width: 100%;
    padding: 15px;
    font-size: 12px;
    border: 0;
    box-shadow: 0 0 20px -3px rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    outline: none;
    transition: 0.5s all;
    border-radius: 0;
    background-color: #ffffff;
    -webkit-appearance: none;
    background-position: calc(100% - 15px);
    background-repeat: no-repeat;
}


.MyOgeroMenuContainer{ width: 100%; display: block; background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 2; position: relative; }
.MyOgeroMenu{ width: 100%; max-width: 1100px; margin: auto; position: relative; padding: 20px 0; text-align: center; }
.MyOgeroMenu a{ padding: 10px 20px; display: inline-block; color:#000000; text-decoration: none; border-radius: 20px; font-weight: 400; transition: 0.5s all; }
.MyOgeroMenu a.BackgroundGradient{ color:#ffffff !important; }
.MyOgeroMenu a:hover{ background-color: rgba(238,238,238,1); }
.MyOgeroDashboardContainer{ width: 100%; display: block;  z-index: 1; }
.MyOgeroDashboard{ width: 100%; max-width: 1100px; margin: auto; position: relative;  }
.MyOgeroDashboardSection1{ float:left; background-color: rgba(248,248,248,1); width: calc(50% - 2px); padding: 40px; position: relative; }
.MyOgeroDashboardSection2{ float:right; background-color: rgba(248,248,248,1); width: calc(50% - 2px); padding: 0px; position: relative; }
.MyOgeroDashboardSection3{ float:left; background-color: rgba(248,248,248,1); width: calc(100% - 0px); padding: 40px; }


@media only screen and (max-width: 800px) {
    .MyOgeroDashboardSection1{ width: calc(100% - 0px); padding: 40px; height:auto !important; position: relative; margin-bottom: 5px; }
    .MyOgeroDashboardSection2{ width: calc(100% - 0px); padding: 40px; comheight:auto !important; position: relative; }
    .MyOgeroDashboardSection3{ width: calc(100% - 0px); padding: 40px; position: relative; }

}


.MyOgeroDashboardSection1Name{ margin-top: 20px; font-size: 24px;  }
.MyOgeroDashboardSection1Name div{ font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.MyOgeroDashboardSection1Name span{ font-size: 24px; font-weight: 700; }
.MyOgeroDashboardSection1Info span{ width: 150px; display: inline-block; font-weight: 700;  }
.MyOgeroDashboardSection1Info div{ margin-bottom: 10px; }

.MyOgeroDashboardSection2NumberChangeContainer{ display: block; background-color: rgba(34,34,34,1); padding: 20px; }
.MyOgeroDashboardSection2NumberChange{ display: block; position: relative; width: 100%; background-color: #ffffff; height:40px; line-height: 40px; padding-left: 20px; }
.MyOgeroDashboardSection2NumberChange div{ position: absolute; left:20px; top:0; bottom:0; width: 150px; font-weight: 700; z-index: 2; line-height: 40px; }
.MyOgeroDashboardSection2NumberChange select{ position: absolute; left:0; top:0; bottom:0; width: calc(100% - 40px); border:0; height:40px; line-height: 40px; background-color: transparent;  -webkit-appearance:none; padding-left: 140px; padding-right:20px; z-index: 4; }
.MyOgeroDashboardSection2NumberChange a{ display: block; z-index: 2; position:absolute; top:0; right:0; bottom:0; width: 40px; transition: 0.5s all; }
.MyOgeroDashboardSection2NumberChange a:hover{ opacity: 0.8; }
.MyOgeroDashboardSection2NumberChange i{ position: absolute; right:40px; width: 20px; text-align: center; top:0; bottom:0; margin: auto; line-height: 40px; z-index: 3; }
.MyOgeroDashboardSection2NumberChange a::before{ display: block; content:''; position: absolute; z-index: 3; top:0; bottom:0; right:0; width: 40px; background-image: url("../../img/icon_addphone.png"); background-size: 20px; background-repeat: no-repeat; background-position: center; }


.MyOgeroDashboardSection2Services{ display: flex; margin: 20px; }
.MyOgeroDashboardSection2Services div{ flex:1; background-color: #ffffff; margin: 1px; padding: 15px; color:rgba(49,39,131,1); font-weight: 700; font-size: 13px; }
.MyOgeroDashboardSection2Services div span{ display: block; margin-top: 5px; font-weight: 700 !important;; color:rgba(51,51,51,1); font-size: 12px !important;; }

.MyOgeroDashboardSection2Container{ display: flex; justify-content: center; overflow: hidden; width: 100%; margin: auto; text-align: center; }

.MyOgeroDashboardSection2Bill{ width: 150px; display: inline-block; text-align: center; margin: 10px; }
.MyOgeroDashboardSection2Bill b, .MyOgeroDashboardSection2Consumption b{ font-weight: 700; display: block; }
.MyOgeroDashboardSection2Bill div{ width: 150px; height:150px; border-radius: 50%; text-align: center; margin-bottom: 10px; }
.MyOgeroDashboardSection2Bill section{ color:#ffffff; font-size: 24px; font-weight: 700; text-align: center; padding-top: 50px; }
.MyOgeroDashboardSection2Bill span{ display:block; color:#ffffff; font-size: 12px; font-weight: 400; text-align: center; }
.MyOgeroDashboardSection2Bill a{ background-color: rgba(248,248,248,1);  padding: 2px 0;  border-radius: 3px;  text-decoration: none;  font-size: 11px;  text-transform: uppercase;  font-weight: 700;  margin-top: 10px;  display: block; transition: 0.5s all; }
.MyOgeroDashboardSection2Bill a:hover{ opacity: 0.6; }

.MyOgeroDashboardSection2Consumption{ width: 150px; display: inline-block; text-align: center; margin: 10px; position: relative; }
.MyOgeroDashboardSection2Consumption div{ width: 150px; background-color: rgba(238,238,238,1); height:150px; border-radius: 50%; z-index: 1; margin-bottom: 10px; }
.MyOgeroDashboardSection2Consumption section{ position: absolute; top:0; right:0; left:0; margin: auto; z-index: 2; padding-top: 55px; font-size: 24px; font-weight: 700; }
.MyOgeroDashboardSection2Consumption section span{ display: block; }




.BillNumberChange{ position: static; width: 100%; }
.BillTable{ border-radius: 5px; overflow: hidden; border:1px solid rgba(144,144,144,0.5); }
.BillTable th{ background-color: rgba(34,34,34,1); color:#ffffff; font-weight: 700; min-height: 60px; height:60px;  }
.BillTable td{ text-align: center; }
.BillTable tr:nth-child(even){ background-color:rgba(238,238,238,1); }
.BillDate{ width: 50px; height:50px; border-radius: 50%; text-align: center; margin: auto; }
.BillDate div{ height:42px; line-height: 42px; font-weight: 700; color:#ffffff; text-transform: uppercase;}
.BillDate span{ display: block; margin-top: -16px; color:#ffffff; font-size: 10px; }
.BillLink{ margin: 0 5px; display: inline-block; text-decoration: none; transition: 0.5s all; }
.BillLink:hover{ opacity:0.6; }
.BillLink i{ display: inline-block; margin-right: 5px; }
.BillAmount{ font-weight: 700; }


.BillPrintContainerBody{ background-color: rgba(238,238,238,1); }
.BillPrintBtn{ position: fixed; z-index: 2; left:0; right:0; top:0; margin: auto; display: block; width: 100%; height:50px; line-height: 50px; text-align: center; overflow: hidden; font-size: 14px; font-weight: 700; color:#ffffff; transition: 0.5s all; text-decoration: none; }
.BillPrintBtn:hover{ opacity: 0.6; }
.BillPrintBtn i{ font-size: 14px; font-weight: 700; color:#ffffff; display: inline-block; margin-right: 5px; text-decoration: none; }
@media print{
    .BillPrintContainerBody{ background-color: #ffffff !important; }
    .BillPrintBtn{ display: none !important; }
    .BillPrintContainer{ margin: auto; margin-top: 0 !important; min-height:0px !important; }
}
.BillPrintContainer{ margin: auto; margin-top: 50px; width: 100%; max-width: 1100px; background-color: #ffffff;  position: relative; padding: 20px; text-align: left; overflow: hidden; min-height:800px; }
.BillPrintHeaderLeftContainer{ width: calc(100% - 400px); float:left; }
.BillPrintHeaderRightContainer{ width: 400px; float:right; text-align: right; }
.BillPrintHeaderRightContainer img{ width:100%; max-width: 190px; opacity: 0.9; margin:10px 0 22px 0; }
.BillPrintTitle1{ font-size: 14px; line-height: 20px;  }
.BillPrintTitle2{ font-size: 48px; margin-top: -5px; font-weight: 700; }
.BillPrintTitle3{ font-size: 16px; font-weight: 700; line-height: 20px; }
.BillPrintTitle4{ font-size: 14px;line-height: 20px;   }


.BillTable2{ border-radius: 0px; overflow: hidden; border:0px solid rgba(144,144,144,0.5); background-color: rgba(144,144,144,0.5); }
.BillTable2 th{ background-color: rgba(34,34,34,1); color:#ffffff; font-weight: 700; height:50px;  }
.BillTable2 td{ text-align: left; height: 26px; }
.BillTable2 tr{ page-break-inside: avoid; page-break-before:auto; }
.BillTable2 tr:nth-child(even), .BillTable2Total{ background-color:rgba(238,238,238,1); }
.BillTable2 tr:nth-child(odd){ background-color:#ffffff; }
.BillTable2 tr td:last-of-type{ text-align: right; width: 150px; }
.BillTable2 tr th:last-of-type{ text-align: right; }
.BillTable2NoCalls{ width: 100%; text-align: center !important; height:100px !important; background-color: #ffffff; }

.BillMenuMobileLink{ display: none; border-radius: 3px; margin: auto; color:#ffffff; width: 35px; height:35px; line-height: 35px; text-align: center; }
.BillMenuMobileLink i{ color:#ffffff; width: 35px; height:35px; line-height: 35px; text-align: center;  }
@media only screen and (max-width: 800px) {
    .BillMenuDesktop{  display: none; }
    .BillMenuMobileLink{ display: block; }
}


.BillMenuMobile{ position:fixed; left:0; right:0; bottom:0; margin: auto; background-color: rgba(0,0,0,0.9); z-index: 99999; height:auto; transition: 1s all;  }
.BillMenuMobileHidden{ height:0 !important;  transition: 1s all; }
.BillMenuMobile a{ display: block; padding: 20px 0; color:#ffffff; border-bottom:1px solid #666666; text-align: center; text-decoration: none; font-size: 14px; }
.BillMenuMobile a i{ color:#ffffff; margin-right: 5px; }
.BillMenuMobileClose{ position: absolute; top:-50px; right:0; width: 50px; height:50px; color:#000000; }
.BillMenuMobileClose i{ width: 50px; height:50px; color:#000000; text-align: center; line-height: 50px; font-size: 24px; }
@media only screen and (max-width: 800px) {
    .BillMenuDesktop{  display: none; }
    .BillMenuMobileLink{ display: block; }
    .BillMenuMobile{ display: none; }
}



.ApplyDSLTable{ border-radius: 5px; overflow: hidden; border:0px solid rgba(144,144,144,0.5); background-color: rgba(144,144,144,0.5); }
.ApplyDSLTable th{ background-color: rgba(34,34,34,1); color:#ffffff; font-weight: 700; height:50px; text-align: left;  }
.ApplyDSLTable td{ text-align: left; height: 26px;  transition: 0.3s all; }
.ApplyDSLTable tr{ page-break-inside: avoid; page-break-before:auto; background-color: #ffffff; transition: 0.3s all; }
.ApplyDSLTable tr:nth-child(even){ background-color:rgba(238,238,238,1); }
.ApplyDSLTable tr:nth-child(odd){ background-color:#ffffff; }
.ApplyDSLTable tr:not(.disabled):hover td{ background-color:rgba(49,39,131,1); color:#ffffff; cursor: pointer; }
.ApplyDSLTable tr:not(.disabled):hover td i{ color:#ffffff; }
.ApplyDSLTable tr.disabled{ opacity: 0.6; }
.ApplyDSLTable tr.selected td, .ApplyDSLTable tr.selected td i{ background-color:rgba(49,39,131,1) !important; color:#ffffff !important; }

.MyConsumptionGrid{ display: block; clear:both; }
.MyConsumptionGrid span{ display: block; float:left; background-color: #ffffff; margin-bottom: 2px; padding: 10px; border-bottom:1px solid rgba(238,238,238,1); }
.MyConsumptionGrid span:nth-child(1){ color:rgba(49,39,131,1); font-weight: 700; margin-right: 2px; width: 150px;  }
.MyConsumptionGrid span:nth-child(2){ width: calc(100% - 152px);  }

.MyConsumptionLeft{ float:left; width: 50%; }
.MyConsumptionRight{ float:right; width: 50%; text-align: center; }
@media only screen and (max-width: 800px) {
    .MyConsumptionLeft, .MyConsumptionRight{ width: 100%; float:none; margin-bottom: 20px; }
}

.ApplyDSLTable td .fa-check, .ApplyDSLTable td .fa-times{ text-align: center; width: 100%; text-align: center; }


.BillOutstandingSection1{ float:left; width: calc(100% - 200px); font-size: 18px; color:#ffffff; padding: 40px 0 0 20px; background-color: rgba(34,34,34,1); height: 150px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.BillOutstandingSection1 span{ display: block; font-size: 32px; color:#ffffff; font-weight: 700; }
.BillOutstandingSection2{ float:left; width: 200px; padding: 10px 0; border-top-right-radius: 5px; height: 150px; border-bottom-right-radius: 5px; }
.BillOutstandingSection1Text{ text-align: center; padding:50px 30px 0 30px; color:rgba(238,238,238,1); }
@media only screen and (max-width: 1100px) {
    .BillOutstandingSection1{ float:none; width: calc(100% - 0px); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0px;  }
    .BillOutstandingSection2{ float:none; width: calc(100% - 0px);  border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }

}




.service-list-title{ font-weight: 700; display: block; clear: both; }
.service-list-item{ display: block; float:left; border-radius: 20px; margin-right: 20px; margin-bottom: 10px;  text-decoration: none; color:#fff; text-align: center; }
.service-list-item .content{ margin: 2px; padding: 10px 20px; background-color: rgba(255,255,255,1);  border-radius: 18px;  }
.service-list-item .price{ font-weight: 700; margin-top: 5px; }

.service-list-item:hover .content{ background-color: rgba(255,255,255,0); color:#fff; }
.service-list-item:hover .content .text{ color:#fff; }
.service-list-item:hover .content .price{ color:#fff; }


.service-apply-title{ color:rgba(33,64,154,1); font-size: 28px; font-weight:700; }
.service-apply-documents{ font-weight: 700; direction: rtl; text-align: right; }
.service-apply-documents ul{ padding: 0 18px; }
.service-apply-documents *{ font-weight: 700; }
.service-apply-documents .left{ float:left; direction: ltr; text-align: left; width: 50%; }
.service-apply-documents .right{ float:right; direction: rtl; text-align: right; width: 50%; }


.services-apply-title-gray{ background-color: rgba(34,34,34,1); padding: 20px; direction: rtl; font-size: 28px; font-weight:700; color:#fff; margin: 40px 0 20px 0; }

.services-apply-form .HomePageTestimonialsFormLabel{ direction: ltr; text-align: left;}
.services-apply-form{ padding: 20px; }
.services-apply-form .left{
    width: calc(50% - 20px); float:left; text-align: left;
}
.services-apply-form .right{
    width: calc(50% - 20px); float:right;
}
@media only screen and (max-width: 1100px) {
    .service-apply-documents .left{ float:left; direction: ltr; text-align: left; width: 100%; }
    .service-apply-documents .right{ float:right; direction: rtl; text-align: right; width: 100% }
    .services-apply-form .left{ width: 100%; float:left; text-align: left;}
    .services-apply-form .right{ width: 100%; float:right;}
}


@media only screen and (max-width: 1100px) {
}


.services-switch{ background-color: rgba(34,34,34,1); padding: 20px; text-align: center; margin-bottom: 10px; }
.services-switch a{ font-size: 14px; font-weight: 700; padding: 10px 40px; margin: 0 20px; color:#fff; text-decoration: none; border-radius: 20px; white-space:nowrap; }
.services-switch span{ font-size: 14px; font-weight: 700; padding: 10px 40px; margin: 0 20px; color:#fff; text-decoration: none; }
@media only screen and (max-width: 1100px) {
    .services-switch a{ clear: both; margin: 10px 0; }
    .services-switch span{  opacity: 0; }
}