/*------------------------------------------------------------------
Project: Asteroid
Version: 1.0
Last change: first releaseP
rimary use: App & Mobile Website
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
1. Utility
2. Colors & Background
3. Typography
4. Base Elements
5. Toolbar
6. Drawer
7. Pages
8. Transitions
9. Media Queries
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
1. Utility
-------------------------------------------------------------------*/
.clr {
    clear: both !important;
}

.hide {
    display: none !important;
}

.no-shadow {
    box-shadow: none !important;
}

.fullwidth {
    width: 100% !important;
}

.fullscreen {
    width: 100vw !important;
    min-height: 100vh !important;
}

.spacer {
    padding: 0 0 20px !important;
}

.highlight {
    padding: 16px;
    margin: 20px 0;
    border-left: 3px solid #6C7A89;
}

    .highlight p {
        font-size: 19px;
        line-height: 1.5;
    }

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-20 {
    padding: 20px;
}

.relative {
    position: relative;
}

.slogan {
    width: 75%;
    margin: 20px 0 40px;
}

    .slogan span {
        font: inherit;
    }

/*------------------------------------------------------------------
2. Colors & Backgrounds
-------------------------------------------------------------------*/
.transparent {
    background: transparent !important;
}

.bg-1 {
    background: url(../img/1.jpg) no-repeat center / cover;
}

.bg-2 {
    background: url(../img/2.jpg) no-repeat center / cover;
}

.bg-3 {
    background: url(../img/3.jpg) no-repeat center / cover;
}

.bg-4 {
    background: url(../img/4.jpg) no-repeat center / cover;
}

.bg-5 {
    background: url(../img/5.jpg) no-repeat center / cover;
}

.bg-6 {
    background: url(../img/6.jpg) no-repeat center / cover;
}

.bg-7 {
    background: url(../img/7.jpg) no-repeat center / cover;
}

.bg-8 {
    background: url(../img/8.jpg) no-repeat center / cover;
}

.bg-9 {
    background: url(../img/9.jpg) no-repeat center / cover;
}

.bg-10 {
    background: url(../img/10.jpg) no-repeat center / cover;
}

.bg-11 {
    background: url(../img11.jpg) no-repeat center / cover;
}

.bg-12 {
    background: url(../img/12.jpg) no-repeat center / cover;
}

.bg-13 {
    background: url(../img/13.jpg) no-repeat center / cover;
}

.border-coral {
    border: 4px solid #F08080 !important;
}

.border-sea {
    border: 4px solid #6C7A89 !important;
}

.border-orange {
    border: 4px solid orange !important;
}

.border-green {
    border: 4px solid #9ACD32 !important;
}

.border-left-coral {
    border-left: 4px solid #F08080 !important;
}

.border-left-sea {
    border-left: 4px solid #6C7A89 !important;
}

.border-left-orange {
    border-left: 4px solid orange !important;
}

.border-left-green {
    border-left: 4px solid #9ACD32 !important;
}

.primary-color {
    background-color: #6C7A89 !important;
}

.primary-color-text {
    color: #2196F3 !important;
}

.primary-border {
    border: 1px solid #2196F3;
}

/*------------------------------------------------------------------
3. Typography
-------------------------------------------------------------------*/
body {
    font-family: 'Montserrat',sans-serif;
    background: #fff;
    color: #444;
    overflow-x: hidden;
}

[class^="mdi-"], [class*="mdi-"] {
    font-family: "MaterialDesignIcons";
}

h1, h2, h3, h4, h5, h6 {
    color: #191d22;
}

p {
    margin: 0 0 11px;
}

span {
    color: #9e9e9e;
    font-size: 14px;
}

a {
    color: inherit;
}

.snap-drawer a {
    color: #fff;
}

.blog-content {
    opacity: .7;
}

.text {
    opacity: .7;
}

.paragraph-title {
    color: #9e9e9e;
    font-size: 16px;
}

/*------------------------------------------------------------------
4. Base Elements
-------------------------------------------------------------------*/
img {
    width: 100%;
    height: auto;
    display: block;
}

