@import(reference) "/apps/oncorwww/clientlibs/clientlib-site-refresh/less/OncorGlobal/oncor-variables.less";.loader{border:4px solid #f3f3f3;border-top:4px solid #333;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}
@keyframes spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.cmp-background-gray-linear-gradient{.faq-question{border:1px solid rgb(0 61 121 / 50%)}
}
#faq-accordion-container{max-width:100%;margin-top:45px;.faqAccordion.aem-GridColumn.aem-GridColumn--default--12{margin:0 auto;max-width:1640px;margin-left:auto;margin-right:auto;float:none;padding:120px 20px}
}
.faq-close{width:16px;height:16px;background:url('../../../../../../content/dam/oncorwww/images-refresh/faqs/icons/close-white.svg') no-repeat center / contain;font-size:0;display:none;position:absolute;top:7px;right:0;cursor:pointer}
.faq-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;h2{font-size:42px;line-height:50px;font-weight:700;margin:0;text-transform:uppercase}
}
.faq-container{display:flex;gap:30px;&.two-column{flex-direction:row;.faq-close{@media screen and (max-width:1200px){width:33px;height:33px;top:-2px;background-size:13px}
}
.faq-item.open{.faq-question-title{@media screen and (max-width:1200px){padding-right:40px}
}
}
.faq-wrapper{flex:1;display:flex;flex-direction:column;gap:30px;&.left-column{order:1}
&.right-column{order:2}
}
}
&.single-column{flex-direction:column;.faq-wrapper{width:100%;display:flex;flex-direction:column;gap:30px}
}
}
.faq-question:focus{outline:0}
.faq-question[aria-expanded="true"]{background-color:#003366;color:white;justify-content:space-between;text-align:left;border-radius:20px 20px 0 0;&:focus{outline:0}
}
.faq-answer-wrapper{display:none;overflow:visible;max-height:none}
.faq-answer-wrapper[aria-hidden="false"]{display:block}
.faq-item{background:white;border-radius:15px;box-shadow:0 2px 5px rgba(0,0,0,0.1);overflow:hidden;transition:all .3s ease-in-out;position:relative;min-height:60px;break-inside:avoid;max-width:805px;min-height:136px;padding:0}
.single-column .faq-item{max-width:100%}
.faq-question-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.faq-item.open .faq-question-title{padding-right:25px;display:inline-block;font-weight:700}
.faq-item.open .faq-close{display:inline-block}
.faq-btn-wrapper{position:relative;width:100%}
.faq-item.open .faq-question:before{content:"";display:inline-block;width:calc(100% - 60px);height:2px;background:rgba(255,255,255,0.1);position:absolute;left:30px;bottom:0}
html:lang(es){.faq-question{font-size:21px}
}
.faq-question{width:100%;padding:36px 30px;font-size:24px;line-height:32px;font-weight:700;color:#003D79;background:0;border:0;min-height:136px;max-height:136px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:15px;position:relative;&.active{color:#fff;justify-content:space-between;text-align:left}
&:focus{outline:auto}
}
.faq-item{&.open{.faq-question{cursor:auto}
}
}
.faq-answer{max-height:0;overflow:hidden;background:#036;color:white;padding:0 15px;border-radius:0 0 5px 5px;transition:max-height .4s ease-in-out,padding .3s ease-in-out}
.faq-item.open{height:auto;overflow:visible;background:#003366;color:white;border-bottom-left-radius:0;border-bottom-right-radius:0;.faq-answer-wrapper{display:flex;flex-direction:column;align-items:center}
.faq-answer{min-height:auto;max-height:none;overflow:visible;font-size:18px;line-height:26px;padding:10px 10px 30px 20px;font-weight:500;border-bottom-left-radius:15px;border-bottom-right-radius:15px;p{margin:0 0 20px;&:empty{display:none}
&:last-child{margin-bottom:0}
a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px;font-size:18px;line-height:26px}
}
}
}
.faq-button{width:auto !important;max-width:none !important;white-space:nowrap;justify-content:center;align-items:center;display:flex;align-items:center;justify-content:space-evenly;color:#ffffff;border:1px solid #003D79;background:#003D79;max-width:225px;border-radius:30px;cursor:pointer;text-transform:uppercase;transition:background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out;gap:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);position:relative;overflow:hidden;width:100%;text-decoration:none;@media screen and (max-width:767px){html:lang(es) &{max-width:100% !important;height:auto;padding:10px 15px 12px 60px;.faq-button-text{white-space:normal;letter-spacing:.05em}
}
}
}
.faq-button{position:relative;display:inline-block;height:60px;padding:17px 22px 10px 80px;line-height:24px;transition:all .3s;@media screen and (max-width:767px){padding:17px 22px 10px 60px}
}
.faq-button-icon{position:absolute !important;top:50% !important;left:22px !important;transform:translateY(-50%) !important;transition:left .3s ease !important}
.faq-button-text{margin-right:48px;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap}
.faq-button-text,.faq-button-icon{transition:transform .3s ease-out;-webkit-transition:transform .3s ease-out;-moz-transition:transform .3s ease-out;-ms-transition:transform .3s ease-out;-o-transition:transform .3s ease-out}
.faq-button-text{font-size:16px;line-height:19px;font-weight:600;white-space:nowrap;letter-spacing:.2em}
.faq-button-icon{width:38px;height:38px;filter:brightness(0) invert(1)}
@media screen and (min-width:1200px){.faq-button:hover,.faq-button:focus{background-color:transparent;color:#003D79;border-color:#003D79;.faq-button-icon{filter:none !important}
}
.faq-button:hover .faq-button-icon,.faq-button:focus .faq-button-icon{transform:translateX(140px);-webkit-transform:translateX(140px);-moz-transform:translateX(140px);-ms-transform:translateX(140px);-o-transform:translateX(140px)}
.faq-button:hover .faq-button-text,.faq-button:focus .faq-button-text{transform:translateX(-50px);-webkit-transform:translateX(-50px);-moz-transform:translateX(-50px);-ms-transform:translateX(-50px);-o-transform:translateX(-50px)}
.faq-button:hover .faq-button-icon,.faq-button:focus .faq-button-icon{left:calc(100% - 22px - 38px) !important;filter:none}
.faq-button:hover,.faq-button:focus{padding-left:22px;padding-right:80px}
}
.faq-icon-wrapper{position:absolute;right:20px;opacity:0;transform:translateX(20px);transition:opacity .3s ease-in-out,transform .3s ease-in-out}
.faq-answer-wrapper{width:calc(~"100% + 30px");padding-right:16px;margin-right:-30px;scrollbar-gutter:stable both-edges;@media screen and (min-width:1140px){border-radius:0 0 15px 15px;.faq-answer-wrapper-main{overflow:auto;.faq-answer{position:absolute;top:20px;height:calc(100% - 30px);overflow:auto;padding-top:10px;width:calc(100% - 10px);padding-bottom:40px;&::-webkit-scrollbar-track{background-color:#336494;position:relative;right:30px;-webkit-border-radius:100px;border-radius:100px}
&::-webkit-scrollbar{max-height:90%;width:3px;background-color:#aaa;position:relative;right:30px;border-radius:100px;-webkit-border-radius:100px}
&::-webkit-scrollbar-thumb{background-color:#ef3e42;-webkit-border-radius:20px;border-radius:20px;margin-right:40px;position:relative;right:30px}
}
}
}
.faq-answer-wrapper-main{// @media screen and (max-width:1200px){// height:auto !important;//}
}
}
.faq-item{position:relative;z-index:1}
.faq-item.open{position:relative;z-index:99;}
@media screen and (max-width:1200px){.faq-container.two-column .faq-wrapper{gap:0}
.two-column{.faq-item.open{z-index:1}
}
#faq-accordion-container{.faqAccordion.aem-GridColumn.aem-GridColumn--default--12{padding:50px 20px;max-width:100%}
}
.faq-item.open .faq-question:before{width:calc(~"100% - 40px");left:20px}
.faq-close{width:13px;height:13px}
.faq-header{flex-direction:column;margin-bottom:30px;gap:18px;h2{font-size:24px;line-height:28px;color:#1e2d3d}
}
.faq-item.open .faq-answer p{line-height:20px;font-weight:600}
.faq-item .faq-question-title{line-height:22px}
.faq-container{flex-direction:column !important;gap:0 !important}
.faq-wrapper{column-count:1 !important;width:100% !important}
.faq-question{font-size:18px;padding:20px;min-height:79px}
.faq-item .faq-answer-wrapper{padding:0}
.faq-item{width:100%;margin-bottom:10px;min-height:auto;max-width:100%;border-radius:10px;.faq-question{box-shadow:0 20px 40px -20px rgba(51,51,51,0.2)}
&.open{border-bottom-left-radius:15px;border-bottom-right-radius:15px;.faq-answer{padding:20px;font-size:16px;line-height:20px;font-weight:500;p a{font-size:16px;line-height:20px;font-weight:500}
}
}
}
.faq-button{max-width:160px;min-height:52px;transition:none;.faq-button-icon{width:26px;height:26px}
.faq-button-text{font-size:14px;line-height:18px}
&:hover,&:focus{.faq-button-icon{transform:translateX(112px)}
.faq-button-text{transform:translateX(-30px)}
}
}
}
.faq-answer-wrapper{position:absolute;left:0;width:100%;opacity:0;transition:opacity .3s ease;background:#036;z-index:999;display:none;overflow:auto;border-radius:15px}
.faq-item.open .faq-answer-wrapper{opacity:1;pointer-events:auto}
.faq-item.expand-down .faq-answer-wrapper{top:100%;border-radius:0 0 15px 15px}
.faq-item.expand-up .faq-answer-wrapper{bottom:100%;border-radius:15px 15px 0 0}
.faq-answer-wrapper{position:absolute;width:100%;overflow:auto;z-index:999;background:#036;border-radius:15px;opacity:0;transition:height .3s ease,opacity .3s ease;display:none;pointer-events:none}
.faq-item.open .faq-answer-wrapper{opacity:1;pointer-events:auto}
.faq-item.expand-down .faq-answer-wrapper{top:100%}
.faq-item.expand-up .faq-answer-wrapper{bottom:100%}
@media screen and (max-width:768px){.faq-button:hover .faq-button-icon,.faq-button:focus .faq-button-icon{transform:none !important;-webkit-transform:none !important;-moz-transform:none !important;-ms-transform:none !important;-o-transform:none !important}
.faq-button:hover .faq-button-text,.faq-button:focus .faq-button-text{transform:none !important;-webkit-transform:none !important;-moz-transform:none !important;-ms-transform:none !important;-o-transform:none !important}
.faq-header{margin-top:20px}
}
@media screen and (max-width:768px){.faq-button{&:hover .faq-button-icon,&:focus .faq-button-icon{top:16px !important}
}
}