:root {
    
    --theme-border-solid: 1px solid #eaeaea;
}

.bg-trans-gradient {
    background: linear-gradient( 250deg,#ad39d6,#2d96e7);
}

.bg-readed {
    background: rgba(0, 0, 0, .04);
}

.notification-badge {
    font-family: "Roboto", sans-serif;
    position: relative;
    right: 5px;
    top: -20px;
    color: #ffffff;
    background-color: #00bcd4;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 2px 5px;
}

.notify-title {
    font-weight: 700;
    font-size: .93333rem;
    color: #555;
}

.notify-content {
    font-size: .86666rem !important;
    color: #555;
}

.notify-timer {
    font-size: .8rem !important;
    color: #868e96 !important;
    font-weight: 600;
    margin-top: .25rem !important;
}


.wrapper {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    flex-basis: auto !important;
    flex-direction: row !important;
    min-height: calc(100vh - 64px);
}

.page-sidebar {
    position: fixed !important;
    flex: 1 0 auto;
    width: 17.875rem;
    /* max-width: 17.875rem; */
    flex-direction: column;
    display: flex;
    /*background: #AAB7B8;ha chinh*/
    background: #fff;
    height: 100%;
    overflow-y: auto;
}

    .page-sidebar.close {
        display: none;
    }

    .page-sidebar .sidebar-footer {
        border-top: var(--theme-border-solid);
        height: 2.8125rem;
        bottom: 0;
        display: flex;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

@media only screen and (max-width: 992px) {
    .page-sidebar {
        position: fixed !important;
        z-index: 2000;
    }

    .dragbar {
        margin-left: 0 !important;
        display: none !important;
    }
}

.page-content-wrapper {
    /*background-color: #AAB7B8; ha chinh*/
    background-color: #f1f4f6;
    display: flex;
    flex: auto auto auto;
    /*flex: 1 1 auto;*/
    padding: 0;
    flex-basis: 100%;
    flex-direction: column;
    /*width: 0;*/
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 1px;
    max-height: 100%;
}

.page-content {
    flex: 1 1 auto;
    order: 3;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 100%;
    /*padding: 1.2rem 1.12rem 1.2rem 0.7rem;*/
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    color: var(--theme-fusion-600);
}

.nav-menu {
    padding: 0;
    list-style: none;
    margin: 0;
}

    .nav-menu li {
        position: relative;
    }

        .nav-menu li.active > a {
            color: var(--theme-fusion-700);
            font-weight: bold;
            background-color: rgba(255, 255, 255, .04);
            box-shadow: inset 3px 0 0 var(--theme-primary);
        }

        .nav-menu li a.nav-link.active {
            color: var(--theme-fusion-700);
            font-weight: bold;
            background-color: rgba(0, 0, 0, .05);
            border-radius: 2px;
        }

        .nav-menu li a {
            display: flex;
            align-items: center;
            outline: 0;
            padding: .7125rem .8rem .7125rem 1.3rem;
            font-size: .95rem;
            color: var(--theme-fusion-600);
            font-weight: 400;
            text-decoration: none;
            position: relative;
            margin-right: 16px;
            border-bottom: solid;
            border-width: thin;
            border-color: #3d3d40;
        }

            .nav-menu li a:hover {
                text-decoration: none;
                background-color: rgba(0, 0, 0, .1)
            }

            /*    .nav-menu ul > li > a {
        padding: .7125rem .8rem .7125rem 2rem;
    }*/

            .nav-menu li a > .nav-link-text {
                flex: 1;
                display: inline-flex;
                align-items: center;
                line-height: normal;
            }

        .nav-menu li b.collapse-sign {
            color: var(--theme-primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-menu li a > [class*=material-icons] {
            color: var(--theme-primary-700);
        }

    .nav-menu i.fa {
        font-size: 1.25rem;
        margin-left: 0.2rem;
    }

    .nav-menu li a > .ni,
    .nav-menu li a > [class*=material-icons] {
        margin-right: .25rem;
        font-size: 1.425rem;
        width: 1.75rem;
        color: var(--theme-primary);
        text-align: left;
    }

    .nav-menu li.active > ul {
        display: block;
    }

    .nav-menu li > ul li.active > a {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-weight: bold;
    }

        .nav-menu li > ul li.active > a:hover {
            text-decoration: none;
            background-color: rgba(0, 0, 0, .1)
        }

ul.nav-menu ul {
    padding-left: 2rem;
}

    ul.nav-menu ul:before {
        content: "";
        display: block;
        position: absolute;
        /* z-index: 1; */
        /* left: 2.5625rem; */
        top: 2.8125rem;
        bottom: 0;
        border-left: 1px dashed #cecece;
    }

.collapmenu-body {
    display: none;
}

.scroll-perfect {
    position: relative;
    overflow: hidden;
    width: auto;
    height: calc(100% - 6.9375rem) !important;
}

@media only screen and (max-width: 992px) {
    .page-content-overlay.mobile-nav-on {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .09);
    }
}

@media only screen and (max-width: 992px) {
    .page-content-overlay {
        position: fixed;
        z-index: 1001;
    }
}

.dragbar {
    flex: 1 0 auto;
    flex-direction: column;
    display: flex;
    margin-left: 17.875rem;
    width: 0.42rem;
    /*background-color: ##707B7C; ha chinh*/
    background-color: #f1f4f6;
    cursor: e-resize;
}

.dropdown-content {
    -webkit-box-shadow: 0 0 15px 1px rgba(90, 80, 105, .2);
    box-shadow: 0 0 15px 1px rgba(90, 80, 105, .2);
    -webkit-user-select: text;
    border-radius: 4px;
    border: none;
}

    .dropdown-content li > a,
    .dropdown-content li > span {
        font-size: 1rem;
        color: #212529;
        display: block;
        padding: .45rem 1rem;
    }

        .dropdown-content li > a > i {
            color: var(--theme-fusion-200);
        }

    .dropdown-content li {
        min-height: auto;
    }

        .dropdown-content li.divider {
            height: 0;
            margin: .5rem 0;
            overflow: hidden;
            border-top: var(--theme-border-solid);
        }

    .dropdown-content .material-icons {
        color: var(--theme-primary);
    }

    .dropdown-content.dropdown-xl {
        width: 21.875rem;
        height: auto
    }

    .dropdown-content.dropdown-l {
        width: 17.5rem;
        height: auto
    }

    .dropdown-content.dropdown-l {
        width: 17.5rem;
        height: auto
    }

    .dropdown-content.dropdown-m {
        width: 14rem;
        height: auto
    }

    .dropdown-content.dropdown-s {
        width: 8rem;
        height: auto
    }

html {
    scroll-behavior: smooth;
    font-size: 14px;
    font-family: 'Lexend Deca', sans-serif;
}
.root-text-xs {
    font-size: 12px;
}

.root-text-sm {
    font-size: 13px;
}

.root-text-md {
    font-size: 14px;
}

.root-text-lg {
    font-size: 15px;
}

.root-text-xl {
    font-size: 16px;
}


.page-header {
    display: block;
}

.header-fixed {
    position: relative;
    height: 4.125rem;
    z-index: 1000;
}

.header-navbar {
    position: fixed;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .07);
    /*background-color: #AAB7B8; ha chinh*/
    background-color: #fff;
    height: 4.125rem;
    width: 100%;
}

    .header-navbar .header-wrapper {
        display: flex;
        align-items: center;
        padding: 0 2rem 0 1.4rem;
        height: 100%;
    }

    .header-navbar .header-logo img {
        height: 3.5rem;
        margin-left: 1.2rem;
    }

    .header-navbar .header-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .header-navbar .logo-text {
        color: #333;
        font-weight: 300;
        margin-left: .7rem;
        font-size: 1.4rem;
    }

    .header-navbar ul a:hover {
        background-color: rgba(0, 0, 0, .1)
    }

    .header-navbar .header-icon-menu {
        margin-left: 2.1rem;
    }

        .header-navbar .header-icon-menu > i {
            font-size: 1.5rem;
        }

@media only screen and (max-width: 570px) {
    .header-navbar .header-icon-menu {
        margin-left: 0rem;
    }

        .header-navbar .header-icon-menu > i {
            font-size: 1rem;
        }
}

.header-navbar .icon-circle {
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-primary);
    font-size: 1.425rem;
}

.header-navbar .right .profile-image {
    width: 2rem;
    height: 2rem;
}

.profile-image-in-menu {
    height: 3.5rem;
    width: 3.5rem;
}

.profile-image-upload {
    height: 10rem;
    width: 10rem;
    cursor: pointer;
}

.header-navbar .right > li {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    float: left;
    padding: 0;
}

    .header-navbar .right > li > a {
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        font-size: 1rem;
        padding: 0 15px;
        cursor: pointer;
        border-radius: 50%;
    }

        .header-navbar .right > li > a > i {
            height: 4.125rem;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
            font-size: 1.5rem;
        }

.badge.badge-icon {
    position: absolute;
    display: inline-block;
    color: #fff;
    background-color: #be2d2d;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
    border: 1px solid transparent;
    font-size: .625rem;
    min-width: 1rem;
    height: 1rem;
    max-width: 1.6875rem;
    padding: 0 3px;
    border-radius: 50%;
    font-weight: bold;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
    margin-bottom: 1.25rem;
    margin-left: 1.25rem;
}


/*panel*/

.card {
    box-shadow: 0 0 5px 0 rgba(62, 44, 90, .08);
    margin: 0.2rem 0 0 0;
}

    .card.horizontal .card-stacked .card-header {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .card .card-header {
        padding: 10px 24px;
        border-bottom: 1px solid rgba(160, 160, 160, 0.2);
        border-radius: 0 0 2px 2px;
    }


    /*input*/

    .card .md-form label {
        font-weight: 300
    }

.md-form.input-group label {
    top: 0;
    margin-bottom: 0
}

.md-form.input-group .input-group-text {
    background-color: #e0e0e0
}

    .md-form.input-group .input-group-text.md-addon {
        font-weight: bold;
        background-color: transparent;
        border: none
    }

.md-form.input-group .form-control {
    padding: .375rem .75rem;
    margin: 0
}

.navbar form .md-form input {
    margin: 0 5px 1px 8px
}

.navbar.navbar-light form .md-form input {
    border-bottom: 1px solid #000
}

    .navbar.navbar-light form .md-form input:focus:not([readonly]) {
        border-color: var(--theme-primary)
    }

.navbar.navbar-light form .md-form .form-control {
    color: #000
}

    .navbar.navbar-light form .md-form .form-control::-webkit-input-placeholder {
        font-weight: 300;
        color: #000
    }

    .navbar.navbar-light form .md-form .form-control::-moz-placeholder {
        font-weight: 300;
        color: #000
    }

    .navbar.navbar-light form .md-form .form-control:-ms-input-placeholder {
        font-weight: 300;
        color: #000
    }

    .navbar.navbar-light form .md-form .form-control::-ms-input-placeholder {
        font-weight: 300;
        color: #000
    }

    .navbar.navbar-light form .md-form .form-control::placeholder {
        font-weight: 300;
        color: #000
    }

.navbar.navbar-dark form .md-form input {
    border-bottom: 1px solid #fff
}

    .navbar.navbar-dark form .md-form input:focus:not([readonly]) {
        border-color: var(--theme-primary)
    }

.navbar.navbar-dark form .md-form .form-control {
    color: #fff
}

    .navbar.navbar-dark form .md-form .form-control::-webkit-input-placeholder {
        font-weight: 300;
        color: #fff
    }

    .navbar.navbar-dark form .md-form .form-control::-moz-placeholder {
        font-weight: 300;
        color: #fff
    }

    .navbar.navbar-dark form .md-form .form-control:-ms-input-placeholder {
        font-weight: 300;
        color: #fff
    }

    .navbar.navbar-dark form .md-form .form-control::-ms-input-placeholder {
        font-weight: 300;
        color: #fff
    }

    .navbar.navbar-dark form .md-form .form-control::placeholder {
        font-weight: 300;
        color: #fff
    }

.md-form {
    position: relative;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem
}

    .md-form input:not([type]),
    .md-form input[type="text"]:not(.browser-default),
    .md-form input[type="password"]:not(.browser-default),
    .md-form input[type="email"]:not(.browser-default),
    .md-form input[type="url"]:not(.browser-default),
    .md-form input[type="time"]:not(.browser-default),
    .md-form input[type="date"]:not(.browser-default),
    .md-form input[type="datetime"]:not(.browser-default),
    .md-form input[type="datetime-local"]:not(.browser-default),
    .md-form input[type="tel"]:not(.browser-default),
    .md-form input[type="number"]:not(.browser-default),
    .md-form input[type="search"]:not(.browser-default),
    .md-form input[type="phone"]:not(.browser-default),
    .md-form input[type="search-md"],
    .md-form textarea.md-textarea {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #ced4da;
        border-radius: 0;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out
    }

.input-field input:not([type]):focus:not([readonly]),
.input-field input[type="text"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="password"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="email"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="url"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="time"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="date"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="datetime"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="tel"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="number"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="search"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="phone"]:not(.browser-default):focus:not([readonly]),
.input-field input[type="search-md"]:focus:not([readonly]),
.input-field textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--theme-primary);
    -webkit-box-shadow: 0 1px 0 0 var(--theme-primary);
    box-shadow: 0 1px 0 0 var(--theme-primary)
}

    .input-field input:not([type]):focus:not([readonly]) + label,
    .input-field input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="url"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="time"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="date"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="datetime-local"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="number"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="search"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="phone"]:not(.browser-default):focus:not([readonly]) + label,
    .input-field input[type="search-md"]:focus:not([readonly]) + label,
    .input-field textarea:focus:not([readonly]) + label {
        color: var(--theme-primary)
    }

