Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/
.hide-child .child {
opacity: 0;
transition: opacity 0.15s ease-in;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
transition: opacity 0.15s ease-in;
}
.underline-hover:hover,
.underline-hover:focus {
text-decoration: underline;
}
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
.grow {
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.grow:hover,
.grow:focus {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.grow:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.grow-large {
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
.grow-large:hover,
.grow-large:focus {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.grow-large:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
/* Add pointer on hover */
.pointer:hover {
cursor: pointer;
}
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
cursor: pointer;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover::after {
content: '';
box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
border-radius: inherit;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover:hover::after,
.shadow-hover:focus::after {
opacity: 1;
}
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color 0.15s ease-in-out;
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
/*
NESTED
Tachyons module for styling nested elements
that are generated by a cms.
*/
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
line-height: 1.5;
}
.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
line-height: 1.25;
}
.nested-list-reset ul,
.nested-list-reset ol {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
.nested-copy-indent p + p {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.nested-copy-separator p + p {
margin-top: 1.5em;
}
.nested-img img {
width: 100%;
max-width: 100%;
display: block;
}
.nested-links a {
color: #357edd;
transition: color 0.15s ease-in;
}
.nested-links a:hover {
color: #96ccff;
transition: color 0.15s ease-in;
}
.nested-links a:focus {
color: #96ccff;
transition: color 0.15s ease-in;
}
/*
STYLES
Add custom styles here.
*/
/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*
Tachyons
COLOR VARIABLES
Grayscale
- Solids
- Transparencies
Colors
*/
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/* Debugging */
/*
DEBUG CHILDREN
Docs: http://tachyons.io/docs/debug/
Just add the debug class to any element to see outlines on its
children.
*/
.debug * {
outline: 1px solid gold;
}
.debug-white * {
outline: 1px solid white;
}
.debug-black * {
outline: 1px solid black;
}
/*
DEBUG GRID
http://tachyons.io/docs/debug-grid/
Can be useful for debugging layout issues
or helping to make sure things line up perfectly.
Just tack one of these classes onto a parent element.
*/
.debug-grid {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;
}
.debug-grid-16 {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;
}
.debug-grid-8-solid {
background: white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;
}
.debug-grid-16-solid {
background: white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;
}
/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-ns {
padding-bottom: 75%;
}
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-ns {
padding-bottom: 150%;
}
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-ns {
padding-bottom: 160%;
}
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-ns {
padding-bottom: 140%;
}
.aspect-ratio--1x1-ns {
padding-bottom: 100%;
}
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover-ns {
background-size: cover !important;
}
.contain-ns {
background-size: contain !important;
}
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
.outline-ns {
outline: 1px solid;
}
.outline-transparent-ns {
outline: 1px solid transparent;
}
.outline-0-ns {
outline: 0;
}
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bn-ns {
border-style: none;
border-width: 0;
}
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: 0.125rem;
}
.br2-ns {
border-radius: 0.25rem;
}
.br3-ns {
border-radius: 0.5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-ns {
border-radius: inherit;
}
.br-initial-ns {
border-radius: initial;
}
.br-unset-ns {
border-radius: unset;
}
.b--dotted-ns {
border-style: dotted;
}
.b--dashed-ns {
border-style: dashed;
}
.b--solid-ns {
border-style: solid;
}
.b--none-ns {
border-style: none;
}
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: 0.125rem;
}
.bw2-ns {
border-width: 0.25rem;
}
.bw3-ns {
border-width: 0.5rem;
}
.bw4-ns {
border-width: 1rem;
}
.bw5-ns {
border-width: 2rem;
}
.bt-0-ns {
border-top-width: 0;
}
.br-0-ns {
border-right-width: 0;
}
.bb-0-ns {
border-bottom-width: 0;
}
.bl-0-ns {
border-left-width: 0;
}
.shadow-1-ns {
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-ns {
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-ns {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-ns {
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.shadow-5-ns {
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top--1-ns {
top: -1rem;
}
.right--1-ns {
right: -1rem;
}
.bottom--1-ns {
bottom: -1rem;
}
.left--1-ns {
left: -1rem;
}
.top--2-ns {
top: -2rem;
}
.right--2-ns {
right: -2rem;
}
.bottom--2-ns {
bottom: -2rem;
}
.left--2-ns {
left: -2rem;
}
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cl-ns {
clear: left;
}
.cr-ns {
clear: right;
}
.cb-ns {
clear: both;
}
.cn-ns {
clear: none;
}
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt-row-ns {
display: table-row;
}
.dt-row-group-ns {
display: table-row-group;
}
.dt-column-ns {
display: table-column;
}
.dt-column-group-ns {
display: table-column-group;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
.flex-ns {
display: flex;
}
.inline-flex-ns {
display: inline-flex;
}
.flex-auto-ns {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-ns {
flex: none;
}
.flex-column-ns {
flex-direction: column;
}
.flex-row-ns {
flex-direction: row;
}
.flex-wrap-ns {
flex-wrap: wrap;
}
.flex-nowrap-ns {
flex-wrap: nowrap;
}
.flex-wrap-reverse-ns {
flex-wrap: wrap-reverse;
}
.flex-column-reverse-ns {
flex-direction: column-reverse;
}
.flex-row-reverse-ns {
flex-direction: row-reverse;
}
.items-start-ns {
align-items: flex-start;
}
.items-end-ns {
align-items: flex-end;
}
.items-center-ns {
align-items: center;
}
.items-baseline-ns {
align-items: baseline;
}
.items-stretch-ns {
align-items: stretch;
}
.self-start-ns {
align-self: flex-start;
}
.self-end-ns {
align-self: flex-end;
}
.self-center-ns {
align-self: center;
}
.self-baseline-ns {
align-self: baseline;
}
.self-stretch-ns {
align-self: stretch;
}
.justify-start-ns {
justify-content: flex-start;
}
.justify-end-ns {
justify-content: flex-end;
}
.justify-center-ns {
justify-content: center;
}
.justify-between-ns {
justify-content: space-between;
}
.justify-around-ns {
justify-content: space-around;
}
.content-start-ns {
align-content: flex-start;
}
.content-end-ns {
align-content: flex-end;
}
.content-center-ns {
align-content: center;
}
.content-between-ns {
align-content: space-between;
}
.content-around-ns {
align-content: space-around;
}
.content-stretch-ns {
align-content: stretch;
}
.order-0-ns {
order: 0;
}
.order-1-ns {
order: 1;
}
.order-2-ns {
order: 2;
}
.order-3-ns {
order: 3;
}
.order-4-ns {
order: 4;
}
.order-5-ns {
order: 5;
}
.order-6-ns {
order: 6;
}
.order-7-ns {
order: 7;
}
.order-8-ns {
order: 8;
}
.order-last-ns {
order: 99999;
}
.flex-grow-0-ns {
flex-grow: 0;
}
.flex-grow-1-ns {
flex-grow: 1;
}
.flex-shrink-0-ns {
flex-shrink: 0;
}
.flex-shrink-1-ns {
flex-shrink: 1;
}
.fl-ns {
float: left;
_display: inline;
}
.fr-ns {
float: right;
_display: inline;
}
.fn-ns {
float: none;
}
.i-ns {
font-style: italic;
}
.fs-normal-ns {
font-style: normal;
}
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.fw1-ns {
font-weight: 100;
}
.fw2-ns {
font-weight: 200;
}
.fw3-ns {
font-weight: 300;
}
.fw4-ns {
font-weight: 400;
}
.fw5-ns {
font-weight: 500;
}
.fw6-ns {
font-weight: 600;
}
.fw7-ns {
font-weight: 700;
}
.fw8-ns {
font-weight: 800;
}
.fw9-ns {
font-weight: 900;
}
.h1-ns {
height: 1rem;
}
.h2-ns {
height: 2rem;
}
.h3-ns {
height: 4rem;
}
.h4-ns {
height: 8rem;
}
.h5-ns {
height: 16rem;
}
.h-25-ns {
height: 25%;
}
.h-50-ns {
height: 50%;
}
.h-75-ns {
height: 75%;
}
.h-100-ns {
height: 100%;
}
.min-h-100-ns {
min-height: 100%;
}
.vh-25-ns {
height: 25vh;
}
.vh-50-ns {
height: 50vh;
}
.vh-75-ns {
height: 75vh;
}
.vh-100-ns {
height: 100vh;
}
.min-vh-100-ns {
min-height: 100vh;
}
.h-auto-ns {
height: auto;
}
.h-inherit-ns {
height: inherit;
}
.tracked-ns {
letter-spacing: 0.1em;
}
.tracked-tight-ns {
letter-spacing: -0.05em;
}
.tracked-mega-ns {
letter-spacing: 0.25em;
}
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.25;
}
.lh-copy-ns {
line-height: 1.5;
}
.mw-100-ns {
max-width: 100%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw-none-ns {
max-width: none;
}
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-30-ns {
width: 30%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-70-ns {
width: 70%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-90-ns {
width: 90%;
}
.w-100-ns {
width: 100%;
}
.w-third-ns {
width: 33.33333%;
}
.w-two-thirds-ns {
width: 66.66667%;
}
.w-auto-ns {
width: auto;
}
.overflow-visible-ns {
overflow: visible;
}
.overflow-hidden-ns {
overflow: hidden;
}
.overflow-scroll-ns {
overflow: scroll;
}
.overflow-auto-ns {
overflow: auto;
}
.overflow-x-visible-ns {
overflow-x: visible;
}
.overflow-x-hidden-ns {
overflow-x: hidden;
}
.overflow-x-scroll-ns {
overflow-x: scroll;
}
.overflow-x-auto-ns {
overflow-x: auto;
}
.overflow-y-visible-ns {
overflow-y: visible;
}
.overflow-y-hidden-ns {
overflow-y: hidden;
}
.overflow-y-scroll-ns {
overflow-y: scroll;
}
.overflow-y-auto-ns {
overflow-y: auto;
}
.static-ns {
position: static;
}
.relative-ns {
position: relative;
}
.absolute-ns {
position: absolute;
}
.fixed-ns {
position: fixed;
}
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.pa0-ns {
padding: 0;
}
.pa1-ns {
padding: 0.25rem;
}
.pa2-ns {
padding: 0.5rem;
}
.pa3-ns {
padding: 1rem;
}
.pa4-ns {
padding: 2rem;
}
.pa5-ns {
padding: 4rem;
}
.pa6-ns {
padding: 8rem;
}
.pa7-ns {
padding: 16rem;
}
.pl0-ns {
padding-left: 0;
}
.pl1-ns {
padding-left: 0.25rem;
}
.pl2-ns {
padding-left: 0.5rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pl4-ns {
padding-left: 2rem;
}
.pl5-ns {
padding-left: 4rem;
}
.pl6-ns {
padding-left: 8rem;
}
.pl7-ns {
padding-left: 16rem;
}
.pr0-ns {
padding-right: 0;
}
.pr1-ns {
padding-right: 0.25rem;
}
.pr2-ns {
padding-right: 0.5rem;
}
.pr3-ns {
padding-right: 1rem;
}
.pr4-ns {
padding-right: 2rem;
}
.pr5-ns {
padding-right: 4rem;
}
.pr6-ns {
padding-right: 8rem;
}
.pr7-ns {
padding-right: 16rem;
}
.pb0-ns {
padding-bottom: 0;
}
.pb1-ns {
padding-bottom: 0.25rem;
}
.pb2-ns {
padding-bottom: 0.5rem;
}
.pb3-ns {
padding-bottom: 1rem;
}
.pb4-ns {
padding-bottom: 2rem;
}
.pb5-ns {
padding-bottom: 4rem;
}
.pb6-ns {
padding-bottom: 8rem;
}
.pb7-ns {
padding-bottom: 16rem;
}
.pt0-ns {
padding-top: 0;
}
.pt1-ns {
padding-top: 0.25rem;
}
.pt2-ns {
padding-top: 0.5rem;
}
.pt3-ns {
padding-top: 1rem;
}
.pt4-ns {
padding-top: 2rem;
}
.pt5-ns {
padding-top: 4rem;
}
.pt6-ns {
padding-top: 8rem;
}
.pt7-ns {
padding-top: 16rem;
}
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-ns {
padding-left: 0;
padding-right: 0;
}
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-ns {
margin: 0;
}
.ma1-ns {
margin: 0.25rem;
}
.ma2-ns {
margin: 0.5rem;
}
.ma3-ns {
margin: 1rem;
}
.ma4-ns {
margin: 2rem;
}
.ma5-ns {
margin: 4rem;
}
.ma6-ns {
margin: 8rem;
}
.ma7-ns {
margin: 16rem;
}
.ml0-ns {
margin-left: 0;
}
.ml1-ns {
margin-left: 0.25rem;
}
.ml2-ns {
margin-left: 0.5rem;
}
.ml3-ns {
margin-left: 1rem;
}
.ml4-ns {
margin-left: 2rem;
}
.ml5-ns {
margin-left: 4rem;
}
.ml6-ns {
margin-left: 8rem;
}
.ml7-ns {
margin-left: 16rem;
}
.mr0-ns {
margin-right: 0;
}
.mr1-ns {
margin-right: 0.25rem;
}
.mr2-ns {
margin-right: 0.5rem;
}
.mr3-ns {
margin-right: 1rem;
}
.mr4-ns {
margin-right: 2rem;
}
.mr5-ns {
margin-right: 4rem;
}
.mr6-ns {
margin-right: 8rem;
}
.mr7-ns {
margin-right: 16rem;
}
.mb0-ns {
margin-bottom: 0;
}
.mb1-ns {
margin-bottom: 0.25rem;
}
.mb2-ns {
margin-bottom: 0.5rem;
}
.mb3-ns {
margin-bottom: 1rem;
}
.mb4-ns {
margin-bottom: 2rem;
}
.mb5-ns {
margin-bottom: 4rem;
}
.mb6-ns {
margin-bottom: 8rem;
}
.mb7-ns {
margin-bottom: 16rem;
}
.mt0-ns {
margin-top: 0;
}
.mt1-ns {
margin-top: 0.25rem;
}
.mt2-ns {
margin-top: 0.5rem;
}
.mt3-ns {
margin-top: 1rem;
}
.mt4-ns {
margin-top: 2rem;
}
.mt5-ns {
margin-top: 4rem;
}
.mt6-ns {
margin-top: 8rem;
}
.mt7-ns {
margin-top: 16rem;
}
.mv0-ns {
margin-top: 0;
margin-bottom: 0;
}
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-ns {
margin-left: 0;
margin-right: 0;
}
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem;
}
.na1-ns {
margin: -0.25rem;
}
.na2-ns {
margin: -0.5rem;
}
.na3-ns {
margin: -1rem;
}
.na4-ns {
margin: -2rem;
}
.na5-ns {
margin: -4rem;
}
.na6-ns {
margin: -8rem;
}
.na7-ns {
margin: -16rem;
}
.nl1-ns {
margin-left: -0.25rem;
}
.nl2-ns {
margin-left: -0.5rem;
}
.nl3-ns {
margin-left: -1rem;
}
.nl4-ns {
margin-left: -2rem;
}
.nl5-ns {
margin-left: -4rem;
}
.nl6-ns {
margin-left: -8rem;
}
.nl7-ns {
margin-left: -16rem;
}
.nr1-ns {
margin-right: -0.25rem;
}
.nr2-ns {
margin-right: -0.5rem;
}
.nr3-ns {
margin-right: -1rem;
}
.nr4-ns {
margin-right: -2rem;
}
.nr5-ns {
margin-right: -4rem;
}
.nr6-ns {
margin-right: -8rem;
}
.nr7-ns {
margin-right: -16rem;
}
.nb1-ns {
margin-bottom: -0.25rem;
}
.nb2-ns {
margin-bottom: -0.5rem;
}
.nb3-ns {
margin-bottom: -1rem;
}
.nb4-ns {
margin-bottom: -2rem;
}
.nb5-ns {
margin-bottom: -4rem;
}
.nb6-ns {
margin-bottom: -8rem;
}
.nb7-ns {
margin-bottom: -16rem;
}
.nt1-ns {
margin-top: -0.25rem;
}
.nt2-ns {
margin-top: -0.5rem;
}
.nt3-ns {
margin-top: -1rem;
}
.nt4-ns {
margin-top: -2rem;
}
.nt5-ns {
margin-top: -4rem;
}
.nt6-ns {
margin-top: -8rem;
}
.nt7-ns {
margin-top: -16rem;
}
.strike-ns {
text-decoration: line-through;
}
.underline-ns {
text-decoration: underline;
}
.no-underline-ns {
text-decoration: none;
}
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
.tj-ns {
text-align: justify;
}
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttu-ns {
text-transform: uppercase;
}
.ttn-ns {
text-transform: none;
}
.f-6-ns,
.f-headline-ns {
font-size: 6rem;
}
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
.f4-ns {
font-size: 1.25rem;
}
.f5-ns {
font-size: 1rem;
}
.f6-ns {
font-size: 0.875rem;
}
.f7-ns {
font-size: 0.75rem;
}
.measure-ns {
max-width: 30em;
}
.measure-wide-ns {
max-width: 34em;
}
.measure-narrow-ns {
max-width: 20em;
}
.indent-ns {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-ns {
font-variant: small-caps;
}
.truncate-ns {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.center-ns {
margin-right: auto;
margin-left: auto;
}
.mr-auto-ns {
margin-right: auto;
}
.ml-auto-ns {
margin-left: auto;
}
.clip-ns {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.ws-normal-ns {
white-space: normal;
}
.nowrap-ns {
white-space: nowrap;
}
.pre-ns {
white-space: pre;
}
.v-base-ns {
vertical-align: baseline;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-m {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-m {
padding-bottom: 75%;
}
.aspect-ratio--3x4-m {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-m {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-m {
padding-bottom: 150%;
}
.aspect-ratio--8x5-m {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-m {
padding-bottom: 160%;
}
.aspect-ratio--7x5-m {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-m {
padding-bottom: 140%;
}
.aspect-ratio--1x1-m {
padding-bottom: 100%;
}
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover-m {
background-size: cover !important;
}
.contain-m {
background-size: contain !important;
}
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-m {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-m {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-m {
background-repeat: no-repeat;
background-position: center left;
}
.outline-m {
outline: 1px solid;
}
.outline-transparent-m {
outline: 1px solid transparent;
}
.outline-0-m {
outline: 0;
}
.ba-m {
border-style: solid;
border-width: 1px;
}
.bt-m {
border-top-style: solid;
border-top-width: 1px;
}
.br-m {
border-right-style: solid;
border-right-width: 1px;
}
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-m {
border-left-style: solid;
border-left-width: 1px;
}
.bn-m {
border-style: none;
border-width: 0;
}
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: 0.125rem;
}
.br2-m {
border-radius: 0.25rem;
}
.br3-m {
border-radius: 0.5rem;
}
.br4-m {
border-radius: 1rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-m {
border-radius: inherit;
}
.br-initial-m {
border-radius: initial;
}
.br-unset-m {
border-radius: unset;
}
.b--dotted-m {
border-style: dotted;
}
.b--dashed-m {
border-style: dashed;
}
.b--solid-m {
border-style: solid;
}
.b--none-m {
border-style: none;
}
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: 0.125rem;
}
.bw2-m {
border-width: 0.25rem;
}
.bw3-m {
border-width: 0.5rem;
}
.bw4-m {
border-width: 1rem;
}
.bw5-m {
border-width: 2rem;
}
.bt-0-m {
border-top-width: 0;
}
.br-0-m {
border-right-width: 0;
}
.bb-0-m {
border-bottom-width: 0;
}
.bl-0-m {
border-left-width: 0;
}
.shadow-1-m {
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-m {
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-m {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-m {
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.shadow-5-m {
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.top-0-m {
top: 0;
}
.left-0-m {
left: 0;
}
.right-0-m {
right: 0;
}
.bottom-0-m {
bottom: 0;
}
.top-1-m {
top: 1rem;
}
.left-1-m {
left: 1rem;
}
.right-1-m {
right: 1rem;
}
.bottom-1-m {
bottom: 1rem;
}
.top-2-m {
top: 2rem;
}
.left-2-m {
left: 2rem;
}
.right-2-m {
right: 2rem;
}
.bottom-2-m {
bottom: 2rem;
}
.top--1-m {
top: -1rem;
}
.right--1-m {
right: -1rem;
}
.bottom--1-m {
bottom: -1rem;
}
.left--1-m {
left: -1rem;
}
.top--2-m {
top: -2rem;
}
.right--2-m {
right: -2rem;
}
.bottom--2-m {
bottom: -2rem;
}
.left--2-m {
left: -2rem;
}
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cl-m {
clear: left;
}
.cr-m {
clear: right;
}
.cb-m {
clear: both;
}
.cn-m {
clear: none;
}
.dn-m {
display: none;
}
.di-m {
display: inline;
}
.db-m {
display: block;
}
.dib-m {
display: inline-block;
}
.dit-m {
display: inline-table;
}
.dt-m {
display: table;
}
.dtc-m {
display: table-cell;
}
.dt-row-m {
display: table-row;
}
.dt-row-group-m {
display: table-row-group;
}
.dt-column-m {
display: table-column;
}
.dt-column-group-m {
display: table-column-group;
}
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
.flex-m {
display: flex;
}
.inline-flex-m {
display: inline-flex;
}
.flex-auto-m {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-m {
flex: none;
}
.flex-column-m {
flex-direction: column;
}
.flex-row-m {
flex-direction: row;
}
.flex-wrap-m {
flex-wrap: wrap;
}
.flex-nowrap-m {
flex-wrap: nowrap;
}
.flex-wrap-reverse-m {
flex-wrap: wrap-reverse;
}
.flex-column-reverse-m {
flex-direction: column-reverse;
}
.flex-row-reverse-m {
flex-direction: row-reverse;
}
.items-start-m {
align-items: flex-start;
}
.items-end-m {
align-items: flex-end;
}
.items-center-m {
align-items: center;
}
.items-baseline-m {
align-items: baseline;
}
.items-stretch-m {
align-items: stretch;
}
.self-start-m {
align-self: flex-start;
}
.self-end-m {
align-self: flex-end;
}
.self-center-m {
align-self: center;
}
.self-baseline-m {
align-self: baseline;
}
.self-stretch-m {
align-self: stretch;
}
.justify-start-m {
justify-content: flex-start;
}
.justify-end-m {
justify-content: flex-end;
}
.justify-center-m {
justify-content: center;
}
.justify-between-m {
justify-content: space-between;
}
.justify-around-m {
justify-content: space-around;
}
.content-start-m {
align-content: flex-start;
}
.content-end-m {
align-content: flex-end;
}
.content-center-m {
align-content: center;
}
.content-between-m {
align-content: space-between;
}
.content-around-m {
align-content: space-around;
}
.content-stretch-m {
align-content: stretch;
}
.order-0-m {
order: 0;
}
.order-1-m {
order: 1;
}
.order-2-m {
order: 2;
}
.order-3-m {
order: 3;
}
.order-4-m {
order: 4;
}
.order-5-m {
order: 5;
}
.order-6-m {
order: 6;
}
.order-7-m {
order: 7;
}
.order-8-m {
order: 8;
}
.order-last-m {
order: 99999;
}
.flex-grow-0-m {
flex-grow: 0;
}
.flex-grow-1-m {
flex-grow: 1;
}
.flex-shrink-0-m {
flex-shrink: 0;
}
.flex-shrink-1-m {
flex-shrink: 1;
}
.fl-m {
float: left;
_display: inline;
}
.fr-m {
float: right;
_display: inline;
}
.fn-m {
float: none;
}
.i-m {
font-style: italic;
}
.fs-normal-m {
font-style: normal;
}
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.fw1-m {
font-weight: 100;
}
.fw2-m {
font-weight: 200;
}
.fw3-m {
font-weight: 300;
}
.fw4-m {
font-weight: 400;
}
.fw5-m {
font-weight: 500;
}
.fw6-m {
font-weight: 600;
}
.fw7-m {
font-weight: 700;
}
.fw8-m {
font-weight: 800;
}
.fw9-m {
font-weight: 900;
}
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-25-m {
height: 25%;
}
.h-50-m {
height: 50%;
}
.h-75-m {
height: 75%;
}
.h-100-m {
height: 100%;
}
.min-h-100-m {
min-height: 100%;
}
.vh-25-m {
height: 25vh;
}
.vh-50-m {
height: 50vh;
}
.vh-75-m {
height: 75vh;
}
.vh-100-m {
height: 100vh;
}
.min-vh-100-m {
min-height: 100vh;
}
.h-auto-m {
height: auto;
}
.h-inherit-m {
height: inherit;
}
.tracked-m {
letter-spacing: 0.1em;
}
.tracked-tight-m {
letter-spacing: -0.05em;
}
.tracked-mega-m {
letter-spacing: 0.25em;
}
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.25;
}
.lh-copy-m {
line-height: 1.5;
}
.mw-100-m {
max-width: 100%;
}
.mw1-m {
max-width: 1rem;
}
.mw2-m {
max-width: 2rem;
}
.mw3-m {
max-width: 4rem;
}
.mw4-m {
max-width: 8rem;
}
.mw5-m {
max-width: 16rem;
}
.mw6-m {
max-width: 32rem;
}
.mw7-m {
max-width: 48rem;
}
.mw8-m {
max-width: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw-none-m {
max-width: none;
}
.w1-m {
width: 1rem;
}
.w2-m {
width: 2rem;
}
.w3-m {
width: 4rem;
}
.w4-m {
width: 8rem;
}
.w5-m {
width: 16rem;
}
.w-10-m {
width: 10%;
}
.w-20-m {
width: 20%;
}
.w-25-m {
width: 25%;
}
.w-30-m {
width: 30%;
}
.w-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-70-m {
width: 70%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-90-m {
width: 90%;
}
.w-100-m {
width: 100%;
}
.w-third-m {
width: 33.33333%;
}
.w-two-thirds-m {
width: 66.66667%;
}
.w-auto-m {
width: auto;
}
.overflow-visible-m {
overflow: visible;
}
.overflow-hidden-m {
overflow: hidden;
}
.overflow-scroll-m {
overflow: scroll;
}
.overflow-auto-m {
overflow: auto;
}
.overflow-x-visible-m {
overflow-x: visible;
}
.overflow-x-hidden-m {
overflow-x: hidden;
}
.overflow-x-scroll-m {
overflow-x: scroll;
}
.overflow-x-auto-m {
overflow-x: auto;
}
.overflow-y-visible-m {
overflow-y: visible;
}
.overflow-y-hidden-m {
overflow-y: hidden;
}
.overflow-y-scroll-m {
overflow-y: scroll;
}
.overflow-y-auto-m {
overflow-y: auto;
}
.static-m {
position: static;
}
.relative-m {
position: relative;
}
.absolute-m {
position: absolute;
}
.fixed-m {
position: fixed;
}
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.pa0-m {
padding: 0;
}
.pa1-m {
padding: 0.25rem;
}
.pa2-m {
padding: 0.5rem;
}
.pa3-m {
padding: 1rem;
}
.pa4-m {
padding: 2rem;
}
.pa5-m {
padding: 4rem;
}
.pa6-m {
padding: 8rem;
}
.pa7-m {
padding: 16rem;
}
.pl0-m {
padding-left: 0;
}
.pl1-m {
padding-left: 0.25rem;
}
.pl2-m {
padding-left: 0.5rem;
}
.pl3-m {
padding-left: 1rem;
}
.pl4-m {
padding-left: 2rem;
}
.pl5-m {
padding-left: 4rem;
}
.pl6-m {
padding-left: 8rem;
}
.pl7-m {
padding-left: 16rem;
}
.pr0-m {
padding-right: 0;
}
.pr1-m {
padding-right: 0.25rem;
}
.pr2-m {
padding-right: 0.5rem;
}
.pr3-m {
padding-right: 1rem;
}
.pr4-m {
padding-right: 2rem;
}
.pr5-m {
padding-right: 4rem;
}
.pr6-m {
padding-right: 8rem;
}
.pr7-m {
padding-right: 16rem;
}
.pb0-m {
padding-bottom: 0;
}
.pb1-m {
padding-bottom: 0.25rem;
}
.pb2-m {
padding-bottom: 0.5rem;
}
.pb3-m {
padding-bottom: 1rem;
}
.pb4-m {
padding-bottom: 2rem;
}
.pb5-m {
padding-bottom: 4rem;
}
.pb6-m {
padding-bottom: 8rem;
}
.pb7-m {
padding-bottom: 16rem;
}
.pt0-m {
padding-top: 0;
}
.pt1-m {
padding-top: 0.25rem;
}
.pt2-m {
padding-top: 0.5rem;
}
.pt3-m {
padding-top: 1rem;
}
.pt4-m {
padding-top: 2rem;
}
.pt5-m {
padding-top: 4rem;
}
.pt6-m {
padding-top: 8rem;
}
.pt7-m {
padding-top: 16rem;
}
.pv0-m {
padding-top: 0;
padding-bottom: 0;
}
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-m {
padding-left: 0;
padding-right: 0;
}
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-m {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-m {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-m {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-m {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-m {
margin: 0;
}
.ma1-m {
margin: 0.25rem;
}
.ma2-m {
margin: 0.5rem;
}
.ma3-m {
margin: 1rem;
}
.ma4-m {
margin: 2rem;
}
.ma5-m {
margin: 4rem;
}
.ma6-m {
margin: 8rem;
}
.ma7-m {
margin: 16rem;
}
.ml0-m {
margin-left: 0;
}
.ml1-m {
margin-left: 0.25rem;
}
.ml2-m {
margin-left: 0.5rem;
}
.ml3-m {
margin-left: 1rem;
}
.ml4-m {
margin-left: 2rem;
}
.ml5-m {
margin-left: 4rem;
}
.ml6-m {
margin-left: 8rem;
}
.ml7-m {
margin-left: 16rem;
}
.mr0-m {
margin-right: 0;
}
.mr1-m {
margin-right: 0.25rem;
}
.mr2-m {
margin-right: 0.5rem;
}
.mr3-m {
margin-right: 1rem;
}
.mr4-m {
margin-right: 2rem;
}
.mr5-m {
margin-right: 4rem;
}
.mr6-m {
margin-right: 8rem;
}
.mr7-m {
margin-right: 16rem;
}
.mb0-m {
margin-bottom: 0;
}
.mb1-m {
margin-bottom: 0.25rem;
}
.mb2-m {
margin-bottom: 0.5rem;
}
.mb3-m {
margin-bottom: 1rem;
}
.mb4-m {
margin-bottom: 2rem;
}
.mb5-m {
margin-bottom: 4rem;
}
.mb6-m {
margin-bottom: 8rem;
}
.mb7-m {
margin-bottom: 16rem;
}
.mt0-m {
margin-top: 0;
}
.mt1-m {
margin-top: 0.25rem;
}
.mt2-m {
margin-top: 0.5rem;
}
.mt3-m {
margin-top: 1rem;
}
.mt4-m {
margin-top: 2rem;
}
.mt5-m {
margin-top: 4rem;
}
.mt6-m {
margin-top: 8rem;
}
.mt7-m {
margin-top: 16rem;
}
.mv0-m {
margin-top: 0;
margin-bottom: 0;
}
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-m {
margin-left: 0;
margin-right: 0;
}
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-m {
margin-left: 16rem;
margin-right: 16rem;
}
.na1-m {
margin: -0.25rem;
}
.na2-m {
margin: -0.5rem;
}
.na3-m {
margin: -1rem;
}
.na4-m {
margin: -2rem;
}
.na5-m {
margin: -4rem;
}
.na6-m {
margin: -8rem;
}
.na7-m {
margin: -16rem;
}
.nl1-m {
margin-left: -0.25rem;
}
.nl2-m {
margin-left: -0.5rem;
}
.nl3-m {
margin-left: -1rem;
}
.nl4-m {
margin-left: -2rem;
}
.nl5-m {
margin-left: -4rem;
}
.nl6-m {
margin-left: -8rem;
}
.nl7-m {
margin-left: -16rem;
}
.nr1-m {
margin-right: -0.25rem;
}
.nr2-m {
margin-right: -0.5rem;
}
.nr3-m {
margin-right: -1rem;
}
.nr4-m {
margin-right: -2rem;
}
.nr5-m {
margin-right: -4rem;
}
.nr6-m {
margin-right: -8rem;
}
.nr7-m {
margin-right: -16rem;
}
.nb1-m {
margin-bottom: -0.25rem;
}
.nb2-m {
margin-bottom: -0.5rem;
}
.nb3-m {
margin-bottom: -1rem;
}
.nb4-m {
margin-bottom: -2rem;
}
.nb5-m {
margin-bottom: -4rem;
}
.nb6-m {
margin-bottom: -8rem;
}
.nb7-m {
margin-bottom: -16rem;
}
.nt1-m {
margin-top: -0.25rem;
}
.nt2-m {
margin-top: -0.5rem;
}
.nt3-m {
margin-top: -1rem;
}
.nt4-m {
margin-top: -2rem;
}
.nt5-m {
margin-top: -4rem;
}
.nt6-m {
margin-top: -8rem;
}
.nt7-m {
margin-top: -16rem;
}
.strike-m {
text-decoration: line-through;
}
.underline-m {
text-decoration: underline;
}
.no-underline-m {
text-decoration: none;
}
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
.tj-m {
text-align: justify;
}
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttu-m {
text-transform: uppercase;
}
.ttn-m {
text-transform: none;
}
.f-6-m,
.f-headline-m {
font-size: 6rem;
}
.f-5-m,
.f-subheadline-m {
font-size: 5rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2.25rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1.25rem;
}
.f5-m {
font-size: 1rem;
}
.f6-m {
font-size: 0.875rem;
}
.f7-m {
font-size: 0.75rem;
}
.measure-m {
max-width: 30em;
}
.measure-wide-m {
max-width: 34em;
}
.measure-narrow-m {
max-width: 20em;
}
.indent-m {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-m {
font-variant: small-caps;
}
.truncate-m {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.center-m {
margin-right: auto;
margin-left: auto;
}
.mr-auto-m {
margin-right: auto;
}
.ml-auto-m {
margin-left: auto;
}
.clip-m {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.ws-normal-m {
white-space: normal;
}
.nowrap-m {
white-space: nowrap;
}
.pre-m {
white-space: pre;
}
.v-base-m {
vertical-align: baseline;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-l {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-l {
padding-bottom: 75%;
}
.aspect-ratio--3x4-l {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-l {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-l {
padding-bottom: 150%;
}
.aspect-ratio--8x5-l {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-l {
padding-bottom: 160%;
}
.aspect-ratio--7x5-l {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-l {
padding-bottom: 140%;
}
.aspect-ratio--1x1-l {
padding-bottom: 100%;
}
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover-l {
background-size: cover !important;
}
.contain-l {
background-size: contain !important;
}
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-l {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-l {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-l {
background-repeat: no-repeat;
background-position: center left;
}
.outline-l {
outline: 1px solid;
}
.outline-transparent-l {
outline: 1px solid transparent;
}
.outline-0-l {
outline: 0;
}
.ba-l {
border-style: solid;
border-width: 1px;
}
.bt-l {
border-top-style: solid;
border-top-width: 1px;
}
.br-l {
border-right-style: solid;
border-right-width: 1px;
}
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-l {
border-left-style: solid;
border-left-width: 1px;
}
.bn-l {
border-style: none;
border-width: 0;
}
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: 0.125rem;
}
.br2-l {
border-radius: 0.25rem;
}
.br3-l {
border-radius: 0.5rem;
}
.br4-l {
border-radius: 1rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-l {
border-radius: inherit;
}
.br-initial-l {
border-radius: initial;
}
.br-unset-l {
border-radius: unset;
}
.b--dotted-l {
border-style: dotted;
}
.b--dashed-l {
border-style: dashed;
}
.b--solid-l {
border-style: solid;
}
.b--none-l {
border-style: none;
}
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: 0.125rem;
}
.bw2-l {
border-width: 0.25rem;
}
.bw3-l {
border-width: 0.5rem;
}
.bw4-l {
border-width: 1rem;
}
.bw5-l {
border-width: 2rem;
}
.bt-0-l {
border-top-width: 0;
}
.br-0-l {
border-right-width: 0;
}
.bb-0-l {
border-bottom-width: 0;
}
.bl-0-l {
border-left-width: 0;
}
.shadow-1-l {
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-l {
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-l {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-l {
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.shadow-5-l {
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.top-0-l {
top: 0;
}
.left-0-l {
left: 0;
}
.right-0-l {
right: 0;
}
.bottom-0-l {
bottom: 0;
}
.top-1-l {
top: 1rem;
}
.left-1-l {
left: 1rem;
}
.right-1-l {
right: 1rem;
}
.bottom-1-l {
bottom: 1rem;
}
.top-2-l {
top: 2rem;
}
.left-2-l {
left: 2rem;
}
.right-2-l {
right: 2rem;
}
.bottom-2-l {
bottom: 2rem;
}
.top--1-l {
top: -1rem;
}
.right--1-l {
right: -1rem;
}
.bottom--1-l {
bottom: -1rem;
}
.left--1-l {
left: -1rem;
}
.top--2-l {
top: -2rem;
}
.right--2-l {
right: -2rem;
}
.bottom--2-l {
bottom: -2rem;
}
.left--2-l {
left: -2rem;
}
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cl-l {
clear: left;
}
.cr-l {
clear: right;
}
.cb-l {
clear: both;
}
.cn-l {
clear: none;
}
.dn-l {
display: none;
}
.di-l {
display: inline;
}
.db-l {
display: block;
}
.dib-l {
display: inline-block;
}
.dit-l {
display: inline-table;
}
.dt-l {
display: table;
}
.dtc-l {
display: table-cell;
}
.dt-row-l {
display: table-row;
}
.dt-row-group-l {
display: table-row-group;
}
.dt-column-l {
display: table-column;
}
.dt-column-group-l {
display: table-column-group;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
.flex-l {
display: flex;
}
.inline-flex-l {
display: inline-flex;
}
.flex-auto-l {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-l {
flex: none;
}
.flex-column-l {
flex-direction: column;
}
.flex-row-l {
flex-direction: row;
}
.flex-wrap-l {
flex-wrap: wrap;
}
.flex-nowrap-l {
flex-wrap: nowrap;
}
.flex-wrap-reverse-l {
flex-wrap: wrap-reverse;
}
.flex-column-reverse-l {
flex-direction: column-reverse;
}
.flex-row-reverse-l {
flex-direction: row-reverse;
}
.items-start-l {
align-items: flex-start;
}
.items-end-l {
align-items: flex-end;
}
.items-center-l {
align-items: center;
}
.items-baseline-l {
align-items: baseline;
}
.items-stretch-l {
align-items: stretch;
}
.self-start-l {
align-self: flex-start;
}
.self-end-l {
align-self: flex-end;
}
.self-center-l {
align-self: center;
}
.self-baseline-l {
align-self: baseline;
}
.self-stretch-l {
align-self: stretch;
}
.justify-start-l {
justify-content: flex-start;
}
.justify-end-l {
justify-content: flex-end;
}
.justify-center-l {
justify-content: center;
}
.justify-between-l {
justify-content: space-between;
}
.justify-around-l {
justify-content: space-around;
}
.content-start-l {
align-content: flex-start;
}
.content-end-l {
align-content: flex-end;
}
.content-center-l {
align-content: center;
}
.content-between-l {
align-content: space-between;
}
.content-around-l {
align-content: space-around;
}
.content-stretch-l {
align-content: stretch;
}
.order-0-l {
order: 0;
}
.order-1-l {
order: 1;
}
.order-2-l {
order: 2;
}
.order-3-l {
order: 3;
}
.order-4-l {
order: 4;
}
.order-5-l {
order: 5;
}
.order-6-l {
order: 6;
}
.order-7-l {
order: 7;
}
.order-8-l {
order: 8;
}
.order-last-l {
order: 99999;
}
.flex-grow-0-l {
flex-grow: 0;
}
.flex-grow-1-l {
flex-grow: 1;
}
.flex-shrink-0-l {
flex-shrink: 0;
}
.flex-shrink-1-l {
flex-shrink: 1;
}
.fl-l {
float: left;
_display: inline;
}
.fr-l {
float: right;
_display: inline;
}
.fn-l {
float: none;
}
.i-l {
font-style: italic;
}
.fs-normal-l {
font-style: normal;
}
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.fw1-l {
font-weight: 100;
}
.fw2-l {
font-weight: 200;
}
.fw3-l {
font-weight: 300;
}
.fw4-l {
font-weight: 400;
}
.fw5-l {
font-weight: 500;
}
.fw6-l {
font-weight: 600;
}
.fw7-l {
font-weight: 700;
}
.fw8-l {
font-weight: 800;
}
.fw9-l {
font-weight: 900;
}
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-25-l {
height: 25%;
}
.h-50-l {
height: 50%;
}
.h-75-l {
height: 75%;
}
.h-100-l {
height: 100%;
}
.min-h-100-l {
min-height: 100%;
}
.vh-25-l {
height: 25vh;
}
.vh-50-l {
height: 50vh;
}
.vh-75-l {
height: 75vh;
}
.vh-100-l {
height: 100vh;
}
.min-vh-100-l {
min-height: 100vh;
}
.h-auto-l {
height: auto;
}
.h-inherit-l {
height: inherit;
}
.tracked-l {
letter-spacing: 0.1em;
}
.tracked-tight-l {
letter-spacing: -0.05em;
}
.tracked-mega-l {
letter-spacing: 0.25em;
}
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.25;
}
.lh-copy-l {
line-height: 1.5;
}
.mw-100-l {
max-width: 100%;
}
.mw1-l {
max-width: 1rem;
}
.mw2-l {
max-width: 2rem;
}
.mw3-l {
max-width: 4rem;
}
.mw4-l {
max-width: 8rem;
}
.mw5-l {
max-width: 16rem;
}
.mw6-l {
max-width: 32rem;
}
.mw7-l {
max-width: 48rem;
}
.mw8-l {
max-width: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw-none-l {
max-width: none;
}
.w1-l {
width: 1rem;
}
.w2-l {
width: 2rem;
}
.w3-l {
width: 4rem;
}
.w4-l {
width: 8rem;
}
.w5-l {
width: 16rem;
}
.w-10-l {
width: 10%;
}
.w-20-l {
width: 20%;
}
.w-25-l {
width: 25%;
}
.w-30-l {
width: 30%;
}
.w-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-70-l {
width: 70%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-90-l {
width: 90%;
}
.w-100-l {
width: 100%;
}
.w-third-l {
width: 33.33333%;
}
.w-two-thirds-l {
width: 66.66667%;
}
.w-auto-l {
width: auto;
}
.overflow-visible-l {
overflow: visible;
}
.overflow-hidden-l {
overflow: hidden;
}
.overflow-scroll-l {
overflow: scroll;
}
.overflow-auto-l {
overflow: auto;
}
.overflow-x-visible-l {
overflow-x: visible;
}
.overflow-x-hidden-l {
overflow-x: hidden;
}
.overflow-x-scroll-l {
overflow-x: scroll;
}
.overflow-x-auto-l {
overflow-x: auto;
}
.overflow-y-visible-l {
overflow-y: visible;
}
.overflow-y-hidden-l {
overflow-y: hidden;
}
.overflow-y-scroll-l {
overflow-y: scroll;
}
.overflow-y-auto-l {
overflow-y: auto;
}
.static-l {
position: static;
}
.relative-l {
position: relative;
}
.absolute-l {
position: absolute;
}
.fixed-l {
position: fixed;
}
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.pa0-l {
padding: 0;
}
.pa1-l {
padding: 0.25rem;
}
.pa2-l {
padding: 0.5rem;
}
.pa3-l {
padding: 1rem;
}
.pa4-l {
padding: 2rem;
}
.pa5-l {
padding: 4rem;
}
.pa6-l {
padding: 8rem;
}
.pa7-l {
padding: 16rem;
}
.pl0-l {
padding-left: 0;
}
.pl1-l {
padding-left: 0.25rem;
}
.pl2-l {
padding-left: 0.5rem;
}
.pl3-l {
padding-left: 1rem;
}
.pl4-l {
padding-left: 2rem;
}
.pl5-l {
padding-left: 4rem;
}
.pl6-l {
padding-left: 8rem;
}
.pl7-l {
padding-left: 16rem;
}
.pr0-l {
padding-right: 0;
}
.pr1-l {
padding-right: 0.25rem;
}
.pr2-l {
padding-right: 0.5rem;
}
.pr3-l {
padding-right: 1rem;
}
.pr4-l {
padding-right: 2rem;
}
.pr5-l {
padding-right: 4rem;
}
.pr6-l {
padding-right: 8rem;
}
.pr7-l {
padding-right: 16rem;
}
.pb0-l {
padding-bottom: 0;
}
.pb1-l {
padding-bottom: 0.25rem;
}
.pb2-l {
padding-bottom: 0.5rem;
}
.pb3-l {
padding-bottom: 1rem;
}
.pb4-l {
padding-bottom: 2rem;
}
.pb5-l {
padding-bottom: 4rem;
}
.pb6-l {
padding-bottom: 8rem;
}
.pb7-l {
padding-bottom: 16rem;
}
.pt0-l {
padding-top: 0;
}
.pt1-l {
padding-top: 0.25rem;
}
.pt2-l {
padding-top: 0.5rem;
}
.pt3-l {
padding-top: 1rem;
}
.pt4-l {
padding-top: 2rem;
}
.pt5-l {
padding-top: 4rem;
}
.pt6-l {
padding-top: 8rem;
}
.pt7-l {
padding-top: 16rem;
}
.pv0-l {
padding-top: 0;
padding-bottom: 0;
}
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-l {
padding-left: 0;
padding-right: 0;
}
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-l {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-l {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-l {
margin: 0;
}
.ma1-l {
margin: 0.25rem;
}
.ma2-l {
margin: 0.5rem;
}
.ma3-l {
margin: 1rem;
}
.ma4-l {
margin: 2rem;
}
.ma5-l {
margin: 4rem;
}
.ma6-l {
margin: 8rem;
}
.ma7-l {
margin: 16rem;
}
.ml0-l {
margin-left: 0;
}
.ml1-l {
margin-left: 0.25rem;
}
.ml2-l {
margin-left: 0.5rem;
}
.ml3-l {
margin-left: 1rem;
}
.ml4-l {
margin-left: 2rem;
}
.ml5-l {
margin-left: 4rem;
}
.ml6-l {
margin-left: 8rem;
}
.ml7-l {
margin-left: 16rem;
}
.mr0-l {
margin-right: 0;
}
.mr1-l {
margin-right: 0.25rem;
}
.mr2-l {
margin-right: 0.5rem;
}
.mr3-l {
margin-right: 1rem;
}
.mr4-l {
margin-right: 2rem;
}
.mr5-l {
margin-right: 4rem;
}
.mr6-l {
margin-right: 8rem;
}
.mr7-l {
margin-right: 16rem;
}
.mb0-l {
margin-bottom: 0;
}
.mb1-l {
margin-bottom: 0.25rem;
}
.mb2-l {
margin-bottom: 0.5rem;
}
.mb3-l {
margin-bottom: 1rem;
}
.mb4-l {
margin-bottom: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
.mb6-l {
margin-bottom: 8rem;
}
.mb7-l {
margin-bottom: 16rem;
}
.mt0-l {
margin-top: 0;
}
.mt1-l {
margin-top: 0.25rem;
}
.mt2-l {
margin-top: 0.5rem;
}
.mt3-l {
margin-top: 1rem;
}
.mt4-l {
margin-top: 2rem;
}
.mt5-l {
margin-top: 4rem;
}
.mt6-l {
margin-top: 8rem;
}
.mt7-l {
margin-top: 16rem;
}
.mv0-l {
margin-top: 0;
margin-bottom: 0;
}
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-l {
margin-left: 0;
margin-right: 0;
}
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-l {
margin-left: 16rem;
margin-right: 16rem;
}
.na1-l {
margin: -0.25rem;
}
.na2-l {
margin: -0.5rem;
}
.na3-l {
margin: -1rem;
}
.na4-l {
margin: -2rem;
}
.na5-l {
margin: -4rem;
}
.na6-l {
margin: -8rem;
}
.na7-l {
margin: -16rem;
}
.nl1-l {
margin-left: -0.25rem;
}
.nl2-l {
margin-left: -0.5rem;
}
.nl3-l {
margin-left: -1rem;
}
.nl4-l {
margin-left: -2rem;
}
.nl5-l {
margin-left: -4rem;
}
.nl6-l {
margin-left: -8rem;
}
.nl7-l {
margin-left: -16rem;
}
.nr1-l {
margin-right: -0.25rem;
}
.nr2-l {
margin-right: -0.5rem;
}
.nr3-l {
margin-right: -1rem;
}
.nr4-l {
margin-right: -2rem;
}
.nr5-l {
margin-right: -4rem;
}
.nr6-l {
margin-right: -8rem;
}
.nr7-l {
margin-right: -16rem;
}
.nb1-l {
margin-bottom: -0.25rem;
}
.nb2-l {
margin-bottom: -0.5rem;
}
.nb3-l {
margin-bottom: -1rem;
}
.nb4-l {
margin-bottom: -2rem;
}
.nb5-l {
margin-bottom: -4rem;
}
.nb6-l {
margin-bottom: -8rem;
}
.nb7-l {
margin-bottom: -16rem;
}
.nt1-l {
margin-top: -0.25rem;
}
.nt2-l {
margin-top: -0.5rem;
}
.nt3-l {
margin-top: -1rem;
}
.nt4-l {
margin-top: -2rem;
}
.nt5-l {
margin-top: -4rem;
}
.nt6-l {
margin-top: -8rem;
}
.nt7-l {
margin-top: -16rem;
}
.strike-l {
text-decoration: line-through;
}
.underline-l {
text-decoration: underline;
}
.no-underline-l {
text-decoration: none;
}
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
.tj-l {
text-align: justify;
}
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttu-l {
text-transform: uppercase;
}
.ttn-l {
text-transform: none;
}
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1.25rem;
}
.f5-l {
font-size: 1rem;
}
.f6-l {
font-size: 0.875rem;
}
.f7-l {
font-size: 0.75rem;
}
.measure-l {
max-width: 30em;
}
.measure-wide-l {
max-width: 34em;
}
.measure-narrow-l {
max-width: 20em;
}
.indent-l {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-l {
font-variant: small-caps;
}
.truncate-l {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.center-l {
margin-right: auto;
margin-left: auto;
}
.mr-auto-l {
margin-right: auto;
}
.ml-auto-l {
margin-left: auto;
}
.clip-l {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.ws-normal-l {
white-space: normal;
}
.nowrap-l {
white-space: nowrap;
}
.pre-l {
white-space: pre;
}
.v-base-l {
vertical-align: baseline;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}
html,
body {
min-height: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background-color: white;
font-family: var(--fontDefault);
}
#root {
display: flex;
flex-direction: column;
height: 100%;
}
#root .layout-header {
flex: 0 0 60px;
}
#root .layout-footer {
flex: 0 0 40px;
}
#root .main-content {
flex: 12 0 60px;
}
.layout-header {
display: flex;
height: 4rem;
align-items: center;
justify-content: space-between;
background-color: var(--header-dark);
}
.layout-header .header-left {
flex: 0 1;
display: flex;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
align-items: center;
justify-content: center;
justify-content: flex-start;
height: 100%;
width: 30%;
}
.layout-header .header-left .logo {
margin-left: 2rem;
width: 48px;
height: 42px;
background-color: var(--icon-background);
border: none;
outline: none;
}
.layout-header .header-center {
display: flex;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
align-items: center;
justify-content: center;
height: 4rem;
width: 40%;
font-family: var(--fontDefault);
}
.layout-header .header-right {
display: flex;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
align-items: center;
justify-content: center;
justify-content: flex-end;
height: 100%;
width: 30%;
}
.layout-header .header-right .user-identity {
color: var(--muted-green);
font-weight: bold;
font-size: 0.8rem;
}
.main-content {
display: flex;
width: 100%;
}
.layout-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--header-dark);
color: var(--gray-text);
font-size: 0.8rem;
}
.layout-footer span {
text-align: center;
padding: 0 0.5rem;
}
.layout-footer div.disclaimer-text {
font-weight: bold;
border-left: 2px solid var(--menu-light-gray);
border-right: 2px solid var(--menu-light-gray);
padding: 0 0.5rem;
text-align: center;
}
nav.sidebar {
justify-content: flex-start;
max-width: 150px;
background-color: var(--sidebar-dark);
display: flex;
flex-direction: column;
}
nav.sidebar .nav-item {
position: relative;
justify-content: center;
background-color: var(--dark--gray);
border-top: 2px solid var(--active-gray);
border-bottom: 2px solid var(--menu-active-gray);
color: var(--menu-light-gray);
display: flex;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.4px;
min-width: 125px;
max-height: 120px;
padding: 1rem;
padding-top: 0.25rem;
text-decoration: none;
}
nav.sidebar .nav-item:hover {
color: var(--menu-light-green);
}
nav.sidebar .nav-link-heading {
display: flex;
flex-direction: column;
align-items: center;
}
nav.sidebar .nav-icon {
height: 50px;
width: 50px;
min-height: 50px;
min-width: 50px;
margin: 8px;
fill: #77838e;
position: relative;
}
nav.sidebar .active .nav-icon {
fill: #1d3142;
}
nav.sidebar .nav-item-disabled {
pointer-events: none;
cursor: default;
}
nav.sidebar .nav-item-hidden {
display: none;
}
hr {
color: var(--dark--gray);
margin: 20px 0;
}
.subject-search {
max-width: 600px;
position: relative;
}
.search-field-wrapper {
position: relative;
width: 500px;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.search-field-wrapper .input-wrapper {
margin: 0;
}
.search-result-list {
position: absolute;
top: 100%;
z-index: 100;
max-width: 500px;
margin-top: 0;
border: 1px solid #dfdfdf;
border-top: none;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 5px -1px #e8e8e8;
font-weight: 700;
padding: 15px 0;
max-height: 215px;
overflow-y: scroll;
}
.search-result {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
}
.search-result:focus,
.search-result:hover {
outline: none !important;
background-color: var(--light-green);
color: var(--menu-active-gray);
}
.search-result .search-nav {
display: flex;
cursor: default;
min-width: 431px;
padding: 24px 16px;
line-height: 0.7rem;
height: 100%;
width: 100%;
color: Black;
text-decoration: none;
justify-content: space-between;
}
.search-result .search-nav span::after {
opacity: 0;
content: '..';
}
.search-result .search-nav span:nth-child(1) {
flex: 150;
}
.search-result .search-nav span:nth-child(2) {
flex: 75;
text-align: center;
}
.search-result .search-nav span:nth-child(3) {
flex: 110;
text-align: center;
}
.search-result .search-nav span:nth-child(4) {
flex: 130;
text-align: center;
}
.search-result .search-nav:focus,
.search-result .search-nav:hover {
outline: none !important;
color: var(--menu-active-gray);
background-color: var(--light-green);
}
.search-result .search-nav.new-subject:focus,
.search-result .search-nav.new-subject:hover {
outline: none !important;
color: var(--menu-active-gray);
background-color: var(--light-green);
}
#modal-root {
display: flex;
width: 100%;
position: absolute;
z-index: 100;
}
main {
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
flex: 1;
padding: 0 1rem;
}
main .section-wrapper {
display: flex;
justify-content: space-between;
}
main .section-wrapper > section {
max-width: 50%;
flex: 1;
margin-right: 1rem;
}
main .section-wrapper > section:last-child {
margin: 0;
}
main .section-wrapper > section .section-heading {
display: flex;
justify-content: space-between;
margin-top: 1rem;
font-size: small;
line-height: 30px;
}
main .section-wrapper > section .section-heading:first-child {
margin-top: 0;
}
.exclamation-triangle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
padding: 0px 5px;
fill: #ff0000;
}
.loading-overlay {
padding: 2px;
border-radius: 100px;
position: absolute;
top: 45%;
left: 45%;
height: 80px;
width: 80px;
background-color: rgba(255, 255, 255, 0.3);
z-index: 9999;
}
:root {
--header-dark: #213140;
--sidebar-dark: #314355;
--gray: #e8eaec;
--light-gray: #f3f4f5;
--medium-gray: #77838e;
--dark-gray: #bcc1c5;
--extra-dark-gray: #606e7a;
--light-green: #cce3aa;
--dark-green: #477c02;
--gray-text: #bbc1c6;
--dark-text: rgba(0, 0, 0, 0.3);
--muted-pale-green: rgba(204, 227, 170, 0.4);
--muted-green: rgba(147, 172, 112, 0.9);
--muted-red: rgba(211, 97, 93, 0.65);
--muted-alternate: #b8b281;
--agp-below54: #5B1213;
--agp-below70: #ED1C24;
--agp-inTarget: #50b848;
--agp-above180: #FFBC00;
--agp-above250: #FF8B37;
--icon-active: #77838e;
--icon-inactive: --medium-gray;
--icon-background: rgba(0, 0, 0, 0);
--worklist-current: #bfeb90;
--worklist-review: #ffb8b8;
--worklist-followup: #f7f78c;
--worklist-runin: #cececd;
--button-negative-color: var(--muted-red);
--button-affirmative-color: var(--muted-green);
--button-alternate-color: var(--muted-alternate);
--menu-active-gray: #1d3142;
--menu-dark-gray: #4a5a68;
--menu-sub-green: #cfe9b3;
--menu-hover-sub-green: #e2f2d1;
--menu-light-gray: #77838e;
--menu-light-green: #b3e181;
--input-disabled--background: #ebebe4;
--input-disabled--color: #545454;
}
.icon-button {
background-color: var(--icon-background);
fill: var(--medium-gray);
border: none;
outline: none;
}
.icon-button:hover {
opacity: 0.85;
}
.icon-button:focus {
border: 2px solid var(--dark-gray);
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
button {
cursor: pointer;
}
.til-button {
padding: 1.2rem 0;
border: 1px solid var(--dark-gray);
width: 100%;
max-width: 15rem;
align-items: center;
justify-content: center;
border-radius: 5px;
font-weight: 700;
font-size: 0.6rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-right: 0.5rem;
color: white;
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: box-shadow 0.25s linear;
}
.til-button:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.23);
color: var(--menu-hover-sub-green);
}
.til-button:active {
outline: none;
box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.7);
}
.til-button:focus {
outline: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.23);
color: var(--menu-hover-sub-green);
}
.til-button:disabled {
box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.7);
background-color: #d3d3d3;
}
.til-button:disabled:hover {
color: white;
box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.7);
}
:root {
--fontDefault: 'avenir next', avenir, 'helvetica neue', helvetica, 'segoe ui', arial, sans-serif;
}
.app-title {
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: -0.05em;
margin-left: 1rem;
}
.screen-title {
color: var(--muted-green);
font-size: 2em;
margin-block-start: 1em;
margin-block-end: 0.5em;
}
.heading-message {
color: var(--dark-gray);
}
.callout-message {
color: var(--extra-dark-gray);
}
.warning-message {
color: var(--muted-red);
}
.input-wrapper {
margin: 1rem 0;
position: relative;
width: 100%;
}
.input-wrapper:focus + label {
font-weight: 900;
}
.field-error {
margin: 0.5rem;
margin-top: -0.7rem;
font-weight: 400;
color: red;
font-size: 0.9rem;
}
.field-label {
position: absolute;
top: -0.8rem;
left: 0.75rem;
z-index: 10;
background: white;
padding: 0 0.02rem;
font-size: 0.725rem;
line-height: 1.15rem;
font-weight: 700;
white-space: nowrap;
}
.field-label.odd {
background: var(--light-gray);
}
.dropdown-wrapper {
position: relative;
margin: 1rem 0;
}
.dropdown-selection-display {
margin-top: 0.5rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 2.375rem;
border: 0.0625rem solid #ccc;
border-radius: 0.625rem;
cursor: default;
position: relative;
background-color: #fff;
padding-right: 0.5rem;
}
.dropdown-selection-display:focus {
border: 0.0625rem solid #ccc;
background: var(--light-gray);
}
.dropdown-selection-display-disabled {
background: var(--input-disabled--background);
color: var(--input-disabled--color);
}
.dropdown-selection-value {
font-size: 0.8rem;
margin: 0.125rem 1.25rem;
margin-right: 1.25rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.dropdown-selection-value.empty {
color: var(--muted-green);
}
.dropdown-options-list {
z-index: 101;
z-index: 100;
margin: 0;
position: absolute;
width: auto;
border: 0.0625rem solid #dfdfdf;
border-top: none;
border-bottom-right-radius: 0.19rem;
border-bottom-left-radius: 0.19rem;
background-color: #fff;
box-shadow: 0 0.125rem 0.3125rem -0.0625rem #e8e8e8;
font-weight: 700;
padding: 0.94rem 0;
max-height: 13rem;
overflow-y: scroll;
}
.dropdown-option {
font-size: 0.8rem;
width: 100%;
padding: 0.5rem 0.625rem;
line-height: 1.6rem;
cursor: default;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
.dropdown-option:focus,
.dropdown-option:hover {
background-color: var(--light-green);
color: var(--menu-active-gray);
outline: none !important;
}
.dropdown-wrapper.mini {
margin: 0;
}
.dropdown-wrapper.mini .dropdown-selection-display {
height: 2.1875rem;
margin: 0;
}
.detached-label {
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 0.3125rem;
}
.section-heading {
background: var(--menu-sub-green);
font-size: 0.94rem;
line-height: 1.5rem;
color: var(--muted-alternate);
padding: 0 1rem;
margin: 0;
}
.section-heading span {
text-transform: uppercase;
}
.til-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.til-form fieldset {
flex-grow: 1;
flex: 1;
min-width: 40%;
max-width: 100%;
padding: 0;
border: 0;
}
.til-form fieldset h6 {
background: var(--menu-sub-green);
font-size: 0.94rem;
line-height: 1.5rem;
color: var(--muted-alternate);
padding: 0 1rem;
margin: 0;
}
.til-form fieldset h6 span {
text-transform: uppercase;
}
.til-form fieldset .field-wrapper {
width: 60%;
align-items: baseline;
}
.til-form fieldset .field-wrapper span::after {
margin: 0 -1rem;
}
@media only screen and (max-width: 600px) {
.til-form fieldset .field-wrapper {
width: 100%;
}
}
.til-form fieldset .field-grid--row {
display: flex;
border-bottom: 0.0625rem solid var(--dark-gray);
}
.til-form fieldset .field-grid--cell {
font-size: 0.9rem;
flex: 4;
padding: 0 1rem 0 0;
margin: 0 0.5rem 0 0;
border-right: 0.0625rem solid var(--dark-gray);
min-width: 12rem;
/* Chrome, Safari, Edge, Opera */
}
.til-form fieldset .field-grid--cell:last-child {
border-right: none;
flex-grow: 2;
}
.til-form fieldset .field-grid--cell input::-webkit-outer-spin-button,
.til-form fieldset .field-grid--cell input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.til-input {
background-color: #fff;
display: inline-block;
height: 3rem;
width: 100%;
outline: none;
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.8rem;
border: solid 0.0625rem #ccc;
border-radius: 0.625rem;
padding-left: 1.1875rem;
box-sizing: border-box;
}
.til-input::placeholder {
color: var(--dark-green);
}
.til-input:hover,
.til-input:focus {
outline: none !important;
border: 0.0625rem solid var(--dark-gray);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.til-input:disabled {
background: var(--input-disabled--background);
color: var(--input-disabled--color);
}
.til-input[type='date']::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
.input-wrapper.mini {
width: auto;
margin: 0;
}
.input-wrapper.mini .til-input {
height: 2.1875rem;
}
.til-check {
opacity: 0;
margin-left: -0.4rem;
}
.til-check + label {
opacity: 100;
margin-left: -0.45rem;
}
.til-check + label span {
display: inline-block;
font-weight: normal;
position: relative;
line-height: normal;
font-size: 0.9rem;
}
.til-check + label span::before {
content: '';
position: relative;
display: inline-block;
width: 0.8rem;
height: 0.8rem;
top: 0.19rem;
line-height: 0.8rem;
max-width: 0.8rem;
max-height: 0.8rem;
border: 0.125rem solid #7e8c8f;
border-radius: 0.19rem;
box-shadow: inset 0 0.0625rem 0.19rem rgba(0, 0, 0, 0.3);
background: #abd276;
margin-right: 0.5rem;
}
.til-check:focus + label span::before {
border: 0.125rem solid black;
}
.til-check:checked + label span::after {
position: absolute;
content: '✔';
top: 0;
left: 1.2rem;
}
.til-check:disabled + label span::after {
color: var(--dark-gray);
}
.til-check:disabled + label span::before {
border-color: var(--light-gray);
border-radius: 0.19rem;
box-shadow: inset 0 0.0625rem 0.19rem rgba(0, 0, 0, 0.3);
background: var(--gray);
}
.til-text {
height: 100%;
padding-top: 0.5rem;
}
.elevate-1 {
box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.7);
}
.elevate-2 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.elevate-3 {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.23);
}
.tooltip {
display: inline-block;
position: relative;
border-bottom: 1px dotted #666;
text-align: left;
width: 100%;
}
.tooltip .top {
min-width: 200px;
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.tooltip:hover .top {
display: block;
}
.tooltip .top i {
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.tooltip .top i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .bottom {
min-width: 200px;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.tooltip:hover .bottom {
display: block;
}
.tooltip .bottom i {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.tooltip .bottom i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .right {
min-width: 200px;
top: 50%;
left: 100%;
margin-left: 20px;
transform: translate(0, -50%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.tooltip:hover .right {
display: block;
}
.tooltip .right i {
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
height: 24px;
overflow: hidden;
}
.tooltip .right i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
transform: translate(50%, -50%) rotate(-45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .left {
min-width: 200px;
top: 50%;
right: 100%;
margin-right: 20px;
transform: translate(0, -50%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.tooltip:hover .left {
display: block;
}
.tooltip .left i {
position: absolute;
top: 50%;
left: 100%;
margin-top: -12px;
width: 12px;
height: 24px;
overflow: hidden;
}
.tooltip .left i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .top {
min-width: 200px;
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.tooltip:hover .top {
display: block;
}
.tooltip .top i {
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.tooltip .top i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.login-wrapper {
background-color: #333;
display: flex;
height: 100%;
width: 100%;
align-items: center;
align-content: center;
justify-content: center;
}
@media only screen and (max-width: 600px) {
.login-wrapper {
padding: 0px 8px;
}
}
.login-wrapper .login-card {
display: flex;
flex-direction: column;
background-color: #eee;
width: 40%;
}
@media only screen and (max-width: 600px) {
.login-wrapper .login-card {
width: 100%;
}
}
@media only screen and (min-width: 600px) {
.login-wrapper .login-card {
width: 55%;
}
}
@media only screen and (min-width: 1200px) {
.login-wrapper .login-card {
width: 35%;
}
}
.login-wrapper header {
display: flex;
justify-content: flex-start;
align-items: center;
outline: 1px solid;
height: 4rem;
width: 100%;
background-color: #eee;
}
.login-wrapper header .icon-wrapper {
display: flex;
justify-content: center;
height: 4rem;
width: 8rem;
display: inline-block;
align-items: center;
flex-basis: 100px;
text-decoration: none;
border: 1px solid black;
border-radius: 4px;
color: white;
outline: none;
height: 50px;
border: none;
padding: 0;
}
.login-wrapper header .icon-wrapper:hover {
opacity: 0.75;
}
.login-wrapper header .login-title {
font-size: large;
font-weight: inherit;
padding: 0.75rem;
}
.login-wrapper .screen-loading {
color: var(--muted-green);
font-size: 1.5em;
font-weight: inherit;
margin-block-start: 1em;
margin-block-end: 0.5em;
}
.login-wrapper footer {
display: flex;
flex-direction: column;
padding: 0.5rem;
justify-content: center;
align-items: center;
outline: 1px solid;
height: 4rem;
width: 100%;
background-color: #eee;
}
.login-wrapper section {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
}
.login-wrapper section .input-field {
-webkit-appearance: none;
-moz-appearance: none;
border-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.2);
padding: 0.5rem;
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
.main--subject {
max-width: 65rem;
}
.main--subject .recommendationDetails {
display: flex;
justify-content: flex-start;
flex: 2;
flex-direction: column;
}
.main--subject .recommendationDetails .spacer {
font-weight: bold;
padding: 0.5rem 0;
}
.main--subject .banner-header .buttonContainer {
display: flex;
flex: 1;
padding: 1rem;
}
.main--subject summary {
background-color: var(--menu-light-green);
color: var(--header-dark);
font-size: 1em;
font-weight: bolder;
padding: 0.5em;
margin: 0.5em 0;
cursor: pointer;
}
.main--subject .banner-header {
display: flex;
border: 3px solid var(--worklist-review);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
margin: 15px;
padding: 15px;
}
.main--subject .til-form fieldset .row {
display: flex;
flex-direction: row;
gap: 10px 10px;
}
@media only screen and (max-width: 600px) {
.main--subject .til-form fieldset .row {
flex-wrap: wrap;
}
}
.alert-banner {
padding: 15px;
}
.main--home {
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
max-width: 65rem;
padding: 0 1rem;
box-sizing: border-box;
}
.worklist-table-wrapper {
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
box-sizing: border-box;
background-color: White;
}
.wordwrap {
font-weight: bold;
font-size: 0.7rem;
color: var(--menu-dark-gray);
white-space: pre-line !important;
word-wrap: break-word;
display: flex;
align-items: flex-end;
justify-content: center;
}
.noseeum {
all: unset !important;
visibility: hidden;
box-shadow: none;
width: 0;
}
.left-header {
justify-content: flex-start;
}
.rt-resizer {
width: 1px !important;
right: 0px !important;
}
.cell-wrap {
white-space: pre-line !important;
word-wrap: break-word;
display: flex;
justify-content: flex-start;
}
.Review {
background-color: var(--worklist-review);
}
.Follow-Up {
background-color: var(--worklist-followup);
}
.shade-group {
background-color: var(--muted-pale-green);
}
.thist-Manual,
.thist-Notified {
background-color: var(--worklist-current);
}
.thist-Skipped,
.thist-Declined {
background-color: var(--worklist-runin);
}
.fill-width {
display: flex;
}
.fill-width > div {
flex: 1;
}
.create-button {
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
text-align: right;
}
.form-controls {
display: flex;
justify-content: center;
width: 65vw;
margin-top: 1rem;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-weight: 700 !important;
font-size: 1.2em;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-default {
border-color: #ddd;
}
.panel-default > .panel-heading {
color: #333333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #333333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ddd;
}
.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}
.panel-body:after {
clear: both;
}
.glucose-statistics .glucose-label {
font-size: 1.1em;
font-weight: 700;
}
.glucose-statistics .reading {
font-size: 1.5em;
font-weight: 800;
}
.glucose-statistics .units {
font-size: 1em;
font-weight: 700;
padding-left: 0.2rem;
}
.glucose-statistics .header-sub-text {
font-size: 0.8em;
color: black;
opacity: 0.5;
}
.glucose-statistics .sub-text {
font-size: 0.8em;
color: black;
opacity: 0.5;
}
.glucose-statistics .side-text {
padding-left: 0.2rem;
}
.glucose-statistics .gmi-section {
padding: 10px 15px 10px 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: -15px;
margin-left: -15px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.consideration-panel .panel-body,
.row {
padding-bottom: 0px !important;
}
.consideration-panel .mip-label {
font-size: 1.1em;
font-weight: 700;
padding-left: 10px;
}
.consideration-panel .column {
padding-left: 5px;
}
.consideration-panel .mip-consideration {
display: inline-block;
padding-left: 10px;
}
.consideration-panel .mip-consideration span {
display: inline-block;
font-family: Arial;
font-size: 0.8em;
font-weight: 700;
background-color: rgb(220 223 227);
padding: 3px 10px;
border-radius: 3px;
margin-right: 5px;
}
.consideration-panel .mip-heading {
display: inline-block;
font-size: 0.9em;
font-weight: 700;
color: rgb(57 157 236);
padding: 0px 10px 3px 10px;
}
.consideration-panel .mip-lifestyle-statement {
font-size: 0.8em;
padding: 0px 10px 7px 10px;
}
.consideration-panel .mip-low-excursion {
font-size: 0.8em;
padding: 15px 10px 3px 10px;
}
.consideration-panel .mip-list {
font-size: 0.9em;
padding: 0px 20px 0px 10px;
}
.consideration-panel .mip-list ul {
padding: 0px 20px;
}
.consideration-panel .mip-list li {
padding: 2px 0px;
}
.shortLink {
font-size: 1em;
color: rgb(1 173 173);
font-weight: 700;
}
.dateRange {
font-size: 1em;
color: #747474;
font-weight: 700;
margin-bottom: 10px;
}
.tir-chart {
font-family: Arial;
}
.tir-panel .header-sub-text {
font-size: 0.8em;
color: black;
opacity: 0.5;
}
.report {
text-align: center;
display: inline-block;
position: relative;
width: 100%;
padding-bottom: -20%;
vertical-align: top;
overflow: hidden;
}
.graph {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.line {
fill: none;
stroke: #ffab00;
stroke-width: 2;
}
.combined-value {
opacity: 0.4;
fill: black;
font-size: 11px;
font-weight: 700;
}
.bracket-path {
opacity: 0.4;
}
.tir-panel {
min-width: 360px !important;
}
.tir-panel .panel-body {
padding: 5px 15px 0px 0px !important;
text-align: center;
}
.tir-panel .sub-text {
font-size: 0.8em;
color: rgb(173 173 173);
}
/* Chart Start */
.gpi-report {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 80%;
vertical-align: middle;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gpi-report .report {
display: inline-block;
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.gpi-report .graph {
cursor: pointer;
}
.gpi-report .chart {
cursor: pointer;
}
.row-no-padding {
margin-left: 0;
margin-right: 0;
padding: 0 !important;
}
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
.quick-report {
width: 100%;
height: 100%;
padding: 30px;
overflow: auto;
}
.quick-report .header {
width: 100%;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
align-items: center;
column-gap: 20px;
}
.quick-report-heading {
display: inline-block;
flex-grow: 2;
margin-top: 0;
color: var(--muted-alternate);
}
.clear {
clear: both;
}
.column {
float: left;
width: 50%;
}
.column-right-padding {
padding-right: 1%;
}
.column-left-padding {
padding-left: 1%;
}
@media print {
@page {
size: portrait;
}
.glucose-statistics .gmi-section {
padding: 10px 0px 10px 0px;
margin-right: 0px;
margin-left: 0px;
}
}
/* Char end */
@media screen and (max-width: 667px) {
.row {
margin: auto;
padding: 0px 10px 0px 10px;
}
.column {
float: none;
width: 100%;
}
.column-right-padding {
padding-right: 0px;
}
.column-left-padding {
padding-left: 0px;
}
.row .report-panel {
padding: 0px;
}
.body-content {
padding-right: 0px;
padding-left: 0px;
}
.glucose-statistics .header-sub-text {
float: none !important;
}
.tir-panel .header-sub-text {
float: none !important;
}
}
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 860px) {
.row {
margin: auto;
padding: 0px 10px 0px 10px;
}
.quick-report .header button {
display: none;
}
.column {
float: none;
width: 100%;
}
/* Hide captions */
.carousel-caption {
display: none;
}
.column-right-padding {
padding-right: 0px;
}
.column-left-padding {
padding-left: 0px;
}
.dashboard {
padding-right: 0px;
padding-left: 0px;
}
.body-content {
padding-right: 0px;
padding-left: 0px;
}
.row .report-panel {
padding: 0px;
}
.glucose-statistics .header-sub-text {
float: none !important;
}
.tir-panel .header-sub-text {
float: none !important;
}
}
@media only print {
header,
nav,
footer {
display: none !important;
}
section {
width: auto !important;
border: 0 !important;
}
button {
display: none !important;
}
.summary-wrapper {
border: 0 !important;
}
}