.envelop_section { margin-bottom: 10px; } .custom_alert { display: none; cursor: pointer; margin-bottom: 15px; } #cash_envelops { margin-top: 30px; } #ch_envelops { margin-top: 30px; } /* Accordion style */ /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #dee2e6; color: #212529; cursor: pointer; padding: 18px; /* width: 80%; */ text-align: left; border: none; outline: none; transition: 0.4s; } .archive_button { padding: 18px; /* width: 20%; */ } hr { margin-top: 32px; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #acb3c2; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 30px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } .panel.active:after { margin-bottom: 30px; }