/* =============================================================================
  #RESET
============================================================================= */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0;margin:0 0 1em}


/* =============================================================================
  #TOOLS
============================================================================= */
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

:root {
    --primary-color: #4195D1;
    --dark-primary-color: #40657f;
    --secondary-color: #F48226;
    --secondary-light: #FFAD6C;

    --white-color: #FFFFFF;
    --grey-color: #F3F7FD;
    --light-grey: #A7B4C7;
    /*--dark-light-grey: #9bb1d1;*/
    --dark-light-grey: #7b8fa8;

    --default-text: #3E4B58;
    --default-grey-text: #B0B9C2;
    --light-grey-text-color: #CCD2D8;

    --error-color: #ef3939;
    --success-color: #3ac83a;

    --border-radius: 6px;
    --border-settings: 2px solid #E6EDF4;
    --border-settings-dark: 2px solid #CCD2D8;

    --default-padding: 24px;
    --medium-padding: 16px;
    --small-padding: 12px;
    
    --login-header-height: 140px;
    --nav-height: 106px;

    --image-opacity: 15%;

    --max-screen-width: 800px;
}
/* =============================================================================
  #GENERAL
============================================================================= */
* {
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

html {
    min-height: 100%;
    height: 100%;

    font-size: 16px;
    font-size: 62.5%;
}

body {
    position: relative;

    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-style: normal;

    color: var(--default-text);
    font-size: 15px; font-size: 1.5rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: var(--white-color);

    min-height: 100vh;
    min-height: -webkit-fill-available;

    padding-bottom: calc(var(--nav-height) + 40px + var(--default-padding));
    /* max-width: var(--max-screen-width);
    margin: 0 auto; */
}

body.no-nav, body.message, body.qr-scanner {
    padding-bottom: 0;
}

body.qr-scanner {
     /* overflow-y: scroll; has to be scroll, not auto
    -webkit-overflow-scrolling: touch; */
    /* overflow: hidden;
    -webkit-overflow-scrolling: touch; */
}

body.overlay::before {
    content: "";

    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, .4);
    z-index: 200;
}

img {
    max-width: 100%;
    font-style: italic;
    vertical-align: middle;
}

small.note {
    display: block;
    color: var(--default-grey-text);
}
/* =============================================================================
  #TYPOGRAPHY
============================================================================= */
h1 + *, h2 + *, h3 + *, h4 + * {
    margin-top: var(--small-padding);
}

/* Heading 1 */
h1 {
    font-size: 22px; font-size: 2.2rem;
    font-weight: 700;
}

.heading-main {
    padding-bottom: var(--small-padding);
    margin-bottom: var(--default-padding);
    border-bottom: var(--border-settings);
}

.heading-main + * { margin-top: 0; }

/* Heading 2 */
h2 {
    font-weight: 700;
    font-size: 18px; font-size: 1.8rem;
}

.help  h3 {
    color: var(--primary-color);
    font-size: 18px; font-size: 1.8rem;
}

/* Heading 3 */
h3 {
    font-size: 16px; font-size: 1.6rem;
}

h4 {
    color: var(--primary-color);
    font-size: 16px; font-size: 1.6rem;
}

.leads__item__content h4 {
    font-size: 15px; font-size: 1.5rem;
}

.qr-scanner .leads__item__content h4 {
    font-size: 14px; font-size: 1.4rem;
}

hgroup {
    width: 100%;

    padding-bottom: var(--small-padding);
    margin-bottom: var(--small-padding);
    border-bottom: var(--border-settings);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

strong {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

ul, ol {
    padding-left: 0;
}

ul {
    list-style: none;
}

.ul, .ol {
    margin-top: var(--small-padding);
    background-color: var(--grey-color);
    padding: 12px 12px 12px calc(var(--medium-padding) + 20px);
    border-radius: 5px;
}

.ul li + li,
.ol li + li {
    margin-top: var(--small-padding);
    padding-top: var(--small-padding);
    border-top: 2px solid #d9e0eb;
}

.ul {
    list-style-type: disc;
}

.ol {
    list-style-type: decimal;
}

ol {
    list-style: decimal;
}

/* =============================================================================
  #UTILITIES
============================================================================= */
.hide {
    display: none!important;
}

main section {
    width: 100%;
    display: block;
}

/* =============================================================================
  #FORM
============================================================================= */
form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 100%;
}

form > * {
    width: 100%;
}

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

    margin-bottom: 12px;
}

    .form__heading .btn {
        margin: 0;
    }

