﻿@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* EF EDITED 061625 */

.nav-auxiliary .nav-aux-cart .nav-text {
    padding-left: 0;
}

.ProductDisplay .ProductTitle {
    margin-bottom: 30px;
    font-size: 32px !important;
    line-height: 30px;
    border-bottom: 2px solid #cac8c7;
    color: #cf7600;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    box-shadow: 0 2px 0 #fafafa, 0 4px 0 #cac8c7;
}

.ProductDisplay .ProductImageArea {
    text-align: center;
    padding: 1em 1em 1em 0;
}
.ProductDisplay h4 {
    font-size: 18px !important;
    line-height: 20px !important;
    color: #222 !important;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2 {
    font-size: 23px !important;
    line-height: 30px !important;
    color: #222;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* EF EDITED 080925 */
.panel-title {
    flex-grow: 2;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: none;
    white-space: pre-wrap;
    font-family: 'Open Sans Condensed';
    font-weight: 600;
    color: #222;
}

h1.panel-title {
    flex-grow: 2;
    margin-top: 0px;
    font-family: "Open Sans Condensed";
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 32px;
    line-height: 30px;
    color: rgb(207, 118, 0);
    white-space: pre-wrap;
    border-bottom: 2px solid rgb(202, 200, 199);
    padding-bottom: 5px !important;
}
h1.title-1 span {
    font-weight: 400;
}
#asi_BreadCrumbNav .breadcrumb {
    margin: 10px 0 0 0;
}

.breadcrumb li:not(:last-of-type):after {
    content: '>';
    display: inline-block;
    padding: 0 0.5em;
    color: #CF7600;
}

/* Target the Bootstrap breadcrumb container */
#asi_BreadCrumbNav {
    margin-bottom: 1rem;
}

    /* Remove default Bootstrap breadcrumb background and padding */
    #asi_BreadCrumbNav .breadcrumb {
        background: none;
        padding: 0;
        margin: 0;
    }

    /* Style breadcrumb links similar to old nav.breadcrumbs a */
    #asi_BreadCrumbNav .breadcrumb-item a {
        display: inline-block;
        padding: 5px 7px;
        background-color: antiquewhite;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
        color: #CF7600;
        text-decoration: none;
    }

        /* Hover style like old code */
        #asi_BreadCrumbNav .breadcrumb-item a:hover {
            background-color: #f6f7da;
            color: #606503; /* more readable hover color */
        }

    /* Active item (current page, no link) */
    #asi_BreadCrumbNav .breadcrumb-item.active {
        color: #d89045;
        font-size: 14px;
        font-weight: 500;
    }

    /* Prevent empty link display */
    #asi_BreadCrumbNav .breadcrumb-item a:empty,
    #asi_BreadCrumbNav .breadcrumb-item a img {
        display: none;
    }

nav.breadcrumbs {
    margin: 0 0 15px 0;
    font-size: 12px;
    font-weight: 700;
}

nav.breadcrumbs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav.breadcrumbs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    nav.breadcrumbs a {
        display: inline-block;
        padding: 5px 7px;
        background-color: antiquewhite;
        margin-right: 0;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
    }
    nav.breadcrumbs span a {
        color: #CF7600;
        text-decoration: none;
    }

    nav.breadcrumbs span a {
        font-size: 12px;
        font-weight: 500;
    }

@media (min-width: 480px) {
    nav.breadcrumbs {
        color: #cf7600;
    }
}

.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTitlebar, .RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopLeft, .RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopRight {
    background-color: #1E5696;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
}
.RadWindow_MetroTouch .rwTable .rwTitlebarControls em {
    font-size: 24px !important;
    padding: 4px 0 0 1px;
    font-weight: 600 !important;
    color: #fff;
}

.account-page .button-group .LargeButton {
    width: 100%;
    height: 100%;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.2;
    min-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px !important;
    border-radius: 5px;
    background-color: #1a64c7;
}

    .account-page .button-group .LargeButton:hover {
        background-color: #1e5696;
    }

