/* Custom css to support react integration ion redesign */

#block-reactloginregisterbutton:before{
	clear: unset;
}

#react-centralized-guest {
    display: none;
}

#react-okta-login {
    display: none;
}

.outages-safety-wildfire-safety-safety-related-planned-outages .paragraph--type--block-reference- {
    width: 100% !important;
}
/* Custom Select Box */
.sce-cus-selectBx {
    position: relative;
    border: 1px solid #767676;
    border-top: 4px solid #9B9B9B;
    background-color: #FFFFFF;
}

.sce-cus-selectBx .sce-selectBxBorder {
    background-color: #FFFFFF;
}

.sce-cus-selectBx .no-icon .sce-check-icon {
    display: none;
}

.sce-cus-selectBx .border-error {
    border: 2px solid #CC0000;
}

.sce-cus-selectBx .border-success {
    border: 2px solid #64A000;
}

.sce-cus-selectBx .s-hidden {
    visibility: hidden;
    display: none;
}

.sce-cus-selectBx .select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    color: #000000;
    min-width: auto;
    height: auto;
    font-size: 16px;
    background-color: #FFFFFF;
    width: 100%;
}

.sce-cus-selectBx .select .styledSelect,.sce-cus-selectBx .select .disabledSelect {
    padding: 10px 35px 10px 15px;
    font-weight: 400;
    color: #000000;
}

.sce-cus-selectBx .select .styledSelect:after,.sce-cus-selectBx .select .disabledSelect:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: #417300 transparent transparent transparent;
    position: absolute;
    top: 17px;
    right: 5px;
}

.sce-cus-selectBx .select .styledSelect:focus,.sce-cus-selectBx .select .disabledSelect:focus {
    outline: none;
    font-weight: 700;
}

.sce-cus-selectBx .select .styledSelect.expanded,.sce-cus-selectBx .select .expanded.disabledSelect {
    font-weight: 700;
}

.sce-cus-selectBx .select .disabledSelect {
    cursor: default;
    background-color: #efefef;
    color: #545454;
}

.sce-cus-selectBx .select .disabledSelect:focus {
    outline: none;
    font-weight: 400;
}

.sce-cus-selectBx .select .options {
    margin: 0;
    list-style: none;
    padding-left: 0;
    background-color: #FFFFFF;
    max-height: 200px;
    display: none;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    border: 1px solid #767676;
    z-index: 2;
}

.sce-cus-selectBx .select .options li {
    margin: 0 0;
    padding: 5px 10px;
}

.sce-cus-selectBx .select .options li:focus {
    background-color: #767676;
    color: #FFFFFF;
    outline: none;
}

.sce-cus-selectBx .sce-check-icon {
    position: absolute;
    margin-top: 10px;
    right: 30px;
    z-index: 2;
}

@media #{$phones-only} {
	.sce-cus-selectBx .select .styledSelect, .sce-cus-selectBx .select .disabledSelect {
        padding: 10px 45px 10px 15px;
    }
}

.field--name-field-block-reference [id*="react"], .field--name-field-block-reference [id*="react"] div, .field--name-field-block-reference [id*="react"] p, .field--name-field-block-reference [id*="react"] span,
.paragraph--type--block-reference- [id*="react"], .paragraph--type--block-reference- [id*="react"] div, .paragraph--type--block-reference- [id*="react"] p, .paragraph--type--block-reference- [id*="react"] span {
    font-family: var(--Font-Family) !important;
}
#react-myaccountlogout-container #sce_dtm_tag div[class*="myAccountLogout__sceLoginRow"] {
    display: none;
}

#react-authenticated-pay #tncContent_Print #tnc-content ol li {
    list-style-type: decimal;
}
#react-authenticated-pay #tncContent_Print #tnc-content ul li {
    list-style-type: circle;
}
/* styling for popup in pages where react block present*/
@keyframes loading-spinner {
    0% {
       transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loading-spinner-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 110000;
    padding-bottom: 0px !important;
    
    .loading-spinner-card{
        display: flex;
        max-width: 660px;
        padding: 16px 16px 24px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 4px;
        background:#FFF;
        color: #000;        
    
        .loader-main-header{
          width: 100%;
          color: #4F4F4F;
          font-size:20px;
          font-style: normal;
          font-weight: 600;
          line-height: 24px; 
          font-family: "open-sans" !important;   
        }
        .border-bottom{
          width: 100%;
          border-bottom: 1px #A5B7BA solid !important;
          transform: translateY(-6px);
        }  
      
      .loader-sub-header{
          color:#4F4F4F;
          text-align: center;
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px; 
          padding-top: 16px;
          
      }
      .loading-spinner {
          display: inline-block;
          position: relative;
          width: 88px;
          height: 88px;
          right: 15px;
          
        }
        .spinner-child {
          box-sizing: border-box;
          display: block;
          position: absolute;
          width: 88px;
          height: 88px;
          margin: 8px;
          border: 8px solid #0A6ED1;
          border-radius: 50%;
          animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;          
          border-color: #0A6ED1 transparent transparent transparent;
        }
        .loading-spinner .spinner-child:nth-child(1) {
          animation-delay: -0.45s;
        }
        .loading-spinner .spinner-child:nth-child(2) {
          animation-delay: -0.3s;
        }
        .loading-spinner .spinner-child:nth-child(3) {
          animation-delay: -0.15s;
        }
    }      
    
}
@media screen and (max-width:1023px) {
   .loading-spinner-overlay{      
       width: 103%;
       padding-right: 8px;
       padding-left: 8px;     
    
   }   
    .loading-spinner-card{    
        width: 94%;
    }
}
@media (min-width: 992px){
    .loading-spinner-card{
    width: 83.33333333%;}
}