.form__section {
    display: flex;
    flex-direction: column;

    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.form__section--checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form__section + .form__section { 
    margin-top: var(--default-padding);
}

.form__section + button, .form__section + .btn {
    margin-top: var(--default-padding);
}

.form__label {
    font-size: 16px; font-size: 1.6rem;
    font-weight: 700;
}

.form__label + * {
    margin-top: 8px;
}

    .form__input {
      outline: none;
      box-shadow: none;
    }

    .form__input--field, .form__input--textarea {
      padding: 16px 20px;

      font-size: 15px; font-size: 1.5rem;
      color: var(--default-text);

      border: var(--border-settings);
      border-radius: var(--border-radius);
    }

    .form__input--textarea {
        min-width: 100%;
        resize: none;
        min-height: 100px;
    }

    .form__input--checkbox {
        -webkit-appearance: none;
        appearance: none;

        /* For iOS < 15 */
        background-color: var(--white-color);
        margin: 0 var(--small-padding) 0 0;

        color: var(--primary-color);

        width: 24px;
        height: 24px;

        border: var(--border-settings);
        border-radius: 4px;
        
        transform: translateY(-0.075em);

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form__input--checkbox::before {
        content: "";
        
        width: 12px;
        height: 12px;

        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        
        transform: scale(0);
        transform-origin: bottom left;
        transition: 120ms transform ease-in-out;
        
        background-color: var(--primary-color);
    }

    .form__input--checkbox:checked::before {
        transform: scale(1);
    }

    .form__input--field {
        min-height: 50px;
    }

    .form__input:focus, .form__input:active, .form__input:focus-visible, .form__input:checked {
        border-color: var(--primary-color);
    }

/* =============================================================================
  #NAV
============================================================================= */
.no-nav .nav {
    display: none;
}

.nav {
    position: fixed;
    -webkit-overflow-scrolling: touch;

    left: 0;
    right: 0;
    bottom: 0;

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

    min-height: var(--nav-height);

    box-shadow: 0 -2px #E6EDF4;

    background-color: var(--white-color);
}

.nav--manager {
    background-color: var(--white-color);
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    opacity: 0;
    transform: translateY(calc(100% + 23px));
    
    padding: 30px;
    
    min-height: var(--nav-height);
    transition: all 250ms linear;
    
    z-index: 250;
}

.nav--manager--open {
    opacity: 100%;
    transform: translateY(0);
}

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

        max-width: var(--max-screen-width);
        /* margin: 0 auto; */

        padding: var(--medium-padding) var(--default-padding);
    }

        .menu__item {
            display: flex;
            justify-content: center;

            font-weight: 700;
            color: #CCD2D8;
            width: 33.33%;
        }

            .menu__item i.icon {
                font-size: 16px; font-size: 1.6rem;
                color: #CCD2D8;
            }

            .menu__item p {
                color: #CCD2D8;
                /* margin-top: 2px; */
            }

            .menu__item--active p,
            .menu__item--active i.icon {
                color: var(--primary-color);
            }

        .menu__item--main {
            position: absolute;
            left: 50%;
            top: -40px;
            width: auto;
            transform: translateX(-50%);
        }

        .menu__item--main a {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 80px!important;
            height: 80px;
            
            border-radius: 50%;

            box-shadow: 0 0 0 14px rgb(244 130 38 / 10%), 0 0 0 7px rgb(244 130 38 / 20%);
            animation: pulsate 1.6s linear infinite;

            background-color: var(--secondary-color);
        }

        @-webkit-keyframes pulsate {
            0%   { box-shadow: 0 0 0 0 rgb(244 130 38 / 10%), 0 0 0 0 rgb(244 130 38 / 20%); }
            50%  { box-shadow: 0 0 0 14px rgb(244 130 38 / 10%), 0 0 0 7px rgb(244 130 38 / 20%); }
            100% { box-shadow: 0 0 0 0 rgb(244 130 38 / 10%), 0 0 0 0 rgb(244 130 38 / 20%); }
        }

            .menu__item--main .icon {
                width: 30px;
                height: 30px;
            }

        .menu__item--icon {
            position: absolute;
            display: flex;
            align-items: center;
            right: 30px;
            top: 0;
            width: 50px;
            height: 60px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            background-color: var(--secondary-color);

            transform: translateY(-10px);
            transition: all 250ms ease-in-out;
        }

            .menu__item--icon i.icon {
                color: var(--white-color);
            }

        @media only screen and (min-width: 800px) {
            .dashboard-manager .menu__item--icon {
                display: none;
            }
        }

        .no-nav .menu__item--icon {
            display: none;
        }

        .menu__item--icon--back {
            display: flex!important;
            right: 0;
            left: 30px;
        }

        .menu__item--icon:hover {
            transform: translateY(0);
        }
            
        .menu__item a {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            width: 100%;
        }
/* =============================================================================
  #MESSAGE
============================================================================= */
.message {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.dashboard-manager.message main {
    position: relative;
    inset: 0;
    transform: none;
    height: auto;
    padding: var(--default-padding) 30px calc(var(--default-padding) + var(--nav-height) + 33px) 30px;
}

    .message main {
        position: absolute;

        left: 50%;
        bottom: calc(50% - 40px);
        transform: translate(-50%);

        width: 100%;
        padding: 0;
    }

    .message--leads.message main {
        transform: translateX(-50%);
        /* bottom: calc(var(--nav-height) ); */
        bottom: calc(var(--nav-height) + 40px + 30px);
    }

        .message__content {
            display: flex;
            flex-direction: column;
            align-items: center;

            text-align: center;
            color: var(--dark-light-grey);
        }

        .help .message__content-extra {
            order: 1;
        }

        .help .message__content h2, .help .message__content p {
            order: 2;
        }

        .dashboard-manager .message__content {
            position: absolute;
            
            left: 50%;
            transform: translate(-50%);

            display: flex;
            flex-direction: column;
            align-items: center;

            color: var(--dark-light-grey);
            
            width: 100%;
            padding: 0;
        }

            .message__content-extra { display: none; }
            .message--leads .message__content-extra,
            .help .message__content-extra { display: block; }

        .message__content-extra .icon {
            margin-top: var(--default-padding);
            opacity: 70%;
            height: 40px;
            width: auto;
        }

        .help .message__content-extra .icon {
            transform: scaleY(-1);
            margin: 0 0 var(--small-padding) 0;
        }

/* =============================================================================
  #ERROR MESSAGE
============================================================================= */
.error-message {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    height: auto;

    color: var(--white-color);
    background-color: var(--error-color);

    border-radius: var(--border-radius);

    padding: 16px 24px;
}

* + .error-message { margin-top: var(--medium-padding); }
/* =============================================================================
  #ICON
============================================================================= */
 .icon {
    color: var(--white-color);
}

img.icon {
    width: 20px;
    height: 20px;
}

i.icon {
    font-size: 18px; font-size: 1.8rem;
}

    .icon + * {
        margin-top: 6px;
    }
/* =============================================================================
  #MAIN
============================================================================= */
main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    padding: var(--default-padding) 30px 0 30px;
    /* padding: var(--default-padding) 30px calc(var(--default-padding) + var(--nav-height) + 33px) 30px; */
}

.login main,
.no-nav main {
    padding: var(--default-padding) 30px 0 30px;
    /* padding: var(--default-padding) 30px 0 var(--default-padding) 30px; */
}

main > * { width: 100%; }
.header--title + main { padding-top: 0; }

.main__content + .main__content {
    border-top: var(--border-settings);
    margin-top: var(--medium-padding);
    padding-top: var(--medium-padding);
}

.data-container {
    display: flex;
    gap: var(--small-padding);
}

    .data-container > *,
    .data-container-group > * { width: 50%; }

    .data-container .stats + .btn--block { width: 70%; }

    /* STATS */
    .stats {
        padding: var(--small-padding);

        background-color: var(--grey-color);
        
        color: var(--dark-light-grey);
        font-weight: 700;

        border-radius: var(--border-radius);
    }

        .stats__number {
            display: block;

            margin-top: 4px;
            line-height: normal;
            font-size: 22px; font-size: 2.2rem;
            color: var(--primary-color);
        }

    .stats + .btn { margin: 0 0 0 var(--small-padding); }

.data-container--column { flex-direction: column; }

    .data-container-group {
        display: flex;
        width: 100%;
        gap: var(--small-padding);
    }

.data-container * + .btn {
    margin: 0;
}
/* =============================================================================
  #LEADS
============================================================================= */
.leads {

}

    .leads__item + .leads__item {
        margin-top: var(--small-padding);
    }

    .leads__item {
        display: flex;
        align-items: center;

        background-color: var(--grey-color);

        border-radius: var(--border-radius);
        padding: var(--medium-padding);
    }

        .leads__item--data .leads__item__image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
        }

            .leads__item--data .leads__item__image-container i.icon {
                color: var(--white-color);
            }

    .leads__item--space {
        justify-content: space-between;
    }

    .leads__item a {
        width: 100%;
        height: 100%;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        /* Holds content + optional image container */
        .leads__item__content-container {
            display: flex;
            align-items: center;
        }

            .leads__item__image-container {
                display: inline-block;
                width: 35px;
                height: 35px;

                border-radius: 50%;
                overflow: hidden;

                margin-right: var(--small-padding);
            }

             .leads__item__content {
                color: var(--dark-light-grey);
                font-size: 14px; font-size: 1.4rem;
            }
            
                .leads__item__content p {
                    margin-top: 0;
                }


        .leads__item h2 {
            font-size: 15px; font-size: 1.5rem;
        }

        .leads__item a > i.icon {
            font-size: 20px; font-size: 2.0rem;
            color: var(--primary-color);
        }

.lead-details .lead__notes .btn--hide {
    opacity: 0;
    transition: all 250ms linear;
}

.lead-details .lead__notes .btn--active {
    opacity: 100%;
}
/* =============================================================================
  #STATUS LABEL
============================================================================= */
.status-text {
    margin: 0;
    padding: 0;
    
    opacity: 100%;

    transition: opacity 250ms linear;
}

.status-text--hide {
    opacity: 0;
}

.form__heading .status-text {
    position: absolute;
    right: 30px;
}


.status-text--success { color: var(--success-color); }
.status-text--failed { color: var(--error-color); }

.status--success { background-color: var(--success-color)!important; }
.status--failed { background-color: var(--error-color)!important; }

.status--success,
.status--failed,
.status--success h2,
.status--failed h2,
.status--success i.icon,
.status--failed i.icon {
    color: var(--white-color)!important;
}

.status--success .btn,
.status--failed .btn {
    color: var(--secondary-color);
    background-color: var(--white-color);
    margin-top: var(--default-padding);
}
/* =============================================================================
  #HEADER
============================================================================= */
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--default-padding) 0;

    width: 100%;

    background-color: var(--secondary-color);
}

