/* @import "/css/framework/foundation-sm.css" screen and (min-width: 640px) and (max-width: 767px); @import "/css/framework/foundation-md.css" screen and (min-width: 768px) and (max-width: 1203px); @import "/css/framework/foundation-lg.css" screen and (min-width: 1204px) and (max-width: 1279px); @import "/css/framework/foundation-xl.css" screen and (min-width: 1280px) and (max-width: 1535px); @import "/css/framework/foundation-xxl.css" screen and (min-width: 1536px); */ :root{ --hoof-brand-color-h: 55; --hoof-brand-color-s: 100%; --hoof-brand-color-l: 50%; --hoof-contextual-help-color-h: 60; --hoof-contextual-help-color-s: 100%; --hoof-contextual-help-color-l: 92%; @media (max-width: 450px){ .content-section{ max-width: 100%; } } @media (max-width: 1080px){ .content-section{ max-width: 100%; } } @media (min-width:1081px){ .content-section{ max-width: 1240px; } } } /** hoof basic preference */ body { margin: 0; font-family: var(--hoof-font-family); font-weight: var(--hoof-font-weight); line-height: var(--hoof-line-height); font-size: var(--hoof-font-size); } :root{ --hoof-font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --hoof-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --hoof-font-size: 16px; --hoof-font-weight: normal; --hoof-letter-spacing: normal; --hoof-line-height: normal; --hoof-brand-color: hsl( var(--hoof-brand-color-h), var(--hoof-brand-color-s), var(--hoof-brand-color-l)); --hoof-on-color-0: hsl( var(--hoof-brand-color-h), 100%, 99%); /* White */ --hoof-on-color-1: hsl( var(--hoof-brand-color-h), 30%, 30%); --hoof-on-color-2: hsl( var(--hoof-brand-color-h), var(--hoof-brand-color-s), 10%); --hoof-surface-color-0: hsl( var(--hoof-brand-color-h), 40%, 100%); --hoof-surface-color-1: hsl( var(--hoof-brand-color-h), 40%, 95%); --hoof-surface-color-2: hsl( var(--hoof-brand-color-h), 40%, 90%); --hoof-surface-color-3: hsl( var(--hoof-brand-color-h), 40%, 85%); --hoof-surface-color-4: hsl( var(--hoof-brand-color-h), 40%, 80%); --hoof-light-color-1: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),97%); --hoof-light-color-2: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),95%); --hoof-light-color-3: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),90%); --hoof-light-color-4: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),80%); --hoof-dark-color-0: hsl(var(--hoof-brand-color-h), 10%,50%); --hoof-dark-color-1: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),40%); --hoof-dark-color-2: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),30%); --hoof-dark-color-3: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),20%); --hoof-dark-color-4: hsl(var(--hoof-brand-color-h),var(--hoof-brand-color-s),10%); --hoof-shadow-color-1: hsl(var(--hoof-brand-color-h), 55%, 50%); --hoof-shadow-color-2: hsla(var(--hoof-brand-color-h), 100%, 15%, 0.3); --hoof-shadow-color-3: hsla(var(--hoof-brand-color-h), 100%, 15%, 0.2); --hoof-input-required-color: hsl( var(--hoof-contextual-help-color-h), var(--hoof-contextual-help-color-s), var(--hoof-contextual-help-color-l) ); --hoof-contextual-help-color: hsl( var(--hoof-contextual-help-color-h), var(--hoof-contextual-help-color-s), var(--hoof-contextual-help-color-l) ); --hoof-background-color: transparent; --hoof-box-shadow: 8px 8px 9px -3px; --hoof-success-color-h: 122; --hoof-danger-color-h: 0; --hoof-warning-color-h: 30; --hoof-information-color-h: 200; --hoof-success-color: hsl(var(--hoof-success-color-h),100%,30%); --hoof-success-surface-color: hsl(var(--hoof-success-color-h), 100%, 96%); --hoof-danger-color: hsl(var(--hoof-danger-color-h),100%,50%); --hoof-danger-surface-color: hsl(var(--hoof-danger-color-h), 100%, 96%); --hoof-warning-color: hsl(var(--hoof-warning-color-h), 100%, 50%); --hoof-warning-surface-color: hsl(var(--hoof-warning-color-h), 100%, 96%); --hoof-information-color: hsl(var(--hoof-information-color-h), 100%, 50%); --hoof-information-surface-color: hsl(var(--hoof-information-color-h), 100%, 96%); --hoof-breakpoint-sm: 640px; --hoof-breakpoint-md: 768px; --hoof-breakpoint-lg: 1024px; --hoof-breakpoint-xl: 1280px; --hoof-breakpoint-xxl: 1536px; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } body { background-color: var(--hoof-background-color); margin: 0; font-family: var(--hoof-font-family); font-weight: var(--hoof-font-weight); line-height: var(--hoof-line-height); font-size: var(--hoof-font-size); color: var(--hoof-on-color-1); } hr { margin: 1rem 0; color: inherit; border: 0; border-top: var(--bs-border-width) solid; opacity: 0.25; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: 1.2; } .container-100{ width: 100%; margin-right: auto; margin-left: auto; } .display-no{ display: none !important;} .visibility-no { visibility: hidden; } .error-page{ background-color: inherit; display: flex; justify-content: center; min-height: 100vh !important; width: 100%; } .error-message{ text-align: center !important; align-self: center !important; font-weight: 400 !important; color: var(--hoof-on-color-1); } .error-svg{ height: 50px; vertical-align: middle; margin-top: 1rem !important; margin-bottom: 1rem !important; }