@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
/* Global
================================================================*/
/*
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
*/

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
    scroll-behavior: smooth !important;
}

body {
	background: #fff;
	margin: 0;
	padding: 0;
}

body, p, li {
    font-family: "Mulish", sans-serif!important;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
    color: #363636;
}

.b-pro { padding: 13px 20px!important }

.wrapper {
    padding-top: 70px;
    padding-left: 258px;
    transition: padding 0.3s cubic-bezier(0.4, 0.41, 0.09, 0.95), left 0.3s cubic-bezier(0.4, 0.41, 0.09, 0.95);
}
.wrapper.wrapper-with-icon-sidebar {
    padding-left: 58px;
}

        @media screen and (max-width: 1024px){ 
            .wrapper { padding-left: 0; padding-top:50px;}
        }

main {
    position: relative;
    max-width: 100%;
    z-index: 4;
}

.badge-free {
    background: #f4e7dc;
    border: 1px solid #fab06f;;
    color: #e2792b;;
    font-size: 11px;
}
.badge-pro {
    background: #f1f8ed;
    border: 1px solid #B3D69D;
    color: #597e25;
    font-size: 11px;
}
.badge-elite {
    background: #f2e9d6;
    border: 1px solid #eac36e;;
    color: #c68d1a;
    font-size: 11px;
}
 