.login .header {
    min-height: var(--login-header-height);
}

.header--user {
    position: relative;
    min-height: 60px;

    margin-bottom: 70px;
}

.header--title {
    flex-direction: column;
    background-color: transparent;
}

.header--title h2 {
    /* text-transform: capitalize; */
    font-size: 20px; font-size: 2.0rem;
}

.header--title p {
    margin-top: 6px;

    padding: 4px 10px;

    border-radius: var(--border-radius);
    font-weight: 700;
    color: var(--white-color);
    background-color: var(--secondary-color);
}

    .header__logo {
        background-color: var(--white-color);
        width: 100px;
        height: 100px;

        padding: var(--default-padding);

        border-radius: 50%;
    }

    .header__image__container {
        display: flex;
        align-items: center;
        flex-direction: column;

        position: absolute;

        left: 50%;
        bottom: -33px;

        transform: translateX(-50%);

        width: 100%;
    }

        .header__image {
            display: block;

            width: 66px;
            height: 66px;

            border-radius: 50%;
            box-shadow: 0 0 0px 4px white;
            background-color: white;

            overflow: hidden;
        }

            .header__image img {
                width: 100%;
                height: 100%;

                object-fit: cover;
            }

        .header__content {
            position: absolute;

            bottom: calc(-40px - 16px);

            display: flex;
            align-items: center;
            flex-direction: column;

            width: 100%;
            
            text-align: center;
        }

            .header__content p {
                margin-top: 0;
                color: var(--default-grey-text);
            }

    .login .header__logo {
        margin-bottom: 10px;
    }

