/*------------------------------------------------------------------
[Table of contents]

1. Body
  	1. Prepage loader
2. Header / #header
3. Content / #content
	1. Left Sidebar
	2. Right Sidebar
	3. Dashboard page
	4. Form element page
	5. OwlCarousel2 page
	6. Button page
	7. material ui element
	8. Data Table page
	9. Color Page
	10. Helper Page
	11. Widgets Page
	12. Error Page
	13. Search Page
	14. Docs Page
4. Helper Class
5. Footer
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
# [Color codes]

# alabaster (Background): rgb(252, 252, 252)
# light black (Content) : #1e1e1e
# light grey (Footer Background): #EFEFEF
# white (sidebar and header background): #fff
# black (icon color): #000
---------------------------------------------------------------------- */


/* =================================================================================
Body
================================================================================= */


/*---------------------------------
Body General class
-----------------------------------*/


/*body style*/

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    background: rgb(252, 252, 252);
}


/*page body binding tag*/

main {
    flex: 1 0 auto;
    padding-top: 56px
}


/*custom container class*/

.fluid-container {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%;
}

@media only screen and (min-width: 601px) {
    .fluid-container {
        width: 95%;
    }
}

@media only screen and (min-width: 993px) {
    .fluid-container {
        width: 85%;
    }
}


/*---------------------------------
   Prepage Loader
-----------------------------------*/

#pre-page-loader {
    background-color: rgb(237, 238, 240);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
}

#pre-page-loader-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#pre-page-loader-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 150px;
    width: 150px;
    margin-top: -75px;
    margin-left: -75px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#pre-page-loader-center-absolute .object {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 65px;
    top: 65px;
}

.object:nth-child(2n+0) {
    margin-right: 0px;
}

#object_one {
    -webkit-animation: object_one 2s infinite;
    animation: object_one 2s infinite;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

#object_two {
    -webkit-animation: object_two 2s infinite;
    animation: object_two 2s infinite;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

#object_three {
    -webkit-animation: object_three 2s infinite;
    animation: object_three 2s infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#object_four {
    -webkit-animation: object_four 2s infinite;
    animation: object_four 2s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#object_five {
    -webkit-animation: object_five 2s infinite;
    animation: object_five 2s infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

#object_six {
    -webkit-animation: object_six 2s infinite;
    animation: object_six 2s infinite;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

#object_seven {
    -webkit-animation: object_seven 2s infinite;
    animation: object_seven 2s infinite;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#object_eight {
    -webkit-animation: object_eight 2s infinite;
    animation: object_eight 2s infinite;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

#object_big {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50px;
    top: 50px;
    -webkit-animation: object_big 2s infinite;
    animation: object_big 2s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-webkit-keyframes object_big {
    50% {
        -webkit-transform: scale(0.5);
    }
}

@keyframes object_big {
    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}

@-webkit-keyframes object_one {
    50% {
        -webkit-transform: translate(-65px, -65px);
    }
}

@keyframes object_one {
    50% {
        transform: translate(-65px, -65px);
        -webkit-transform: translate(-65px, -65px);
    }
}

@-webkit-keyframes object_two {
    50% {
        -webkit-transform: translate(0, -65px);
    }
}

@keyframes object_two {
    50% {
        transform: translate(0, -65px);
        -webkit-transform: translate(0, -65px);
    }
}

@-webkit-keyframes object_three {
    50% {
        -webkit-transform: translate(65px, -65px);
    }
}

@keyframes object_three {
    50% {
        transform: translate(65px, -65px);
        -webkit-transform: translate(65px, -65px);
    }
}

@-webkit-keyframes object_four {
    50% {
        -webkit-transform: translate(65px, 0);
    }
}

@keyframes object_four {
    50% {
        transform: translate(65px, 0);
        -webkit-transform: translate(65px, 0);
    }
}

@-webkit-keyframes object_five {
    50% {
        -webkit-transform: translate(65px, 65px);
    }
}

@keyframes object_five {
    50% {
        transform: translate(65px, 65px);
        -webkit-transform: translate(65px, 65px);
    }
}

@-webkit-keyframes object_six {
    50% {
        -webkit-transform: translate(0, 65px);
    }
}

@keyframes object_six {
    50% {
        transform: translate(0, 65px);
        -webkit-transform: translate(0, 65px);
    }
}

@-webkit-keyframes object_seven {
    50% {
        -webkit-transform: translate(-65px, 65px);
    }
}

