@font-face {
    font-family: 'opensansregularwebfont';
    src: url('../fonts/opensansregularwebfont.eot');
    src: url('../fonts/opensansregularwebfont.eot') format('embedded-opentype'), url('../fonts/opensansregularwebfont.woff2') format('woff2'), url('../fonts/opensansregularwebfont.woff') format('woff'), url('../fonts/opensansregularwebfont.ttf') format('truetype'), url('../fonts/opensansregularwebfont.svg#opensansregularwebfont') format('svg');
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSansBold.eot');
    src: url('../fonts/OpenSansBold.eot') format('embedded-opentype'), url('../fonts/OpenSansBold.woff2') format('woff2'), url('../fonts/OpenSansBold.woff') format('woff'), url('../fonts/OpenSansBold.ttf') format('truetype'), url('../fonts/OpenSansBold.svg#OpenSansBold') format('svg');
}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/OpenSansSemibold.eot');
    src: url('../fonts/OpenSansSemibold.eot') format('embedded-opentype'),
         url('../fonts/OpenSansSemibold.woff2') format('woff2'),
         url('../fonts/OpenSansSemibold.woff') format('woff'),
         url('../fonts/OpenSansSemibold.ttf') format('truetype'),
         url('../fonts/OpenSansSemibold.svg#OpenSansSemibold') format('svg');
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}
body {
    font-family: 'opensansregularwebfont';
}
.p-none {
    padding: 0;
}
.p-l-none {
    padding-left: 0;
}
.p-r-none {
    padding-right: 0;
}
a:hover,
a:focus,
button:hover,
button:focus,
.btn:hover,
.btn:focus,
.btn:active {
    outline: none !important;
}
.login-page,
.forgot-pwd-page{
    overflow-x: hidden;
}
.logo-wrapper img {
    margin: 136px auto 0 auto;
}
.logo-wrapper small,
.logo-wrapper small a {
    color: #313131;
}
.logo-wrapper small {
    display: block;
    margin-top: 5px;
}
.logo-wrapper small a {
    text-decoration: none;
    display: block;
    line-height: 11px;
}
.logo-wrapper p {
    font-family: 'OpenSansBold';
    color: #031313;
    opacity: 0.35;
    margin: 15px 0;
}
.custom-form {
    max-width: 382px;
    display: block;
    margin: 28px auto;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    padding: 35px 35px 28px 35px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, .2);
    box-shadow: 0 0 18px rgba(0, 0, 0, .2);
}
.custom-form .form-control {
    height: 46px;
    border-color: #e1e1e1;
    font-size: 14px;
    color: #737373;
}
.custom-form input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #737373;
}
.custom-form input::-moz-placeholder {
    /* Firefox 19+ */
    color: #737373;
}
.custom-form input:-ms-input-placeholder {
    /* IE 10+ */
    color: #737373;
}
.custom-form input:-moz-placeholder {
    /* Firefox 18- */
    color: #737373;
}
.custom-form .form-control:focus {
    box-shadow: none;
    border-color: #fbaf5d;
}
.forgot-link {
    margin: 5px 0 0 0;
}
.forgot-link a {
    color: #4f5f6f;
    text-decoration: none;
}
.username-input {
    margin-bottom: 20px;
}
.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both;
}
.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}
.radio .cr {
    border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}
.radio .cr .cr-icon {
    margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}
