@font-face {
    font-family : Josefin;
    font-style  : normal;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-regular.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-regular.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-regular.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-regular.ttf')   format('truetype'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-regular.svg')   format('svg');
}
@font-face {
    font-family : Josefin;
    font-weight : 200;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200.svg')   format('svg');
}
@font-face {
    font-family : Josefin;
    font-weight : 300;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-300.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-300.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-300.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-300.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-300.svg')   format('svg');
}

@font-face {
    font-family : Josefin;
    font-weight : bold;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700.svg')   format('svg');
}

@font-face {
    font-family : Josefin;
    font-style  : italic;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-italic.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-italic.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-italic.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-italic.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-italic.svg')   format('svg');
}
@font-face {
    font-family : Josefin;
    font-style  : italic;
    font-weight : 200;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200italic.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200italic.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200italic.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200italic.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-200italic.svg')   format('svg');
}
@font-face {
    font-family : Josefin;
    font-style  : italic;
    font-weight : bold;
    font-display: swap;
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700italic.eot');
    src : url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700italic.woff2') format('woff2'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700italic.woff')  format('woff'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700italic.ttf')   format('ttf'),
          url('//static.cirrux.net/fonts/josefin-sans-v17-latin-700italic.svg')   format('svg');
}



body {
    height      : calc(100vh - 40px);
    margin      : 0;
    padding-top : 40px;

    font-family : Josefin, Helvetica, "Segoe UI", Segoe, Verdana, sans-serif;
    font-size   : 16px;

    color       : #333;
}



/************************************
 * Header Section
 ***********************************/
.cxn-header {
    position: fixed;
    top     : 0;
    left    : 0;
    right   : 0;

    display : flex;
    justify-content : space-between;

    height  : 40px;
    padding : 0 30px;

    color   : #FFF;
    background-color: #4D4D4D;
}

.cxn-header .cxn-brand {
    display     : flex;
    align-items : center;

    height      : 100%;
}

.cxn-header .cxn-brand a {
    padding-top     : 3px;

    color           : inherit;
    text-decoration : none;
}

.cxn-header .cxn-brand .cxn-brand-text {
    font-size       : 1.5rem;
}

.cxn-header .cxn-nav-wrapper .cxn-login-button {
    display         : flex;
    align-items     : center;

    height          : 100%;
}

.cxn-login-link {
    color           : inherit;
    text-decoration : none;
}


/************************************
 * Modals General
 ***********************************/

.modal {
    display         : none;

    position        : fixed;
    top             : 0;
    bottom          : 0;
    left            : 0;
    right           : 0;

    opacity         : 0;

    transition      : opacity .15s linear;

    z-index         : 999;
}
.modal.show {
    display         : block;
}
.modal-open .modal {
    opacity         : 1;

    overflow-x      : hidden;
    overflow-y      : auto;
}

.modal-container {
    position        : relative;

    width           : auto;
    max-width       : 400px;
    margin          : 2rem auto;

    transform       : translate(0,0);
    transition      : transform .3s ease-out,
                      -webkit-transform .3s ease-out;
}
@media only screen and (max-width: 440px) {
    .modal-container {
        margin      : 2rem 20px;
    }
}


.modal-content {
    display         : flex;
    flex-direction  : column;

    position        : relative;

    width           : 100%;

    background-color: #FFF;
    border          : 1px solid rgba(0,0,0,0.2);
    border-radius   : .3rem;
}

.modal-content .modal-header .close {
    float           : right;

    padding         : 3px;
    margin-right    : -1rem -1rem -1rem auto;

    font-size       : 1.5rem;
    
    cursor          : pointer;

    border          : 0;
    border-style    : none;
    background-color: transparent;
}


.modal-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;

    padding         : 5px 12px;

    border-bottom   : 1px solid #CCC;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
    margin          : 0;
}

.modal-body {
    flex            : 1 1 auto;

    position        : relative;

    padding         : 7px 12px;
}
.modal-body:last-of-type {
    padding-bottom  : 12px;
}

.modal-footer {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;

    padding         : 5px 12px;
}

/*** Default modal backdrop ***/
#backdrop {
    display         : none;

    position        : fixed;
    top             : 0;
    bottom          : 0;
    left            : 0;
    right           : 0;

    opacity         : 0;
    background-color: #000;

    transition      : opacity .15s linear;

    z-index         : 998;
}
#backdrop.show {
    display         : block;
}
body.modal-open #backdrop {
    opacity         : 0.5;
}



/************************************
 * Modal - Login
 ***********************************/

.modal .cxn-login-header {
    font-size       : 1.3em;
    font-weight     : bold;

    background-color: #EEE;
}

#cxn-login-form .login-field-group:not(:last-of-type) {
    padding-bottom  : 8px;
}

#cxn-login-form label {
    font-size       : 0.8em;
    font-style      : italic;
}

#cxn-login-form input,
#cxn-login-form button {
    font-family     : Josefin, Helvetica, "Segoe UI", Segoe, Verdana, sans-serif;
    font-weight     : 300;
}

#cxn-login-form input {
    display         : flex;

    width           : 100%;

    /* border          : 1px solid rgba(0,0,0,0.2); */
    border          : none;
    border-bottom   : 1px solid rgba(0,0,0,0.2);
}

#cxn-login-form input.invalid {
    border          : 2px solid red;
}

#cxn-login-form input:focus {
    outline         : none;
}