@keyframes object_seven {
    50% {
        transform: translate(-65px, 65px);
        -webkit-transform: translate(-65px, 65px);
    }
}

@-webkit-keyframes object_eight {
    50% {
        -webkit-transform: translate(-65px, 0);
    }
}

@keyframes object_eight {
    50% {
        transform: translate(-65px, 0);
        -webkit-transform: translate(-65px, 0);
    }
}


/* =================================================================================
Header
================================================================================= */

#me-navbar {
    height: 56px;
    line-height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 995;
}

#me-navbar ul li a {
    display: table
}

#me-navbar ul li a,
#me-navbar ul li a i {
    height: 56px;
    line-height: 56px;
}

#me-navbar * {
    color: #000
}

#me-navbar .col {
    padding-left: 0px !important;
    padding-right: 0px !important
}


/*header search box*/

#me-navbar .desktop-search-box,
#me-navbar .mobile-search-box {
    box-shadow: none !important;
    background: #eae7e7 !important;
    border: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#me-navbar .desktop-search-box #desktop-search[type=search]:focus,
#me-navbar .mobile-search-box #mobile-search[type=search]:focus {
    border-bottom: 0px !important;
    box-shadow: none;
}

#me-navbar .mobile-search-box,
#me-navbar .mobile-search-box .mobile-search-div #mobile-search {
    line-height: 56px;
    height: 56px;
}

#me-navbar .desktop-search-box {
    line-height: 40px;
    height: 40px;
    margin: 8px 0;
}

#me-navbar .desktop-search-box .desktop-search-div #desktop-search {
    line-height: 40px;
    height: 40px;
    margin: 8px 0;
}

#me-navbar .desktop-search-box .desktop-search-div #desktop-search~label i {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #333;
}

#me-navbar .mobile-search-box .mobile-search-div #mobile-search~label i {
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #333;
}

#me-navbar #me-mobile-search {
    display: none;
    padding: 0px !important;
    background: #eae7e7;
}

#me-navbar .mobile-cancel-box-icon {
    cursor: pointer
}

#me-navbar .mobile-cancel-box-icon#me-hide-mobile-search:hover {
    color: #000;
}

#me-navbar .desktop-search-box .desktop-search-div input[type=search]:focus {
    background: #bdbcbc;
    color: #000;
}

#me-navbar .mobile-search-box .mobile-search-div input[type=search]:focus {
    background: #fff;
    color: #000;
}

#me-navbar .desktop-search-box .desktop-search-div input[type=search]::-webkit-input-placeholder,
#me-navbar .mobile-search-box .mobile-search-div input[type=search]::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #757474;
    font-size: 16px;
}

#me-navbar .desktop-search-box .desktop-search-div input[type=search]::-moz-placeholder,
#me-navbar .mobile-search-box .mobile-search-div input[type=search]::-moz-placeholder {
    /* Firefox 19+ */
    color: #757474;
    font-size: 16px;
}

#me-navbar .desktop-search-box .desktop-search-div input[type=search]:-ms-input-placeholder,
#me-navbar .mobile-search-box .mobile-search-div input[type=search]:-ms-input-placeholder {
    /* IE 10+ */
    color: #757474;
    font-size: 16px;
}

#me-navbar .desktop-search-box .desktop-search-div input[type=search]:-moz-placeholder,
#me-navbar .mobile-search-box .mobile-search-div input[type=search]:-moz-placeholder {
    /* Firefox 18- */
    color: #757474;
    font-size: 16px;
}

@media(min-width:993px) {
    #me-navbar #logo-container {
        width: 230px;
        text-align: center;
        font-size: 27px;
        height: inherit;
    }
    .m-l-sidbar {
        margin-left: 230px
    }
    main,
    footer#me-footer {
        padding-left: 230px
    }
}

@media(max-width:992px) {
    #me-navbar #logo-container {
        width: auto;
        font-size: 23px;
    }
    .hide-default-navbar {
        display: none !important
    }
    .show-default-navbar {
        display: block !important
    }
    nav ul a {
        padding: 0 10px
    }
    #me-hide-mobile-search {
        cursor: pointer;
        padding-right: 20px;
    }
}


/*user account dropdown*/

#user-account-dropdown li a {
    padding: 15px 25px;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    display: inline-block !important;
    height: auto !important;
    line-height: 1 !important;
}

#user-account-dropdown li a:hover {
    background: transparent
}

