:root { --color-background: #f5f6f7; --color-font: #000; --color-a: #000; --color-hover: #0046ff; --color-hover-small: #0066ff; --font-size: 15px; } :root { --current-color-blue: #0066ff; } .web-application-container { margin: 0 auto; } @media screen and (min-width:1921px) { .web-application-container { width: calc(1920px - ((160px * 2) + 8rem)); } } @media screen and (max-width:1920px) { .web-application-container { width: calc(100% - ((160px * 2) + 8rem)); } } @media screen and (max-width:1440px) { .web-application-container { width: calc(100% - ((160px * 2) + 8rem)); } } @media screen and (max-width:1024px) { .web-application-container{ width: calc(100% - ((160px * 2) + 8rem)); } } @media screen and (max-width:820px) { .web-application-container { width: 96%; } } .web-application-header { display: var(--flex-display); align-items: var(--items-center); position: var(--position-fixed); left: 0; top: 0; z-index: 10; width: 100%; height: 3.5rem; background: linear-gradient(90deg, #0052CC, #0066FF); box-shadow: 0.2rem 0.3rem 1.3rem rgb(0 0 0 / 28%); } .web-application-header_ { height: 3.5rem; } .web-application-header .logo { display: var(--flex-display); align-items: var(--items-center); } .web-application-header span[data-type="navigation-toggle"]{ display:none; position: absolute; right: 0.85rem; top: calc(50% - 0.65rem); } .web-application-header .navigation { display: var(--flex-display); align-items: var(--items-center); margin-left: 3rem; } .web-application-header .navigation ul { display: var(--flex-display); gap: var(--gap-200); } .web-application-header .navigation li { flex: 0 0 auto; } .web-application-header .navigation li a { color: var(--color-fff); text-transform: uppercase; } @media screen and (max-width: 1024px) { .web-application-header { position: var(--position-relative); height: 3.5rem; } .web-application-header span[data-type="navigation-toggle"]{ display: flex; } .web-application-header .navigation nav{ display: none; } .web-application-header_ { display: none; } } .mobile-navigation { position: var(--position-fixed); left: 0; top: 0; width: 100%; height: 100%; z-index: 9; margin-top: 3.5rem; } .mobile-navigation::before { content: ""; position: var(--position-fixed); left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.99); z-index: 8; } .mobile-navigation nav { position: relative; z-index: 9; padding: 1.1rem 1.1rem; } .mobile-navigation nav ul {} .mobile-navigation nav li { line-height: 3rem; border-bottom: #f2f2f2 0.1rem solid; } .mobile-navigation nav li a { text-transform: uppercase; } .mobile-navigation nav li ul { border-radius: 0.4rem; padding: 0 1.1rem; } .mobile-navigation nav li ul li { position: relative; line-height: 2rem; border-bottom: none; padding-left: 1.3rem; } .mobile-navigation nav li ul li::before{ content: ""; position: absolute; left: 0; top: calc( 50% - 0.1rem ); width: 0.6rem; height: 0.2rem; background-color: #0066ff; border-radius: 0.8rem; } .web-application-footer { padding: 1rem 0; display: var(--flex-display); text-align: var(--text-center); font-size: var(--font-sm); color: var(--color-666); margin: 1rem 0; } .web-application-footer p { flex: var(--flex-1-1); } .web-application-footer a { color: #0066ff; } .web-application-footer a:hover { color: #0046ff; } .web-application-message{ position:fixed; right:0; bottom:0; z-index:2147483646; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .web-application-message ul{ display: var(--flex-display); flex-direction: var(--flex-col); } .web-application-message li{ padding: 0.35rem 0.6rem; margin: 0.35rem 0.6rem; box-shadow: 0 0.6rem 1.2rem #0066ff; background-color: #0066ff; color: #fff; border-radius: 0.3rem; font-size: var(--font-sm); opacity: 0.9; } .web-application-loading { position: fixed; left: 0; top: 0; z-index: 2147483646; width: 100%; height: 100%; } .web-application-loading:before { content: ""; position: absolute; z-index: 2147483640; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.36); } .web-application-loading .loading-spinner { position: absolute; left: calc( 50% - 50px ); top: calc( 50% - 50px ); z-index: 2147483641; width: 100px; height: 100px; } .web-application-loading .loading-spinner span { position: absolute; z-index: 2147483642; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: #333; -webkit-animation: load 1.05s ease infinite; } @-webkit-keyframes load { 0%{ opacity:0.9; } 100%{ opacity:0.2; } } .web-application-loading .loading-spinner span:nth-child(1) { left:0; top:50%; margin-top:-8px; -webkit-animation-delay: 0.15s; } .web-application-loading .loading-spinner span:nth-child(2) { left:14px; top:14px; -webkit-animation-delay: 0.3s; } .web-application-loading .loading-spinner span:nth-child(3) { left:50%; top:0; margin-left:-8px; -webkit-animation-delay: 0.45s; } .web-application-loading .loading-spinner span:nth-child(4) { top:14px; right:14px; -webkit-animation-delay: 0.6s; } .web-application-loading .loading-spinner span:nth-child(5) { right:0; top:50%; margin-top:-8px; -webkit-animation-delay: 0.75s; } .web-application-loading .loading-spinner span:nth-child(6) { right:14px; bottom:14px; -webkit-animation-delay: 0.9s; } .web-application-loading .loading-spinner span:nth-child(7) { bottom:0; left:50%; margin-left:-8px; -webkit-animation-delay: 1.05s; } .web-application-loading .loading-spinner span:nth-child(8) { bottom:14px; left:14px; -webkit-animation-delay: 1.03s; }