
/*--------------------*\
      UTILS 
\*--------------------*/

.btn::before {
    content: none !important;
}

.btn::after{
    content: none !important;
}

.flex-grow {
    flex-grow: 1;
}

.justify-end {
    justify-content: flex-end;
}

.align-end {
    align-content: flex-end;
}

.btn > a {
    color: #fff;
}

.mono {
    font-family: monospace !important;
}

.full-height {
    height: 100% !important;
}

.btn.primary:disabled {
    background-color: #bbb;
    border-color: #bbb;
    cursor: default;
}

.btn.make-link:disabled {
    color: #bbb;
    cursor: default;
}


.label {
    color: #555;
    font-size: 13px;
    margin-bottom: 3px;
}

.tile {
    border: 1px solid #ddd;
    padding: 10px;
}

.site-container {
    -webkit-transition: width 0.1s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: width 0.1s ease-in-out;
}


/*--------------------*\
      TABS 
\*--------------------*/

.tabs {
    display: grid;
    max-height: none;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    border-radius: inherit;
}

    .tab {
        align-items: center;
        background: #f2f2f2;
        border: 1px solid #ddd;
        border-width: 0px 1px 1px 0px;
        color: #126cd3;
        cursor: pointer;
        display: flex;
        flex: 1 1 auto;
        font-size: 12px;
        justify-content: center;
        padding: 6px 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        white-space: nowrap;
        border-radius: inherit;
    }

        .tab--is-selected {
            -webkit-font-smoothing: antialiased;
            background-color: #126cd3;
            border-color: #126cd3;
            color: #fff;
        }

        .tab--is-empty {
            border: none;
            color: initial;
            cursor: initial;
            background: inherit;
        }



/*--------------------*\
      LOADING 
\*--------------------*/

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

.loading-dots {
    font-size: 2em;
    line-height: 0.35em;
}

