/**
 **
 ** @author      Miguel Falcón <hola@miguelfalcon.es>
 ** @copyright   2021 Miguel Falcón Castro
 ** @license     https://creativecommons.org/licenses/by-nc-nd/3.0/ Creative Commons (CC) BY-NC-ND 3.0
 ** @version     1.0.0
 ** @since       File available since Release 1.0.0
 ** @deprecated  File deprecated in Release 2.0.0
 **
 **/

/**
 **
 ** Vars & Fonts
 **
 **/

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root
{
    /** Fonts **/

    --font-titles:  'Lato';
    --font-body:  'Lato';

    --font-menu: var(--font-titles);

    --font-btn: var(--font-titles);

    /** Structure **/
    --max-width: 1200px;
    --max-width-short: 760px;
    --max-width-xshort: 460px;

    /** General **/

    --transition-time: 0.2s;

    --border-color: #dddddd;
    --border-radius: 40px;
    --button-border-radius: 50px;

    /** Colors **/

    --light: #ffffff;
    --dark: #282828;

    --primary: #2196f3;
    --on-primary: var(--light);

    --secondary: #ffea00;
    --on-secondary: var(--dark);

    --background: var(--light);
    --on-background: var(--dark);

    --surface: #f5f5f5;
    --on-surface: var(--dark);

    --error: #ff1744;
    --on-error: var(--light);

    --input: var(--light);
    --on-input: var(--dark);
    --input-focus-border: var(--dark);

    --header: var(--primary);
    --on-header: var(--on-primary);

    --footer: var(--dark);
    --on-footer: var(--light);
}

/**
 **
 ** Reset
 **
 **/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-size: inherit; line-height: inherit; font-family: inherit; letter-spacing: 0; color: inherit; background-color: inherit; border: 0; outline: 0; }
html, body { margin: 0; padding: 0; font: 400 16px/180% var(--font-body), sans-serif; color: var(--on-background); background-color: var(--background); }
html { position: relative; min-height: 100%; }
main { overflow: hidden; }

input:-internal-autofill-selected, input:-webkit-autofill, input:-webkit-autofill::first-line { font-size: inherit !important; color: var(--on-input) !important; background-color: var(--input) !important; box-shadow: 0 0 0 100px var(--input) inset !important; -webkit-text-fill-color: var(--on-input) !important; }

h1, h2, h3, h4, h5, h6 { margin: 24px 0; text-transform: uppercase; font-weight: 400; font-family: var(--font-titles), sans-serif; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin: 24px 0 0; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin: 0 0 24px; }

h1 { font-size: 36px; line-height: 140%; }
h2 { font-size: 32px; line-height: 140%; }
h3 { font-size: 28px; line-height: 140%; }
h4 { font-size: 24px; line-height: 140%; }
h5 { font-size: 20px; line-height: 140%; }
h6 { font-size: 16px; line-height: 140%; }

p { margin: 12px 0; }
p:last-child { margin: 12px 0 0; }
p:first-child { margin: 0 0 12px; }

small { font-size: 80%; }

a, button { cursor: pointer; text-decoration: none; color: var(--primary); transition: all var(--transition-time); }
a:hover, button:hover { opacity: .6; }

ul, ol { list-style-position: inside; margin: 24px 0; }
ul:last-child, ol:last-child { margin: 24px 0 0; }
ul:first-child, ol:first-child { margin: 0 0 24px; }

ul li, ol li { margin: 12px 0; }
ul li:last-child, ol li:last-child { margin: 12px 0 0; }
ul li:first-child, ol li:first-child { margin: 0 0 12px; }

ul ul, ul ol, ol ul, ol ol { padding: 0 0 0 12px; }

img { display: block; max-width: 100%; height: auto; }

/**
 **
 ** Displays & Aligment
 **
 **/

.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-h-start { justify-content: flex-start !important; }
.flex-h-center { justify-content: center !important; }
.flex-h-end { justify-content: flex-end !important; }
.flex-h-around { justify-content: space-around !important; }
.flex-h-between { justify-content: space-between !important; }

.flex-v-start { align-items: flex-start !important; }
.flex-v-center { align-items: center !important; }
.flex-v-end { align-items: flex-end !important; }
.flex-v-around { align-items: space-around !important; }
.flex-v-between { align-items: space-between !important; }

.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.flex-shrink { flex-shrink: 0; }