.snap-content {
    position: relative;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 2;
    background-color: #fff;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.container {
    padding: 20px;
    margin-left: 0;
    width: 100%;
}

    .container .row {
        margin-bottom: 0;
    }

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.overlay-gradient {
    opacity: .4;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    background: rgba(0,0,0,0) -webkit-gradient(linear,left top,left bottom,color-stop(48%,rgba(0,0,0,0)),color-stop(90%,rgba(0,0,0,.85)),to(#000)) repeat scroll 0 0;
    background: rgba(0,0,0,0) -webkit-linear-gradient(top,rgba(0,0,0,0) 48%,rgba(0,0,0,.85) 90%,#000 100%) repeat scroll 0 0;
    background: rgba(0,0,0,0) -o-linear-gradient(top,rgba(0,0,0,0) 48%,rgba(0,0,0,.85) 90%,#000 100%) repeat scroll 0 0;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 48%,rgba(0,0,0,.85) 90%,#000 100%) repeat scroll 0 0;
}

/* banner */
.banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
}

    .banner i {
        position: absolute;
        right: 20px;
        font-size: 24px;
    }

    .banner i, .banner span {
        color: #fff;
    }

/* badge */
.snap-drawer span.badge {
    font-size: 12px;
    line-height: 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    min-width: 0;
    right: 20px;
    top: 11px;
    color: #333;
}

/* chat */
.chat .message p {
    margin-bottom: 0;
}

.chat span {
    font-size: 12px;
}

.chat ul li {
    width: 100%;
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

    .chat ul li img {
        float: left;
    }

    .chat ul li .message {
        margin-left: 55px;
        position: relative;
        padding: 8px 16px;
        border-radius: 10px;
    }

    .chat ul li.message-left {
        margin-bottom: 36px;
    }

    .chat ul li.message-right > img {
        float: right;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }

    .chat ul li.message-right .message {
        margin-right: 55px;
        margin-left: 0;
        margin-bottom: 5px;
        background-color: #f1f1f1 !important;
    }

    .chat ul li.message-left > img {
        margin-right: 0;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }

    .chat ul li.message-left .message {
        background-color: #f0f8ff;
        margin-bottom: 5px;
    }

.message-right > span, .message-left > span {
    margin-bottom: 20px;
    display: block;
}

.message-left > span {
    margin-left: 55px;
}

.photo-add {
    margin-top: 8px;
}

    .photo-add .square-user {
        height: 48px;
        width: 48px;
        margin-right: 4px;
        float: left;
    }

/* Contact */
.contact {
    position: relative;
    padding: 16px 16px 16px 65px;
}

    .contact img {
        position: absolute;
        top: 16px;
        left: 0;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }

    .contact p {
        margin: 1px 0 0;
    }

    .contact span {
        font-size: 12px;
        font-weight: 300;
    }

    .contact i {
        font-size: inherit;
    }

    .contact .time {
        position: absolute;
        top: 20px;
        right: 16px;
        font-weight: 300;
    }

    .contact .dot {
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        position: absolute;
        top: 50px;
        left: 33px;
        border-radius: 50%;
    }

/*  input */
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #6C7A89;
    box-shadow: 0 1px 0 0 #6C7A89;
}

    input[type=text]:focus:not([readonly]) + label,
    input[type=password]:focus:not([readonly]) + label,
    input[type=email]:focus:not([readonly]) + label,
    input[type=url]:focus:not([readonly]) + label,
    input[type=time]:focus:not([readonly]) + label,
    input[type=date]:focus:not([readonly]) + label,
    input[type=datetime-local]:focus:not([readonly]) + label,
    input[type=tel]:focus:not([readonly]) + label,
    input[type=number]:focus:not([readonly]) + label,
    input[type=search]:focus:not([readonly]) + label,
    textarea.materialize-textarea:focus:not([readonly]) + label {
        color: #6C7A89;
    }

.input-field .prefix {
    color: inherit;
}

    .input-field .prefix.active {
        color: #6C7A89;
    }

.input-field.white-text input {
    border-color: #fff;
}

.input-field.white-text i {
    color: #fff;
}

.input-field label {
    font-size: 14px;
}

.input-field .prefix {
    width: 16px;
    font-size: 16px;
    top: 16px;
}

    .input-field .prefix ~ label {
        margin-left: 16px;
    }

    .input-field .prefix ~ input, .input-field .prefix ~ textarea {
        margin-left: 29px;
        color: #fff;
    }

/* footer */
.footer-copyright {
    text-align: center;
    color: #fff;
}

    .footer-copyright i {
        font-size: 24px;
        margin: 0 10px;
        transition: all .2s ease-in-out;
    }

        .footer-copyright i:hover {
            transform: scale(1.25);
        }
/* page header */
.page-header {
    position: relative;
    padding: 30px 20px;
}

    .page-header h2 {
        margin: 25px 0;
        font-size: 48px;
    }

    .page-header i {
        font-size: inherit;
    }

    .page-header .tabs {
        width: 75% !important;
        height: 30px;
        margin-left: 0;
        background-color: transparent;
    }

        .page-header .tabs .tab {
            line-height: 30px;
            height: 30px;
        }

        .page-header .tabs li.tab a {
            color: #fff;
            font-size: 14px;
        }

        .page-header .tabs .indicator {
            background-color: #fff;
        }

/*------------------------------------------------------------------
5. Toolbar
-------------------------------------------------------------------*/
#toolbar {
    top: -56px;
    right: 0;
    left: 0;
    width: auto;
    height: 56px;
    position: absolute;
    z-index: 99999999;
}

.t-delay {
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}

.open-left {
    float: left;
    height: 56px;
    line-height: 56px;
    width: 56px;
    text-align: center;
    position: relative;
}

.open-right {
    float: right;
    height: 56px;
    line-height: 56px;
    width: 56px;
    text-align: center;
    position: relative;
}

#toolbar i {
    font-size: 24px;
    line-height: 56px;
    color: #fff;
}

#toolbar .title {
    font-size: 22px;
    color: #fff;
    line-height: 56px;
    margin-left: 30px;
}