.member-profile .mini-profile-banner-large .mini-profile-name-section .SectionLabel, .member-profile .mini-profile-banner-small .mini-profile-name-section .SectionLabel {
    font-size: 23px !important;
    line-height: 30px !important;
    color: #222;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.heading-icon .panel-title, .heading-icon h3 {
    text-transform: capitalize;
    font-size: 22px;
    margin-bottom: 0;
}
.shadow-box > .panel > .panel-body-container, .QueryTemplateItem.card {
    border: 0;
}
.stacked-tabs .select-tab:before {
    content: 'menu';
    font-family: 'Material Icons';
    font-size: 33px;
    line-height: 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #FFF;
    vertical-align: middle;
    background: transparent;
    margin-right: 10px;
    text-align: center;
    font-weight: 100;
    mask-image: unset !important;
}
.shopping-cart .RadGrid input {
    width: auto !important;
    max-width: 75px;
}

.NavigationLink {
    padding-left: 5px;
    padding-right: 5px;
}

.nav-auxiliary .nav-aux-cart .cartFull {
    top: -5px;
    left: 13px;
}

li.nav-aux-cart a::before {
    content: 'shopping_cart';
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 22px;
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #FFF;
    vertical-align: middle;
    background: transparent;
    margin-right: 0;
    font-weight: 100;
}
/*
a span.cartFull::before {
    content: 'shopping_cart';
    font-family: 'Material Icons';
    font-size: 20px;
    line-height: 22px;
    display: inline-block;
    width: 20px;
    height: 0;
    color: #FFF;
    vertical-align: middle;
    background: transparent;
    margin-right: 0;
    font-weight: 100;
}
*/

a, a:visited {
    color: #cf7600;
}
    a:hover {
        color: #9fa618;
    }

/* On Behalf of */
    .obo-label {
    color: #FAFAFA;
}

.obo-actions a {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #f8f9fa; /* Light background for default */
    border: 1px solid #dee2e6;
    padding: 0.375rem 0.75rem;
    font-size: 1.25rem;
    border-radius: 0.25rem;
    margin-left: 10px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .obo-actions a:hover {
        color: #212529;
        background-color: #c6c6c6;
        border-color: #c6c6c6;
    }

    .obo-actions a:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Example focus style */
    }

    /* Example for a primary-like button */
    .obo-actions a.primary {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

        .obo-actions a.primary:hover {
            color: #fff;
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
.obo-action {
    background: #FFF url(https://members.nasponline.org/Assets/images/IconSprite.png);
}
a#ctl01_ciOBO_ctl01_TargetNameLink {
    color: #fff;
    text-decoration: underline;
}
/* NCSP Renewal AREA */

.ncsp-renewal-start div#Section_R1C1W12 .node:first-child {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #DDD;
    width: 100%;
    background-color: #FAFAFA;
    border-radius: 5px;
    margin-bottom: 20px;
}
.ncsp-renewal-start div#Section_R1C1W12 .node:nth-child(2) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: none;
}

.ncsp-renewal-start div#Section_R1C1W12 .node:nth-child(3) {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #DDD;
    width: 100%;
    background-color: #EEE;
    border-radius: 3px;
    margin: 0 0 20px 0;
}
.ncsp-renewal-start div#Section_R1C1W12 .node:nth-child(3) > div > label {
    margin-bottom: 10px;
}

    .ncsp-instructions-txt {
        display: block;
        border: 1px dashed #DDD;
        border-radius: 5px;
        padding: 0 15px;
        background-color: #FFF;
        width: 98%;
        margin: 0 auto;
        color: #565656;
    }

#FB_TextArea_020 {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 20px;
    border-width: 2px;
}

    #FB_TextArea_020 label {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 16px;
    }

    #FB_TextArea_020 label::before {
        content: '*';
        color: red;
        margin-right: 5px;
    }