.t-left { text-align: left !important; }
.t-center { text-align: center !important; }
.t-right { text-align: right !important; }
.t-justify { text-align: justify !important; }

.t-muted { opacity: .6; }
.t-upper { text-transform: uppercase; }
.t-lower { text-transform: lowercase; }
.t-initial { text-transform: initial; }

.m-0 { margin: 0px !important; }
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }
.m-3 { margin: 16px !important; }
.m-4 { margin: 32px !important; }

.mt-0 { margin-top: 0px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 32px !important; }

.mr-0 { margin-right: 0px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 16px !important; }
.mr-4 { margin-right: 32px !important; }

.mb-0 { margin-bottom: 0px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 32px !important; }

.ml-0 { margin-left: 0px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 16px !important; }
.ml-4 { margin-left: 32px !important; }

.p-0 { padding: 0px !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 32px !important; }

.pt-0 { padding-top: 0px !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pt-4 { padding-top: 32px !important; }

.pr-0 { padding-right: 0px !important; }
.pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; }
.pr-3 { padding-right: 16px !important; }
.pr-4 { padding-right: 32px !important; }

.pb-0 { padding-bottom: 0px !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.pb-4 { padding-bottom: 32px !important; }

.pl-0 { padding-left: 0px !important; }
.pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }
.pl-3 { padding-left: 16px !important; }
.pl-4 { padding-left: 32px !important; }

.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-right { border-right: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-left { border-left: 1px solid var(--border-color); }

.rounded { overflow: hidden; border-radius: var(--border-radius); }

/**
 **
 ** Colors
 **
 **/

.t-light { color: var(--light); }
.b-light { background-color: var(--light); }

.t-dark { color: var(--dark); }
.b-dark { background-color: var(--dark); }

.t-primary { color: var(--primary); }
.b-primary { background-color: var(--primary); }

.t-secondary { color: var(--secondary); }
.b-secondary { background-color: var(--secondary); }

.t-surface { color: var(--surface); }
.b-surface { background-color: var(--surface); }

.t-error { color: var(--error); }
.b-error { background-color: var(--error); }

/**
 **
 ** Buttons
 **
 **/

.btn { position: relative; display: inline-flex; justify-content: center; align-items: center; margin: 4px 1px; padding: 12px 24px; text-transform: uppercase; text-align: center; font: 400 12px/120% var(--font-btn), sans-serif; letter-spacing: 0.1em; color: var(--on-surface); background-color: var(--surface); border-radius: var(--button-border-radius); box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); }
.btn.noshadow { padding: 0; box-shadow: none !important; }
.btn:hover { opacity: 1; box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); }
.btn.action { width: 56px; height: 56px; padding: 4px; border-radius: 50%; box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%); }
.btn.action:hover { box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%); }
.btn .material-icons, .btn img { margin: 0 4px 0 0; font-size: 120%; }
.btn.action .material-icons, .btn img { margin: 0; font-size: 160%  ; }
.btn.light { color: var(--dark); background-color: var(--light); }
.btn.dark { color: var(--light); background-color: var(--dark); }
.btn.primary { color: var(--on-primary); background-color: var(--primary); }
.btn.secondary { color: var(--on-secondary); background-color: var(--secondary); }
.btn.error { color: var(--on-error); background-color: var(--error); }

/**
 **
 ** Structure
 **
 **/

.content { padding: 32px; }

.wrap { max-width: var(--max-width); margin: 0 auto; }
.wrap.short { max-width: var(--max-width-short); }
.wrap.full { max-width: 100%; }


/**
 **
 ** Grids
 **
 **/

.row { display: flex; flex-wrap: wrap; margin: -16px; }
.row .col { padding: 16px; }

.row .col.c-1 { width: 8.333%; }
.row .col.c-2 { width: 16.666%; }
.row .col.c-3 { width: 25%; }
.row .col.c-4 { width: 33.333%; }
.row .col.c-5 { width: 41.666%; }
.row .col.c-6 { width: 50%; }
.row .col.c-7 { width: 58.333%; }
.row .col.c-8 { width: 66.666%; }
.row .col.c-9 { width: 75%; }
.row .col.c-10 { width: 83.333%; }
.row .col.c-11 { width: 91.666%; }
.row .col.c-12 { width: 100%; }

/**
 **
 ** Header
 **
 **/

header { z-index: 999; position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); transition: all var(--transition-time); }
.header { color: var(--on-header); background-color: var(--header); }