/*------------------------------------------------------------------
6. Drawer
-------------------------------------------------------------------*/
.snap-drawer .collapsible {
    border-top: none;
    border-right: none;
    border-left: none;
    margin: 0;
    box-shadow: none;
    color: #fff;
}

    .snap-drawer .collapsible .collapsible-header {
        padding: 0;
        background-color: transparent;
        border: none;
    }

.snap-drawer .collapsible-body {
    border-bottom: none;
}

.snap-drawer li.active {
    border: none;
}

.snap-drawer .collapsible i {
    width: auto;
}

    .snap-drawer .collapsible i.right {
        margin-right: 0;
        -ms-transition: .25s ease-in-out;
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

.snap-drawer .collapsible-header.active i.right {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.snap-drawer .have-child {
    list-style-type: none;
    display: inline;
    padding: 0;
}

.snap-drawers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    background: #2196F3;
}

.snap-drawer {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    width: 266px;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: width .1s ease;
    -moz-transition: width .1s ease;
    -ms-transition: width .1s ease;
    -o-transition: width .1s ease;
    transition: width .1s ease;
}

.snap-drawer-left {
    left: 0;
    z-index: 1;
}

.snap-drawer-right {
    right: 0;
    z-index: 1;
}

.snapjs-left .snap-drawer-right,
.snapjs-right
.snap-drawer-left {
    display: none;
}

.drawer-header {
    position: relative;
}

.drawer-title {
    position: absolute;
    bottom: 20px;
}

    .drawer-title img {
        width: 30px;
        height: 30px;
        float: left;
        margin-left: 20px;
    }

    .drawer-title h6 {
        float: left;
        margin-left: 20px;
    }

.snap-drawer .drawer-inner {
    margin-top: 56px;
}

.snap-drawer li {
    padding: 0 20px;
    position: relative;
}

    .snap-drawer li a {
        line-height: 44px;
        height: 44px;
    }

        .snap-drawer li a > span {
            margin-left: 40px;
        }

        .snap-drawer li a > i {
            position: absolute;
            top: 10px;
            font-size: 24px;
        }

.snap-drawer .exit {
    position: absolute;
    bottom: 0;
}

    .snap-drawer .exit a {
        color: #fff;
    }

        .snap-drawer .exit a:hover {
            color: #fff;
        }

.snap-drawer span, .snap-drawer i {
    color: #fff;
}

.snap-drawer .drawer-inner > ul > li:hover,
.snap-drawer .collapsible > li:hover,
.snap-drawer .collapsible > li.active {
    background-color: rgba(255,255,255,0.2);
}

    .snap-drawer .collapsible > li.active li:hover,
    .snap-drawer .collapsible > li.active li.active {
        background-color: transparent;
    }

/*------------------------------------------------------------------
7. Pages
-------------------------------------------------------------------*/
/* Article */
.article-main {
    position: relative;
}

    .article-main .contact {
        padding: 0 16px 0 30px;
        position: absolute;
        left: 16px;
        bottom: 16px;
    }

        .article-main .contact img {
            width: 20px;
            height: 20px;
            top: 2px;
        }

        .article-main .contact p {
            font-size: 14px;
            color: #fff;
        }

    .article-main .comments-counter {
        position: absolute;
        right: 16px;
        bottom: 16px;
        color: #fff;
        font-size: 14px;
    }

.article .comments.collection {
    margin: 0;
}

.article .collection,
.collection .collection-item {
    border: none;
}

    .article .collection .collection-item.avatar {
        min-height: 0;
        margin: 20px 0 0;
        padding-left: 60px;
    }

        .article .collection .collection-item.avatar .text {
            font-size: 14px;
        }

        .article .collection .collection-item.avatar:first-child {
            margin-top: 5px;
        }

        .article .collection .collection-item.avatar img {
            margin: 0;
            left: 0;
        }

        .article .collection .collection-item.avatar .title {
            display: block;
        }

        .article .collection .collection-item.avatar .date {
            font-size: 11px;
        }

        .article .collection .collection-item.avatar.reply {
            margin-left: 20px;
            border-left: 1px solid #eee;
            margin-top: 0;
            padding-left: 72px;
        }

            .article .collection .collection-item.avatar.reply img {
                left: 15px;
            }

.article-header {
    margin: 0 0 20px;
    font-size: 28px;
}

/* Blog */
.blog-preview {
    width: 66.6666%;
    padding: 16px 32px 16px 16px;
    margin-bottom: 20px;
    transition: all .1s ease-in-out;
}

.blog-date {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.blog-title {
    font-size: 24px;
    margin-top: 0;
}

.blog-preview .contact {
    padding: 0 16px 0 30px;
}

    .blog-preview .contact img {
        width: 20px;
        height: 20px;
        top: 0;
    }

    .blog-preview .contact p {
        font-size: 14px;
    }

/* Contacts */
.contacts {
    width: 100%;
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    overflow: hidden;
}

.contacts-button {
    padding: 20px;
    margin: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
}

.contacts-information h4 {
    margin-bottom: 20px;
    text-align: center;
}

/* Login */
.login {
    position: relative;
    min-height: calc(100vh - 56px);
    background: url(../img/background.jpg) no-repeat top right / cover;
}

    .login .contact.profile-user {
        position: relative;
        left: 0;
    }

    .login .input-field:last-child {
        margin-bottom: 10px;
    }

    .login .btn-large {
        margin-bottom: 20px;
    }

    .login .valign {
        top: -50px;
        position: relative;
        width: 100%;
    }

/* News */
.news-main {
    position: relative;
}

.top-news {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    color: #fff;
}

.top-news-title {
    font-size: 22px;
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
}

.top-news-channel {
    float: left;
    font-size: 12px;
    margin-left: 20px;
    color: #fff;
}

.top-news-category {
    float: right;
    font-size: 12px;
    border-bottom: 1px solid #fff;
    margin-right: 20px;
    color: #fff;
}

.single-news {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.single-news-title {
    font-size: 20px;
    margin-top: 5px;
    line-height: 1.3;
}

.single-news-channel {
    float: left;
    font-size: 12px;
}

.single-news-category {
    float: right;
    font-size: 12px;
    border-bottom: 1px solid #9e9e9e;
}

.news .comments.collection {
    margin: 0;
}

.news .collection, .collection .collection-item {
    border: none;
}

    .news .collection .collection-item.avatar {
        min-height: 0;
        margin: 20px 0 0;
        padding-left: 60px;
    }

        .news .collection .collection-item.avatar .text {
            font-size: 14px;
        }

        .news .collection .collection-item.avatar:first-child {
            margin-top: 5px;
        }

        .news .collection .collection-item.avatar img {
            margin: 0;
            left: 0;
        }

        .news .collection .collection-item.avatar .title {
            display: block;
        }

        .news .collection .collection-item.avatar .date {
            font-size: 11px;
        }

        .news .collection .collection-item.avatar.reply {
            margin-left: 20px;
            border-left: 1px solid #eee;
            margin-top: 0;
            padding-left: 72px;
        }

            .news .collection .collection-item.avatar.reply img {
                left: 15px;
            }

/* Portfolio */
.portfolio .row {
    padding: 2px;
    margin-bottom: 0;
}

    .portfolio .row .col.s6 {
        padding: 2px 2px 0;
    }

        .portfolio .row .col.s6 img {
            margin-bottom: 4px;
        }

        .portfolio .row .col.s6 a:last-child img {
            margin-bottom: 2px;
        }

.share {
    position: absolute;
    bottom: -26px;
    right: 20px;
}

/* Profile */
.profile-header {
    position: relative;
}

.contact.profile-user {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 0;
}

.profile-header img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: FlipH;
}

.profile-user h4 {
    margin: 2px 0 0;
}

.profile-user.contact p {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 15px;
}

.profile-description {
    margin-bottom: 30px;
}

.profile-user.contact .btn-flat {
    border-radius: 50px;
    font-size: 12px;
}

.social-counter {
    width: 33.3333%;
    float: left;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 16px;
    border-left: 1px solid #eee;
}

    .social-counter:first-child {
        border-left: none;
    }

    .social-counter i {
        font-size: 20px;
    }

.photo-preview {
    width: 100%;
    margin-bottom: 40px;
}

    .photo-preview img {
        width: 25%;
        float: left;
        opacity: .6;
    }

        .photo-preview img:hover {
            opacity: 1;
        }

    .photo-preview .box {
        width: 25%;
        float: left;
        text-align: center;
        background-color: #6C7A89;
        color: #fff;
        font-size: 18px;
        line-height: .9;
    }

        .photo-preview .box span {
            color: #fff;
            opacity: .9;
        }

.box .valign {
    width: 100%;
}

/* SignUp */
.signup {
    position: relative;
    min-height: calc(100vh - 56px);
}

    .signup .btn-large {
        width: 100%;
        margin: 20px 0;
    }

    .signup label input#upload {
        display: none;
    }

/* Splash Screen */
.splash {
    background: url(../img/index.jpg) no-repeat center / cover;
    width: 100%;
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    overflow: hidden;
}

    .splash .overlay-gradient {
        opacity: .95;
        background: rgba(0,0,0,0) -webkit-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 81%,#000 100%) repeat scroll 0 0;
        background: rgba(0,0,0,0) -o-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 81%,#000 100%) repeat scroll 0 0;
        background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 81%,#000 100%) repeat scroll 0 0;
    }

    .splash .btn-large {
        margin-bottom: 20px;
    }

.modal.features .row:last-child {
    margin-bottom: 0;
}

.modal.features .col {
    text-align: center;
}

    .modal.features .col i {
        font-size: 32px;
    }

    .modal.features .col p {
        font-size: 12px;
    }

/* Timeline */
.timeline .row {
    padding-left: 20px;
    border-left: 2px solid #eee;
    margin-left: 20px;
}

.timeline .contact {
    margin-bottom: 20px;
}

.timeline .dot {
    width: 20px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 17px;
    left: -42px;
    border-radius: 50%;
}

.timeline .date {
    position: absolute;
    top: 18px;
    left: 0;
}

.friends img {
    display: inline-block;
    position: static;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-top: 8px;
}

.friends i {
    font-size: 32px;
}

/* ToDo */
.todo input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    color: #9e9e9e;
}

