.ar-page .mobile-menu { display: none; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 9999; }
@media (min-width: 1080px) {
.ar-page .mobile-menu { display: none !important; }
.ar-page .desktop-navigation { display: block !important; }
}
.ar-page .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; padding: 7.5px 10px; background: transparent; border: 2px solid; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 9px; transition: 0.3s; }
.ar-page .hamburger-icon { display: flex; flex-direction: column; margin-right: 5px; }
.ar-page .hamburger-icon span { width: 20px; height: 2px; margin: 2px 0px; transition: 0.3s; }
.ar-page .mobile-menu-overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(4px); }
.ar-page .mobile-menu.active .mobile-menu-overlay { opacity: 1; visibility: visible; }
.ar-page .mobile-menu-content { position: absolute; top: 0px; right: 0px; width: 100%; max-width: 400px; height: 100%; background: rgb(255, 255, 255); transform: translateX(100%); transition: transform 0.3s; display: flex; flex-direction: column; overflow: hidden; }
.ar-page .mobile-menu.active .mobile-menu-content { transform: translateX(0px); }
.ar-page .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid rgb(240, 240, 240); background: rgb(250, 250, 250); }
.ar-page .mobile-menu-title { margin: 0px; font-size: 12px; font-weight: 600; color: rgb(51, 51, 51); }
.ar-page .mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; cursor: pointer; transition: background-color 0.3s; }
.ar-page .mobile-menu-close:hover { background-color: rgb(240, 240, 240); }
.ar-page .close-icon { font-size: 15px; color: rgb(102, 102, 102); }
.ar-page .mobile-menu-tabs { display: flex; background: rgb(248, 249, 250); }
.ar-page .mobile-tab-button { flex: 1 1 0%; padding: 10px; background: transparent; border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; font-weight: 600; font-size: 9px; cursor: pointer; transition: 0.3s; color: rgb(102, 102, 102); }
.ar-page .mobile-tab-button.active { color: rgb(51, 51, 51); background: rgb(255, 255, 255); }
.ar-page .mobile-menu-main { flex: 1 1 0%; overflow-y: auto; position: relative; }
.ar-page .mobile-tab-content { display: none; height: 100%; }
.ar-page .mobile-tab-content.active { display: block; }
.ar-page .mobile-navigation { padding: 0px; }
.ar-page .mobile-nav-list { list-style: none; margin: 0px; padding: 0px; }
.ar-page .mobile-nav-item { border-bottom: 1px solid rgb(240, 240, 240); }
.ar-page .mobile-nav-item-header { display: flex; align-items: center; justify-content: space-between; }
.ar-page .mobile-nav-link { flex: 1 1 0%; display: block; padding: 10px 15px; color: rgb(51, 51, 51); text-decoration: none; font-weight: 500; transition: 0.3s; }
.ar-page .mobile-nav-link:hover { background-color: rgb(248, 249, 250); }
.ar-page .mobile-expand-button { display: flex; align-items: center; justify-content: center; width: 50px; height: 100%; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: background-color 0.3s; }
.ar-page .mobile-expand-button:hover { background-color: rgb(240, 240, 240); }
.ar-page .expand-icon { font-size: 12px; color: rgb(102, 102, 102); transition: transform 0.3s; }
.ar-page .mobile-nav-item.expanded .expand-icon { transform: rotate(90deg); }
.ar-page .mobile-sub-nav-list { list-style: none; margin: 0px; padding: 0px; background: rgb(248, 249, 250); display: none; border-top: 1px solid rgb(224, 224, 224); }
.ar-page .mobile-sub-nav-item { border-bottom: 1px solid rgb(224, 224, 224); }
.ar-page .mobile-sub-nav-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.ar-page .mobile-sub-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 7.5px 20px; color: rgb(85, 85, 85); text-decoration: none; font-size: 9px; transition: 0.3s; }
.ar-page .mobile-sub-nav-link:hover { background-color: rgb(233, 236, 239); color: rgb(51, 51, 51); }
.ar-page .subcategory-arrow { font-size: 8px; opacity: 0.6; }
.ar-page .mobile-sub-nav-list { display: none; overflow: hidden; }
.ar-page .mobile-nav-item.expanded .mobile-sub-nav-list { display: block; }
.ar-page .mobile-sub-nav-list.level-2 { background: rgba(248, 249, 250, 0.95); border-left: 3px solid rgb(0, 123, 255); margin-left: 8px; }
.ar-page .mobile-sub-nav-list.level-3 { background: rgba(240, 242, 245, 0.95); border-left: 3px solid rgb(40, 167, 69); margin-left: 16px; }
.ar-page .mobile-sub-nav-list.level-4 { background: rgba(232, 235, 240, 0.95); border-left: 3px solid rgb(255, 193, 7); margin-left: 24px; }
.ar-page .mobile-sub-nav-list.level-5 { background: rgba(224, 228, 235, 0.95); border-left: 3px solid rgb(253, 126, 20); margin-left: 32px; }
.ar-page .mobile-sub-nav-list.level-6, .ar-page .mobile-sub-nav-list.level-7, .ar-page .mobile-sub-nav-list.level-8, .ar-page .mobile-sub-nav-list.level-9, .ar-page .mobile-sub-nav-list.level-10 { background: rgba(216, 221, 230, 0.95); border-left: 3px solid rgb(108, 117, 125); margin-left: 40px; }
.ar-page .mobile-sub-nav-link.level-2 { padding: 12px 16px; font-size: 14px; color: rgb(73, 80, 87); font-weight: 500; }
.ar-page .mobile-sub-nav-link.level-3 { padding: 10px 20px; font-size: 13px; color: rgb(108, 117, 125); font-weight: 500; }
.ar-page .mobile-sub-nav-link.level-4 { padding: 8px 24px; font-size: 12px; color: rgb(134, 142, 150); font-weight: 400; }
.ar-page .mobile-sub-nav-link.level-5, .ar-page .mobile-sub-nav-link.level-6, .ar-page .mobile-sub-nav-link.level-7, .ar-page .mobile-sub-nav-link.level-8, .ar-page .mobile-sub-nav-link.level-9, .ar-page .mobile-sub-nav-link.level-10 { padding: 6px 28px; font-size: 11px; color: rgb(173, 181, 189); font-weight: 400; }
.ar-page .mobile-expand-button.level-2 { padding: 12px; font-size: 16px; color: rgb(0, 123, 255); }
.ar-page .mobile-expand-button.level-3 { padding: 10px; font-size: 14px; color: rgb(40, 167, 69); }
.ar-page .mobile-expand-button.level-4 { padding: 8px; font-size: 12px; color: rgb(255, 193, 7); }
.ar-page .mobile-expand-button.level-5, .ar-page .mobile-expand-button.level-6, .ar-page .mobile-expand-button.level-7, .ar-page .mobile-expand-button.level-8, .ar-page .mobile-expand-button.level-9, .ar-page .mobile-expand-button.level-10 { padding: 6px; font-size: 10px; color: rgb(108, 117, 125); }
.ar-page .mobile-sub-nav-item.level-2::before { content: "↳"; position: absolute; left: 8px; color: rgb(0, 123, 255); font-weight: bold; }
.ar-page .mobile-sub-nav-item.level-3::before { content: "↳↳"; position: absolute; left: 16px; color: rgb(40, 167, 69); font-weight: bold; font-size: 12px; }
.ar-page .mobile-sub-nav-item.level-4::before { content: "↳↳↳"; position: absolute; left: 24px; color: rgb(255, 193, 7); font-weight: bold; font-size: 10px; }
.ar-page .mobile-sub-nav-item.level-5::before, .ar-page .mobile-sub-nav-item.level-6::before, .ar-page .mobile-sub-nav-item.level-7::before, .ar-page .mobile-sub-nav-item.level-8::before, .ar-page .mobile-sub-nav-item.level-9::before, .ar-page .mobile-sub-nav-item.level-10::before { content: "▸"; position: absolute; left: 32px; color: rgb(108, 117, 125); font-size: 8px; }
.ar-page .mobile-sub-nav-link.level-2:hover { background: rgba(0, 123, 255, 0.1); color: rgb(0, 123, 255); }
.ar-page .mobile-sub-nav-link.level-3:hover { background: rgba(40, 167, 69, 0.1); color: rgb(40, 167, 69); }
.ar-page .mobile-sub-nav-link.level-4:hover { background: rgba(255, 193, 7, 0.1); color: rgb(255, 193, 7); }
.ar-page .mobile-sub-nav-link.level-5:hover, .ar-page .mobile-sub-nav-link.level-6:hover, .ar-page .mobile-sub-nav-link.level-7:hover, .ar-page .mobile-sub-nav-link.level-8:hover, .ar-page .mobile-sub-nav-link.level-9:hover, .ar-page .mobile-sub-nav-link.level-10:hover { background: rgba(108, 117, 125, 0.1); color: rgb(108, 117, 125); }
.ar-page .mobile-settings-content { padding: 15px; }
.ar-page .mobile-setting-item { margin-bottom: 15px; }
.ar-page .mobile-setting-label { display: block; margin-bottom: 5px; font-weight: 600; color: rgb(51, 51, 51); font-size: 9px; }
.ar-page .mobile-setting-select { width: 100%; padding: 7.5px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; font-size: 10px; background: rgb(255, 255, 255); }
.ar-page .mobile-setting-button { width: 100%; padding: 7.5px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; background: rgb(255, 255, 255); font-size: 10px; cursor: pointer; transition: 0.3s; }
.ar-page .mobile-setting-button:hover { background-color: rgb(248, 249, 250); border-color: rgb(204, 204, 204); }
.ar-page .ar-page-body.mobile-menu-open { overflow: hidden; }
.ar-page .mobile-menu-extended .mobile-menu-toggle { border-color: rgb(52, 152, 219); color: rgb(52, 152, 219); }
.ar-page .mobile-menu-extended .mobile-menu-toggle:hover { background-color: rgb(52, 152, 219); color: rgb(255, 255, 255); }
.ar-page .mobile-menu-extended .hamburger-icon span { background-color: rgb(52, 152, 219); }
.ar-page .mobile-menu-extended .mobile-menu-toggle:hover .hamburger-icon span { background-color: rgb(255, 255, 255); }
.ar-page .mobile-menu-extended .mobile-tab-button.active { border-bottom-color: rgb(52, 152, 219); color: rgb(52, 152, 219); }
.ar-page .mobile-menu-extended .mobile-nav-link:hover { background-color: rgba(52, 152, 219, 0.1); color: rgb(52, 152, 219); }
.ar-page .mobile-menu-ascher_racing .mobile-menu-toggle { border-color: rgb(231, 76, 60); color: rgb(231, 76, 60); }
.ar-page .mobile-menu-ascher_racing .mobile-menu-toggle:hover { background-color: rgb(231, 76, 60); color: rgb(255, 255, 255); }
.ar-page .mobile-menu-ascher_racing .hamburger-icon span { background-color: rgb(231, 76, 60); }
.ar-page .mobile-menu-ascher_racing .mobile-menu-toggle:hover .hamburger-icon span { background-color: rgb(255, 255, 255); }
.ar-page .mobile-menu-ascher_racing .mobile-tab-button.active { border-bottom-color: rgb(231, 76, 60); color: rgb(231, 76, 60); }
.ar-page .mobile-menu-ascher_racing .mobile-nav-link:hover { background-color: rgba(231, 76, 60, 0.1); color: rgb(231, 76, 60); }
.ar-page .mobile-menu-track_time .mobile-menu-toggle { border-color: rgb(44, 62, 80); color: rgb(44, 62, 80); }
.ar-page .mobile-menu-track_time .mobile-menu-toggle:hover { background-color: rgb(44, 62, 80); color: rgb(255, 255, 255); }
.ar-page .mobile-menu-track_time .hamburger-icon span { background-color: rgb(44, 62, 80); }
.ar-page .mobile-menu-track_time .mobile-menu-toggle:hover .hamburger-icon span { background-color: rgb(255, 255, 255); }
.ar-page .mobile-menu-track_time .mobile-tab-button.active { border-bottom-color: rgb(44, 62, 80); color: rgb(44, 62, 80); }
.ar-page .mobile-menu-track_time .mobile-nav-link:hover { background-color: rgba(44, 62, 80, 0.1); color: rgb(44, 62, 80); }
@media (max-width: 768px) {
.ar-page .mobile-menu { display: block; }
.ar-page .desktop-navigation { display: none !important; }
.ar-page .mobile-menu-toggle { display: flex !important; }
}
@media (max-width: 480px) {
.ar-page .mobile-menu-content { max-width: 100%; }
.ar-page .mobile-menu-toggle { font-size: 8px; padding: 5px 7.5px; }
.ar-page .hamburger-icon span { width: 16px; height: 1.5px; }
}