/**
 **
 ** Footer  
 **
 **/

footer { position: absolute; left: 0; bottom: 0; display: block; width: 100%; }
.footer { color: var(--on-footer); background-color: var(--footer); }

/**
 **
 ** Tables
 **
 **/

table { overflow-x: auto; width: 100%; border-collapse: collapse; text-align: left; }
table thead, table thead tr { color: var(--on-primary); background-color: var(--primary); }
table tr { background-color: var(--light); }
table tr:nth-child(even) { background-color: var(--surface); }
table tr th, table tr td { white-space: nowrap; padding: 16px; border: 0; }

/**
 **
 ** Forms
 **
 **/

form .group { margin: 16px 0; }
form .group:last-child { margin: 16px 0 0; }
form .group:first-child { margin: 0 0 16px; }
form .group .input { position: relative; }
form .group .input input { width: 100%; padding: 16px; color: var(--on-input); background-color: var(--input); border: 1px solid var(--border-color); border-radius: var(--button-border-radius); transition: all var(--transition-time); }
form .group .input label { cursor: text; position: absolute; top: 50%; left: 16px; color: var(--on-input); background-color: var(--input); transform: translateY(-50%); transition: all var(--transition-time); }
form .group .input input:focus, form .group .input input.writed { border-color: var(--input-focus-border); }
form .group .input.error input, form .group .input.error input:focus, form .group .input.error input.writed { border-color: var(--error); }
form .group .input input.error { border-color: var(--error); }
form .group .input input:focus + label, form .group .input input.writed + label, form .group .input input.error + label { top: 0%; left: 8px; font-size: 80%; padding: 0 8px; }
form .group .help { opacity: .6; display: block; margin: 4px 0 0; font-size: 80%; }

/**
 **
 ** Responsive
 **
 **/

@media(max-width: 1239px)
{

}