/* =============================================================================
  #SCANNER
============================================================================= */
.qr-scanner__frame-container {
    position: relative;

    display: flex;

    max-height: 45vh;
    min-height: 45vh;

    background-color: var(--grey-color);

    overflow: hidden;
}

    .qr-scanner__status {
        position: absolute;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        padding: 0 30px;

        text-align: center;
        color: var(--default-grey-text);
        z-index: 100;
    }

        .qr-scanner__status__content h2 + * {
            margin-top: 4px;
        }

        .qr-scanner__status__content .btn {
            margin-top: var(--medium-padding);
        }

        .qr-scanner__status .icon-container {
            display: flex;
            width: 70px;
            height: 70px;

            border-radius: 50%;

            padding: var(--medium-padding);
        }

        .qr-scanner__status i.icon {
            color: var(--default-grey-text);
            font-size: 40px; font-size: 4.0rem;
        }

        .qr-scanner__status--success .icon-container {
            margin-bottom: var(--medium-padding);
        }

        .qr-scanner__status p {
            font-size: 16px; font-size: 1.6rem;
        }

    #qr-video{
        max-height: 45vh;
        min-height: 45vh;

        width: 100%;
    }

    .qr-scanner__frame {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .qr-scanner__frame-container .scan-region-highlight {
        outline: rgba(0, 0, 0, .4) solid 100vmax;
    }

        .qr-scanner__frame-container .scan-region-highlight-svg {
            display: none;
        }


.qr-scanner main {
    position: relative;
    height: calc(55vh - var(--nav-height));
    min-height: calc(55vh - var(--nav-height));
    padding: 24px 30px calc(var(--nav-height) + 40px + 24px) 30px;
}

    .qr-scanner__results {
        position: absolute;
        top: var(--default-padding);
        left: 30px;
        right: 30px;

        width: auto;

        opacity: 0;
        transform: translateY(100%);

        color: var(--white-color);
        transition: all 250ms ease-in-out;
    }

    .qr-scanner__notes {
        position: fixed;
        inset: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        padding: var(--default-padding) 30px;
        width: auto;

        opacity: 0;
        transform: translateY(100%);
        background: var(--white-color);

        z-index: 150;
        transition: all 250ms ease-in-out;
    }

        .leads__item + .lead__notes-container {
            margin-top: var(--default-padding);
            padding-top: var(--default-padding);
            border-top: var(--border-settings);
        }

    .qr-scanner__results--open, .qr-scanner__notes--open {
        opacity: 100%;
        transform: translateY(0);
    }

        .qr-scanner__results .btn {
            color: var(--white-color);
            background-color: var(--primary-color);
        }

        .qr-scanner__status__content .btn {
            background-color: var(--secondary-color)!important;
        }

        .qr-scanner .leads__item + .btn {
            margin-top: var(--medium-padding);
        }
/* =============================================================================
  #TEXT SECTIONS
============================================================================= */
.main__section + .main__section,
.main__section + h3 {
    margin-top: var(--medium-padding);
    padding-top: var(--medium-padding);
    border-top: var(--border-settings);
}

.help h3 {
    margin-bottom: var(--small-padding);
}
.help .main__section + .main__section {
    margin: 0;
    padding: 0;
    border: none;
}
/* =============================================================================
  #BUTTON
============================================================================= */
.btn {
    position: relative;
    display: inline-block;
    padding: var(--medium-padding);
    min-height: 50px;

    color: #ffffff;
    font-size: 15px; font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    width: 100%;

    cursor: pointer;

    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    border: none;

    transition: all 150ms ease-in-out;
}

.qr-scanner .btn {
    padding: var(--small-padding) var(--medium-padding);
}

    .btn h2 {
        font-size: 15px; font-size: 1.5rem;
    }

* + .btn { margin-top: var(--medium-padding); }

.btn--secondary {
    background-color: var(--white-color);
    color: var(--default-grey-text);
    border: var(--border-settings-dark);
    padding: 16px 0;
}

.btn--block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

    .btn--block i.icon {
        font-size: 21px; font-size: 2.1rem;
    }

.btn--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;

    min-height: auto;
}

    .btn--inline i.icon {
        font-size: 18px; font-size: 1.8rem;
    }

    .btn--inline .icon + * {
        margin: 0 0 0 6px;
    }

