/* 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 {
    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);
}

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

/* 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_fill);
}

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


.selected .icn_action,
.selected .icn_nav {
    background-color: var(--icn_sel_bkgr);
    fill: var(--icn_sel_fill);
    stroke: var(--icn_sel_stroke);  
}

.icn_drop:hover,
.icn_action:hover,
.icn_nav:hover {
    background-color: var(--icn_hover);
}

.icn_drop:active,
.icn_action:active,
.icn_nav:active {
    background-color: var(--nav_sel_bkgr);
    stroke: var(--icn_sel_stroke);
}


/* main navigation icons */
.icn56 {
    display: block;
    position: relative;
    text-decoration: none;
    padding-top: 4px;
    width: 80px;
    height: 50px;
    stroke: var(--icn_stroke);
    fill: none;
}

.icn_tbl {
    display: inline-flex;
    width: 38px;
    height: 41px;
    fill: var(--btn_icn);
}

/* 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;
}