.node[class*="Form_Data_CAT"] {
    border: 2px solid #cbcbcb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f9fbfd;
    display: inline-block;
    width: 100%;
    max-width: 48%;
    margin: 0 10px 20px 10px;
}
/* Two per row on medium/large screens */
@media (min-width: 768px) {
    .node[class*="Form_Data_CAT"] {
        width: 48%;
    }
}

/* Full width on small screens */
@media (max-width: 767px) {
    .node[class*="Form_Data_CAT"] {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}
.node[class*="Form_Data_CAT"] input {
    background-color: #fff;
    color: #2d7ef7 !important;
}

.ncsp-instructions-txt h3 {
    font-size: 16px;
}
    .ncsp-instructions-txt li, .ncsp-instructions-txt li p {
        margin-bottom: 5px;
    }
    .ncsp-instructions-txt p {
        font-size: 13px;
    }

.ncsp-instructions-txt1 {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #055160; /* Dark teal text */
    background-color: #cff4fc; /* Light teal background */
    border: 1px solid #b6effb; /* Matching border */
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.sysicon:after {
    background-color: #1E5696;
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
}
.TextButton {
    border-radius: 7px;
    font-size: 13px !important;
    padding: 7px 12px;
    font-weight: 600;
}
.SimpleSearchBlock .TextButton {
    border-radius: 0;
}
.panel-description {
    padding-left: 0;
}

/* Tool Tips Popup */
/* Lightweight tooltip */
.custom-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.6rem;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

    .custom-tooltip.show {
        opacity: 1;
        transform: translateY(-8px);
    }

    .custom-tooltip::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -6px;
        border: 6px solid transparent;
        border-top-color: #333; /* arrow */
    }

    .custom-tooltip.bottom {
        transform: translateY(4px);
    }

        .custom-tooltip.bottom.show {
            transform: translateY(0);
        }

        .custom-tooltip.bottom::after {
            top: -6px;
            bottom: auto;
            border-top-color: transparent;
            border-bottom-color: #333;
        }


/* NCSP Renewals */

/* Progress Tracker Start */
/*.step-button {
    display: inline-block;
    padding: 12px 20px;
    margin: 5px;
    background-color: #346a9c;
    border: 2px solid #1E5696;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}*/
.step-button {
    display: inline-block;
    width: 100%;
    padding: 7px 9px;
    background-color: antiquewhite;
    margin-top: 10px;
    margin-top: 0;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #b76e0e !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
    .step-button::after {
        content: "double_arrow";
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 22px;
        vertical-align: middle;
        padding-left: 10px;
    }
    .step-button b, .step-button strong {
        font-size: 16px;
        font-weight: 800;
    }

    .step-button.completed {
        background-color: #4bb543;
        color: #fff !important;
        border-color: #4bb543;

        background-color: #9fa618;
        color: #fff !important;
        border-color: #9fa618;
    }

    .step-button.active {
        background-color: #007bff;
        color: #fff !important;
        border-color: #007bff;
        background-color: #e6eef7; /* light blue background */
        border-color: #1e5696; /* border matches primary blue */
        color: #1e5696 !important; /* text turns blue */

        pointer-events: none;
        text-decoration: none;
        cursor: default;
    }

        .step-button.active::after {
            content: "keyboard_double_arrow_down";
            font-family: 'Material Symbols Outlined';
            font-weight: normal;
            font-style: normal;
            font-size: 22px;
            vertical-align: middle;
            padding-left: 10px;
        }

   
    .step-button:hover {
        background-color: #e6eef7; /* light blue background */
        border-color: #1e5696; /* border matches primary blue */
        color: #1e5696 !important; /* text turns blue */
    }
    .alert a {
        color: unset !important;
    }

div.step-button {
    background-color: #f5f5f5;
    border-color: #333;
    color: #333 !important;
}

    div.step-button:hover {
        background-color: #f5f5f5;
        border-color: #333;
        color: #333 !important;
        cursor: text;
    }
div.completed:hover {
    background-color: #4bb543;
    color: #fff !important;
    border-color: #4bb543;

    background-color: #9fa618;
    color: #fff !important;
    border-color: #9fa618;
}

.step-button.completed b::after, .step-button.completed strong::after {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    vertical-align: middle;
    padding-left: 5px;
}

.col-sm-2.panel-body, .zone-step .panel-body {
    padding: 0;
}
/* Progress Tracker End */

.ncsp-renewal-questions div#Section_R2C1W12 {
    padding: 0;
}

    .ncsp-renewal-questions div#Section_R2C1W12 .node:first-child {
        display: block;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .ncsp-renewal-questions div#Section_R2C1W12 label {
        font-weight: normal;
    }

    .ncsp-renewal-questions div#Section_R2C1W12 .node select {
        border-width: 1px;
    }

    .ncsp-renewal-questions div#Section_R2C1W12 .node [id*="SIGNATURE"] {
        font-weight: 600;
    }