.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}
.custom-form .checkbox label {
    color: #4f5f6f;
    padding-left: 0;
}
.custom-form .checkbox label .cr {
    border-radius: 5px;
    background-color: #fff;
    -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .35);
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .35);
    border-color: #fbaf5d;
}
.submit-btn {
    font-family: 'OpenSansBold';
    min-width: 135px;
    height: 46px;
    border-radius: 2px;
    font-size: 18px;
    color: #fff;
    background-color: #f15a25;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.submit-btn:hover,
.submit-btn:focus {
    color: #fff;
    background-color: #e1501d;
}
.bottom-img {
    margin: 0 auto;
}
.error-alert {
    display: none;
    border-color: #fbaf5d;
    background-color: #fecf9b;
    text-align: left;
}
.error {
    font-weight: normal;
    color: #d66d27;
}
/* ------------------------------------------- */
/* -------- internal setting page css -------- */
/* ------------------------------------------- */

/* ---- sidebar css starts here ---- */

:focus {
    outline: none;
}
/* 
    Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
    A quick fix is to change .side-menu to 

    -> position:absolute
    
    and uncomment the code below.
    You also need to uncomment 
    
    -> <div class="absolute-wrapper"> </div> in the html file

    you also need to tweek the animation. Just uncomment the code in that section
    --------------------------------------------------------------------------------------------------------------------
    If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
    This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/

/*.absolute-wrapper{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
}*/

.side-menu {
    position: fixed;
    width: 230px;
    height: 100%;
    background-color: #384655;
}
.side-menu-container .nav{
    background-color: #384655;   
}

.side-menu .navbar {
    border: none;
}

.side-menu .navbar-header {
    width: 100%;
    background-color: #fff;
    border-bottom: none;
}

.side-menu .navbar-nav li {
    display: block;
    width: 100%;
    margin-bottom: 25px;
}

.side-menu .navbar-nav li a {
    position: relative;
    padding: 15px;
    color: #fff;
}

.side-menu .navbar-nav li a:hover,
.side-menu .navbar-nav li a:focus{
    color: #fff;
}
.side-menu .navbar-nav li a p{
    margin-top: 10px;
    margin-bottom: 10px;
}
.side-menu .navbar-nav li:first-child a p{
    margin-bottom: 20px;
}
.side-menu .navbar-nav li.active a{
    color: #fff;
    background-color: #384655;
    position: relative;
}
.side-menu .navbar-nav li.active a:after{
    content: '';
    position: absolute;
    top: calc(50% - 15px);
    right: -15px;
    background-color: #f3f3f3;
    width: 30px;
    height: 30px;
    border-radius: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    transform:         rotate(45deg);
}
.side-menu .navbar-nav li.active a:hover,
.side-menu .navbar-nav li.active a:focus{
    color: #fff;
    background-color: #384655;
}
.side-menu .navbar-nav li a > .badge{
    position: absolute;
    top: 2px;
    right: 37%;
    background-color: #f15a25;
    font-size: 10px;
    padding: 4px;
}

/* Main body section */
.side-body {
    margin-left: 230px;
}

.sidebar-logo-wrapper {
    padding-top: 28px;
    min-height: 136px
}

.sidebar-logo-wrapper img {
    max-width: 143px;
    margin: 0 auto;
}

.sidebar-logo-wrapper small {
    margin-top: 2px;
}

.sidebar-logo-wrapper p {
    opacity: 1;
    font-size: 12px;
    margin: 6px 0 12px 0;
}
.side-menu-container .title {
    font-family: 'OpenSansBold';
    color: #d5dde4;
    padding: 40px 0;
    margin-bottom: 0;
}

.side-menu-container .user-img {
    height: 68px;
    width: 68px;
    border: 3px solid #d5dde4;
}

/* ---- sidebar css ends here ---- */
.main-content-container{
    padding: 0;
}
.right-header{
    display: table;
    width: 100%;
    height: 136px;
    background-color: #d5dde4;
    color: #384655;
    padding: 0 60px;
}
.right-header > .title{
    font-family: 'OpenSansBold';
    color: #384655;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}
.right-header > .dropdown-wrapper{
    display: table-cell;
    vertical-align: middle;
}
.right-header > .dropdown-wrapper > .master-account-wrapper,
.right-header > .dropdown-wrapper > .custom-dropdown{
    display: inline-block;
    vertical-align: middle;
}
.right-header > .dropdown-wrapper a{
    color: #384655;
}
.right-header > .dropdown-wrapper a:hover,
.right-header > .dropdown-wrapper a:focus{
    text-decoration: none;
}
.right-header > .dropdown-wrapper > .master-account-wrapper small{
    display: block;
}
.right-header > .dropdown-wrapper > .master-account-wrapper small a{
    opacity: 0.5;
}
.custom-dropdown{
    border-radius: 20px; 
    background-color: #fff; 
    padding: 9px 24px;
    color: #384655;
}
.right-header > .dropdown-wrapper > .custom-dropdown{
    margin-left: 10px;
}
.right-header > .dropdown-wrapper > .custom-dropdown a{
    color: #384655;
}
.right-header > .dropdown-wrapper > .custom-dropdown a i{
    color: #737373;
    font-size: 10px;
    margin-left: 15px;
}
.right-header > .dropdown-wrapper > .custom-dropdown a:hover,
.right-header > .dropdown-wrapper > .custom-dropdown a:focus{
    text-decoration: none;
}
.right-content-wrapper{
    float: left;
    width: 100%;
    padding: 15px;
}
.white-box{
    float: left;
    width: 100%;
    padding: 30px;
    background-color: #fff; 
    -moz-box-shadow: 0 2px 9px rgba(139,157,175,.61);
    -webkit-box-shadow: 0 2px 9px rgba(139,157,175,.61);
    box-shadow: 0 2px 9px rgba(139,157,175,.61);
}
.user-img-wrapper p,
.user-img-wrapper img{
    display: inline-block;
    vertical-align: middle;
}
.user-img-wrapper img{
    height: 113px;
    width: 113px;
    border: 3px solid #d5dde4;
    margin-right: 25px;
}
.settings-wrapper{
    float: left;
    /*width: 100%;
    padding-left: 143px;*/
    padding-right: 30px;
}
.settings-wrapper ul{
    float: left;
    width: 100%;
    padding-left: 0;
    list-style: none;
}
.settings-wrapper ul li{
    float: left;
    width: 100%;
    padding: 18px 10px;
    border-bottom: 1px solid #ebebeb;
}
.settings-wrapper ul li > .row{
    margin-left: -15px;
    margin-right: -15px;
}
.settings-wrapper ul li:first-child{
    font-family: 'OpenSansBold';
    color: #384655;
    border-color: #f15a25;
    padding: 20px 10px 20px 0px;
}
.settings-wrapper ul li:first-child h4{
    margin: 0;
    float: left;
}
.settings-wrapper ul li:first-child a{
    color: #f15a25;
    float: right;
}
.settings-wrapper ul li:first-child a img{
    margin-right: 8px; 
    margin-top: -3px;
}
.settings-wrapper ul li:first-child a:hover,
.settings-wrapper ul li:first-child a:focus{
    text-decoration: none;
}
.settings-label{
    color: #4f5f6f;
}
.settings-value{
    font-family: 'OpenSansSemibold';
    color: #384655;
}
.settings-wrapper ul li .settings-label{
    width: 210px;
}
.upload-data-box{
    margin-top: 20px;
}
.upload-data-box .title{
    font-family: 'OpenSansBold';
    color: #000;
}
.custom-btn{
    border-radius: 20px; 
    background-color: #ebebeb; 
    padding: 8px 24px;
    color: #4f5f6f;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: auto;
}
.bootstrap-select > .dropdown-toggle{
    border-radius: 20px; 
    background-color: #ebebeb; 
    border: none;
    padding: 8px 38px 8px 24px;
    color: #4f5f6f;
    width: auto;
}
.dropdown-menu{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.09);
}
.bootstrap-select > .dropdown-toggle .caret{
    display: none;
}
.bootstrap-select > .dropdown-toggle{
    position: relative;
}
.bootstrap-select > .dropdown-toggle .bs-caret{
    position: absolute;
    right: 0;
}
.bootstrap-select > .dropdown-toggle .bs-caret:after{
    font-family: 'FontAwesome';
    content: '\f078';
    font-size: 11px;
    position: absolute;
    top: 2px;
    right: 22px;
}
.bootstrap-select .dropdown-menu.inner{
    max-height: 300px !important;
    overflow-y: auto !important;
}
.category-picker,
.clients-picker{
    margin-right: 15px;
}
.clients-picker .dropdown-toggle{
    min-width: 180px;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px 15px 10px 0px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
#uploadFile{
    display: none;
}
.bootstrap-select .dropdown-toggle:focus{
    outline: none !important;
    box-shadow: none !important;
}
.orange-btn{
    background-color: #f15a25;
    color: #fff;
}
.orange-btn:hover,
.orange-btn:focus{
    background-color: #E95521;
    color: #fff;
}
a.disabled{
    opacity: 0.5;
}
.settings-form{
    float: left;
    width: 100%;
}
.custom-form-control{
    border-color: #bbc4cd;
}

.custom-form-control:focus{
    box-shadow: none;
    border-color: #f15a25;
}
.settings-edit-list li:not(:first-child){
    border-bottom: none;
    background-color: #f7f7f7;
}
.settings-edit-list .settings-label{
    text-align: right;
    max-width: 190px;
    padding-top: 7px;
    padding-left: 30px;
}
.password-row{
    padding: 8px 10px !important;
}
.password-label-wrapper{
    padding: 0 10px !important;
}
.buttons-row .btn-wrapper{
    margin-left: 190px;
}
.buttons-row .btn-wrapper .btn{
    font-size: 12px;
    border-radius: 20px;
    padding: 6px 20px;
    margin: 5px 15px 15px 0px;
}
.buttons-row .btn-wrapper .grey-btn{
    color: #384655;
    background-color: #d5dde4;
}
.buttons-row .btn-wrapper .grey-btn:hover,
.buttons-row .btn-wrapper .grey-btn:focus{
    background-color: #ced7df;
}
.settings-edit-list .password-label{
    text-align: left;
}
.custom-form-control{
    font-family: 'OpenSansSemibold';
    color: #384655;
}
#internalSettingEditForm .error{
    margin-right: 15px;
}

/* -------------------------------- */
/* ---- client setting page css --- */
/* -------------------------------- */
.user-img-wrapper .data-block{
    display: inline-block;
    vertical-align: middle;
}
.user-img-wrapper .data-block p{
    display: block;
    margin-bottom: 2px;
}