@media(max-width: 903px)
{

    /**
     **
     ** Displays & Aligment
     **
     **/

    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }

    .flex-sm-h-start { justify-content: flex-start !important; }
    .flex-sm-h-center { justify-content: center !important; }
    .flex-sm-h-end { justify-content: flex-end !important; }
    .flex-sm-h-around { justify-content: space-around !important; }
    .flex-sm-h-between { justify-content: space-between !important; }

    .flex-sm-v-start { align-items: flex-start !important; }
    .flex-sm-v-center { align-items: center !important; }
    .flex-sm-v-end { align-items: flex-end !important; }
    .flex-sm-v-around { align-items: space-around !important; }
    .flex-sm-v-between { align-items: space-between !important; }

    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-row-reverse { flex-direction: row-reverse !important; }
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-column-reverse { flex-direction: column-reverse !important; }

    .flex-sm-wrap { flex-wrap: wrap !important; }
    .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .flex-sm-nowrap { flex-wrap: nowrap !important; }

    .flex-sm-shrink { flex-shrink: 0; }

    .t-sm-left { text-align: left !important; }
    .t-sm-center { text-align: center !important; }
    .t-sm-right { text-align: right !important; }
    .t-sm-justify { text-align: justify !important; }

    .t-sm-muted { opacity: .6; }
    .t-sm-upper { text-transform: uppercase; }
    .t-sm-lower { text-transform: lowercase; }

    .m-sm-0 { margin: 0px !important; }
    .m-sm-1 { margin: 4px !important; }
    .m-sm-2 { margin: 8px !important; }
    .m-sm-3 { margin: 16px !important; }
    .m-sm-4 { margin: 32px !important; }

    .mt-sm-0 { margin-top: 0px !important; }
    .mt-sm-1 { margin-top: 4px !important; }
    .mt-sm-2 { margin-top: 8px !important; }
    .mt-sm-3 { margin-top: 16px !important; }
    .mt-sm-4 { margin-top: 32px !important; }

    .mr-sm-0 { margin-right: 0px !important; }
    .mr-sm-1 { margin-right: 4px !important; }
    .mr-sm-2 { margin-right: 8px !important; }
    .mr-sm-3 { margin-right: 16px !important; }
    .mr-sm-4 { margin-right: 32px !important; }

    .mb-sm-0 { margin-bottom: 0px !important; }
    .mb-sm-1 { margin-bottom: 4px !important; }
    .mb-sm-2 { margin-bottom: 8px !important; }
    .mb-sm-3 { margin-bottom: 16px !important; }
    .mb-sm-4 { margin-bottom: 32px !important; }

    .ml-sm-0 { margin-left: 0px !important; }
    .ml-sm-1 { margin-left: 4px !important; }
    .ml-sm-2 { margin-left: 8px !important; }
    .ml-sm-3 { margin-left: 16px !important; }
    .ml-sm-4 { margin-left: 32px !important; }

    .p-sm-0 { padding: 0px !important; }
    .p-sm-1 { padding: 4px !important; }
    .p-sm-2 { padding: 8px !important; }
    .p-sm-3 { padding: 16px !important; }
    .p-sm-4 { padding: 32px !important; }

    .pt-sm-0 { padding-top: 0px !important; }
    .pt-sm-1 { padding-top: 4px !important; }
    .pt-sm-2 { padding-top: 8px !important; }
    .pt-sm-3 { padding-top: 16px !important; }
    .pt-sm-4 { padding-top: 32px !important; }

    .pr-sm-0 { padding-right: 0px !important; }
    .pr-sm-1 { padding-right: 4px !important; }
    .pr-sm-2 { padding-right: 8px !important; }
    .pr-sm-3 { padding-right: 16px !important; }
    .pr-sm-4 { padding-right: 32px !important; }

    .pb-sm-0 { padding-bottom: 0px !important; }
    .pb-sm-1 { padding-bottom: 4px !important; }
    .pb-sm-2 { padding-bottom: 8px !important; }
    .pb-sm-3 { padding-bottom: 16px !important; }
    .pb-sm-4 { padding-bottom: 32px !important; }

    .pl-sm-0 { padding-left: 0px !important; }
    .pl-sm-1 { padding-left: 4px !important; }
    .pl-sm-2 { padding-left: 8px !important; }
    .pl-sm-3 { padding-left: 16px !important; }
    .pl-sm-4 { padding-left: 32px !important; }

    .border-sm { border: 1px solid var(--border-color); }
    .border-sm-top { border-top: 1px solid var(--border-color); }
    .border-sm-right { border-right: 1px solid var(--border-color); }
    .border-sm-bottom { border-bottom: 1px solid var(--border-color); }
    .border-sm-left { border-left: 1px solid var(--border-color); }

    .rounded-sm { overflow: hidden; border-radius: var(--border-radius); }

    /**
     **
     ** Structure
     **
     **/

    .wrap { max-width: var(--max-width-short); }

    /**
     **
     ** Grids
     **
     **/

    .row .col.c-sm-1 { width: 8.333%; }
    .row .col.c-sm-2 { width: 16.666%; }
    .row .col.c-sm-3 { width: 25%; }
    .row .col.c-sm-4 { width: 33.333%; }
    .row .col.c-sm-5 { width: 41.666%; }
    .row .col.c-sm-6 { width: 50%; }
    .row .col.c-sm-7 { width: 58.333%; }
    .row .col.c-sm-8 { width: 66.666%; }
    .row .col.c-sm-9 { width: 75%; }
    .row .col.c-sm-10 { width: 83.333%; }
    .row .col.c-sm-11 { width: 91.666%; }
    .row .col.c-sm-12 { width: 100%; }

}

@media(max-width: 767px)
{

    /**
     **
     ** Tables
     **
     **/

    table { display: block; }
    
}

@media(max-width: 599px)
{

    /**
     **
     ** Structure
     **
     **/

    .content { padding: 32px 16px; }

    /**
     **
     ** Structure
     **
     **/

    .wrap { max-width: var(--max-width-xshort); }
    .wrap.short { max-width: var(--max-width-xshort); }

    /**
     **
     ** Grids
     **
     **/

    .row .col { width: 100% !important; }

    .row .col.c-xsm-1 { width: 8.333% !important; }
    .row .col.c-xsm-2 { width: 16.666% !important; }
    .row .col.c-xsm-3 { width: 25% !important; }
    .row .col.c-xsm-4 { width: 33.333% !important; }
    .row .col.c-xsm-5 { width: 41.666% !important; }
    .row .col.c-xsm-6 { width: 50% !important; }
    .row .col.c-xsm-7 { width: 58.333% !important; }
    .row .col.c-xsm-8 { width: 66.666% !important; }
    .row .col.c-xsm-9 { width: 75% !important; }
    .row .col.c-xsm-10 { width: 83.333% !important; }
    .row .col.c-xsm-11 { width: 91.666% !important; }
    .row .col.c-xsm-12 { width: 100% !important; }

}