/* INFORMACION DE INTENSIDAD DE NEGRITA.
    Thin    : font-weight: 100
            : font-weight: 300
    Regular : font-weight: 400
    Medium  : font-weight: 500
    Bold    : font-weight: 700
    Black   : font-weight: 900
*/

/* INFORMACION DE TRAMOS DE TAMAÑOS DE PANTALLA
    1       0 -  360: xs Extra-small    Movil
    2     360 -  720: sm Small          
    3     720 -  960: md Medium
    4     960 - 1280: lg Large
    5    1280 - 1920: xl Extra-large    19" - 22"
    6    1920 -     :;                  +22"
*/

/* COLORES
    EEEEEE : Gris claro xs
    E0E0E0 : Gris claro sm 
    001970 : Azul oscuro (P - Dark)
    303F9F : Azul (Primary)
    666ad1 : Azul claro (P - Light)
    721c24 : Rojo oscuro (alert-success)
    856404 : Amarillo osucro (alert-warning)
    0c5460 : Azul oscuro apagado (alert-info)
    818182 : Gris ??? (alert-light)
    1b1e21 : Negro ???(alert-dark)
*/

/* FONT-SIZE 
    xx-small
    x-small
    small
    medium      : default 
    large
    x-large
    xx-large
    smaller
    larger
    10px
    20px
    50%
    150%
    initial
*/

/* ESCRUCTURA BASE DE UN COMPONENTE
    ELEMENT
        CONTENT
            HEADER
                TOOLBAR
                    TITLE
                    ACTIONS
            BODY
            FOOTER
                ACTIONS
*/

/**
 * GENERAL
 */

body {
    margin: 0px;
    padding: 0px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    /*font-family: 'Ubuntu Mono', monospace;*/
    /*font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;*/
    font-size: 12px;
    font-weight: 300;
    color: #616161;
}

@media (max-width: 360px) {
    body {
        font-size: 15px;
    }
}

button,
input[type=button],
input[type=submit] {
    background-color: rgba(0,0,0,0);
    border: none;
    text-transform: uppercase;
    padding: 0px 8px;
    cursor: pointer;
    font-weight: 400;
    color: #303F9F;
}

input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=month] {
    width: 100%;
    /*font-family: 'Roboto', sans-serif;*/
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

input[type=checkbox] {
    -ms-transform: scale(1.4); /* IE */
    -moz-transform: scale(1.4); /* FF */
    -webkit-transform: scale(1.4); /* Safari and Chrome */
    -o-transform: scale(1.4); /* Opera */
    transform: scale(1.4);
    margin: 8px;
}

select {
    width: calc(100% - 1px);
    /*font-family: 'Roboto', sans-serif;*/
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background-color: #ffffff;
}

select,
input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=month],
input[type=checkbox] {
    font-size: large;
    background-color: #ffffff;
}

@media (min-width: 720px) {
    select,
    input[type=text],
    input[type=number],
    input[type=password],
    input[type=date],
    input[type=month],
    input[type=checkbox] {
        font-size: larger;
    }
}

/**
 * HELPER CLASSES
 */

.mgn-0 {
    margin: 0px;
}

.pad-0 {
    padding: 0px;
}

.mgn-t-0 {
    margin-top: 0px;
}

.pad-t-0 {
    padding-top: 0px;
}

.mgn-b-0 {
    margin-bottom: 0px;
}

.pad-b-0 {
    padding-bottom: 0px;
}

.mgn-l-0 {
    margin-left: 0px;
}

.pad-l-0 {
    padding-left: 0px;
}

.mgn-r-0 {
    margin-right: 0px;
}

.pad-r-0 {
    padding-right: 0px;
}

.mgn-tb-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.pad-tb-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.mgn-lr-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.pad-lr-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.mgn-4 {
    margin: 4px;
}

.pad-4 {
    padding: 4px;
}

.mgn-t-4 {
    margin-top: 4px;
}

.pad-t-4 {
    padding-top: 4px;
}

.mgn-b-4 {
    margin-bottom: 4px;
}

.pad-b-4 {
    padding-bottom: 4px;
}

.mgn-l-4 {
    margin-left: 4px;
}

.pad-l-4 {
    padding-left: 4px;
}

.mgn-r-4 {
    margin-right: 4px;
}

.pad-r-4 {
    padding-right: 4px;
}

.mgn-tb-4 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.pad-tb-4 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mgn-lr-4 {
    margin-left: 4px;
    margin-right: 4px;
}

.pad-lr-4 {
    padding-left: 4px;
    padding-right: 4px;
}

.mgn-8 {
    margin: 8px;
}

.pad-8 {
    padding: 8px;
}

.mgn-t-8 {
    margin-top: 8px;
}

.pad-t-8 {
    padding-top: 8px;
}

.mgn-b-8 {
    margin-bottom: 8px;
}

.pad-b-8 {
    padding-bottom: 8px;
}

.mgn-l-8 {
    margin-left: 8px;
}

.pad-l-8 {
    padding-left: 8px;
}

.mgn-r-8 {
    margin-right: 8px;
}

.pad-r-8 {
    padding-right: 8px;
}

.mgn-tb-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.pad-tb-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mgn-lr-8 {
    margin-left: 8px;
    margin-right: 8px;
}

.pad-lr-8 {
    padding-left: 8px;
    padding-right: 8px;
}

.mgn-16 {
    margin: 16px;
}

.pad-16 {
    padding: 16px;
}

.mgn-t-16 {
    margin-top: 16px;
}

.pad-t-16 {
    padding-top: 16px;
}

.mgn-b-16 {
    margin-bottom: 16px;
}

.pad-b-16 {
    padding-bottom: 16px;
}

.mgn-l-16 {
    margin-left: 16px;
}

.pad-l-16 {
    padding-left: 16px;
}

.mgn-r-16 {
    margin-right: 16px;
}

.pad-r-16 {
    padding-right: 16px;
}

.mgn-tb-16 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.pad-tb-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.mgn-lr-16 {
    margin-left: 16px;
    margin-right: 16px;
}

.pad-lr-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.mgn-32 {
    margin: 32px;
}

.pad-32 {
    padding: 32px;
}

.mgn-t-32 {
    margin-top: 32px;
}

.pad-t-32 {
    padding-top: 32px;
}

.mgn-b-32 {
    margin-bottom: 32px;
}

.pad-b-32 {
    padding-bottom: 32px;
}

.mgn-l-32 {
    margin-left: 32px;
}

.pad-l-32 {
    padding-left: 32px;
}

.mgn-r-32 {
    margin-right: 32px;
}

.pad-r-32 {
    padding-right: 32px;
}

.mgn-tb-32 {
    margin-top: 32px;
    margin-bottom: 32px;
}

.pad-tb-32 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.mgn-lr-32 {
    margin-left: 32px;
    margin-right: 32px;
}

.pad-lr-32 {
    padding-left: 32px;
    padding-right: 32px;
}

/**
 * TOOLBAR
 */

.toolbar {
    top: 0px;
    left: 0px;
    height: 56px;
    line-height: 56px;
    background-color: #303F9F;
    color: #FFFFFF;
    padding: 0px 8px 0px 16px;
    /*box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 5px 5px rgba(0,0,0,0.21);*/
    z-index: 4;
}

    .toolbar .toolbar-menu {
        display: inline-block;
        padding: 0px;
        cursor: pointer;
        width: 56px;
        height: 56px;
        float: left;
        line-height: 65px;
    }

        .toolbar .toolbar-menu .material-icons {
            height: auto;
            font-size: x-large;
            vertical-align: text-bottom;
        }

    .toolbar .toolbar-title {
        display: inline-block;
        font-weight: 700;
        font-size: large;
        height: 56px;
        float: left;
    }

    .toolbar .toolbar-actions {
        display: inline-block;
        float: right;
        height: 56px;
    }

        .toolbar .toolbar-actions .toolbar-actions-item {
            display: inline-block;
            padding: 0px 0px 0px 16px;
            cursor: pointer;
        }

            .toolbar .toolbar-actions .toolbar-actions-item.disabled {
                pointer-events: none;
                color: #E0E0E0;
            }

            .toolbar .toolbar-actions .toolbar-actions-item .material-icons {
                height: auto;
                font-size: x-large;
                vertical-align: text-bottom;
            }

                .toolbar .toolbar-actions .toolbar-actions-item .material-icons.activated {
                    color: #000000;
                }

/**
 * CONTENT
 */
.content {
    overflow-y: auto;
}

    .content .content-header {
        position: sticky;
        top: 0px;
        z-index: 1;
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
    }

    .content .content-body {
        width: 100%;
        height: calc(100vh - 56px);
    }
/**
 * CONTENT-DETAIL
 */

.contentdetail {
    display: flex;
    flex-direction: row;
}

    .contentdetail .contentdetail-left {
        width: 100%;
    }

    .contentdetail .contentdetail-right {
        display: none;
    }

        .contentdetail .contentdetail-left .contentdetail-body,
        .contentdetail .contentdetail-right .contentdetail-body {
            clear: both;
            overflow-y: auto;
            overflow-x: hidden;
            height: calc(100vh - 56px);
        }

    .contentdetail .contentdetail-left .contentdetail-body {
        border-right: 1px solid #E0E0E0;
        /*padding-right: 1px;*/
    }

    .contentdetail .contentdetail-right .contentdetail-body.detalle {
        background-color: #c2dbff;
    }

    .contentdetail .contentdetail-right .contentdetail-body.movimiento {
        background-color: #c2dbff;
    }

    .contentdetail.contentdetail-detailvisible .contentdetail-left {
        display: none;
    }

    .contentdetail.contentdetail-detailvisible .contentdetail-right {
        display: block;
        width: 100%;
    }

    .contentdetail.contentdetail-detailinvisible .contentdetail-left {
        display: block;
        width: 100%;
    }

    .contentdetail.contentdetail-detailinvisible .contentdetail-right {
        display: none;
    }


@media (min-width: 720px) {
    .contentdetail .contentdetail-left,
    .contentdetail.contentdetail-detailvisible .contentdetail-left {
        display: block;
        width: 75%;
    }

    .contentdetail .contentdetail-right,
    .contentdetail.contentdetail-detailvisible .contentdetail-right {
        display: block;
        width: 25%;
    }

        .contentdetail .contentdetail-right .contentdetail-header .toolbar .toolbar-menu,
        .contentdetail .contentdetail-right .contentdetail-header .toolbar .toolbar-title {
            display: none;
        }
}

/**
 * CARD
 */

.card {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.16), 0 1px 1px rgba(0,0,0,0.23);
    z-index: 2;
    background-color: #FFFFFF;
}

    .card .card-title {
        padding: 24px 16px 8px 16px;
        font-weight: 500;
        font-size: large;
    }

    .card .card-body {
        padding: 16px 16px 8px 16px;
    }

    .card .card-actions {
        padding: 16px 8px 8px 8px;
        display: flow-root;
    }

        .card .card-actions .card-actions-item {
            display: inline-block;
            text-transform: uppercase;
            padding: 0px 8px;
            cursor: pointer;
            float: right;
            font-weight: 400;
            color: #303F9F;
        }

/**
 * TABLE
 */

.table {
    display: flex;
    flex-direction: column;
}

    .table .table-toolbar {
        border-bottom: 1px solid #E0E0E0;
        height: 64px;
        background-color: #FFFFFF;
    }

        .table .table-toolbar .table-toolbar-title {
            padding: 0 16px;
            display: inline-block;
            line-height: 64px;
            font-weight: 400;
            font-size: large;
        }

        .table .table-toolbar .table-toolbar-actions {
            display: inline-block;
            float: right;
            line-height: 65px;
        }

            .table .table-toolbar .table-toolbar-actions .table-toolbar-actions-item {
                display: inline-block;
                padding: 0px 8px;
                cursor: pointer;
            }

                .table .table-toolbar .table-toolbar-actions .table-toolbar-actions-item .material-icons {
                    line-height: 64px;
                }

    .table .table-row {
        display: flex;
        flex-direction: row;
        height: 48px;
        line-height: 48px;
    }

        .table .table-row.tr-total .table-col {
            font-weight: bold;
        }

        .table .table-row .table-col {
            padding: 0 8px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            border-bottom: 1px solid #E0E0E0;
        }

            .table .table-row .table-col .material-icons {
                line-height: 48px;
            }

    .table .table-header {
        background-color: #FFFFFF;
        font-weight: 500;
        /*z-index: 2;*/
    }

        .table .table-header .table-row {
            /*display: flex;
    align-items: center;
    justify-content: center;*/
        }

            .table .table-header .table-row .table-col {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }


    .table .table-body {
        /*z-index:1;*/
    }

        /* ROW HOVER */

        .table .table-body .table-row:hover .table-col {
            /*background-color: #EEEEEE;*/
        }

        /* TABLE ROW SELECTED */

        .table .table-body .table-row.table-row-selected .table-col {
            background-color: #c2dbff;
        }

    .table .table-footer {
    }

    /* TABLE SCROLLABLE
    Mantiene la tabla fija en la pagina. */

    .table.table-scrollable {
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }

        .table.table-scrollable .table-toolbar {
            position: sticky;
            top: 0;
        }


    /* TABLE BODY SCROLLABLE
    Mantiene la toolbar y la cabecera de la tabla fija, moviendose solo las filas del body. */

    .table.table-body-scrollable {
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }

        .table.table-body-scrollable .table-toolbar {
            position: sticky;
            top: 0px;
        }

        .table.table-body-scrollable .table-header {
            position: sticky;
            top: 0px;
        }

        .table.table-body-scrollable .table-toolbar + .table-header {
            top: 65px;
        }
    /* TABLE COLUMNS SCROLLABLE*/

    .table.table-cols-scrollable {
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }

        .table.table-cols-scrollable .table-caption {
            position: sticky;
            left: 0;
        }

        .table.table-cols-scrollable .table-cols {
        }

        .table.table-cols-scrollable .table-result {
            position: sticky;
            right: 0;
        }

/**
 * FORM
 */

.form {
}

    .form .form-group {
        margin-bottom: 8px;
        padding-bottom: 8px;
        padding-top: 8px;
        margin-top: 16px;
    }

        .form .form-group label {
            font-size: smaller;
        }

        .form .form-group input[type=date],
        .form .form-group input[type=text],
        .form .form-group input[type=number],
        .form .form-group input[type=password],
        .form .form-group input[type=month],
        .form .form-group select {
            outline: none;
            border: none;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #E0E0E0;
        }

        .form .form-group ul {
            padding: 0px;
            margin: 0px;
        }

            .form .form-group ul li {
                list-style: none;
            }

                .form .form-group ul li input[type=checkbox] {
                    width: auto;
                    margin: 0px;
                }


/**
 *  RIGHTNAV
 */

.rightnav {
    position: fixed;
    top: 0px;
    left: 100%;
    width: 100%;
    height: calc(100vh);
}

    .rightnav.open {
        left: 0px;
    }

/**
 * FULL-DIALOG
 */


.dialog-full-screen {
    position: fixed;
    top: 0px;
    left: 100%;
    width: 100%;
    height: calc(100vh);
    z-index: 24;
    background-color: #ffffff;
}

    .dialog-full-screen.open {
        left: 0px;
    }

    .dialog-full-screen .dialog-full-screen-header .toolbar .toolbar-menu {
        display: inline-block;
        float: right;
        width: auto;
    }

    .dialog-full-screen .dialog-full-screen-body {
        width: 100%;
        height: calc(100vh - 56px);
        overflow-y: auto;
    }

/**
 * DIALOG
 */

.dialog {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27,27,27,0.25);
    z-index: 24;
}

    .dialog .dialog-content {
        max-width: 80%;
        max-height: 90vh;
        background-color: #FFFFFF;
        border-radius: 8px;
        box-shadow: 0 27px 30px rgba(0,0,0,0.48), 0 27px 38px rgba(0,0,0,0.15);
    }

        .dialog .dialog-content .dialog-header {
            padding: 0px 24px 0px 24px;
            font-weight: 500;
            height: 56px;
            line-height: 56px;
            font-size: large;
            color: #000000;
        }

        .dialog .dialog-content .dialog-body {
            padding: 0px 24px 0px 24px;
            overflow-y: auto;
            max-height: calc(90vh - 112px);
            /*height: calc(90vh - 112px);*/
        }

        .dialog .dialog-content .dialog-actions {
            display: inline-block;
            width: 100%;
            height: 56px;
            line-height: 56px;
        }

            .dialog .dialog-content .dialog-actions .dialog-actions-item {
                display: inline-block;
                float: right;
                padding: 8px;
                font-weight: 500;
                color: #303F9F;
                cursor: pointer;
            }

@media (min-width: 720px) {
    .dialog .dialog-content {
        max-width: 50%;
        max-height: 80vh;
    }

        .dialog .dialog-content .dialog-body {
            max-height: calc(80vh - 112px);
            /*height: calc(80vh - 112px);*/
        }
}


/**
 * SIDENAV
 */

.sidenav {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 16;
    background-color: rgba(33,33,33,0.25);
}

    .sidenav .sidenav-wrapper {
        width: 100%;
        height: 100%;
    }

    .sidenav .sidenav-content {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 56px);
        max-width: 320px;
        height: 100vh;
        background-color: #FFFFFF;
        opacity: 1;
        box-shadow: 0 24px 27px rgba(0,0,0,0.44), 0 24px 34px rgba(0,0,0,0.16);
    }

        .sidenav .sidenav-content .sidenav-header {
            padding: 16px;
            background-color: #001970;
            height: 118px;
        }

            .sidenav .sidenav-content .sidenav-header .sidenav-header-title {
                font-weight: bold;
                font-size: 24px;
            }

                .sidenav .sidenav-content .sidenav-header .sidenav-header-title .sidenav-header-title-image {
                    display: block;
                    width: 64px;
                    height: 64px;
                    line-height: 64px;
                    text-align: center;
                    cursor: pointer;
                    color: #616161;
                    border-radius: 50%;
                    background-color: #FFFFFF;
                }

            .sidenav .sidenav-content .sidenav-header .sidenav-header-subtitle {
                height: 56px;
                line-height: 56px;
                color: #ffffff;
                font-weight: 400;
            }

        .sidenav .sidenav-content .sidenav-body {
            padding: 8px 0px;
            overflow-y: auto;
            overflow-x: hidden;
            height: calc(100vh - 198px);
        }

        .sidenav .sidenav-content .sidenav-footer {
            bottom: 0px;
            position: fixed;
            width: calc(100% - 56px);
            max-width: 320px;
            background-color: white;
        }

        .sidenav .sidenav-content .sidenav-body .sidenav-item.activo {
            font-weight: 900;
            color: #303F9F;
            background-color: #e8eaf6;
            /*opacity: 0.6;*/
        }

        .sidenav .sidenav-content .sidenav-body .sidenav-item,
        .sidenav .sidenav-content .sidenav-footer .sidenav-item {
            padding: 0px 16px;
            line-height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: 500;
        }

            .sidenav .sidenav-content .sidenav-body .sidenav-item:hover,
            .sidenav .sidenav-content .sidenav-footer .sidenav-item:hover {
                background-color: #e8eaf6;
            }

            .sidenav .sidenav-content .sidenav-body .sidenav-item .material-icons,
            .sidenav .sidenav-content .sidenav-footer .sidenav-item .material-icons {
                margin-right: 16px;
            }


/**
 * FLOATBUTTON
 */

.floatbutton {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 14;
    box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
    color: #FFFFFF;
    border-radius: 50%;
    background-color: #303F9F;
}

    .floatbutton .material-icons {
        line-height: 40px;
    }

/**
 * MENU
 */

.menu {
    display: inline-block;
    z-index: 8;
    position: relative;
    line-height: 1;
}

.menu-wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
}

.menu-button {
}

.menu .menu-items {
    position: absolute;
    width: auto;
    background-color: #FFFFFF;
    right: 0;
}

    .menu .menu-items .menu-item {
        height: 48px;
        line-height: 48px;
        padding: 0px 8px;
        color: #000000;
        cursor: pointer;
        display: flex;
        align-items: center;
    }


        .menu .menu-items .menu-item:hover {
            background-color: #EEEEEE;
        }

        .menu .menu-items .menu-item .material-icons {
            padding: 0px 16px 0px 8px;
        }

/**
 * material-icons
 */

.material-icons1 {
    font-family: 'Material Icons';
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-weight: 300;
    vertical-align: text-bottom;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

    .material-icons1:after {
        line-height: 20px;
    }

.material-icons.lock:after {
    content: 'lock';
}

.material-icons.vertical_split:after {
    content: 'vertical_split';
}

.material-icons.visibility:after {
    content: 'visibility';
}

.material-icons.pie_chart:after {
    content: 'pie_chart';
}

.material-icons.view_agenda:after {
    content: 'view_agenda';
}

.material-icons.filter_list:after {
    content: 'filter_list';
}

.material-icons.reorder:after {
    content: 'reorder';
}

.material-icons.check_box:after {
    content: 'check_box';
}

.material-icons.check_box_outline_blank:after {
    content: 'check_box_outline_blank';
}

.material-icons.indeterminate_check_box:after {
    content: 'indeterminate_check_box';
}

.material-icons.arrow_upward:after {
    content: 'arrow_upward';
}

.material-icons.arrow_downward:after {
    content: 'arrow_downward';
}

/**
 * SPINNER
 */

/*.showbox {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 5%;
   }
   .loader {
       position: relative;
       margin: 0 auto;
       width: 100px;
&:before {
     content: '';
     display: block;
     padding-top: 100%;
 }
}*/

.spinner {
    /*position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    height: calc(100vh);
    background-color: rgba(27,27,27,0.25);
    z-index: 24;
}

    .spinner .loader {
        position: relative;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        top: 50vh;
        background-color: white;
        display: block;
        border-radius: 50%;
    }

        .spinner .loader .circular {
            animation: rotate 2s linear infinite;
            height: 100%;
            transform-origin: center center;
            width: 100%;
            position: absolute;
            /*top: -50%;*/
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            .spinner .loader .circular .path {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
                animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
                stroke-linecap: round;
            }

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% {
        stroke: red;
    }

    40% {
        stroke: blue;
    }

    66% {
        stroke: green;
    }

    80%, 90% {
        stroke: yellow;
    }
}

@media (min-width: 720px) {
    .spinner .loader {
        width: 100px;
        height: 100px;
    }
}


/**
 * GOOGLE CHARTS
 */

.google-charts {
    background-color: #ffffff;
    width: calc(100% - 26px);
    margin: 12px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 8px;
}

    .google-charts .google-charts-title {
        padding-left: 8px;
        height: 22px;
        line-height: 22px;
    }

    .google-charts .google-charts-body {
        width: 100%;
        margin-bottom: 4px;
    }

        .google-charts .google-charts-body .google-charts-chart {
            min-height: 200px;
            width: calc(100% - 2px); /*calc(100% - 16px);*/
        }

/**
 *SNACKBAR 
 */

.snackbar {
    width: 100%;
    bottom: 0px;
    left: 0;
    right: 0;
    animation-name: snackbar-hello;
    animation-duration: 3500ms;
    overflow: hidden;
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    z-index: 6;
    margin-bottom: 8px;
}

.snackbar-body {
    padding: 14px 24px;
    background-color: #323232;
    color: #FFF;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
    min-width: 288px;
    max-height: 568px;
}

/**
 * ALERT 
 */

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

/**
 * BUTTONS-GROUP
*/


/* Clear floats (clearfix hack) */
.buttonsgroup:after {
    content: "";
    clear: both;
    display: table;
}

.buttonsgroup button,
.buttonsgroup input[type=button],
.buttonsgroup input[type=submit] {
    background-color: white; /* Green background */
    border: 1px solid #E0E0E0; /* Green border */
    color: #616161; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}

    .buttonsgroup button:first-child,
    .buttonsgroup input[type=button]:first-child,
    .buttonsgroup input[type=submit]:first-child {
        /*border-right: none; /* Prevent double borders */
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        border-style: solid;
        border-width: 1px;
    }

    .buttonsgroup button:last-child,
    .buttonsgroup input[type=button]:last-child,
    .buttonsgroup input[type=submit]:last-child {
        /*border-right: none; /* Prevent double borders */
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        border-style: solid;
        border-width: 1px;
    }

    .buttonsgroup button:not(:last-child),
    .buttonsgroup input[type=button]:not(:last-child),
    .buttonsgroup input[type=submit]:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    /* Add a background color on hover */
    .buttonsgroup button:hover,
    .buttonsgroup input[type=button]:hover,
    .buttonsgroup input[type=submit]:hover {
        background-color: #EEEEEE;
    }