.sep-accordion {
width: 100%;
}
.sep-accordion-item {
margin-bottom: 10px;
border: 0;
border-radius: 0;
overflow: hidden;
}
.sep-accordion-item-title {
display: flex;
align-items: center;
cursor: pointer;
padding: 15px 20px;
background-color: #f9f9f9;
border-radius: 5px;
transition: all 0.3s ease;
width: 100%;
text-align: left;
}
.sep-accordion-item-title:hover {
background-color: #f0f0f0;
}
.sep-accordion-item.active .sep-accordion-item-title {
background-color: #e9e9e9;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.sep-accordion-title-text {
flex: 1;
}
.sep-accordion-item-content {
display: none;
background-color: #ffffff;
border-top: none;
border-radius: 0 0 5px 5px;
}
.sep-accordion-item.active .sep-accordion-item-content {
display: block;
}
.sep-accordion-content-inner {
padding: 20px;
} .sep-accordion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.sep-accordion-icon svg {
max-width: 50px;
} .sep-accordion-icon-left .sep-accordion-item-title {
flex-direction: row;
}
.sep-accordion-icon-left .sep-accordion-icon {
margin-right: 10px;
order: 1;
}
.sep-accordion-icon-left .sep-accordion-title-text {
order: 2;
} .sep-accordion-icon-right .sep-accordion-item-title {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.sep-accordion-icon-right .sep-accordion-title-text {
flex-grow: 1;
order: 1;
}
.sep-accordion-icon-right .sep-accordion-icon {
margin-left: 15px;
flex-shrink: 0;
order: 2;
} .sep-accordion-icon-closed {
display: flex !important;
}
.sep-accordion-icon-open {
display: none !important;
}
.sep-accordion-item.active .sep-accordion-icon-closed {
display: none !important;
}
.sep-accordion-item.active .sep-accordion-icon-open {
display: flex !important;
} .sep-accordion-item-title:focus {
outline: 2px solid #007cba;
outline-offset: 2px;
} @media (max-width: 767px) {
.sep-accordion-item-title {
padding: 12px 15px;
}
.sep-accordion-content-inner {
padding: 15px;
}
.sep-accordion-icon {
width: 14px;
height: 14px;
}
.sep-accordion-icon svg {
width: 14px;
height: 14px;
}
.sep-accordion-icon-right .sep-accordion-icon {
margin-left: 10px;
}
.sep-accordion-icon-left .sep-accordion-icon {
margin-right: 8px;
}
} .sep-accordion .ui-accordion-header {
margin: 0 !important;
padding: 15px 20px !important;
background: #f9f9f9 !important;
border: 1px solid #e0e0e0 !important;
border-radius: 5px !important;
}
.sep-accordion .ui-accordion-header-active {
background: #e9e9e9 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.sep-accordion .ui-accordion-content {
padding: 20px !important;
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
border-top: none !important;
border-radius: 0 0 5px 5px !important;
margin: 0 !important;
}