#user-account-dropdown li a .material-icons {
    vertical-align: middle;
    padding-right: 10px;
    font-size: 20px;
    line-height: 1 !important;
    height: auto !important;
    display: inline-block;
}


/*notification dropdown*/

#notifications-dropdown li a {
    line-height: 1 !important;
    height: auto !important;
    display: flex;
    padding: 12px 25px;
    cursor: pointer;
}

#notifications-dropdown li a:hover {
    background: transparent;
}

#notifications-dropdown li a .material-icons {
    float: left;
    padding-right: 10px;
    font-size: 22px;
    height: 37px;
    line-height: 37px;
}

#notifications-dropdown li a .noti-message {
    float: right;
    margin: 3px 0 0 0;
}

#notifications-dropdown li a .noti-message>span {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

#notification-cout {
    position: absolute;
    display: inline-block;
    vertical-align: top;
    z-index: 1;
    padding-top: 2px;
    background-color: #ef543b;
    box-shadow: 0 2px 4px 0 rgba(118, 58, 58, 0.77);
    font-weight: 500;
    text-align: center;
    color: #fff;
    border-radius: 16px;
    margin-left: 19px;
    top: 10px;
}

@media(max-width:990px) {
    #notification-cout {
        line-height: 9px;
        width: 13px;
        height: 13px;
        font-size: 9px;
    }
}


/* =================================================================================
Content
================================================================================= */


/*---------------------------------
    Left Sidebar
-----------------------------------*/

#left-sidebar-nav .side-nav {
    width: 230px;
    box-shadow: none;
    padding-bottom: 15px;
    overflow: hidden;
}

@media(min-width:993px) {
    #left-sidebar-nav .side-nav {
        top: 56px;
        height: calc(100% - 56px);
        box-shadow: 0 -5px 5px -5px #364977;
    }
    #notification-cout {
        line-height: 12px;
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
}

@media(max-width:990px) {
    #left-sidebar-nav .side-nav {
        top: 0;
        height: 100%;
        z-index: 998 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    }
}

@media(min-width:991px) {
    #left-sidebar-nav .side-nav {
        z-index: 1;
    }
}

#left-sidebar-nav .left-icon {
    margin-right: 10px;
}

#left-sidebar-nav .right-icon {
    margin-right: 0px;
}

#left-sidebar-nav .collapsible-header.active .right-icon {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

#left-sidebar-nav .leftside-navigation {
    width: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 25px);
    background-color: white;
    margin: 0px;
    padding-bottom: 20px;
}

#left-sidebar-nav .leftside-navigation li a {
    padding: 0 5px 0 12px;
    font-size: 17px;
    color: rgba(49, 48, 48, 0.87);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#left-sidebar-nav .leftside-navigation .navigation {
    margin-left: 10px;
}

#left-sidebar-nav .leftside-navigation li .collapsible-body ul li a {
    padding-left: 40px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#left-sidebar-nav .leftside-navigation ul li .material-icons,
#left-sidebar-nav .material-icons.left-icon {
    color: #000
}

#left-sidebar-nav .leftside-navigation~.sidebar-footer {
    bottom: 0;
    position: fixed;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    width: 230px;
}

#left-sidebar-nav .leftside-navigation~.sidebar-footer ul {
    margin: 0;
    padding: 0px;
    text-align: center;
    overflow: hidden;
    display: block;
    width: 100%;
}

#left-sidebar-nav .leftside-navigation~.sidebar-footer ul li i {
    margin-right: 0px;
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    color: #000
}

#left-sidebar-nav .leftside-navigation~.sidebar-footer ul li a {
    padding: 0px
}

#left-sidebar-nav .leftside-navigation~.sidebar-footer ul li {
    line-height: 30px;
    cursor: pointer;
    display: table-cell;
    width: 1%;
}

.side-nav .collapsible-body>ul:not(.collapsible)>li.active,
.side-nav.fixed .collapsible-body>ul:not(.collapsible)>li.active {
    background-color: #f3f3f3
}

#left-sidebar .active,
#left-sidebar .menu-active {
    background: #eae7e7 !important;
}


/*---------------------------------
    Right Sidebar
-----------------------------------*/