.md-form input:not([type]) + label::after,
.md-form input[type="text"]:not(.browser-default) + label::after,
.md-form input[type="password"]:not(.browser-default) + label::after,
.md-form input[type="email"]:not(.browser-default) + label::after,
.md-form input[type="url"]:not(.browser-default) + label::after,
.md-form input[type="time"]:not(.browser-default) + label::after,
.md-form input[type="date"]:not(.browser-default) + label::after,
.md-form input[type="datetime"]:not(.browser-default) + label::after,
.md-form input[type="datetime-local"]:not(.browser-default) + label::after,
.md-form input[type="tel"]:not(.browser-default) + label::after,
.md-form input[type="number"]:not(.browser-default) + label::after,
.md-form input[type="search"]:not(.browser-default) + label::after,
.md-form input[type="phone"]:not(.browser-default) + label::after,
.md-form input[type="search-md"] + label::after,
.md-form textarea.md-textarea + label::after {
    position: absolute;
    top: 65px;
    display: block;
    content: "";
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-out, 0.2s color ease-out;
    transition: 0.2s opacity ease-out, 0.2s color ease-out
}

.md-form input:not([type]).valid,
.md-form input:not([type]):focus.valid,
.md-form input[type="text"]:not(.browser-default).valid,
.md-form input[type="text"]:not(.browser-default):focus.valid,
.md-form input[type="password"]:not(.browser-default).valid,
.md-form input[type="password"]:not(.browser-default):focus.valid,
.md-form input[type="email"]:not(.browser-default).valid,
.md-form input[type="email"]:not(.browser-default):focus.valid,
.md-form input[type="url"]:not(.browser-default).valid,
.md-form input[type="url"]:not(.browser-default):focus.valid,
.md-form input[type="time"]:not(.browser-default).valid,
.md-form input[type="time"]:not(.browser-default):focus.valid,
.md-form input[type="date"]:not(.browser-default).valid,
.md-form input[type="date"]:not(.browser-default):focus.valid,
.md-form input[type="datetime"]:not(.browser-default).valid,
.md-form input[type="datetime"]:not(.browser-default):focus.valid,
.md-form input[type="datetime-local"]:not(.browser-default).valid,
.md-form input[type="datetime-local"]:not(.browser-default):focus.valid,
.md-form input[type="tel"]:not(.browser-default).valid,
.md-form input[type="tel"]:not(.browser-default):focus.valid,
.md-form input[type="number"]:not(.browser-default).valid,
.md-form input[type="number"]:not(.browser-default):focus.valid,
.md-form input[type="search"]:not(.browser-default).valid,
.md-form input[type="search"]:not(.browser-default):focus.valid,
.md-form input[type="phone"]:not(.browser-default).valid,
.md-form input[type="phone"]:not(.browser-default):focus.valid,
.md-form input[type="search-md"].valid,
.md-form input[type="search-md"]:focus.valid,
.md-form textarea.md-textarea.valid,
.md-form textarea.md-textarea:focus.valid {
    border-bottom: 1px solid #00c851;
    -webkit-box-shadow: 0 1px 0 0 #00c851;
    box-shadow: 0 1px 0 0 #00c851
}

    .md-form input:not([type]).valid + label:after,
    .md-form input:not([type]):focus.valid + label:after,
    .md-form input[type="text"]:not(.browser-default).valid + label:after,
    .md-form input[type="text"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="password"]:not(.browser-default).valid + label:after,
    .md-form input[type="password"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="email"]:not(.browser-default).valid + label:after,
    .md-form input[type="email"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="url"]:not(.browser-default).valid + label:after,
    .md-form input[type="url"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="time"]:not(.browser-default).valid + label:after,
    .md-form input[type="time"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="date"]:not(.browser-default).valid + label:after,
    .md-form input[type="date"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="datetime"]:not(.browser-default).valid + label:after,
    .md-form input[type="datetime"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="datetime-local"]:not(.browser-default).valid + label:after,
    .md-form input[type="datetime-local"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="tel"]:not(.browser-default).valid + label:after,
    .md-form input[type="tel"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="number"]:not(.browser-default).valid + label:after,
    .md-form input[type="number"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="search"]:not(.browser-default).valid + label:after,
    .md-form input[type="search"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="phone"]:not(.browser-default).valid + label:after,
    .md-form input[type="phone"]:not(.browser-default):focus.valid + label:after,
    .md-form input[type="search-md"].valid + label:after,
    .md-form input[type="search-md"]:focus.valid + label:after,
    .md-form textarea.md-textarea.valid + label:after,
    .md-form textarea.md-textarea:focus.valid + label:after {
        color: #00c851;
        content: attr(data-success);
        opacity: 1
    }

