+.checkbox-dropdown {
+ width: 200px;
+ border: 1px solid #aaa;
+ padding: 10px;
+ position: relative;
+ margin: 0 auto;
+
+ user-select: first;
+}
+
+/* Display CSS arrow to the right of the dropdown text */
+.checkbox-dropdown:after {
+ content:'';
+ height: 0;
+ position: absolute;
+ width: 0;
+ border: 6px solid transparent;
+ border-top-color: #000;
+ top: 50%;
+ right: 10px;
+ margin-top: -3px;
+}
+
+/* Reverse the CSS arrow when the dropdown is active */
+.checkbox-dropdown.is-active:after {
+ border-bottom-color: #000;
+ border-top-color: #fff;
+ margin-top: -9px;
+}
+
+.checkbox-dropdown-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 100%; /* align the dropdown right below the dropdown text */
+ border: inherit;
+ border-top: none;
+ left: -1px; /* align the dropdown to the left */
+ right: -1px; /* align the dropdown to the right */
+ opacity: 0; /* hide the dropdown */
+
+ transition: opacity 0.4s ease-in-out;
+ height: 100px;
+ overflow: scroll;
+ overflow-x: hidden;
+ pointer-events: none; /* avoid mouse click events inside the dropdown */
+}
+.is-active .checkbox-dropdown-list {
+ opacity: 1; /* display the dropdown */
+ pointer-events: auto; /* make sure that the user still can select checkboxes */
+}
+
+.checkbox-dropdown-list li label {
+ display: block;
+ border-bottom: 1px solid silver;
+ padding: 10px;
+
+ transition: all 0.2s ease-out;
+}
+
+.checkbox-dropdown-list li label:hover {
+ background-color: #555;
+ color: white;
+}
+
+.table-striped>tbody>tr:nth-child(even)>td,
+.table-striped>tbody>tr:nth-child(even)>th {
+ background-color: #a5a5a549;
+ }
+ .table-striped>tbody>tr:nth-child(odd)>td,
+ .table-striped>tbody>tr:nth-child(odd)>th {
+ background-color: #ffffff;
+ }
+
+ /* Small screens (max-width: 576px) */
+@media (max-width: 576px) {
+ /* Change the font size for all headings */
+ h1, h2, h3, h4, h5, h6 {
+ font-size: 18px;
+ }
+
+ /* Hide the sidebar */
+ .sidebar {