#right-sidebar-nav {
    background-color: #fff;
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    display: none;
    z-index: 998 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.right-sidebar-content {
    height: 100%;
    position: fixed;
    width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.toggle-fixed {
    position: fixed;
    top: 40%;
    width: 54px;
    height: 50px;
    text-align: center;
    line-height: 46px;
    cursor: pointer;
    right: 0;
    z-index: 998 !important;
    background: #fff;
}

.toggle-right-sidebar .toggle-icon {
    vertical-align: middle;
    font-size: 35px;
}

.toggle-right-sidebar .toggle-icon:hover {
    opacity: 0.7;
}

.right-sidebar-content .content-list {
    padding: 0px 20px;
}

.right-sidebar-content .content-list li {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 10px;
}

.right-sidebar-content .content-list li:last-child {
    border-bottom: 0px;
}

.right-sidebar-content .content-list .list-title {
    font-size: 11px;
    padding: 1px 6px;
    font-weight: 600;
    border-radius: 4px;
}

.right-sidebar-content .content-list .list-date {
    float: right;
    font-size: 11px;
    color: #76757B;
    margin-top: 10px;
}

.right-sidebar-content .content-list .list-content-title {
    margin: 5px 0 0 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #37363e;
}

.right-sidebar-content .content-list .list-content {
    color: #76757B;
    margin-top: 8px;
    font-size: 13px;
}


/*---------------------------------
    Dashboard page
-----------------------------------*/

.dash-nav-box {
    padding: 10px 15px 20px 15px
}

.dash-nav-title {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
}

.dash-nav-body {
    font-size: 21px;
    margin-bottom: 3px !important;
}

.dash-nav-body .material-icons {
    vertical-align: middle;
    font-size: 24px;
    padding-right: 3px;
}

.dash-nav-body span {
    vertical-align: middle;
    font-weight: bold;
}

.dash-nav-footer {
    font-size: 13px;
}


/*---------------------------------
    Form element page
-----------------------------------*/


/*Form checkbox element*/

[type="checkbox"].red:checked+label:before {
    border-right: 2px solid rgb(244, 67, 54);
    border-bottom: 2px solid rgb(244, 67, 54);
}

[type="checkbox"].yellow:checked+label:before {
    border-right: 2px solid #ffeb3b;
    border-bottom: 2px solid #ffeb3b;
}

[type="checkbox"].green:checked+label:before {
    border-right: 2px solid rgb(76, 175, 80);
    border-bottom: 2px solid rgb(76, 175, 80);
}

[type="checkbox"].pink:checked+label:before {
    border-right: 2px solid rgb(233, 30, 99);
    border-bottom: 2px solid rgb(233, 30, 99);
}

[type="checkbox"].purple:checked+label:before {
    border-right: 2px solid rgb(156, 39, 176);
    border-bottom: 2px solid rgb(156, 39, 176);
}

[type="checkbox"].deep-purple:checked+label:before {
    border-right: 2px solid rgb(103, 58, 183);
    border-bottom: 2px solid rgb(103, 58, 183);
}

[type="checkbox"].indigo:checked+label:before {
    border-right: 2px solid rgb(63, 81, 181);
    border-bottom: 2px solid rgb(63, 81, 181);
}

[type="checkbox"].teal:checked+label:before {
    border-right: 2px solid rgb(0, 150, 136);
    border-bottom: 2px solid rgb(0, 150, 136);
}

[type="checkbox"].filled-in:checked+label:before {
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
}


/*Form switch element*/

.switch label input[type=checkbox].red:checked+.lever,
.switch label input[type=checkbox].red:checked+.lever:after {
    background-color: rgb(244, 67, 54);
}

.switch label input[type=checkbox].yellow:checked+.lever,
.switch label input[type=checkbox].yellow:checked+.lever:after {
    background-color: #ffeb3b;
}

.switch label input[type=checkbox].green:checked+.lever,
.switch label input[type=checkbox].green:checked+.lever:after {
    background-color: rgb(76, 175, 80);
}

.switch label input[type=checkbox].pink:checked+.lever,
.switch label input[type=checkbox].pink:checked+.lever:after {
    background-color: rgb(233, 30, 99);
}

.switch label input[type=checkbox].purple:checked+.lever,
.switch label input[type=checkbox].purple:checked+.lever:after {
    background-color: rgb(156, 39, 176);
}

.switch label input[type=checkbox].deep-purple:checked+.lever,
.switch label input[type=checkbox].deep-purple:checked+.lever:after {
    background-color: rgb(103, 58, 183);
}

.switch label input[type=checkbox].indigo:checked+.lever,
.switch label input[type=checkbox].indigo:checked+.lever:after {
    background-color: rgb(63, 81, 181);
}

.switch label input[type=checkbox].teal:checked+.lever,
.switch label input[type=checkbox].teal:checked+.lever:after {
    background-color: rgb(0, 150, 136);
}


/*Form Input element*/

.pink[type="radio"]:checked+label:after,
[type="radio"].with-gap.pink:checked+label:after,
[type="checkbox"].filled-in.pink:checked+label:after {
    border: 2px solid rgb(233, 30, 99) !important;
    background-color: rgb(233, 30, 99) !important;
}

[type="radio"].with-gap.pink:checked+label:before {
    border: 2px solid rgb(233, 30, 99);
}

.purple[type="radio"]:checked+label:after,
[type="radio"].with-gap.purple:checked+label:after,
[type="checkbox"].filled-in.purple:checked+label:after {
    border: 2px solid rgb(156, 39, 176) !important;
    background-color: rgb(156, 39, 176) !important;
}

[type="radio"].with-gap.purple:checked+label:before {
    border: 2px solid rgb(156, 39, 176);
}

.deep-purple[type="radio"]:checked+label:after,
[type="radio"].with-gap.deep-purple:checked+label:after,
[type="checkbox"].filled-in.deep-purple:checked+label:after {
    border: 2px solid rgb(103, 58, 183) !important;
    background-color: rgb(103, 58, 183) !important;
}

[type="radio"].with-gap.deep-purple:checked+label:before {
    border: 2px solid rgb(103, 58, 183);
}

.indigo[type="radio"]:checked+label:after,
[type="radio"].with-gap.indigo:checked+label:after,
[type="checkbox"].filled-in.indigo:checked+label:after {
    border: 2px solid rgb(63, 81, 181) !important;
    background-color: rgb(63, 81, 181) !important;
}

[type="radio"].with-gap.indigo:checked+label:before {
    border: 2px solid rgb(63, 81, 181);
}

.teal[type="radio"]:checked+label:after,
[type="radio"].with-gap.teal:checked+label:after,
[type="checkbox"].filled-in.teal:checked+label:after {
    border: 2px solid rgb(0, 150, 136) !important;
    background-color: rgb(0, 150, 136) !important;
}

[type="radio"].with-gap.teal:checked+label:before {
    border: 2px solid rgb(0, 150, 136);
}

.green[type="radio"]:checked+label:after,
[type="radio"].with-gap.green:checked+label:after,
[type="checkbox"].filled-in.green:checked+label:after {
    border: 2px solid rgb(76, 175, 80) !important;
    background-color: rgb(76, 175, 80) !important;
}

[type="radio"].with-gap.green:checked+label:before {
    border: 2px solid rgb(76, 175, 80);
}

.red[type="radio"]:checked+label:after,
[type="radio"].with-gap.red:checked+label:after,
[type="checkbox"].filled-in.red:checked+label:after {
    border: 2px solid rgb(244, 67, 54) !important;
    background-color: rgb(244, 67, 54) !important;
}

[type="radio"].with-gap.red:checked+label:before {
    border: 2px solid rgb(244, 67, 54);
}

.yellow[type="radio"]:checked+label:after,
[type="radio"].with-gap.yellow:checked+label:after,
[type="checkbox"].filled-in.yellow:checked+label:after {
    border: 2px solid #ffeb3b !important;
    background-color: #ffeb3b !important;
}

[type="radio"].with-gap.yellow:checked+label:before {
    border: 2px solid #ffeb3b;
}

.form-box .card-title {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 110%;
    margin: 1.14rem 0 0.912rem 0;
}

input.box-style:not([type]),
input[type=text].box-style,
input[type=password].box-style,
input[type=email].box-style,
input[type=url].box-style,
input[type=time].box-style,
input[type=date].box-style,
input[type=datetime].box-style,
input[type=datetime-local].box-style,
input[type=tel].box-style,
input[type=number].box-style,
input[type=search].box-style,
textarea.materialize-textarea.box-style {
    border: 1px solid #9e9e9e;
    padding-left: 5px;
    padding-right: 5px;
    height: 38px;
}

label.active.box-style {
    padding: 0 0 6px 0;
    font-size: 1rem;
}

label.box-style {
    padding-left: 5px;
    padding-right: 5px;
    line-height: 19px;
}

.error {
    margin-top: -13px;
    color: rgb(244, 67, 54);
}


/*---------------------------------
    OwlCarousel2 page
-----------------------------------*/

#owl-demo-box .owl-carousel .item {
    height: 10rem;
    padding: 1rem;
}