.RadMenu.RadMenu_Austin .rmRootGroup > .rmItem > .rmLink {
    font-family: "Open Sans Condensed", serif !important;
}

.ncsp-renewal-1 .node .attachment-container ul.ruInputs {
    margin-left: 0;
}

.RadUpload.RadUpload .ruFakeInput {
    height: 35px;
    padding: 0;
    border-radius: 5px;
    border-width: 2px;
    border-color: #CCC;
    background: white;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.RadUpload.RadUpload .ruButton {
    border-radius: 5px;
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.title-1, .title-3 {
    padding-bottom: 5px !important;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.title-1, .title-2 {
    margin-bottom: 30px;
    font-size: 32px;
    line-height: 30px;
    border-bottom: 2px solid #cac8c7;
    color: #cf7600 !important;
}

.title-1, .title-2, .title-3, .title-4, .title-action, .title-5, .title-6 {
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.footer-contact > *, .footer-nav > ul > li > a, .footer-utility a {
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.btn-brand {
    background-color: #1e5696;
}
    .btn-brand:hover {
        background-color: #18467a;
        border-color: #18467a;
        color: #fff;
    }

.ncsp-renewal-1 #masterContentArea {
    margin-top: 0;
}
.ncsp-renewal-1 .ContentPanel {
    background: #FFF;
    padding: 15px 20px 0 20px;
    min-height: 500px;
}

.ncsp-renewal-1 .btn {
    display: inline-block;
    width: auto;
    padding: 10px 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #fafafa;
    background: #1e5696;
    background: #9fa618;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    border-radius: 3px;
}
    .ncsp-renewal-1 .btn.PrimaryButton {
        background: #cf7600;
    }
    .ncsp-renewal-1 .btn:hover {
        color: #fff;
        background: #0c3565;
        background: #5b5f0e;
    }
.ncsp-renewal-1 .alert-note {
    border-left: 7px solid;
}
.ncsp-renewal-1 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 6px 30px 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 5px;
    color: #333;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 8px 10px;
    transition: border-color 0.15s ease-in-out;
}

.ncsp-renewal-1 select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(0,123,255,.25);
}
.ncsp-step-3-panel .panel-body, .ncsp-step-4-panel .panel-body {
    padding: 0;
}
.ncsp-step-5-panel {
    padding: 10px;
}

.ncsp-renewal-1 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: #007bff; /* modern browsers only */
}

.ncsp-renewal-1 table.rgMasterTable th, .ncsp-renewal-1 table.rgMasterTable td {
    font-size: 14px;
}
.ncsp-renewal-1 .panel-heading.Distinguish {
    padding: 6px 10px 6px 0;
    margin-bottom: 6px;
}
.ncsp-renewal-1 .node ul {
    list-style: initial !important;
    margin-left: 20px;
    padding-left: 0;
}

#extraAddDocBtn {
    font-size: 14px !important;
    font-weight: bold !important;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

    #extraAddDocBtn:hover {
        background-color: #7b4c0f !important;
        border-color: #7b4c0f !important;
    }

