@charset "UTF-8";
body {
  font-size: 13px !important;
  padding: 0;
  margin: 0;
  line-height: 1.22857; }

/*  dark COLOR THEME*/
/*black header+sidebar color */
/*red btn color */
/*light grey color */
/*text color */
/*body base color */
/*border color */
/*basecolor color */
/*font color */
/* mid COLOR THEME */
/*border color */
/*white base color */
/*font color */
/*  light COLOR THEME*/
/*border color */
/*white base color */
/*font color */
/*  THEME*/
.darktone {
  color: #626262;
  background-color: #f7f8fb;
  overflow-x: hidden;
  /*********************Main Layout  Style********************/
  /********************SIDEBAR NAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /*************************FORM**************************/
  /*****************************BUTTONS******************************/
  /************************Login   Style*************************/
  /*******************Chart Grid ****************/
  /*.modal-open*/
  /**********************Main file css************************/
  /******************************************************************************************
  MEDIA QUERY LAYOUT STRUCTURE
  @media (max-width: 767px) {XS DEVICE- EXTRA small:  for Mobile and Tablet}				
  @media (min-width: 768px) and (max-width: 991px) {SMALL DEVICE- iPad Protlat and old Desktop view}
  @media (min-width: 992px) and (max-width: 1199px) {MEDIUM DEVICE- iPad Landscap and large Desktop view}
  @media (min-width: 1200px) {LARGE DEVICE- Projector EXTRA large Desktop view}
  /******************************************************************************************/ }
  .darktone a {
    color: #626262; }
  .darktone * {
    outline: none !important; }
  .darktone form {
    margin-bottom: 0px; }
  .darktone html {
    height: 100%;
    margin: 0;
    padding: 0; }
  .darktone a {
    cursor: pointer; }
  .darktone a:focus, .darktone a:active {
    outline: none; }
  .darktone ol, .darktone ul {
    padding: 0px;
    list-style: none; }
  .darktone body > div {
    width: 100%;
    display: inline-block; }
  .darktone select.form-control {
    line-height: 28px;
    padding: 5px 6px; }
  .darktone .small-font {
    font-weight: normal;
    color: #d9534f;
    text-transform: none; }
  .darktone .width100 {
    width: 100%; }
  .darktone .page-content.inset > .row {
    margin-left: 0px;
    margin-right: 0px; }
  .darktone .table > tbody > tr > td, .darktone .table > tbody > tr > th, .darktone .table > tfoot > tr > td, .darktone .table > tfoot > tr > th, .darktone .table > thead > tr > td, .darktone .table > thead > tr > th {
    border-color: #ddd; }

  .darktone .theme-menu {
    float: left;
    width: auto;
    margin: 0; }
  .darktone .theme-menu li {
    width: 20px;
    height: 20px;
    margin: 7px 3px;
    font-size: 0px;
    border: 0px solid #e2e2e2;
    cursor: pointer;
    float: left; }
  .darktone .theme-menu li.darkcol {
    background: #28282e; }
  .darktone .theme-menu li.lightcol {
    background: #fdfdfd; }
  
  .darktone .themeicon {
    width: auto;
    padding: 4px;
    font-size: 15px;
    color: #333;
    margin: 7px 3px;
    float: left;
    cursor: pointer; }

  .darktone ._720kb-datepicker-calendar-header:nth-child(odd) {
    background: #d9534f; }
  .darktone ._720kb-datepicker-calendar-header:nth-child(even) {
    background: #e27c79; }
  .darktone ._720kb-datepicker-calendar-day._720kb-datepicker-active, .darktone ._720kb-datepicker-calendar-day:hover {
    background: #e27c79; }
  .darktone #wrapper {
    padding-left: 50px;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    height: 100%; }
  .darktone #sidebar-wrapper {
    margin-left: -240px;
    left: 50px;
    top: 0px;
    border-top: 0px solid #18b3a3;
    width: 240px;
    background-color: #28282e;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    padding-bottom: 60px; }
  .darktone #sidebar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* border-right: 1px solid darken($colorA, 8%);*/ }
  .darktone .sidebar-nav {
    display: block;
    float: left;
    width: 240px;
    list-style: none;
    margin: 0;
    padding: 0; }
  .darktone #page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 52px; }
  .darktone #wrapper .nav-top-fix {
    padding-left: 50px;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    background: #28282e;
    border-top: 0px solid #18b3a3; }
  .darktone #wrapper.active, .darktone #wrapper.active .nav-top-fix {
    padding-left: 240px; }
  .darktone #wrapper.active #sidebar-wrapper {
    left: 240px; }
  .darktone .page-content {
    padding: 10px 8px; }
  .darktone .sidebar-nav li a {
    color: #fff;
    display: block;
    float: left;
    text-decoration: none;
    width: 240px;
    box-shadow: 0px 1px 0px #151518;
    border-bottom: 1px solid #3b3b44;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    -ms-transition: background .4s;
    transition: background .4s;
    position: relative; }
  .darktone .sidebar-nav li {
    line-height: 48px; }
  .darktone .sidebar-nav li a span {
    display: none;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s;
    font-size: 14px; }
  .darktone .sidebar-nav li a i {
    font-size: 15px;
    padding: 12.5px 18px;
    display: block;
    text-align: right;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  .darktone .sidebar-nav li.location a i {
    width: auto;
    padding: 17.5px 24px; }
  .darktone #wrapper.active .sidebar-nav li a span {
    display: inline-block;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s; }
  .darktone #wrapper.active .sidebar-nav li a i {
    transition: all .4s ease 0s;
    display: inline-block; }
  .darktone #wrapper .sidebar-nav li a i {
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  .darktone .sidebar-nav li a:hover, .darktone .sidebar-nav li a.active {
    color: #fff;
    background: #D9534F;
    text-decoration: none;
    /* border-bottom: 1px solid #18b3a3; */ }
  .darktone .sidebar-nav li a.active:after {
    font-family: "FontAwesome";
    content: "\f0d9";
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 30px; }
  .darktone .navbar-top-links {
    right: 0px;
    position: absolute;
    margin-right: 0px; }
  .darktone .sidebar-nav li:last-child:after {
    padding: 20px;
    content: " "; }
  .darktone #sidebar_menu {
    margin-bottom: 0px;
    width: 240px;
    float: left;
    border-bottom: 1px solid #131315; }
  .darktone #sidebar_menu li {
    display: block;
    overflow: hidden; }
  .darktone #sidebar_menu li a {
    width: 180px;
    padding: 1px 2px;
    text-align: center;
    color: #fff;
    display: block;
    float: left;
    text-decoration: none; }
  .darktone #sidebar_menu li a img {
    max-height: 40px;
    margin-top: 3px;
    max-width: 100%; }
  .darktone #main_icon {
    float: right;
    padding: 12px 14px;
    font-size: 21px;
    height: 48px;
    width: 50px;
    border-right: 1px solid #151518; }
  .darktone #sidebar_menu li #main_icon a {
    width: auto;
    padding: 2px; }
  .darktone #sidebar_menu li a:hover {
    opacity: 0.8; }
  .darktone .tooltip {
    white-space: nowrap; }
  .darktone #wrapper.active .sidebar-nav li .tooltip {
    display: none; }
  .darktone .nav-top-fix ul.sub-nav li {
    border-right: 1px solid #151518; }
  .darktone .nav-top-fix ul.sub-nav li a {
    color: #fff;
    transition: all .4s ease 0s;
    padding-top: 14px;
    padding-bottom: 13.5px;
    border-right: 0px solid #1f1f24;
    background: #28282e; }
  .darktone .nav-top-fix ul.sub-nav li a:hover, .darktone .nav-top-fix ul.sub-nav li a.active {
    color: #fff;
    background: #d9534f !important;
    border: none; }
  .darktone .navbar {
    min-height: 49px;
    border-bottom: 1px solid #151518; }
  .darktone .nav-top-fix .navbar-right > li {
    float: left;
    border-right: 1px solid black; }
  .darktone .nav-top-fix .navbar-right > li:first-child {
    border-left: 1px solid black; }
  .darktone .nav-top-fix .navbar-right li.dropdown-user > a:hover, .darktone .nav-top-fix .navbar-right li.dropdown-user > a:focus, .darktone .nav-top-fix .navbar-right li.notifications-menu > a:hover, .darktone .nav-top-fix .navbar-right li.notifications-menu > a:focus {
    background: #1a1a1e; }
  .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
    border-radius: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    min-width: 152px;
    right: -1px; }
  .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
    display: block; }
  .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a {
    display: block;
    color: #28282e;
    cursor: pointer; }
  .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a:hover {
    color: #d9534f; }
  .darktone .nav-top-fix .navbar-right li > a, .darktone .nav-top-fix .navbar-right li span {
    color: #fff;
    line-height: 1.5em;
    display: inline-block;
    padding: 14px 15px; }
  .darktone .nav-top-fix .navbar-right li.open > a:focus, .darktone .nav-top-fix .navbar-right li.open > a:hover {
    background: #28282e; }
  .darktone .nav-top-fix .navbar-right li.notifications-menu > a {
    padding: 14px;
    font-size: 20px;
    color: #fff;
    position: relative;
    height: 48px; }
  .darktone .nav-top-fix .navbar-right li.notifications-menu > a .label-warning {
    position: absolute;
    top: 4px;
    font-size: 11px;
    right: 8%;
    padding: 0.2em 0.4em; }
  .darktone .head-box .box-outter {
    background: #fff; }
  .darktone .formsection .btn-blue {
    margin-left: 0px !important;
    margin-top: 0px !important; }
  .darktone .boxforbox {
    margin: 15px 0 0 0;
    width: 20%;
    padding: 0px 0.5% !important; }
  .darktone .boxforbox .panel {
    border: medium none;
    margin-bottom: 0px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.09);
    background: #F2F3F4;
    border: 1px solid #ddd; }
  .darktone .boxforbox .panel .panel-body {
    padding: 15px 12px 15px 72px;
    position: relative; }
  .darktone .boxforbox .panel .panel-body h6 {
    font-size: 12px;
    margin: 0px;
    height: 30px;
    line-height: 12px;
    font-weight: 600; }
  .darktone .boxforbox .panel .panel-body h3 {
    font-size: 24px;
    color: #626262;
    font-weight: 600;
    margin: 0px auto;
    line-height: 22px;
    letter-spacing: -0.5px; }
  .darktone .boxforbox .round-icon {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 28px;
    text-align: center;
    width: 70px;
    height: 100%;
    display: block;
    line-height: 35px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 22px 20px; }
  .darktone .box {
    margin-top: 10px; }
  .darktone .panel {
    border-radius: 4px;
    border: 1px solid #ddd;
    position: relative;
    background: #fff;
    display: inline-block;
    width: 100%; }
  .darktone .panel-title {
    color: #626262;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 32px;
    font-weight: 600; }
  .darktone .padding0 {
    padding: 0px !important; }
  .darktone .table {
    margin-bottom: 0px; }
  .darktone .table-hover > tbody > tr:hover {
    background-color: #f2f3f9; }
  .darktone label {
    font-weight: 400; }
  .darktone .inputcontrol, .darktone .form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
    color: #626262;
    display: block;
    font-size: 12px;
    line-height: normal;
    padding: 5px 10px;
    transition: none 0s ease 0s;
    width: 100% !important; }
  .darktone .input-group-addon {
    padding: 5px 6px;
    border-radius: 0px; }
  .darktone .date-filter .input-group {
    width: 49%; }
  .darktone .input-group .form-control {
    padding: 4px; }
  .darktone .btn-group.bootstrap-select {
    margin-bottom: 0px !important; }
  .darktone .bootstrap-select > .btn {
    border-radius: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px; }
  .darktone .panel-filter {
    padding: 8px; }
  .darktone .panel-filter .form-group {
    margin-bottom: 0px; }
  .darktone .panel-filter .form-group .inputcontrol {
    padding: 3px 10px; }
  .darktone .pagination {
    margin: 10px 0px; }
  .darktone .btn:focus, .darktone .btn:active:focus {
    outline: none; }
  .darktone .btn-blue {
    background: #28282e;
    color: #fff;
    margin: 5px 5px 5px 0px; }
  .darktone .btn-blue:hover, .darktone .btn-blue:focus {
    background: #626262;
    color: #fff; }
  .darktone .btn-red {
    background: #d9534f;
    color: #fff;
    margin: 5px; }
  .darktone .btn-red:hover {
    background: #c9302c;
    color: #fff; }
  .darktone .btn-action-edit, .darktone .btn-action-check, .darktone .btn-action-remove {
    width: 24px;
    height: 20px;
    color: #626262;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f2f3f9;
    display: inline-block;
    line-height: 1.3em;
    text-align: center;
    margin: 0px 1px;
    vertical-align: top; }
  .darktone .btn-container {
    width: 26px;
    height: 20px;
    display: inline-block;
    vertical-align: top; }
  .darktone a.btn-container:focus, .darktone a.btn-container:hover {
    text-decoration: none; }
  .darktone .btn-action-check {
    color: #18b3a3; }
  .darktone .btn-action-remove {
    color: #d9534f; }
  .darktone .mtop5 {
    margin-top: 5px; }
  .darktone .mtop10 {
    margin-top: 10px; }
  .darktone .mtop12 {
    margin-top: 12px; }
  .darktone .mtop20 {
    margin-top: 20px; }
  .darktone .mbot0 {
    margin-bottom: 0px !important; }
  .darktone .mbot10 {
    margin-bottom: 10px; }
  .darktone .mRight10 {
    margin-right: 10px; }
  .darktone .disable-slider {
    width: 100% !important; }
  .darktone .disable-slider .pull-right {
    margin-top: -3px; }
  .darktone .newofferdiv {
    display: none;
    margin-top: 10px; }
  .darktone .table-caption {
    display: table-caption; }
  .darktone .btn-newoffer-active, .darktone .btn-black {
    background: #d9534f !important;
    border: 1px solid #d9534f !important;
    margin-left: 5px; }
  .darktone .btn-newoffer-active:hover {
    background: #626262 !important; }
  .darktone .discountype .bootstrap-select {
    padding: 0px !important;
    margin-left: -1px !important; }
  .darktone .discountype .form-control {
    position: absolute;
    top: 0; }
  .darktone .discountype .bootstrap-select.btn-group .btn .filter-option {
    padding-right: 6px; }
  .darktone .pagination li a {
    margin-left: 2px; }
  .darktone .pagination li.active a, .darktone .pagination li.active a:hover, .darktone .pagination li.active a:focus {
    background: #f2f3f9 !important;
    border-color: #ddd;
    border-width: 1px;
    color: #626262; }
  .darktone .pagination li a i {
    line-height: 18.5px;
    width: 9px; }
  .darktone .offer-footer {
    padding: 7px 15px;
    overflow: hidden; }
  .darktone .offer-footer .pagination {
    margin: 0px; }
  .darktone .panel-footer.offer-footer {
    padding: 0;
    min-height: 42px; }
  .darktone .panel-footer .pagination {
    padding: 8px 12px; }
  .darktone .highlight_row {
    background: orange; }
  .darktone .usertable th, .darktone .usertable td {
    font-size: 12px;
    border: none !important;
    padding: 7px 6px !important; }
  .darktone .usertable table {
    margin: 6px 0px 12px 0 !important; }
  .darktone .usertable th {
    color: #626262;
    font-weight: normal;
    width: 150px; }
  .darktone .legend-0line {
    /*stroke: #9babda !important;*/
    stroke-width: 3 !important; }
  .darktone .legend-1line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .darktone .legend-2line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .darktone .legend-3line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .darktone .legend-4line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .darktone .browsertext {
    background: url(../images/chrome.png) no-repeat top left;
    padding-left: 40px;
    position: absolute;
    top: 10px;
    right: 0;
    text-align: left;
    padding-right: 15px;
    min-height: 34px;
    font-size: 12px; }
  .darktone .login {
    background: url(../images/BG.jpg) no-repeat center center;
    height: 100%;
    background-size: cover; }
  .darktone .login body {
    background: transparent; }
  .darktone .form-signin input[type="text"] {
    margin-bottom: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .darktone .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .darktone .form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .darktone .vertical-offset-100 {
    padding-top: 70px; }
  .darktone .login .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto auto 10px auto; }
  .darktone .login .panel {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
  .darktone .login .panel-heading {
    background: #28282e;
    color: #fff;
    font-size: 16px;
    padding: 16px 0; }
  .darktone .col-sm-offset-3 {
    perspective: 800px; }
  /* .darktone .login .login-form {
    background: #fff;
    border: 0px;
    margin-top: 10px; 
  } */
  .darktone .login .login-form a {
    text-decoration: none; }
  .darktone .login .login-form a:hover {
    text-decoration: none; }
  .darktone .login .login-form label {
    margin-top: 1px;
    font-size: 14px; }
  .darktone .login .login-form .inputcontrol, .darktone .login .login-form .form-control {
    height: 40px; }
  .darktone .login-bottom {
    margin: 4px 0 16px 0;
    padding: 10px 15px;
    overflow: hidden; }
  .darktone .login-bottom a {
    color: #f2f3f9; }
  .darktone .login-bottom a:hover {
    color: #fff; }
  .darktone .login .login-form .login-bottom label {
    display: inline;
    color: #fff; }
  .darktone .forget-pass {
    margin-top: 5px;
    display: inline-block; }
  .darktone #login_form .input-group-addon {
    padding-left: 12px;
    padding-right: 12px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px; }
  .darktone #login_form .has-success .input-group-addon:first-child, .darktone #login_form .has-error .input-group-addon:first-child {
    border-right-width: 1px;
    border-style: solid; }
  .darktone .login .login-form .form-control {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; }
  .darktone .login .form-group {
    height: auto; }
  .darktone .login .form-control-feedback {
    line-height: 40px;
    height: 40px;
    top: 23px !important;
    right: 15px; }
  .darktone .loginbtn {
    width: 100%;
    height: 42px;
    border: 0px solid #000;
    background: #28282e;
    border-bottom: 0px solid #000;
    font-size: 16px;
    font-weight: 300; }
  .darktone .container-login {
    position: relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px; }
  .darktone .container-login .card {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .darktone .container-login .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }
  .darktone .container-login .card.flipped, .darktone .container-login .card .face2 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
    .card .face1  { z-index:998; }
    .card .face2  { z-index:999; }
    .flipped .face1 .errorMsg{ display:none;}
  .darktone .store {
    display: none; }
  .darktone .buttons {
    text-align: center; }
  .darktone .container-login .panel-body {
    padding-bottom: 0px; }
  .darktone .verticalGridLine {
    display: none; }
  .darktone .horizontalGridLine {
    stroke-width: 0.2 !important; }
  .darktone .drivinscroe {
    margin-top: 15px; }
  .darktone .drivinscroe .slider.slider-horizontal {
    width: 100% !important; }
  .darktone #wrapper.active .sidebar-nav li.location a i {
    font-size: 18px;
    padding: 17.5px 18px;
    text-align: left;
    width: 44px; }
  .darktone .breadcrumb {
    display: none !important; }
  .darktone .greypanel .panel-footer {
    background: #f2f3f9;
    border-color: #ddd; }
  .darktone .greypanel .panel-heading .panel-title i {
    color: #d9534f;
    background: #fff;
    padding: 14px 11px;
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    border-right: 1px solid #ddd;
    width: 48px;
    text-align: center; }
  .darktone .greypanel .panel-heading .panel-title i.fa-male:after {
    content: "\f182"; }
  .darktone .greypanel .panel-heading {
    background: #f2f3f9;
    border-color: #ddd;
    box-shadow: none;
    position: relative;
    padding: 7px 15px 7px 54px;
    display: inline-block;
    width: 100%; }
  .darktone .formhead > i {
    color: #d9534f;
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    width: 52px;
    background: #fff;
    padding: 14px 16px;
    border-right: 1px solid #e0e0e4; }
  .darktone .box .panel-default > .panel-heading {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
  .darktone .table > thead > tr > th {
    font-weight: 600;
    font-size: 12px;
    color: #626262;
    border-bottom-width: 2px;
    background: rgba(242, 243, 249, 0.5);
    vertical-align: top;
    border-color: #ddd; }
  .darktone .table > tbody > tr > td {
    font-size: 12px !important;
    word-break: break-all; }
  .darktone .slider .tooltip.top {
    z-index: 1025; }

  .darktone .driving-scrore ul {
    margin-top: 0px; }
  .darktone .driving-scrore ul li {
    list-style: none;
    margin: 2px 0px;
    font-size: 30px;
    padding: 0px 15px;
    width: 100%;
    float: left; }
  .darktone .driving-scrore ul li small {
    font-size: 12px; }
  .darktone .driving-scrore ul li i {
    color: #d9534f;
    width: 20px; 
    display:none ; /*Move to auto 2.2.1*/}
  .driving-scrore ul li.heading-scrore {
    /*text-transform:uppercase;*/
    color: #626262;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    float: left;
    text-align: left;
    padding-top: 12px; }
  .darktone .userdetailtable th, .darktone .userdetailtable td {
    padding: 5px 8px !important;
    border-color: #f1f1f1 !important;
    position: relative; }
  .darktone .userdetailtable td .errorMsg {
    top: -18px; }
  .darktone .userdetailtable td > .date {
    width: 100%; }
  .darktone .userdetailtable td .form-control {
    height: 28px;
    padding: 5px 7px; }
  .darktone .userdetailtable td textarea.form-control {
    height: auto; }
  .darktone .driving-scrore-chart {
    width: 60%;
    height: 280px;
    float: left;
    /*border-right: 1px solid #ddd;*/ /*Move to Auto 2.2.1*/
    padding: 20px 15px; }
  /*.darktone .bod-bot {
    border-top: 1px solid #ddd;
    margin-top: 12px !important;
    padding-top: 12px !important; }*/
  .darktone .margin-right15 {
    padding-right: 15px; }
  .darktone .user-name {
    display: none;
    min-height: 167px;
    -webkit-transition: max-height, 0.5s ease;
    -moz-transition: max-height, 0.5s ease;
    -ms-transition: max-height, 0.5s ease;
    -o-transition: max-height, 0.5s ease;
    transition: max-height, 0.5s ease;
    overflow-y: scroll; }
  .darktone .user-name.open {
    max-height: 300px;
    display: block; }
  .darktone .no-record {
    margin-top: 5px;
    padding: 6px 12px;
    margin-left: 10px; }
  .darktone .search-div {
    position: absolute;
    max-height: 300px;
    z-index: 99;
    width: 86%;
    margin-top: -10px; }
  .darktone .search-div i {
    color: #626262;
    font-size: 40px;
    margin-left: 5px; }
  .darktone .search-div ul {
    border: 2px solid #626262;
    background-color: #fff;
    border-radius: 4px;
    margin-top: -13px;
    max-height: 300px;
    overflow-x: hidden; }
  .darktone .search-div ul li {
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px; }
  .darktone .search-div ul li:hover {
    background: #f2f3f9; }
  .darktone .search-wrapper {
    position: relative;
    padding: 8px 10px; }
  .darktone .search-box, .darktone .search-wrapper {
    position: relative;
    padding: 8px 10px 8px 24px; }
  .darktone .search-control {
    position: relative; }
  .darktone .search-control .addon-thumb:first-child {
    position: absolute;
    left: 8px;
    top: 12px;
    z-index: 1;
    font-size: 16px; }
  .darktone .search-control .addon-thumb:last-child {
    position: absolute;
    right: 5px;
    top: 12px;
    z-index: 1;
    text-align: center; }
  .darktone .search-box {
    width: 100% !important;
    outline: 0;
    padding: 8px 10px 8px 24px !important;
    height: 42px; }
  .darktone .close-icon {
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
    padding: 1px;
    border-radius: 50%;
    width: 22px;
    height: 22px; }
  .darktone .subtablerow td {
    padding: 0px !important; }
  .darktone .cal-div {
    position: relative; }
  .darktone .cal-div label.cal {
    margin-top: 9px;
    position: absolute;
    right: 7px;
    top: 0px;
    color: #d9534f; }
  .darktone .cal-div input[readonly] {
    cursor: pointer; }
  .darktone .checkcol {
    width: 22px;
    text-align: left; }
  .darktone .offer-check {
    float: left;
    margin-top: 2px !important; }
  .darktone .top-radio {
    width: 85%;
    margin: 0px auto;
    display: inline-block; }
  .darktone .top-radio span {
    display: inline-block;
    margin: 0px 10px; }
  .darktone .inline-heading {
    display: inline-block; }
  .darktone .driving-map {
    padding: 0px;
    position: relative; }
  .darktone .driving-map #drivingEventsLocation {
    width: 100%;
    height: 313px; }
  .darktone .map-legend {
    background: rgba(255, 255, 255, 0.8);
    display: table;
    border: 1px solid #ddd;
    position: absolute;
    top: 10px;
    right: 50px;
    padding: 5px 5px 0px 5px;
    z-index: 9;    
 }
  .darktone .map-legend li {
    list-style: none;
    color: #626262;
    position: relative;
    padding: 5px 5px 5px 25px;
    cursor: pointer;
    line-height: 20px;}
  .darktone .map-legend li#dangerousManoeuvre, .darktone .map-legend li#dangerousManoeuvre_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 0px; }
  .darktone .map-legend li#hardBrake, .darktone .map-legend li#hardBrake_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 0px; }
  .darktone .map-legend li#rapidAcceleration, .darktone .map-legend li#rapidAcceleration_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -60px; }
  .darktone .map-legend li#speedViolation, .darktone .map-legend li#speedViolation_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -90px; }
  .darktone .map-legend li#phoneUsages, .darktone .map-legend li#phoneUsages_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -517px; }
  .darktone .marginL05 {
    margin-left: 5px; }
  .darktone .unselectDrivingEvent {
    text-decoration: line-through; }
  .darktone .customtab > li > a {
    color: #626262;
    border-radius: 0px;
    background: #fff;
    padding: 12px 15px; }
  .darktone .customtab {
    border-bottom: 0px solid #ddd; }
  .darktone .customtab > li {
    margin-bottom: -1px; }
  .darktone .customtab > li.active > a, .darktone .customtab > li.active > a:focus, .darktone .customtab > li.active > a:hover {
    background: #d9534f;
    color: #fff;
    border-color: #d9534f; }
  .darktone .customtab > li a:focus, .darktone .customtab > li a:hover {
    background: #d9534f;
    color: #fff; }
  .darktone .boxtabing .panel {
    width: 100%;
    float: left; }
  .darktone .boxtabing .btn {
    margin-bottom: 8px; }
  .darktone .formsection {
    width: 100%;
    float: left;
    padding-bottom: 12px;
    margin: 0px 0px 24px;
    border-radius: 4px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd; }
  .darktone .formhead {
    width: 100%;
    float: left;
    margin-bottom: 12px;
    color: #626262;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    background: #f2f3f9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 14px 15px 14px 60px;
    font-weight: bold; /*Move to Auto 2.2.1*/}
  .darktone .searchbtn {
    float: right;
    color: #fff !important;
    background-color: #d9534f;
    border-color: #d9534f;
    padding: 5px 10px;
    width: auto;
    font-size: 14px; }
  .darktone .searchbtn.collapsed, .darktone .addbtn.collapsed {
    background: #D9534F !important;
    border-color: #D9534F !important;
    color: #fff !important; }
  .darktone .addbtn {
    float: right;
    color: #fff !important;
    background: #d9534f;
    border-color: #d9534f;
    padding: 5px 10px;
    width: auto;
    font-size: 14px;
    margin-bottom: 8px; }
  .darktone .addbtn.collapsed i.fa-minus:before {
    content: "" !important;
    font-family: fontawesome; }
  .darktone button.bluebtn {
    background-color: #28282e;
    border-color: #28282e;
    color: #fff; }
  .darktone .bluebtn:focus, .darktone .bluebtn:hover {
    color: #fff;
    background-color: #626262;
    border-color: #626262; }
  .darktone .boxtabing th .offerall {
    vertical-align: middle;
    margin: 2px 0px 0px 0px; }
  .darktone .modal.full-width-modal-right .modal-dialog {
    height: 100%;
    margin: 0;
    position: absolute;
    right: 0; }
  .darktone .full-width-modal-right .modal-title {
    font-size: 16px;
    margin-top: 2px; }
  .darktone .full-width-modal-right .modal-content {
    border-radius: 0px;
    border: 0px solid #000;
    height: 100%; }
  .darktone .full-width-modal-right .modal-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 300px;
    border: none; }
  .darktone .borderbadge {
    border: 1px solid #fff;
    background: none;
    padding: 5px 8px; }
  .darktone .cleanbadge {
    background: none !important;
    padding: 5px 8px;
    border: 1px solid #c0c0c0;
    margin: 2px 1px;
    color: #535658 !important; }
  .darktone .modalbodyinner {
    height: 100%;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e5e5e5; }
  .darktone .modalbodyinner .mCSB_container {
    width: 100% !important; }
  .darktone .popheadrow {
    width: 100%;
    padding: 15px;
    background: #f2f3f9;
    border-bottom: 1px solid #ddd;
    color: #626262;
    font-size: 20px; }
  .darktone .popheadrow p {
    color: #626262;
    font-size: 12px;
    padding-top: 6px;
    margin-bottom: 0; }
  .darktone .poprow {
    width: 100%;
    display: inline-block;
    padding: 0px 10px 0px 5px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    cursor: pointer; }
  .darktone .poprow:hover, .darktone .poprow.active {
    background: #f2f3f9; }
  .darktone .poprow.active .popcheck {
    background: #2282d8; }
  .darktone .notification-sidebar .poprow.active .popcheck {
    background: #2282d8; }
  .darktone .offer-sidebar .poprow.active .popcheck {
    background: #e67e22; }
  .darktone .suggestion-sidebar .poprow.active .popcheck {
    background: #5cb85c; }
  .darktone .filtermodal .poprow.active .popcheck {
    background: #d9534f; }
  .darktone .popleft {
    float: left;
    width: 22%;
    vertical-align: top;
    border-right: 1px solid #ddd;
    margin-right: -1px; }
  .darktone .popright {
    width: 78%;
    border-left: 1px solid #ddd;
    padding: 12px 8px;
    margin-top: -1px;
    float: left;
    vertical-align: top;
    position: relative; }
  .darktone .popicon {
    max-width: 78px;
    height: auto;
    float: right;
    text-align: right;
    position: absolute;
    right: 4px;
    top: 10px; }
  .darktone .popicon:hover {
    opacity: 1; }
  .darktone .popname {
    color: #626262;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    position: relative;
    padding-bottom: 5px;
    padding-right: 30px;
    word-break: break-all; }
  .darktone .popcheck {
    float: right;
    width: 26px;
    height: 26px;
    background: rgba(98, 98, 98, 0.4);
    padding: 6px;
    margin: 8px 8px 0 0;
    clear: both;
    border-radius: 50%;
    color: #fff;
    text-align: center; }
  .darktone .popcheck i {
    line-height: 14px; }
  .darktone .popcheck input[type="checkbox"] {
    margin-top: 0px; }
  .darktone .popinfo, .darktone .statusrow {
    width: 100%;
    display: inline-block; }
  .darktone .popinfo p {
    margin-bottom: 5px;
    color: #626262;
    word-break: break-all; }
  .darktone .popstatus {
    width: 100%;
    float: right;
    padding: 4px 6px 4px 0;
    text-align: right;
    color: #c1c8ce;
    font-size: 10px; }
  .darktone .poprow .en-able {
    color: #5cb85c;
    font-size: 11px;
    width: 100%;
    float: right;
    font-weight: 600; }
  .darktone .poprow.dis-able {
    color: #d9534f;
    font-size: 11px;
    width: 100%;
    float: right; }
  .darktone .popdate {
    width: 100%;
    float: left;
    text-align: left;
    color: #626262;
    font-size: 10px;
    padding-bottom: 5px; }
  .darktone .offerdiscount {
    width: 100%;
    float: right;
    clear: both;
    text-align: right;
    line-height: 20px;
    padding-right: 4px;
    color: #626262;
    margin: 7px 8px 7px 0px;
    font-weight: 600; }
  .darktone .offerdiscount span {
    font-size: 10px;
    color: #626262;
    font-weight: 400;
    float: right;
    line-height: 20px;
    padding-left: 2px; }
  .darktone .gen {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -146px;
    padding: 10px;
    display: inline-block; }
  .darktone .mkt {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -176px;
    padding: 10px;
    display: inline-block; }
  .darktone .main {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -204px;
    padding: 10px;
    display: inline-block; }
  .darktone .fe {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -232px;
    padding: 10px;
    display: inline-block; }
  .darktone .ser {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -262px;
    padding: 10px;
    display: inline-block; }
  .darktone .dr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -290px;
    padding: 10px;
    display: inline-block; }
  .darktone .fr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -319px;
    padding: 10px;
    display: inline-block; }
  .darktone .ts {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -347px;
    padding: 12px;
    display: inline-block; }
  .darktone .hbd {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -380px;
    padding: 12px;
    display: inline-block; }
  .darktone .ra {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -415px;
    padding: 12px;
    display: inline-block; }
  .darktone .sv {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -449px;
    padding: 12px;
    display: inline-block; }
  .darktone .dm {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -485px;
    padding: 12px;
    display: inline-block; }
  .darktone .popdrop {
    width: 120px;
    float: right;
    margin: 0px 8px 0px 0px;
    font-size: 12px; }
  .darktone .popdrop .btn {
    padding: 3px 10px 3px 7px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    border-color: #fff; }
  .darktone .popdrop .btn .caret {
    text-align: right;
    position: absolute;
    right: 6px;
    top: 10px; }
  .darktone .popdrop li a {
    font-size: 12px; }
  .darktone .popdrop .dropdown-menu {
    min-width: 128px; }
  .darktone .subtablerow {
    background: rgba(242, 243, 249, 0.6);
    border-bottom: 1px solid #ddd; }
  .darktone .blankfilter {
    color: #fff;
    text-shadow: 0px 0px 1px #000; }
  .darktone .universalfilter {
    color: #626262;
    text-shadow: none; }
  .darktone .conditionalfilter {
    color: #d9534f;
    text-shadow: none; }
  .darktone .participentab .panel {
    border-top: 0 solid #ddd; }
  .darktone .horizontal.fade .modal-dialog {
    transform: translate(25%, 0%);
    transition: transform 0.5s ease-out 0s;
    -webkit-transform: translate(25%, 0%);
    -webkit-transition: transform 0.5s ease-out 0s;
    -ms-transform: translate(25%, 0%);
    -ms-transition: transform 0.5s ease-out 0s;
    -o-transform: translate(25%, 0%);
    -o-transition: transform 0.5s ease-out 0s; }
  .darktone .horizontal.in .modal-dialog {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px); }
  .darktone .nowrap {
    white-space: nowrap; }
  .darktone .en-disbtn {
    vertical-align: text-top; }
  .darktone .word-break > td {
    word-break: break-all; }
  .darktone .pagination li a {
    padding: 3px 8px !important; }
  .darktone #wrapper.active .sidebar-nav li a i {
    transition: all 0.4s ease 0s;
    width: 44px; }
  .darktone .userinfo {
    width: 100%;
    float: left;
    padding: 30px 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .darktone .userthumb {
    width: 100%;
    display: inline-block;
    min-height: 123px; }
  .darktone .userthumb img {
    max-width: 100%;
    border: 10px solid #ddd; }
  .darktone .thumbinfo {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 12px 0 6px 0;
    display: inline-block;
    line-height: 20px;
    min-height: 54px; }
  .darktone #loading-bar .bar {
    background: #d9534f;
    height: 3px; }
  .darktone #loading-bar-spinner .spinner-icon {
    width: 18px;
    height: 18px;
    border: solid 4px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 10px; }
  .darktone .boxtabing .box {
    display: inline-block;
    margin-top: 10px;
    width: 100%; }
  .darktone .modal {
    z-index: 10002 !important; }
  .darktone .modal-dialog {
    z-index: 10002 !important; }
  .darktone .modal-backdrop {
    z-index: 10001 !important; }
  .darktone .modal {
    background: rgba(0, 0, 0, 0.7); }
  .darktone .modal-header {
    color: #fff;
    padding: 12px 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1; }
  .darktone .filtermodal .modal-header {
    background: #d9534f; }
  .darktone #modeloffer.modal {
    z-index: 10040; }
  .darktone #modeloffer .modal-body {
    padding: 50px 0px 65px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden; }
  .darktone #modeloffer .modal-title {
    width: auto;
    display: inline-block; }
  .darktone .fullwidth {
    width: 100%;
    display: inline-block; }
  .darktone .cal-div .input-group .form-control {
    padding: 5px 10px; }
  .darktone .rangecontainer {
    width: 100%;
    float: left;
    position: relative;
    padding-right: 50px; }
  .darktone .slider-eye {
    font-size: 1.4em;
    float: left;
    position: absolute;
    right: 6px;
    top: 3px; }
  .darktone .rangeslider {
    width: 100%;
    float: left;
    margin: 6px 0px 0 7px; }
  .darktone .uislider .ui-slider-range {
    background: #d9534f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }
  .darktone .notification-sidebar .modal-header, .darktone .notification-sidebar .modal-footer .btn-danger {
    background: #2282d8;
    border-color: #146dbd; }
  .darktone .offer-sidebar .modal-header, .darktone .offer-sidebar .modal-footer .btn-danger {
    background: #e67e22;
    border-color: #cd6d17; }
  .darktone .suggestion-sidebar .modal-header, .darktone .suggestion-sidebar .modal-footer .btn-danger {
    background: #5cb85c;
    border-color: #5cb85c; }
  .darktone .uislider .ui-slider-handle {
    background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)) repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: absolute;
    top: -0.4em;
    width: 20px;
    z-index: 3; }
  .darktone .uislider .ui-slider-handle:after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px; }
  .darktone .ui-slider-tip {
    width: auto !important;
    background: #28282e;
    border-radius: 4px;
    padding: 1px 6px;
    color: #fff;
    font-size: 11px;
    position: absolute;
    bottom: -21px; }
  .darktone .ui-slider-tip:after {
    font-family: fontawesome;
    content: "\f0d8";
    position: absolute;
    left: 6px;
    top: -9px;
    font-size: 14px;
    color: #28282e; }
  .darktone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip {
    position: absolute;
    bottom: -22px;
    right: 0px; }
  .darktone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip:after {
    right: 4px;
    left: auto;
    top: -9px; }
  .darktone .rangeslider {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    border: none;
    background: #626262; }
  .darktone .discountype {
    width: 100%; }
  .darktone .discountype .input-group-btn {
    width: 42px; }
  .darktone .errorMsg {
    transition: all 0.4s ease 0s;
    color: #d9534f;
    background: #f9dddd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    position: absolute;
    top: -4px;
    right: 15px;
    z-index: 99;
    border: 1px solid #d9534f;
    line-height: 14px; }
  .darktone .errorMsg:after {
    font-family: fontawesome;
    content: "\f0d7";
    position: absolute;
    right: 6px;
    bottom: -10px;
    font-size: 18px;
    color: #e7908d; }
  .darktone .date .btn-blue {
    margin: 0; }
  .darktone .cal-div {
    width: 100%;
    display: inline-block;
    float: left; }
  .darktone .date .input-group-addon {
    cursor: pointer; }
  .darktone .filtermodal .popname {
    padding-left: 0px; }
  .darktone .filtermodal {
    font-size: 12px; }
  .darktone .applybtn {
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    padding: 3px 8px;
    margin-top: 8px; }
  .darktone .applybtn input[type="checkbox"] {
    margin: 3px 6px 3px 0px;
    float: left; }
  .darktone .dropdown .btn {
    margin-bottom: 0px;
    padding: 3px 10px; }
  .darktone table .dropdown-menu > li > a {
    padding: 3px 10px;
    font-size: 13px; }
  .darktone .pagination > li > a, .darktone .pagination > li > span {
    position: static; }
  .darktone .customdateicon {
    position: absolute;
    right: 1px;
    top: 1px;
    color: #d9534f;
    cursor: pointer;
    z-index: 1;
    padding: 9px 8px 10px 6px;
    font-size: 14px; }
  .darktone .customdateicon .fa-calendar:before {
    font-family: fontawesome;
    font-weight: 300; }
  .darktone .cal-div .fullwidth .form-control {
    background: none;
    position: relative;
    z-index: 2;
    padding-right: 28px; }
  .darktone .cal-div .fullwidth {
    background: #fff;
    position: relative; }
  .darktone .offer-footer button {
    margin: 6px 15px; }
  .darktone .action-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; }
  .darktone .panelFilter .approval-pending td:first-child {
    border-left: 2px solid #f0ad4e !important; }
  .darktone .panelFilter .on-going td:first-child {
    border-left: 2px solid #5cb85c !important; }
  .darktone .panelFilter .completed td:first-child {
    border-left: 2px solid #d9534f !important; }
  .darktone .panelFilter .no-status td:first-child {
    border-left: 2px solid #ddd; }
  .darktone #gameAll table {
    border-collapse: collapse; }
  .darktone form textarea.form-control {
    height: 34px;
    resize: none;
    line-height: 22px; }
  .darktone .textblock textarea.form-control {
    height: 111px;
    resize: none;
    line-height: 22px; }
  .darktone .form-group.textblock {
    height: auto; }
  .darktone .emptybox {
    width: 283px;
    float: left;
    text-align: center;
    padding: 30px 48px;
    font-size: 20px;
    color: #626262;
    font-weight: 300; }
  .darktone .emptybox i {
    font-size: 64px;
    color: #ddd;
    padding: 12px; }
  .darktone .customdropdown {
    width: 100%;
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #626262;
    text-align: left; }
  .darktone .customdropdown .btn {
    padding: 7.5px 16px 7.5px 8px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    color: #626262;
    text-overflow: ellipsis;
    overflow: hidden; }
  .darktone .customdropdown .btn .caret {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 14px; }
  .darktone .customdropdown li a {
    font-size: 12px;
    color: #626262;
    text-overflow: ellipsis;
    overflow: hidden; }
  .darktone .customdropdown .dropdown-menu {
    width: 100%;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto; }
  .darktone .date {
    display: inline-block;
    font-size: 13px;
    color: #626262; }
  .darktone .customdropdown.fiterdown {
    width: 180px;
    float: right; }
  .darktone .customdropdown.fiterdown .btn {
    padding: 6.5px 10px !important;
    font-size: 13px;
    color: #626262;
    background: #fff; }
  .darktone .customdropdown.fiterdown li a {
    font-size: 13px; }
  .darktone .redgradbtn {
    background-color: #d9534f;
    border: 1px solid #d9534f;
    color: #fff; }
  .darktone .redgradbtn:hover, .darktone .redgradbtn:focus {
    background-color: #a02622;
    border: 1px solid #a02622;
    color: #fff; }
  .darktone .customtip {
    white-space: nowrap;
    padding: 4px 6px;
    min-width: 50px;
    filter: none; }
  .darktone .tableScroll {
    max-height: 270px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 100%;
    float: left; }
  .darktone table.usertable tbody > tr > td {
    padding: 8px !important;
    border-top: 1px solid #ddd !important; }
  .darktone .fullbtn {
    width: 100%;
    float: left;
    text-align: left;
    padding: 16px 12px;
    position: relative;
    margin-bottom: 8px;
    white-space: normal;
    font-size: 15px; }
  .darktone .fullbtn:after {
    /* content: "\f061"; */
    font-family: fontawesome;
    position: absolute;
    right: 12px;
    top: 16px; }
  .darktone .noicon.fullbtn:after {
    content: ""; }
  .darktone .userform > .panel-body > .fullwidth {
    padding: 20px 0;
    border: 1px solid #ddd;
    border-top: 0px solid transparent;
    margin: 0; }
  .darktone .userform {
    padding: 0px;
    display: block;
    width: 100%; }
  .darktone .top-radio > span > label {
    cursor: pointer; }
  .darktone .form-group label {
    width: 100%;
    float: left; }
  .darktone .form-group .date {
    width: 100%;
    float: left; }
  .darktone .groupinline .form-group {
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
    min-height: 34px; }
  .darktone .pos-relative {
    position: relative; }
  .darktone .nodata {
    width: 100%;
    text-align: center;
    display: inline-block;
    height: inherit;
    left: 0;
    right: 0;
    top: 0;
    position: absolute; }
  .darktone .nodata img {
    max-width: 100%;
    max-height: 100%; }
  .darktone .pointertd {
    cursor: pointer; }
  .darktone .pointertd:hover {
    color: #4e90a6; }
  .darktone .detailmodal .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #626262;
    position: relative;
    width: 100%; }
  .darktone .detailmodal .modal-header .close {
    color: #fff;
    opacity: 0.4; }
  .darktone .detailmodal .modal-footer {
    width: 100%;
    display: inline-block; }
  .darktone .detailhead {
    font-size: 18px;
    color: #d9534f;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px; }
  .darktone .labelname {
    margin-top: 6px;
    font-size: 13px;
    width: 100%;
    display: inline-block;
    font-weight: bold; }
  .darktone .labeldata {
    font-size: 13px;
    width: 100%;
    display: inline-block;
    min-height: 36px;
    line-height: 18px; }
  .darktone .tablehead {
    margin-top: 16px;
    font-size: 18px;
    line-height: 32px;
    display: inline-block;
    width: 100%;
    padding: 6px 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; }
  .darktone .paddingNone {
    padding: 0; }
  .darktone .gametable table {
    margin-bottom: 0px; }
  .darktone .gametable table tr td {
    vertical-align: middle; }
  .darktone .gametable table > tbody > tr > td:first-child, .darktone .gametable table > thead > tr > th:first-child {
    padding-left: 15px; }
  .darktone .usericonthumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    display: table-cell; }
  .darktone .usericonthumb img {
    width: 100%;
    height: 100%; }
  .darktone .userdetail {
    display: table-cell;
    padding-left: 10px;
    font-weight: bold;
    vertical-align: middle; }
  .darktone .userpoint {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -117px;
    padding-left: 26px;
    width: 100%;
    float: left;
    color: #626262;
    padding-top: 4px; }
  .darktone .userdetail > span {
    color: #626262;
    font-weight: normal;
    padding-left: 3px; }
  .darktone .gametable .tableScroll {
    max-height: 236px; }
  .darktone .recordfilter {
    width: auto;
    float: right; }
  .darktone .recordfilter .cleanbadge {
    border: 0px solid #ddd; }
  .filter{    width: 185px; display: inline-block;}
  .notify-type{line-height:28px;width: 215px;}
  .notify-type select.form-control{width:120px!important;float: right;}
  .darktone .btnradius {
    border-radius: 12px;
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 4px 10px;
    color: #626262;
    margin: 2px 3px 1px 0 !important;
    cursor: pointer;
    width: auto;
    display: inline-block;
    box-shadow: inset 0px -3px 3px #eeeef5;
    background: #fff; }
  .darktone .btnradius.active {
    background: #f2f3f9;
    box-shadow: inset 0px 0px 2px #e1dee6; }
  .darktone .rightpadding {
    padding-right: 15px !important; }
  .darktone .leftpadding {
    padding-left: 15px !important; }
  .darktone th, .darktone td {
    font-size: 13px; }
  .darktone .paginate_button.next, .darktone .paginate_button.previous {
    font-size: 18px; }
  .darktone .btn-action-edit, .darktone .btn-action-check, .darktone .btn-action-remove {
    padding: 2px; }
  .darktone .input-group .form-control {
    padding: 5px 4px 6px; }
  .darktone .form-group {
    min-height: 58px; }
  .darktone .tick {
    fill: #A7A7A7;
    color: #A7A7A7; }
  .darktone div#telematicsLoader {
    left: 527px;
    position: absolute;
    top: 255px;
    /* color: black; */ }
  .darktone .search-box1 {
    padding: 4px 10px !important;
    width: 100% !important; }
  .darktone .map-legend ul li unselectDrivingEvent {
    text-decoration: line-through; }
  .darktone table.fixed {
    table-layout: fixed; }
  .darktone .discrip {
    width: 56%;
    white-space: normal !important; }
  .darktone .customloader {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    text-align: center;
    display: table; }
  .darktone .loadicon {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    height: 100%; }
  .darktone .loadicon span {
    font-size: 16px;
    animation-name: blink;
    animation-duration: .6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    padding: 2px; }
  .darktone .loadicon span:nth-child(2) {
    animation-delay: .1s; }
  .darktone .loadicon span:nth-child(3) {
    animation-delay: .2s; }
@keyframes blink {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }
  .darktone .phonelabel {
    width: auto;
    font-weight: bold;
    font-size: 15px; }
  .darktone .phonelabel i {
    color: inherit !important; }
  .darktone .uploadbtn {
    position: relative; }
  .darktone .uploadbtn input[type=file] {
    opacity: 0;
    width: 118px;
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    cursor: pointer; }
  .darktone .msgHtml {
    width: 100%;
    float: left;
    padding: 15px 15px 20px 15px;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: -12px; }
  .darktone .note-editor .modal-header {
    position: relative;
    color: #333; }
  .darktone #wrapper.active .note-editor.note-frame.fullscreen {
    left: 240px;
    right: 0;
    width: auto !important; }
  .darktone .note-editor.note-frame.fullscreen {
    top: 49px;
    bottom: 0;
    left: 50px; }
  .darktone .label-success.badge {
    background-color: #5cb85c;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .darktone .label-danger.badge {
    background-color: #d9534f;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .darktone .label-primary.badge {
    background-color: #286090;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .darktone .label-warning.badge {
    background-color: #f0ad4e;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .darktone .well hr {
    border-color: #ddd; }
  .darktone .footertext {
    bottom: 10px;
    left: 0;
    padding-right: 15px;
    position: absolute;
    right: 0;
    text-align: right;
    font-size: 12px; }
  .darktone .poweredBy {
    bottom: 0;
    display: block;
    font-size: 12px;
    width: 100%;
    padding-left: 5px;
    position: absolute;
    border-top: 1px solid #3b3b44;
    color: #b3b3b3;
    line-height: 16px !important; }
  .darktone .listpanel .panel-body {
    height: 480px;
    overflow-y: auto; }
  .darktone .navbar-toggle {
    border: 1px solid #d9534f;
    color: #fff;
    background: #d9534f !important; }
  .darktone .bigscrolltable {
    width: 100%;
    margin-bottom: 0px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd; }
  .darktone .bigscrolltable .table > tbody > tr > td {
    word-break: normal; }
  @media screen and (max-width: 1260px) {
    .darktone .bigtable-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd; }
    .darktone .discrip {
      width: 180px; } }
  @media (max-width: 1180px) {
    .darktone #wrapper.active, .darktone #wrapper.active .nav-top-fix {
      padding-left: 50px;
      left: 0px; }
    .darktone #wrapper.active #sidebar-wrapper {
      left: 50px; }
    .darktone #wrapper.active .sidebar-nav li a i {
      width: auto !important;
      display: block;
      text-align: right !important; }
    .darktone #wrapper.active .sidebar-nav li a span {
      display: none; }
    .darktone #wrapper, .darktone #wrapper .nav-top-fix {
      padding-left: 50px;
      left: 180px; }
    .darktone #wrapper {
      position: relative; }
    .darktone #wrapper.active {
      position: relative;
      left: 0px; }
    .darktone #wrapper #sidebar-wrapper {
      left: 240px; }
    .darktone #wrapper .sidebar-nav li a i {
      width: 50px !important;
      display: inline-block;
      text-align: left !important; }
    .darktone #wrapper .sidebar-nav li a span {
      display: inline-block; }
    .darktone #wrapper .navbar-fixed-top {
      width: 100%;
      right: auto; } }
  @media (min-width: 1180px) {
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom {
      border-top: 1px solid #3b3b44;
      margin: 0;
      width: 100%;
      position: absolute;
      bottom: 16px; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li {
      width: 25%;
      float: left;
      text-align: center;
      border-right: 1px solid #3b3b44; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child {
      border: none; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a {
      padding: 15px 20px;
      width: 100%;
      float: left;
      border-bottom: none;
      transition: all .2s ease 0s;
      -webkit-transition: all .2s ease 0s; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a i {
      padding: 2px 0;
      text-align: center;
      width: 100%; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child:after {
      padding: 0; }
    .darktone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a.active:after {
      font-family: "FontAwesome";
      content: "";
      position: absolute;
      right: -1px;
      top: 0;
      font-size: 30px; } }
  @media (max-width: 1024px) {
    .darktone .tooltip {
      display: none !important; } }
  @media (max-width: 767px) {
    .darktone .modal-dialog.modal-sm {
      width: 300px; }
    .darktone .driving-scrore-chart {
      width: 100%;
      border-right: 0px;
      border-bottom: 1px solid #ddd; }
    .darktone .driving-scrore {
      width: 100%; }
    .darktone .usertable table {
      margin: 0px !important; }
    .darktone .form-group {
      height: auto !important; }
    .darktone .navbar-right {
      float: right; }
    .darktone .navbar-header {
      float: left; }
    .darktone .navbar-toggle {
      padding: 6px 10px;
      margin: 9px;
      font-size: 12px;
      padding: 5px; }
    .darktone .dropdown-user .dropdown-menu {
      right: -1px;
      left: auto; }
    .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
      margin-top: 0px; }
    .darktone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
      border-color: #e5e5e5; }
    .darktone .navbar-toggle {
      background-color: inherit; }
    .darktone .date-filter .input-group {
      width: 49%;
      float: left;
      margin-left: 1%; }
    .darktone .slider.slider-horizontal {
      margin-left: 2% !important;
      width: 98% !important; }
    .darktone .vertical-offset-100 {
      padding-top: 20px; }
    .darktone #modelnotify .modal-dialog {
      width: 300px; }
    .darktone .inputcontrol, .darktone .form-control {
      padding: 5px 6px; }
    .darktone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; }
    .darktone .date .cal-div {
      display: inline-block;
      width: 100%; }
    .darktone .rangecontainer {
      min-height: 52px; }
    .darktone .navbar-fixed-top .container-fluid {
      padding-right: 0px; }
    .darktone .navbar-fixed-top .navbar-nav {
      margin-bottom: 0;
      margin-top: 0px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .darktone .head-box .form-inline .form-group {
      margin-bottom: 10px !important; }
    .darktone .slider.slider-horizontal {
      margin-left: 10px; }
    .darktone .usertable table {
      margin: 0px !important; }
    .darktone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; } }
  @media (max-width: 480px) {
    .darktone .groupinline .form-group {
      display: inline-block;
      width: 100%;
      min-height: auto;
      padding: 6px 4px 2px 4px; }
    .darktone .customtab > li > a {
      padding: 8px 7px; }
    .darktone .customtab {
      position: relative;
      padding-top: 42px; }
    .darktone .searchbtn {
      position: absolute;
      right: 0;
      top: 0; }
    .darktone .customdropdown.fiterdown {
      width: 100%;
      margin-top: 4px; } }
  @media (max-width: 360px) {
    .darktone .modal-dialog.modal-sm {
      width: 84%; }
    .darktone .usericonthumb {
      display: none; }
    .darktone .userdetail {
      padding-left: 0px;
      padding-right: 10px; } }

.lighttone {
  color: #383838;
  background-color: #f7f8fb;
  overflow-x: hidden;
  /*********************Main Layout  Style********************/
  /********************SIDEBAR NAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /*************************FORM**************************/
  /*****************************BUTTONS******************************/
  /************************Login   Style*************************/
  /*******************Chart Grid ****************/
  /*.modal-open*/
  /**********************Main file css************************/
  /******************************************************************************************
  MEDIA QUERY LAYOUT STRUCTURE
  @media (max-width: 767px) {XS DEVICE- EXTRA small:  for Mobile and Tablet}				
  @media (min-width: 768px) and (max-width: 991px) {SMALL DEVICE- iPad Protlat and old Desktop view}
  @media (min-width: 992px) and (max-width: 1199px) {MEDIUM DEVICE- iPad Landscap and large Desktop view}
  @media (min-width: 1200px) {LARGE DEVICE- Projector EXTRA large Desktop view}
  /******************************************************************************************/ }
  .lighttone a {
    color: #383838; }
  .lighttone * {
    outline: none !important; }
  .lighttone form {
    margin-bottom: 0px; }
  .lighttone html {
    height: 100%;
    margin: 0;
    padding: 0; }
  .lighttone a {
    cursor: pointer; }
  .lighttone a:focus, .lighttone a:active {
    outline: none; }
  .lighttone ol, .lighttone ul {
    padding: 0px;
    list-style: none; }
  .lighttone body > div {
    width: 100%;
    display: inline-block; }
  .lighttone select.form-control {
    line-height: 28px;
    padding: 5px 6px; }
  .lighttone .small-font {
    font-weight: normal;
    color: #0a88cc;
    text-transform: none; }
  .lighttone .width100 {
    width: 100%; }
  .lighttone .page-content.inset > .row {
    margin-left: 0px;
    margin-right: 0px; }
  .lighttone .table > tbody > tr > td, .lighttone .table > tbody > tr > th, .lighttone .table > tfoot > tr > td, .lighttone .table > tfoot > tr > th, .lighttone .table > thead > tr > td, .lighttone .table > thead > tr > th {
    border-color: #dedede; }
 
  .lighttone .theme-menu {
    float: left;
    width: auto;
    margin: 0; }
  .lighttone .theme-menu li {
    width: 20px;
    height: 20px;
    margin: 7px 3px;
    font-size: 0px;
    border: 0px solid #e2e2e2;
    cursor: pointer;
    float: left; }
  .lighttone .theme-menu li.darkcol {
    background: #28282e; }
  .lighttone .theme-menu li.lightcol {
    background: #fdfdfd; }

  .lighttone .themeicon {
    width: auto;
    padding: 4px;
    font-size: 15px;
    color: #333;
    margin: 7px 3px;
    float: left;
    cursor: pointer; }
 
  .lighttone ._720kb-datepicker-calendar-header:nth-child(odd) {
    background: #18B3A3; }
  .lighttone ._720kb-datepicker-calendar-header:nth-child(even) {
    background: #18B3A3; }
  .lighttone ._720kb-datepicker-calendar-day._720kb-datepicker-active, .lighttone ._720kb-datepicker-calendar-day:hover {
    background: #18B3A3; }
  .lighttone #wrapper {
    padding-left: 50px;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    height: 100%; }
  .lighttone #sidebar-wrapper {
    margin-left: -240px;
    left: 50px;
    top: 0px;
    border-top: 0px solid #18b3a3;
    width: 240px;
    background-color: #dfdfdf;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    padding-bottom: 60px; }
  .lighttone #sidebar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* border-right: 1px solid darken($colorA, 8%);*/ }
  .lighttone .sidebar-nav {
    display: block;
    float: left;
    width: 240px;
    list-style: none;
    margin: 0;
    padding: 0; }
  .lighttone #page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 52px; }
  .lighttone #wrapper .nav-top-fix {
    padding-left: 50px;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    background: #e3e2e3;
    border-top: 0px solid #18b3a3; }
  .lighttone #wrapper.active, .lighttone #wrapper.active .nav-top-fix {
    padding-left: 240px; }
  .lighttone #wrapper.active #sidebar-wrapper {
    left: 240px; }
  .lighttone .page-content {
    padding: 10px 8px; }
  .lighttone .sidebar-nav li a {
    color: #383838;
    display: block;
    float: left;
    text-decoration: none;
    width: 240px;
    box-shadow: 0px 1px 0px #cfcdcf;
    border-bottom: 1px solid #f7f7f7;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    -ms-transition: background .4s;
    transition: background .4s;
    position: relative; }
  .lighttone .sidebar-nav li {
    line-height: 48px; }
  .lighttone .sidebar-nav li a span {
    display: none;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s;
    font-size: 14px; }
  .lighttone .sidebar-nav li a i {
    font-size: 15px;
    padding: 12.5px 18px;
    display: block;
    text-align: right;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  .lighttone .sidebar-nav li.location a i {
    width: auto;
    padding: 17.5px 24px; }
  .lighttone #wrapper.active .sidebar-nav li a span {
    display: inline-block;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s; }
  .lighttone #wrapper.active .sidebar-nav li a i {
    transition: all .4s ease 0s;
    display: inline-block; }
  .lighttone #wrapper .sidebar-nav li a i {
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  .lighttone .sidebar-nav li a:hover, .lighttone .sidebar-nav li a.active {
    color: #383838;
    background: #cfcdcf;
    text-decoration: none;
    /* border-bottom: 1px solid #18b3a3; */ }
  .lighttone .sidebar-nav li a.active:after {
    font-family: "FontAwesome";
    content: "\f0d9";
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 30px; }
  .lighttone .navbar-top-links {
    right: 0px;
    position: absolute;
    margin-right: 0px; }
  .lighttone .sidebar-nav li:last-child:after {
    padding: 20px;
    content: " "; }
  .lighttone #sidebar_menu {
    margin-bottom: 0px;
    width: 240px;
    float: left;
    border-bottom: 1px solid #cccbcc; }
  .lighttone #sidebar_menu li {
    display: block;
    overflow: hidden; }
  .lighttone #sidebar_menu li a {
    width: 180px;
    padding: 1px 2px;
    text-align: center;
    color: #383838;
    display: block;
    float: left;
    text-decoration: none; }
  .lighttone #sidebar_menu li a img {
    max-height: 40px;
    margin-top: 3px;
    max-width: 100%; }
  .lighttone #main_icon {
    float: right;
    padding: 12px 14px;
    font-size: 21px;
    height: 48px;
    width: 50px;
    border-right: 1px solid #cfcdcf; }
  .lighttone #sidebar_menu li #main_icon a {
    width: auto;
    padding: 2px; }
  .lighttone #sidebar_menu li a:hover {
    opacity: 0.8; }
  .lighttone .tooltip {
    white-space: nowrap; }
  .lighttone #wrapper.active .sidebar-nav li .tooltip {
    display: none; }
  .lighttone .nav-top-fix ul.sub-nav li {
    border-right: 1px solid #cfcdcf; }
  .lighttone .nav-top-fix ul.sub-nav li a {
    color: #383838;
    transition: all .4s ease 0s;
    padding-top: 14px;
    padding-bottom: 13.5px;
    border-right: 0px solid #1f1f24;
    background: #e3e2e3; }
  .lighttone .nav-top-fix ul.sub-nav li a:hover, .lighttone .nav-top-fix ul.sub-nav li a.active {
    color: #fff;
    background: #0a88cc !important;
    border: none; }
  .lighttone .navbar {
    min-height: 49px;
    border-bottom: 1px solid #cfcdcf; }
  .lighttone .nav-top-fix .navbar-right > li {
    float: left;
    border-right: 1px solid #b1aeb1; }
  .lighttone .nav-top-fix .navbar-right > li:first-child {
    border-left: 1px solid #b1aeb1; }
  .lighttone .nav-top-fix .navbar-right li.dropdown-user > a:hover, .lighttone .nav-top-fix .navbar-right li.dropdown-user > a:focus, .lighttone .nav-top-fix .navbar-right li.notifications-menu > a:hover, .lighttone .nav-top-fix .navbar-right li.notifications-menu > a:focus {
    background: #d4d2d4; }
  .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
    border-radius: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    min-width: 152px;
    right: -1px; }
  .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
    display: block; }
  .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a {
    display: block;
    color: #e3e2e3;
    cursor: pointer; }
  .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a:hover {
    color: #0a88cc; }
  .lighttone .nav-top-fix .navbar-right li > a, .lighttone .nav-top-fix .navbar-right li span {
    color: #383838;
    line-height: 1.5em;
    display: inline-block;
    padding: 14px 15px; }
  .lighttone .nav-top-fix .navbar-right li.open > a:focus, .lighttone .nav-top-fix .navbar-right li.open > a:hover {
    background: #e3e2e3; }
  .lighttone .nav-top-fix .navbar-right li.notifications-menu > a {
    padding: 14px;
    font-size: 20px;
    color: #383838;
    position: relative;
    height: 48px; }
  .lighttone .nav-top-fix .navbar-right li.notifications-menu > a .label-warning {
    position: absolute;
    top: 4px;
    font-size: 11px;
    right: 8%;
    padding: 0.2em 0.4em; }
  .lighttone .head-box .box-outter {
    background: #fff; }
  .lighttone .formsection .btn-blue {
    margin-left: 0px !important;
    margin-top: 0px !important; }
  .lighttone .boxforbox {
    margin: 15px 0 0 0;
    width: 20%;
    padding: 0px 0.5% !important; }
  .lighttone .boxforbox .panel {
    border: medium none;
    margin-bottom: 0px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.09);
    background: #F2F3F4;
    border: 1px solid #ddd; }
  .lighttone .boxforbox .panel .panel-body {
    padding: 15px 12px 15px 72px;
    position: relative; }
  .lighttone .boxforbox .panel .panel-body h6 {
    font-size: 12px;
    margin: 0px;
    height: 30px;
    line-height: 12px;
    font-weight: 600; }
  .lighttone .boxforbox .panel .panel-body h3 {
    font-size: 24px;
    color: #383838;
    font-weight: 600;
    margin: 0px auto;
    line-height: 22px;
    letter-spacing: -0.5px; }
  .lighttone .boxforbox .round-icon {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 28px;
    text-align: center;
    width: 70px;
    height: 100%;
    display: block;
    line-height: 35px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 22px 20px; }
  .lighttone .box {
    margin-top: 10px; }
  .lighttone .panel {
    border-radius: 4px;
    border: 1px solid #dedede;
    position: relative;
    background: #fff;
    display: inline-block;
    width: 100%; }
  .lighttone .panel-title {
    color: #383838;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 32px;
    font-weight: 600; }
  .lighttone .padding0 {
    padding: 0px !important; }
  .lighttone .table {
    margin-bottom: 0px; }
  .lighttone .table-hover > tbody > tr:hover {
    background-color: #f2f3f9; }
  .lighttone label {
    font-weight: 400; }
  .lighttone .inputcontrol, .lighttone .form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: none;
    color: #383838;
    display: block;
    font-size: 12px;
    line-height: normal;
    padding: 5px 10px;
    transition: none 0s ease 0s;
    width: 100% !important; }
  .lighttone .input-group-addon {
    padding: 5px 6px;
    border-radius: 0px; }
  .lighttone .date-filter .input-group {
    width: 49%; }
  .lighttone .input-group .form-control {
    padding: 4px; }
  .lighttone .btn-group.bootstrap-select {
    margin-bottom: 0px !important; }
  .lighttone .bootstrap-select > .btn {
    border-radius: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px; }
  .lighttone .panel-filter {
    padding: 8px; }
  .lighttone .panel-filter .form-group {
    margin-bottom: 0px; }
  .lighttone .panel-filter .form-group .inputcontrol {
    padding: 3px 10px; }
  .lighttone .pagination {
    margin: 10px 0px; }
  .lighttone .btn:focus, .lighttone .btn:active:focus {
    outline: none; }
  .lighttone .btn-blue {
    background: #e3e2e3;
    color: #383838;
    margin: 5px 5px 5px 0px; }
  .lighttone .btn-blue:hover, .lighttone .btn-blue:focus {
    background: #383838;
    color: #383838; }
  .lighttone .btn-red {
    background: #0a88cc;
    color: #383838;
    margin: 5px; }
  .lighttone .btn-red:hover {
    background: #c9302c;
    color: #383838; }
  .lighttone .btn-action-edit, .lighttone .btn-action-check, .lighttone .btn-action-remove {
    width: 24px;
    height: 20px;
    color: #383838;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #f2f3f9;
    display: inline-block;
    line-height: 1.3em;
    text-align: center;
    margin: 0px 1px;
    vertical-align: top; }
  .lighttone .btn-container {
    width: 26px;
    height: 20px;
    display: inline-block;
    vertical-align: top; }
  .lighttone a.btn-container:focus, .lighttone a.btn-container:hover {
    text-decoration: none; }
  .lighttone .btn-action-check {
    color: #18b3a3; }
  .lighttone .btn-action-remove {
    color: #0a88cc; }
  .lighttone .mtop5 {
    margin-top: 5px; }
  .lighttone .mtop10 {
    margin-top: 10px; }
  .lighttone .mtop12 {
    margin-top: 12px; }
  .lighttone .mtop20 {
    margin-top: 20px; }
  .lighttone .mbot0 {
    margin-bottom: 0px !important; }
  .lighttone .mbot10 {
    margin-bottom: 10px; }
  .lighttone .mRight10 {
    margin-right: 10px; }
  .lighttone .disable-slider {
    width: 100% !important; }
  .lighttone .disable-slider .pull-right {
    margin-top: -3px; }
  .lighttone .newofferdiv {
    display: none;
    margin-top: 10px; }
  .lighttone .table-caption {
    display: table-caption; }
  .lighttone .btn-newoffer-active, .lighttone .btn-black {
    background: #0a88cc !important;
    border: 1px solid #0a88cc !important;
    margin-left: 5px; }
  .lighttone .btn-newoffer-active:hover {
    background: #383838 !important; }
  .lighttone .discountype .bootstrap-select {
    padding: 0px !important;
    margin-left: -1px !important; }
  .lighttone .discountype .form-control {
    position: absolute;
    top: 0; }
  .lighttone .discountype .bootstrap-select.btn-group .btn .filter-option {
    padding-right: 6px; }
  .lighttone .pagination li a {
    margin-left: 2px; }
  .lighttone .pagination li.active a, .lighttone .pagination li.active a:hover, .lighttone .pagination li.active a:focus {
    background: #f2f3f9 !important;
    border-color: #dedede;
    border-width: 1px;
    color: #383838; }
  .lighttone .pagination li a i {
    line-height: 18.5px;
    width: 9px; }
  .lighttone .offer-footer {
    padding: 7px 15px;
    overflow: hidden; }
  .lighttone .offer-footer .pagination {
    margin: 0px; }
  .lighttone .panel-footer.offer-footer {
    padding: 0;
    min-height: 42px; }
  .lighttone .panel-footer .pagination {
    padding: 8px 12px; }
  .lighttone .highlight_row {
    background: orange; }
  .lighttone .usertable th, .lighttone .usertable td {
    font-size: 12px;
    border: none !important;
    padding: 7px 6px !important; }
  .lighttone .usertable table {
    margin: 6px 0px 12px 0 !important; }
  .lighttone .usertable th {
    color: #383838;
    font-weight: normal;
    width: 150px; }
  .lighttone .legend-0line {
    /*stroke: #9babda !important;*/
    stroke-width: 3 !important; }
  .lighttone .legend-1line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .lighttone .legend-2line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .lighttone .legend-3line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .lighttone .legend-4line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .lighttone .browsertext {
    background: url(../images/chrome.png) no-repeat top left;
    padding-left: 40px;
    position: absolute;
    top: 10px;
    right: 0;
    text-align: left;
    padding-right: 15px;
    min-height: 34px;
    font-size: 12px; }
  .lighttone .login {
    background: url(../images/BG.jpg) no-repeat center center;
    height: 100%;
    background-size: cover; }
  .lighttone .login body {
    background: transparent; }
  .lighttone .form-signin input[type="text"] {
    margin-bottom: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .lighttone .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .lighttone .form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .lighttone .vertical-offset-100 {
    padding-top: 70px; }
  .lighttone .login .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto auto 10px auto; }
  .lighttone .login .panel {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
  .lighttone .login .panel-heading {
    background: #e3e2e3;
    color: #383838;
    font-size: 16px;
    padding: 16px 0; }
  .lighttone .col-sm-offset-3 {
    perspective: 800px; }
  /* .lighttone .login .login-form {
    background: #fff;
    border: 0px;
    margin-top: 10px; 
  } */
  .lighttone .login .login-form a {
    text-decoration: none; }
  .lighttone .login .login-form a:hover {
    text-decoration: none; }
  .lighttone .login .login-form label {
    margin-top: 1px;
    font-size: 14px; }
  .lighttone .login .login-form .inputcontrol, .lighttone .login .login-form .form-control {
    height: 40px; }
  .lighttone .login-bottom {
    margin: 4px 0 16px 0;
    padding: 10px 15px;
    overflow: hidden; }
  .lighttone .login-bottom a {
    color: #f2f3f9; }
  .lighttone .login-bottom a:hover {
    color: #383838; }
  .lighttone .login .login-form .login-bottom label {
    display: inline;
    color: #383838; }
  .lighttone .forget-pass {
    margin-top: 5px;
    display: inline-block; }
  .lighttone #login_form .input-group-addon {
    padding-left: 12px;
    padding-right: 12px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px; }
  .lighttone #login_form .has-success .input-group-addon:first-child, .lighttone #login_form .has-error .input-group-addon:first-child {
    border-right-width: 1px;
    border-style: solid; }
  .lighttone .login .login-form .form-control {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; }
  .lighttone .login .form-group {
    height: auto; }
  .lighttone .login .form-control-feedback {
    line-height: 40px;
    height: 40px;
    top: 23px !important;
    right: 15px; }
  .lighttone .loginbtn {
    width: 100%;
    height: 42px;
    border: 0px solid #000;
    background: #e3e2e3;
    border-bottom: 0px solid #000;
    font-size: 16px;
    font-weight: 300; }
  .lighttone .container-login {
    position: relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px; }
  .lighttone .container-login .card {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .lighttone .container-login .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }
  .lighttone .container-login .card.flipped, .lighttone .container-login .card .face2 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .lighttone .store {
    display: none; }
  .lighttone .buttons {
    text-align: center; }
  .lighttone .container-login .panel-body {
    padding-bottom: 0px; }
  .lighttone .verticalGridLine {
    display: none; }
  .lighttone .horizontalGridLine {
    stroke-width: 0.2 !important; }
  .lighttone .drivinscroe {
    margin-top: 15px; }
  .lighttone .drivinscroe .slider.slider-horizontal {
    width: 100% !important; }
  .lighttone #wrapper.active .sidebar-nav li.location a i {
    font-size: 18px;
    padding: 17.5px 18px;
    text-align: left;
    width: 44px; }
  .lighttone .breadcrumb {
    display: none !important; }
  .lighttone .greypanel .panel-footer {
    background: #f2f3f9;
    border-color: #dedede; }
  .lighttone .greypanel .panel-heading .panel-title i {
    color: #18B3A3;
    background: #fff;
    padding: 14px 11px;
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    border-right: 1px solid #dedede;
    width: 48px;
    text-align: center; }
  .lighttone .greypanel .panel-heading .panel-title i.fa-male:after {
    content: "\f182"; }
  .lighttone .greypanel .panel-heading {
    background: #f2f3f9;
    border-color: #dedede;
    box-shadow: none;
    position: relative;
    padding: 7px 15px 7px 54px;
    display: inline-block;
    width: 100%; }
  .lighttone .formhead > i {
    color: #18B3A3;
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    width: 52px;
    background: #fff;
    padding: 14px 16px;
    border-right: 1px solid #e0e0e4; }
    /* .bluetone .formhead > i {
      color: #0a88cc;
      font-size: 18px;
      position: absolute;
      left: 0px;
      top: 0px;
      border-top-left-radius: 4px;
      height: 100%;
      width: 52px;
      background: #fff;
      padding: 14px 16px;
      border-right: 1px solid #e0e0e4; } */
  .lighttone .box .panel-default > .panel-heading {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
  .lighttone .table > thead > tr > th {
    font-weight: 600;
    font-size: 12px;
    color: #383838;
    border-bottom-width: 2px;
    background: rgba(242, 243, 249, 0.5);
    vertical-align: top;
    border-color: #dedede; }
  .lighttone .table > tbody > tr > td {
    font-size: 12px !important;
    word-break: break-all; }
  .lighttone .slider .tooltip.top {
    z-index: 1025; }
  
  .lighttone .driving-scrore ul {
    margin-top: 0px; }
 .driving-scrore ul li {
    list-style: none;
    margin: 2px 0px;
    font-size: 30px;
    padding: 0px 15px;
    width: 100%;
    float: left; }
 .driving-scrore ul li small {
    font-size: 12px; }
.driving-scrore ul li i {
    color: #0a88cc;
    display:none;
    width: 20px; }
  .driving-scrore ul li.heading-scrore {
    /*text-transform:uppercase;*/
    color: #383838;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    float: left;
    text-align: left;
    padding-top: 12px; }
  .lighttone .userdetailtable th, .lighttone .userdetailtable td {
    padding: 5px 8px !important;
    border-color: #f1f1f1 !important;
    position: relative; }
  .lighttone .userdetailtable td .errorMsg {
    top: -18px; }
  .lighttone .userdetailtable td > .date {
    width: 100%; }
  .lighttone .userdetailtable td .form-control {
    height: 28px;
    padding: 5px 7px; }
  .lighttone .userdetailtable td textarea.form-control {
    height: auto; }
  .lighttone .driving-scrore-chart {
    width: 60%;
    height: 280px;
    float: left;
    /*border-right: 1px solid #dedede;*/
    padding: 20px 15px; }
    /*Overriding Score Board Style It is needed while merging*/
  /*.lighttone .bod-bot {
    border-top: 1px solid #dedede;
    margin-top: 12px !important;
    padding-top: 12px !important; }*/
  .lighttone .margin-right15 {
    padding-right: 15px; }
  .lighttone .user-name {
    display: none;
    min-height: 167px;
    -webkit-transition: max-height, 0.5s ease;
    -moz-transition: max-height, 0.5s ease;
    -ms-transition: max-height, 0.5s ease;
    -o-transition: max-height, 0.5s ease;
    transition: max-height, 0.5s ease;
    overflow-y: scroll; }
  .lighttone .user-name.open {
    max-height: 300px;
    display: block; }
  .lighttone .no-record {
    margin-top: 5px;
    padding: 6px 12px;
    margin-left: 10px; }
  .lighttone .search-div {
    position: absolute;
    max-height: 300px;
    z-index: 99;
    width: 86%;
    margin-top: -10px; }
  .lighttone .search-div i {
    color: #383838;
    font-size: 40px;
    margin-left: 5px; }
  .lighttone .search-div ul {
    border: 2px solid #383838;
    background-color: #fff;
    border-radius: 4px;
    margin-top: -13px;
    max-height: 300px;
    overflow-x: hidden; }
  .lighttone .search-div ul li {
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #dedede;
    padding: 10px; }
  .lighttone .search-div ul li:hover {
    background: #f2f3f9; }
  .lighttone .search-wrapper {
    position: relative;
    padding: 8px 10px; }
  .lighttone .search-box, .lighttone .search-wrapper {
    position: relative;
    padding: 8px 10px 8px 24px; }
  .lighttone .search-control {
    position: relative; }
  .lighttone .search-control .addon-thumb:first-child {
    position: absolute;
    left: 8px;
    top: 12px;
    z-index: 1;
    font-size: 16px; }
  .lighttone .search-control .addon-thumb:last-child {
    position: absolute;
    right: 5px;
    top: 12px;
    z-index: 1;
    text-align: center; }
  .lighttone .search-box {
    width: 100% !important;
    outline: 0;
    padding: 8px 10px 8px 24px !important;
    height: 42px; }
  .lighttone .close-icon {
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
    padding: 1px;
    border-radius: 50%;
    width: 22px;
    height: 22px; }
  .lighttone .subtablerow td {
    padding: 0px !important; }
  .lighttone .cal-div {
    position: relative; }
  .lighttone .cal-div label.cal {
    margin-top: 9px;
    position: absolute;
    right: 7px;
    top: 0px;
    color: #0a88cc; }
  .lighttone .cal-div input[readonly] {
    cursor: pointer; }
  .lighttone .checkcol {
    width: 22px;
    text-align: left; }
  .lighttone .offer-check {
    float: left;
    margin-top: 2px !important; }
  .lighttone .top-radio {
    width: 85%;
    margin: 0px auto;
    display: inline-block; }
  .lighttone .top-radio span {
    display: inline-block;
    margin: 0px 10px; }
  .lighttone .inline-heading {
    display: inline-block; }
  .lighttone .driving-map {
    padding: 0px;
    position: relative; }
  .lighttone .driving-map #drivingEventsLocation {
    width: 100%;
    height: 313px; }
  .lighttone .map-legend {
    background: rgba(255, 255, 255, 0.8);
    display: table;
    border: 1px solid #dedede;
    position: absolute;
    top: 10px;
    right: 50px;
    padding: 0px 5px;
    z-index: 9; }
  .lighttone .map-legend li {
    list-style: none;
    color: #626262;
    position: relative;
    padding: 5px 5px 5px 25px;
    cursor: pointer;
    line-height: 20px }
  .lighttone .map-legend li#dangerousManoeuvre, .lighttone .map-legend li#dangerousManoeuvre_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 0px; }
  .lighttone .map-legend li#hardBrake, .lighttone .map-legend li#hardBrake_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -30px; }
  .lighttone .map-legend li#rapidAcceleration, .lighttone .map-legend li#rapidAcceleration_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -60px; }
  .lighttone .map-legend li#speedViolation, .lighttone .map-legend li#speedViolation_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -90px; }
  .lighttone .map-legend li#phoneUsages, .lighttone .map-legend li#phoneUsages_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -517px; }
  .lighttone .marginL05 {
    margin-left: 5px; }
  .lighttone .unselectDrivingEvent {
    text-decoration: line-through; }
  .lighttone .customtab > li > a {
    color: #383838;
    border-radius: 0px;
    background: #fff;
    padding: 12px 15px; }
  .lighttone .customtab {
    border-bottom: 0px solid #dedede; }
  .lighttone .customtab > li {
    margin-bottom: -1px; }
  .lighttone .customtab > li.active > a, .lighttone .customtab > li.active > a:focus, .lighttone .customtab > li.active > a:hover {
    background: #18B3A3;
    color: #fff;
    border-color: #18B3A3; }
  .lighttone .customtab > li a:focus, .lighttone .customtab > li a:hover {
    background: #18B3A3;
    color: #fff; }
  .lighttone .boxtabing .panel {
    width: 100%;
    float: left; }
  .lighttone .boxtabing .btn {
    margin-bottom: 8px; }
  .lighttone .formsection {
    width: 100%;
    float: left;
    padding-bottom: 12px;
    margin: 0px 0px 24px;
    border-radius: 4px;
    background: #fff;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-left: 1px solid #dedede; }
  .lighttone .formhead {
    width: 100%;
    float: left;
    margin-bottom: 12px;
    color: #383838;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    background: #f2f3f9;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 14px 15px 14px 60px;font-weight:bold }
    .bluetone .formhead {
      width: 100%;
      float: left;
      margin-bottom: 12px;
      color: #383838;
      text-transform: uppercase;
      position: relative;
      font-size: 14px;
      background: #f2f3f9;
      border-top: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      padding: 14px 15px 14px 60px;font-weight:bold }
  .lighttone .searchbtn {
    float: right;
    color: #fff !important;
    background-color: #18B3A3;
    border-color: #18B3A3
     }
  .lighttone .searchbtn.collapsed, .lighttone .addbtn.collapsed {
    background: #18b3a3 !important;
    border-color: #18b3a3 !important;
    color: #fff !important; }
  .lighttone .addbtn {
    float: right;
    color: #fff !important;
    background: #0a88cc;
    border-color: #0a88cc;
    padding: 5px 10px;
    width: auto;
    font-size: 14px;
    margin-bottom: 8px; }
  .lighttone .addbtn.collapsed i.fa-minus:before {
    content: "" !important;
    font-family: fontawesome; }
  .lighttone button.bluebtn {
    background-color: #e3e2e3;
    border-color: #e3e2e3;
    color: #383838; }
  .lighttone .bluebtn:focus, .lighttone .bluebtn:hover {
    color: #383838;
    background-color: #383838;
    border-color: #383838; }
  .lighttone .boxtabing th .offerall {
    vertical-align: middle;
    margin: 2px 0px 0px 0px; }
  .lighttone .modal.full-width-modal-right .modal-dialog {
    height: 100%;
    margin: 0;
    position: absolute;
    right: 0; }
  .lighttone .full-width-modal-right .modal-title {
    font-size: 16px;
    margin-top: 2px; }
  .lighttone .full-width-modal-right .modal-content {
    border-radius: 0px;
    border: 0px solid #000;
    height: 100%; }
  .lighttone .full-width-modal-right .modal-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 300px;
    border: none; }
  .lighttone .borderbadge {
    border: 1px solid #383838;
    background: none;
    padding: 5px 8px; }
  .lighttone .cleanbadge {
    background: none !important;
    padding: 5px 8px;
    border: 1px solid #c0c0c0;
    margin: 2px 1px;
    color: #535658 !important; }
  .lighttone .modalbodyinner {
    height: 100%;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e5e5e5; }
  .lighttone .modalbodyinner .mCSB_container {
    width: 100% !important; }
  .lighttone .popheadrow {
    width: 100%;
    padding: 15px;
    background: #f2f3f9;
    border-bottom: 1px solid #dedede;
    color: #383838;
    font-size: 20px; }
  .lighttone .popheadrow p {
    color: #383838;
    font-size: 12px;
    padding-top: 6px;
    margin-bottom: 0; }
  .lighttone .poprow {
    width: 100%;
    display: inline-block;
    padding: 0px 10px 0px 5px;
    border-bottom: 1px solid #dedede;
    font-size: 12px;
    cursor: pointer; }
  .lighttone .poprow:hover, .lighttone .poprow.active {
    background: #f2f3f9; }
  .lighttone .poprow.active .popcheck {
    background: #2282d8; }
  .lighttone .notification-sidebar .poprow.active .popcheck {
    background: #2282d8; }
  .lighttone .offer-sidebar .poprow.active .popcheck {
    background: #e67e22; }
  .lighttone .suggestion-sidebar .poprow.active .popcheck {
    background: #5cb85c; }
  .lighttone .filtermodal .poprow.active .popcheck {
    background: #0a88cc; }
  .lighttone .popleft {
    float: left;
    width: 22%;
    vertical-align: top;
    border-right: 1px solid #dedede;
    margin-right: -1px; }
  .lighttone .popright {
    width: 78%;
    border-left: 1px solid #dedede;
    padding: 12px 8px;
    margin-top: -1px;
    float: left;
    vertical-align: top;
    position: relative; }
  .lighttone .popicon {
    max-width: 78px;
    height: auto;
    float: right;
    text-align: right;
    position: absolute;
    right: 4px;
    top: 10px; }
  .lighttone .popicon:hover {
    opacity: 1; }
  .lighttone .popname {
    color: #383838;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    position: relative;
    padding-bottom: 5px;
    padding-right: 30px;
    word-break: break-all; }
  .lighttone .popcheck {
    float: right;
    width: 26px;
    height: 26px;
    background: rgba(98, 98, 98, 0.4);
    padding: 6px;
    margin: 8px 8px 0 0;
    clear: both;
    border-radius: 50%;
    color: #fff;
    text-align: center; }
  .lighttone .popcheck i {
    line-height: 14px; }
  .lighttone .popcheck input[type="checkbox"] {
    margin-top: 0px; }
  .lighttone .popinfo, .lighttone .statusrow {
    width: 100%;
    display: inline-block; }
  .lighttone .popinfo p {
    margin-bottom: 5px;
    color: #383838;
    word-break: break-all; }
  .lighttone .popstatus {
    width: 100%;
    float: right;
    padding: 4px 6px 4px 0;
    text-align: right;
    color: #c1c8ce;
    font-size: 10px; }
  .lighttone .poprow .en-able {
    color: #5cb85c;
    font-size: 11px;
    width: 100%;
    float: right;
    font-weight: 600; }
  .lighttone .poprow.dis-able {
    color: #0a88cc;
    font-size: 11px;
    width: 100%;
    float: right; }
  .lighttone .popdate {
    width: 100%;
    float: left;
    text-align: left;
    color: #383838;
    font-size: 10px;
    padding-bottom: 5px; }
  .lighttone .offerdiscount {
    width: 100%;
    float: right;
    clear: both;
    text-align: right;
    line-height: 20px;
    padding-right: 4px;
    color: #383838;
    margin: 7px 8px 7px 0px;
    font-weight: 600; }
  .lighttone .offerdiscount span {
    font-size: 10px;
    color: #383838;
    font-weight: 400;
    float: right;
    line-height: 20px;
    padding-left: 2px; }
  .lighttone .gen {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -146px;
    padding: 10px;
    display: inline-block; }
  .lighttone .mkt {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -176px;
    padding: 10px;
    display: inline-block; }
  .lighttone .main {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -204px;
    padding: 10px;
    display: inline-block; }
  .lighttone .fe {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -232px;
    padding: 10px;
    display: inline-block; }
  .lighttone .ser {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -262px;
    padding: 10px;
    display: inline-block; }
  .lighttone .dr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -290px;
    padding: 10px;
    display: inline-block; }
  .lighttone .fr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -319px;
    padding: 10px;
    display: inline-block; }
  .lighttone .ts {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -347px;
    padding: 12px;
    display: inline-block; }
  .lighttone .hbd {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -380px;
    padding: 12px;
    display: inline-block; }
  .lighttone .ra {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -415px;
    padding: 12px;
    display: inline-block; }
  .lighttone .sv {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -449px;
    padding: 12px;
    display: inline-block; }
  .lighttone .dm {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -485px;
    padding: 12px;
    display: inline-block; }
  .lighttone .popdrop {
    width: 120px;
    float: right;
    margin: 0px 8px 0px 0px;
    font-size: 12px; }
  .lighttone .popdrop .btn {
    padding: 3px 10px 3px 7px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    border-color: #fff; }
  .lighttone .popdrop .btn .caret {
    text-align: right;
    position: absolute;
    right: 6px;
    top: 10px; }
  .lighttone .popdrop li a {
    font-size: 12px; }
  .lighttone .popdrop .dropdown-menu {
    min-width: 128px; }
  .lighttone .subtablerow {
    background: rgba(242, 243, 249, 0.6);
    border-bottom: 1px solid #dedede; }
  .lighttone .blankfilter {
    color: #383838;
    text-shadow: 0px 0px 1px #000; }
  .lighttone .universalfilter {
    color: #383838;
    text-shadow: none; }
  .lighttone .conditionalfilter {
    color: #0a88cc;
    text-shadow: none; }
  .lighttone .participentab .panel {
    border-top: 0 solid #dedede; }
  .lighttone .horizontal.fade .modal-dialog {
    transform: translate(25%, 0%);
    transition: transform 0.5s ease-out 0s;
    -webkit-transform: translate(25%, 0%);
    -webkit-transition: transform 0.5s ease-out 0s;
    -ms-transform: translate(25%, 0%);
    -ms-transition: transform 0.5s ease-out 0s;
    -o-transform: translate(25%, 0%);
    -o-transition: transform 0.5s ease-out 0s; }
  .lighttone .horizontal.in .modal-dialog {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px); }
  .lighttone .nowrap {
    white-space: nowrap; }
  .lighttone .en-disbtn {
    vertical-align: text-top; }
  .lighttone .word-break > td {
    word-break: break-all; }
  .lighttone .pagination li a {
    padding: 3px 8px !important; }
  .lighttone #wrapper.active .sidebar-nav li a i {
    transition: all 0.4s ease 0s;
    width: 44px; }
  .lighttone .userinfo {
    width: 100%;
    float: left;
    padding: 30px 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .lighttone .userthumb {
    width: 100%;
    display: inline-block;
    min-height: 123px; }
  .lighttone .userthumb img {
    max-width: 100%;
    border: 10px solid #dedede; }
  .lighttone .thumbinfo {
    width: 100%;
    text-align: center;
    color: #383838;
    font-size: 14px;
    padding: 12px 0 6px 0;
    display: inline-block;
    line-height: 20px;
    min-height: 54px; }
  .lighttone #loading-bar .bar {
    background: #0a88cc;
    height: 3px; }
  .lighttone #loading-bar-spinner .spinner-icon {
    width: 18px;
    height: 18px;
    border: solid 4px transparent;
    border-top-color: #383838;
    border-left-color: #383838;
    border-radius: 10px; }
  .lighttone .boxtabing .box {
    display: inline-block;
    margin-top: 10px;
    width: 100%; }
  .lighttone .modal {
    z-index: 10002 !important; }
  .lighttone .modal-dialog {
    z-index: 10002 !important; }
  .lighttone .modal-backdrop {
    z-index: 10001 !important; }
  .lighttone .modal {
    background: rgba(0, 0, 0, 0.7); }
  .lighttone .modal-header {
    color: #fff;
    padding: 12px 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1; }
  .lighttone .filtermodal .modal-header {
    background: #d9534f; }
  .lighttone #modeloffer.modal {
    z-index: 10040; }
  .lighttone #modeloffer .modal-body {
    padding: 50px 0px 65px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden; }
  .lighttone #modeloffer .modal-title {
    width: auto;
    display: inline-block; }
  .lighttone .fullwidth {
    width: 100%;
    display: inline-block; }
  .lighttone .cal-div .input-group .form-control {
    padding: 5px 10px; }
  .lighttone .rangecontainer {
    width: 100%;
    float: left;
    position: relative;
    padding-right: 50px; }
  .lighttone .slider-eye {
    font-size: 1.4em;
    float: left;
    position: absolute;
    right: 6px;
    top: 3px; }
  .lighttone .rangeslider {
    width: 100%;
    float: left;
    margin: 6px 0px 0 7px; }
  .lighttone .uislider .ui-slider-range {
    background: #18B3A3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }
  .lighttone .notification-sidebar .modal-header, .lighttone .notification-sidebar .modal-footer .btn-danger {
    background: #18B3A3;
    border-color: #18B3A3; }
  .lighttone .offer-sidebar .modal-header, .lighttone .offer-sidebar .modal-footer .btn-danger {
    background: #e67e22;
    border-color: #cd6d17; }
  .lighttone .suggestion-sidebar .modal-header, .lighttone .suggestion-sidebar .modal-footer .btn-danger {
    background: #5cb85c;
    border-color: #5cb85c; }
  .lighttone .uislider .ui-slider-handle {
    background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)) repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: absolute;
    top: -0.4em;
    width: 20px;
    z-index: 3; }
  .lighttone .uislider .ui-slider-handle:after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px; }
  .lighttone .ui-slider-tip {
    width: auto !important;
    background: #e3e2e3;
    border-radius: 4px;
    padding: 1px 6px;
    color: #383838;
    font-size: 11px;
    position: absolute;
    bottom: -21px; }
  .lighttone .ui-slider-tip:after {
    font-family: fontawesome;
    content: "\f0d8";
    position: absolute;
    left: 6px;
    top: -9px;
    font-size: 14px;
    color: #e3e2e3; }
  .lighttone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip {
    position: absolute;
    bottom: -22px;
    right: 0px; }
  .lighttone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip:after {
    right: 4px;
    left: auto;
    top: -9px; }
  .lighttone .rangeslider {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    border: none;
    background: #383838; }
  .lighttone .discountype {
    width: 100%; }
  .lighttone .discountype .input-group-btn {
    width: 42px; }
  .lighttone .errorMsg {
    transition: all 0.4s ease 0s;
    color: #d9534f;
    background: #f9dddd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    position: absolute;
    top: -4px;
    right: 15px;
    z-index: 99;
    border: 1px solid #d9534f;
    line-height: 14px; }
  .lighttone .errorMsg:after {
    font-family: fontawesome;
    content: "\f0d7";
    position: absolute;
    right: 6px;
    bottom: -10px;
    font-size: 18px;
    color: #e7908d; }
  .lighttone .date .btn-blue {
    margin: 0; }
  .lighttone .cal-div {
    width: 100%;
    display: inline-block;
    float: left; }
  .lighttone .date .input-group-addon {
    cursor: pointer; }
  .lighttone .filtermodal .popname {
    padding-left: 0px; }
  .lighttone .filtermodal {
    font-size: 12px; }
  .lighttone .applybtn {
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    padding: 3px 8px;
    margin-top: 8px; }
  .lighttone .applybtn input[type="checkbox"] {
    margin: 3px 6px 3px 0px;
    float: left; }
  .lighttone .dropdown .btn {
    margin-bottom: 0px;
    padding: 3px 10px; }
  .lighttone table .dropdown-menu > li > a {
    padding: 3px 10px;
    font-size: 13px; }
  .lighttone .pagination > li > a, .lighttone .pagination > li > span {
    position: static; }
  .lighttone .customdateicon {
    position: absolute;
    right: 1px;
    top: 1px;
    color: #18B3A3;
    cursor: pointer;
    z-index: 1;
    padding: 9px 8px 10px 6px;
    font-size: 14px; }
  .lighttone .customdateicon .fa-calendar:before {
    font-family: fontawesome;
    font-weight: 300; }
  .lighttone .cal-div .fullwidth .form-control {
    background: none;
    position: relative;
    z-index: 2;
    padding-right: 28px; }
  .lighttone .cal-div .fullwidth {
    background: #fff;
    position: relative; }
  .lighttone .offer-footer button {
    margin: 6px 15px; }
  .lighttone .action-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; }
  .lighttone .panelFilter .approval-pending td:first-child {
    border-left: 2px solid #f0ad4e !important; }
  .lighttone .panelFilter .on-going td:first-child {
    border-left: 2px solid #5cb85c !important; }
  .lighttone .panelFilter .completed td:first-child {
    border-left: 2px solid #d9534f !important; }
  .lighttone .panelFilter .no-status td:first-child {
    border-left: 2px solid #dedede; }
  .lighttone #gameAll table {
    border-collapse: collapse; }
  .lighttone form textarea.form-control {
    height: 34px;
    resize: none;
    line-height: 22px; }
  .lighttone .textblock textarea.form-control {
    height: 111px;
    resize: none;
    line-height: 22px; }
  .lighttone .form-group.textblock {
    height: auto; }
  .lighttone .emptybox {
    width: 283px;
    float: left;
    text-align: center;
    padding: 30px 48px;
    font-size: 20px;
    color: #383838;
    font-weight: 300; }
  .lighttone .emptybox i {
    font-size: 64px;
    color: #dedede;
    padding: 12px; }
  .lighttone .customdropdown {
    width: 100%;
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #383838;
    text-align: left; }
  .lighttone .customdropdown .btn {
    padding: 7.5px 16px 7.5px 8px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    color: #383838;
    text-overflow: ellipsis;
    overflow: hidden; }
  .lighttone .customdropdown .btn .caret {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 14px; }
  .lighttone .customdropdown li a {
    font-size: 12px;
    color: #383838;
    text-overflow: ellipsis;
    overflow: hidden; }
  .lighttone .customdropdown .dropdown-menu {
    width: 100%;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto; }
  .lighttone .date {
    display: inline-block;
    font-size: 13px;
    color: #383838; }
  .lighttone .customdropdown.fiterdown {
    width: 180px;
    float: right; }
  .lighttone .customdropdown.fiterdown .btn {
    padding: 6.5px 10px !important;
    font-size: 13px;
    color: #383838;
    background: #fff; }
  .lighttone .customdropdown.fiterdown li a {
    font-size: 13px; }
  .lighttone .redgradbtn {
    background-color: #18B3A3;
    border: 1px solid #18B3A3;
    color: #fff; }
  .lighttone .redgradbtn:hover, .lighttone .redgradbtn:focus {
    background-color: rgb(16, 122, 112);
    border: 1px solid rgb(16, 122, 112);
    color: #fff; }
  .lighttone .customtip {
    white-space: nowrap;
    padding: 4px 6px;
    min-width: 50px;
    filter: none; }
  .lighttone .tableScroll {
    max-height: 270px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 100%;
    float: left; }
  .lighttone table.usertable tbody > tr > td {
    padding: 8px !important;
    border-top: 1px solid #dedede !important; }
  .lighttone .fullbtn {
    width: 100%;
    float: left;
    text-align: left;
    padding: 16px 12px;
    position: relative;
    margin-bottom: 8px;
    white-space: normal;
    font-size: 15px; }
  .lighttone .fullbtn:after {
    /* content: "\f061"; */
    font-family: fontawesome;
    position: absolute;
    right: 12px;
    top: 16px; }
  .lighttone .noicon.fullbtn:after {
    content: ""; }
  .lighttone .userform > .panel-body > .fullwidth {
    padding: 20px 0;
    border: 1px solid #dedede;
    border-top: 0px solid transparent;
    margin: 0; }
  .lighttone .userform {
    padding: 0px;
    display: block;
    width: 100%; }
  .lighttone .top-radio > span > label {
    cursor: pointer; }
  .lighttone .form-group label {
    width: 100%;
    float: left; }
  .lighttone .form-group .date {
    width: 100%;
    float: left; }
  .lighttone .groupinline .form-group {
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
    min-height: 34px; }
  .lighttone .pos-relative {
    position: relative; }
  .lighttone .nodata {
    width: 100%;
    text-align: center;
    display: inline-block;
    height: inherit;
    left: 0;
    right: 0;
    top: 0;
    position: absolute; }
  .lighttone .nodata img {
    max-width: 100%;
    max-height: 100%; }
  .lighttone .pointertd {
    cursor: pointer; }
  .lighttone .pointertd:hover {
    color: #4e90a6; }
  .lighttone .detailmodal .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #383838;
    position: relative;
    width: 100%; }
  .lighttone .detailmodal .modal-header .close {
    color: #383838;
    opacity: 0.4; }
  .lighttone .detailmodal .modal-footer {
    width: 100%;
    display: inline-block; }
  .lighttone .detailhead {
    font-size: 18px;
    color: #0a88cc;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px; }
  .lighttone .labelname {
    margin-top: 6px;
    font-size: 13px;
    width: 100%;
    display: inline-block;
    font-weight: bold; }
  .lighttone .labeldata {
    font-size: 13px;
    width: 100%;
    display: inline-block;
    min-height: 36px;
    line-height: 18px; }
  .lighttone .tablehead {
    margin-top: 16px;
    font-size: 18px;
    line-height: 32px;
    display: inline-block;
    width: 100%;
    padding: 6px 15px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede; }
  .lighttone .paddingNone {
    padding: 0; }
  .lighttone .gametable table {
    margin-bottom: 0px; }
  .lighttone .gametable table tr td {
    vertical-align: middle; }
  .lighttone .gametable table > tbody > tr > td:first-child, .lighttone .gametable table > thead > tr > th:first-child {
    padding-left: 15px; }
  .lighttone .usericonthumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    display: table-cell; }
  .lighttone .usericonthumb img {
    width: 100%;
    height: 100%; }
  .lighttone .userdetail {
    display: table-cell;
    padding-left: 10px;
    font-weight: bold;
    vertical-align: middle; }
  .lighttone .userpoint {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -117px;
    padding-left: 26px;
    width: 100%;
    float: left;
    color: #383838;
    padding-top: 4px; }
  .lighttone .userdetail > span {
    color: #383838;
    font-weight: normal;
    padding-left: 3px; }
  .lighttone .gametable .tableScroll {
    max-height: 236px; }
  .lighttone .recordfilter {
    width: auto;
    float: right; }
  .lighttone .recordfilter .cleanbadge {
    border: 0px solid #dedede; }
  .lighttone .btnradius {
    border-radius: 12px;
    border: 1px solid #dedede;
    font-size: 11px;
    padding: 4px 10px;
    color: #383838;
    margin: 2px 3px 1px 0 !important;
    cursor: pointer;
    width: auto;
    display: inline-block;
    box-shadow: inset 0px -3px 3px #eeeef5;
    background: #fff; }
  .lighttone .btnradius.active {
    background: #f2f3f9;
    box-shadow: inset 0px 0px 2px #e1dee6; }
  .lighttone .rightpadding {
    padding-right: 15px !important; }
  .lighttone .leftpadding {
    padding-left: 15px !important; }
  .lighttone th, .lighttone td {
    font-size: 13px; }
  .lighttone .paginate_button.next, .lighttone .paginate_button.previous {
    font-size: 18px; }
  .lighttone .btn-action-edit, .lighttone .btn-action-check, .lighttone .btn-action-remove {
    padding: 2px; }
  .lighttone .input-group .form-control {
    padding: 5px 4px 6px; }
  .lighttone .form-group {
    min-height: 58px; }
  .lighttone .tick {
    fill: #A7A7A7;
    color: #A7A7A7; }
  .lighttone div#telematicsLoader {
    left: 527px;
    position: absolute;
    top: 255px;
    /* color: black; */ }
  .lighttone .search-box1 {
    padding: 4px 10px !important;
    width: 100% !important; }
  .lighttone .map-legend ul li unselectDrivingEvent {
    text-decoration: line-through; }
  .lighttone table.fixed {
    table-layout: fixed; }
  .lighttone .discrip {
    width: 56%;
    white-space: normal !important; }
  .lighttone .customloader {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    text-align: center;
    display: table; }
  .lighttone .loadicon {
    display: table-cell;
    vertical-align: middle;
    color: #383838;
    height: 100%; }
  .lighttone .loadicon span {
    font-size: 16px;
    animation-name: blink;
    animation-duration: .6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    padding: 2px; }
  .lighttone .loadicon span:nth-child(2) {
    animation-delay: .1s; }
  .lighttone .loadicon span:nth-child(3) {
    animation-delay: .2s; }
@keyframes blink {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }
  .lighttone .phonelabel {
    width: auto;
    font-weight: bold;
    font-size: 15px; }
  .lighttone .phonelabel i {
    color: inherit !important; }
  .lighttone .uploadbtn {
    position: relative; }
  .lighttone .uploadbtn input[type=file] {
    opacity: 0;
    width: 118px;
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    cursor: pointer; }
  .lighttone .msgHtml {
    width: 100%;
    float: left;
    padding: 15px 15px 20px 15px;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: -12px; }
  .lighttone .note-editor .modal-header {
    position: relative;
    color: #333; }
  .lighttone #wrapper.active .note-editor.note-frame.fullscreen {
    left: 240px;
    right: 0;
    width: auto !important; }
  .lighttone .note-editor.note-frame.fullscreen {
    top: 49px;
    bottom: 0;
    left: 50px; }
  .lighttone .label-success.badge {
    background-color: #5cb85c;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .lighttone .label-danger.badge {
    background-color: #d9534f;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .lighttone .label-primary.badge {
    background-color: #286090;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .lighttone .label-warning.badge {
    background-color: #f0ad4e;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .lighttone .well hr {
    border-color: #ddd; }
  .lighttone .footertext {
    bottom: 10px;
    left: 0;
    padding-right: 15px;
    position: absolute;
    right: 0;
    text-align: right;
    font-size: 12px; }
  .lighttone .poweredBy {
    bottom: 0;
    display: block;
    font-size: 12px;
    width: 100%;
    padding-left: 5px;
    position: absolute;
    border-top: 1px solid #f7f7f7;
    color: black;
    line-height: 16px !important; }
  .lighttone .listpanel .panel-body {
    height: 480px;
    overflow-y: auto; }
  .lighttone .navbar-toggle {
    border: 1px solid #0a88cc;
    color: #fff;
    background: #0a88cc !important; }
  .lighttone .bigscrolltable {
    width: 100%;
    margin-bottom: 0px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dedede; }
  .lighttone .bigscrolltable .table > tbody > tr > td {
    word-break: normal; }
  @media screen and (max-width: 1260px) {
    .lighttone .bigtable-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #dedede; }
    .lighttone .discrip {
      width: 180px; } }
  @media (max-width: 1180px) {
    .lighttone #wrapper.active, .lighttone #wrapper.active .nav-top-fix {
      padding-left: 50px;
      left: 0px; }
    .lighttone #wrapper.active #sidebar-wrapper {
      left: 50px; }
    .lighttone #wrapper.active .sidebar-nav li a i {
      width: auto !important;
      display: block;
      text-align: right !important; }
    .lighttone #wrapper.active .sidebar-nav li a span {
      display: none; }
    .lighttone #wrapper, .lighttone #wrapper .nav-top-fix {
      padding-left: 50px;
      left: 180px; }
    .lighttone #wrapper {
      position: relative; }
    .lighttone #wrapper.active {
      position: relative;
      left: 0px; }
    .lighttone #wrapper #sidebar-wrapper {
      left: 240px; }
    .lighttone #wrapper .sidebar-nav li a i {
      width: 50px !important;
      display: inline-block;
      text-align: left !important; }
    .lighttone #wrapper .sidebar-nav li a span {
      display: inline-block; }
    .lighttone #wrapper .navbar-fixed-top {
      width: 100%;
      right: auto; } }
  @media (min-width: 1180px) {
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom {
      border-top: 1px solid #f7f7f7;
      margin: 0;
      width: 100%;
      position: absolute;
      bottom: 16px; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li {
      width: 25%;
      float: left;
      text-align: center;
      border-right: 1px solid #f7f7f7; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child {
      border: none; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a {
      padding: 15px 20px;
      width: 100%;
      float: left;
      border-bottom: none;
      transition: all .2s ease 0s;
      -webkit-transition: all .2s ease 0s; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a i {
      padding: 2px 0;
      text-align: center;
      width: 100%; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child:after {
      padding: 0; }
    .lighttone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a.active:after {
      font-family: "FontAwesome";
      content: "";
      position: absolute;
      right: -1px;
      top: 0;
      font-size: 30px; } }
  @media (max-width: 1024px) {
    .lighttone .tooltip {
      display: none !important; } }
  @media (max-width: 767px) {
    .lighttone .modal-dialog.modal-sm {
      width: 300px; }
    .lighttone .driving-scrore-chart {
      width: 100%;
      border-right: 0px;
      border-bottom: 1px solid #dedede; }
    .lighttone .driving-scrore {
      width: 100%; }
    .lighttone .usertable table {
      margin: 0px !important; }
    .lighttone .form-group {
      height: auto !important; }
    .lighttone .navbar-right {
      float: right; }
    .lighttone .navbar-header {
      float: left; }
    .lighttone .navbar-toggle {
      padding: 6px 10px;
      margin: 9px;
      font-size: 12px;
      padding: 5px; }
    .lighttone .dropdown-user .dropdown-menu {
      right: -1px;
      left: auto; }
    .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
      margin-top: 0px; }
    .lighttone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
      border-color: #e5e5e5; }
    .lighttone .navbar-toggle {
      background-color: inherit; }
    .lighttone .date-filter .input-group {
      width: 49%;
      float: left;
      margin-left: 1%; }
    .lighttone .slider.slider-horizontal {
      margin-left: 2% !important;
      width: 98% !important; }
    .lighttone .vertical-offset-100 {
      padding-top: 20px; }
    .lighttone #modelnotify .modal-dialog {
      width: 300px; }
    .lighttone .inputcontrol, .lighttone .form-control {
      padding: 5px 6px; }
    .lighttone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; }
    .lighttone .date .cal-div {
      display: inline-block;
      width: 100%; }
    .lighttone .rangecontainer {
      min-height: 52px; }
    .lighttone .navbar-fixed-top .container-fluid {
      padding-right: 0px; }
    .lighttone .navbar-fixed-top .navbar-nav {
      margin-bottom: 0;
      margin-top: 0px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .lighttone .head-box .form-inline .form-group {
      margin-bottom: 10px !important; }
    .lighttone .slider.slider-horizontal {
      margin-left: 10px; }
    .lighttone .usertable table {
      margin: 0px !important; }
    .lighttone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; } }
  @media (max-width: 480px) {
    .lighttone .groupinline .form-group {
      display: inline-block;
      width: 100%;
      min-height: auto;
      padding: 6px 4px 2px 4px; }
    .lighttone .customtab > li > a {
      padding: 8px 7px; }
    .lighttone .customtab {
      position: relative;
      padding-top: 42px; }
    .lighttone .searchbtn {
      position: absolute;
      right: 0;
      top: 0; }
    .lighttone .customdropdown.fiterdown {
      width: 100%;
      margin-top: 4px; } }
  @media (max-width: 360px) {
    .lighttone .modal-dialog.modal-sm {
      width: 84%; }
    .lighttone .usericonthumb {
      display: none; }
    .lighttone .userdetail {
      padding-left: 0px;
      padding-right: 10px; } }

.bluetone {
  color: #383838;
  background-color: #f7f8fb;
  overflow-x: hidden;
  /*********************Main Layout  Style********************/
  /********************SIDEBAR NAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /********************TOP BAR SUBNAV*****************************/
  /*************************FORM**************************/
  /*****************************BUTTONS******************************/
  /************************Login   Style*************************/
  /*******************Chart Grid ****************/
  /*.modal-open*/
  /**********************Main file css************************/
  /******************************************************************************************
  MEDIA QUERY LAYOUT STRUCTURE
  @media (max-width: 767px) {XS DEVICE- EXTRA small:  for Mobile and Tablet}				
  @media (min-width: 768px) and (max-width: 991px) {SMALL DEVICE- iPad Protlat and old Desktop view}
  @media (min-width: 992px) and (max-width: 1199px) {MEDIUM DEVICE- iPad Landscap and large Desktop view}
  @media (min-width: 1200px) {LARGE DEVICE- Projector EXTRA large Desktop view}
  /******************************************************************************************/ }
  .bluetone a {
    color: #383838; }
  .bluetone * {
    outline: none !important; }
  .bluetone form {
    margin-bottom: 0px; }
  .bluetone html {
    height: 100%;
    margin: 0;
    padding: 0; }
  .bluetone a {
    cursor: pointer; }
  .bluetone a:focus, .bluetone a:active {
    outline: none; }
  .bluetone ol, .bluetone ul {
    padding: 0px;
    list-style: none; }
  .bluetone body > div {
    width: 100%;
    display: inline-block; }
  .bluetone select.form-control {
    line-height: 28px;
    padding: 5px 6px; }
  .bluetone .small-font {
    font-weight: normal;
    color: #0b8fd7;
    text-transform: none; }
  .bluetone .width100 {
    width: 100%; }
  .bluetone .page-content.inset > .row {
    margin-left: 0px;
    margin-right: 0px; }
  .bluetone .table > tbody > tr > td, .bluetone .table > tbody > tr > th, .bluetone .table > tfoot > tr > td, .bluetone .table > tfoot > tr > th, .bluetone .table > thead > tr > td, .bluetone .table > thead > tr > th {
    border-color: #ddd; }
.themesetting{
    position: fixed;
    left: -84px;
    bottom: 80px;
    /* background: #cbcbcb; */
    z-index: 999999;
    padding: 1px 6px;
    transition: all .4s ease 0s;
    -webkit-transition: all .4s ease 0s; }
  .bluetone .theme-menu {
    float: left;
    width: auto;
    margin: 0; }
  .bluetone .theme-menu li {
    width: 20px;
    height: 20px;
    margin: 7px 3px;
    font-size: 0px;
    border: 0px solid #e2e2e2;
    cursor: pointer;
    float: left; }
  .bluetone .theme-menu li.darkcol {
    background: #28282e; }
  .bluetone .theme-menu li.lightcol {
    background: #fdfdfd; }

  .bluetone .themeicon {
    width: auto;
    padding: 4px;
    font-size: 15px;
    color: #333;
    margin: 7px 3px;
    float: left;
    cursor: pointer; }
.themesetting.active {
    left: 0px; }
  .bluetone ._720kb-datepicker-calendar-header:nth-child(odd) {
    background: #08749E; }
  .bluetone ._720kb-datepicker-calendar-header:nth-child(even) {
    background: #50ACC3; }
  .bluetone ._720kb-datepicker-calendar-day._720kb-datepicker-active, .bluetone ._720kb-datepicker-calendar-day:hover {
    background: #08749E; }
  .bluetone #wrapper {
    padding-left: 50px;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    height: 100%; }
  .bluetone #sidebar-wrapper {
    margin-left: -240px;
    left: 50px;
    top: 0px;
    border-top: 0px solid #18b3a3;
    width: 240px;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    padding-bottom: 60px; }
  .bluetone #sidebar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* border-right: 1px solid darken($colorA, 8%);*/ }
  .bluetone .sidebar-nav {
    display: block;
    float: left;
    width: 240px;
    list-style: none;
    margin: 0;
    padding: 0; }
  .bluetone #page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 52px; }
  .bluetone #wrapper .nav-top-fix {
    padding-left: 50px;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    background: #2e6da4;
    border-top: 0px solid #18b3a3; }
  .bluetone #wrapper.active, .bluetone #wrapper.active .nav-top-fix {
    padding-left: 240px; }
  .bluetone #wrapper.active #sidebar-wrapper {
    left: 240px; }
  .bluetone .page-content {
    padding: 10px 8px; }
  .bluetone .sidebar-nav li a {
    color: #fff;
    display: block;
    float: left;
    text-decoration: none;
    width: 240px;
 
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    -ms-transition: background .4s;
    transition: background .4s;
    position: relative; }
  .bluetone .sidebar-nav li {
    line-height: 48px; }
  .bluetone .sidebar-nav li a span {
    display: none;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s;
    font-size: 14px; }
  .bluetone .sidebar-nav li a i {
    font-size: 15px;
    padding: 12.5px 18px;
    display: block;
    text-align: right;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  .bluetone .sidebar-nav li.location a i {
    width: auto;
    padding: 17.5px 24px; }
  .bluetone #wrapper.active .sidebar-nav li a span {
    display: inline-block;
    transition: all .1s ease 0s;
    -webkit-transition: all .1s ease 0s; }
  .bluetone #wrapper.active .sidebar-nav li a i {
    transition: all .4s ease 0s;
    display: inline-block; }
  .bluetone #wrapper .sidebar-nav li a i {
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s; }
  /*.bluetone .sidebar-nav li a:hover, .bluetone .sidebar-nav li a.active {
    color: #fff;
    background: #255884;
    text-decoration: none;
     border-bottom: 1px solid #18b3a3;  }*/
  .bluetone .sidebar-nav li a.active:after {
    font-family: "FontAwesome";
    content: "\f0d9";
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 30px; }
  .bluetone .navbar-top-links {
    right: 0px;
    position: absolute;
    margin-right: 0px; }
  .bluetone .sidebar-nav li:last-child:after {
    padding: 20px;
    content: " "; }
  .bluetone #sidebar_menu {
    margin-bottom: 0px;
    width: 240px;
    float: left;
    border-bottom: 1px solid #245580; }
  .bluetone #sidebar_menu li {
    display: block;
    overflow: hidden;
  background-color: white; }
  .bluetone #sidebar_menu li a {
    width: 180px;
    padding: 1px 2px;
    text-align: center;
    color: #08749E;
    display: block;
    float: left;
    text-decoration: none; }
  .bluetone #sidebar_menu li a img {
    height: 45px;
    margin-top: -1px;   
    width: 80%;}
  .bluetone #main_icon {
    float: right;
    padding: 12px 14px;
    font-size: 21px;
    height: 48px;
    width: 50px;
    border-right: 1px solid #255884; }
  .bluetone #sidebar_menu li #main_icon a {
    width: auto;
    padding: 2px; }
  .bluetone #sidebar_menu li a:hover {
    opacity: 0.8; }
  .bluetone .tooltip {
    white-space: nowrap; }
  .bluetone #wrapper.active .sidebar-nav li .tooltip {
    display: none; }
  .bluetone .nav-top-fix ul.sub-nav li {
    border-right: 1px solid #255884; }
  .bluetone .nav-top-fix ul.sub-nav li a {
    color: #fff;
    transition: all .4s ease 0s;
    padding-top: 14px;
    padding-bottom: 13.5px;
    border-right: 0px solid #1f1f24;
   }
  .bluetone .nav-top-fix ul.sub-nav li a:hover, .bluetone .nav-top-fix ul.sub-nav li a.active {
    color: #fff;
   
    border: none; }
  .bluetone .navbar {
    min-height: 49px;
    border-bottom: 1px solid #255884; }
  .bluetone .nav-top-fix .navbar-right > li {
    float: left;
    border-right: 1px solid #183854; }
  .bluetone .nav-top-fix .navbar-right > li:first-child {
    border-left: 1px solid #183854; }
  .bluetone .nav-top-fix .navbar-right li.dropdown-user > a:hover, .bluetone .nav-top-fix .navbar-right li.dropdown-user > a:focus, .bluetone .nav-top-fix .navbar-right li.notifications-menu > a:hover, .bluetone .nav-top-fix .navbar-right li.notifications-menu > a:focus {
    background: #B55A1D; }
  .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
    border-radius: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    min-width: 152px;
    right: -1px; }
  .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
    display: block; }
  .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a {
    display: block;
    color: #2e6da4;
    cursor: pointer; }
  .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li a:hover {
    color: #0b8fd7; }
  .bluetone .nav-top-fix .navbar-right li > a, .bluetone .nav-top-fix .navbar-right li span {
    color: #fff;
    line-height: 1.5em;
    display: inline-block;
    padding: 14px 15px; 
  background-color: #0A2F55;}
  .bluetone .nav-top-fix .navbar-right li.open > a:focus, .bluetone .nav-top-fix .navbar-right li.open > a:hover {
    background: #2e6da4; }
  .bluetone .nav-top-fix .navbar-right li.notifications-menu > a {
    padding: 14px;
    font-size: 20px;
    color: #fff;
    position: relative;
    height: 48px;background-color: #08749E; }
  .bluetone .nav-top-fix .navbar-right li.notifications-menu > a .label-warning {
    position: absolute;
    top: 4px;
    font-size: 11px;
    right: 8%;
    padding: 0.2em 0.4em; }
  .bluetone .head-box .box-outter {
    background: #fff; }
  .bluetone .formsection .btn-blue {
    margin-left: 0px !important;
    margin-top: 0px !important; }
  .bluetone .boxforbox {
    margin: 15px 0 0 0;
    width: 20%;
    padding: 0px 0.5% !important; }
  .bluetone .boxforbox .panel {
    border: medium none;
    margin-bottom: 0px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.09);
    background: #F2F3F4;
    border: 1px solid #ddd; }
  .bluetone .boxforbox .panel .panel-body {
    padding: 15px 12px 15px 72px;
    position: relative; }
  .bluetone .boxforbox .panel .panel-body h6 {
    font-size: 12px;
    margin: 0px;
    height: 30px;
    line-height: 12px;
    font-weight: 600; }
  .bluetone .boxforbox .panel .panel-body h3 {
    font-size: 24px;
    color: #383838;
    font-weight: 600;
    margin: 0px auto;
    line-height: 22px;
    letter-spacing: -0.5px; }
  .bluetone .boxforbox .round-icon {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 28px;
    text-align: center;
    width: 70px;
    height: 100%;
    display: block;
    line-height: 35px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 22px 20px; }
  .bluetone .box {
    margin-top: 10px; }
  .bluetone .panel {
    border-radius: 4px;
    border: 1px solid #ddd;
    position: relative;
    background: #fff;
    display: inline-block;
    width: 100%; }
  .bluetone .panel-title {
    color: #383838;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 32px;
    font-weight: 600; }
  .bluetone .padding0 {
    padding: 0px !important; }
  .bluetone .table {
    margin-bottom: 0px; }
  .bluetone .table-hover > tbody > tr:hover {
    background-color: #f2f3f9; }
  .bluetone label {
    font-weight: 400; }
  .bluetone .inputcontrol, .bluetone .form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
    color: #383838;
    display: block;
    font-size: 12px;
    line-height: normal;
    padding: 5px 10px;
    transition: none 0s ease 0s;
    width: 100% !important; }
  .bluetone .input-group-addon {
    padding: 5px 6px;
    border-radius: 0px; }
  .bluetone .date-filter .input-group {
    width: 49%; }
  .bluetone .input-group .form-control {
    padding: 4px; }
  .bluetone .btn-group.bootstrap-select {
    margin-bottom: 0px !important; }
  .bluetone .bootstrap-select > .btn {
    border-radius: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px; }
  .bluetone .panel-filter {
    padding: 8px; }
  .bluetone .panel-filter .form-group {
    margin-bottom: 0px; }
  .bluetone .panel-filter .form-group .inputcontrol {
    padding: 3px 10px; }
  .bluetone .pagination {
    margin: 10px 0px; }
  .bluetone .btn:focus, .bluetone .btn:active:focus {
    outline: none; }
  .bluetone .btn-blue {
    background: #2e6da4;
    color: #fff;
    margin: 5px 5px 5px 0px; }
  .bluetone .btn-blue:hover, .bluetone .btn-blue:focus {
    background: #383838;
    color: #fff; }
  .bluetone .btn-red {
    background: #0b8fd7;
    color: #fff;
    margin: 5px; }
  .bluetone .btn-red:hover {
    background: #c9302c;
    color: #fff; }
  .bluetone .btn-action-edit, .bluetone .btn-action-check, .bluetone .btn-action-remove {
    width: 24px;
    height: 20px;
    color: #383838;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f2f3f9;
    display: inline-block;
    line-height: 1.3em;
    text-align: center;
    margin: 0px 1px;
    vertical-align: top; }
  .bluetone .btn-container {
    width: 26px;
    height: 20px;
    display: inline-block;
    vertical-align: top; }
  .bluetone a.btn-container:focus, .bluetone a.btn-container:hover {
    text-decoration: none; }
  .bluetone .btn-action-check {
    color: #18b3a3; }
  .bluetone .btn-action-remove {
    color: #0b8fd7; }
  .bluetone .mtop5 {
    margin-top: 5px; }
  .bluetone .mtop10 {
    margin-top: 10px; }
  .bluetone .mtop12 {
    margin-top: 12px; }
  .bluetone .mtop20 {
    margin-top: 20px; }
  .bluetone .mbot0 {
    margin-bottom: 0px !important; }
  .bluetone .mbot10 {
    margin-bottom: 10px; }
  .bluetone .mRight10 {
    margin-right: 10px; }
  .bluetone .disable-slider {
    width: 100% !important; }
  .bluetone .disable-slider .pull-right {
    margin-top: -3px; }
  .bluetone .newofferdiv {
    display: none;
    margin-top: 10px; }
  .bluetone .table-caption {
    display: table-caption; }
  .bluetone .btn-newoffer-active, .bluetone .btn-black {
    background: #0b8fd7 !important;
    border: 1px solid #0b8fd7 !important;
    margin-left: 5px; }
  .bluetone .btn-newoffer-active:hover {
    background: #383838 !important; }
  .bluetone .discountype .bootstrap-select {
    padding: 0px !important;
    margin-left: -1px !important; }
  .bluetone .discountype .form-control {
    position: absolute;
    top: 0; }
  .bluetone .discountype .bootstrap-select.btn-group .btn .filter-option {
    padding-right: 6px; }
  .bluetone .pagination li a {
    margin-left: 2px; }
  .bluetone .pagination li.active a, .bluetone .pagination li.active a:hover, .bluetone .pagination li.active a:focus {
    background: #f2f3f9 !important;
    border-color: #ddd;
    border-width: 1px;
    color: #383838; }
  .bluetone .pagination li a i {
    line-height: 18.5px;
    width: 9px; }
  .bluetone .offer-footer {
    padding: 7px 15px;
    overflow: hidden; }
  .bluetone .offer-footer .pagination {
    margin: 0px; }
  .bluetone .panel-footer.offer-footer {
    padding: 0;
    min-height: 42px; }
  .bluetone .panel-footer .pagination {
    padding: 8px 12px; }
  .bluetone .highlight_row {
    background: orange; }
  .bluetone .usertable th, .bluetone .usertable td {
    font-size: 12px;
    border: none !important;
    padding: 7px 6px !important; }
  .bluetone .usertable table {
    margin: 6px 0px 12px 0 !important; }
  .bluetone .usertable th {
    color: #383838;
    font-weight: normal;
    width: 150px; }
  .bluetone .legend-0line {
    /*stroke: #9babda !important;*/
    stroke-width: 3 !important; }
  .bluetone .legend-1line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .bluetone .legend-2line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .bluetone .legend-3line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .bluetone .legend-4line {
    /*stroke: #9babda !important;*/
    stroke-width: 2 !important; }
  .bluetone .browsertext {
    background: url(../images/chrome.png) no-repeat top left;
    padding-left: 40px;
    position: absolute;
    top: 10px;
    right: 0;
    text-align: left;
    padding-right: 15px;
    min-height: 34px;
    font-size: 12px; }
  .bluetone .login {
    background: url(../images/excepsure_bg.jpg) no-repeat center center;
    height: 100%;
    background-size: cover; }
  .bluetone .login body {
    background: transparent; }
  .bluetone .form-signin input[type="text"] {
    margin-bottom: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .bluetone .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .bluetone .form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .bluetone .vertical-offset-100 {
    padding-top: 70px; }
  .bluetone .login .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto auto 10px auto; }
  .bluetone .login .panel {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
  .bluetone .login .panel-heading {
    background: #50acc3;
    color: #fff;
    font-size: 16px;
    padding: 16px 0; }
  .bluetone .col-sm-offset-3 {
    perspective: 800px; }
  /* .bluetone .login .login-form {
    background: #fff;
    border: 0px;
     margin-top: 10px; 
   } */
  .bluetone .login .login-form a {
    text-decoration: none; }
  .bluetone .login .login-form a:hover {
    text-decoration: none; }
  .bluetone .login .login-form label {
    margin-top: 1px;
    font-size: 14px; }
  .bluetone .login .login-form .inputcontrol, .bluetone .login .login-form .form-control {
    height: 40px; }
  .bluetone .login-bottom {
    margin: 4px 0 16px 0;
    /* padding: 10px 15px; */
    overflow: hidden; }
  .bluetone .login-bottom a {
    color: #f2f3f9; }
  .bluetone .login-bottom a:hover {
    color: #fff; }
  .bluetone .login .login-form .login-bottom label {
    display: inline;
    color: #fff; }
  .bluetone .forget-pass {
    margin-top: 5px;
    display: inline-block; }
  .bluetone #login_form .input-group-addon {
    padding-left: 12px;
    padding-right: 12px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px; }
  .bluetone #login_form .has-success .input-group-addon:first-child, .bluetone #login_form .has-error .input-group-addon:first-child {
    border-right-width: 1px;
    /* border-style: solid;  */
  }
  .bluetone .login .login-form .form-control {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; }
  .bluetone .login .form-group {
    height: auto; }
  .bluetone .login .form-control-feedback {
    line-height: 40px;
    height: 40px;
    top: 23px !important;
    right: 15px; }
  .bluetone .loginbtn {
    width: 100%;
    height: 42px;
    border: 0px solid #000;
    background: #50acc3;
    border-bottom: 0px solid #000;
    font-size: 16px;
    font-weight: 300; }
  .bluetone .container-login {
    position: relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px; }
  .bluetone .container-login .card {
    /* position: absolute;
    width: 100%; */
    height: 100%;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .bluetone .container-login .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; */
   }
  .bluetone .container-login .card.flipped, .bluetone .container-login .card .face2 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .bluetone .store {
    display: none; }
  .bluetone .buttons {
    text-align: center; }
  .bluetone .container-login .panel-body {
    padding-bottom: 0px; }
  .bluetone .verticalGridLine {
    display: none; }
  .bluetone .horizontalGridLine {
    stroke-width: 0.2 !important; }
  .bluetone .drivinscroe {
    margin-top: 15px; }
  .bluetone .drivinscroe .slider.slider-horizontal {
    width: 100% !important; }
  .bluetone #wrapper.active .sidebar-nav li.location a i {
    font-size: 18px;
    padding: 17.5px 18px;
    text-align: left;
    width: 44px; }
  .bluetone .breadcrumb {
    display: none !important; }
  .bluetone .greypanel .panel-footer {
    background: #f2f3f9;
    border-color: #ddd; }
  .bluetone .greypanel .panel-heading .panel-title i {

    background: #fff;
    padding: 14px 11px;
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    border-right: 1px solid #ddd;
    width: 48px;
    text-align: center; }
  .bluetone .greypanel .panel-heading .panel-title i.fa-male:after {
    content: "\f182"; }
  .bluetone .greypanel .panel-heading {
    background: #f2f3f9;
    border-color: #ddd;
    box-shadow: none;
    position: relative;
    padding: 7px 15px 7px 54px;
    display: inline-block;
    width: 100%; }
  .bluetone .formhead > i {
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top-left-radius: 4px;
    height: 100%;
    width: 52px;
    background: #fff;
    padding: 14px 16px;
    border-right: 1px solid #e0e0e4; }
  .bluetone .box .panel-default > .panel-heading {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; }
  .bluetone .table > thead > tr > th {
    font-weight: 600;
    font-size: 12px;
    color: #383838;
    border-bottom-width: 2px;
    background: rgba(242, 243, 249, 0.5);
    vertical-align: top;
    border-color: #ddd; }
  .bluetone .table > tbody > tr > td {
    font-size: 12px !important;
    word-break: break-all; }
  .bluetone .slider .tooltip.top {
    z-index: 1025; }

  .bluetone .driving-scrore ul {
    margin-top: 0px; }

  /*.bluetone .driving-scrore ul li i {
    color: #0b8fd7;
    width: 20px; }*/
 
  .bluetone .userdetailtable th, .bluetone .userdetailtable td {
    padding: 5px 8px !important;
    border-color: #f1f1f1 !important;
    position: relative; }
  .bluetone .userdetailtable td .errorMsg {
    top: -18px; }
  .bluetone .userdetailtable td > .date {
    width: 100%; }
  .bluetone .userdetailtable td .form-control {
    height: 28px;
    padding: 5px 7px; }
  .bluetone .userdetailtable td textarea.form-control {
    height: auto; }
  .bluetone .driving-scrore-chart {
    width: 60%;
    height: 280px;
    float: left;
    border-right: 1px solid #ddd;
    padding: 20px 15px; }
  /*.bluetone .bod-bot {
    border-top: 1px solid #ddd;
    margin-top: 12px !important;
    padding-top: 12px !important; }*/
  .bluetone .margin-right15 {
    padding-right: 15px; }
  .bluetone .user-name {
    display: none;
    min-height: 167px;
    -webkit-transition: max-height, 0.5s ease;
    -moz-transition: max-height, 0.5s ease;
    -ms-transition: max-height, 0.5s ease;
    -o-transition: max-height, 0.5s ease;
    transition: max-height, 0.5s ease;
    overflow-y: scroll; }
  .bluetone .user-name.open {
    max-height: 300px;
    display: block; }
  .bluetone .no-record {
    margin-top: 5px;
    padding: 6px 12px;
    margin-left: 10px; }
  .bluetone .search-div {
    position: absolute;
    max-height: 300px;
    z-index: 99;
    width: 86%;
    margin-top: -10px; }
  .bluetone .search-div i {
    color: #383838;
    font-size: 40px;
    margin-left: 5px; }
  .bluetone .search-div ul {
    border: 2px solid #383838;
    background-color: #fff;
    border-radius: 4px;
    margin-top: -13px;
    max-height: 300px;
    overflow-x: hidden; }
  .bluetone .search-div ul li {
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px; }
  .bluetone .search-div ul li:hover {
    background: #f2f3f9; }
  .bluetone .search-wrapper {
    position: relative;
    padding: 8px 10px; }
  .bluetone .search-box, .bluetone .search-wrapper {
    position: relative;
    padding: 8px 10px 8px 24px; }
  .bluetone .search-control {
    position: relative; }
  .bluetone .search-control .addon-thumb:first-child {
    position: absolute;
    left: 8px;
    top: 12px;
    z-index: 1;
    font-size: 16px; }
  .bluetone .search-control .addon-thumb:last-child {
    position: absolute;
    right: 5px;
    top: 12px;
    z-index: 1;
    text-align: center; }
  .bluetone .search-box {
    width: 100% !important;
    outline: 0;
    padding: 8px 10px 8px 24px !important;
    height: 42px; }
  .bluetone .close-icon {
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
    padding: 1px;
    border-radius: 50%;
    width: 22px;
    height: 22px; }
  .bluetone .subtablerow td {
    padding: 0px !important; }
  .bluetone .cal-div {
    position: relative; }
  .bluetone .cal-div label.cal {
    margin-top: 9px;
    position: absolute;
    right: 7px;
    top: 0px;
    color: #0b8fd7; }
  .bluetone .cal-div input[readonly] {
    cursor: pointer; }
  .bluetone .checkcol {
    width: 22px;
    text-align: left; }
  .bluetone .offer-check {
    float: left;
    margin-top: 2px !important; }
  .bluetone .top-radio {
    width: 85%;
    margin: 0px auto;
    display: inline-block; }
  .bluetone .top-radio span {
    display: inline-block;
    margin: 0px 10px; }
  .bluetone .inline-heading {
    display: inline-block; }
  .bluetone .driving-map {
    padding: 0px;
    position: relative; }
  .bluetone .driving-map #drivingEventsLocation {
    width: 100%;
    height: 313px; }
  .bluetone .map-legend {
    background: rgba(255, 255, 255, 0.8);
    display: table;
    border: 1px solid #ddd;
    position: absolute;
    top: 10px;
    right: 52px;
    padding: 5px 5px 0px 5px;
    z-index: 9; }
  .bluetone .map-legend li {
    list-style: none;
    color: #3a3a3a;
    position: relative;
    padding: 6px 6px 6px 25px;
    cursor: pointer;
    line-height: 20px;
    font-size: 14px;
    margin: 3px 10px; }
  .bluetone .map-legend li#dangerousManoeuvre, .bluetone .map-legend li#dangerousManoeuvre_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 0px; }
  .bluetone .map-legend li#hardBrake, .bluetone .map-legend li#hardBrake_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -30px; }
  .bluetone .map-legend li#rapidAcceleration, .bluetone .map-legend li#rapidAcceleration_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -60px; }
  .bluetone .map-legend li#speedViolation, .bluetone .map-legend li#speedViolation_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -90px; }
  .bluetone .map-legend li#phoneUsages, .bluetone .map-legend li#phoneUsages_tripHistory {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -517px; }
    .bluetone .map-legend li#phoneUsages, .bluetone .map-legend li#phoneUsages_tripHistory {
      background: url(../images/xemplar_sprite.png) no-repeat 0 -517px; }
     .map-legend li#latehour_tripHistory{
      background: url(../images/xemplar_sprite.png) no-repeat 0 -548px;
      }
  .bluetone .marginL05 {
    margin-left: 5px; }
  .bluetone .unselectDrivingEvent {
    text-decoration: line-through; }
  .bluetone .customtab > li > a {
    color: #383838;
    border-radius: 0px;
    background: #fff;
    padding: 12px 15px; }
  .bluetone .customtab {
    border-bottom: 0px solid #ddd; }
  .bluetone .customtab > li {
    margin-bottom: -1px; }
  .bluetone .customtab > li.active > a, .bluetone .customtab > li.active > a:focus, .bluetone .customtab > li.active > a:hover {
    background: #08749E;
    color: #fff;
    border-color: #08749E; }
  .bluetone .customtab > li a:focus, .bluetone .customtab > li a:hover {
    background: #50ACC3;
    color: #fff; }
  .bluetone .boxtabing .panel {
    width: 100%;
    float: left; }
  .bluetone .boxtabing .btn {
    margin-bottom: 8px; }
  .bluetone .formsection {
    width: 100%;
    float: left;
    padding-bottom: 12px;
    margin: 0px 0px 24px;
    border-radius: 4px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd; }
  .bluetone .formhead {
    width: 100%;
    float: left;
    margin-bottom: 12px;
    color: #383838;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    background: #f2f3f9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 14px 15px 14px 60px; }
  .bluetone .searchbtn {
    float: right;
    color: #fff !important;
    background-color: #50ACC3;
    border-color: #50ACC3;
    padding: 5px 10px;
    width: auto;
    font-size: 14px; }
  .bluetone .searchbtn.collapsed, .bluetone .addbtn.collapsed {
    background: #08749E !important;
    border-color: #08749E !important;
    color: #fff !important; }
  .bluetone .addbtn {
    float: right;
    color: #fff !important;
    background: #0b8fd7;
    border-color: #0b8fd7;
    padding: 5px 10px;
    width: auto;
    font-size: 14px;
    margin-bottom: 8px; }
  .bluetone .addbtn.collapsed i.fa-minus:before {
    content: "" !important;
    font-family: fontawesome; }
  .bluetone button.bluebtn {
    background-color: #2e6da4;
    border-color: #2e6da4;
    color: #fff; }
  .bluetone .bluebtn:focus, .bluetone .bluebtn:hover {
    color: #fff;
    background-color: #383838;
    border-color: #383838; }
  .bluetone .boxtabing th .offerall {
    vertical-align: middle;
    margin: 2px 0px 0px 0px; }
  .bluetone .modal.full-width-modal-right .modal-dialog {
    height: 100%;
    margin: 0;
    position: absolute;
    right: 0; }
  .bluetone .full-width-modal-right .modal-title {
    font-size: 16px;
    margin-top: 2px; }
  .bluetone .full-width-modal-right .modal-content {
    border-radius: 0px;
    border: 0px solid #000;
    height: 100%; }
  .bluetone .full-width-modal-right .modal-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 300px;
    border: none; }
  .bluetone .borderbadge {
    border: 1px solid #fff;
    background: none;
    padding: 5px 8px; }
  .bluetone .cleanbadge {
    background: none !important;
    padding: 5px 8px;
    border: 1px solid #c0c0c0;
    margin: 2px 1px;
    color: #535658 !important; }
  .bluetone .modalbodyinner {
    height: 100%;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e5e5e5; }
  .bluetone .modalbodyinner .mCSB_container {
    width: 100% !important; }
  .bluetone .popheadrow {
    width: 100%;
    padding: 15px;
    background: #f2f3f9;
    border-bottom: 1px solid #ddd;
    color: #383838;
    font-size: 20px; }
  .bluetone .popheadrow p {
    color: #383838;
    font-size: 12px;
    padding-top: 6px;
    margin-bottom: 0; }
  .bluetone .poprow {
    width: 100%;
    display: inline-block;
    padding: 0px 10px 0px 5px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    cursor: pointer; }
  .bluetone .poprow:hover, .bluetone .poprow.active {
    background: #f2f3f9; }
  .bluetone .poprow.active .popcheck {
    background: #2282d8; }
  .bluetone .notification-sidebar .poprow.active .popcheck {
    background: #2282d8; }
  .bluetone .offer-sidebar .poprow.active .popcheck {
    background: #B55A1D; }
  .bluetone .suggestion-sidebar .poprow.active .popcheck {
    background: #5cb85c; }
  .bluetone .filtermodal .poprow.active .popcheck {
    background: #0b8fd7; }
  .bluetone .popleft {
    float: left;
    width: 22%;
    vertical-align: top;
    border-right: 1px solid #ddd;
    margin-right: -1px; }
  .bluetone .popright {
    width: 78%;
    border-left: 1px solid #ddd;
    padding: 12px 8px;
    margin-top: -1px;
    float: left;
    vertical-align: top;
    position: relative; }
  .bluetone .popicon {
    max-width: 78px;
    height: auto;
    float: right;
    text-align: right;
    position: absolute;
    right: 4px;
    top: 10px; }
  .bluetone .popicon:hover {
    opacity: 1; }
  .bluetone .popname {
    color: #383838;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    position: relative;
    padding-bottom: 5px;
    padding-right: 30px;
    word-break: break-all; }
  .bluetone .popcheck {
    float: right;
    width: 26px;
    height: 26px;
    background: rgba(98, 98, 98, 0.4);
    padding: 6px;
    margin: 8px 8px 0 0;
    clear: both;
    border-radius: 50%;
    color: #fff;
    text-align: center; }
  .bluetone .popcheck i {
    line-height: 14px; }
  .bluetone .popcheck input[type="checkbox"] {
    margin-top: 0px; }
  .bluetone .popinfo, .bluetone .statusrow {
    width: 100%;
    display: inline-block; }
  .bluetone .popinfo p {
    margin-bottom: 5px;
    color: #383838;
    word-break: break-all; }
  .bluetone .popstatus {
    width: 100%;
    float: right;
    padding: 4px 6px 4px 0;
    text-align: right;
    color: #c1c8ce;
    font-size: 10px; }
  .bluetone .poprow .en-able {
    color: #5cb85c;
    font-size: 11px;
    width: 100%;
    float: right;
    font-weight: 600; }
  .bluetone .poprow.dis-able {
    color: #0b8fd7;
    font-size: 11px;
    width: 100%;
    float: right; }
  .bluetone .popdate {
    width: 100%;
    float: left;
    text-align: left;
    color: #383838;
    font-size: 10px;
    padding-bottom: 5px; }
  .bluetone .offerdiscount {
    width: 100%;
    float: right;
    clear: both;
    text-align: right;
    line-height: 20px;
    padding-right: 4px;
    color: #383838;
    margin: 7px 8px 7px 0px;
    font-weight: 600; }
  .bluetone .offerdiscount span {
    font-size: 10px;
    color: #383838;
    font-weight: 400;
    float: right;
    line-height: 20px;
    padding-left: 2px; }
  .bluetone .gen {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -146px;
    padding: 10px;
    display: inline-block; }
  .bluetone .mkt {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -176px;
    padding: 10px;
    display: inline-block; }
  .bluetone .main {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -204px;
    padding: 10px;
    display: inline-block; }
  .bluetone .fe {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -232px;
    padding: 10px;
    display: inline-block; }
  .bluetone .ser {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -262px;
    padding: 10px;
    display: inline-block; }
  .bluetone .dr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -290px;
    padding: 10px;
    display: inline-block; }
  .bluetone .fr {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -319px;
    padding: 10px;
    display: inline-block; }
  .bluetone .ts {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -347px;
    padding: 12px;
    display: inline-block; }
  .bluetone .hbd {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -380px;
    padding: 12px;
    display: inline-block; }
  .bluetone .ra {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -415px;
    padding: 12px;
    display: inline-block; }
  .bluetone .sv {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -449px;
    padding: 12px;
    display: inline-block; }
  .bluetone .dm {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -485px;
    padding: 12px;
    display: inline-block; }
  .bluetone .popdrop {
    width:120px;
    float: right;
    margin: 0px 8px 0px 0px;
    font-size: 12px; }
  .bluetone .popdrop .btn {
    padding: 3px 10px 3px 7px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    border-color: #fff; }
  .bluetone .popdrop .btn .caret {
    text-align: right;
    position: absolute;
    right: 6px;
    top: 10px; }
  .bluetone .popdrop li a {
    font-size: 12px; }
  .bluetone .popdrop .dropdown-menu {
    min-width: 128px; }
  .bluetone .subtablerow {
    background: rgba(242, 243, 249, 0.6);
    border-bottom: 1px solid #ddd; }
  .bluetone .blankfilter {
    color: #fff;
    text-shadow: 0px 0px 1px #000; }
  .bluetone .universalfilter {
    color: #383838;
    text-shadow: none; }
  .bluetone .conditionalfilter {
    color: #0b8fd7;
    text-shadow: none; }
  .bluetone .participentab .panel {
    border-top: 0 solid #ddd; }
  .bluetone .horizontal.fade .modal-dialog {
    transform: translate(25%, 0%);
    transition: transform 0.5s ease-out 0s;
    -webkit-transform: translate(25%, 0%);
    -webkit-transition: transform 0.5s ease-out 0s;
    -ms-transform: translate(25%, 0%);
    -ms-transition: transform 0.5s ease-out 0s;
    -o-transform: translate(25%, 0%);
    -o-transition: transform 0.5s ease-out 0s; }
  .bluetone .horizontal.in .modal-dialog {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px); }
  .bluetone .nowrap {
    white-space: normal; }
  .bluetone .en-disbtn {
    vertical-align: text-top; }
  .bluetone .word-break > td {
    word-break: break-all; }
  .bluetone .pagination li a {
    padding: 3px 8px !important; }
  .bluetone #wrapper.active .sidebar-nav li a i {
    transition: all 0.4s ease 0s;
    width: 44px; }
  .bluetone .userinfo {
    width: 100%;
    float: left;
    padding: 30px 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .bluetone .userthumb {
    width: 100%;
    display: inline-block;
    min-height: 123px; }
  .bluetone .userthumb img {
    max-width: 100%;
    border: 10px solid #ddd; }
  .bluetone .thumbinfo {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 12px 0 6px 0;
    display: inline-block;
    line-height: 20px;
    min-height: 54px; }
  .bluetone #loading-bar .bar {
    background: #0b8fd7;
    height: 3px; }
  .bluetone #loading-bar-spinner .spinner-icon {
    width: 18px;
    height: 18px;
    border: solid 4px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 10px; }
  .bluetone .boxtabing .box {
    display: inline-block;
    margin-top: 10px;
    width: 100%; }
  .bluetone .modal {
    z-index: 10002 !important; }
  .bluetone .modal-dialog {
    z-index: 10002 !important; }
  .bluetone .modal-backdrop {
    z-index: 10001 !important; }
  .bluetone .modal {
    background: rgba(0, 0, 0, 0.7); }
  .bluetone .modal-header {
    color: #fff;
    padding: 12px 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1; }
  .bluetone .filtermodal .modal-header {
    background: #d9534f; }
  .bluetone #modeloffer.modal {
    z-index: 10040; }
  .bluetone #modeloffer .modal-body {
    padding: 50px 0px 65px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden; }
  .bluetone #modeloffer .modal-title {
    width: auto;
    display: inline-block; }
  .bluetone .fullwidth {
    width: 100%;
    display: inline-block; }
  .bluetone .cal-div .input-group .form-control {
    padding: 5px 10px; }
  .bluetone .rangecontainer {
    width: 100%;
    float: left;
    position: relative;
    padding-right: 50px; }
  .bluetone .slider-eye {
    font-size: 1.4em;
    float: left;
    position: absolute;
    right: 6px;
    top: 3px; }
  .bluetone .rangeslider {
    width: 100%;
    float: left;
    margin: 6px 0px 0 7px; }
  .bluetone .uislider .ui-slider-range {
    background: #50ACC3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }
  .bluetone .notification-sidebar .modal-header, .bluetone .notification-sidebar .modal-footer .btn-danger {
    background: #2282d8;
    border-color: #146dbd; }
  .bluetone .offer-sidebar .modal-header, .bluetone .offer-sidebar .modal-footer .btn-danger {
    background: #B55A1D;
    border-color: #B55A1D; }
  .bluetone .suggestion-sidebar .modal-header, .bluetone .suggestion-sidebar .modal-footer .btn-danger {
    background: #5cb85c;
    border-color: #5cb85c; }
  .bluetone .uislider .ui-slider-handle {
    background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)) repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: absolute;
    top: -0.4em;
    width: 20px;
    z-index: 3; }
  .bluetone .uislider .ui-slider-handle:after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px; }
  .bluetone .ui-slider-tip {
    width: auto !important;
    background: #2e6da4;
    border-radius: 4px;
    padding: 1px 6px;
    color: #fff;
    font-size: 11px;
    position: absolute;
    bottom: -21px; }
  .bluetone .ui-slider-tip:after {
    font-family: fontawesome;
    content: "\f0d8";
    position: absolute;
    left: 6px;
    top: -9px;
    font-size: 14px;
    color: #2e6da4; }
  .bluetone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip {
    position: absolute;
    bottom: -22px;
    right: 0px; }
  .bluetone .rangeslider .ui-slider-handle:nth-child(3) .ui-slider-tip:after {
    right: 4px;
    left: auto;
    top: -9px; }
  .bluetone .rangeslider {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
    border: none;
    background: #383838; }
  .bluetone .discountype {
    width: 100%; }
  .bluetone .discountype .input-group-btn {
    width: 42px; }
  .bluetone .errorMsg {
    transition: all 0.4s ease 0s;
    color: #d9534f;
    background: #f9dddd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    position: absolute;
    top: -4px;
    right: 15px;
    z-index: 99;
    border: 1px solid #d9534f;
    line-height: 14px; }
  .bluetone .errorMsg:after {
    font-family: fontawesome;
    content: "\f0d7";
    position: absolute;
    right: 6px;
    bottom: -10px;
    font-size: 18px;
    color: #e7908d; }
  .bluetone .date .btn-blue {
    margin: 0; }
  .bluetone .cal-div {
    width: 100%;
    display: inline-block;
    float: left; }
  .bluetone .date .input-group-addon {
    cursor: pointer; }
  .bluetone .filtermodal .popname {
    padding-left: 0px; }
  .bluetone .filtermodal {
    font-size: 12px; }
  .bluetone .applybtn {
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    padding: 3px 8px;
    margin-top: 8px; }
  .bluetone .applybtn input[type="checkbox"] {
    margin: 3px 6px 3px 0px;
    float: left; }
  .bluetone .dropdown .btn {
    margin-bottom: 0px;
    padding: 3px 10px; }
  .bluetone table .dropdown-menu > li > a {
    padding: 3px 10px;
    font-size: 13px; }
  .bluetone .pagination > li > a, .bluetone .pagination > li > span {
    position: static; }
  .bluetone .customdateicon {
    position: absolute;
    right: 1px;
    top: 1px;
    color: 08749E;
    cursor: pointer;
    z-index: 1;
    padding: 9px 8px 10px 6px;
    font-size: 14px; }
  .bluetone .customdateicon .fa-calendar:before {
    font-family: fontawesome;
    font-weight: 300; }
  .bluetone .cal-div .fullwidth .form-control {
    background: none;
    position: relative;
    z-index: 2;
    padding-right: 28px; }
  .bluetone .cal-div .fullwidth {
    background: #fff;
    position: relative; }
  .bluetone .offer-footer button {
    margin: 6px 15px; }
  .bluetone .action-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; }
  .bluetone .panelFilter .approval-pending td:first-child {
    border-left: 2px solid #f0ad4e !important; }
  .bluetone .panelFilter .on-going td:first-child {
    border-left: 2px solid #5cb85c !important; }
  .bluetone .panelFilter .completed td:first-child {
    border-left: 2px solid #d9534f !important; }
  .bluetone .panelFilter .no-status td:first-child {
    border-left: 2px solid #ddd; }
  .bluetone #gameAll table {
    border-collapse: collapse; }
  .bluetone form textarea.form-control {
    height: 34px;
    resize: none;
    line-height: 22px; }
  .bluetone .textblock textarea.form-control {
    height: 111px;
    resize: none;
    line-height: 22px; }
  .bluetone .form-group.textblock {
    height: auto; }
  .bluetone .emptybox {
    width: 283px;
    float: left;
    text-align: center;
    padding: 30px 48px;
    font-size: 20px;
    color: #383838;
    font-weight: 300; }
  .bluetone .emptybox i {
    font-size: 64px;
    color: #ddd;
    padding: 12px; }
  .bluetone .customdropdown {
    width: 100%;
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #383838;
    text-align: left; }
  .bluetone .customdropdown .btn {
    padding: 7.5px 16px 7.5px 8px !important;
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: relative;
    color: #383838;
    text-overflow: ellipsis;
    overflow: hidden; }
  .bluetone .customdropdown .btn .caret {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 14px; }
  .bluetone .customdropdown li a {
    font-size: 12px;
    color: #383838;
    text-overflow: ellipsis;
    overflow: hidden; }
  .bluetone .customdropdown .dropdown-menu {
    width: 100%;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto; }
  .bluetone .date {
    display: inline-block;
    font-size: 13px;
    color: #383838; }
  .bluetone .customdropdown.fiterdown {
    width: 180px;
    float: right; }
  .bluetone .customdropdown.fiterdown .btn {
    padding: 6.5px 10px !important;
    font-size: 13px;
    color: #383838;
    background: #fff; }
  .bluetone .customdropdown.fiterdown li a {
    font-size: 13px; }
  .bluetone .redgradbtn {
    background-color: 08749E;
    border: 1px solid 08749E;
    color: #fff; }
  .bluetone .redgradbtn:hover, .bluetone .redgradbtn:focus {
    background-color: 08749E;
    border: 1px solid 08749E;
    color: #fff; }
  .bluetone .customtip {
    white-space: nowrap;
    padding: 4px 6px;
    min-width: 50px;
    filter: none; }
  .bluetone .tableScroll {
    max-height: 270px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 100%;
    float: left; }
  .bluetone table.usertable tbody > tr > td {
    padding: 8px !important;
    border-top: 1px solid #ddd !important; }
  .bluetone .fullbtn {
    width: 100%;
    float: left;
    text-align: left;
    padding: 16px 12px;
    position: relative;
    margin-bottom: 8px;
    white-space: normal;
    font-size: 15px; }
  .bluetone .fullbtn:after {
    /* content: "\f061"; */
    font-family: fontawesome;
    position: absolute;
    right: 12px;
    top: 16px; }
  .bluetone .noicon.fullbtn:after {
    content: ""; }
  .bluetone .userform > .panel-body > .fullwidth {
    padding: 20px 0;
    border: 1px solid #ddd;
    border-top: 0px solid transparent;
    margin: 0; }
  .bluetone .userform {
    padding: 0px;
    display: block;
    width: 100%; }
  .bluetone .top-radio > span > label {
    cursor: pointer; }
  .bluetone .form-group label {
    width: 100%;
    float: left; }
  .bluetone .form-group .date {
    width: 100%;
    float: left; }
  .bluetone .groupinline .form-group {
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
    min-height: 34px; }
  .bluetone .pos-relative {
    position: relative; }
  .bluetone .nodata {
    width: 100%;
    text-align: center;
    display: inline-block;
    height: inherit;
    left: 0;
    right: 0;
    top: 0;
    position: absolute; }
  .bluetone .nodata img {
    max-width: 100%;
    max-height: 100%; }
  .bluetone .pointertd {
    cursor: pointer; }
  .bluetone .pointertd:hover {
    color: #4e90a6; }
  .bluetone .detailmodal .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #383838;
    position: relative;
    width: 100%; }
  .bluetone .detailmodal .modal-header .close {
    color: #fff;
    opacity: 0.4; }
  .bluetone .detailmodal .modal-footer {
    width: 100%;
    display: inline-block; }
  .bluetone .detailhead {
    font-size: 18px;
    color: #0b8fd7;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px; }
  .bluetone .labelname {
    margin-top: 6px;
    font-size: 13px;
    width: 100%;
    display: inline-block;
    font-weight: bold; }
  .bluetone .labeldata {
    font-size: 13px;
    width: 100%;
    display: inline-block;
    min-height: 36px;
    line-height: 18px; }
  .bluetone .tablehead {
    margin-top: 16px;
    font-size: 18px;
    line-height: 32px;
    display: inline-block;
    width: 100%;
    padding: 6px 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; }
  .bluetone .paddingNone {
    padding: 0; }
  .bluetone .gametable table {
    margin-bottom: 0px; }
  .bluetone .gametable table tr td {
    vertical-align: middle; }
  .bluetone .gametable table > tbody > tr > td:first-child, .bluetone .gametable table > thead > tr > th:first-child {
    padding-left: 15px; }
  .bluetone .usericonthumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    display: table-cell; }
  .bluetone .usericonthumb img {
    width: 100%;
    height: 100%; }
  .bluetone .userdetail {
    display: table-cell;
    padding-left: 10px;
    font-weight: bold;
    vertical-align: middle; }
  .bluetone .userpoint {
    background: url(../images/xemplar_sprite.png) no-repeat 0 -117px;
    padding-left: 26px;
    width: 100%;
    float: left;
    color: #383838;
    padding-top: 4px; }
  .bluetone .userdetail > span {
    color: #383838;
    font-weight: normal;
    padding-left: 3px; }
  .bluetone .gametable .tableScroll {
    max-height: 236px; }
  .bluetone .recordfilter {
    width: auto;
    float: right; }
  .bluetone .recordfilter .cleanbadge {
    border: 0px solid #ddd; }
    .recordfilter li{width:200px;}
    .recordfilter li select.form-control {
      width: 100px!important;margin-left:5px;
      display: inline-block;height: 28px;
  }
  .bluetone .btnradius {
    border-radius: 12px;
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 4px 10px;
    color: #383838;
    margin: 2px 3px 1px 0 !important;
    cursor: pointer;
    width: auto;
    display: inline-block;
    box-shadow: inset 0px -3px 3px #eeeef5;
    background: #fff; }
  .bluetone .btnradius.active {
    background: #f2f3f9;
    box-shadow: inset 0px 0px 2px #e1dee6; }
  .bluetone .rightpadding {
    padding-right: 15px !important; }
  .bluetone .leftpadding {
    padding-left: 15px !important; }
  .bluetone th, .bluetone td {
    font-size: 13px; }
  .bluetone .paginate_button.next, .bluetone .paginate_button.previous {
    font-size: 18px; }
  .bluetone .btn-action-edit, .bluetone .btn-action-check, .bluetone .btn-action-remove {
    padding: 2px; }
  .bluetone .input-group .form-control {
    padding: 5px 4px 6px; }
  .bluetone .form-group {
    min-height: 58px; }
  .bluetone .tick {
    fill: #A7A7A7;
    color: #A7A7A7; }
  .bluetone div#telematicsLoader {
    left: 527px;
    position: absolute;
    top: 255px;
    /* color: black; */ }
  .bluetone .search-box1 {
    padding: 4px 10px !important;
    width: 100% !important; }
  .bluetone .map-legend ul li unselectDrivingEvent {
    text-decoration: line-through; }
  .bluetone table.fixed {
    table-layout: fixed; }
  .bluetone .discrip {
    width: 56%;
    white-space: normal !important; }
  .bluetone .customloader {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    text-align: center;
    display: table; }
  .bluetone .loadicon {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    height: 100%; }
  .bluetone .loadicon span {
    font-size: 16px;
    animation-name: blink;
    animation-duration: .6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    padding: 2px; }
  .bluetone .loadicon span:nth-child(2) {
    animation-delay: .1s; }
  .bluetone .loadicon span:nth-child(3) {
    animation-delay: .2s; }
@keyframes blink {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }
  .bluetone .phonelabel {
    width: auto;
    font-weight: bold;
    font-size: 15px; }
  .bluetone .phonelabel i {
    color: inherit !important; }
  .bluetone .uploadbtn {
    position: relative; }
  .bluetone .uploadbtn input[type=file] {
    opacity: 0;
    width: 118px;
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    cursor: pointer; }
  .bluetone .msgHtml {
    width: 100%;
    float: left;
    padding: 15px 15px 20px 15px;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: -12px; }
  .bluetone .note-editor .modal-header {
    position: relative;
    color: #333; }
  .bluetone #wrapper.active .note-editor.note-frame.fullscreen {
    left: 240px;
    right: 0;
    width: auto !important; }
  .bluetone .note-editor.note-frame.fullscreen {
    top: 49px;
    bottom: 0;
    left: 50px; }
  .bluetone .label-success.badge {
    background-color: #5cb85c;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .bluetone .label-danger.badge {
    background-color: #d9534f;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .bluetone .label-primary.badge {
    background-color: #286090;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .bluetone .label-warning.badge {
    background-color: #f0ad4e;
    border-radius: 4px;
    padding: 5px 7px;
    margin-bottom: 0; }
  .bluetone .well hr {
    border-color: #ddd; }
  .bluetone .footertext {
    bottom: 10px;
    left: 0;
    padding-right: 15px;
    position: absolute;
    right: 0;
    text-align: right;
    font-size: 12px; }
  .bluetone .poweredBy {
    bottom: 0;
    display: block;
    font-size: 12px;
    width: 100%;
    padding-left: 5px;
    position: absolute;
    color: #b3b3b3;
    line-height: 16px !important; }
  .bluetone .listpanel .panel-body {
    height: 480px;
    overflow-y: auto; }
  .bluetone .navbar-toggle {
    border: 1px solid #0b8fd7;
    color: #fff;
    background: #0b8fd7 !important; }
  .bluetone .bigscrolltable {
    width: 100%;
    margin-bottom: 0px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd; }
  .bluetone .bigscrolltable .table > tbody > tr > td {
    word-break: normal; }
  @media screen and (max-width: 1260px) {
    .bluetone .bigtable-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd; }
    .bluetone .discrip {
      width: 180px; } }
  @media (max-width: 1180px) {
    .bluetone #wrapper.active, .bluetone #wrapper.active .nav-top-fix {
      padding-left: 50px;
      left: 0px; }
    .bluetone #wrapper.active #sidebar-wrapper {
      left: 50px; }
    .bluetone #wrapper.active .sidebar-nav li a i {
      width: auto !important;
      display: block;
      text-align: right !important; }
    .bluetone #wrapper.active .sidebar-nav li a span {
      display: none; }
    .bluetone #wrapper, .bluetone #wrapper .nav-top-fix {
      padding-left: 50px;
      left: 180px; }
    .bluetone #wrapper {
      position: relative; }
    .bluetone #wrapper.active {
      position: relative;
      left: 0px; }
    .bluetone #wrapper #sidebar-wrapper {
      left: 240px; }
    .bluetone #wrapper .sidebar-nav li a i {
      width: 50px !important;
      display: inline-block;
      text-align: left !important; }
    .bluetone #wrapper .sidebar-nav li a span {
      display: inline-block; }
    .bluetone #wrapper .navbar-fixed-top {
      width: 100%;
      right: auto; } }
  @media (min-width: 1180px) {
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom {    
      margin: 0;
      width: 100%;
      position: absolute;
      bottom: 16px; }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li {
      width: 25%;
      float: left;
      text-align: center;
      }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child {
      border: none; }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a {
      padding: 15px 20px;
      width: 100%;
      float: left;
      border-bottom: none;
      transition: all .2s ease 0s;
      -webkit-transition: all .2s ease 0s; }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a i {
      padding: 2px 0;
      text-align: center;
      width: 100%; }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li:last-child:after {
      padding: 0; }
    .bluetone #wrapper.active > #sidebar-wrapper > #sidebar > .bottom li a.active:after {
      font-family: "FontAwesome";
      content: "";
      position: absolute;
      right: -1px;
      top: 0;
      font-size: 30px; } }
  @media (max-width: 1024px) {
    .bluetone .tooltip {
      display: none !important; }
       .lighttone .greypanel .panel-heading,.darktone .greypanel .panel-heading
       {
      padding: 4px 8px 4px 42px;} 
      .lighttone .greypanel .panel-heading .panel-title i,.darktone .greypanel .panel-heading .panel-title i
       { padding: 11px 6px;width: 36px;}
      .lighttone .panel-title,.darktone .panel-title{font-size:12px}
      
      }
  @media (max-width: 767px) {
    .bluetone .modal-dialog.modal-sm {
      width: 300px; }
    .bluetone .driving-scrore-chart {
      width: 100%;
      border-right: 0px;
      border-bottom: 1px solid #ddd; }
    .bluetone .driving-scrore {
      width: 100%; }
    .bluetone .usertable table {
      margin: 0px !important; }
    .bluetone .form-group {
      height: auto !important; }
    .bluetone .navbar-right {
      float: right; }
    .bluetone .navbar-header {
      float: left; }
    .bluetone .navbar-toggle {
      padding: 6px 10px;
      margin: 9px;
      font-size: 12px;
      padding: 5px; }
    .bluetone .dropdown-user .dropdown-menu {
      right: -1px;
      left: auto; }
    .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu {
      margin-top: 0px; }
    .bluetone .nav-top-fix .navbar-right li.dropdown-user > .dropdown-menu li {
      border-color: #e5e5e5; }
    .bluetone .navbar-toggle {
      background-color: inherit; }
    .bluetone .date-filter .input-group {
      width: 49%;
      float: left;
      margin-left: 1%; }
    .bluetone .slider.slider-horizontal {
      margin-left: 2% !important;
      width: 98% !important; }
    .bluetone .vertical-offset-100 {
      padding-top: 20px; }
    .bluetone #modelnotify .modal-dialog {
      width: 300px; }
    .bluetone .inputcontrol, .bluetone .form-control {
      padding: 5px 6px; }
    .bluetone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; }
    .bluetone .date .cal-div {
      display: inline-block;
      width: 100%; }
    .bluetone .rangecontainer {
      min-height: 52px; }
    .bluetone .navbar-fixed-top .container-fluid {
      padding-right: 0px; }
    .bluetone .navbar-fixed-top .navbar-nav {
      margin-bottom: 0;
      margin-top: 0px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .bluetone .head-box .form-inline .form-group {
      margin-bottom: 10px !important; }
    .bluetone .slider.slider-horizontal {
      margin-left: 10px; }
    .bluetone .usertable table {
      margin: 0px !important; }
    .bluetone .panel-body .table-responsive {
      margin-bottom: 0px;
      padding-bottom: 10px; }
       /* Need While Merging to AUTO 2.2.1dashboard charts resize while in ipad*/
   
      }
  @media (max-width: 480px) {
    .bluetone .groupinline .form-group {
      display: inline-block;
      width: 100%;
      min-height: auto;
      padding: 6px 4px 2px 4px; }
    .bluetone .customtab > li > a {
      padding: 8px 7px; }
    .bluetone .customtab {
      position: relative;
      padding-top: 42px; }
    .bluetone .searchbtn {
      position: absolute;
      right: 0;
      top: 0; }
    .bluetone .customdropdown.fiterdown {
      width: 100%;
      margin-top: 4px; }
       }
  @media (max-width: 360px) {
    .bluetone .modal-dialog.modal-sm {
      width: 84%; }
    .bluetone .usericonthumb {
      display: none; }
    .bluetone .userdetail {
      padding-left: 0px;
      padding-right: 10px; }
       }

/*# sourceMappingURL=style.css.map */

fieldset{
  clear:both;
  border:1px solid #dedede !important;
  margin: 10px !important;
}

fieldset legend{
  border-bottom:0px;
      font-size: 14px;
      position:relative;
      padding:0px 10px;width:auto;margin-left: 5px;
      margin-bottom: 5px
}
fieldset legend:after{
  position: absolute;
  height: 1px;
  /*background:#dedede;*/
  content:'';
  right:0px;
       width: 93%;
    top: 8px;
};
.lighttone #wrapper.active .sidebar-nav li a span
  {
    font-weight:bold;
  }

.lighttone #wrapper.active .sidebar-nav li a span
  {
    font-weight:bold;
  }

  /*New Styles*/
/* Style The Dropdown Button */
.chartdropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;    
    font-size: 16px;
    border: none;
    cursor: pointer;
    left: 97% !important;
    bottom: 8px !important;
}

/* The container <div> - needed to position the dropdown content */
.chartdropdown {
    float: right;
    margin: 4px 0px 0 10px;
}

/* Dropdown Content (Hidden by Default) */
.chartdropdown-content {
     display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.2);
    z-index: 1;
    border: 6px solid #fff;
    left: 54.5%;
    top: 103%;
    margin-left: -200px;
    width: 400px;
    /* margin-top: -40px; */
}
.chartdropdown-content text {font-weight: bold;
    color: #081632;
    float: left;
    padding: 3px 6px;
    background-color: #fff;
}
/* Links inside the dropdown */
.chartdropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
/*.chartdropdown-content a:hover {background-color: #f1f1f1}*/

/* Show the dropdown menu on hover */
.chartdropdown:hover .chartdropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.chartdropdown:hover .chartdropbtn {
    /*background-color: #3e8e41;*/
}
.paletteLegend{
  width: 100%;
    margin-top: 3px;
    /*height: 12%;*/
}

/*User Management Styles */
.lighttone .driving-scrore-chart , .darktone .driving-scrore-chart {
  width: 35%;
  height: 100px;
  float: left;
  /* border-right: 1px solid #dedede; */
  position: relative;
  padding: 5px;
  bottom: 25px;
  left: 5px;
}
.driving-family-chart {
  /*width: 35%;
   float: left; */
  /* border-right: 1px solid #dedede; */
  position: relative;
  /*padding: 5px 0;*/
  width: 100%;
}
.driving-family-chart svg{ margin: -11px auto;display: inherit;}
.lighttone .driving-scrore,.darktone .driving-scrore{position: relative;}
.blue-bar{     clear: both;
  margin-top: -1px;
  width: 100%;
  background: #18B3A3 url(../images/curve-img.png) no-repeat 0 0;
  /*background-size: 100%;*/
  float: left;
}

.lighttone  .id-card .panel-body,.darktone  .id-card .panel-body{border-bottom: 0px solid red;}
/* .darktone .id-card .panel-body{ border: 2px solid #D9534F} */
.blue-bar
{
  background: #18B3A3 url(../images/curve-img.png) no-repeat 0 0;
};

.id-card .panel-body{ border: 2px solid #ADADAD;border-bottom: 0px solid red;}

.blue-bar p{font-weight:bold;color: #fff;margin-top:16px;padding-left: 15px;}
.blue-bar ul{padding:2px 15px;font-weight:bold;color: #444;background-color: #fff;border-top: 2px solid #051D4B ;border-radius: 0 0 9px 9px;}
.blue-bar ul {border-top: 2px solid #ADADAD ;}
.blue-bar ul li {
    /*margin-bottom:6px; uncomment when values are added*/
    margin-bottom: 19px; /*remove after value added*/
    left: 166px; /*remove after value added*/
    position: relative; /*remove after value added*/
    font-size: 20px; /*remove after value added*/
    top: 10px;/*remove after value added*/
    border-top: 0px solid #dedede!important;
    margin-top: 0px !important;
    padding-top: 0px !important;}
.blue-bar .heading-scrore.bod-bot{color:#000}
.darktone .blue-bar{
background: #D9534F url(../images/curve-img.png) no-repeat 0 0;
}
.lighttone.fleetadmin .id-card .panel,.darktone.fleetadmin .id-card .panel{overflow  :hidden;}
/* .greypanel{overflow:hidden;} */
.driving-scrore ul li.heading-scrore {
    /*text-transform: uppercase;*/
    color: #000;
    font-size: 13px;
    width: 100%;
    float: left;
    text-align: left;padding-bottom: 0;border-bottom: 1px solid #ccc;
    padding-top: 2px;line-height: 20px; font-weight: bold;border-left: 1px solid #ccc;}
/* .driving-scrore ul li.heading-scrore > span,{font-weight: normal;} */
.driving-scrore{
    /*float: right;*/
    /*border-left: 1px solid #dedede;*/
    /*width:65%; */
    width: 100%;
  }

     .trip-label {
    width: 85px;
    float: left;
}
.bod-bot > span{width: 50%;float: right;font-weight: normal;}

   #tripScoreButton
   {
    position: relative;
    left: -20px;
   }
.labelBold
{
  font-weight: bold;
}

@media (max-width: 1180px){
  .lighttone #wrapper, .lighttone #wrapper .nav-top-fix {
    left: 0px;padding-left: 240px; }
    .lighttone .driving-scrore-chart, .darktone .driving-scrore-chart{
      bottom: 5px;
    left:-1px}
    .chartdropbtn.poppoint{position:relative;bottom: 2px !important;margin-left: -22px;}
 }

.um_scoreLable, .um_policyscoreLable
{
  position: relative;
  left: 0px;
  font-size: 13px;
  font-weight: bold !important;
  top: 119px;
  width: 100%;
  text-align: center;
}


.um_scoreLable {
  top:101px;
  margin-bottom: 10px;
}
.um_policyscoreLable {
  top: 101px;
  margin-bottom: 10px;
}
.driving-family-chart .gaugeex1 {
  margin-top: -44px;
}
.driving-family-chart .gaugeex2 {
  margin-top:-44px;
}
 .driving-family-chart #ex1, .driving-family-chart #ex2 {
  padding-bottom: 50px;
  border-bottom: 1px solid #dedede;
} 
.driving-family-chart #ex1{
  /*border-bottom: 1px solid #dedede;*/
  border-right: 1px solid #dedede;
}
.driverscoreVal,.familyscoreVal{font-weight:normal}
.greyOut{
  opacity:0.5;
  cursor:unset !important;
}

.address-5 .col-md-3{width:20%;}
.address-5 .col-md-2{width:12%;}
.address-6 .col-md-3{width: 19%;}
.address-6 .col-md-2{width:12%;}
.personalinfo-5 .col-md-3{width:20%;}
.personalinfo .col-md-2{width:12%;}
.names-container .col-md-3{width:22.5%;}
.names-container .col-md-2{width:16%;}
.lighttone .dashboardIcons{color:#18B3A3}
.darktone .dashboardIcons{color:#D9534F}
.bluetone .dashboardIcons{color:08749E}
.tdpadding-right{padding-right: 27px !important}
.tdpadding-right-3{padding-right: 21px !important}
.tdbyagencypadding-right{padding-right: 90px !important}
.tdtripHistorypadding-right{padding-right: 40px !important}
.tdpadding-right2{padding-right: 45px !important}

.driverprofileSwitch span {top: 0px !important}
.driving-scrore ul {
  width: 100%;  
}
.driving-scrore ul li{
  width: 100% !important;  
  padding: 5px;    
}
.driving-scrore ul li.heading-scrore{
  padding-bottom: 0;
}
.driving-scrore ul li div{
  width: 50%;
  float: left;
  font-size: 12px;
}
.driving-scrore ul li .rightside{
  font-weight: normal;
}
.driving-scrore ul li:last-child{
  padding-bottom: 0 !important;
}
.driving-scrore ul li.heading-scrore{
  padding: 8px !important;
}
.scorechartborder{
  border: 1px solid #444444;border-bottom: none;
}
.driverchartinfo{
  border: 1px solid #444444;display: inline-block;
}
.driverinfo_pad{
  padding-left: 9%;
}
.chkHomePolicy{
  font-size: 14px;
}

/* New Popup Style */

.btop {
  border-top: 1px solid #000;
  padding: 0.5rem 0;
}
.driverCmodal .modal-header,.alertmodal .modal-header{
  border: none !important;
  color: #ffffff;
}
.driverCmodal .modal-title,.driverCmodal .modal-title i, .alertmodal .modal-title{
  color: #ffffff !important;
 }
 .alertmodal .modal-title i{color: red !important;}
 .alertmodal .form-group{min-height: 34px; margin-top: 10px;}
 .alertmodal .alertmodal-footer{clear:both}
 .lighttone  .alertmodal .errorMsg {top: -21px;}
 .alertmodal .col-md-4 {padding: 0;  text-align: right;  line-height: 30px;}
 .clear-fix{clear:both}
 .driverCmodal .modal-content,.alertmodal .modal-content{
   background-color: #032a52;
   border: 2px solid #163d8a !important;   
 }
 .driverCmodal .modal-body,.alertmodal .modal-body{
  background: url(../images/top-bar-bg.png) center center; 
  color: #000;
  font-weight: bold;
  margin: 0 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 0 0.5rem;
 }
 .driverCmodal .modal-footer,.alertmodal .modal-footer{
  border: none !important;
}
.driverCmodal .modal-body,.alertmodal .modal-body {text-align: center;font-weight: 600;padding: 6px 12px;}
.alertmodal .btop .btn-default{
  background: #07101e url(../images/fleet-nav-bg.jpg) 0 0 repeat-x !important;
    color: white !important;
    padding: 8px;
    width: 150px;
    margin: 5px 10px;
    border-radius: 5px!important;
    box-shadow: 0px 0px 5px #444;
    border: 1px solid rgba(185,185,185,0.5);
}
.alertmodal .btop .btn-default:hover {
  background: #8CC43F !important;
}
.v-scroll{
  max-height: 500px;
  overflow-y: scroll;
  display: inline-block;
}
.gm-style-iw-d{
  overflow: scroll;
    max-height: 212px;
    margin-top: -32px !important;
}
.gm-style-iw-d
{
  padding-right: 20px;
}
/* End New Popup Style */