/*---------------------------------
    Button page
-----------------------------------*/

.btn:hover,
.btn-large:hover,
.btn-small:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
}


/*---------------------------------
    material ui element
-----------------------------------*/


/*Blockquote*/

blockquote {
    background: #f5f2f0;
    padding: 20px;
}


/*Sparkline*/

.jqstooltip {
    box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    min-width: 29px !important;
    max-width: 70px !important;
    border: none !important;
}

form.me-form {
    padding: 30px 20px !important;
}


/*---------------------------------
    Data Table page
-----------------------------------*/

.dataTables_wrapper .select-wrapper {
    width: 60px;
    display: inline-block;
    margin: 0 10px;
}

.dataTables_wrapper .select-wrapper span.caret {
    margin-bottom: 36px;
}

.dataTables_wrapper .select-wrapper .select-dropdown li span {
    padding: 0px 10px;
}

.dataTables_wrapper .select-wrapper .select-dropdown li {
    min-height: 30px !important;
    padding-top: 4px !important;
}

.dataTables_wrapper .dataTables_length {
    margin-top: 14px !important;
}

.dataTables_filter input[type=search] {
    margin-top: -12px !important;
}

table.bordered>tbody>tr {
    border-bottom: 1px solid #d0d0d0 !important;
}

table.bordered.dataTable td {
    border-bottom: 1px solid #d0d0d0;
    padding: 15px 5px;
}