.account-page .panel-heading.Distinguish {
    padding: 6px 10px 6px 0;
}
.uploadInstructions {
    font-size: 14px !important;
}
    .uploadInstructions h3 {
        color: #664d03 !important;
        margin-bottom: 5px !important;
    }
    .uploadInstructions li p {
        margin-bottom: 5px;
    }
    .uploadInstructions li p a, .uploadInstructions p a {
        color: #cf7600 !important;
        font-size: 14px !important;
    }
        .uploadInstructions li p a:hover, .uploadInstructions p a:hover {
            color: #9fa618 !important;
        }
    .uploadInstructions.collapsed .uploadContent {
        display: none;
    }

    .uploadInstructions h3 {
        cursor: pointer;
    }

        .uploadInstructions h3::after {
            float: right;
            content: " [hide]";
            font-size: 0.8em;
            color: #1e5696;
            font-weight: 400;
            font-family: Arial, Helvetica, sans-serif;
        }

    .uploadInstructions.collapsed h3::after {
        float: right;
        content: " [view more]";
        color: #1e5696;
        font-weight: 400;
        font-family: Arial, Helvetica, sans-serif;
    }
        .uploadInstructions.collapsed:hover h3::after, .uploadInstructions:hover h3::after {
            text-decoration: underline;
        }

.renewalSubmissions a.ImgNoResize img[src*="icon_edit.png"], .renewalDocumentation a.ImgNoResize img[src*="icon_edit.png"] {
    display: none !important;
}

/* Style the <a> itself as a button */
.renewalSubmissions a.ImgNoResize, .renewalDocumentation a.ImgNoResize {
    display: inline-block;
    padding: 10px 8px;
    background: #1e5696;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    text-decoration: none !important;
    min-width: 48px; /* small square footprint */
    line-height: 1.4;
}
.renewalDocumentation a.ImgNoResize {
    background-color: #9fa618 !important;
}

    /* Force text label instead of icon */
.renewalSubmissions a.ImgNoResize::before {
    content: "View";
}
.renewalDocumentation a.ImgNoResize::before {
    content: "Edit";
}
.renewalSubmissions a.ImgNoResize:hover {
    background-color: color-mix(in srgb, #1e5696 85%, black);
}

.renewalDocumentation a.ImgNoResize:hover {
    background-color: color-mix(in srgb, #9fa618 85%, black) !important;
}
.renewalSubmissions .RadGrid.RadGrid_MetroTouch th, .renewalDocumentation .RadGrid.RadGrid_MetroTouch th {
    line-height: 20px;
}
.renewalSubmissions .RadGrid.RadGrid_MetroTouch th.rgSorted, .renewalDocumentation .RadGrid.RadGrid_MetroTouch th.rgSorted {
    background-color: #838282;
    border-color: #838282;
}

/* Existing styles remain the same */
.stacked-tabs .select-tab {
    width: 100%;
    padding: 10px 15px;
    background: #1e5696;
    border-radius: 0;
    position: relative;
    z-index: 22;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 40px;
    font-size: 20px;
    line-height: normal;
    display: block;
    cursor: pointer; /* Add a visual cue */
}

    /* Left-side menu icon stays */
    .stacked-tabs .select-tab:before {
        content: 'menu';
        font-family: 'Material Icons';
        font-size: 33px;
        line-height: 30px;
        display: inline-block;
        width: 30px;
        height: 30px;
        color: #FFF;
        vertical-align: middle;
        background: transparent;
        margin-right: 10px;
        text-align: center;
        font-weight: 100;
        mask-image: unset !important;
    }

    /* Down arrow on the right */
    .stacked-tabs .select-tab::after {
        content: 'expand_more';
        font-family: 'Material Icons';
        font-size: 40px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        color: #FFF;
        pointer-events: none;
        transition: transform 0.25s ease-in-out;
    }

    /* Rotate arrow when active/open */
    .stacked-tabs .select-tab.active::after,
    .stacked-tabs .select-tab.open::after {
        transform: translateY(-50%) rotate(180deg);
    }