.gutter-45 {
    margin-left: -45px;
    margin-right: -45px;
}
.gutter-45 > [class*='col-'] {
    padding-right: 45px;
    padding-left: 45px;
}
.gutter-25 {
    margin-left: -25px;
    margin-right: -25px;
}
.gutter-25 > [class*='col-'] {
    padding-right: 25px;
    padding-left: 25px;
}
.gutter-10 {
    margin-left: -10px;
    margin-right: -10px;
}

    .gutter-10 > [class*='col-'] {
        padding-right: 10px;
        padding-left: 10px;
    }

.gutter-5 {
    margin-left: -5px;
    margin-right: -5px;
}

    .gutter-5 > [class*='col-'] {
        padding-right: 5px;
        padding-left: 5px;
    }

.gutter-2 {
    margin-left: -2px;
    margin-right: -2px;
}

    .gutter-2 > [class*='col-'] {
        padding-right: 2px;
        padding-left: 2px;
    }

.gutter-0 {
    margin-left: 0px;
    margin-right: 0px;
}

    .gutter-0 > [class*='col-'] {
        padding-right: 0px;
        padding-left: 0px;
    }

body{background:#f4f4f4; color:#333333; position:absolute; width:100%; height:100%;}
#sidebar-left{background:transparent;}
.nav.main-menu > li > a, .nav.msg-menu > li > a{color:#333;}
.navbar{background:#0078D7;}
#logo{background:transparent;}
#top-panel{background:transparent;}
.user-mini > span,
.panel-menu i.pull-right{color:#fff;}

#main{padding:0px; min-height:500px !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#content{box-shadow:none; border-left:solid 1px #eaeaea; background: #fff;
         -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}

.sidebar-wrapper{
    display: -webkit-box;display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -webkit-box-orient: horizontal;  -ms-flex-flow: row nowrap;   flex-flow: row nowrap;
    height: 100%;
    width: 262px;
    flex: 0 0 262px;
}
#main_nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    width: 48px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-right: 1px solid #eaeaea;
}
#sidebar-left{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;

        -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y:auto;
  
}

#main_nav .btn-toggle-main-nav{flex: 0 0 auto; width:48px; height:48px; border-radius:0px; box-shadow:none; margin:0px;background-color: #f4f4f4; color: #005A9E; border:0px; border-bottom:solid 1px #eaeaea; border-right:solid 1px #eaeaea;}
#main_nav .btn-toggle-main-nav i{line-height:48px;font-size:20px;}
#main_nav .space{
            width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

#main_nav .nav{       width: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    /* display: flex; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
#main_nav .nav a{width:100%;  line-height:48px; height: 48px; border:0px; border-radius:0px; background:transparent; font-size: 18px; margin-bottom:0px; padding:0px 5px;}
#main_nav .nav a.active,
#main_nav .nav a:hover{color: #005A9E; background: #C7E0F4;}
#main_nav a img{max-height:35px;}
.nav > li > a > img{max-height:35px;}
.sidebar-wrapper .nav.main-menu > li a img{max-height:35px;}



.nav.main-menu, .nav.msg-menu{margin:0px;}
.nav.main-menu > li > a, .nav.msg-menu > li > a{padding:5px 28px 5px 6px;}

.flexbox-wrapper{ -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;}
.flexbox-wrapper .flex-column-sidebar,
.flexbox-wrapper .flex-column-content{ display: -webkit-box;display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -webkit-box-orient: horizontal;  -ms-flex-flow: row nowrap;   flex-flow: row nowrap;
}
.flexbox-wrapper .flex-column-sidebar{width: 262px;flex: 0 0 262px;}
.flexbox-wrapper .flex-column-content{ -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
}
#loginPage{background:url('../img/loyalty_background.jpg') no-repeat;  background-attachment:fixed; background-size:cover;}
#loginPage .brand{text-align:center;font-size:30px; font-weight:700; color:#fff; margin-bottom:30px;}
#loginPage .login-form{background: rgba(74, 176, 224, .3); min-width: 320px; max-width: 412px; width: calc(100% - 40px); margin:0px auto; padding:30px 15px;}
.vertical-center{position:relative; top:50%; transform:translateY(-50%);}
.login-form .logo{ display:block; margin:0px auto 5px;}
.login-form .box-bottom{margin-top:45px;color:#fff;}
.login-form a{color:#fff;}

.login-form .form-group{margin-bottom:15px;}
.login-form .form-control{border-radius:0px; padding:6px 10px; height:36px;}
.login-form  .input-group-addon{min-width:40px; border-radius:0px;}
.login-form .btn{border-radius:0px;}

#logo .app-brand{padding-left:15px;}
#logo .btn-toggle-main-app{width:48px; border:0px; border-radius:0px; box-shadow:none; margin:0px;}
#logo .btn-toggle-main-app:active{box-shadow:none;}
#logo .btn-toggle-main-app.open{background:#fff; color:#0078D7;}
.main-application{
    height: 100%;
    width: 0;
    position: absolute;
    z-index:99;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
    -webkit-box-shadow: 30px 0px 30px -30px rgba(0,0,0,0.2);
    box-shadow: 30px 0px 30px -30px rgba(0,0,0,0.2);
}
.main-application.open{
    width: 320px;
}
.main-application .inner{
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width:320px;
    padding: 23px 0 0 23px;
}
.main-application .item{
    width: 88px; height: 88px; font-size:12px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
        background: #f8f8f8;
            margin: 0 5px 5px 0;
}
.main-application .item:hover{background:#0078D7; color:#fff;}
.main-application .item i{font-size:32px; margin-bottom:10px; height:36px;}
.main-application .item img{max-height:48px;}

.sidebar-wrapper.xs {
    width: 96px;
    flex: 0 0 96px;
}
.sidebar-wrapper.xs #sidebar-left{overflow:visible;}
.sidebar-wrapper.xs .nav.main-menu > li{position:relative; }
.sidebar-wrapper.xs .nav.main-menu > li > a{ padding: 5px 6px 5px 6px;}
.sidebar-wrapper.xs .nav.main-menu > li > a span{
    display: none;
    position: absolute;
    top: 0;
    left: 49px; padding:10px 20px;
    width: 260px;
    text-align: left;
    color: #fff;
    z-index:99; height:45px; background:#0078D7;
}
.sidebar-wrapper.xs .nav.main-menu > li ul{
    position: absolute;
    left: 49px;
    top: 44px;
    width: 260px;
    display: none !important;
    background-color: #f4f4f4;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 3px 0; z-index:99;
}
.sidebar-wrapper.xs .nav.main-menu > li:hover >a span,
.sidebar-wrapper.xs .nav.main-menu > li:hover > ul{display:block !important;}
.sidebar-wrapper.xs .nav.main-menu > li:hover > ul li a{padding:10px 20px;}

#sidebar-left .space{height:48px;}
#breadcrumb{background:#f4f4f4; color:#005A9E; padding-left:15px; margin-bottom:0px;    line-height: 48px; height:48px;text-align:left;}
#breadcrumb >.btn{float:none !important;  margin:0px 0px 0px 0px !important; height:48px; line-height:48px; border-radius:0px;
                  background:transparent; border:0px; color:#005A9E; font-weight:400; font-size:14px; text-decoration:none;
}
#breadcrumb >.btn i{  padding: 0 4px; font-size:21px;}
#breadcrumb >.btn:hover{background:#C7E0F4;}

.breadcrumb{float:right !important; padding-right:30px;}
.breadcrumb > li > a{color:#005A9E;}
.breadcrumb > li + li:before{color:#005A9E;}
.breadcrumb > li > a:hover, .breadcrumb > li:last-child > a{color:#263238;}

.main-menu .dropdown-menu > li > a{color:#333;}
.main-menu .dropdown-menu > li > a:hover{background:#dae9f5;}
.main-menu .dropdown-menu{    background: rgba(0, 0, 0, 0.05);}
.main-menu  .dropdown-menu > li.active > a, .main-menu  .dropdown-menu > .active > a:hover, .main-menu  .dropdown-menu > .active > a:focus{background:#dae9f5; color:#005A9E;}

.sidebar-wrapper .nav.main-menu > li > a:hover{background:#dae9f5;color:#333;}
.sidebar-wrapper .nav.main-menu > li > a > i{width:35px; height:35px; font-size:21px;}
.nav.main-menu a.active, .nav.msg-menu a.active,
.nav.main-menu a.active:hover,.nav.main-menu a.active:focus{background-color:#C7E0F4; color:#005A9E; font-weight:700;}

/*Custom form*/
.form-control{border-radius:0px;}
.tab-manager .dropdown-toggle{padding:5px 12px 3px; background:#f4f4f4; border:0px; color:#0078D7; margin:0px;}
.tab-manager .dropdown-toggle i{font-size:24px;}
.tab-manager .dropdown-menu li{position:relative; padding-left:30px;}
.tab-manager .dropdown-menu li i{position:absolute; left:10px; top:5px; width:20px; color:#fff; cursor:move;}

.box-content .well{padding-left:0px; padding-right:0px; margin-left:-1px; margin-right:-1px;}
.license-notification {
    background-color: orangered;
    color: #fff;
    padding: 5px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
    z-index: 10;
}

.license-notification .inner {
    display: block;
    color: #fff;
}

.table.table-datatable .label {
    padding: 0.2em 0.6em 0.3em;
    margin: 0.2em;
    display: inline-block;
}