/*  ---- style 2 css starts here ----  */
.page_title_wrap {
    border-bottom: 2px solid #e3e9ee;
    padding-bottom: 10px;
}
.page_title_wrap .title {
    font-family: 'OpenSansBold';
    color: #384655;
}
.filter_data_wrap {
    float: left;
    width: 100%;
    margin-top: 20px;
}
.brand_picker, .market_picker, .prod_category_picker {
    margin-right: 12px;
}
.filter_data_wrap p {
    margin: 10px 0 20px 0;
    font-size: 13px;
}
.chart_countbox_wrap {
    margin-bottom: 60px;
}
.prod_countbox_wrap, .prod_keystats_wrap, .sales_countbox_wrap {
    float: left;
    width: 100%;
}
.prod_countbox {
    float: left;
    width: 100%;
    margin-top: 17px;
    max-height: 130px;
}
.prod_countbox_title {
    background-color: #f3f3f3;
    font-family: 'opensansregularwebfont';
    font-size: 11px;
    font-weight: bold;
    color: #384655;
    float: left;
    width: 100%;
    padding: 10px 0 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod_countbox_status {
    float: left;
    width: 100%;
    background-color: #fff;
    border: 1px solid #f3f3f3;
}
.prod_countbox_status div {
    float: left;
    margin: 5px 0 5px 10px;
    color: #4f5f6f;
    font-size: 13px;
}
.prod_countbox_status span {
    float: right;
    margin: 5px 10px 5px 0;
}
.count_up {
    color: #26ca39;
}
.count_down {
    color: #c50d04;
}
.prod_countbox_value, .sales_countbox_value , .prod_countbox_return_value {
    float: left;
    width: 100%;
    color: #fff;
    padding: 20px 0 20px 14px;
    font-family: 'OpenSansBold';
    font-size: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 70px !important;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(1) .prod_countbox {
    background-color: #ffb703;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(2) .prod_countbox {
    background-color: #787f89;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(3) .prod_countbox {
    background-color: #1eabd6;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(4) .prod_countbox {
    background-color: #8c7293;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(5) .prod_countbox {
    background-color: #77b633;
}
.prod_countbox_wrap .row .col-sm-6:nth-child(6) .prod_countbox {
    background-color: #f17d4a;
}
.prod_keystats_wrap {
    margin-top: 35px;
}
.keystats_box_title {
    font-family: 'OpenSansBold';
    font-size: 21px;
    color: #384655;
    margin-bottom: 10px;
}
.keystats_box_title span {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #384655;
    font-family: 'opensansregularwebfont';
}
.prod_keystats_wrap i {
    float: right;
}
.growth_story_tbl_wrap {
    height: 538px;
    overflow-y: auto;
}
.growth_story_tbl thead tr th, .top_selling_tbl thead tr th {
    border-bottom: 1px solid #ddd !important;
    color: #4f5f6f;
    font-weight: normal;
    font-family: 'OpenSansBold';
}
.growth_story_tbl tr td {
    padding: 14px 8px !important;
}
.top_selling_tbl tr td {
    padding: 10px 8px !important;
}
.top_selling_tbl .table tr td:nth-child(1) {
    border: 0 !important;
}
.top_selling_tbl .table tr:nth-child(1) td {
    border: 0 !important;
}

.keystats_box_wrap {
    margin-bottom: 40px;
}
.top_selling_tbl .table {
    margin-bottom: 0;
}
.user_info_wrap {
    float: left;
    border-bottom: 1px solid #778899;
    padding-bottom: 6px;
}
.user_info_wrap p {
    font-size: 21px;
    font-family: 'OpenSansSemibold';
    margin-bottom: 0;
}
.user_info_header {
    float: right;
    /*padding-top: 16px;*/
}
.welcome_user_wrap {
    float: left;
    clear: both;
    width: 100%;
    padding-top: 6px;
}
.filter_data_wrap .btn-group {
    margin-bottom: 14px;
}

/* ---- style 2 css ends here ---- */
 
/* ---- style 3 css starts here ---- */
.page_title_wrap {
    border-bottom: 2px solid #e3e9ee;
    padding-bottom: 10px;
}
.page_title_wrap .alert_title {
    font-family: 'OpenSansBold';
    color: #384655;
}
.filter_alert_wrap{
    padding-top: 20px;
    padding-bottom: 20px; 
    position: relative;
    float: left;
    width: 100%;
}
.filter_alert_wrap  .form-group{
    position: relative;
    float: none;
    width: auto;
    min-width: 358px;
    margin-right: 20px;  
    display: inline-block;
}
.filter_alert_wrap  .form-group input{
    background-color: #ebebeb;
    border: medium none;
    border-radius: 20px;
    color: #4f5f6f;
    font-size: 14px;
    padding: 11px 45px 11px 15px;
    height: 39px;
    line-height: 20px;
    position: relative;
    float: none;
    display: inline-block;
    vertical-align: top;
    box-shadow: none;
}
.filter_alert_wrap  .form-group input:hover,
.filter_alert_wrap  .form-group input:focus{
    box-shadow: none;
}
.filter_alert_wrap  .form-group .search-addon-btn{
    position: absolute;
    right: 15px;
    top: 9px;
    background: none;
    padding: 0;
}
.filter_alert_wrap  .form-group .search-addon-btn:hover,
.filter_alert_wrap  .form-group .search-addon-btn:focus,
.filter_alert_wrap  .form-group .search-addon-btn:active{
    background: none;
    outline: none;
    box-shadow: none;
}
.filter_alert_wrap .alert-btns{
    background-color: #ebebeb;
    border: medium none;
    border-radius: 20px;
    color: #4f5f6f;
    min-width: 88px;
    padding: 11px 24px;
    width: auto;
    max-height: 39px;
    vertical-align: top;
    margin-right: 20px;
    float: none;
    display: inline-block;
    position: relative;
}
.filter_alert_wrap .alert-btns img{
    margin: 0 auto;
}
.filter_alert_wrap .checkbox{
    margin-top : 0;
    vertical-align: top;
    display: inline-block;
}
.filter_alert_wrap .checkbox label{
    padding-left: 10px;
}
.alert-btns .checkbox label span{
    margin-right: 0;
}
.filter_alert_wrap .pagination{
    margin: 0;
}
.filter_alert_wrap .pagination-btn{
    display: inline-block;
    color: #384655;
    float: right;
}
.filter_alert_wrap .pagination-btn a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}
.list_items_wrap{
    float: left;
    position: relative;
    width: 100%;
}
.list_items_wrap .left-block{
    width: calc(100% - 88%);
    float: left;
    position: relative;
}
.list_items_wrap .left-block button,
.list_items_wrap .left-block .orange-btn{
    font-family: 'OpenSansBold';
    background-color: #f15a25; 
    color:#fff;
    font-size: 14px;
    min-width: 175px;
    height: 39px;
    padding: 10px 20px;
    border: medium none;
    border-radius: 0;
    margin-bottom: 12px;
    display: inline-block;
    vertical-align: top;
}
.list_items_wrap .white-box{
    float: right;
    position: relative;
    width: calc(100% - 200px);
    padding: 25px;
    margin-bottom: 20px;
    padding-bottom: 0px;
}
.f-bold{
    font-family: 'OpenSansBold';
}
.list_items_wrap .right-block table{
    font-size: 14px;
    color: #4f5f6f;
}
.list_items_wrap .right-block table tr td{
    vertical-align: middle;
    padding-top: 12px;
    padding-bottom: 12px;
}
.list_items_wrap .right-block table tr .modal-td{
    cursor: pointer;
}
.list_items_wrap .right-block table tr:last-child{
    border-bottom: 1px solid #ddd;
}
.list_items_wrap .right-block table tr td:last-child{
    text-align: right;
    padding-right: 15px;
}
.list_items_wrap .right-block table tr td .checkbox{
    margin: 0;
}
.list_items_wrap .right-block table tr td label{
    padding-left: 0px;
}
.list_items_wrap .right-block table tr td label span{
    margin-right: 20px;
    height: 16px;
    width: 16px;
    margin-top: 2px;
}
.list_items_wrap .right-block table tr td label span i{
    left: 16% !important;
}

.white-box .alert_form_wrap{
    float: left;
    position: relative;
    width: 100%;
    padding: 10px;
}
.alert_form_wrap .control-label{
    text-align: left;
    color: #4f5f6f;
    font-size: 14px;
    font-weight: normal;
}
.alert_form_wrap form input{
    height: 38px;
    margin-bottom: 15px;    
    float: right;
    margin-right: 15px;
    box-shadow: none;
}
.alert_form_wrap form textarea{
    height: 268px;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
    resize: none;
}
.alert_form_wrap form input.form-control:focus,
.alert_form_wrap form textarea:focus{
    box-shadow: none;
    border-color: #F15A25;
}
.alert_form_wrap .bottom-rows{
    margin-top:30px ;
    margin-bottom: 20px;
}
.alert_form_wrap .bottom-rows a{
    float: left;
    margin-right: 25px;
    margin-top: 6px;
    position: relative; 
}
.alert_form_wrap .bottom-rows .btn-group input{
    margin-bottom: 0px;
}
#internaldashboardMailForm .error,
#templateCreateForm .error{
    margin-right: 15px;
}
#templateCreateForm .alert{
    margin: 10px 0;
}
.detail-modal .close{
    margin-right: 10px;
    position: absolute;
    right: 10px;
    top: 23px;
}
.detail-modal .modal-header{
    border-bottom: none;
    padding: 20px;
}
.detail-modal .modal-header h4{
    font-family: 'OpenSansBold';
    color: #4f5f6f;
    font-size: 16px;
}
.detail-modal .modal-body{
    color: #4f5f6f;
    padding:20px;
    padding-top: 0px;
}
.detail-modal .modal-body .table-responsive tr{
    border-bottom: 1px solid #ddd;
}
.detail-modal .modal-body .table-responsive tr:first-child{
    border-top: 1px solid #ddd;
}
.detail-modal .modal-body .table-responsive td{
    border-top: none;
}
.detail-modal .modal-body .table-responsive td:first-child{
    font-family: 'OpenSansSemibold';
    background-color: #f7f7f7;
    border-right: 1px solid #ddd;
    max-width: 32px;
}
.detail-modal .modal-body p{
    line-height: 26px;
    text-align: left;
}
.detail-modal .modal-footer{
    padding-top: 0px;
    border-top: 0px;
}
.detail-modal .modal-footer button{
    border: none;
    padding: 6px 15px;
}
.detail-modal .modal-footer button:focus,
.detail-modal .modal-footer button:hover{
    outline: none;
    border: none;
}

