/**
 * Based on Framework7 style subset (custom build)
 * Copyright 2017, Vladimir Kharlampidi
 * Made by Abel T. Oset, http://www.aoset.com
 */
html,
body{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}
body{
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #212121;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    background: #FFF;
    overflow: hidden;
}
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}
a,
input,
textarea,
select{
    outline: 0;
}
a{
    text-decoration: none;
    color: #2196F3;
}
p{
    margin: 1em 0;
}
/* Grid */
.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.row > [class*="col-"]{
    box-sizing: border-box;
}
.row .col-auto{
    width: 100%;
}
.row .col-100{
    width: 100%;
    width: -webkit-calc((100% - 16px * 0) / 1);
    width: calc((100% - 16px * 0) / 1);
}
.row.no-gutter .col-100{
    width: 100%;
}
.row .col-95{
    width: 95%;
    width: -webkit-calc((100% - 16px * 0.05263157894736836) / 1.0526315789473684);
    width: calc((100% - 16px * 0.05263157894736836) / 1.0526315789473684);
}
.row.no-gutter .col-95{
    width: 95%;
}
.row .col-90{
    width: 90%;
    width: -webkit-calc((100% - 16px * 0.11111111111111116) / 1.1111111111111112);
    width: calc((100% - 16px * 0.11111111111111116) / 1.1111111111111112);
}
.row.no-gutter .col-90{
    width: 90%;
}
.row .col-85{
    width: 85%;
    width: -webkit-calc((100% - 16px * 0.17647058823529416) / 1.1764705882352942);
    width: calc((100% - 16px * 0.17647058823529416) / 1.1764705882352942);
}
.row.no-gutter .col-85{
    width: 85%;
}
.row .col-80{
    width: 80%;
    width: -webkit-calc((100% - 16px * 0.25) / 1.25);
    width: calc((100% - 16px * 0.25) / 1.25);
}
.row.no-gutter .col-80{
    width: 80%;
}
.row .col-75{
    width: 75%;
    width: -webkit-calc((100% - 16px * 0.33333333333333326) / 1.3333333333333333);
    width: calc((100% - 16px * 0.33333333333333326) / 1.3333333333333333);
}
.row.no-gutter .col-75{
    width: 75%;
}
.row .col-70{
    width: 70%;
    width: -webkit-calc((100% - 16px * 0.4285714285714286) / 1.4285714285714286);
    width: calc((100% - 16px * 0.4285714285714286) / 1.4285714285714286);
}
.row.no-gutter .col-70{
    width: 70%;
}
.row .col-66{
    width: 66.66666666666666%;
    width: -webkit-calc((100% - 16px * 0.5000000000000002) / 1.5000000000000002);
    width: calc((100% - 16px * 0.5000000000000002) / 1.5000000000000002);
}
.row.no-gutter .col-66{
    width: 66.66666666666666%;
}
.row .col-65{
    width: 65%;
    width: -webkit-calc((100% - 16px * 0.5384615384615385) / 1.5384615384615385);
    width: calc((100% - 16px * 0.5384615384615385) / 1.5384615384615385);
}
.row.no-gutter .col-65{
    width: 65%;
}
.row .col-60{
    width: 60%;
    width: -webkit-calc((100% - 16px * 0.6666666666666667) / 1.6666666666666667);
    width: calc((100% - 16px * 0.6666666666666667) / 1.6666666666666667);
}
.row.no-gutter .col-60{
    width: 60%;
}
.row .col-55{
    width: 55%;
    width: -webkit-calc((100% - 16px * 0.8181818181818181) / 1.8181818181818181);
    width: calc((100% - 16px * 0.8181818181818181) / 1.8181818181818181);
}
.row.no-gutter .col-55{
    width: 55%;
}
.row .col-50{
    width: 50%;
    width: -webkit-calc((100% - 16px * 1) / 2);
    width: calc((100% - 16px * 1) / 2);
}
.row.no-gutter .col-50{
    width: 50%;
}
.row .col-45{
    width: 45%;
    width: -webkit-calc((100% - 16px * 1.2222222222222223) / 2.2222222222222223);
    width: calc((100% - 16px * 1.2222222222222223) / 2.2222222222222223);
}
.row.no-gutter .col-45{
    width: 45%;
}
.row .col-40{
    width: 40%;
    width: -webkit-calc((100% - 16px * 1.5) / 2.5);
    width: calc((100% - 16px * 1.5) / 2.5);
}
.row.no-gutter .col-40{
    width: 40%;
}
.row .col-35{
    width: 35%;
    width: -webkit-calc((100% - 16px * 1.8571428571428572) / 2.857142857142857);
    width: calc((100% - 16px * 1.8571428571428572) / 2.857142857142857);
}
.row.no-gutter .col-35{
    width: 35%;
}
.row .col-33{
    width: 33.333333333333336%;
    width: -webkit-calc((100% - 16px * 2) / 3);
    width: calc((100% - 16px * 2) / 3);
}
.row.no-gutter .col-33{
    width: 33.333333333333336%;
}
.row .col-30{
    width: 30%;
    width: -webkit-calc((100% - 16px * 2.3333333333333335) / 3.3333333333333335);
    width: calc((100% - 16px * 2.3333333333333335) / 3.3333333333333335);
}
.row.no-gutter .col-30{
    width: 30%;
}
.row .col-25{
    width: 25%;
    width: -webkit-calc((100% - 16px * 3) / 4);
    width: calc((100% - 16px * 3) / 4);
}
.row.no-gutter .col-25{
    width: 25%;
}
.row .col-20{
    width: 20%;
    width: -webkit-calc((100% - 16px * 4) / 5);
    width: calc((100% - 16px * 4) / 5);
}
.row.no-gutter .col-20{
    width: 20%;
}
.row .col-15{
    width: 15%;
    width: -webkit-calc((100% - 16px * 5.666666666666667) / 6.666666666666667);
    width: calc((100% - 16px * 5.666666666666667) / 6.666666666666667);
}
.row.no-gutter .col-15{
    width: 15%;
}
.row .col-10{
    width: 10%;
    width: -webkit-calc((100% - 16px * 9) / 10);
    width: calc((100% - 16px * 9) / 10);
}
.row.no-gutter .col-10{
    width: 10%;
}
.row .col-5{
    width: 5%;
    width: -webkit-calc((100% - 16px * 19) / 20);
    width: calc((100% - 16px * 19) / 20);
}
.row.no-gutter .col-5{
    width: 5%;
}
.row .col-auto:nth-last-child(1),
.row .col-auto:nth-last-child(1) ~ .col-auto{
    width: 100%;
    width: -webkit-calc((100% - 16px * 0) / 1);
    width: calc((100% - 16px * 0) / 1);
}
.row.no-gutter .col-auto:nth-last-child(1),
.row.no-gutter .col-auto:nth-last-child(1) ~ .col-auto{
    width: 100%;
}
.row .col-auto:nth-last-child(2),
.row .col-auto:nth-last-child(2) ~ .col-auto{
    width: 50%;
    width: -webkit-calc((100% - 16px * 1) / 2);
    width: calc((100% - 16px * 1) / 2);
}
.row.no-gutter .col-auto:nth-last-child(2),
.row.no-gutter .col-auto:nth-last-child(2) ~ .col-auto{
    width: 50%;
}
.row .col-auto:nth-last-child(3),
.row .col-auto:nth-last-child(3) ~ .col-auto{
    width: 33.33333333%;
    width: -webkit-calc((100% - 16px * 2) / 3);
    width: calc((100% - 16px * 2) / 3);
}
.row.no-gutter .col-auto:nth-last-child(3),
.row.no-gutter .col-auto:nth-last-child(3) ~ .col-auto{
    width: 33.33333333%;
}
.row .col-auto:nth-last-child(4),
.row .col-auto:nth-last-child(4) ~ .col-auto{
    width: 25%;
    width: -webkit-calc((100% - 16px * 3) / 4);
    width: calc((100% - 16px * 3) / 4);
}
.row.no-gutter .col-auto:nth-last-child(4),
.row.no-gutter .col-auto:nth-last-child(4) ~ .col-auto{
    width: 25%;
}
.row .col-auto:nth-last-child(5),
.row .col-auto:nth-last-child(5) ~ .col-auto{
    width: 20%;
    width: -webkit-calc((100% - 16px * 4) / 5);
    width: calc((100% - 16px * 4) / 5);
}
.row.no-gutter .col-auto:nth-last-child(5),
.row.no-gutter .col-auto:nth-last-child(5) ~ .col-auto{
    width: 20%;
}
.row .col-auto:nth-last-child(6),
.row .col-auto:nth-last-child(6) ~ .col-auto{
    width: 16.66666667%;
    width: -webkit-calc((100% - 16px * 5) / 6);
    width: calc((100% - 16px * 5) / 6);
}
.row.no-gutter .col-auto:nth-last-child(6),
.row.no-gutter .col-auto:nth-last-child(6) ~ .col-auto{
    width: 16.66666667%;
}
.row .col-auto:nth-last-child(7),
.row .col-auto:nth-last-child(7) ~ .col-auto{
    width: 14.28571429%;
    width: -webkit-calc((100% - 16px * 6) / 7);
    width: calc((100% - 16px * 6) / 7);
}
.row.no-gutter .col-auto:nth-last-child(7),
.row.no-gutter .col-auto:nth-last-child(7) ~ .col-auto{
    width: 14.28571429%;
}
.row .col-auto:nth-last-child(8),
.row .col-auto:nth-last-child(8) ~ .col-auto{
    width: 12.5%;
    width: -webkit-calc((100% - 16px * 7) / 8);
    width: calc((100% - 16px * 7) / 8);
}
.row.no-gutter .col-auto:nth-last-child(8),
.row.no-gutter .col-auto:nth-last-child(8) ~ .col-auto{
    width: 12.5%;
}
.row .col-auto:nth-last-child(9),
.row .col-auto:nth-last-child(9) ~ .col-auto{
    width: 11.11111111%;
    width: -webkit-calc((100% - 16px * 8) / 9);
    width: calc((100% - 16px * 8) / 9);
}
.row.no-gutter .col-auto:nth-last-child(9),
.row.no-gutter .col-auto:nth-last-child(9) ~ .col-auto{
    width: 11.11111111%;
}
.row .col-auto:nth-last-child(10),
.row .col-auto:nth-last-child(10) ~ .col-auto{
    width: 10%;
    width: -webkit-calc((100% - 16px * 9) / 10);
    width: calc((100% - 16px * 9) / 10);
}
.row.no-gutter .col-auto:nth-last-child(10),
.row.no-gutter .col-auto:nth-last-child(10) ~ .col-auto{
    width: 10%;
}
.row .col-auto:nth-last-child(11),
.row .col-auto:nth-last-child(11) ~ .col-auto{
    width: 9.09090909%;
    width: -webkit-calc((100% - 16px * 10) / 11);
    width: calc((100% - 16px * 10) / 11);
}
.row.no-gutter .col-auto:nth-last-child(11),
.row.no-gutter .col-auto:nth-last-child(11) ~ .col-auto{
    width: 9.09090909%;
}
.row .col-auto:nth-last-child(12),
.row .col-auto:nth-last-child(12) ~ .col-auto{
    width: 8.33333333%;
    width: -webkit-calc((100% - 16px * 11) / 12);
    width: calc((100% - 16px * 11) / 12);
}
.row.no-gutter .col-auto:nth-last-child(12),
.row.no-gutter .col-auto:nth-last-child(12) ~ .col-auto{
    width: 8.33333333%;
}
.row .col-auto:nth-last-child(13),
.row .col-auto:nth-last-child(13) ~ .col-auto{
    width: 7.69230769%;
    width: -webkit-calc((100% - 16px * 12) / 13);
    width: calc((100% - 16px * 12) / 13);
}
.row.no-gutter .col-auto:nth-last-child(13),
.row.no-gutter .col-auto:nth-last-child(13) ~ .col-auto{
    width: 7.69230769%;
}
.row .col-auto:nth-last-child(14),
.row .col-auto:nth-last-child(14) ~ .col-auto{
    width: 7.14285714%;
    width: -webkit-calc((100% - 16px * 13) / 14);
    width: calc((100% - 16px * 13) / 14);
}
.row.no-gutter .col-auto:nth-last-child(14),
.row.no-gutter .col-auto:nth-last-child(14) ~ .col-auto{
    width: 7.14285714%;
}
.row .col-auto:nth-last-child(15),
.row .col-auto:nth-last-child(15) ~ .col-auto{
    width: 6.66666667%;
    width: -webkit-calc((100% - 16px * 14) / 15);
    width: calc((100% - 16px * 14) / 15);
}
.row.no-gutter .col-auto:nth-last-child(15),
.row.no-gutter .col-auto:nth-last-child(15) ~ .col-auto{
    width: 6.66666667%;
}
.row .col-auto:nth-last-child(16),
.row .col-auto:nth-last-child(16) ~ .col-auto{
    width: 6.25%;
    width: -webkit-calc((100% - 16px * 15) / 16);
    width: calc((100% - 16px * 15) / 16);
}
.row.no-gutter .col-auto:nth-last-child(16),
.row.no-gutter .col-auto:nth-last-child(16) ~ .col-auto{
    width: 6.25%;
}
.row .col-auto:nth-last-child(17),
.row .col-auto:nth-last-child(17) ~ .col-auto{
    width: 5.88235294%;
    width: -webkit-calc((100% - 16px * 16) / 17);
    width: calc((100% - 16px * 16) / 17);
}
.row.no-gutter .col-auto:nth-last-child(17),
.row.no-gutter .col-auto:nth-last-child(17) ~ .col-auto{
    width: 5.88235294%;
}
.row .col-auto:nth-last-child(18),
.row .col-auto:nth-last-child(18) ~ .col-auto{
    width: 5.55555556%;
    width: -webkit-calc((100% - 16px * 17) / 18);
    width: calc((100% - 16px * 17) / 18);
}
.row.no-gutter .col-auto:nth-last-child(18),
.row.no-gutter .col-auto:nth-last-child(18) ~ .col-auto{
    width: 5.55555556%;
}
.row .col-auto:nth-last-child(19),
.row .col-auto:nth-last-child(19) ~ .col-auto{
    width: 5.26315789%;
    width: -webkit-calc((100% - 16px * 18) / 19);
    width: calc((100% - 16px * 18) / 19);
}
.row.no-gutter .col-auto:nth-last-child(19),
.row.no-gutter .col-auto:nth-last-child(19) ~ .col-auto{
    width: 5.26315789%;
}
.row .col-auto:nth-last-child(20),
.row .col-auto:nth-last-child(20) ~ .col-auto{
    width: 5%;
    width: -webkit-calc((100% - 16px * 19) / 20);
    width: calc((100% - 16px * 19) / 20);
}
.row.no-gutter .col-auto:nth-last-child(20),
.row.no-gutter .col-auto:nth-last-child(20) ~ .col-auto{
    width: 5%;
}
.row .col-auto:nth-last-child(21),
.row .col-auto:nth-last-child(21) ~ .col-auto{
    width: 4.76190476%;
    width: -webkit-calc((100% - 16px * 20) / 21);
    width: calc((100% - 16px * 20) / 21);
}
.row.no-gutter .col-auto:nth-last-child(21),
.row.no-gutter .col-auto:nth-last-child(21) ~ .col-auto{
    width: 4.76190476%;
}
@media all and (min-width: 768px){
    .row .tablet-100{
        width: 100%;
        width: -webkit-calc((100% - 16px * 0) / 1);
        width: calc((100% - 16px * 0) / 1);
    }
    .row.no-gutter .tablet-100{
        width: 100%;
    }
    .row .tablet-95{
        width: 95%;
        width: -webkit-calc((100% - 16px * 0.05263157894736836) / 1.0526315789473684);
        width: calc((100% - 16px * 0.05263157894736836) / 1.0526315789473684);
    }
    .row.no-gutter .tablet-95{
        width: 95%;
    }
    .row .tablet-90{
        width: 90%;
        width: -webkit-calc((100% - 16px * 0.11111111111111116) / 1.1111111111111112);
        width: calc((100% - 16px * 0.11111111111111116) / 1.1111111111111112);
    }
    .row.no-gutter .tablet-90{
        width: 90%;
    }
    .row .tablet-85{
        width: 85%;
        width: -webkit-calc((100% - 16px * 0.17647058823529416) / 1.1764705882352942);
        width: calc((100% - 16px * 0.17647058823529416) / 1.1764705882352942);
    }
    .row.no-gutter .tablet-85{
        width: 85%;
    }
    .row .tablet-80{
        width: 80%;
        width: -webkit-calc((100% - 16px * 0.25) / 1.25);
        width: calc((100% - 16px * 0.25) / 1.25);
    }
    .row.no-gutter .tablet-80{
        width: 80%;
    }
    .row .tablet-75{
        width: 75%;
        width: -webkit-calc((100% - 16px * 0.33333333333333326) / 1.3333333333333333);
        width: calc((100% - 16px * 0.33333333333333326) / 1.3333333333333333);
    }
    .row.no-gutter .tablet-75{
        width: 75%;
    }
    .row .tablet-70{
        width: 70%;
        width: -webkit-calc((100% - 16px * 0.4285714285714286) / 1.4285714285714286);
        width: calc((100% - 16px * 0.4285714285714286) / 1.4285714285714286);
    }
    .row.no-gutter .tablet-70{
        width: 70%;
    }
    .row .tablet-66{
        width: 66.66666666666666%;
        width: -webkit-calc((100% - 16px * 0.5000000000000002) / 1.5000000000000002);
        width: calc((100% - 16px * 0.5000000000000002) / 1.5000000000000002);
    }
    .row.no-gutter .tablet-66{
        width: 66.66666666666666%;
    }
    .row .tablet-65{
        width: 65%;
        width: -webkit-calc((100% - 16px * 0.5384615384615385) / 1.5384615384615385);
        width: calc((100% - 16px * 0.5384615384615385) / 1.5384615384615385);
    }
    .row.no-gutter .tablet-65{
        width: 65%;
    }
    .row .tablet-60{
        width: 60%;
        width: -webkit-calc((100% - 16px * 0.6666666666666667) / 1.6666666666666667);
        width: calc((100% - 16px * 0.6666666666666667) / 1.6666666666666667);
    }
    .row.no-gutter .tablet-60{
        width: 60%;
    }
    .row .tablet-55{
        width: 55%;
        width: -webkit-calc((100% - 16px * 0.8181818181818181) / 1.8181818181818181);
        width: calc((100% - 16px * 0.8181818181818181) / 1.8181818181818181);
    }
    .row.no-gutter .tablet-55{
        width: 55%;
    }
    .row .tablet-50{
        width: 50%;
        width: -webkit-calc((100% - 16px * 1) / 2);
        width: calc((100% - 16px * 1) / 2);
    }
    .row.no-gutter .tablet-50{
        width: 50%;
    }
    .row .tablet-45{
        width: 45%;
        width: -webkit-calc((100% - 16px * 1.2222222222222223) / 2.2222222222222223);
        width: calc((100% - 16px * 1.2222222222222223) / 2.2222222222222223);
    }
    .row.no-gutter .tablet-45{
        width: 45%;
    }
    .row .tablet-40{
        width: 40%;
        width: -webkit-calc((100% - 16px * 1.5) / 2.5);
        width: calc((100% - 16px * 1.5) / 2.5);
    }
    .row.no-gutter .tablet-40{
        width: 40%;
    }
    .row .tablet-35{
        width: 35%;
        width: -webkit-calc((100% - 16px * 1.8571428571428572) / 2.857142857142857);
        width: calc((100% - 16px * 1.8571428571428572) / 2.857142857142857);
    }
    .row.no-gutter .tablet-35{
        width: 35%;
    }
    .row .tablet-33{
        width: 33.333333333333336%;
        width: -webkit-calc((100% - 16px * 2) / 3);
        width: calc((100% - 16px * 2) / 3);
    }
    .row.no-gutter .tablet-33{
        width: 33.333333333333336%;
    }
    .row .tablet-30{
        width: 30%;
        width: -webkit-calc((100% - 16px * 2.3333333333333335) / 3.3333333333333335);
        width: calc((100% - 16px * 2.3333333333333335) / 3.3333333333333335);
    }
    .row.no-gutter .tablet-30{
        width: 30%;
    }
    .row .tablet-25{
        width: 25%;
        width: -webkit-calc((100% - 16px * 3) / 4);
        width: calc((100% - 16px * 3) / 4);
    }
    .row.no-gutter .tablet-25{
        width: 25%;
    }
    .row .tablet-20{
        width: 20%;
        width: -webkit-calc((100% - 16px * 4) / 5);
        width: calc((100% - 16px * 4) / 5);
    }
    .row.no-gutter .tablet-20{
        width: 20%;
    }
    .row .tablet-15{
        width: 15%;
        width: -webkit-calc((100% - 16px * 5.666666666666667) / 6.666666666666667);
        width: calc((100% - 16px * 5.666666666666667) / 6.666666666666667);
    }
    .row.no-gutter .tablet-15{
        width: 15%;
    }
    .row .tablet-10{
        width: 10%;
        width: -webkit-calc((100% - 16px * 9) / 10);
        width: calc((100% - 16px * 9) / 10);
    }
    .row.no-gutter .tablet-10{
        width: 10%;
    }
    .row .tablet-5{
        width: 5%;
        width: -webkit-calc((100% - 16px * 19) / 20);
        width: calc((100% - 16px * 19) / 20);
    }
    .row.no-gutter .tablet-5{
        width: 5%;
    }
    .row .tablet-auto:nth-last-child(1),
    .row .tablet-auto:nth-last-child(1) ~ .col-auto{
        width: 100%;
        width: -webkit-calc((100% - 16px * 0) / 1);
        width: calc((100% - 16px * 0) / 1);
    }
    .row.no-gutter .tablet-auto:nth-last-child(1),
    .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto{
        width: 100%;
    }
    .row .tablet-auto:nth-last-child(2),
    .row .tablet-auto:nth-last-child(2) ~ .col-auto{
        width: 50%;
        width: -webkit-calc((100% - 16px * 1) / 2);
        width: calc((100% - 16px * 1) / 2);
    }
    .row.no-gutter .tablet-auto:nth-last-child(2),
    .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto{
        width: 50%;
    }
    .row .tablet-auto:nth-last-child(3),
    .row .tablet-auto:nth-last-child(3) ~ .col-auto{
        width: 33.33333333%;
        width: -webkit-calc((100% - 16px * 2) / 3);
        width: calc((100% - 16px * 2) / 3);
    }
    .row.no-gutter .tablet-auto:nth-last-child(3),
    .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto{
        width: 33.33333333%;
    }
    .row .tablet-auto:nth-last-child(4),
    .row .tablet-auto:nth-last-child(4) ~ .col-auto{
        width: 25%;
        width: -webkit-calc((100% - 16px * 3) / 4);
        width: calc((100% - 16px * 3) / 4);
    }
    .row.no-gutter .tablet-auto:nth-last-child(4),
    .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto{
        width: 25%;
    }
    .row .tablet-auto:nth-last-child(5),
    .row .tablet-auto:nth-last-child(5) ~ .col-auto{
        width: 20%;
        width: -webkit-calc((100% - 16px * 4) / 5);
        width: calc((100% - 16px * 4) / 5);
    }
    .row.no-gutter .tablet-auto:nth-last-child(5),
    .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto{
        width: 20%;
    }
    .row .tablet-auto:nth-last-child(6),
    .row .tablet-auto:nth-last-child(6) ~ .col-auto{
        width: 16.66666667%;
        width: -webkit-calc((100% - 16px * 5) / 6);
        width: calc((100% - 16px * 5) / 6);
    }
    .row.no-gutter .tablet-auto:nth-last-child(6),
    .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto{
        width: 16.66666667%;
    }
    .row .tablet-auto:nth-last-child(7),
    .row .tablet-auto:nth-last-child(7) ~ .col-auto{
        width: 14.28571429%;
        width: -webkit-calc((100% - 16px * 6) / 7);
        width: calc((100% - 16px * 6) / 7);
    }
    .row.no-gutter .tablet-auto:nth-last-child(7),
    .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto{
        width: 14.28571429%;
    }
    .row .tablet-auto:nth-last-child(8),
    .row .tablet-auto:nth-last-child(8) ~ .col-auto{
        width: 12.5%;
        width: -webkit-calc((100% - 16px * 7) / 8);
        width: calc((100% - 16px * 7) / 8);
    }
    .row.no-gutter .tablet-auto:nth-last-child(8),
    .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto{
        width: 12.5%;
    }
    .row .tablet-auto:nth-last-child(9),
    .row .tablet-auto:nth-last-child(9) ~ .col-auto{
        width: 11.11111111%;
        width: -webkit-calc((100% - 16px * 8) / 9);
        width: calc((100% - 16px * 8) / 9);
    }
    .row.no-gutter .tablet-auto:nth-last-child(9),
    .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto{
        width: 11.11111111%;
    }
    .row .tablet-auto:nth-last-child(10),
    .row .tablet-auto:nth-last-child(10) ~ .col-auto{
        width: 10%;
        width: -webkit-calc((100% - 16px * 9) / 10);
        width: calc((100% - 16px * 9) / 10);
    }
    .row.no-gutter .tablet-auto:nth-last-child(10),
    .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto{
        width: 10%;
    }
    .row .tablet-auto:nth-last-child(11),
    .row .tablet-auto:nth-last-child(11) ~ .col-auto{
        width: 9.09090909%;
        width: -webkit-calc((100% - 16px * 10) / 11);
        width: calc((100% - 16px * 10) / 11);
    }
    .row.no-gutter .tablet-auto:nth-last-child(11),
    .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto{
        width: 9.09090909%;
    }
    .row .tablet-auto:nth-last-child(12),
    .row .tablet-auto:nth-last-child(12) ~ .col-auto{
        width: 8.33333333%;
        width: -webkit-calc((100% - 16px * 11) / 12);
        width: calc((100% - 16px * 11) / 12);
    }
    .row.no-gutter .tablet-auto:nth-last-child(12),
    .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto{
        width: 8.33333333%;
    }
    .row .tablet-auto:nth-last-child(13),
    .row .tablet-auto:nth-last-child(13) ~ .col-auto{
        width: 7.69230769%;
        width: -webkit-calc((100% - 16px * 12) / 13);
        width: calc((100% - 16px * 12) / 13);
    }
    .row.no-gutter .tablet-auto:nth-last-child(13),
    .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto{
        width: 7.69230769%;
    }
    .row .tablet-auto:nth-last-child(14),
    .row .tablet-auto:nth-last-child(14) ~ .col-auto{
        width: 7.14285714%;
        width: -webkit-calc((100% - 16px * 13) / 14);
        width: calc((100% - 16px * 13) / 14);
    }
    .row.no-gutter .tablet-auto:nth-last-child(14),
    .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto{
        width: 7.14285714%;
    }
    .row .tablet-auto:nth-last-child(15),
    .row .tablet-auto:nth-last-child(15) ~ .col-auto{
        width: 6.66666667%;
        width: -webkit-calc((100% - 16px * 14) / 15);
        width: calc((100% - 16px * 14) / 15);
    }
    .row.no-gutter .tablet-auto:nth-last-child(15),
    .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto{
        width: 6.66666667%;
    }
    .row .tablet-auto:nth-last-child(16),
    .row .tablet-auto:nth-last-child(16) ~ .col-auto{
        width: 6.25%;
        width: -webkit-calc((100% - 16px * 15) / 16);
        width: calc((100% - 16px * 15) / 16);
    }
    .row.no-gutter .tablet-auto:nth-last-child(16),
    .row.no-gutter .tablet-auto:nth-last-child(16) ~ .tablet-auto{
        width: 6.25%;
    }
    .row .tablet-auto:nth-last-child(17),
    .row .tablet-auto:nth-last-child(17) ~ .col-auto{
        width: 5.88235294%;
        width: -webkit-calc((100% - 16px * 16) / 17);
        width: calc((100% - 16px * 16) / 17);
    }
    .row.no-gutter .tablet-auto:nth-last-child(17),
    .row.no-gutter .tablet-auto:nth-last-child(17) ~ .tablet-auto{
        width: 5.88235294%;
    }
    .row .tablet-auto:nth-last-child(18),
    .row .tablet-auto:nth-last-child(18) ~ .col-auto{
        width: 5.55555556%;
        width: -webkit-calc((100% - 16px * 17) / 18);
        width: calc((100% - 16px * 17) / 18);
    }
    .row.no-gutter .tablet-auto:nth-last-child(18),
    .row.no-gutter .tablet-auto:nth-last-child(18) ~ .tablet-auto{
        width: 5.55555556%;
    }
    .row .tablet-auto:nth-last-child(19),
    .row .tablet-auto:nth-last-child(19) ~ .col-auto{
        width: 5.26315789%;
        width: -webkit-calc((100% - 16px * 18) / 19);
        width: calc((100% - 16px * 18) / 19);
    }
    .row.no-gutter .tablet-auto:nth-last-child(19),
    .row.no-gutter .tablet-auto:nth-last-child(19) ~ .tablet-auto{
        width: 5.26315789%;
    }
    .row .tablet-auto:nth-last-child(20),
    .row .tablet-auto:nth-last-child(20) ~ .col-auto{
        width: 5%;
        width: -webkit-calc((100% - 16px * 19) / 20);
        width: calc((100% - 16px * 19) / 20);
    }
    .row.no-gutter .tablet-auto:nth-last-child(20),
    .row.no-gutter .tablet-auto:nth-last-child(20) ~ .tablet-auto{
        width: 5%;
    }
    .row .tablet-auto:nth-last-child(21),
    .row .tablet-auto:nth-last-child(21) ~ .col-auto{
        width: 4.76190476%;
        width: -webkit-calc((100% - 16px * 20) / 21);
        width: calc((100% - 16px * 20) / 21);
    }
    .row.no-gutter .tablet-auto:nth-last-child(21),
    .row.no-gutter .tablet-auto:nth-last-child(21) ~ .tablet-auto{
        width: 4.76190476%;
    }
}
/* Helpers */
.left{
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
}
.right{
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
}
.center{
    -webkit-justify-content: center !important;
    justify-content: center !important;
}
/* Icons */
i.icon{
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;
    /* Material Icons http://google.github.io/material-design-icons/ */
}
/* Disabled elements */
.disabled,
[disabled]{
    opacity: 0.55;
    pointer-events: none;
}
.disabled .disabled,
.disabled [disabled],
[disabled] .disabled,
[disabled] [disabled]{
    opacity: 1;
}
/* Layout wrappers */
.views{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5000;
    overflow: hidden;
}
.views > .page-content{
    position: relative;
    overflow: auto;
    box-sizing: border-box;
    height: calc(100% - 0px);
    z-index: 1;
    padding: 15px;
    background-color: #C5CDD1;
}
/*** TOP MENU + RIBBON ***/
.top-menu{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 112px;
    background-color: #2C4959;
    list-style: none;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: stretch;	
	display:none;
}
.top-menu .logo{
    height: 40px;
    margin-right: 30px;
}
.top-menu label{
	border: solid 1px red;
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 18px 0 18px;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-align-items: center;
}
.top-menu label:hover{
    background-color: rgba(255, 255, 255, 0.15);
}
.top-menu label i{
    margin-right: 6px
}
.top-menu input{
    position: absolute;
    left: -1000em;
}
.top-menu input:checked + label{
    background-color: #90C021;
}
.top-menu input:checked + label:after{
    content: "";
    width: 0;
    height: 0;
    border-bottom: 5px solid #F5F5F5;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -6px;
}
/* Top ribbon menu */
#top-ribbon{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    min-height: 72px;
    flex-basis: 100%;
    background-color: #F5F5F5;
    list-style: none;
    margin: 0;
    padding: 0;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: center;
}
#top-ribbon li{
    display: none;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding-top: 6px;
    min-height: 45px;
    text-align: center;
    /* webkit browsers */
    display: none;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
}
#top-ribbon li div{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 0 15px 9px 15px;
    border-right: solid 1px #CCC;
    border-bottom: solid 5px transparent;
    border-bottom: solid 5px transparent;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-flex-flow: column nowrap;
    -webkit-justify-content: center;
}
#top-ribbon li div span{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 0;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -webkit-justify-content: center;
}
#top-ribbon li div p{
    width: 100%;
    font-size: 12px;
    margin: 0 0 7px 0;
}
#top-ribbon li div p i{
    margin-right: 3px;
    opacity: .6;
    font-size: 18px;
}
#top-ribbon li div a,
#top-ribbon li div a:visited{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    font-size: 12px;
    text-decoration: none;
    padding: 0 8px 0 8px;
    border-radius: 3px;
    background-color: #DCE7ED;
    color: #333;
    border: solid 2px #6F99B2;
    margin: 0 3px 0 3px;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}