h1 { font-size: 28px; }
a,
a:visited { color: #3f9dd2!important }
a.green, .green { color: #78bc4e!important }
table a { color: #6A962C!important }

.form-control {
    padding: 5px 25px!important;
    border-radius: 0;
    height: 46px;
}
.thead-lt-blue {
    background: #f3f7ff!important;
    border: none!important;
}
.table .thead-lt-blue th {
    border: none!important;
    font-size: 14px;
}

/* Header
================================================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding-left: 280px;
    display: flex;
    align-items: center;
    background: #363636;
    z-index: 5;
    transition: padding 0.3s, left 0.3s;
}

header.wrapper-with-icon-sidebar { padding-left: 80px; }

.header-buttons {
    position: absolute;
    right: 10px;
    top: 10px;
}

.header-buttons a { margin-left: 6px; }

.btn{
	border: none;
    border-radius: 0!important;
    font-size: 14px;
    font-weight: 600;
    padding: 15px 20px!important;
    line-height: 1;
    color: #fff!important;
}

.btn-main,
.btn-main:visited,
.feature-product,
.feature-product:visited{
    background-color: #494848;
    box-shadow: 0;
    color: #fff!important;
}

.btn-main:hover {
    background: #555;
    cursor: pointer
}

.btn-blue,
.btn-blue:visited{ background: #648391; color: #fff!important}
.btn-blue:hover { background: #749db1;  color: #fff!important}

.btn-dk-green,
.btn-dk-green:visited { background: #6b8961;  color: #fff!important}
.btn-dk-green:hover { background: #8ab27c }

.btn-white { background: #fff; border:1px solid #b4b8bb; color:#444!important }
.btn-add { background: #3f9dd2; border:1px solid #3f9dd2; color:#fff }

.dropdown{ margin: 0 0 0 20px}

.dropdown [type="button"] {
    font-size: 14px; 
    background: none;
    border: none;

}
.dropdown-toggle::after {
    display: inline-block;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    border-radius: 0;
}
.dropdown-menu {padding:0}
.dropdown-item {
    padding: 15px 20px;
    border-bottom: 1px dotted #ccc;
    font-size: 13px;
    color: #494848!important;

}
header#mobile {display: none}
         
        @media screen and (max-width: 1024px){ 
            header#main { display: none}
            header#mobile {display: inherit}
            
            header {padding-left: 0;height: 60px;}
            .mobile-actions a{
                color: #fff;
                margin-left: 10px;
                font-size: 18px;
                padding: 5px 10px;
                border-radius: 6px;
            }
            .mobile-actions a:hover { color:#fff!important }
            
            header#mobile .nav-icon {
                background: #555;
                padding: 14px;
                font-size: 24px;
            }
            
            header#mobile .nav-icon a { color: #fff; }
            
            .m-logo { padding: 16px 0 0 14px; }
        }


/* Navigation
================================================================*/
nav {
    transition: width 0.3s cubic-bezier(0.4, 0.41, 0.09, 0.95), left 0.3s cubic-bezier(0.4, 0.41, 0.09, 0.95);
    width: 259px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-right:1px solid #eaeaea;
    z-index: 10;
}

nav.page-with-icon-sidebar { width: 60px; }

.nav-top {
    height: 70px;
    border-bottom: 1px dotted #eaeaea;
}

.nav-top button {
    padding: 24px 22px;
    border: 0;
    background: #ececec;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
}

.logo {  padding: 25px 0 0; }

a.nav-item,
a.sub-nav-item{
    display: block;
    padding: 30px 20px;
    border-bottom: 1px solid #F4F8F2;
    color: #363636!important;
    font-weight: 400;
    text-decoration: none!important
}

a.nav-item:hover,
a.nav-item.active {
    background: #f4f8f2;
    border-right: 4px solid #78bc4e;
}

.nav-icon { 
    padding: 0 10px 0 0; 
    color: #78BC4E!important
}

nav.page-with-icon-sidebar .nav-label { display: none; }

.super-admin {
    position: absolute;
    bottom: 0;
    border-top: 1px dotted #ccc;
    width: 100%;
    background: #f9f9f9;
}

        @media screen and (max-width: 1024px){ 
            nav { display: none }
            nav.sidebar { display: inherit }
        }

/* Sub Navigation
---------------------------------*/
.sub-nav {
    position: absolute;
    width: 240px!important;
    top: 0;
    bottom: 0;
    left: 0;
}

.sub-nav-container {
    position: fixed;
    width: 240px;
    height: 100%;
    background: #f2f4f8;
}

a.sub-nav-item { border-bottom: 1px dotted #93b1e8; }

a.sub-nav-item:hover,
a.sub-nav-item.active { border-right: 4px solid #93b1e8; }
a.sub-nav-item.active { font-weight: 700; }

nav#mobile,
.sidebar{ display: none }

        @media screen and (max-width: 1024px){ 
            .sub-nav { display: none}
            nav#mobile {display: inherit;
            }
        }

/* Mobile Navigation
---------------------------------*/
.sidebar .m-nav{
    height: 50px;
    background: #79ba4d;
    font-size: 30px;
    padding: 4px 10px;
    text-align: right;
}
.sidebar .dropdown {
    background: #444;
    padding: 20px;
    margin: 15px;
}
.sidebar{
    position: fixed;
    width: 300px;
    height: 100%;
    left: -300px;
    background: #1b1b1b;
    transition: left 0.4s ease;
    border-right: none
}

.sidebar.show{ left: 0px; }

nav.sidebar ul{
    background: #1b1b1b;
    height: 100%;
    width: 100%;
    list-style: none;
    padding-left: 4px;
}

nav.sidebar ul li{ border-top: 1px solid #323232; }

nav.sidebar ul li:last-child{ border-bottom: 1px solid #323232; }

nav.sidebar ul li a{
    position: relative;
    color: #fff!important;
    text-decoration: none;
    font-size: 16px;
    padding: 30px 15px;
    display: block;
    width: 100%;
    border-left: 3px solid transparent;
}

nav.sidebar ul li.active a{
    color: #79ba4d!important;
    background: #1e1e1e;
    border-left-color: #79ba4d;
}

nav.sidebar ul li a:hover{ background: #1e1e1e; }

nav.sidebar ul ul{
    position: static;
    display: none; 
}

nav.sidebar ul.show{ display: block; } 

nav.sidebar ul ul li{
    line-height: inherit;
    border-top: none; 
}

nav.sidebar ul ul li a{
    font-size: 14px;
    color: #fff!important;
    padding: 15px 25px;
}

nav.sidebar ul li.active ul li a{
    color: #fff!important;
    background: #1b1b1b;
    border-left-color: transparent;
}

nav a:hover{ color: #79ba4d !important; }

nav.sidebar ul ul li a:hover{
    color: #79ba4d !important;
    background: #1e1e1e!important;
}

nav.sidebar ul li a span{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 15px;
    transition: transform 0.4s;
}

nav.sidebar ul li a span.rotate{
    transform: translateY(-50%) rotate(-180deg);
}


/* Main Content
================================================================*/
.main-content {
    margin-left: 240px;
    padding: 30px;
    width: 100%;
}

        @media screen and (max-width: 1024px){ 
             .main-content { margin-left: 0;}
         }

/* Home: Checklist
---------------------------------*/
.check-list.title {
    background: #ccd7eb;
    font-size: 18px;
    padding: 27px 10px;
}
.check-list {
    border: 1px dotted #93b1e8;
    padding: 20px 10px;
    font-size: 14px;
}
.check-list p { font-size: 14px }

.check-list a { font-weight: 400 }

/* Home: PRO/ELITE 
---------------------------------*/
.feature-pro {
    background: #f1f8ed;
    border: 1px solid #b3d69d;
    color: #363636
}
.feature-elite {
    background: #fbf4eb;
    border: 1px solid #eac36e;
    color: #363636
}

/* Page Tabs
---------------------------------*/
.module-tabs {
    border-bottom: 1px solid #ccc;
}

.nav-pills .nav-link.active{
    color: green;
    background-color: #f4f4f4;
    border:1px solid #d3eac1;
}
.nav-link {
    display: block;
    padding: 20px 30px;
}