.swal2-modal{
    padding-top: 35px !important;
    padding-bottom: 35px !important;  
}
.swal2-modal h2 {
    font-family: 'OpenSansSemibold';
    color: #384655;
    display: block;
    font-size: 18px;
    font-weight: normal;
    line-height: 34px;
    margin-bottom: 5px;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: none;
}
.swal2-content{
    color: #4f5f6f;
    font-size: 14px;
}
.swal2-modal button.styled{
    font-size: 14px;
    padding: 8px 28px;
    border-radius: 25px;
    margin-top: 5px;
}
.swal2-confirm{
    background-color: #f15a25 !important;
    border-left-color: #f15a25 !important;
    border-right-color: #f15a25 !important;
}
.swal2-cancel{
    color: #4f5f6f !important;
}
.swal2-spacer{
    margin-top: 5px;
    margin-bottom: 5px;
}
.custom-pagination{
    background-color: #EBEBEB;
    border-radius: 25px;
    padding: 10px 16px;
    display: inline-block;
    vertical-align: top;
    float: right;
}
.custom-pagination li a{
    display: inline-block;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 6px;
    color: #9ba2aa;
}
.custom-pagination li.disabled a{
    background: none;   
    color: #384655;
    opacity: 0.5;
}
.custom-pagination li a:hover,
.custom-pagination li a:focus,
.custom-pagination li.disabled a:hover,
.custom-pagination li.disabled a:focus{
    background: none;
    color: #384655;
}
.cursor-pointer{
    cursor: pointer;
}
.attachment-btn{
    background: none;
}
.attachment-btn:active{
    box-shadow: none;
}

/* ---- style 3 css ends here ---- */

/* ---- style 4 css starts here ---- */
.prod_filter_wrap {
    margin-top: 0;
    float: left;
    width: 100%;
}
.select_box_lrg_wrap_1, .select_box_lrg_wrap_2, .select_box_lrg_wrap_3, .select_box_lrg_wrap_4, .select_box_lrg_wrap_5, .select_box_lrg_wrap_6 {
    float: left;
}
.select_box_lrg_wrap_1 button, .select_box_lrg_wrap_2 button, .select_box_lrg_wrap_3 button, .select_box_lrg_wrap_4 button, .select_box_lrg_wrap_5 button, .select_box_lrg_wrap_6 button {
    position: relative !important;
    width: 180px !important;
    margin-right: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select_box_lrg_wrap_1 button b, .select_box_lrg_wrap_2 button b, .select_box_lrg_wrap_4 button b, .select_box_lrg_wrap_5 button b
 {
    position: absolute !important;
    right: 32px;
    top: 15px;
}

.select_box_lrg_wrap_2 button {
    width: 150px !important;
    margin-right: 12px;
}
.select_box_lrg_wrap_3 button {
    width: 100px !important;
    margin-right: 12px;
}
.select_box_lrg_wrap_4 button {
    width: 96px !important;
    margin-right: 1px;   
}
.select_box_lrg_wrap_5 button {
    width: 120px !important;
    margin-right: 12px;   
}
/*.select_box_lrg_wrap_2 .multiselect-container li {
    padding-left: 15px !important;
}*/
/*.select_box_lrg_wrap_1 .multiselect-container li{
    padding-left: 15px !important;
}*/
/*.select_box_lrg_wrap_5 ul.multiselect-container {
    padding-left: 15px;
}*/
.prod_filter_wrap p {
    border-top: 2px solid #e3e9ee;
    padding-top: 20px;
}
.salesbox_wrap {
    margin-bottom: 34px;
}
.sales_countbox_value {
    padding: 8px 0 8px 14px;
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
}

.sales_countbox_wrap .row .col-sm-6:nth-child(1) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #ffb703;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(2) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #787f89;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(3) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #1eabd6;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(4) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #8c7293;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(5) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #77b633;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(6) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #f17d4a;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(7) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #5d9236;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(8) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #bb6dc2;
}
.sales_countbox_wrap .row .col-sm-6:nth-child(9) .prod_countbox .sales_countbox_value {
    background-color: #fff;
    color: #df3d22;
}
.sales_reports_wrapper, .prod_keystats_wrap {
    display: flex;
    float: left;
    width: 100%;
}
.sales_box_wrap, .reports_box_wrap, .growth_story_box_wrap {
    display: flex;
}
.growth_story_box_wrap .growth_story_tbl {
    height: 300px;
    overflow-y: auto;
}
.brand_box {
    float: left;
    width: 100%;
    margin-bottom: 24px;
}
.brand_title {
    float: left;
    width: 100%;
    background-color: #4f5f6f;
    color: #fff;
    font-size: 13px;
    font-family: 'opensansregularwebfont';
    padding: 12px 10px 12px 15px;
}
.brand_information {
    float: left;
    width: 100%;
    background-color: #fff;
    border: 1px solid #f3f3f3;
    padding: 8px 10px 8px 15px;
    font-size: 13px;
    color: #4f5f6f;
}
.brand_information p {
    margin-bottom: 0;
    line-height: 26px;
}
.brand_information p span {
    float: left;
    width: 100%;
}
.topbrands_box_wrap .row .col-sm-6:nth-child(4) .brand_box {
    margin-bottom: 0;
}
.topbrands_box_wrap .row .col-sm-6:nth-child(5) .brand_box {
    margin-bottom: 0;
}
.topbrands_box_wrap .row .col-sm-6:nth-child(6) .brand_box {
    margin-bottom: 0;
}
.prod_keystats_wrap {
    margin-bottom: 34px;
}
#datatable thead tr th {
    font-family: 'OpenSansBold';
    font-size: 14px;
    color: #4f5f6f;
    padding-left: 12px;
    border-bottom: 1px solid #59c2e6 !important; 
    font-weight: normal;
}
#datatable tbody tr td {
    font-family: 'opensansregularwebfont';
    font-size: 13px;
    color: #4f5f6f;
}
.dataTables_wrapper {
    overflow-x: hidden;
}
.custom_dt_row {
    padding-left: 0;
}
.datatable_footer {
    float: left;
    width: 100%;
    margin-top: 20px;
}
.datatable_footer span {
    font-weight: bold;
    color: #4f5f6f;
    margin-right: 20px;
}
.custom_pagination a {
    color: #4f5f6f !important;
}
.custom_pagination>.active>a {
    background-color: #f15a25;
    border: 1px solid #f15a25;
    color: #fff !important;
}
.custom_pagination>.active>a:hover {
    background-color: #da4714;
    border: 1px solid #da4714;
}
/* ---- style 4 css ends here ---- */