#top-ribbon li div a.add, #top-ribbon li div a.details{
    padding: 0;
    width: 30px;
}
#top-ribbon li div a.add{
    background-color: #DDEEC1;
    border: solid 2px #90BF20;
}
#top-ribbon li div a i{
    font-size: 18px;
    color: #555
}
#top-ribbon li div a:hover{
    opacity: .75;
}
#top-ribbon li div.active{
    border-bottom: solid 2px #81A8BE;
}
#top-ribbon li div.active a{
    margin-bottom: 3px;
}
/* For buttons with only text */
#top-ribbon li div a.active{
    opacity: .3;
    pointer-events: none;
}
/* Top ribbon icons */
ul#top-ribbon li[data-id="dashboard"] .sumary i.material-icons:before{
    content: "view_week";
}
ul#top-ribbon li[data-id="dashboard"] .stats i.material-icons:before{
    content: "equalizer";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(1) p i.material-icons:before{
    content: "local_shipping";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(2) p i.material-icons:before{
    content: "view_module";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(3) p i.material-icons:before{
    content: "person_pin";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(4) p i.material-icons:before{
    content: "portrait";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(5) p i.material-icons:before{
    content: "widgets";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(6) p i.material-icons:before{
    content: "credit_card";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(7) p i.material-icons:before{
    content: "flag";
}
ul#top-ribbon li[data-id="nomenclature"] div:nth-child(8) p i.material-icons:before{
    content: "loyalty";
}
ul#top-ribbon li[data-id="buy"] i.material-icons:before{
    content: "directions_bus";
}
ul#top-ribbon li[data-id="sales"] i.material-icons:before{
    content: "directions_bus";
}
ul#top-ribbon li[data-id="inventory"] i.material-icons:before{
    content: "directions_bus";
}
ul#top-ribbon li[data-id="reports"] i.material-icons:before{
    content: "directions_bus";
}
ul#top-ribbon li .add i.material-icons:before{
    content: "add";
}
ul#top-ribbon li .details i.material-icons:before{
    content: "subject";
}
/* Top menu selectivity */
.top-menu input[id="dashboard"]:checked ~ ul#top-ribbon li[data-id="dashboard"]{
    display: flex;
    display: -webkit-flex;
}
.top-menu input[id="nomenclature"]:checked ~ ul#top-ribbon li[data-id="nomenclature"]{
    display: flex;
    display: -webkit-flex;
}
.top-menu input[id="buy"]:checked ~ ul#top-ribbon li[data-id="buy"]{
    display: flex;
    display: -webkit-flex;
}
.top-menu input[id="sales"]:checked ~ ul#top-ribbon li[data-id="sales"]{
    display: flex;
    display: -webkit-flex;
}
.top-menu input[id="inventory"]:checked ~ ul#top-ribbon li[data-id="inventory"]{
    display: flex;
    display: -webkit-flex;
}
.top-menu input[id="reports"]:checked ~ ul#top-ribbon li[data-id="reports"]{
    display: flex;
    display: -webkit-flex;
}
/* Login screen */
.login-screen > .page-content{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    height: 100%;
    padding: 0;
    overflow: hidden;
    z-index: 1;
    background-color: #FFF;
}
.login-screen .auth{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
.login-screen .auth .inputs{
    border-left: solid 1px #81A8BE;
    padding-left: 25px;
    margin: 0;
}
.login-screen .auth .inputs .comp:first-child{ margin-bottom: 0; }
.login-screen .auth label.comp{
    padding-top: 0;
    margin-top: 0;
    text-transform: uppercase;
    font-size: 13px;
    color: #000;
}
.login-screen .auth button.comp.green{
    margin: 14px 0 0 16px;
    width: 90px;
    font-size: 14px;
    background-color: #90C021 !important;
}
.login-screen .toolbar{
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    width: 100%;
    height: 80px;
    border-top: solid 1px #81A8BE;
    background-color: #F2F2F2;
    margin: 0;
}
footer.toolbar p{
    color: #333;
    text-transform: uppercase;
    font-size: 10px;
    margin: 0;
}
/* Data tables */
.table{
    width: 100%;
    border: solid 1px #E5E5E5;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
    padding: 25px;
}
.table thead th{
    background-color: #DCE7ED;
    color: #4A7895;
    padding: 3px 5px 5px 6px;
    text-align: left;
    font-weight: normal;
    border-left: solid 1px #FFF;
}
.table thead th:first-child{ border: none; }
.table thead th a, .table thead th a:visited{
    display: inline-block;
    margin-right: 5px;
    font-size: 12px;
    color: #4A7895
}
.table thead th a:hover{
    opacity: .5
}
.table thead th a i.material-icons{ font-size: 14px }
.table thead tr{
    background-color: #FFF !important;
}
.table tbody tr{ border-bottom: solid 1px #F0F0F0; }
.table tbody tr:hover{ cursor: default; }
.table tbody tr.select{ background-color: rgba(255, 86, 0, .2) !important; }
.table tbody tr.select td{ border-left: solid 1px rgba(255, 86, 0, .2); }
.table tbody tr:last-child{
    border-bottom: none;
}
.table tbody td{ border-left: solid 1px #E3E3E3; }
.table tbody td:first-child{ border-left: none; }
.table tbody th[scope="row"], .table tbody td{
    padding: 5px 5px 5px 6px;
}
.table tbody tr:nth-child(odd){
    background-color: #F8F8F8
}
/*** Floating windows ***/
.float-window{
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: #FFF;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 1000;
}
.float-window .topbar{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    /* webkit browsers */
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -webkit-flex-grow: 1;
    -webkit-align-items: center;
    -webkit-justify-content: space-between;
    background-color: #4A7895;
    color: #FFF;
    padding: 3px 3px 3px 12px;
    height: 22px;
    cursor: move;
}
.float-window .topbar .title{
    flex-grow: 1;
    font-size: 11px;
    text-transform: uppercase;
    color: #FFF;
    margin: 0;
    pointer-events: none;
    /* webkit browsers */
    -webkit-flex-grow: 1;
}
.float-window .topbar .controls{
    list-style: none;
    margin: 0;
    padding: 0;
}
.float-window .topbar .controls li{
    display: inline-block;
}
.float-window .topbar .controls li a,
.float-window .topbar .controls li a:visited{
    display: block;
    height: 22px;
    width: 22px;
    line-height: 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .2);
}
.float-window .topbar .controls li a i{
    font-size: 16px;
    padding: 0;
    color: #FFF
}
.float-window .topbar .controls .minimize i.material-icons:before{
    content: "remove";
}
.float-window .topbar .controls .expand-collapse i.material-icons:before{
    content: "check_box_outline_blank";
}
.float-window .topbar .controls .close i.material-icons:before{
    content: "close";
}
.float-window .topbar .title{
    text-transform: none;
    font-size: 13px;
    text-wrap: none;
}
.float-window > .page-content{
    background-color: white;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 28px;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.float-window:before{
    font-family: 'Material Icons';
    position: absolute;
    right: -6px; bottom: -5px; z-index: 100;
    content: 'keyboard_arrow_down';
    font-size: 16px;
    width: 18px;
    height: 18px;
    color: #999 !important;
    transform: rotate(-45deg);
    cursor: se-resize;
}
/* STANDALONE COMPONENTS */
.label{
    color: #81A8BE !important;
}
.comp{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    font-size: 0;
    margin-bottom: 15px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 16px 0 16px;
}
.comp input[type="time"],
.comp input[type="number"],
.comp input[type="text"],
.comp input[type="password"],
.comp input[type="search"],
.comp input[type="email"],
.comp input[type="tel"],
.comp input[type="url"],
.comp input[type="date"],
.comp input[type="datetime-local"],
.comp select,
.comp textarea{
    -moz-appearance: none;
    box-sizing: border-box;
    border: medium none;
    background: transparent none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 32px;
    color: #212121;
    font-size: 16px;
    font-family: inherit;
}
.comp label{
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 3px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #81A8BE !important;
}
.comp [type="submit"],
.comp [type="button"],
[type="button"].comp{
    display: inline-block;
    flex-flow: row nowrap;
    align-items: center;
    -webkit-flex-flow: row nowrap;
    -webkit-align-items: center;
    border-radius: 3px;
    border: 2px solid #6F99B2;
    margin: 2px;
    height: 30px;
    min-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    padding: 0 5px 0 5px;
    position: relative;
    overflow: hidden;
    outline: 0 none;
    transition-duration: 0.3s;
    transform: translate3d(0, 0, 0);
    color: #333;
    background: #F5F5F5 none repeat scroll 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.comp [type="submit"] i.material-icons,
.comp [type="button"] i.material-icons,
[type="button"].comp i.material-icons{ font-size: 18px; margin: -1px 3px 0 -2px; }
.comp [type="submit"].only-icon i.material-icons,
.comp [type="button"].only-icon i.material-icons,
[type="button"].comp.only-icon i.material-icons{ margin: 0 }
.comp [type="submit"]:hover,
.comp [type="button"]:hover,
[type="button"].comp:hover{
    opacity: .6;
}
.comp textarea{
    margin-top: 12px
}
.comp input,
.comp textarea,
.comp select{
    border-bottom: solid 1px rgba(0, 0, 0, 0.12) !important;
    transition-duration: 0.1s;
}
.comp input:focus,
.comp textarea:focus,
.comp select:focus{
    padding-top: 1px;
    border-bottom: solid 2px #3582B4 !important;
}
.comp textarea:focus{
    padding-top: 0;
}
/*.comp[data-id="input-text"]{}
.comp[data-id="input-time"]{}
.comp[data-id="input-number"]{}
.comp[data-id="input-text"]{}
.comp[data-id="input-password"]{}
.comp[data-id="input-search"]{}
.comp[data-id="input-email"]{}
.comp[data-id="input-tel"]{}
.comp[data-id="input-url"]{}
.comp[data-id="input-date"]{}
.comp[data-id="input-datetime-local"]{}
.comp[data-id="textarea"]{}
.comp[data-id="select"]{}*/
.comp[data-id="select"] > div, .comp[data-id="image"] > div{
    display: flex;
    flex-flow: row nowrap;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
}
.comp[data-id="image"] > div{
    align-items: flex-end;
}
.comp[data-id="image"] img{
    margin: 0 8px; }
.comp[data-id="select"] [type="button"]{
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    color: #333;
    border: 2px solid #6F99B2;
    background-color: transparent;
    box-shadow: none;
}
.comp[data-id="select"] [type="button"] i.material-icons{
    font-size: 22px;
    margin: 0;
}
.comp[data-id="select"].btn-off [type="button"]{
    display: none;
}
/* Special cases */
label.comp{ font-size: 14px; text-transform: uppercase; }
/* Colors */
.green{ background-color: #390 !important; color: #FFF !important; border-color: transparent !important; }
.blue{ background-color: #39C !important; color: #FFF !important; border-color: transparent !important; }
.red{ background-color: #C33 !important; color: #FFF !important; border-color: transparent !important; }
.orange{ background-color: #C90 !important; color: #FFF !important; border-color: transparent !important; }
.gray{ background-color: #666 !important; color: #FFF !important; border-color: transparent !important; }
.transparent{ box-shadow: none; opacity: .5; filter: alpha(opacity=50); }
.transparent .page-content{ opacity: .5; filter: alpha(opacity=.50) }
/* Modals */
.modal-overlay{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 13000;
    visibility: hidden;
    opacity: 0;
}
.modal-overlay.visible{
    visibility: visible;
    opacity: 1;
}
.modal{
    max-width: 640px;
    z-index: 13500;
    border-radius: 3px;
    color: #757575;
    background: #FFF;
    font-size: 14px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.modal-content{
    position: relative;
    padding: 12px;
}
.modal-content label.comp{
    padding: 0;
}
.modal-buttons{
    height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}