table.dataTable td.sorting_1 {
    background: #ececec;
}

.dataTables_info,
.dataTables_paginate.paging_simple_numbers {
    margin-top: 15px;
    margin-bottom: 15px;
}

.dataTables_wrapper {
    overflow-x: auto !important;
}

.dataTables_filter {
    margin-right: 9px !important;
}

.dataTables_length label,
.dataTables_filter label {
    font-size: 15px;
    color: #514d4d;
}

.dataTables_wrapper tr.group,
.dataTables_wrapper tr.group:hover {
    background-color: #ddd !important;
}

.dataTables_wrapper th:focus {
    outline: none
}


/*---------------------------------
    Color Page
-----------------------------------*/

.row.dynamic-color .col {
    margin-bottom: 55px;
    float: left;
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
}

.dynamic-color .red,
.dynamic-color .pink,
.dynamic-color .purple,
.dynamic-color .deep-purple,
.dynamic-color .indigo,
.dynamic-color .blue,
.dynamic-color .light-blue,
.dynamic-color .cyan,
.dynamic-color .teal,
.dynamic-color .green,
.dynamic-color .light-green,
.dynamic-color .lime,
.dynamic-color .yellow,
.dynamic-color .amber,
.dynamic-color .orange,
.dynamic-color .deep-orange,
.dynamic-color .brown,
.dynamic-color .grey,
.dynamic-color .blue-grey,
.dynamic-color .black,
.dynamic-color .white,
.dynamic-color .transparent {
    height: 55px;
    width: 100%;
    padding: 0 15px;
    line-height: 55px;
    font-weight: 500;
    font-size: 12px;
    display: block;
    box-sizing: border-box;
}


/*---------------------------------
    Helper Page
-----------------------------------*/

.valign-demo {
    height: 400px;
    background-color: #ddd;
}

.talign-demo {
    height: 100px;
    background-color: #ddd;
}


/*---------------------------------
    Widgets Page
-----------------------------------*/


/*feedback form*/

@media(min-width:991px) {
    .modal.small {
        width: 40%
    }
}

@media (min-width:601px) and (max-width:990px) {
    .modal.small {
        width: 70%
    }
}

@media (max-width:600px) {
    .modal.small {
        width: 90%
    }
}

.info-form-title h4 {
    color: #1e2b32;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    background: url(../img/border.png) 50% 100% no-repeat;
    padding-bottom: 17px;
}

.info-form-title .me-close {
    margin-top: -65px;
    margin-right: -8px;
}

.contact-us-button {
    margin-bottom: 30px;
}


/*Update plan modal*/

.modal.update-plan-model {
    background: transparent
}

@media (max-width: 700px) {
    .modal.update-plan-model {
        width: 98%;
    }
}

.update-plan-body {
    background: #fff
}

.update-plan-title {
    padding: 16px 0px;
}

.update-plan-title .me-close {
    margin-top: -22px;
    margin-right: 10px;
}

.update-plan-title h4 {
    font-size: 18px;
    margin: 0px;
}

.modal.update-plan-model .modal-content {
    padding: 0px;
}