/* ---- template management page css starts here ---- */

.checkbox label span.cr{
    background-color: #fff;
    border-color: #4f5f6f;
}
.templates-table td.text-left{
    text-align: left !important;
}
.templates-table a{
    display: inline-block;
    min-width: 60px;
    color: #4f5f6f;
    text-decoration: underline;
}
.templates-table a:hover,
.templates-table a:focus{
    color: #454545;
    text-decoration: underline;   
}
.templates-table tr td .checkbox label span.cr{
    margin-top: 4px;
    margin-right: 0;
}
.templates-table tr td:first-child{
    min-width: 30px !important;
}
.templates-table-wrapper{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ---- template management page css ends here ---- */

/* ---- template create page css starts here ---- */

.template-create-form-wrapper{
    padding: 0;
}
.template-create-form-wrapper ul.template-create-list li{
    border: none;
    padding: 12px 10px;
}
.template-create-form-wrapper ul.template-create-list li:first-child{
    font-family: "opensansregularwebfont";
    padding: 12px 10px;
}
.template-create-form-wrapper ul.template-create-list li .settings-label{
    width: 170px;
    padding-top: 7px;
}
.template-create-form-wrapper .buttons-row .btn-wrapper{
    margin-left: 0px;
}
.upload-excel-btn{
    margin: 0;
}
.template-create-box{
    padding-top: 12px;
    padding-bottom: 4px;
}
.template-create-form-wrapper .bootstrap-select > .dropdown-toggle{
    min-width: 168px;
}
.bootstrap-select .dropdown-menu li{
    padding: 0 !important;
    float: left !important;
    width: 100% !important;
}
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li:first-child a{
    color: #384655 !important;
    float: left !important;
    width: 100% !important;
}
.template-data-upload-list{
    margin: 12px 0 6px 0;
}
.template-data-upload-list .buttons-row .btn-wrapper .btn{
    font-size: 14px;
    padding: 8px 24px;
    min-width: 90px;
    margin: 15px 10px 0 0;
}
/* ---- template create page css ends here ---- */

/* ---- multiselect dropdown css starts here ---- */
.multiselect.dropdown-toggle{
    background-color: #ebebeb;
    border: medium none;
    border-radius: 20px;
    color: #4f5f6f;
    padding: 8px 38px 8px 24px;
    width: auto;
}
.dropdown-menu{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.09);
}
.multiselect .caret{
    border: none;
    height: 5px;
    width: 5px;
    position: relative;
}
.multiselect .caret:after{
    font-family: 'FontAwesome';
    content: '\f078';
    font-size: 10px;
    position: absolute;
    top: -5px;
    right: -18px;
}