.btn--icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;
    min-height: auto;
    
    border-radius: 50%;

    color: var(--white-color);
    background-color: var(--primary-color);
    margin: 0;
}

    .btn--back {
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .nav--manager .btn--back {
        left: 50%;
        top: -25px;

        width: 50px;
        height: 50px;

        transform: translateX(-50%);
        background-color: var(--secondary-color);
    }

.btn--text {
    display: inline-block;

    height: auto;
    min-height: auto;
    
    padding: 4px 0;
    
    width: auto;
    color: var(--primary-color);
    background-color: transparent;
}

    .btn--text.btn--inline {
        color: var(--white-color);
        padding: 6px 10px;
        background-color: var(--primary-color);
    }

.btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    margin-top: var(--small-padding);
    padding-top: var(--small-padding);
    border-top: var(--border-settings);
}

.qr-scanner .btn-container,
.dashboard-manager .btn-container {
    border: none;
    padding-top: 0;
}

.dashboard-manager .btn-container { margin: 0; }

    .leads__item .btn--icon {
        display: flex;
        flex-direction: column;
        text-align: center;

        width: auto;
        height: auto;
        padding: var(--small-padding);
        background-color: transparent;
    }

    .qr-scanner .leads__item .btn--icon {
        background-color: var(--secondary-color);
        width: 35px;
        height: 35px;
        border-radius: 5px;
        padding: var(--small-padding)!important;
        font-size: 18px;
    }

        .leads__item .btn--icon i.icon {
            font-size: 18px; font-size: 1.8rem;
        }

    .leads__item .btn--icon:last-of-type {
        padding-right: 0;
    }
    .leads__item .btn-container .btn + .btn {
        margin-left: 0;
    }

    .btn-container > .btn { width: 50%; }