.md-form input:not([type]).invalid,
.md-form input:not([type]):focus.invalid,
.md-form input[type="text"]:not(.browser-default).invalid,
.md-form input[type="text"]:not(.browser-default):focus.invalid,
.md-form input[type="password"]:not(.browser-default).invalid,
.md-form input[type="password"]:not(.browser-default):focus.invalid,
.md-form input[type="email"]:not(.browser-default).invalid,
.md-form input[type="email"]:not(.browser-default):focus.invalid,
.md-form input[type="url"]:not(.browser-default).invalid,
.md-form input[type="url"]:not(.browser-default):focus.invalid,
.md-form input[type="time"]:not(.browser-default).invalid,
.md-form input[type="time"]:not(.browser-default):focus.invalid,
.md-form input[type="date"]:not(.browser-default).invalid,
.md-form input[type="date"]:not(.browser-default):focus.invalid,
.md-form input[type="datetime"]:not(.browser-default).invalid,
.md-form input[type="datetime"]:not(.browser-default):focus.invalid,
.md-form input[type="datetime-local"]:not(.browser-default).invalid,
.md-form input[type="datetime-local"]:not(.browser-default):focus.invalid,
.md-form input[type="tel"]:not(.browser-default).invalid,
.md-form input[type="tel"]:not(.browser-default):focus.invalid,
.md-form input[type="number"]:not(.browser-default).invalid,
.md-form input[type="number"]:not(.browser-default):focus.invalid,
.md-form input[type="search"]:not(.browser-default).invalid,
.md-form input[type="search"]:not(.browser-default):focus.invalid,
.md-form input[type="phone"]:not(.browser-default).invalid,
.md-form input[type="phone"]:not(.browser-default):focus.invalid,
.md-form input[type="search-md"].invalid,
.md-form input[type="search-md"]:focus.invalid,
.md-form textarea.md-textarea.invalid,
.md-form textarea.md-textarea:focus.invalid {
    border-bottom: 1px solid #f44336;
    -webkit-box-shadow: 0 1px 0 0 #f44336;
    box-shadow: 0 1px 0 0 #f44336
}

    .md-form input:not([type]).invalid + label:after,
    .md-form input:not([type]):focus.invalid + label:after,
    .md-form input[type="text"]:not(.browser-default).invalid + label:after,
    .md-form input[type="text"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="password"]:not(.browser-default).invalid + label:after,
    .md-form input[type="password"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="email"]:not(.browser-default).invalid + label:after,
    .md-form input[type="email"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="url"]:not(.browser-default).invalid + label:after,
    .md-form input[type="url"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="time"]:not(.browser-default).invalid + label:after,
    .md-form input[type="time"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="date"]:not(.browser-default).invalid + label:after,
    .md-form input[type="date"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="datetime"]:not(.browser-default).invalid + label:after,
    .md-form input[type="datetime"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="datetime-local"]:not(.browser-default).invalid + label:after,
    .md-form input[type="datetime-local"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="tel"]:not(.browser-default).invalid + label:after,
    .md-form input[type="tel"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="number"]:not(.browser-default).invalid + label:after,
    .md-form input[type="number"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="search"]:not(.browser-default).invalid + label:after,
    .md-form input[type="search"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="phone"]:not(.browser-default).invalid + label:after,
    .md-form input[type="phone"]:not(.browser-default):focus.invalid + label:after,
    .md-form input[type="search-md"].invalid + label:after,
    .md-form input[type="search-md"]:focus.invalid + label:after,
    .md-form textarea.md-textarea.invalid + label:after,
    .md-form textarea.md-textarea:focus.invalid + label:after {
        color: #f44336;
        content: attr(data-error);
        opacity: 1
    }

.md-form input:not([type]).form-control.valid + label:after,
.md-form input:not([type]).form-control:focus.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control:focus.valid + label:after,
.md-form input[type="search-md"].form-control.valid + label:after,
.md-form input[type="search-md"].form-control:focus.valid + label:after,
.md-form textarea.md-textarea.form-control.valid + label:after,
.md-form textarea.md-textarea.form-control:focus.valid + label:after {
    top: 4.1rem
}

.md-form input:not([type]).form-control.invalid + label:after,
.md-form input:not([type]).form-control:focus.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control:focus.invalid + label:after,
.md-form input[type="search-md"].form-control.invalid + label:after,
.md-form input[type="search-md"].form-control:focus.invalid + label:after,
.md-form textarea.md-textarea.form-control.invalid + label:after,
.md-form textarea.md-textarea.form-control:focus.invalid + label:after {
    top: 4rem
}

.md-form input:not([type]).form-control-lg.valid + label:after,
.md-form input:not([type]).form-control-lg:focus.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-lg.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-lg:focus.valid + label:after,
.md-form input[type="search-md"].form-control-lg.valid + label:after,
.md-form input[type="search-md"].form-control-lg:focus.valid + label:after,
.md-form textarea.md-textarea.form-control-lg.valid + label:after,
.md-form textarea.md-textarea.form-control-lg:focus.valid + label:after {
    top: 4.6rem
}

.md-form input:not([type]).form-control-lg.invalid + label:after,
.md-form input:not([type]).form-control-lg:focus.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-lg.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-lg:focus.invalid + label:after,
.md-form input[type="search-md"].form-control-lg.invalid + label:after,
.md-form input[type="search-md"].form-control-lg:focus.invalid + label:after,
.md-form textarea.md-textarea.form-control-lg.invalid + label:after,
.md-form textarea.md-textarea.form-control-lg:focus.invalid + label:after {
    top: 4.6rem
}

.md-form input:not([type]).form-control-sm.valid + label:after,
.md-form input:not([type]).form-control-sm:focus.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-sm.valid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-sm:focus.valid + label:after,
.md-form input[type="search-md"].form-control-sm.valid + label:after,
.md-form input[type="search-md"].form-control-sm:focus.valid + label:after,
.md-form textarea.md-textarea.form-control-sm.valid + label:after,
.md-form textarea.md-textarea.form-control-sm:focus.valid + label:after {
    top: 3.7rem
}

.md-form input:not([type]).form-control-sm.invalid + label:after,
.md-form input:not([type]).form-control-sm:focus.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="text"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="password"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="email"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="url"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="time"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="date"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="datetime"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="datetime-local"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="tel"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="number"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="search"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-sm.invalid + label:after,
.md-form input[type="phone"]:not(.browser-default).form-control-sm:focus.invalid + label:after,
.md-form input[type="search-md"].form-control-sm.invalid + label:after,
.md-form input[type="search-md"].form-control-sm:focus.invalid + label:after,
.md-form textarea.md-textarea.form-control-sm.invalid + label:after,
.md-form textarea.md-textarea.form-control-sm:focus.invalid + label:after {
    top: 3.6rem
}