.multiselect-item a,
.multiselect li a,
.multiselect-container.dropdown-menu > li > a{
    color: #384655 !important;
    background: none;
}
.multiselect-item .caret{
    display: none !important;
}
.multiselect-item,
.multiselect-item a{
    float: left !important;
    width: 100% !important;
}
.multiselect-item input,
.multiselect-item b{
    float: left !important;
}
.multiselect-item b{
    font-family: 'OpenSansBold' !important;
    font-weight: 400 !important;
    width: 99%;
}
.multiselect-container{
    min-width: 240px !important;
    /*padding-left: 15px;*/
}
.multiselect-container li{
    padding: 0 !important;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.multiselect-container > li > a > input[type="checkbox"],
.multiselect-container > li > a > label > input[type="checkbox"]{
    opacity: 0.6;
    margin-right: 5px !important;
}
.multiselect-container > li.multiselect-item{
    padding: 6px 0 6px 0 !important;
    margin-left: 5px;
}
.multiselect-container > li.multiselect-item > a{
    position: relative;
}
.multiselect-container > li.multiselect-item > a:after{
    content: "-";
    color: #f15a25;
    font-size: 33px;
    position: absolute;
    right: 10px;
    top: -13px;
}
.multiselect-container > li.multiselect-item > a.plus:after{
    content: "+";
    top: -3px;
    right: 9px;
    font-size: 25px;
}
.multiselect-container > li > a > label{
    background-color: #fff !important;
}
.multiselect-container li.active, 
.multiselect-container li.active:hover, 
.multiselect-container li.active a:hover{
    background: none;
}
.multiselect-container > li > a > label{
    /*padding: 3px 20px 3px 20px !important;*/
    margin: 0 !important;
    font-weight: 400 !important;
}


/* ---- multiselect dropdown css ends here ---- */

/* ---- datepicker custom css starts here ---- */
.custom-datepicker{
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: top;
}
.custom-datepicker i,
.custom-datepicker p{
    display: inline-block;
    vertical-align: middle;
}
.custom-datepicker i{
    font-size: 11px;
}
.custom-datepicker p{
    margin: 0;
    padding: 0;
}
.daterangepicker .calendar{
    display: block;
}

/* ---- datepicker custom css ends here ---- */

.long_countbox_title {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* UPLOAD HISTORY PAGE*/
.upload_history_wrap .history-table tr td:first-child {
    min-width: 30px !important;
}
.upload_history_wrap .history-table a {
    color: #4f5f6f;
    display: inline-block;
    min-width: 48px;
    text-decoration: underline;
}

/* -------------------------------- */
/*  -------- Media Queries -------- */
/* -------------------------------- */
@media only screen and (max-width: 1299px) {
    /* style 4 css */
    .dataTables_wrapper {
        overflow-x: auto;
    }
}
@media only screen and (max-width: 1200px) {

    /*  style 2 css */
    .dashboard_chart_wrap {
        margin-bottom: 40px;
        float: left;
        width: 100%;
    }
    .growth_story_tbl_wrap {
        height: auto;
        margin-bottom: 36px;
        overflow-y: auto;
    }
    /* style 3 css */
    .filter_alert_wrap .pagination-btn{
        float: none;
    }
    .list_items_wrap .left-block{
        width: auto;
    }
    .list_items_wrap .left-block button,
    .list_items_wrap .left-block .orange-btn{
        margin-bottom: 20px;
        margin-right: 25px;
    }
    .list_items_wrap .white-box{
        width: 100%;
    }
    .custom-pagination{
        float: none;
    }
    /* style 4 css */
    .sales_box_wrap, .reports_box_wrap, .sales_reports_wrapper, .prod_keystats_wrap, .growth_story_box_wrap {
        display: block;
    }
    .sales_box_wrap {
        float: left;
        margin-bottom: 34px;
    }
    .growth_story_box_wrap .growth_story_tbl {
        height: auto;
        overflow-y: auto;
        margin-bottom: 20px;
    }
    .growth_story_box_wrap {
        float: left;
        width: 100%;
        margin-bottom: 34px;
    }
}
@media (max-width: 991px){
    .right-header{
        height: 123px;
        padding: 0 40px;
    }
    .right-content-wrapper{
        padding: 40px;
    }
    .sidebar-logo-wrapper{
        min-height: 123px;
        padding-top: 20px;
    }
    .sidebar-logo-wrapper img{
        min-width: 123px;
    }
    .settings-wrapper{
        padding-left: 20px;
    }
    .fileUpload,
    .category-picker, 
    .clients-picker{
        margin-right: 5px;
    }
    .settings-wrapper ul li .settings-label{
        width: 50%;
    }
    .right-header > .title{
        font-size: 18px;
    }
    .settings-edit-wrapper{
        padding-right: 0;
    }
    #internalSettingEditForm #errorAlert{
        margin: 15px 0 0 0;
    }
    /* style 3 css */
    .filter_alert_wrap .form-group{
        min-width: 345px;
        margin-right: 15px;
    }
    .filter_alert_wrap .alert-btns{
        margin-right: 15px;
    }
    .list_items_wrap .left-block button,
    .list_items_wrap .left-block .orange-btn{
        margin-right: 10px;
        min-width: 140px;
    }
    .list_items_wrap .right-block table tr td:first-child {
        min-width: 136px;
    }
    .list_items_wrap .right-block table tr td:last-child{
        min-width: 72px;
    }
    .select_box_lrg_wrap_1, .select_box_lrg_wrap_2, .select_box_lrg_wrap_3, .select_box_lrg_wrap_4, .select_box_lrg_wrap_5, .select_box_lrg_wrap_6 {
        float: left;
        width: 50%;
    }
    .select_box_lrg_wrap_1 .btn-group, .select_box_lrg_wrap_2 .btn-group, .select_box_lrg_wrap_3 .btn-group, .select_box_lrg_wrap_4 .btn-group, .select_box_lrg_wrap_5 .btn-group, .select_box_lrg_wrap_6 .btn-group {
        float: left;
        width: 100% !important;
    }
    .select_box_lrg_wrap_1 button, .select_box_lrg_wrap_2 button, .select_box_lrg_wrap_3 button, .select_box_lrg_wrap_4 button, .select_box_lrg_wrap_5 button, .select_box_lrg_wrap_6 div.custom-datepicker  {
        float: left;
        width: 95% !important;
        margin-right: 5%;
    }
    .bootstrap-select.btn-group .dropdown-toggle .filter-option {
        text-align: center;
    }
        .select_box_lrg_wrap_6 .custom-datepicker  {
        position: relative;
    }
    .select_box_lrg_wrap_6 > .custom-datepicker i  {
        position: absolute !important;
        right: 14px;
        top: 13px;
    }
    .select_box_lrg_wrap_3 > .bootstrap-select > .dropdown-toggle .bs-caret,
    .select_box_lrg_wrap_4 > .bootstrap-select > .dropdown-toggle .bs-caret {
        position: absolute;
        right: -8px !important;
    }

      /* UPLOAD HISTORY PAGE */
    .upload_history_wrap .history-table tr td:nth-child(2) {
      min-width: 86px !important;
    }
    .upload_history_wrap .history-table tr td:nth-child(5) {
      min-width: 100px !important;
    }

}
@media only screen and (max-width: 990px) {
    /* style 4 css */
    .topbrands_box_wrap .row .col-sm-6:nth-child(4) .brand_box {
        margin-bottom: 24px;
    }
    .topbrands_box_wrap .row .col-sm-6:nth-child(5) .brand_box {
        margin-bottom: 24px;
    }
    .topbrands_box_wrap .row .col-sm-6:nth-child(6) .brand_box {
        margin-bottom: 24px;
    }   
}
@media only screen and (max-width: 920px) {
    /*  style 2 css */
   .user_info_header {
        float: right;
        padding-top: 6px;
    }
    .welcome_user_wrap {
        padding-bottom: 6px;
    } 
}
@media (max-width: 768px) {
    .page-wrapper{
        overflow-x: hidden;
    }
    .navbar-toggle{
        display: block;
        padding: 0;
        margin: 30px 0 0px 30px;
    }
    .side-menu {
        position: relative;
        width: 100%;
        height: 0;
        border-right: 0;
        border-bottom: 1px solid #e7e7e7;
    }
    .side-menu .brand-name-wrapper .navbar-brand {
        display: inline-block;
    }
    .side-menu .navbar{
        margin-bottom: 10px;
    }
    .navbar-header{
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
        box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    }
    /* Slide in animation */
    @-moz-keyframes slidein {
        0% {
            left: -230px;
        }
        100% {
            left: 0px;
        }
    }
    @-webkit-keyframes slidein {
        0% {
            left: -230px;
        }
        100% {
            left: 0px;
        }
    }
    @keyframes slidein {
        0% {
            left: -230px;
        }
        100% {
            left: 0px;
        }
    }
    @-moz-keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -230px;
        }
    }
    @-webkit-keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -230px;
        }
    }
    @keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -230px;
        }
    }
    /* Slide side menu*/
    /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
    .side-menu-container > .navbar-nav.slide-in {
        -moz-animation: slidein 230ms forwards;
        -o-animation: slidein 230ms forwards;
        -webkit-animation: slidein 230ms forwards;
        animation: slidein 230ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .side-menu-container > .navbar-nav {
        /* Add position:absolute for scrollable menu -> see top comment */
        position: fixed;
        left: -230px;
        width: 230px;
        /*top: 60px;*/
        top: 76px;
        height: 100%;
        -moz-animation: slideout 230ms forwards;
        -o-animation: slideout 230ms forwards;
        -webkit-animation: slideout 230ms forwards;
        animation: slideout 230ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Uncomment for scrollable menu -> see top comment */
    /*.absolute-wrapper{
        width:285px;
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }*/
    @-moz-keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 230px;
        }
    }
    @-webkit-keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 230px;
        }
    }
    @keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 230px;
        }
    }
    @-moz-keyframes bodyslideout {
        0% {
            left: 230px;
        }
        100% {
            left: 0;
        }
    }
    @-webkit-keyframes bodyslideout {
        0% {
            left: 230px;
        }
        100% {
            left: 0;
        }
    }
    @keyframes bodyslideout {
        0% {
            left: 230px;
        }
        100% {
            left: 0;
        }
    }
    /* Slide side body*/
    .side-body {
        margin-left: 0px;
        margin-top: 59px;
        position: relative;
        -moz-animation: bodyslideout 230ms forwards;
        -o-animation: bodyslideout 230ms forwards;
        -webkit-animation: bodyslideout 230ms forwards;
        animation: bodyslideout 230ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .body-slide-in {
        -moz-animation: bodyslidein 230ms forwards;
        -o-animation: bodyslidein 230ms forwards;
        -webkit-animation: bodyslidein 230ms forwards;
        animation: bodyslidein 230ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Hamburger */
    .navbar-toggle {
        border: 0;
        float: left;
        padding: 18px;
        margin: 10px 0 0 0;
        border-radius: 0;
    }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
        background: none;
    }
    .navbar-header {
        /* this is probably redundant */
        position: fixed;
        z-index: 3;
        background-color: #f8f8f8;
    }
    /* Dropdown tweek */
    #dropdown .panel-body .navbar-nav {
        margin: 0;
    }

    .sidebar-logo-wrapper{
        min-height: 50px !important;
        float: left;
        width: calc(100% - 88px);
        padding-right: 0;
        padding-top: 5px;
    }
    .sidebar-logo-wrapper a{
        float: left;
        margin: 7px 0 0 0;
    }
    .sidebar-logo-wrapper small{
        display: block;
        width: 50%;
        float: right;
        text-align: right;
        margin-top: 8px;
    }
    .sidebar-logo-wrapper p{
        display: block;
        float: right;
        margin-bottom: 0;
        margin-top: 2px;
        text-align: right;
        width: 50%;
    }
    .sidebar-logo-wrapper small a{
        float: right;
        margin: 0 0 0 5px;
        line-height: 16px;
    }
    .right-header{
        height: 85px;
    }
    .side-menu-container .title{
        font-size: 16px;
        padding: 30px 0;
    }
    
    .custom-datepicker i {
        float: right;
        margin-top: 3px;
    }
}

