@font-face {
    font-family: nexa;
    src: url('nexaLight.woff');
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../font/glyphicons-halflings-regular.eot);
    src: url(../font/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../font/glyphicons-halflings-regular.woff2) format('woff2'),url(../font/glyphicons-halflings-regular.woff) format('woff'),url(../font/glyphicons-halflings-regular.ttf) format('truetype'),url(../font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

:root {
    --color-product: #009996;
    --color-product-dark: #006b6e;
    --color-product-light: #66c2c0;
    --color-product-hover: #e6f5f5;
    --color-product-disabled: #80cccb;
    --color-secondary: #fad600;
    --color-secondary-dark: #f1cf0a;
    --color-secondary-text: #006b6e;
    --color-secondary-disabled: #fdeb80;
    --color-tertiary: #fa965a;
}


* {
    /*font-family: 'Nunito Sans', 'Helevtica', sans-serif;*/
    font-family: nexa;
    font-size: 1em;
}

.nunito {
    font-family: 'Nunito Sans', 'Helevtica', sans-serif;
}

h1 {
    font-family: nexa !important;
}

h2, h3, h4, h5, h6 {
    font-family: nexa !important;
    /*font-family: 'Nunito', 'Helevtica', sans-serif !important;*/
}

a, a:active, a:focus {
    color: #00857D;
}

.text-primary {
    color: #00857D;
}

.text-secondary {
    color: #00735E;
}

.text-dark {
    color: #4A4542;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

#introText {
    font-size: 1.15em;
    line-height: 1.8;
    margin-bottom: 50px;
}


#introIllustration {
    height: 156px;
    padding: 5px 75px 25px 75px;
}


/* ========
    NAVIGATION
   ======== */
#navbar {
    margin-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
}

#navigation {
    margin-bottom: 10px;
    font-size: 1.1em;
    display: inline-flex;
}

    #navigation a:hover {
        background-color: transparent;
        text-decoration: underline;
    }

    #navigation a:focus {
        background-color: transparent;
    }

    #navigation a {
        color: #00857D;
    }

    #navigation i {
        padding-right: 10px;
        color: #E79430;
    }

#userInfo {
    color: #797979;
    margin: 20px auto auto auto;
    text-align: right;
}

#logo {
    margin-top: -10px;
    color: #4A4542;
}

#brand {
    max-width: 100px;
}

a:hover#brand,
a:active#brand,
a:focus#brand {
    text-decoration: none !important;
}

.breadcrumb {
    background-color: transparent;
}

    .breadcrumb a {
        color: #00857D;
    }

    .breadcrumb i {
        color: #E79430;
    }

.pagination > li > a, .pagination > li > span {
    color: #00857D;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #00857D;
    border-color: #00857D;
}
/* ========
    DASHBOARD
   ======== */

#docsToSign {
    background-color: #00857D;
    color: #FFFFFF;
}

    #docsToSign .btn {
        background-color: #E79430;
        color: #FFFFFF;
        margin-top: 10px;
    }

#docsToRead {
    background-color: #025b56;
    color: #FFFFFF;
}

    #docsToRead .btn {
        background-color: #E79430;
        color: #FFFFFF;
        margin-top: 10px;
    }

#invoicesToPay {
    background-color: #E79430;
    color: #FFFFFF;
}

    #invoicesToPay .btn {
        background-color: #025b56;
        color: #FFFFFF;
        margin-top: 10px;
    }

#docsArchived {
    color: #797979;
    background-color: #fcfcfc;
    border-top: 1px #DADADA solid;
}

    #docsArchived .btn {
        background-color: #00857D;
        color: #FFFFFF;
        margin-top: 10px;
    }


#invoicesAll {
    color: #797979;
    background-color: #fcfcfc;
    border-top: 1px #DADADA solid;
}

    #invoicesAll .btn {
        background-color: #E79430;
        color: #FFFFFF;
        margin-top: 10px;
    }


/* ========
    INVOICE DETAIL
   ======== */

#invoiceInfo.well {
    background-color: transparent;
    box-shadow: none !important;
}

#invoiceInfoModal.well {
    background-color: transparent;
    box-shadow: none !important;
}

/* ========
    LABElS & PILLS
   ======== */

.label {
    font-family: nexa !important;
    padding: .3em .6em !important;
}

.label-pending {
    background-color: #FFFFFF;
    border: 1px solid #005645;
    color: #005645;
}

.label-unpaid {
    background-color: #FFD17D;
    color: #005645;
}

.label-paid {
    background-color: #79b43d;
}

.label-success {
    background-color: #79b43d;
}

.label-danger {
    background-color: #BC1B1B;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background-color: #E79430 !important;
    color: #FFFFFF !important;
}

.nav-pills > li > a, .nav-pills > li > a:focus, .nav-pills > li > a:hover {
    color: #797979 !important;
    background-color: #FFFFFF !important;
}

/* ========
    BUTTONS
   ======== */

.btn {
    font-family: nexa !important;
    /*font-family: 'Nunito', 'Helvetica', sans-serif;*/
    border: 0px transparent solid;
}


    .btn i {
        margin: auto 6px;
    }

.btn-primary {
    background-color: #00857D;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: #025b56;
    }

.btn-success {
    background-color: #79B43D;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        background-color: #79B43D;
    }

.btn-outline-primary, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: #00857D;
    background-color: transparent;
    border: 1px solid #DADADA;
}

    .btn-outline-primary:hover {
        background-color: #00857D;
        color: #FFFFFF;
        border: 1px solid #00857D;
    }

.btn-secondary {
    background-color: #E79430;
    color: #FFFFFF;
}

    .btn-secondary:hover {
        background-color: #cc7207;
        color: #FFFFFF;
    }

    .btn-secondary:focus, .btn-secondary:active {
        background-color: #E79430;
        color: #FFFFFF;
    }

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline-width: 0px !important;
}


.btn-brio {
    background-color: var(--color-secondary);
    color: dimgray;
    border: 1px solid #e8e8e8;
}

    .btn-brio:focus {
        background-color: var(--color-secondary);
        color: dimgray;
        border: 1px solid #e8e8e8;
    }

    .btn-brio:hover {
        background-color: var(--color-product-hover);
        color: dimgray;
        border: 1px solid #e8e8e8;
    }



/* ========
    TABLES
   ======== */

thead th {
    font-family: nexa !important;
    /*font-family: 'Nunito', 'Helvetica', sans-serif;*/
}

/* icons */
table .fal {
    color: #E79430;
    font-size: 1.9em;
    vertical-align: middle;
    line-height: 10px;
}


/* ========
    MODALS
   ======== */

.modal-content {
    box-shadow: none !important;
    border: none;
}

.modal {
    background-color: rgba(2, 91, 86, .6);
    border: none;
}

@media screen and (min-width: 768px) {

    .container .jumbotron,
    .container-fluid .jumbotron {
        padding-top: 36px;
        padding-bottom: 36px;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #snackbar {
        visibility: hidden; /* Hidden by default. Visible on click */
        min-width: 250px; /* Set a default minimum width */
        margin-left: -125px; /* Divide value of min-width by 2 */
        background-color: #333; /* Black background color */
        color: #fff; /* White text color */
        text-align: center; /* Centered text */
        border-radius: 2px; /* Rounded borders */
        padding: 16px; /* Padding */
        position: fixed; /* Sit on top of the screen */
        z-index: 1; /* Add a z-index if needed */
        left: 50%; /* Center the snackbar */
        bottom: 30px; /* 30px from the bottom */
    }

        #snackbar.show {
            visibility: visible; /* Show the snackbar */
            /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }

    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }