/* https://fonts.google.com/icons */

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* 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';
}

/*
    VARIABLES
*/

:root {
    --fontSystem: BlinkMacSystemFont,-apple-system,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',Helvetica,sans-serif;
    --monospace: 'SFMono-Regular',Consolas,Menlo,Courier,monospace;
    --numbers: 'Fjalla One',sans-serif;
    --text: 'Roboto Condensed',sans-serif;
    --black: #111;
    --white: #fff;
    --grey: #8e8e8e;
    --grey-light: #e0e0e0;
    --grey-dark: #aeaeae;
    --green: #a2fcc1;
    --green-light: #a2fcc1b3;
    --green-dark: #5cba95;
    --orange: #ffae3a;
    --orange-light: #ffae3ab3;
    --orange-dark: #e86d5f;
    --red: #ec1d2f;
    --red-light: #ec1d2fb3;
    --red-dark: #8c1540;
}

/*

*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    color: var(--black);
    font-family: var(--text);
    font-size: 1rem;
    position: relative
}

body {
    margin: 0;
    line-height: 1.5em;
    color: #333;
    font-weight: 400;
    overflow-y: hidden;
    /*evitar seleccionar texto*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*
    SCROLLBAR
*/

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    -webkit-border-radius: 10px;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 0;
    background: #bdbdbd;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
}

    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0,0,0,.14);
    }

* {
    scrollbar-base-color: #757575;
    scrollbar-3dlight-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #bdbdbd;
    scrollbar-shadow-color: #bdbdbd;
    scrollbar-dark-shadow-color: #bdbdbd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/*
    TITULOS
*/

.titulo1 {
    font-size: xx-large;
    margin: 12px 0px;
}

.titulo1 {
    font-size: x-large;
    margin: 10px 0px;
}

.titulo3 {
    font-size: large;
    margin: 8px 0px;
}

/*
    CONTROLES PRIMARIOS
*/
button,
input[type=button],
input[type=submit] {
    background-color: var(--orange);
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--white);
    border-radius: 16px;
}

input[type=text],
input[type=password],
input[type=date],
input[type=month] {
    width: 100%;
}

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: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background-color: #ffffff;
}

select,
input[type=text],
input[type=password],
input[type=date],
input[type=month],
input[type=checkbox] {
    font-size: large;
    outline: none;
    border: none;
    border-radius: 8px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #E0E0E0;
    font-family: var(--text);
}

/*
    CONTROLES PERSONALIZADOS
*/

/* CARD */

.card {
    background-color: var(--white);
    border-radius: 8px;
}

/* LISTVIEW */

.listView {
    overflow-y: auto;
}

/* LINE */

.line {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--grey-light);
}


/**
 * 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);*/
        }
}