.todo input[type="checkbox"] + label {
    color: inherit;
}

.todo .todo-element {
    position: relative;
    margin: 0;
    padding: 20px;
    border-top: 1px solid #eee;
}

    .todo .todo-element:last-child {
        border-bottom: 1px solid #eee;
    }

    .todo .todo-element span {
        display: block;
        margin-left: 35px;
        font-size: 14px;
        color: #9e9e9e;
    }

    .todo .todo-element img {
        position: absolute;
        width: 25px;
        height: auto;
        border-radius: 50%;
        top: 20px;
        right: 20px;
    }

.add-event {
    position: absolute;
    bottom: -27px;
    right: 20px;
    z-index: 999;
}

.new-event {
    height: 100vh;
    background-color: #fff;
}

    .new-event .modal-header {
        height: 56px;
        background-color: #eee;
    }

        .new-event .modal-header a {
            height: 56px;
            line-height: 56px;
            padding-right: 20px;
            text-align: center;
        }

        .new-event .modal-header .close-event {
            height: 56px;
            line-height: 56px;
            width: 56px;
            padding: 0;
            text-align: center;
        }

    .new-event .modal-content {
        padding: 0;
    }

    .new-event select {
        margin-bottom: 20px;
    }

    .new-event .switch label input[type=checkbox]:checked + .lever:after {
        background-color: #6C7A89;
    }

