#acc-toolbar {
    position: fixed;
    top: 50%;
    right: -300px;
    transform: translateY(-50%);
    width: 300px;
	height: 100%;
    padding: 22px;
    background: #1f334c;
    color: #fff;
    transition: right 0.4s ease-in-out;
    z-index: 999999;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#acc-toolbar.show {
    right: 0;
}

.acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    font-weight: bold;
	font-size: 1.1em;
	padding-bottom: 20px;
	margin-bottom: 22px;
}

#acc-close {
 background: none;
    border: none;
    color: #0066b3;
    font-size: 1em;
    height: 26px;
    width: 26px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
	font-weight: 900;
}

.acc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#acc-toolbar button {
    background: white;
    border: none;
    color: black;
    cursor: pointer;
    border-radius: 6px;

    /* Square shape */
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;

    /* Flex for vertical alignment */
    display: flex;
    flex-direction: column;      /* icon on top, text below */
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* Typography */
    font-size: 14px;
    font-weight: 500;
    padding: 10px;

    text-align: center;
}

/* Make icons bigger */
#acc-toolbar button i {
    font-size: 22px;
    line-height: 1;
	    color: #0066b3;

}

/* Active state styling */
.acc-btn.active {
    background: #2e8bff !important;
    color: #fff !important;
    position: relative;
}

/* Tick mark for active state */
.acc-btn.active::after {
    content: "✓";
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}


/* Make reset button full width */
#acc-toolbar .acc-btn[data-action="reset"] {
    grid-column: span 2;   /* takes entire row */
    aspect-ratio: unset;   /* remove square shape */
    height: 50px;          /* give a normal button height */
	display: flex; 
	flex-direction: row;
}


.acc-half {
    width: 48%;
}

#acc-toolbar button:hover {
    background: #e3eef7;
}

/* HIGH CONTRAST CLASS */
.acc-contrast {
    background: #000 !important;
    color: #fff !important;
}

.acc-contrast a {
    color: yellow !important;
}