/* common button styles */
a,
button {
    display: inline-block;
    background-color: var(--btn);
    border: none;
    color: var(--btn_txt);
    padding: 0px 20px 0px 20px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* button hover effect */
button:hover {
    background-color: var(--btn_hover);
}

/* action icons - round */
.icn_action {
    display: block;
    position: relative;
    text-decoration: none;
    width: 32px;
    height: 32px;
    margin: 0 5px 0 5px;
    border-radius: 50%;
    fill: none;
    stroke: var(--icn_fill);
}

/* dropdown icons - round */
.icn_drop {
    position: relative;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    fill: var(--icn_fill);
}

/* navigation icons - square rounded */
.icn_nav {
    display: block;
    position: relative;
    text-decoration: none;
    width: 32px;
    height: 32px;
    margin: 0 5px 0 5px;
    border-radius: 25%;
    fill: none;
    stroke-width: 1.5px;
    stroke: var(--icn_stroke);
}

/* dropdown open state */
.icn_drop.open,
.icn_drop.open:hover {
    background-color: var(--nav_sel_bkgr);
    fill: var(--nav_sel_txt);
    border-radius: 50% 50% 0% 0%;
}

/* selected state for action and nav icons */
.selected .icn_action,
.selected .icn_nav {
    background-color: var(--icn_hover);
    fill: var(--icn_sel_fill);
    stroke: var(--icn_sel_stroke);  
}

/* hover and active states for action, nav, and drop icons */
.icn_drop:hover,
.icn_action:hover,
.icn_nav:hover {
    background-color: var(--icn_hover);
}

/* active state for action, nav, and drop icons */
.icn_drop:active,
.icn_action:active,
.icn_nav:active {
    background-color: var(--icn_hover);
    stroke: var(--icn_sel_stroke);
}

/* main navigation icons*/
.icn_mainnav {
    display: block;
    position: relative;
    text-decoration: none;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    margin-right: 4px;
    padding: 2px;
    border-radius: 25%;
    fill: none;
    stroke: var(--icn_stroke);
    stroke-width: 1.5px;
}

/* --------------- checked --------------- */