: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-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-color: var(--current-color-blue); 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-0\.12); } .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: var(--main-main_color); border-radius: 0.8rem; } .web-application-footer { display: var(--flex-display); text-align: var(--text-center); font-size: var(--font-size-small); color: var(--color-666); margin: 1rem 0; } .web-application-footer p { flex: var(--flex-1-1); } .web-application-footer a { color: var(--color-hover-small); } .web-application-footer a:hover { color: var(--color-hover); } .web-application-box { display: var(--flex-display); flex: 0 0 calc(100% - 2rem); margin: 0 auto; } .web-application-section { display: var(--flex-display); } @media screen and (max-width: 1024px) { .web-application-section { flex-direction: var(--flex-col); } } .web-application-sidebar { flex: 0 0 20rem; margin-top: 1.3rem; padding: 0 1rem; order: 1; } @media screen and (max-width: 1024px) { .web-application-sidebar { flex: var(--flex-1-1); order: 2; } } .web-application-sidebar-right { flex: 0 0 20rem; margin-top: 1.3rem; padding: 0 1rem; order: 3; } @media screen and (max-width: 1024px) { .web-application-sidebar-right { flex: var(--flex-1-1); order: 1; } } .web-application-main { display: var(--flex-display); flex-direction: var(--flex-col); flex: 0 0 calc(100% - 40rem); gap: var(--gap); margin-top: 1.3rem; order: 2; } .web-application-main main{ display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); } .web-application-main .web-application-wrapper { background-color: #fff; box-shadow: 0 0.3rem 50px -0.8rem rgba(17, 12, 46, 0.16); border: #ebeef3 0.1rem solid; border-radius: 0.4rem; overflow: hidden; padding: 1.3rem; } @media screen and (max-width: 1024px) { .web-application-main { flex: var(--flex-1-1); padding: 0 1rem; order: 3; } } .web-application-title {} .web-application-title h1 { font-size: var(--font-size-big); font-weight: bold; color: var(--color-000); } .web-application-navigation { position: var(--position-fixed); width: calc(20rem - 2.2rem); height: auto; background-color: var(--color-fff); border: #f3f3f3 0.1rem solid; border-radius: 0.4rem; overflow: hidden; } .web-application-navigation summary { height:3rem; line-height: 3rem; padding: 0 0.6rem; background-color: #fafafa; border-bottom: #f5f6f7 0.1rem solid; cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .web-application-navigation ul { } .web-application-navigation li { position: relative; background-color: #fafafa; } .web-application-navigation li: nth-child(even) { background-color: var(--color-fff); } .web-application-navigation li:before { content: ""; position: absolute; left: 0; bottom: 0.1rem; width: 100%; height: 0.1rem; background-color: #f3f3f3; } .web-application-navigation li:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.1rem; background-color: var(--color-fff); } .web-application-navigation li:nth-last-child(1):before, .web-application-navigation li:nth-last-child(1):after { display: none; } .web-application-navigation li a { display: var(--flex-display); align-items: var(--items-center); gap: var(--gap-0\.6); font-size: var(--font-size-small); line-height: 1.2rem; padding: 0.6rem 0.6rem; } .web-application-navigation li:hover a, .web-application-navigation li.current a { color: var(--current-color-blue); } .web-application-navigation li:hover a icon.icon-four-circles i:before, .web-application-navigation li:hover a icon.icon-four-circles i:after, .web-application-navigation li.current a icon.icon-four-circles i:before, .web-application-navigation li.current a icon.icon-four-circles i:after { border: var(--current-color-blue) 0.1rem solid; box-shadow: 0rem 0rem 0.2rem var(--current-color-blue); } @media screen and (max-width: 1024px) { .web-application-navigation { position: var(--position-relative); width: auto; } } .web-application-section-module { position: relative; z-index: 1; display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); background-color: #fff; box-shadow: 0 0.3rem 50px -0.8rem rgba(17, 12, 46, 0.16); border: #ebeef3 0.1rem solid; border-radius: 0.4rem; overflow: hidden; padding: 1.3rem; } .web-application-section-module .module-title { display: var(--flex-display); flex-direction: var(--flex-row); gap: var(--gap-0\.6); align-items: var(--items-center); } .web-application-section-module .module-title h1, .web-application-section-module .module-title h2, .web-application-section-module .module-title h3, .web-application-section-module .module-title h4, .web-application-section-module .module-title h5 { font-size: var(--font-size-big); font-weight: bold; } .web-application-section-module .module-content { display: var(--flex-display); flex-direction: var(--flex-col); gap: 1.5rem; } .web-application-section-module .module-content section{ display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.5rem; } .web-application-section-module .module-content p{ line-height: 1.5rem; } .web-application-details { border: #ddd 0.1rem solid; } .web-application-details summary { padding: 1rem; background-color: #f5f5f5; } .web-application-details div, .web-application-details ul { display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.6rem; padding: 1rem; } .web-application-details div p, .web-application-details ul li { } .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 var(--current-color-blue); background-color: var(--current-color-blue); color: #fff; border-radius: 0.3rem; font-size: var(--font-size-small); 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; }