@media only screen and (max-width: 767px) {
    .logo-wrapper img {
        margin-top: 86px;
        max-width: 200px;
    }
    .sidebar-logo-wrapper img{
        margin-top: 0 !important;
        width: 123px !important;
    }
    .side-menu-container .nav{
        margin: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .side-menu-container .title{
        padding: 15px 0;
    }
    .side-menu .navbar-nav li{
        margin-bottom: 0;
    }
    .side-menu .navbar-nav li a p{
        margin-bottom: 0;
    }
    .side-menu-container .user-img{
        height: 55px !important;
        width: 55px !important;
    }
    .side-menu .navbar-nav li a{
        text-align: left;
    }
    .side-menu .navbar-nav li a p{
        display: inline-block;
    }
    .side-menu .navbar-nav > li > a > img{
        margin-right: 10px;
    }
    .side-menu .navbar-nav li a > .badge{
        top: 12px;
        left: 12px;
        right: auto;
    }
    .side-menu .navbar-nav li.active a::after{
        height: 18px;
        width: 18px;
        right: -9px;
        top: calc(50% - 5px);
    }
    .right-header > .title{
        font-size: 16px;
    }
    .fileUpload,
    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
    .category-picker,
    .clients-picker,
    .settings-form .orange-btn{
        width: calc(50% - 7px);
    }
    .bootstrap-select > .dropdown-toggle{
        width: 100%;
    }
    .side-menu-container .title{
        font-size: 14px;
    }
    /* style 2 css */
    .logo-wrapper img {
        margin-top: 86px;
        max-width: 200px;
    }
    .user_info_header {
        float: right;
        padding-top: 0px;
    }
    .welcome_user_wrap {
        padding-bottom: 6px;
    }
    .custom_right_header {
        padding: 0 26px;
    }
    .filter_data_wrap .btn-group {
        float: left;
        width: 100% !important;
    }
    /* style 3 css */
    .filter_alert_wrap .form-group{
        margin-right: 0px;
        min-width: 230px;
    }
    .filter_alert_wrap .alert-btns{ 
        margin-right: 10px;
    }
    .white-box .alert_form_wrap{
        padding: 0px;
    }
    .alert_form_wrap form input{
        margin-right: 0px;
    }
    .alert_form_wrap form textarea{
        margin-right: 0px;
        height: 190px;
    }
    .alert_form_wrap .bottom-rows {
        margin-bottom: 15px;
        margin-top: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .alert_form_wrap .bottom-rows a,
    .alert_form_wrap .bottom-rows .btn-group{
        margin-right: 15px;
    }
    .attachment-btn{
        width: auto !important;
    }
    /* style 4 css */
    .prod_filter_wrap p {
        float: left;
    }  
    /* multiselect css */
    .multiselect.dropdown-toggle{
        width: 100%;
        text-align: left;
    }
    .multiselect .caret{
        width: 0;
        height: 0;
        float: right;
    }
    .multiselect .caret::after{
        right: -15px;
        top: 3px;
    }
    .custom-datepicker {
        float: left;
        width: 100%;
    }
    .multiselect-container > li.multiselect-item > a {
        float: left !important;
        width: 100% !important;
    }
    .multiselect-container > li > a > input[type="checkbox"], .multiselect-container > li > a > label > input[type="checkbox"] {
        float: left !important;
    }
    .multiselect-item b {
        width: 99% !important;
    }
    .select_box_lrg_wrap_1, .select_box_lrg_wrap_2, .select_box_lrg_wrap_3, .select_box_lrg_wrap_4, .select_box_lrg_wrap_5, .select_box_lrg_wrap_6 {
        float: left;
        width: 100%;
    }
    .select_box_lrg_wrap_1 .btn-group, .select_box_lrg_wrap_2 .btn-group, .select_box_lrg_wrap_3 .btn-group, .select_box_lrg_wrap_4 .btn-group, .select_box_lrg_wrap_5 .btn-group, .select_box_lrg_wrap_6 .btn-group {
        float: left;
        width: 100% !important;
    }
    .select_box_lrg_wrap_1 button, .select_box_lrg_wrap_2 button, .select_box_lrg_wrap_3 button, .select_box_lrg_wrap_4 button, .select_box_lrg_wrap_5 button, .select_box_lrg_wrap_6 div.custom-datepicker  {
        float: left;
        width: 100% !important;
        margin-right: 0;
    }
    .bootstrap-select.btn-group .dropdown-toggle .filter-option {
        text-align: left;
    }

    .select_box_lrg_wrap_1 button b, .select_box_lrg_wrap_2 button b, .select_box_lrg_wrap_4 button b, .select_box_lrg_wrap_5 button b
     {
        position: absolute !important;
        right: 32px;
        top: 8px;
    }
    .select_box_lrg_wrap_6 .custom-datepicker  {
        position: relative;
    }
    .select_box_lrg_wrap_6 > .custom-datepicker i  {
        position: absolute !important;
        right: 15px;
        top: 10px;
    }
    .select_box_lrg_wrap_3 > .bootstrap-select > .dropdown-toggle .bs-caret,
    .select_box_lrg_wrap_4 > .bootstrap-select > .dropdown-toggle .bs-caret {
        position: absolute;
        right: -6px !important;
    }
    .custom-datepicker { 
        margin: 0 0 14px 0;
    }

}
@media only screen and (max-width: 640px) {
    /* style 3 css */
    .filter_alert_wrap .alert-btns{ 
        margin-right: 8px;
    }
    .list_items_wrap .left-block button,
    .list_items_wrap .left-block .orange-btn {
        margin-right: 8px;
        min-width: 125px;
    }
    .filter_alert_wrap .pagination-btn a{
        margin: 0 3px;
    }
    .alert_form_wrap .bottom-rows a,
    .alert_form_wrap .bottom-rows .btn-group{
        margin-right: 10px;
    }
    .dataTables_length {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 639px) {
    .settings-edit-list .settings-label{
        padding-left: 20px;
        padding-right: 0;
        max-width: 170px;
    }
    .buttons-row .btn-wrapper{
        margin-left: 170px;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 539px){
    .right-header{
        padding: 0 25px;
    }
    .right-content-wrapper{
        padding: 25px;
    }
    .white-box{
        padding: 15px;
    }
    .settings-wrapper{
        padding-right: 10px;
    }
    .upload-data-box{
        margin-top: 30px;
    }
    .fileUpload,
    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
    .category-picker,
    .clients-picker,
    .settings-form .orange-btn{
        width: 100%;
        margin: 0 auto 10px auto;
    }
    .settings-label,
    .settings-value{
        width: 100%;
    }
    .settings-wrapper ul li .settings-label{
        width: 100%;
    }
    .settings-wrapper ul li:first-child h4{
        font-size: 14px;
    }
    .user-img-wrapper img{
        height: 80px;
        width: 80px;
        margin-right: 20px;
    }
    .settings-wrapper ul li:first-child a img{
        margin-right: 0;
        width: 13px;
    }
    .right-header{
        height: auto;
    }
    .right-header,
    .right-header > .title{
        display: block;
        float: left;
        width: 100%;
        margin-top: 15px;
    }
    .right-header > .dropdown-wrapper{
        display: block;
        float: left;
        margin: 10px 0 15px 0;
    }
    .side-body{
        margin-top: 45px;
    }
    .right-header, .right-header > .title{
        text-align: center;
    }
    .dropdown-wrapper{
        float: left;
        width: 100%;
        display: block;
    }
    .master-account-wrapper{
        float: left;
    }
    .setting-input-wrapper{
        width: 100%;
        margin-top: 10px;
    }
    .settings-edit-list .settings-label{
        width: 100%;
        text-align: left;
    }
    .settings-edit-list li:not(:first-child){
        padding: 15px 15px 0 15px !important;
    }
    .buttons-row .btn-wrapper{
        margin-left: 0;
        margin-bottom: 10px;
    }
    .buttons-row .btn-wrapper .btn{
        margin-right: 5px;
    }

    /* style 2 css */
    .user_info_wrap, .welcome_user_wrap {
        float: left;
        width: 100%;
        text-align: center;
    }

    /* template create page css */
    .template-create-form-wrapper ul.template-create-list li,
    .template-create-form-wrapper ul.template-create-list li:first-child{
        padding: 2px 10px;
    }
}

@media only screen and (max-width: 480px) {
    .logo-wrapper img {
        margin-top: 60px;
        max-width: 170px;
    }
    .user-img-wrapper img{
        height: 65px;
        width: 65px;
        margin-right: 10px;
    }
    /* style 3 css */
    .list_items_wrap .white-box{
        padding: 15px 15px 0;
    }
    .filter_alert_wrap .form-group{
        width: 100%;
    }
    .filter_alert_wrap .alert-btns {
        float: left;
        margin-bottom: 15px;
        margin-right: 20px;
        min-width: calc(50% - 10px);
        position: relative;
    }
    .filter_alert_wrap .checkbox{
        margin-right: 0px;
    }
    .filter_alert_wrap .checkbox label{
        display: block;
        padding-left: 0px;
    }
    .filter_alert_wrap .checkbox label .cr{
        float: none;
        margin: 0 auto;
        display: block;
    }
    .filter_alert_wrap .custom-pagination {
        min-width: calc(50% - 10px);
    }
    .filter_alert_wrap .custom-pagination li a{
        width: 25%;
        padding: 0;
        text-align: center;
    }
    .filter_alert_wrap .custom-pagination li a img{
        width: 9px;
    }
    .list_items_wrap .left-block {
        width: 100%;
        padding-top: 0px;
        /*padding-bottom: 20px;*/
    }
    .list_items_wrap .left-block button,
    .list_items_wrap .left-block .orange-btn {
        display: block;
        float: none;
        margin: 0 auto 10px;
        max-width: 220px;
        position: relative;
        width: 100%;
    }
    .alert_form_wrap form textarea{
        margin-top: 10px;
    }
    .alert_form_wrap .bottom-rows a,
    .alert_form_wrap .bottom-rows .btn-group{
        margin-right: 5px;
        margin-bottom: 8px;
    }
    .detail-modal .modal-body .table-responsive td:first-child{
        max-width: 38px;
    }
    .filter_alert_wrap .user-alert{
        width: calc(50% - 10px);
        margin-right: 20px;
    }
    .filter_alert_wrap .delete1{
        margin-right: 0px;
    }
    .filter_alert_wrap  .user_pagination{
        clear: both;
        display: block;
        float: none;
        margin: 0 auto !important;
        min-width: calc(50% - 10px);
        position: relative;
        width: 50%;
    }
    .list_items_wrap .user-left-block{
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 479px) {
    .submit-btn {
        font-size: 16px;
    }
    .custom-form {
        padding: 28px 22px 22px 22px;
    }
    .logo-wrapper img {
        margin-top: 40px;
        max-width: 150px;
    }
    .sidebar-logo-wrapper{
        width: calc(100% - 117px);
        padding-bottom: 8px;
    }
    .sidebar-logo-wrapper a,
    .sidebar-logo-wrapper p,
    .sidebar-logo-wrapper small{
        float: left;
        width: 100%;
        text-align: center;
    }
    .sidebar-logo-wrapper small a{
        float: left;
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 5px;
    }
    .side-body{
        margin-top: 98px;
    }
    .side-menu-container > .navbar-nav{
        /*top: 114px;*/
        top: 91px;
    }

    /* template create page css */
    .template-data-upload-list .buttons-row .btn-wrapper .btn{
        float: none;
        display: block;
        width: 100%;
        max-width: 180px;
        margin: 12px auto;
    }
}
@media only screen and (max-width: 360px) {
    /* style 3 css */
    .filter_alert_wrap .pagination-btn a{
        margin: 0 1px;
    }
}
@media only screen and (max-width: 359px){
    .right-header > .dropdown-wrapper a{
        font-size: 12px;
    }
}
/*# sourceMappingURL=style.css.map */