.update-plan-body .tabs .tab a.active {
    background-color: #fff;
    color: #000;
}

.update-plan-body .tabs .tab a:hover {
    background-color: #f4f4f4;
}

.update-plan-body .tabs .indicator {
    display: none !important;
}

.update-plan-list {
    padding-left: 25px !important;
    border-right: 1px solid #eee;
    margin-top: 20px;
}

.update-plan-list ul li {
    margin-bottom: 7px;
}

.update-plan-list ul li:before {
    content: "✔";
    margin-right: 10px;
}

.update-plan-list-title {
    font-size: 16px;
    font-weight: 600
}

.update-plan-price {
    padding-top: 20px;
}

.update-plan-price .update-plan-value {
    font-size: 30px;
    margin: 0px;
    line-height: 50px;
}

.update-plan-price .update-plan-format {
    font-size: 14px;
    color: #b1b1b1;
    display: block;
    font-weight: 400;
    margin-bottom: 20px;
}

.update-plan-contact-form {
    display: block;
    margin: 10px 0;
}


/*---------------------------------
    Error Page
-----------------------------------*/

#error-banner {
    width: 60%;
    margin: auto;
}

#error-banner .error-code {
    width: 100%;
    font-size: 10rem;
    text-align: center;
    padding: 20px 0 !important;
    text-shadow: #eeeeee 1px 1px, #eeeeee 2px 2px, #eeeeee 3px 3px, #eeeeee 4px 4px, #eeeeee 5px 5px, #eeeeee 6px 6px, #eeeeee 7px 7px, #eeeeee 8px 8px, #eeeeee 9px 9px, #eeeeee 10px 10px, #eeeeee 11px 11px, #eeeeee 12px 12px, #eeeeee 13px 13px, #eeeeee 14px 14px, #eeeeee 15px 15px, #eeeeee 16px 16px, #eeeeee 17px 17px, #eeeeee 18px 18px, #eeeeee 19px 19px, #eeeeee 20px 20px, #eeeeee 21px 21px, #ececec 22px 22px, #ececec 23px 23px, #ececec 24px 24px, #ececec 25px 25px, #ececec 26px 26px, #ececec 27px 27px, #ececec 28px 28px, #ececec 29px 29px, #ececec 30px 30px, #e9e9e9 31px 31px, #e9e9e9 32px 32px, #e9e9e9 33px 33px, #e9e9e9 34px 34px, #e9e9e9 35px 35px, #e9e9e9 36px 36px, #e9e9e9 37px 37px;
    display: block;
}

#error-banner .common-IntroText {
    font-size: 24px;
    line-height: 36px;
    color: #525f7f;
    margin-top: 0px;
}


/*---------------------------------
    Search Page
-----------------------------------*/

#search-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: transparent;
    opacity: 0.5;
    display: none;
}

#search-result {
    position: absolute;
    z-index: 1999;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
    max-height: 250px;
    overflow-y: auto;
    display: none;
    border-top: 1px solid #eee;
    background: #fff;
}

#search-result ul li {
    display: block;
    width: 100%;
}

#search-result ul li a {
    width: 100%;
    font-weight: normal;
    color: #525050;
    padding: 0px 20px;
    border-bottom: 1px solid #eee;
    height: 40px;
    line-height: 40px;
}

#search-result ul li a:hover {
    background: #eae7e7;
}


/*---------------------------------
    Docs Page
-----------------------------------*/

.root-ul {
    line-height: 2em;
    display: inline-block;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-radius: 5px;
    color: #999;
}


/* =================================================================================
Helper Class
================================================================================= */

.icon-block {
    padding: 0 15px;
}

.icon-block .material-icons {
    font-size: inherit;
}

.p-t-10 {
    padding-top: 10px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-no {
    padding-bottom: 0px !important;
}

.m-t-no {
    margin-top: 0px !important;
}

.m-b-no {
    margin-bottom: 0px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.p-t-20 {
    padding-top: 20px !important;
}

.p-t-30 {
    padding-top: 30px !important;
}

.p-t-40 {
    padding-top: 40px !important;
}

.no-margin {
    margin: 0px !important;
}

.bg-whitesmoke {
    background: whitesmoke !important
}

.m-b-t-no {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.waves-effect.waves-brown .waves-ripple {
    background-color: rgba(121, 85, 72, 0.65);
}

.dark4 {
    font-weight: 400 !important;
}

@media only screen and (max-width: 992px) {
    .tabs .tab {
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }
}

.me-page-title {
    background: #f3f3f3;
}

.me-page-title h1 {
    font-size: 2rem;
    line-height: 1.804rem;
    margin: 18px 0 0;
    margin: 0px
}

.me-page-title p {
    font-size: 1.25rem;
    font-weight: 300;
    margin-top: 10px;
}

h2.header {
    margin: 0.85rem 0 0.912rem 0;
    font-size: 1.6rem;
    font-weight: 400;
}

h3.header {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.704rem;
}

.dropdown-content li>a,
.dropdown-content li>span {
    color: #514d4d;
}

pre[class*="language-"] {
    margin: 0;
}

@media(min-width:993px) {
    .me-page-title {
        padding: 28px 20px 10px 20px;
    }
    .me-page-body {
        padding: 20px;
    }
}

@media(max-width:992px) {
    .me-page-title {
        padding: 28px 10px 10px 10px;
    }
    .me-page-body {
        padding: 20px 10px;
    }
}

.flat-breadcrumb .breadcrumb,
.flat-breadcrumb .breadcrumb:before {
    vertical-align: middle
}

.tabs-fixed-color .indicator {
    display: none !important
}

.tabs.tabs-fixed-color .tab a {
    color: #fff;
}

.tabs.tabs-fixed-color .tab a:hover,
.tabs.tabs-fixed-color .tab a.active {
    background-color: transparent;
    color: #fff;
}

@media(max-width:601px) {
    .mo-m-t-20 {
        margin-top: 20px !important;
    }
}

.icon-container .icon-preview {
    height: 120px;
    text-align: center;
}

.icon-container span {
    display: block;
}

.icon-container i {
    font-size: 3em;
    margin-bottom: 10px;
}

.modal-overlay {
    top: 0
}

.switch span.title {
    margin-right: 10px
}

.switch span.title {
    margin-left: 10px
}

.me-close {
    margin-top: -22px;
    margin-right: 10px;
    cursor: pointer;
}

.me-close:hover {
    opacity: 0.7;
}


/*Grid Example Page*/

.col.grid-example {
    border: 1px solid #eee;
    margin: 7px 0;
    text-align: center;
    line-height: 50px;
    font-size: 28px;
    color: white;
    padding: 0;
}

.flow-text {
    font-size: 1.38rem;
}


/*Background Color*/

.bg-red {
    background: rgb(244, 67, 54) !important
}

.bg-pink {
    background: rgb(233, 30, 99) !important
}

.bg-purple {
    background: rgb(156, 39, 176) !important
}

.bg-deep-purple {
    background: rgb(103, 58, 183) !important
}

.bg-indigo {
    background: rgb(63, 81, 181) !important
}

.bg-teal {
    background: rgb(0, 150, 136) !important
}

.bg-green {
    background: rgb(76, 175, 80) !important
}

.bg-white {
    background: #fff !important
}


/* Text Color */

.text-red {
    color: rgb(244, 67, 54) !important
}

.text-pink {
    color: rgb(233, 30, 99) !important
}

.text-purple {
    color: rgb(156, 39, 176) !important
}

.text-deep-purple {
    color: rgb(103, 58, 183) !important
}

.text-indigo {
    color: rgb(63, 81, 181) !important
}

.text-teal {
    color: rgb(0, 150, 136) !important
}

.text-green {
    color: rgb(76, 175, 80) !important
}

@media (min-width: 993px) and (max-width:1200px) {
    .row .col.me-sl {
        width: 50% !important;
        margin-left: auto;
        left: auto;
        right: auto;
    }
}


/* =================================================================================
Footer
================================================================================= */

#me-footer {
    margin-top: 0px;
    padding-top: 0px
}

#me-footer * {
    color: #8a8787;
}

#me-footer .footer-copyright {
    padding: 0 15px;
}

#me-footer .resources-box ul {
    margin-top: 0px;
}

#me-footer .resources-box ul li {
    list-style-type: circle;
    display: inline-block;
    font-size: 12px;
    cursor: pointer
}

#me-footer .resources-box ul li:last-child {
    margin-right: 0px;
}

#me-footer .resources-box ul li a:hover {
    color: #333;
}

@media(min-width:601px) {
    #me-footer .resources-box ul li {
        margin-right: 15px;
    }
}

@media(max-width:600px) {
    #me-footer .resources-box ul li {
        margin-right: 6px;
    }
}

#me-footer .resources-box ul li .material-icons {
    vertical-align: middle;
    font-size: 20px;
}