input:not([type]):disabled + label, input:not([type])[readonly="readonly"] + label, input[type=text]:not(.browser-default):disabled + label, input[type=text]:not(.browser-default)[readonly="readonly"] + label, input[type=password]:not(.browser-default):disabled + label, input[type=password]:not(.browser-default)[readonly="readonly"] + label, input[type=email]:not(.browser-default):disabled + label, input[type=email]:not(.browser-default)[readonly="readonly"] + label, input[type=url]:not(.browser-default):disabled + label, input[type=url]:not(.browser-default)[readonly="readonly"] + label, input[type=time]:not(.browser-default):disabled + label, input[type=time]:not(.browser-default)[readonly="readonly"] + label, input[type=date]:not(.browser-default):disabled + label, input[type=date]:not(.browser-default)[readonly="readonly"] + label, input[type=datetime]:not(.browser-default):disabled + label, input[type=datetime]:not(.browser-default)[readonly="readonly"] + label, input[type=datetime-local]:not(.browser-default):disabled + label, input[type=datetime-local]:not(.browser-default)[readonly="readonly"] + label, input[type=tel]:not(.browser-default):disabled + label, input[type=tel]:not(.browser-default)[readonly="readonly"] + label, input[type=number]:not(.browser-default):disabled + label, input[type=number]:not(.browser-default)[readonly="readonly"] + label, input[type=search]:not(.browser-default):disabled + label, input[type=search]:not(.browser-default)[readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label {
    color: rgba(0,0,0,0.62);
}
input:not([type]):disabled, input:not([type])[readonly="readonly"], input[type=text]:not(.browser-default):disabled, input[type=text]:not(.browser-default)[readonly="readonly"], input[type=password]:not(.browser-default):disabled, input[type=password]:not(.browser-default)[readonly="readonly"], input[type=email]:not(.browser-default):disabled, input[type=email]:not(.browser-default)[readonly="readonly"], input[type=url]:not(.browser-default):disabled, input[type=url]:not(.browser-default)[readonly="readonly"], input[type=time]:not(.browser-default):disabled, input[type=time]:not(.browser-default)[readonly="readonly"], input[type=date]:not(.browser-default):disabled, input[type=date]:not(.browser-default)[readonly="readonly"], input[type=datetime]:not(.browser-default):disabled, input[type=datetime]:not(.browser-default)[readonly="readonly"], input[type=datetime-local]:not(.browser-default):disabled, input[type=datetime-local]:not(.browser-default)[readonly="readonly"], input[type=tel]:not(.browser-default):disabled, input[type=tel]:not(.browser-default)[readonly="readonly"], input[type=number]:not(.browser-default):disabled, input[type=number]:not(.browser-default)[readonly="readonly"], input[type=search]:not(.browser-default):disabled, input[type=search]:not(.browser-default)[readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] {
    color: rgba(0,0,0,0.62);
    border-bottom: 1px dotted rgba(0,0,0,0.62);
}
.md-form > input[type="date"]:not(.browser-default) {
    color: transparent
}

    .md-form > input[type="date"]:not(.browser-default) + label {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

.md-form > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
.md-form > input[type="time"]:not(.browser-default) + label {
    font-size: .8rem;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.md-form .was-validated input[type="text"]:valid + label {
    color: #00c851 !important
}

.md-form .was-validated input[type="text"]:invalid + label {
    color: #f44336 !important
}

.md-form .was-validated .form-control:valid:focus {
    -webkit-box-shadow: 0 1px 0 0 #00c851 !important;
    box-shadow: 0 1px 0 0 #00c851 !important
}

.md-form .was-validated .form-control:valid {
    border-color: #00c851 !important
}

.md-form .was-validated .form-control:invalid:focus {
    -webkit-box-shadow: 0 1px 0 0 #f44336 !important;
    box-shadow: 0 1px 0 0 #f44336 !important
}

.md-form .was-validated .form-control:invalid {
    border-color: #f44336 !important
}

.md-form .form-control {
    height: auto;
    padding: .6rem 0 .4rem 0;
    margin: 0 0 .5rem 0;
    background-color: transparent;
    border-radius: 0
}

    .md-form .form-control:focus {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .md-form .form-control:disabled,
    .md-form .form-control[readonly] {
        background-color: transparent;
        border-bottom: 1px solid #bdbdbd
    }

    .md-form .form-control.is-valid {
        border-color: #00c851
    }

        .md-form .form-control.is-valid:focus {
            border-color: #00c851 !important;
            -webkit-box-shadow: 0 1px 0 0 #00c851 !important;
            box-shadow: 0 1px 0 0 #00c851 !important
        }

    .md-form .form-control.is-invalid {
        border-color: #f44336
    }

        .md-form .form-control.is-invalid:focus {
            border-color: #f44336 !important;
            -webkit-box-shadow: 0 1px 0 0 #f44336 !important;
            box-shadow: 0 1px 0 0 #f44336 !important
        }

    .md-form .form-control.is-valid,
    .md-form .form-control.is-invalid {
        background-position: center right !important
    }

.md-form .validate {
    margin-bottom: 2.5rem
}

.md-form label {
    font-size: 1rem
}

    .md-form label.active {
        font-size: 1rem
    }

.md-form .prefix {
    top: .25rem;
    font-size: 1.75rem
}

    .md-form .prefix ~ input,
    .md-form .prefix ~ textarea {
        width: calc(100% - 2.5rem);
        margin-left: 2.5rem
    }

    .md-form .prefix ~ label {
        margin-left: 2.5rem
    }

    .md-form .prefix ~ .form-text {
        margin-left: 2.6rem
    }

.md-form label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    color: #757575;
    cursor: text;
    -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

    .md-form label.active {
        -webkit-transform: translateY(-14px) scale(0.8);
        transform: translateY(-14px) scale(0.8)
    }

.md-form .prefix {
    position: absolute;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

    .md-form .prefix.active {
        color: var(--theme-primary)
    }

.md-form.form-lg .validate {
    margin-bottom: 2.8rem
}

.md-form.form-lg label {
    font-size: 1.25rem
}

    .md-form.form-lg label.active {
        font-size: 1.15rem
    }

.md-form.form-lg .prefix {
    top: .4rem;
    font-size: 2rem
}

    .md-form.form-lg .prefix ~ input,
    .md-form.form-lg .prefix ~ textarea {
        width: calc(100% - 3rem);
        margin-left: 3rem
    }

    .md-form.form-lg .prefix ~ label {
        margin-left: 3rem
    }

    .md-form.form-lg .prefix ~ .form-text {
        margin-left: 3.1rem
    }

.md-form.form-sm .validate {
    margin-bottom: 2.3rem
}

.md-form.form-sm label {
    font-size: .875rem
}

    .md-form.form-sm label.active {
        font-size: .95rem
    }

.md-form.form-sm .prefix {
    top: .35rem;
    font-size: 1.5rem
}

    .md-form.form-sm .prefix ~ input,
    .md-form.form-sm .prefix ~ textarea {
        width: calc(100% - 2rem);
        margin-left: 2rem
    }

    .md-form.form-sm .prefix ~ label {
        margin-left: 2rem
    }

    .md-form.form-sm .prefix ~ .form-text {
        margin-left: 2rem
    }

.md-form textarea.md-textarea {
    padding: 0;
    overflow-y: hidden
}

    .md-form textarea.md-textarea + label {
        top: -0.6rem
    }

.md-form textarea.md-textarea-auto {
    padding: 0;
    padding-top: 1.5rem
}

    .md-form textarea.md-textarea-auto + label {
        top: 0
    }

.md-form.md-outline {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

    .md-form.md-outline input[type="text"],
    .md-form.md-outline input[type="password"],
    .md-form.md-outline input[type="email"],
    .md-form.md-outline input[type="url"],
    .md-form.md-outline input[type="time"],
    .md-form.md-outline input[type="date"],
    .md-form.md-outline input[type="datetime-local"],
    .md-form.md-outline input[type="tel"],
    .md-form.md-outline input[type="number"],
    .md-form.md-outline input[type="search-md"],
    .md-form.md-outline input[type="search"],
    .md-form.md-outline textarea.md-textarea {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: transparent;
        border: 1px solid #dadce0;
        border-radius: 4px;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: all .3s;
        transition: all .3s
    }

        .md-form.md-outline input[type="text"]:focus:not([readonly]),
        .md-form.md-outline input[type="password"]:focus:not([readonly]),
        .md-form.md-outline input[type="email"]:focus:not([readonly]),
        .md-form.md-outline input[type="url"]:focus:not([readonly]),
        .md-form.md-outline input[type="time"]:focus:not([readonly]),
        .md-form.md-outline input[type="date"]:focus:not([readonly]),
        .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]),
        .md-form.md-outline input[type="tel"]:focus:not([readonly]),
        .md-form.md-outline input[type="number"]:focus:not([readonly]),
        .md-form.md-outline input[type="search-md"]:focus:not([readonly]),
        .md-form.md-outline input[type="search"]:focus:not([readonly]),
        .md-form.md-outline textarea.md-textarea:focus:not([readonly]) {
            border-color: var(--theme-primary);
            -webkit-box-shadow: inset 0 0 0 1px var(--theme-primary);
            box-shadow: inset 0 0 0 1px var(--theme-primary)
        }

            .md-form.md-outline input[type="text"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="password"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="email"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="url"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="time"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="date"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="tel"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="number"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="search-md"]:focus:not([readonly]) + label,
            .md-form.md-outline input[type="search"]:focus:not([readonly]) + label,
            .md-form.md-outline textarea.md-textarea:focus:not([readonly]) + label {
                color: var(--theme-primary)
            }

        .md-form.md-outline input[type="text"].valid,
        .md-form.md-outline input[type="text"]:focus.valid,
        .md-form.md-outline input[type="password"].valid,
        .md-form.md-outline input[type="password"]:focus.valid,
        .md-form.md-outline input[type="email"].valid,
        .md-form.md-outline input[type="email"]:focus.valid,
        .md-form.md-outline input[type="url"].valid,
        .md-form.md-outline input[type="url"]:focus.valid,
        .md-form.md-outline input[type="time"].valid,
        .md-form.md-outline input[type="time"]:focus.valid,
        .md-form.md-outline input[type="date"].valid,
        .md-form.md-outline input[type="date"]:focus.valid,
        .md-form.md-outline input[type="datetime-local"].valid,
        .md-form.md-outline input[type="datetime-local"]:focus.valid,
        .md-form.md-outline input[type="tel"].valid,
        .md-form.md-outline input[type="tel"]:focus.valid,
        .md-form.md-outline input[type="number"].valid,
        .md-form.md-outline input[type="number"]:focus.valid,
        .md-form.md-outline input[type="search-md"].valid,
        .md-form.md-outline input[type="search-md"]:focus.valid,
        .md-form.md-outline input[type="search"].valid,
        .md-form.md-outline input[type="search"]:focus.valid,
        .md-form.md-outline textarea.md-textarea.valid,
        .md-form.md-outline textarea.md-textarea:focus.valid {
            border-color: #00c851;
            -webkit-box-shadow: inset 0 0 0 1px #00c851;
            box-shadow: inset 0 0 0 1px #00c851
        }

            .md-form.md-outline input[type="text"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="text"].valid + label:after,
            .md-form.md-outline input[type="text"]:focus.valid + label:after,
            .md-form.md-outline input[type="password"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="password"].valid + label:after,
            .md-form.md-outline input[type="password"]:focus.valid + label:after,
            .md-form.md-outline input[type="email"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="email"].valid + label:after,
            .md-form.md-outline input[type="email"]:focus.valid + label:after,
            .md-form.md-outline input[type="url"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="url"].valid + label:after,
            .md-form.md-outline input[type="url"]:focus.valid + label:after,
            .md-form.md-outline input[type="time"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="time"].valid + label:after,
            .md-form.md-outline input[type="time"]:focus.valid + label:after,
            .md-form.md-outline input[type="date"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="date"].valid + label:after,
            .md-form.md-outline input[type="date"]:focus.valid + label:after,
            .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="datetime-local"].valid + label:after,
            .md-form.md-outline input[type="datetime-local"]:focus.valid + label:after,
            .md-form.md-outline input[type="tel"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="tel"].valid + label:after,
            .md-form.md-outline input[type="tel"]:focus.valid + label:after,
            .md-form.md-outline input[type="number"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="number"].valid + label:after,
            .md-form.md-outline input[type="number"]:focus.valid + label:after,
            .md-form.md-outline input[type="search-md"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="search-md"].valid + label:after,
            .md-form.md-outline input[type="search-md"]:focus.valid + label:after,
            .md-form.md-outline input[type="search"]:focus:not([readonly]).valid + label,
            .md-form.md-outline input[type="search"].valid + label:after,
            .md-form.md-outline input[type="search"]:focus.valid + label:after,
            .md-form.md-outline textarea.md-textarea:focus:not([readonly]).valid + label,
            .md-form.md-outline textarea.md-textarea.valid + label:after,
            .md-form.md-outline textarea.md-textarea:focus.valid + label:after {
                color: #00c851;
                content: attr(data-success);
                opacity: 1
            }

        .md-form.md-outline input[type="text"].invalid,
        .md-form.md-outline input[type="text"]:focus.invalid,
        .md-form.md-outline input[type="password"].invalid,
        .md-form.md-outline input[type="password"]:focus.invalid,
        .md-form.md-outline input[type="email"].invalid,
        .md-form.md-outline input[type="email"]:focus.invalid,
        .md-form.md-outline input[type="url"].invalid,
        .md-form.md-outline input[type="url"]:focus.invalid,
        .md-form.md-outline input[type="time"].invalid,
        .md-form.md-outline input[type="time"]:focus.invalid,
        .md-form.md-outline input[type="date"].invalid,
        .md-form.md-outline input[type="date"]:focus.invalid,
        .md-form.md-outline input[type="datetime-local"].invalid,
        .md-form.md-outline input[type="datetime-local"]:focus.invalid,
        .md-form.md-outline input[type="tel"].invalid,
        .md-form.md-outline input[type="tel"]:focus.invalid,
        .md-form.md-outline input[type="number"].invalid,
        .md-form.md-outline input[type="number"]:focus.invalid,
        .md-form.md-outline input[type="search-md"].invalid,
        .md-form.md-outline input[type="search-md"]:focus.invalid,
        .md-form.md-outline input[type="search"].invalid,
        .md-form.md-outline input[type="search"]:focus.invalid,
        .md-form.md-outline textarea.md-textarea.invalid,
        .md-form.md-outline textarea.md-textarea:focus.invalid {
            border-color: #f44336;
            -webkit-box-shadow: inset 0 0 0 1px #f44336;
            box-shadow: inset 0 0 0 1px #f44336
        }

            .md-form.md-outline input[type="text"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="text"].invalid + label:after,
            .md-form.md-outline input[type="text"]:focus.invalid + label:after,
            .md-form.md-outline input[type="password"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="password"].invalid + label:after,
            .md-form.md-outline input[type="password"]:focus.invalid + label:after,
            .md-form.md-outline input[type="email"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="email"].invalid + label:after,
            .md-form.md-outline input[type="email"]:focus.invalid + label:after,
            .md-form.md-outline input[type="url"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="url"].invalid + label:after,
            .md-form.md-outline input[type="url"]:focus.invalid + label:after,
            .md-form.md-outline input[type="time"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="time"].invalid + label:after,
            .md-form.md-outline input[type="time"]:focus.invalid + label:after,
            .md-form.md-outline input[type="date"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="date"].invalid + label:after,
            .md-form.md-outline input[type="date"]:focus.invalid + label:after,
            .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="datetime-local"].invalid + label:after,
            .md-form.md-outline input[type="datetime-local"]:focus.invalid + label:after,
            .md-form.md-outline input[type="tel"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="tel"].invalid + label:after,
            .md-form.md-outline input[type="tel"]:focus.invalid + label:after,
            .md-form.md-outline input[type="number"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="number"].invalid + label:after,
            .md-form.md-outline input[type="number"]:focus.invalid + label:after,
            .md-form.md-outline input[type="search-md"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="search-md"].invalid + label:after,
            .md-form.md-outline input[type="search-md"]:focus.invalid + label:after,
            .md-form.md-outline input[type="search"]:focus:not([readonly]).invalid + label,
            .md-form.md-outline input[type="search"].invalid + label:after,
            .md-form.md-outline input[type="search"]:focus.invalid + label:after,
            .md-form.md-outline textarea.md-textarea:focus:not([readonly]).invalid + label,
            .md-form.md-outline textarea.md-textarea.invalid + label:after,
            .md-form.md-outline textarea.md-textarea:focus.invalid + label:after {
                color: #f44336;
                content: attr(data-error);
                opacity: 1
            }

        .md-form.md-outline input[type="text"].form-control.valid + label:after,
        .md-form.md-outline input[type="text"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="password"].form-control.valid + label:after,
        .md-form.md-outline input[type="password"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="email"].form-control.valid + label:after,
        .md-form.md-outline input[type="email"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="url"].form-control.valid + label:after,
        .md-form.md-outline input[type="url"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="time"].form-control.valid + label:after,
        .md-form.md-outline input[type="time"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="date"].form-control.valid + label:after,
        .md-form.md-outline input[type="date"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="datetime-local"].form-control.valid + label:after,
        .md-form.md-outline input[type="datetime-local"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="tel"].form-control.valid + label:after,
        .md-form.md-outline input[type="tel"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="number"].form-control.valid + label:after,
        .md-form.md-outline input[type="number"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="search-md"].form-control.valid + label:after,
        .md-form.md-outline input[type="search-md"].form-control:focus.valid + label:after,
        .md-form.md-outline input[type="search"].form-control.valid + label:after,
        .md-form.md-outline input[type="search"].form-control:focus.valid + label:after,
        .md-form.md-outline textarea.md-textarea.form-control.valid + label:after,
        .md-form.md-outline textarea.md-textarea.form-control:focus.valid + label:after {
            position: absolute;
            top: 4rem;
            left: 0
        }

        .md-form.md-outline input[type="text"].form-control.invalid + label:after,
        .md-form.md-outline input[type="text"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="password"].form-control.invalid + label:after,
        .md-form.md-outline input[type="password"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="email"].form-control.invalid + label:after,
        .md-form.md-outline input[type="email"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="url"].form-control.invalid + label:after,
        .md-form.md-outline input[type="url"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="time"].form-control.invalid + label:after,
        .md-form.md-outline input[type="time"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="date"].form-control.invalid + label:after,
        .md-form.md-outline input[type="date"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="datetime-local"].form-control.invalid + label:after,
        .md-form.md-outline input[type="datetime-local"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="tel"].form-control.invalid + label:after,
        .md-form.md-outline input[type="tel"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="number"].form-control.invalid + label:after,
        .md-form.md-outline input[type="number"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="search-md"].form-control.invalid + label:after,
        .md-form.md-outline input[type="search-md"].form-control:focus.invalid + label:after,
        .md-form.md-outline input[type="search"].form-control.invalid + label:after,
        .md-form.md-outline input[type="search"].form-control:focus.invalid + label:after,
        .md-form.md-outline textarea.md-textarea.form-control.invalid + label:after,
        .md-form.md-outline textarea.md-textarea.form-control:focus.invalid + label:after {
            position: absolute;
            top: 4rem;
            left: 0
        }

    .md-form.md-outline > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
    .md-form.md-outline > input[type="time"]:not(.browser-default) + label {
        left: 8px;
        padding-right: 5px;
        padding-left: 5px;
        font-size: 1rem;
        font-weight: bold;
        background: #fff;
        -webkit-transform: translateY(-9px) scale(0.8);
        transform: translateY(-9px) scale(0.8);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

        .md-form.md-outline > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label.active,
        .md-form.md-outline > input[type="time"]:not(.browser-default) + label.active {
            -webkit-transform: translateY(-9px) scale(0.8);
            transform: translateY(-9px) scale(0.8);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0
        }

@-webkit-keyframes autofill {
    to {
        color: #495057;
        background: transparent
    }
}

@keyframes autofill {
    to {
        color: #495057;
        background: transparent
    }
}

.md-form.md-outline input:-webkit-autofill {
    -webkit-animation-name: autofill;
    animation-name: autofill;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.md-form.md-outline .form-control {
    padding: .375rem .75rem
}

.md-form.md-outline label {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 10px;
    font-size: 1rem;
    color: #757575;
    cursor: text;
    -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

    .md-form.md-outline label.active {
        left: 8px;
        padding-right: 5px;
        padding-left: 5px;
        font-weight: bold;
        background: #fff;
        -webkit-transform: translateY(-13px) scale(0.8);
        transform: translateY(-13px) scale(0.8)
    }

.md-form.md-outline.form-lg .form-control.form-control-lg {
    padding: .5rem .725rem
}

.md-form.md-outline.form-lg label {
    font-size: 1.25rem;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

    .md-form.md-outline.form-lg label.active {
        font-size: 1.1rem;
        -webkit-transform: translateY(-14px) scale(0.8);
        transform: translateY(-14px) scale(0.8)
    }

.md-form.md-outline.form-lg .prefix {
    top: .65rem;
    font-size: 25px
}

    .md-form.md-outline.form-lg .prefix ~ input,
    .md-form.md-outline.form-lg .prefix ~ textarea {
        width: calc(100% - 2.2rem);
        margin-left: 2.2rem
    }

    .md-form.md-outline.form-lg .prefix ~ label {
        margin-left: 2.2rem
    }

    .md-form.md-outline.form-lg .prefix ~ .form-text {
        margin-left: 2.3rem
    }

.md-form.md-outline.form-sm .form-control.form-control-sm {
    padding: .25rem .625rem
}

.md-form.md-outline.form-sm label {
    font-size: .8rem;
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

    .md-form.md-outline.form-sm label.active {
        font-size: .85rem;
        -webkit-transform: translateY(-12px) scale(0.8);
        transform: translateY(-12px) scale(0.8)
    }

.md-form.md-outline.form-sm .prefix {
    top: .5rem;
    font-size: 15px
}

    .md-form.md-outline.form-sm .prefix ~ input,
    .md-form.md-outline.form-sm .prefix ~ textarea {
        width: calc(100% - 1.6rem);
        margin-left: 1.6rem
    }

    .md-form.md-outline.form-sm .prefix ~ label {
        margin-left: 1.6rem
    }

    .md-form.md-outline.form-sm .prefix ~ .form-text {
        margin-left: 1.7rem
    }

.md-form.md-outline .prefix {
    position: absolute;
    top: .6rem;
    font-size: 20px;
    -webkit-transition: color .2s;
    transition: color .2s
}

    .md-form.md-outline .prefix:focus {
        color: var(--theme-primary)
    }

    .md-form.md-outline .prefix ~ input,
    .md-form.md-outline .prefix ~ textarea {
        width: calc(100% - 2rem);
        margin-left: 2rem
    }

    .md-form.md-outline .prefix ~ label {
        margin-left: 2rem
    }

    .md-form.md-outline .prefix ~ .form-text {
        margin-left: 2.1rem
    }

.md-form.md-outline .character-counter {
    margin-top: -.5rem
}

.md-form.md-bg input[type="text"],
.md-form.md-bg input[type="password"],
.md-form.md-bg input[type="email"],
.md-form.md-bg input[type="url"],
.md-form.md-bg input[type="time"],
.md-form.md-bg input[type="date"],
.md-form.md-bg input[type="datetime-local"],
.md-form.md-bg input[type="tel"],
.md-form.md-bg input[type="number"],
.md-form.md-bg input[type="search-md"],
.md-form.md-bg input[type="search"],
.md-form.md-bg textarea.md-textarea {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 5px;
    /*    background: #f5f5f5 no-repeat;*/
    background-color: transparent;
    background-repeat: no-repeat;
    /*    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-primary)), to(var(--theme-primary))), 
        -webkit-gradient(linear, left top, left bottom, from(#ced4da), to(#ced4da));    */
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-primary)), to(var(--theme-primary))), -webkit-gradient(linear, left top, left bottom, from(#ced4da), to(#9e9e9e));
    /*    background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary)), linear-gradient(to bottom, #ced4da, #ced4da);*/
    background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary)), linear-gradient(to bottom, #9e9e9e, #9e9e9e);
    background-position: 50% 100%, 50% 100%;
    background-size: 0 2px, 100% 1px;
    border: 0;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    -webkit-transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1)
}


    .md-form.md-bg input[type="text"]:focus:not([readonly]),
    .md-form.md-bg input[type="password"]:focus:not([readonly]),
    .md-form.md-bg input[type="email"]:focus:not([readonly]),
    .md-form.md-bg input[type="url"]:focus:not([readonly]),
    .md-form.md-bg input[type="time"]:focus:not([readonly]),
    .md-form.md-bg input[type="date"]:focus:not([readonly]),
    .md-form.md-bg input[type="datetime-local"]:focus:not([readonly]),
    .md-form.md-bg input[type="tel"]:focus:not([readonly]),
    .md-form.md-bg input[type="number"]:focus:not([readonly]),
    .md-form.md-bg input[type="search-md"]:focus:not([readonly]),
    .md-form.md-bg input[type="search"]:focus:not([readonly]),
    .md-form.md-bg textarea.md-textarea:focus:not([readonly]) {
        border-bottom: none;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .md-form.md-bg input[type="text"]:focus,
    .md-form.md-bg input[type="password"]:focus,
    .md-form.md-bg input[type="email"]:focus,
    .md-form.md-bg input[type="url"]:focus,
    .md-form.md-bg input[type="time"]:focus,
    .md-form.md-bg input[type="date"]:focus,
    .md-form.md-bg input[type="datetime-local"]:focus,
    .md-form.md-bg input[type="tel"]:focus,
    .md-form.md-bg input[type="number"]:focus,
    .md-form.md-bg input[type="search-md"]:focus,
    .md-form.md-bg input[type="search"]:focus,
    .md-form.md-bg textarea.md-textarea:focus {
        /*background-color: #dcdcdc;*/
        background-color: transparent;
        background-size: 100% 2px, 100% 1px;
        outline: none
    }

.md-form.md-bg > input[type="date"]:not(.browser-default) {
    color: transparent
}

    .md-form.md-bg > input[type="date"]:not(.browser-default) + label {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

.md-form.md-bg > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
.md-form.md-bg > input[type="time"]:not(.browser-default) + label {
    font-size: .8rem;
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.md-form.md-bg .form-control {
    padding: 1.1rem .7rem .4rem !important
}


.md-form.md-bg label {
    top: 0;
    padding-left: .7rem;
    font-size: 1rem;
    -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translateY(13px);
    transform: translateY(13px);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

    .md-form.md-bg label.active {
        padding-left: .75rem;
        font-weight: bold;
        -webkit-transform: translateY(-3px) scale(0.8);
        transform: translateY(-3px) scale(0.8)
    }

.md-form.md-bg.form-lg label {
    -webkit-transform: translateY(16px);
    transform: translateY(16px)
}

    .md-form.md-bg.form-lg label.active {
        -webkit-transform: translateY(-4px) scale(0.8);
        transform: translateY(-4px) scale(0.8)
    }

.md-form.md-bg.form-sm label {
    -webkit-transform: translateY(11px);
    transform: translateY(11px)
}

    .md-form.md-bg.form-sm label.active {
        -webkit-transform: translateY(-2px) scale(0.8);
        transform: translateY(-2px) scale(0.8)
    }

.md-form .form-control.is-invalid,
.was-validated .md-form .form-control:invalid {
    padding-right: 0
}

.md-form .form-control.is-valid,
.was-validated .md-form .form-control:valid {
    padding-right: 0
}

.needs-validation .md-form label {
    left: .3rem
}

.md-form > label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.md-form .form-control {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important
}

.input-field .input-prefix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    color: rgba(0, 0, 0, 0.87);
    pointer-events: none
}

    .input-field .input-prefix.active {
        color: var(--theme-primary)
    }

.input-field.input-with-pre-icon label {
    left: 36px;
    right: initial
}

.input-field.input-with-pre-icon .input-prefix {
    left: 16px;
    right: initial
}

.input-field.input-with-pre-icon .form-control {
    padding-left: 2.7rem !important
}

.input-field.input-with-post-icon .input-prefix {
    right: 2px;
    left: initial;
    top: 2.0rem;
}

.input-field.input-with-post-icon .form-control {
    padding-right: 2.9rem !important
}

.input-field.input-with-post-icon.input-with-pre-icon .input-prefix {
    right: 16px;
    left: initial
}

    .input-field.input-with-post-icon.input-with-pre-icon .input-prefix:first-of-type {
        left: 16px;
        right: initial
    }

.input-field.input-with-post-icon.input-with-pre-icon .form-control {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important
}

.input-field a.input-prefix {
    cursor: pointer;
    pointer-events: auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .input-field a.input-prefix:hover {
        background-color: rgba(0, 0, 0, .07);
    }

    .input-field a.input-prefix i {
        font-size: 1.3rem;
    }

    .input-field a.input-prefix.disabled-icon {
        cursor: default;
    }

        .input-field a.input-prefix.disabled-icon:hover {
            background-color: transparent;
        }

        .input-field a.input-prefix.disabled-icon i {
            color: #9e9e9e
        }

.md-form.md-bg.input-field > label:not(.label-icon).active {
    -webkit-transform-origin: 0 15px;
    transform-origin: 0 15px;
}

.input-field {
    position: relative;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

    .input-field input[type="text"],
    .input-field input[type="password"],
    .input-field input[type="email"],
    .input-field input[type="url"],
    .input-field input[type="time"],
    .input-field input[type="date"],
    .input-field input[type="datetime-local"],
    .input-field input[type="tel"],
    .input-field input[type="number"],
    .input-field input[type="search-md"],
    .input-field input[type="search"],
    .input-field textarea {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .input-field > label:not(.label-icon).active-fixed {
        -webkit-transform: translateY(-14px) scale(0.8);
        transform: translateY(-14px) scale(0.8);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default), input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default), input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default), textarea.materialize-textarea {
    font-size: 1rem;
}

input:not([type]), input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default), input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default), input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    margin: 0 0 4px 0;
}
/*input:-internal-autofill-selected{

}*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    /* background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-primary)), to(var(--theme-primary))), -webkit-gradient(linear, left top, left bottom, from(#ced4da), to(#ced4da)); */
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-primary)), to(var(--theme-primary))), -webkit-gradient(linear, left top, left bottom, from(#ced4da), to(#9e9e9e)) !important;
    /* background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary)), linear-gradient(to bottom, #ced4da, #ced4da); */
    background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary)), linear-gradient(to bottom, #9e9e9e, #9e9e9e) !important;
}

.input-uppercase {
    text-transform: uppercase !important;
}

.chips .input {
    border-bottom: none !important;
    margin: 0 0 0 0 !important;
    width: 80% !important;
}
/*.chip:last-child{
    background-color:red;
    margin-right:32px;
}*/
.chip {
    margin: 3px;
}
/*button*/
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: var(--theme-primary);
    margin-right: 24px;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
    text-transform: uppercase
}

    .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover {
        color: var(--theme-primary-50)
    }

.btn, .btn-large, .btn-small, .btn-floating, .btn-large, .btn-small, .btn-flat {
    font-size: 0.9333rem;
}

    .btn.btn-very-small {
        text-transform: none;
        font-size: 0.9333rem;
        height: 28px;
        line-height: 28px;
    }

        .btn.btn-very-small .material-icons {
            font-size: 1rem;
        }

.btn, .btn-large, .btn-small {
    letter-spacing: 0;
}
.btn-circle.text-white i {
    color: white !important;
}
/*select*/
.select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 0.4857142857rem 0;
    padding: 0;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    padding: 1.1rem 1.5rem 0.4rem 0.7rem !important;
}

