@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700|Roboto:300,400,500,700");
      html,
      html a,
      body {
          -webkit-font-smoothing: antialiased;
      }
      
      html,
      body {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 14px;
          background-color: #f6f7fb;
          color: #888da8;
          line-height: 1.5;
          letter-spacing: 0.2px;
          overflow-x: hidden;
      }
      
      h4 {
          font-size: 18px;
      }
      /*    
    .row {
        float: left;
        position: relative;
        width: 100%;
    }*/
      
      .h-100 {
          height: 100%;
      }
      
      .w-100 {
          width: 100%;
      }
      
      .hide {
          display: none;
      }
      
      .btn {
          font-size: 14px;
          border-radius: 6px;
      }
      
      .f-bold {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: bold !important;
      }
      
      .form-control {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          border: 1px solid #e6ecf5;
          border-radius: 2px;
          box-shadow: none;
          height: 42px;
          font-size: 14px;
          color: #888da8;
          transition: all 0.2s ease-in;
          -webkit-transition: all 0.2s ease-in;
          -moz-transition: all 0.2s ease-in;
          -o-transition: all 0.2s ease-in;
          -ms-transition: all 0.2s ease-in;
      }
      
      .custom-form-control {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 14px;
          color: #888da8;
      }
      
      .custom-form-control:focus {
          border-color: #0f9aee;
          color: #888da8;
      }
      
      .input-sm {
          height: 30px;
          line-height: 1.5;
          font-size: 12px;
          border-radius: 3px;
          padding: 5px 10px;
      }
      
      .mrg-top-15 {
          margin-top: 15px;
      }
      
      .info-wrapper {
          margin-top: -30px;
      }
      
      .custom-btn {
          border: 1px solid #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          border-radius: 6px;
      }
      
      .blue-btn {
          background-color: #0f9aee;
          border-color: #0f9aee;
          color: #fff !important;
      }
      
      .blue-btn:hover,
      .blue-btn:focus {
          color: #ffffff;
          background-color: #25a4f1;
          border-color: #25a4f1;
      }
      
      .grey-btn {
          color: #384655;
          background-color: #d5dde4;
      }
      
      .grey-btn:hover,
      .grey-btn:focus {
          color: #384655;
          background-color: #ced7df;
          box-shadow: none !important;
      }
      
      .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"] {
          position: absolute;
          top: -99999999;
          visibility: hidden;
      }
      
      .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;
      }
      /* bootstrap data table css start  */
      
      .white-box-wrapper .vuetable tr td a,
      .table tr td a {
          font-weight: 600;
          color: #0f9aee;
      }
      
      .templates-table a:hover,
      .templates-table a:focus {
          color: #888da8;
      }
      
      .list_items_wrap .right-block table tr td label {
          margin-bottom: 0;
      }
      
      .table-form-control {
          margin-bottom: 10px;
          float: right;
          max-width: 240px;
          height: 35px;
      }
      
      .table-title {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: 500;
          color: #515365;
          font-size: 20px;
      }
      /* Bootstrap select css */
      
      .dropdown-menu {
          font-size: 14px;
      }
      
      .dropdown-toggle::after {
          display: none;
      }
      
      .bootstrap-select.btn-group .dropdown-toggle .caret ::after {
          display: none;
      }
      
      .open>.dropdown-menu {
          display: block;
      }
      
      .hidden {
          visibility: hidden!important;
          display: none;
      }
      
      .dropdown-menu>li>a {
          padding: 3px 20px;
      }
      
      .custom-dropdown {
          background-color: #fff;
          padding: 0;
          width: 100%;
          float: left;
          position: relative;
      }
      
      .custom-dropdown .bootstrap-select {
          width: 100%;
      }
      
      .bootstrap-select.btn-group .dropdown-menu li:hover,
      .bootstrap-select.btn-group .dropdown-menu li:focus {
          background-color: #0f9aee;
          color: #fff;
      }
      
      .bootstrap-select.btn-group .dropdown-menu li:hover,
      .bootstrap-select.btn-group .dropdown-menu li:focus {
          color: #fff;
      }
      
      .setting-sales-box {
          border: 1px solid #e6ecf5;
          background-color: #fff;
          box-shadow: none;
          width: 100%;
          border-radius: 0px;
          position: relative;
          padding: 8px 30px 10px 15px;
          color: #515365 !important;
          margin-right: 10px;
      }
      
      .custom-dropdown .bootstrap-select .btn {
          border: 1px solid #e6ecf5;
          background-color: #fff;
          box-shadow: none;
          width: 100%;
          border-radius: 0px;
          position: relative;
          padding: 10px 30px 10px 15px;
          color: #515365 !important;
      }
      
      .custom-dropdown .bootstrap-select .btn .filter-option {
          color: #515365 !important;
      }
      
      .custom-dropdown .bootstrap-select .btn:focus,
      .custom-dropdown .bootstrap-select .btn:active,
      .custom-dropdown .bootstrap-select .btn:hover {
          outline: none !important;
          box-shadow: none !important;
          border-color: #ddd;
      }
      
      .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
          width: 220px;
      }
      
      .user-dropdown-wrapper .bootstrap-select>.dropdown-toggle,
      .order-dropdown-wrapper .bootstrap-select>.dropdown-toggle,
      .clients-picker.bootstrap-select>.dropdown-toggle,
      .channel-picker.bootstrap-select>.dropdown-toggle,
      .template-picker.bootstrap-select>.dropdown-toggle,
      .clients-picker-wrap.bootstrap-select>.dropdown-toggle,
      .channel-picker-wrap.bootstrap-select>.dropdown-toggle,
      .template-picker.bootstrap-select>.dropdown-toggle,
      .market_picker.bootstrap-select>.dropdown-toggle,
      .client_picker.bootstrap-select>.dropdown-toggle,
      .category_picker.bootstrap-select>.dropdown-toggle,
      .subcategory_picker.bootstrap-select>.dropdown-toggle,
      .credential_picker.bootstrap-select>.dropdown-toggle {
          border: 1px solid #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          border-radius: 2px;
      }
      
      .order-dropdown-wrapper .bootstrap-select>.dropdown-toggle {
          width: 105px !important;
      }
      
      .dropdown-menu {
          border-radius: 2px;
      }
      
      .market_picker.bootstrap-select>.dropdown-toggle,
      .client_picker.bootstrap-select>.dropdown-toggle,
      .category_picker.bootstrap-select>.dropdown-toggle,
      .subcategory_picker.bootstrap-select>.dropdown-toggle,
      .credential_picker.bootstrap-select>.dropdown-toggle {
          width: 100%;
      }
      /* multiselect css start*/
      
      .multiselect-all>label.checkbox {
          padding: 1px 30px 0 0 !important;
      }
      
      .multiselect-container>li>a>label {
          background-color: transparent !important;
      }
      
      .multiselect-container>li>a>label>input[type="checkbox"] {
          margin-bottom: 0;
          margin-top: 5px;
      }
      
      .multiselect-container>li.multiselect-item>a:after {
          right: 5px;
          top: -11px;
      }
      
      .multiselect-item b {
          width: 90%;
      }
      
      .multiselect.dropdown-toggle {
          border-radius: 2px;
          color: #4f5f6f;
          border: 1px solid #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          padding: 8px 38px 8px 24px;
          width: auto;
      }
      
      .multiselect-container>li.multiselect-item {
          margin-left: 0px;
      }
      
      .multiselect-container>li.multiselect-item>a:after {
          color: #0f9aee;
      }
      
      .multiselect-container li.apply-btn-wrap,
      .multiselect-container li.apply-btn-wrap.active {
          border-top: 1px solid #0f9aee;
      }
      /* custom datepicker css start */
      
      .datepicker-dropdown {
          padding: 25px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
      
      .datepicker-dropdown table tr th,
      .datepicker-dropdown table tr td {
          border-radius: 0px;
          width: 40px;
          height: 35px;
          text-align: center;
      }
      
      .custom-datepicker {
          border-color: #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          border-radius: 2px;
          position: relative;
      }
      
      .custom-datepicker i {
          margin-top: 8px;
          position: absolute;
          right: 5px;
          top: 8px;
      }
      
      .ranges li {
          color: #0f9aee;
      }
      
      .ranges li.active {
          background-color: #0f9aee;
          border-color: #0f9aee;
      }
      
      .ranges li:hover {
          background-color: #0f9aee;
          border: 1px solid #0f9aee;
          color: #fff;
      }
      
      .daterangepicker .input-mini.active {
          border-color: #0f9aee;
      }
      
      .daterangepicker td.active,
      .daterangepicker td.active:hover {
          background-color: #0f9aee;
      }
      
      .ranges ul li:nth-child(8):hover,
      .ranges ul li:nth-child(9):hover {
          background-color: #ddeffa !important;
      }
      
      .daterangepicker td.in-range {
          background-color: #f4fafe;
      }
      
      .daterangepicker td.in-range:hover {
          color: #888da8;
          background-color: #cfe9fa;
      }
      
      .daterangepicker_input input {
          float: left !important;
          width: 110px !important;
          margin-left: 3px !important;
          padding: 0 5px 0 24px !important;
          margin-bottom: 0 !important;
      }
      /* pagination css start */
      
      .pagination>.active>a,
      .pagination>.active>a:focus,
      .pagination>.active>a:hover,
      .pagination>.active>span,
      .pagination>.active>span:focus,
      .pagination>.active>span:hover {
          background-color: transparent !important;
          border: none !important;
          padding: none;
          text-decoration: none !important;
      }
      
      .dataTables_paginate .paginate_button,
      .custom-table-pagination li {
          color: #888da8 !important;
          padding: 6px 9px;
          border-radius: 50%;
          margin-right: 10px;
          transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
      }
      
      .dataTables_paginate .paginate_button a,
      .custom-table-pagination li {
          color: #888da8 !important;
      }
      
      .dataTables_paginate .paginate_button.next,
      .dataTables_paginate .paginate_button.previous,
      .dataTables_paginate .paginate_button.first,
      .dataTables_paginate .paginate_button.last,
      .custom-table-pagination li:first-child,
      .custom-table-pagination li:last-child {
          border-radius: 4px;
      }
      
      .dataTables_paginate .paginate_button.next:hover,
      .dataTables_paginate .paginate_button.next:focus,
      .dataTables_paginate .paginate_button.previous:hover,
      .dataTables_paginate .paginate_button.previous:focus,
      .dataTables_paginate .paginate_button.first:hover,
      .dataTables_paginate .paginate_button.first:focus,
      .dataTables_paginate .paginate_button.last:hover,
      .dataTables_paginate .paginate_button.last:focus,
      .custom-table-pagination li:first-child:hover,
      .custom-table-pagination li:first-child:focus,
      .custom-table-pagination li:last-child:hover,
      .custom-table-pagination li:last-child:focus {
          color: #888da8 !important;
          background: #888da8;
          /* The Fallback */
          background: rgba(136, 141, 168, 0.15);
          border-color: white;
          text-decoration: none !important;
      }
      
      .dataTables_paginate .paginate_button.next.disabled,
      .dataTables_paginate .paginate_button.previous.disabled,
      .dataTables_paginate .paginate_button.first.disabled,
      .dataTables_paginate .paginate_button.last.disabled {
          opacity: 0.4;
      }
      
      .dataTables_paginate .paginate_button.next.disabled:hover,
      .dataTables_paginate .paginate_button.next.disabled:focus,
      .dataTables_paginate .paginate_button.previous.disabled:hover,
      .dataTables_paginate .paginate_button.previous.disabled:focus,
      .dataTables_paginate .paginate_button.first.disabled:hover,
      .dataTables_paginate .paginate_button.first.disabled:focus,
      .dataTables_paginate .paginate_button.last.disabled:hover,
      .dataTables_paginate .paginate_button.last.disabled:focus {
          color: #888da8 !important;
          background: transparent;
          border-color: transparent;
      }
      
      .dataTables_paginate .paginate_button,
      .custom-table-pagination li {
          padding: 3px 9px;
      }
      
      .dataTables_paginate .paginate_button:hover,
      .custom-table-pagination li:hover {
          color: #888da8 !important;
          background: #96d7fe;
          /*border: 1px solid #b7b5f2;*/
          text-decoration: none !important;
      }
      
      .dataTables_paginate .paginate_button.active,
      .custom-table-pagination li.active {
          color: #ffffff !important;
          background-color: #0f9aee !important;
          border: 1px solid #0f9aee;
      }
      
      .dataTables_paginate .paginate_button.active a,
      .custom-table-pagination li.active a {
          color: #ffffff !important;
      }
      
      .dataTables_paginate .paginate_button.active a:hover,
      .custom-table-pagination li.active a:hover {
          color: #ffffff !important;
          background: #25a4f1;
          border: 1px solid #25a4f1;
      }
      /* pagination css end*/
      /* Bootstrap modal css start */
      
      .modal-backdrop.fade,
      .modal-backdrop.in {
          opacity: 0.5;
          background: rgba(0, 0, 0, 0.5);
      }
      
      .fade:not(.show) {
          opacity: 1;
      }
      
      .fade .in {
          opacity: 1;
      }
      
      .modal.in .modal-dialog {
          -webkit-transform: translate(0, 0);
          -o-transform: translate(0, 0);
          transform: translate(0, 0);
      }
      /* Bootstrap Modal css end*/
      /* Sweet alert css start */
      
      .swal2-modal button.swal2-styled {
          font-size: 14px;
          padding: 8px 28px;
          border-radius: 6px;
          margin-top: 5px;
      }
      
      .swal2-confirm {
          background-color: #0f9aee !important;
          border-left-color: #0f9aee !important;
          border-right-color: #0f9aee !important;
      }
      /* Sweet alert css end */
      /* login page css start*/
      
      .bottom-img {
          position: fixed;
          bottom: 0;
          left: 0;
      }
      
      .login-logo {
          padding: 50px;
      }
      
      .login-left-section {
          background-color: rgba(0, 0, 0, 0.15);
          min-height: 100vh;
      }
      
      .login-right-section {
          float: left;
          position: relative;
          background-color: #fff;
          width: 100%;
          align-items: center;
          display: flex;
          vertical-align: middle;
          min-height: 100vh;
      }
      
      .login-right-section .custom-form .checkbox label .cr {
          border-color: #0f9aee;
      }
      
      .login-right-section .custom-form {
          background-color: transparent;
          border-radius: 0px;
          box-shadow: none;
          border: none;
          max-width: 85%;
          margin: 0 auto;
          vertical-align: middle;
          width: 100%;
      }
      
      .login-right-section .custom-form h4 {
          color: #515365;
      }
      
      .custom-form .form-control:focus {
          box-shadow: none;
          border-color: #0f9aee;
      }
      /* Side menu css start */
      
      .side-nav {
          width: 280px;
          background-color: #313644;
          z-index: 1000;
          top: 0px;
          bottom: 0px;
          position: fixed;
          overflow: hidden;
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
      }
      
      @media print {
          .side-nav {
              display: none;
          }
      }
      
      .side-nav .side-nav-inner {
          position: relative;
          height: 100%;
      }
      
      .side-nav .side-nav-inner .side-nav-logo {
          padding: 0px 20px;
          /*border-bottom: 1px solid #e6ecf5;*/
          border-right: 1px solid #e6ecf5;
          line-height: 0;
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
      }
      
      .side-nav .side-nav-inner .side-nav-logo>a {
          display: inline-block;
          max-width: 150px;
          width: 100%;
      }
      
      .side-nav .side-nav-inner .side-nav-logo>a .logo {
          background-repeat: no-repeat;
          background-position: center left;
          display: inline-block;
          width: 100%;
          min-height: calc(65px - 1px);
      }
      
      .side-nav .side-nav-inner .side-nav-logo>a .logo.logo-white {
          display: none;
      }
      
      .side-nav .side-nav-inner .side-nav-logo .mobile-toggle {
          display: none;
          float: right;
          line-height: calc(65px - 1px);
          font-size: 18px;
      }
      
      .side-nav .side-nav-inner .side-nav-logo .mobile-toggle a {
          color: #888da8;
      }
      
      @media only screen and (max-width: 992px) {
          .side-nav .side-nav-inner .side-nav-logo .mobile-toggle {
              display: inline-block;
          }
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .side-nav .side-nav-inner .side-nav-logo .mobile-toggle {
              display: none;
          }
      }
      
      .side-nav .side-nav-inner .side-nav-menu {
          position: relative;
          list-style: none;
          margin: 0;
          padding: 0;
          overflow: auto;
          border-right: 1px solid #e6ecf5;
          height: calc(100vh - 65px);
      }
      
      .side-nav .side-nav-inner .ps--active-y>.ps__rail-y {
          left: 0 !important;
      }
      
      .side-nav .side-nav-inner .side-nav-menu:before,
      .side-nav .side-nav-inner .side-nav-menu:after {
          content: " ";
          display: table;
      }
      
      .side-nav .side-nav-inner .side-nav-menu:after {
          clear: both;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li {
          position: relative;
          display: block;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown .arrow {
          position: absolute;
          right: 25px;
          line-height: 40px;
          font-size: 10px;
          transition: all 0.05s ease-in;
          -webkit-transition: all 0.05s ease-in;
          -moz-transition: all 0.05s ease-in;
          -o-transition: all 0.05s ease-in;
          -ms-transition: all 0.05s ease-in;
      }
      
      @media only screen and (max-width: 992px) {
          .side-nav .side-nav-inner .side-nav-menu li.dropdown .arrow {
              right: 25px;
          }
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>a {
          color: #99abb4;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>a .icon-holder {
          color: #0f9aee;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>a>.arrow {
          transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>.dropdown-menu {
          display: block;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>.dropdown-menu .dropdown-menu {
          padding-left: 20px;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li.dropdown.open>.dropdown-menu .arrow {
          line-height: 25px;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li a {
          color: #99abb4;
          transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li a:hover,
      .side-nav .side-nav-inner .side-nav-menu li a:focus {
          text-decoration: none;
          color: #fff;
          background-color: #464e62;
      }
      
      .is-collapsed .side-nav .side-nav-inner .side-nav-menu li a:hover,
      .is-collapsed .side-nav .side-nav-inner .side-nav-menu li a:focus {
          background-color: transparent;
          color: #99abb4;
      }
      
      .side-nav .side-nav-inner .side-nav-menu li a:hover .icon-holder,
      .side-nav .side-nav-inner .side-nav-menu li a:focus .icon-holder {
          color: #0f9aee;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu {
          position: relative;
          width: 100%;
          box-shadow: none;
          border: 0px;
          border-radius: 0;
          padding-left: 50px;
          padding-top: 0px;
          background-color: transparent;
          float: none;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a {
          padding: 10px 15px;
          display: block;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a:hover,
      .side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a:focus {
          background-color: transparent;
          color: #99abb4;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li.active a {
          color: #99abb4;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li>a {
          position: relative;
          display: block;
          padding: 10px 15px;
          font-weight: 400;
          font-size: 15px;
          white-space: nowrap;
          border-bottom: 1px solid transparent;
      }
      
      .side-nav .side-nav-inner .side-nav-menu>li>a .icon-holder {
          display: inline-block;
          height: 35px;
          width: 35px;
          line-height: 35px;
          text-align: center;
          position: relative;
          left: 0;
          margin-right: 14px;
          font-size: 17px;
          border-radius: 6px;
          transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
      }
      
      .hover-submenu {
          float: left;
          display: none;
          z-index: 9999;
          width: 180px;
          left: 70px;
          /* top: 189px; */
          position: absolute;
          background-color: #fefefe;
          border: 1px solid #e6ecf5;
          border-radius: 5px;
          transition: all 0.3s ease-in-out;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -webkit-box-shadow: 0 2px 9px rgba(139, 157, 175, .61);
          box-shadow: 0 2px 4px rgba(139, 157, 175, .5);
      }
      
      .sidehover-menu {
          float: left;
          display: none;
          z-index: 9999;
          width: 205px;
          left: 69px;
          /* top: 70px; */
          position: absolute;
          background-color: #464e62;
          border: 1px solid #464e62;
          border-radius: 0;
          transition: all 0.3s ease-in-out;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -webkit-box-shadow: none;
          box-shadow: none;
      }
      
      .hover-submenu ul,
      .sidehover-menu ul {
          list-style: none;
          margin-bottom: 0;
          padding-left: 0;
      }
      
      .hover-submenu ul li a,
      .sidehover-menu ul li a {
          float: left;
          position: relative;
          width: 100%;
          color: #fff;
          padding: 16px 15px;
      }
      
      .hover-submenu ul li a:hover,
      .hover-submenu ul li a:focus,
      .sidehover-menu ul li a:hover,
      .sidehover-menu ul li a:focus {
          /* background-color: #313644; */
          color: #fff;
          text-decoration: none;
      }
      /* .dashboard-menu {
          top: 80px;
      }
      
      .alert-menu {
          top: 138px;
      }
      
      .hover-submenu {
          top: 195px;
      }
      
      .credentials-menu {
          top: 246px;
      }
      
      .customer-crm-menu {
          top: 295px;
      } */
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .side-nav {
              width: 70px;
          }
          .side-nav .side-nav-inner .side-nav-logo {
              border-bottom: 1px solid transparent;
              padding: 0px;
          }
          .side-nav .side-nav-inner .side-nav-logo a .logo {
              width: 70px;
              background-position: center center;
          }
          .side-nav .side-nav-inner .side-nav-logo a .logo-dark {
              background-image: url("../images/logo/logo-sm.png") !important;
          }
          .side-nav .side-nav-inner .side-nav-logo a .logo-white {
              background-image: url("../images/logo/logo-white-sm.png") !important;
          }
          .side-nav .side-nav-inner .side-nav-menu {
              /* overflow-x: hidden; */
          }
          .side-nav .side-nav-inner .side-nav-menu>li>a .title {
              display: none;
          }
          .side-nav .side-nav-inner .side-nav-menu li.dropdown .arrow {
              opacity: 0;
          }
          .side-nav .side-nav-inner .side-nav-menu li.dropdown.open ul.dropdown-menu {
              display: none !important;
          }
          /*.side-nav:hover {
              width: 280px;
          }
          .side-nav:hover .side-nav-inner .side-nav-logo {
              padding: 0px 20px;
          }
          .side-nav:hover .side-nav-inner .side-nav-logo a .logo {
              width: 150px;
              background-position: center left;
          }
          .side-nav:hover .side-nav-inner .side-nav-logo a .logo-dark {
              background-image: url("../images/logo/logo.png") !important;
          }
          .side-nav:hover .side-nav-inner .side-nav-logo a .logo-white {
              background-image: url("../images/logo/logo-white.png") !important;
          }
          .side-nav:hover .side-nav-inner .side-nav-menu>li>a .title {
              display: inline-block;
          }
          .side-nav:hover .side-nav-inner .side-nav-menu li.dropdown .arrow {
              opacity: 1;
          }
          .side-nav:hover .side-nav-inner .side-nav-menu li.open>ul.dropdown-menu {
              display: block !important;
          }*/
      }
      
      @media only screen and (max-width: 992px) {
          .side-nav {
              left: -280px;
              width: calc(280px - 30px);
          }
      }
      
      @media only screen and (min-width: 1920px) {
          .is-collapsed .side-nav {
              width: 70px;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo {
              border-bottom: 1px solid transparent;
              padding: 0px;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo {
              width: 70px;
              background-position: center center;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo-dark {
              background-image: url("../images/logo/logo-sm.png") !important;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo-white {
              background-image: url("../images/logo/logo-white-sm.png") !important;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu {
              overflow-x: hidden;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu>li>a .title {
              display: none;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu li.dropdown .arrow {
              opacity: 0;
          }
          /*.is-collapsed .side-nav .side-nav-inner .side-nav-menu li.dropdown.open ul.dropdown-menu {
              display: none !important;
          }
          .is-collapsed .side-nav:hover {
              width: 280px;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-logo {
              padding: 0px 20px;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-logo a .logo {
              width: 150px;
              background-position: center left;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-logo a .logo-dark {
              background-image: url("../images/logo/logo.png") !important;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-logo a .logo-white {
              background-image: url("../images/logo/logo-white.png") !important;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-menu>li>a .title {
              display: inline-block;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-menu li.dropdown .arrow {
              opacity: 1;
          }
          .is-collapsed .side-nav:hover .side-nav-inner .side-nav-menu li.open>ul.dropdown-menu {
              display: block !important;
          }*/
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .is-collapsed .side-nav {
              width: 280px;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo {
              padding: 0px 20px;
              /*border-bottom: 1px solid #e6ecf5;*/
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo {
              width: 150px;
              background-position: center left;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo-dark {
              background-image: url("../images/logo/logo.png") !important;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-logo>a .logo-white {
              background-image: url("../images/logo/logo-white.png") !important;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu>li>a .title {
              display: inline-block;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu li.dropdown .arrow {
              opacity: 1;
          }
          .is-collapsed .side-nav .side-nav-inner .side-nav-menu li.open>ul.dropdown-menu {
              display: block !important;
          }
      }
      
      .nav-mobile {
          display: none !important;
      }
      
      .nav-right {
          margin-right: 15px;
      }
      
      .side-nav .side-nav-inner .custom-side-nav-logo {
          margin: 0 auto;
          padding: 0px 5px;
          /*border-bottom: 1px solid #e6ecf5;*/
          height: 75px;
          line-height: 75px;
          border-right-color: transparent;
          background-color: #464e62;
      }
      
      .side-nav .side-nav-inner .custom-side-nav-logo>a {
          display: block;
          padding: 0rem 0px;
          max-width: 166px;
          width: 100%;
          /* margin: 0px auto; */
      }
      
      .side-nav:hover .side-nav-inner .custom-side-nav-logo {
          /*padding: 0.598rem 20px !important;*/
          /*border-bottom-color: transparent;*/
      }
      
      .side-nav:hover .side-nav-inner .custom-side-nav-logo>a {
          /*padding: 0.72rem 20px;*/
      }
      
      .side-nav .side-nav-inner .custom-side-nav-logo>a>img {
          width: 100%;
      }
      /* right sidebar css start */
      
      .page-container {
          min-height: 100vh;
          padding-left: 280px;
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
      }
      
      @media print {
          .page-container {
              padding-left: 0px;
          }
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .page-container {
              padding-left: 70px;
          }
      }
      
      @media only screen and (max-width: 992px) {
          .page-container {
              padding-left: 0px;
          }
      }
      
      .page-container .main-content {
          padding: 95px 15px 15px 15px;
          min-height: calc(100vh - 60px);
      }
      
      @media print {
          .page-container .main-content {
              padding: 10px 0px;
          }
      }
      
      @media only screen and (max-width: 992px) {
          .page-container .main-content {
              padding: 85px 5px 5px 5px;
          }
      }
      
      .full-container {
          position: absolute;
          top: 65px;
          left: 280px;
          right: 0px;
          min-height: calc(100vh - 65px);
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .full-container {
              padding-left: 70px;
              left: 0px;
          }
      }
      
      @media only screen and (max-width: 992px) {
          .full-container {
              left: 0px;
          }
      }
      
      .is-collapsed .page-container {
          padding-left: 70px;
      }
      
      @media only screen and (max-width: 992px) {
          .is-collapsed .page-container {
              padding-left: 0px;
          }
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .is-collapsed .page-container {
              padding-left: 280px;
          }
      }
      
      .is-collapsed .full-container {
          left: 70px;
      }
      
      @media only screen and (max-width: 992px) {
          .is-collapsed .full-container {
              left: 0px;
          }
      }
      
      @media only screen and (min-width: 992px) and (max-width: 1920px) {
          .is-collapsed .full-container {
              left: 280px;
              padding-left: 0px;
          }
          .is-collapsed .page-container .right-header {
              width: calc(100% - 296px);
          }
      }
      /* top menu css start */
      
      .right-header {
          background-color: #464e62;
          border-bottom: none;
          color: #fff;
          position: fixed;
          z-index: 800;
          padding: 4px 30px;
          height: 75px !important;
          width: calc(100% - 86px);
      }
      
      .right-header>.title {
          font-size: 24px;
      }
      
      .right-header>.dropdown-wrapper .thumb-wrap .thumb {
          height: 35px;
          width: 35px;
          border-radius: 50%;
          background-color: #999;
      }
      
      .right-header>.dropdown-wrapper a {
          color: #fff;
          font-size: 18px;
      }
      
      .right-header>.dropdown-wrapper>.master-account-wrapper small a {
          font-size: 12px;
          color: #fff;
          opacity: 1;
      }
      
      .right-header>.dropdown-wrapper a:hover,
      .right-header>.dropdown-wrapper a:focus {
          color: #0f9aee;
          outline: none !important;
      }
      
      .right-header .header-dropdown {
          float: none;
          width: auto;
      }
      
      .right-header .header-dropdown {
          border-radius: 2px;
          border: 1px solid #e6ecf5;
          color: #888da8;
      }
      
      .header-dropdown.custom-dropdown .bootstrap-select .btn {
          padding: 8px;
      }
      
      .header-dropdown.custom-dropdown .dropdown-menu li a {
          font-size: 12px;
      }
      
      .user_info_wrap p {
          font-family: 'opensansregularwebfont';
          font-size: 16px;
          margin-bottom: 0;
      }
      
      .user_wrap {
          font-size: 12px;
          font-weight: normal;
      }
      
      .user_info_wrap {
          padding-bottom: 1px;
      }
      
      .welcome_user_wrap {
          padding-top: 2px;
      }
      
      .right-header>.dropdown-wrapper a {
          font-size: 14px;
      }
      /**
 * Highchart tooltip related css
 */
      
      .highcharts-tooltip-box {
          fill: #0f9aee;
      }
      
      .highcharts-tooltip text {
          fill: white !important;
      }
      
      #nprogress .bar {
          background: #0f9aee;
      }
      /* Fancy blur effect */
      
      #nprogress .peg {
          box-shadow: 0 0 10px #0f9aee, 0 0 5px #0f9aee;
      }
      /* Remove these to get rid of the spinner */
      
      #nprogress .spinner-icon {
          border-top-color: #0f9aee;
          border-left-color: #0f9aee;
      }
      /* main content css start */
      
      .side-body {
          margin-left: 0px;
      }
      
      .right-header>.title {
          font-size: 14px;
          vertical-align: middle;
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          color: #fff;
          letter-spacing: 0.5px;
          font-weight: normal;
          line-height: 1.5;
      }
      
      .right-header>.title span {
          line-height: 14px;
      }
      
      .right-header>.title a {
          padding: 0 15px 0 0;
          line-height: 65px;
          min-height: 65px;
          color: #fff;
          /*display: block;*/
          transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
      }
      
      .right-header>.title a:hover,
      .right-header>.title a:focus {
          text-decoration: none !important;
      }
      
      .right-header>.title a i {
          font-size: 18px;
      }
      
      .right-header>.title a i:hover,
      .right-header>.title a i:focus {
          text-decoration: none !important;
      }
      
      .white-box {
          position: relative;
          background-color: #fefefe;
          margin-bottom: 30px;
          border: 1px solid #e6ecf5;
          border-radius: 5px;
          transition: all 0.3s ease-in-out;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -webkit-box-shadow: 0 2px 9px rgba(139, 157, 175, .61);
          box-shadow: 0 2px 4px rgba(139, 157, 175, .25);
      }
      
      .right-content-wrapper {
          padding: 90px 30px 30px !important;
          /*padding-right: 0 !important;*/
      }
      /* Dashboard page css start */
      
      .filter_data_wrapper {
          padding: 20px 30px;
      }
      
      .brand_title {
          background-color: #f3f3f3;
          color: #515365;
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 14px;
          border: 1px solid #e6ecf5;
          font-weight: 500;
      }
      
      .dahboard-title {
          font-size: 20px;
          color: #515365;
          margin-bottom: 0;
      }
      
      .table .th,
      .table .td {
          vertical-align: middle;
      }
      
      table.dataTable thead>tr>th {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: bold;
          font-size: 14px;
          color: #515365;
      }
      
      .page_title_wrap .title,
      .keystats_box_title {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          /*font-weight: bold;*/
      }
      
      .filter_data_wrap p.applied_filters {
          margin: 25px 0 0px !important;
          border-top: 1px solid #e3e9ee;
          float: left;
          position: relative;
          width: 100%;
      }
      
      .filter_data_wrap .btn-group {
          margin-bottom: 0px;
          float: left;
          position: relative;
          width: auto;
      }
      
      #filterForm .label-primary {
          background-color: #0f9aee;
          padding: 0 5px;
          border-radius: 6px;
          margin-bottom: 0px;
      }
      
      .chart_countbox_wrap {
          display: block;
          margin-bottom: 0px;
          float: left;
          position: relative;
          width: 100%;
      }
      
      .salesbox_wrap {
          margin-bottom: 0;
      }
      
      .prod_keystats_wrap {
          margin-top: 30px;
          margin-bottom: 30px;
          display: block;
      }
      
      #top_product thead .sorting_asc,
      #top_product thead .sorting,
      #top_product thead .sorting_desc,
      #top_category thead .sorting_asc,
      #top_category thead .sorting,
      #top_category thead .sorting_desc,
      #top_city_wrapper thead .sorting_asc,
      #top_city_wrapper thead .sorting,
      #top_city_wrapper thead .sorting_desc,
      #top_state_wrapper thead .sorting_asc,
      #top_state_wrapper thead .sorting,
      #top_state_wrapper thead .sorting_desc {
          background: transparent;
      }
      
      .growth_story_box_wrap .row {
          float: left;
          position: relative;
          width: 100%;
          margin: 0;
      }
      
      .growth_story_box_wrap .row .col-sm-12 {
          padding: 0;
      }
      
      #client_performance_wrapper .dataTables_length,
      #client-credential-table-manager_length,
      #excel-history-table_length label {
          float: left;
      }
      
      #client_performance_length label,
      #excel-history-table_length label,
      #sku_listing_length label,
      #sku_template_listing_length label,
      #client-rating-table_length label,
      #client-credential-table-admin_length label,
      #client-credential-table-manager_length label,
      #client-credential-table-manager_filter label {
          margin-left: 0;
      }
      
      #client_performance_length label select,
      #excel-history-table_length label select,
      #sku_listing_length label select,
      #sku_template_listing_length label select,
      #client-rating-table_length label select,
      #client-credential-table-admin_length label select {
          margin-left: 5px;
          margin-right: 5px;
      }
      
      #client_performance_filter,
      #client-credential-table-manager_filter {
          float: right;
      }
      
      #client_performance_paginate,
      #top_city_paginate,
      #top_state_paginate,
      #top_product_paginate,
      #top_category_paginate,
      #growth_story_paginate {
          float: right;
      }
      
      .keystats_box_title {
          font-size: 18px;
          color: rgb(81, 83, 101);
      }
      
      .prod_countbox_title {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 14px;
          color: #888da8;
          font-weight: normal;
          background-color: #f3f3f3;
      }
      
      .prod_countbox_status {
          border: 1px solid #e6ecf5;
      }
      
      .prod_countbox {
          margin-bottom: 15px;
      }
      
      .prod_countbox_status div {
          background-color: #ebfaeb;
          color: #37c936;
          padding: 3px 9px;
          border-radius: 50px;
          font-size: 14px;
          font-weight: 700;
      }
      
      .prod_countbox_value,
      .sales_countbox_value,
      .prod_countbox_return_value {
          padding: 20px 0 20px 14px;
          font-weight: normal;
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-size: 26px;
          color: #384655;
      }
      
      .sales_countbox_wrap .row .col-sm-6:nth-child(1) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(2) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(3) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(4) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(5) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(6) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(7) .prod_countbox .sales_countbox_value,
      .sales_countbox_wrap .row .col-sm-6:nth-child(8) .prod_countbox .sales_countbox_value {
          color: #515365;
      }
      /* settings page css start */
      
      .block-title {
          margin-top: 25px;
          margin-bottom: 25px;
          font-size: 20px;
          color: #515365;
          font-weight: 400;
          float: left;
          position: relative;
      }
      
      .settings-content-wrap {
          float: left;
          position: relative;
          width: 100%;
      }
      
      .settings-value,
      .settings-wrapper ul li:first-child,
      .upload-data-box .title {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: normal;
          color: #515365;
      }
      
      .setting-edit-btn i {
          font-size: 16px;
      }
      
      #credentialCreateForm .setting-input-wrapper textarea.form-control {
          min-height: 75px;
          resize: none;
      }
      
      x .secondary-menu .menu-item {
          color: #888da8;
          font-weight: 400;
      }
      
      .secondary-menu .menu-item.active {
          color: #384655;
          text-decoration: underline;
      }
      
      .secondary-menu .menu-item:hover,
      .secondary-menu .menu-item:focus {
          color: #0f9aee !important;
      }
      
      .settings-wrapper ul li:first-child {
          border: none;
          padding: 0;
          background-color: #fff;
      }
      
      .contact-wrapper ul li:first-child {
          padding: 0 10px 18px 10px;
          border-bottom: 1px solid #ebebeb;
      }
      
      .settings-edit-list li:not(:first-child) {
          background-color: #fff;
      }
      
      .settings-wrapper ul li:first-child a {
          color: #0f9aee;
      }
      
      .settings-wrapper ul li {
          background-color: #fff;
      }
      
      .error {
          font-weight: normal;
          color: #0f9aee;
      }
      
      .error-alert {
          border-color: #0f9aee;
          background-color: #bde0f6;
          color: #0f9aee;
      }
      
      .error-alert label {
          margin-left: 0;
          color: #0f9aee;
          margin-bottom: 0;
      }
      /* settings page css end */
      /* Import History css start */
      
      #excel-history-table_paginate {
          float: right;
      }
      
      #excel-history-table_filter label {
          float: right;
      }
      /* Import History css end */
      /* Template css start */
      
      .page_title_wrap {
          border-bottom: 1px solid #e3e9ee;
      }
      
      .templates-table a {
          color: #0f9aee;
      }
      
      .filter_alert_wrap .form-group input,
      .filter_alert_wrap .alert-btns {
          border: 1px solid #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          border-radius: 2px;
      }
      
      .filter_alert_wrap .checkbox.alert-btns {
          padding: 10px 15px 10px 5px;
      }
      
      .filter_alert_wrap .alert-btns.delete {
          padding: 6px 0px 10px 35px;
      }
      
      .custom-pagination {
          display: flex;
          border: 1px solid #e6ecf5;
          box-shadow: none;
          background-color: transparent;
          background-image: none;
          border-radius: 2px;
      }
      
      .list_items_wrap .left-block button {
          background-color: #d5dde4;
          color: #384655;
          font-size: 13px;
          border-radius: 6px;
          letter-spacing: 1px;
          font-weight: normal;
          cursor: pointer;
      }
      
      .list_items_wrap .left-block a {
          min-width: 175px;
      }
      
      .active-class-wrapper {
          background-color: #0f9aee !important;
          color: #fff !important;
      }
      
      .list_items_wrap .right-block table tr .modal-td {
          -webkit-appearance: none;
      }
      
      .buttons-row .btn-wrapper .btn {
          border-radius: 2px;
      }
      
      .template-create-box .alert_title,
      .template-list-box .alert_title,
      .upload-data-box .alert_title {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: normal;
          color: #515365;
          margin-top: 10px;
      }
      
      .upload-data-box .rating-btn {
          margin-bottom: 15px;
      }
      
      .template-create-box {
          padding: 30px;
      }
      
      .settings-label {
          color: #888da8;
      }
      
      .template-create-form-wrapper ul.template-create-list li:first-child,
      .template-create-form-wrapper ul.template-create-list li {
          padding: 12px 0;
      }
      
      .setting-input-wrapper .client_picker.bootstrap-select.btn-group .dropdown-menu li:hover,
      .setting-input-wrapper .client_picker.bootstrap-select.btn-group .dropdown-menu li:focus {
          background-color: #f6f7fb;
      }
      
      .setting-input-wrapper input[name="template_name"],
      .setting-input-wrapper input[name="rating_date"] {
          max-width: 100%;
      }
      /* Template css end */
      /* sku management css start */
      
      #sku_listing_length,
      #sku_template_listing_length,
      #client-rating-table_length,
      #client-credential-table-admin_length {
          float: left;
      }
      
      #sku_listing_filter,
      #sku_template_listing_filter,
      #client-rating-table_filter,
      #client-credential-table-admin_filter {
          float: right;
      }
      
      #sku_listing_paginate,
      #sku_template_listing_paginate,
      #client-rating-table_paginate,
      #client-credential-table-admin_paginate {
          float: right;
      }
      
      #sku_template_listing_wrapper,
      #sku_listing_wrapper,
      #client-rating-table_wrapper,
      #client-credential-table-admin_wrapper,
      #excel-history-table_wrapper,
      #client_performance_wrapper,
      #client-credential-table-manager_wrapper {
          display: block;
      }
      
      #client-rating-table {
          width: 100% !important;
      }
      
      #sku_template_listing tbody tr td a {
          color: #0f9aee;
      }
      
      .template-create-form-wrapper ul.template-create-list li .settings-label {
          margin-left: 0
      }
      
      .setting-input-wrapper input[name="f2f_sku"] {
          max-width: 100%;
      }
      /* sku management css end */
      /* client rating , client credentials css start*/
      
      .setting-input-wrapper .alert-btns {
          margin-top: 10px;
      }
      
      .setting-input-wrapper .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
          width: 100%;
      }
      /* client rating , client credentials css end*/
      /* alerts css start */
      
      .list_items_wrap .left-block button,
      .list_items_wrap .left-block .orange-btn {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      }
      
      #sendMailForm .form-group {
          float: left;
          position: relative;
          width: 100%;
      }
      
      .reload-btn {
          border-radius: 4px;
          background-color: #d5dde4;
          color: #384655;
          letter-spacing: 1px;
          font-weight: normal;
          cursor: pointer;
          margin-top: 10px;
      }
      
      .filter_alert_wrap {
          padding-top: 0px;
      }
      
      .alert_form_wrap form input.form-control:focus,
      .alert_form_wrap form textarea:focus {
          box-shadow: none;
          border-color: #0f9aee;
      }
      
      .filter_alert_wrap [type="submit"] {
          -webkit-appearance: none;
      }
      
      #client-credential-table-client_wrapper .row {
          width: 100% !important;
      }
      
      #client-credential-table-client_length {
          float: left;
      }
      
      #client-credential-table-client_filter {
          float: right;
      }
      /* Client dashboard page css start*/
      
      .prod_countbox_wrap .row .col-sm-6:nth-child(1) .prod_countbox,
      .prod_countbox_wrap .row .col-sm-6:nth-child(2) .prod_countbox,
      .prod_countbox_wrap .row .col-sm-6:nth-child(3) .prod_countbox,
      .prod_countbox_wrap .row .col-sm-6:nth-child(4) .prod_countbox,
      .prod_countbox_wrap .row .col-sm-6:nth-child(5) .prod_countbox,
      .prod_countbox_wrap .row .col-sm-6:nth-child(6) .prod_countbox {
          background-color: transparent;
          border: 1px solid #e6ecf5;
          margin-bottom: 15px;
      }
      
      #filterForm .filter-wrapper {
          display: none;
      }
      
      .filter_data_wrap {
          position: relative;
      }
      
      .filter_data_wrap .info-wrapper {
          margin-top: 8px;
      }
      
      .prod_filter_wrap p {
          /*border-top: 1px solid #e3e9ee;*/
          padding-top: 25px;
          margin: 20px 0 0px !important;
      }
      
      .show-filter {
          background-color: #0f9aee;
          padding: 3px 8px;
          border-radius: 6px;
          color: #FFF;
      }
      
      .show-filter:hover,
      .show-filter:focus {
          color: #fff;
      }
      
      .filter-result-area {
          padding-top: 0px !important;
          margin: 0px !important;
      }
      
      .prod_filter_wrap p span.d-block label {
          margin-left: 0;
          margin-top: 10px;
      }
      
      .dashboard_chart_wrap {
          position: relative;
      }
      
      .dashboard_chart_wrap .info-wrapper {
          position: absolute;
          top: 60px;
          right: 40px;
          z-index: 1;
      }
      
      .client-dashboard-right-content {
          padding: 0 30px 30px !important;
      }
      
      .custom-datepicker p {
          padding-top: 0px !important;
          margin-top: 0px !important;
      }
      
      .detail-modal .modal-header h4 {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: bold;
      }
      
      .detail-modal .modal-body .table-responsive .alert_modal_table td:first-child {
          font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
          font-weight: bold;
          background-color: #f7f7f7;
          border-right: 1px solid #ddd;
          max-width: 80px;
      }
      
      .detail-modal .modal-body .table-responsive td {}
      /* Client dashboard page css end*/
      /* Manager dahboard css start */