.loading-dot {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

    .loading-dots .loading-dot:nth-child(2) {
        animation-delay: .2s;
    }

    .loading-dots .loading-dot:nth-child(3) {
        animation-delay: .4s;
    }


/*--------------------*\
      TABLE
\*--------------------*/

.table {
    font-family: "Open Sans", Arial, sans-serif;
}

.table-header {
    color: #fff;
    background: #555;
    border-color: #888;
    font-size: 12px;
    font-weight: 700;
    min-height: 36px;
    line-height: 36px;     
}

    .table-header__data {
        text-align: center !important;
        vertical-align: middle;
        padding: 0px 7px !important;
    }

.table-row-header {
    color: #222;
    background: #ddd;
    font-size: 15px;
    font-weight: 700;
    line-height: 27px;     
    cursor: pointer;
    border: 1px solid #ddd;
}    

    .table-row-header--minimal {
        background: #fff;
    }   

    .table-row-header__data {
        display: flex;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        padding: 0px 7px !important;
        justify-content: center;
    }

    .table-row-header__data--first {
        text-align: left !important;
        justify-content: left;
    }

    .table-row-header__data--sort-asc {
        border-bottom: 3px solid #4393ef;
        color: #126cd3;
    }

    .table-row-header__data--sort-desc {
        border-top: 3px solid #4393ef;
        color: #126cd3;
    }

    
.table-row {
    grid-column: 1/-1;
    z-index: 0;
}
    
    .table-row__data {
        display: flex;
        flex-grow: 1;
        line-height: 25px;
        font-size: 12px;
        padding: 0px 7px !important;
        justify-content: center;
        border-bottom: 1px solid #ddd;
        z-index: 1;
    }

    .table-row__data:hover ~ .table-row {
        background-color: #d1e4fa;
    }

    .table-row__data:hover ~ .table-row + .table-row__data ~ .table-row {
        background-color: transparent;
    }

    .table-row__data--minimal {
        border: none !important;
    }

    .table-row__data--first {
        text-align: left !important;
        justify-content: left;
        border-left: 1px solid #ddd;
    }

    .table-row__data--last {
        border-right: 1px solid #ddd;
    }



/*--------------------*\
      GRID EXTENTIONS
\*--------------------*/


[class~="grid"] > [class*="_col-0"],
[class*="grid-"] > [class*="_col-0"],
[class*="grid_"] > [class*="_col-0"] {
    display: none; }

.text-1 { font-size: 0.08333em !important;}
.text-2 {  font-size: 0.16667em !important; }
.text-3 { font-size: 0.25em !important; }
.text-4 { font-size: 0.3333em !important; }
.text-5 { font-size: 0.41667em !important; }
.text-6 { font-size: 0.5em !important; }
.text-7 { font-size: 0.58333em !important; }
.text-8 { font-size: 0.6667em !important; }
.text-9 { font-size: 0.75em !important; }
.text-10 { font-size: 0.83333em !important; }
.text-11 { font-size: 0.91667em !important; }
.text-12 { font-size: 1em !important; }

@media screen and (max-width: 980px ) {

    [class~="grid"] > [class*="_lg-0"],
    [class*="grid-"] > [class*="_lg-0"],
    [class*="grid_"] > [class*="_lg-0"] {
        display: none; }

    [class~="grid"] > [class*="_lg-1"],
    [class*="grid-"] > [class*="_lg-1"],
    [class*="grid_"] > [class*="_lg-1"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-2"],
    [class*="grid-"] > [class*="_lg-2"],
    [class*="grid_"] > [class*="_lg-2"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-3"],
    [class*="grid-"] > [class*="_lg-3"],
    [class*="grid_"] > [class*="_lg-3"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-4"],
    [class*="grid-"] > [class*="_lg-4"],
    [class*="grid_"] > [class*="_lg-4"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-5"],
    [class*="grid-"] > [class*="_lg-5"],
    [class*="grid_"] > [class*="_lg-5"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-6"],
    [class*="grid-"] > [class*="_lg-6"],
    [class*="grid_"] > [class*="_lg-6"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-7"],
    [class*="grid-"] > [class*="_lg-7"],
    [class*="grid_"] > [class*="_lg-7"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-8"],
    [class*="grid-"] > [class*="_lg-8"],
    [class*="grid_"] > [class*="_lg-8"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-9"],
    [class*="grid-"] > [class*="_lg-9"],
    [class*="grid_"] > [class*="_lg-9"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-10"],
    [class*="grid-"] > [class*="_lg-10"],
    [class*="grid_"] > [class*="_lg-10"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-11"],
    [class*="grid-"] > [class*="_lg-11"],
    [class*="grid_"] > [class*="_lg-11"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-12"],
    [class*="grid-"] > [class*="_lg-12"],
    [class*="grid_"] > [class*="_lg-12"] {
        display: initial; }

    .lg-text-1 { font-size: 0.08333em !important; }
    .lg-text-2  { font-size: 0.16667em !important; }
    .lg-text-3 { font-size: 0.25em !important; }
    .lg-text-4 { font-size: 0.3333em !important; }
    .lg-text-5 { font-size: 0.41667em !important; }
    .lg-text-6 { font-size: 0.5em !important; }
    .lg-text-7 { font-size: 0.58333em !important; }
    .lg-text-8 { font-size: 0.6667em !important; }
    .lg-text-9 { font-size: 0.75em !important; }
    .lg-text-10 { font-size: 0.83333em !important; }
    .lg-text-11 { font-size: 0.91667em !important; }
    .lg-text-12 { font-size: 1em !important; }
}

@media screen and (max-width: 760px ) {

    [class~="grid"] > [class*="_md-0"],
    [class*="grid-"] > [class*="_md-0"],
    [class*="grid_"] > [class*="_md-0"] {
        display: none; }

    [class~="grid"] > [class*="_md-1"],
    [class*="grid-"] > [class*="_md-1"],
    [class*="grid_"] > [class*="_md-1"] {
        display: initial; }

    [class~="grid"] > [class*="_md-2"],
    [class*="grid-"] > [class*="_md-2"],
    [class*="grid_"] > [class*="_md-2"] {
        display: initial; }

    [class~="grid"] > [class*="_md-3"],
    [class*="grid-"] > [class*="_md-3"],
    [class*="grid_"] > [class*="_md-3"] {
        display: initial; }

    [class~="grid"] > [class*="_md-4"],
    [class*="grid-"] > [class*="_md-4"],
    [class*="grid_"] > [class*="_md-4"] {
        display: initial; }

    [class~="grid"] > [class*="_md-5"],
    [class*="grid-"] > [class*="_md-5"],
    [class*="grid_"] > [class*="_md-5"] {
        display: initial; }

    [class~="grid"] > [class*="_md-6"],
    [class*="grid-"] > [class*="_md-6"],
    [class*="grid_"] > [class*="_md-6"] {
        display: initial; }

    [class~="grid"] > [class*="_md-7"],
    [class*="grid-"] > [class*="_md-7"],
    [class*="grid_"] > [class*="_md-7"] {
        display: initial; }

    [class~="grid"] > [class*="_md-8"],
    [class*="grid-"] > [class*="_md-8"],
    [class*="grid_"] > [class*="_md-8"] {
        display: initial; }

    [class~="grid"] > [class*="_md-9"],
    [class*="grid-"] > [class*="_md-9"],
    [class*="grid_"] > [class*="_md-9"] {
        display: initial; }

    [class~="grid"] > [class*="_md-10"],
    [class*="grid-"] > [class*="_md-10"],
    [class*="grid_"] > [class*="_md-10"] {
        display: initial; }

    [class~="grid"] > [class*="_md-11"],
    [class*="grid-"] > [class*="_md-11"],
    [class*="grid_"] > [class*="_md-11"] {
        display: initial; }

    [class~="grid"] > [class*="_md-12"],
    [class*="grid-"] > [class*="_md-12"],
    [class*="grid_"] > [class*="_md-12"] {
        display: initial; }

    .md-text-1 { font-size: 0.08333em !important; }
    .md-text-2  { font-size: 0.16667em !important; }
    .md-text-3 { font-size: 0.25em !important; }
    .md-text-4 { font-size: 0.3333em !important; }
    .md-text-5 { font-size: 0.41667em !important; }
    .md-text-6 { font-size: 0.5em !important; }
    .md-text-7 { font-size: 0.58333em !important; }
    .md-text-8 { font-size: 0.6667em !important; }
    .md-text-9 { font-size: 0.75em !important; }
    .md-text-10 { font-size: 0.83333em !important; }
    .md-text-11 { font-size: 0.91667em !important; }
    .md-text-12 { font-size: 1em !important; }
}

@media screen and (max-width: 540px ) {

    [class~="grid"] > [class*="_sm-0"],
    [class*="grid-"] > [class*="_sm-0"],
    [class*="grid_"] > [class*="_sm-0"] {
        display: none; }

    [class~="grid"] > [class*="_sm-1"],
    [class*="grid-"] > [class*="_sm-1"],
    [class*="grid_"] > [class*="_sm-1"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-2"],
    [class*="grid-"] > [class*="_sm-2"],
    [class*="grid_"] > [class*="_sm-2"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-3"],
    [class*="grid-"] > [class*="_sm-3"],
    [class*="grid_"] > [class*="_sm-3"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-4"],
    [class*="grid-"] > [class*="_sm-4"],
    [class*="grid_"] > [class*="_sm-4"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-5"],
    [class*="grid-"] > [class*="_sm-5"],
    [class*="grid_"] > [class*="_sm-5"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-6"],
    [class*="grid-"] > [class*="_sm-6"],
    [class*="grid_"] > [class*="_sm-6"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-7"],
    [class*="grid-"] > [class*="_sm-7"],
    [class*="grid_"] > [class*="_sm-7"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-8"],
    [class*="grid-"] > [class*="_sm-8"],
    [class*="grid_"] > [class*="_sm-8"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-9"],
    [class*="grid-"] > [class*="_sm-9"],
    [class*="grid_"] > [class*="_sm-9"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-10"],
    [class*="grid-"] > [class*="_sm-10"],
    [class*="grid_"] > [class*="_sm-10"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-11"],
    [class*="grid-"] > [class*="_sm-11"],
    [class*="grid_"] > [class*="_sm-11"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-12"],
    [class*="grid-"] > [class*="_sm-12"],
    [class*="grid_"] > [class*="_sm-12"] {
        display: initial; }

    .sm-text-1 { font-size: 0.08333em !important; }
    .sm-text-2  { font-size: 0.16667em !important; }
    .sm-text-3 { font-size: 0.25em !important; }
    .sm-text-4 { font-size: 0.3333em !important; }
    .sm-text-5 { font-size: 0.41667em !important; }
    .sm-text-6 { font-size: 0.5em !important; }
    .sm-text-7 { font-size: 0.58333em !important; }
    .sm-text-8 { font-size: 0.6667em !important; }
    .sm-text-9 { font-size: 0.75em !important; }
    .sm-text-10 { font-size: 0.83333em !important; }
    .sm-text-11 { font-size: 0.91667em !important; }
    .sm-text-12 { font-size: 1em !important; }
}

@media screen and (max-width: 400px ) {

    .site-container-width {
        width: 100%;
    }

    [class~="grid"] > [class*="_xs-0"],
    [class*="grid-"] > [class*="_xs-0"],
    [class*="grid_"] > [class*="_xs-0"] {
        display: none; }

    [class~="grid"] > [class*="_xs-1"],
    [class*="grid-"] > [class*="_xs-1"],
    [class*="grid_"] > [class*="_xs-1"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-2"],
    [class*="grid-"] > [class*="_xs-2"],
    [class*="grid_"] > [class*="_xs-2"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-3"],
    [class*="grid-"] > [class*="_xs-3"],
    [class*="grid_"] > [class*="_xs-3"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-4"],
    [class*="grid-"] > [class*="_xs-4"],
    [class*="grid_"] > [class*="_xs-4"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-5"],
    [class*="grid-"] > [class*="_xs-5"],
    [class*="grid_"] > [class*="_xs-5"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-6"],
    [class*="grid-"] > [class*="_xs-6"],
    [class*="grid_"] > [class*="_xs-6"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-7"],
    [class*="grid-"] > [class*="_xs-7"],
    [class*="grid_"] > [class*="_xs-7"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-8"],
    [class*="grid-"] > [class*="_xs-8"],
    [class*="grid_"] > [class*="_xs-8"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-9"],
    [class*="grid-"] > [class*="_xs-9"],
    [class*="grid_"] > [class*="_xs-9"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-10"],
    [class*="grid-"] > [class*="_xs-10"],
    [class*="grid_"] > [class*="_xs-10"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-11"],
    [class*="grid-"] > [class*="_xs-11"],
    [class*="grid_"] > [class*="_xs-11"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-12"],
    [class*="grid-"] > [class*="_xs-12"],
    [class*="grid_"] > [class*="_xs-12"] {
        display: initial; }

    .xs-text-1 { font-size: 0.08333em !important; }
    .xs-text-2  { font-size: 0.16667em !important; }
    .xs-text-3 { font-size: 0.25em !important; }
    .xs-text-4 { font-size: 0.3333em !important; }
    .xs-text-5 { font-size: 0.41667em !important; }
    .xs-text-6 { font-size: 0.5em !important; }
    .xs-text-7 { font-size: 0.58333em !important; }
    .xs-text-8 { font-size: 0.6667em !important; }
    .xs-text-9 { font-size: 0.75em !important; }
    .xs-text-10 { font-size: 0.83333em !important; }
    .xs-text-11 { font-size: 0.91667em !important; }
    .xs-text-12 { font-size: 1em !important; }
}


/*--------------------*\
      MODAL
\*--------------------*/

.cta-modal__container{
    /* Premium Fence */
    width: 348px;
    height: fit-content;

    background: #FFFFFF;
    /* shadow-lg */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 12px;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cta-modal__background{
    /* Vector */
    position: absolute;
    width: 100%;
    height: 200px;
    z-index: -1;
    border-radius: 12px;
    flex-shrink: 0;
    margin-top: -10px;
}

.cta-modal__logo{
    padding-top: 26px;
}

.cta-modal{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-modal__icon{
    padding-top: 12px;
    height: 99px;
    width: 99px;
}

.cta-modal__header{
    padding-top: 24px;
    font-size: 16px;
}

.cta-modal__list{
    padding-top: 24px;
    font-size: 12px;
    color: var(--color-grey-33, #555);
}

    .cta-modal__list div{
        padding-top: 8px;
        line-height: 150%;
    }

.cta-modal__bullet svg{
    color: #126ace;
    height: 18px;
    margin-right: 8px;

}

.cta-modal__button{
    padding: 32px 0 39px;
}

.cta-modal__button a.btn.primary{
    color: #fff;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 0px;

    width: 280px;
    height: 43px;

    background: #1D9600;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.cta-modal__close{
    height: 20px;
    width: 20px;
    position: absolute;
    right: 22px;
    top: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