.btn-container .btn:only-child { margin-left: auto; }

.btn-container .btn + .btn { margin: 0 0 0 var(--default-padding); }
/* =============================================================================
  #HEX PATTERN
============================================================================= */
.pattern {
    /* position: fixed; */
    position: absolute;

    z-index: -5;
}

.pattern--up {
    bottom: -25%;
}

.qr-scanner .pattern--up {
    bottom: calc(var(--nav-height) - 30px);
}

.qr-scanner .pattern__container {
    transform: scaleY(-1);
}

.pattern--down {
    top: -30px;
}

.header > .pattern--down {
    top: 25px;
}

.header--title > .pattern--down {
    top: -25px;
}

.login .pattern__container {
    transform: scaleY(-1);
}

.pattern--right {
    right: 0;
}

    .pattern--right .pattern__container {
        transform: scaleX(-1);
    }
    .qr-scanner .pattern--right .pattern__container {
        transform: scale(-1);
    }

.pattern--left {
    left: 0;
}

    .pattern__container {
        display: block;
    }

/* =============================================================================
  #FOOTER
============================================================================= */
.footer {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px; font-size: 1.4rem;
    color: var(--default-grey-text);
}

.no-nav > .footer,
.dashboard-manager > .footer {
    flex-direction: column;
    padding: var(--default-padding) 30px var(--default-padding) 30px;
}

.no-nav > .footer,
.dashboard-manager > .footer {
    display: flex;
}

    .nav .footer {
        display: flex;
        flex-direction: row;
        background-color: #d2d8de;
        padding: 6px 0!important;
    }

        .nav .footer p {
            color: #909daa;
        }

    .footer .logo {
        margin-top: 6px;
        width: 40px;
        height: auto;
    }

    .nav .footer .logo {
        margin-top: 0;
        margin-left: 6px;
    }

/* =============================================================================
  #CUSTOM STYLES
============================================================================= */
.swal2-styled.swal2-confirm {
    font-size: 16px!important; font-size: 1.6rem!important;
    padding: 6px 10px!important;
    min-width: 50px!important;
}

.swal2-html-container {
    margin-top: 5px!important;
    font-size: 16px!important; font-size: 1.6rem!important;
}

.swal2-close {
    width: 30px!important;
    height: 30px!important;
    font-size: 35px!important; font-size: 3.5rem!important;
}

.swal2-popup .swal2-styled:focus {
    box-shadow: none !important;
}