select {
    display: block;
}

.flatpickr-monthDropdown-months {
    display: initial;
}

.md-select select {
    display: none;
}

.input-field select {
    display: none;
}

.select-dropdown {
    overflow-y: auto !important;
    max-height: 300px;
}
/*Radio button*/
[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after {
    border: 2px solid var(--theme-primary);
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after {
    background-color: var(--theme-primary);
}
/*Checkbox*/
[type="checkbox"]:checked + span:not(.lever):before {
    border-right: 2px solid var(--theme-primary);
    border-bottom: 2px solid var(--theme-primary);
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
    top: 0;
    width: 1.333rem;
    height: 1.333rem;
    border: 2px solid var(--theme-primary);
    background-color: var(--theme-primary);
    z-index: 0;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
    height: 1.333rem;
    width: 1.333rem;
}

[type="checkbox"]:indeterminate + span:not(.lever):before {
    border-right: 2px solid var(--theme-primary);
}
/*Swich*/
.switch label input[type=checkbox]:checked + .lever {
    background-color: var(--theme-primary-300);
}

    .switch label input[type=checkbox]:checked + .lever:after {
        background-color: var(--theme-primary);
    }

/*Label*/
label {
    color: #666;
}

/*button*/
.btn, .btn-large, .btn-small {
    text-decoration: none;
    color: #fff;
    background-color: var(--theme-primary);
    margin-top: 2px;
    margin-bottom: 2px;
}

    .btn:hover, .btn-large:hover, .btn-small:hover {
        background-color: var(--theme-primary-800);
    }

    .btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
        background-color: var(--theme-primary);
    }

.btn-circle {
    width: 2.667rem;
    height: 2.667rem;
    line-height: 2.667rem;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}

    .btn-circle i {
        width: inherit;
        display: inline-block;
        text-align: center;
        font-size: 1.4rem;
        line-height: 2.667rem;
        color: var(--theme-fusion-400);
    }

    .btn-circle:hover {
        background-color: rgba(0, 0, 0, .07);
    }

    .btn-circle.disabled {
        pointer-events: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: default;
    }

        .btn-circle.disabled i {
            color: #9F9F9F !important;
        }

.btn-outline-primary {
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary);
    background-color: transparent;
    border-radius: .25rem;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .btn-outline-primary:hover {
        border: 1px solid var(--theme-primary);
        color: var(--theme-primary);
        background-color: rgba(0, 0, 0, .07);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn-outline-primary:focus {
        border: 1px solid var(--theme-primary);
        color: var(--theme-primary);
        background-color: rgba(0, 0, 0, .07);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.btn-flat-primary {
    /*color: #00c851; thao chinh*/
    color: var(--theme-primary);
    font-weight: bold;
    background-color: rgba(0, 0, 0, .04);
    border-radius: .25rem;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .btn-flat-primary:hover {
        color: var(--theme-primary);
        background-color: rgba(0, 0, 0, .07);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn-flat-primary:focus {
        color: var(--theme-primary);
        background-color: rgba(0, 0, 0, .07);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

/*loader*/
.preloader-wrapper.very-small {
    width: 20px;
    height: 20px;
    line-height: inherit;
}

.wrapper-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.progress-app {
    margin: 0;
    height: 5px;
}

.progress .indeterminate {
    background-color: var(--theme-primary);
}

.progress {
    background-color: var(--theme-primary-50);
}
/*Helper Text*/
.validation-message {
    position: relative;
    min-height: 18px;
    display: block;
    font-size: 12px;
    color: var(--theme-danger-500);
}

.text-danger {
    color: var(--theme-danger-500);
}
/*Row*/
.row {
    margin-top: 0px;
    margin-bottom: 0px;
}
.row .col {
        padding: 0 0.6rem;
 }

/*Modal*/
.modal .modal-header {
    padding-left: 10px;
}

.modal.modal-md {
    width: 45%
}

.modal.modal-sm {
    width: 35%
}

.confirm {
    max-width: 450px;
}

.modal-overflow {
    overflow: initial;
}

.modal .modal-content {
    padding: 20px 10px;
}

@media only screen and (max-width: 992px) {
    .modal.modal-md {
        width: 85%
    }

    .modal.modal-sm {
        width: 85%
    }
}
.modal-dialog-right {
    left: unset !important;
    top: 0 !important;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    border-width: 0;
    max-height: 100%;
}

    .modal-dialog-right.modal-dialog-md {
        max-width: 350px;
    }
/*Anime*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

/*login page*/
.page-login-wrapper {
    /*background-color: #faf8fb;*/
    width: 100%;
    margin: auto;
    height: 100vh;
    overflow: hidden;
    /*padding-top: 7rem;*/
}

.page-login-title {
    color: inherit;
    font-size: 1.5rem;
}
/*Tabs*/
.tabs {
    box-shadow: 0 0 13px 0 rgba(62, 44, 90, .08);
    height: 2.5rem;
}

    .tabs .tab {
        cursor: pointer;
        line-height: 2.5rem;
        height: 2.5rem;
    }

        .tabs .tab a:hover, .tabs .tab a.active {
            color: var(--theme-primary);
        }

        .tabs .tab a {
            color: var(--theme-primary-100);
            font-size: 1rem;
        }

    .tabs .indicator {
        background-color: var(--theme-primary);
    }

.mat-tab-group-content .card {
    margin-top: 2px;
}

.tab-group {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
/* glyphicon */
.glyphicon {
    color: var(--theme-fusion-400);
    width: inherit;
    text-align: center;
    line-height: 40px;
}
/*font-awesome*/
.btn-circle i.fa {
    font-size: 1.2rem;
}

.icon-in-menu {
    height: 24px;
    width: 24px;
}
/*lookup*/
.BLookup {
    height: auto !important;
    max-height: 90% !important;
    top: 5% !important;
    /*  max-width: 600px;*/
}

    .BLookup .modal-content {
        padding: 20px 10px;
    }

    .BLookup .table td, .table th {
        padding: 10px 8px;
    }

    .BLookup .card {
        margin: 0;
    }

    .BLookup .card-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

.card .card-content {
    padding: 7px 7px;
}

.card .card-action {
    padding: 12px 24px;
}

.card .card-header {
    padding: 4px 24px;
}

/*Poiter*/
.poiter {
    cursor: pointer;
}

/*Center elements*/
.center-container {
    position: relative;
}

    .center-container .input-field {
        margin: 0;
    }

    .center-container .center-left {
        left: 0;
        top: 50%;
        position: absolute;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
    }

    .center-container .center-right {
        right: 0;
        top: 50%;
        position: absolute;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
    }

/*Select file*/
.select-file .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
}

.select-file button {
    min-width: max-content;
}

.select-file span {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/*header company datacode*/
.header-company {
    background-color: #dfe2e6;
    margin-left: 25px;
    border-radius: 0.5rem;
    border-style: dashed;
    border-width: 0.1em;
    border-color: #bebcbc;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

@media only screen and (max-width: 570px) {
    .header-company {
        margin-left: 15px;
    }
}

.header-company a {
    cursor: pointer;
}

.header-company span {
    font-size: 1rem;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
}

.header-company .icon-database {
    font-size: 1.228rem;
    color: var(--theme-primary);
}


.header-company .datacode {
    margin-left: 5px;
}
/*BTreeCheckbox*/
ul.BTreeCheckbox li:not(.has-children) {
    padding-left: 3rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

ul.BTreeCheckbox ul li:not(.has-children) {
    padding-left: 4.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

ul.BTreeCheckbox ul li.has-children {
    padding-left: 1.5rem;
}
/* BFolderMenu */
.BFolderMenu {
    width: 100%;
    height: calc(100vh - 9rem);
}

.text-orange {
    color: orange;
}

ul.BFolderMenuList {
    padding: 0;
    list-style: none;
    margin: 0;
}

.BFolderMenuList li a {
    display: flex;
    align-items: center;
    outline: 0;
    padding: .3125rem .3rem .3125rem 0.3rem;
    color: var(--theme-fusion-500);
    font-size: .95rem;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    margin-right: 2rem;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

    .BFolderMenuList li a.folder_menu_selected {
        color: var(--theme-fusion-500);
        font-weight: bold;
        background-color: rgba(0, 0, 0, .05);
        border-radius: 2px;
    }

    .BFolderMenuList li a:hover {
        text-decoration: none;
        background-color: rgba(0, 0, 0, .1)
    }

    .BFolderMenuList li a > .ni, .BFolderMenuList li a > [class*=material-icons] {
        margin-right: .25rem;
        width: 1.55rem;
        text-align: left;
    }

        .BFolderMenuList li a > .ni, .BFolderMenuList li a > [class*=material-icons] i {
            font-size: 1.525rem;
        }

    .BFolderMenuList li a > .nav-link-text {
        flex: 1;
        display: inline-flex;
        align-items: center;
        line-height: normal;
    }

/*Home Page*/
.home-image {
    max-width: 100vw;
    max-height: calc(100vh - 6.525rem);
    display: block;
    margin: auto;
}

@media only screen and (max-width: 992px) {
    .home-image {
        max-width: calc(100vw - 17.875rem);
        padding-left: 17.875rem;
    }
}

.BProgressBar {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}
    /*Progress Bar*/
    .BProgressBar > div {
        position: relative;
        pointer-events: auto;
        overflow: hidden;
        padding: 15px;
        width: 500px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background-position: 15px center;
        background-repeat: no-repeat;
        -moz-box-shadow: 0 0 12px #999;
        -webkit-box-shadow: 0 0 12px #999;
        box-shadow: 0 0 12px #999;
        color: #FFF;
        opacity: .8;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        filter: alpha(opacity=80);
    }

    .BProgressBar .progress {
        margin: .5rem 0 0rem 0;
    }
/*service box*/
.service-box {
    padding: 15px;
    display: flex;
    cursor: pointer;
    margin-top: 10px;
    background-color: #e4e5e5;
    box-shadow: 4px 4px #bcb5b54f;
}

    .service-box:hover {
        /*border: solid 1px var(--theme-primary);*/
        color: var(--theme-primary);
        background-color: var(--theme-primary-30);
    }

    .service-box.selected {
        /*border: solid 1px var(--theme-primary);*/
        background-color: var(--theme-primary-50);
    }

    .service-box .text {
        flex: 1;
        padding-left: 10px;
    }

    .service-box .header {
        font-size: 1.1rem;
        font-weight: 700;
    }
    .service-box .header {

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
    }
    .service-box .decription {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
        font-size: 0.7rem;
    }

.page-input-number {
    width: 2.8rem;
}

    .page-input-number .input-field.md-form input {
        height: 2.5rem !important;
        padding-top: 0.71428rem !important;
        padding-right: 0.142857rem !important;
    }

.memu-company .nav-link-text {
    color: var(--theme-primary);
    font-weight: 700;
}

button, input, optgroup, select, textarea {
    font-family: unset !important;
}
.icon-images {
    height: 100%
}

    .icon-images img {
        /*opacity:0.7;*/
        width: 1.5rem;
        height: 1.5rem;
    }

/*theme colors*/
.theme-colors {
    display: block;
}

    .theme-colors > ul {
        height: auto;
        margin: 0 !important;
    }

        .theme-colors > ul > li {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

            .theme-colors > ul > li a {
                width: 36px;
                height: 36px;
                margin-right: 4px;
                margin-bottom: 4px;
                border-radius: 25px;
                cursor: pointer;
                position: relative;
                display: block;
            }

    .theme-colors .theme_color_01 {
        background: #4679cc;
    }

    .theme-colors .theme_color_02 {
        background: #b56a9f;
    }

    .theme-colors .theme_color_03 {
        background: #9fcb3d;
    }

    .theme-colors .theme_color_04 {
        background: #886ab5;
    }

    .theme-colors .theme_color_05 {
        background: #2198f3;
    }

    .theme-colors .theme_color_06 {
        background: #6ab5b4;
    }

    .theme-colors .theme_color_07 {
        background: #dd5293;
    }

    .theme-colors .theme_color_08 {
        background: #868e96;
    }

    .theme-colors .theme_color_09 {
        background: #7c91df;
    }

    .theme-colors .theme_color_10 {
        background: #e59c6c;
    }
    .theme-colors .theme_color_11 {
        background: #55ce5f;
    }


/*disable-click ModuleName Coming Soon*/
.disable-click {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hieu ung nhap nhay */
.blinking {
    animation: blinkEffect 0.8s ease-in-out 3;
}

@keyframes blinkEffect {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}