.modal.bottom-sheet {
    max-height: 100vh;
}

.add-user {
    position: relative;
}

    .add-user i {
        padding: 44px 0;
        font-size: 100px;
    }
/* label color */
.new-event input[type=text]:focus:not([readonly]),
.new-event input[type=password]:focus:not([readonly]),
.new-event input[type=email]:focus:not([readonly]),
.new-event input[type=url]:focus:not([readonly]),
.new-event input[type=time]:focus:not([readonly]),
.new-event input[type=date]:focus:not([readonly]),
.new-event input[type=datetime-local]:focus:not([readonly]),
.new-event input[type=tel]:focus:not([readonly]),
.new-event input[type=number]:focus:not([readonly]),
.new-event input[type=search]:focus:not([readonly]),
.new-event textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #6C7A89;
    box-shadow: 0 1px 0 0 #6C7A89;
}

    .new-event input[type=text]:focus:not([readonly]) + label,
    .new-event input[type=password]:focus:not([readonly]) + label,
    .new-event input[type=email]:focus:not([readonly]) + label,
    .new-event input[type=url]:focus:not([readonly]) + label,
    .new-event input[type=time]:focus:not([readonly]) + label,
    .new-event input[type=date]:focus:not([readonly]) + label,
    .new-event input[type=datetime-local]:focus:not([readonly]) + label,
    .new-event input[type=tel]:focus:not([readonly]) + label,
    .new-event input[type=number]:focus:not([readonly]) + label,
    .new-event input[type=search]:focus:not([readonly]) + label,
    .new-event textarea.materialize-textarea:focus:not([readonly]) + label,
    .new-event .material-icons.prefix.active {
        color: #6C7A89;
    }

/*------------------------------------------------------------------
8. Transitions
-------------------------------------------------------------------*/
.m-scene .scene_element {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.m-scene .scene_element--fadeinup {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.m-scene .scene_element--fadeinright {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.m-scene .scene_element--delayed {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

.m-scene.is-exiting .scene_element {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

.m-scene.is-exiting .scene_element--delayed {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.m-scene.is-exiting .scene_element--noexiting {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

.m-scene .scene_element--fadeinright-wide {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.is-loading, .is-loading a {
    cursor: progress;
}

/*------------------------------------------------------------------
9. Media Queries
-------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .input-field .prefix ~ input {
        width: 80%;
        width: calc(100% - 29px);
    }
}

@media only screen and (min-width: 0) {
    html {
        font-size: 16px;
    }
}

#blockui {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    display: none;
}