body{
  background-color: #f6f9ff;
}
.orderpage_title #date_selected, #searched_customer_detail{
  padding: 0 5px;
  text-decoration: underline;
  color: #5d66a7;
}
.orderpage_title #searched_order_id, #searched_sony_center{
  padding: 0 5px;
  text-decoration: underline;
  color: #d96d6a;
}
/* PreLoaging ITC Logo Animations */
.preloader-it {
  background: rgba(255,255,255,.8);
  position: fixed;
  z-index: 10001;
  height: 100%;
  width: 100%;
  overflow: hidden; 
}

#L6 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  display: block;
  transform: translate(-50%,-50%);
}
/* Data Processing Loading */
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: white;
  box-shadow: none;
  background-image: url(../img/preloader.gif);
  background-repeat: no-repeat;
  background-position: center 10px;
  margin: 0 -75px;
  padding-top: 85px;
}

.container {
  max-width: 100%; /*  Over All container size */
  padding-left:0;
  padding-right: 0; 
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #EDEDED; /* #e8f5d8  |  #88c241 */
  color: #324148;
}
table.dataTable thead td, table.dataTable thead th,
table.dataTable tfoot td, table.dataTable tfoot th
{
  background-color: #e7f5fd; /* #e6e5d7; */
  color: #0b6193;
  font-weight: bold;
}
table.lineitem_data thead td, 
table.lineitem_data thead th,
table.lineitem_data tfoot td,
table.lineitem_data tfoot th{
  background-color: #e7fdf7; /* #e6e5d7; */
  color: #1c765e;
  font-weight: bold;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd{
  background-color: white;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.even{
  background-color: whitesmoke;
}
/* table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td{
  background-color: white;
} */
#dd{
  font-size: .875rem;
  padding: .25rem .5rem;
}

.back_clr{
  background-color: white;
}
.sync_type_date{
  padding-top: 8px;
}
.text-align-right{
  text-align: right;
}
.text-align-center{
  text-align: center;
}
.hk-wrapper .hk-navbar.navbar-light{
  background-color: #343a40; /* Background for Top NAV e6e5d8 */
}
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light{
  background: #343a40; /* Background for Left NAV  */
}
.hk-wrapper .hk-navbar{
  box-shadow: none; /* Remove Shadow from Top NAV */
  border-bottom: 1px solid #454d55;
}
.hk-wrapper.hk-vertical-nav .hk-nav{
  box-shadow: none;  /* Remove Shadow from Left NAV */
  border-right: 1px solid #454d55;
}
.hk-wrapper .hk-navbar.navbar-light a.navbar-toggle-btn,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
  color: #c2c7d0;
}
/* Nav Content and Mouse Over  */
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light .navbar-nav .nav-item .nav-link{
  color: rgba(255,255,255,.6);
}
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light .navbar-nav .nav-item .nav-link:hover, .hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light .navbar-nav .nav-item .nav-link:focus{
  color: rgba(255,255,255,.9);
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav .nav-item ul.collapse-level-1 .nav-item .nav-link{
  padding: 0.35rem 1rem 0.35rem 1.5rem;
}
.hk-wrapper.hk-vertical-nav.hk-icon-nav.hk-nav-toggle .hk-nav .navbar-nav .nav-item .nav-link-text{
  margin-top: 2px;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav .nav-item .nav-link > i {
  margin-right: 12px;
  line-height: 30px;
}
.nav-link{
  transition: all 0.65s;  
}
.nav-link svg{
  width: 18px;
  fill: #c4c3b1;
}
.nav-link:hover svg{
  transition: all 0.65s;
  transform: rotateY(360deg);
}
.nav-link:hover .svgover{
  fill:rgb(215, 75, 0);
}
.hk-pg-wrapper{
  background-color: #F4F6F8; /* Background for Middle Area of the page */
}
/* Middle boxes of the page  which has Data Table and Form*/
.hk-sec-wrapper{
  /*border: none;*/
  box-shadow: none;
}
.hk-pg-wrapper{
  padding-top: 70px;
}

@media (min-width: 1200px){
  .hk-wrapper.hk-vertical-nav.hk-icon-nav .hk-pg-wrapper {
    padding: 85px 30px 0 30px;
  }
}
.bg-pimary-color{
  background-color: #b2bee1;
}
.bg-secondary-color{
  background-color: #b3ddd2;
}
.bg-third-color{
  background-color: #ffe6c2;
}
.bg-forth-color{
  background-color: #e5cfec;
}
.bg-fifth-color{
  background-color: #bcd6a6;
}
.bg-sixth-color{
  background-color: #aed2e0;
}
.bg-seventh-color{
  background-color: #f5cfc7;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li{
  border-bottom: 1px solid #454d55;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li:hover{
  background-color: rgba(0, 0, 0, .2);
  /* color: #000; */
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav .nav-item .nav-link > i{
  color: #1b87c4;
  width: 25px;
  display: inline-block;
  text-align: center;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav-wrap{
  padding-top: 0.1rem;
}
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light .navbar-nav .nav-item .nav-link{
  padding: 8px 12px;
}
.bg-trans-dark-50{
  background: none;
}
/* for Tabs on Page */
.nav-tabs {
  margin-left : 20px; 
}
.nav-tabs li{
  border: 1px solid #e2e2e2;
  border-bottom: 0; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #FFF;
  margin: 0 2px;
  overflow: hidden;
  padding: 6px 0;
}
.nav-tabs li a{
  padding: 8px 20px;
  line-height: 20px;
  color: #868686;
  background-color: #e6e5d8;
}
.nav-tabs li a:hover{
  background-color: #2bbccd;
  color: #fff;
}
.nav-tabs li.active a{
  color: #324148;
  background-color: #FFF;
}
.buttonwhite{
  color: white;
}
/* Convert A link into Button Size */
.link_button{
  padding: 6px;
}
button{
  cursor: pointer;
}
.btn-disable{
  background-color:#EAEAEA;
  color: #d1d1d1;
  text-shadow: 1px 1px 1px #FFF;
}
.btn-group-sm>.btn, .btn-sm{
  padding: 4px 8px;
  margin: 0 4px;
}

/* Data Table Search Input */
.dataTables_wrapper .dataTables_filter input{
  background-color: #FAFAFA;
}
.dataTables_wrapper .dataTables_length select {
  width: 55px;
  margin-right: 0px;
  height: 28px;
  font-size: 12px;
}
.dataTables_length label{
  padding-top: 3px;
  font-size: 12px;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td, table.dataTable tfoot th, table.dataTable tfoot td{
  padding: 10px 5px;
  font-size: 12px;
}

.dataTables_wrapper .dataTables_filter input{
  width: 200px;
  margin-left: 10px;
  display: inline-block;
}
.dataTables_wrapper .table td {
  font-size: 13px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate{
  font-size: 13px;
}
.Datatableth_sticky{
  position: fixed;
  top: 65px;
  z-index: 1000;
  width: 100%;
}
.Datatableth_sticky th{
  padding: 5px 5px !important;
}
.th_select_checkbox{
  width: 10px;
}
.th_status{
  width: 100px;
}
.th_action{
  width: 150px;
}
.bg-green, .bg-success{
  color: white;
}

/* Index Page Commond Css od Data Layer */
.dataTables_wrapper .dataTables_filter input{
  width: 200px;
  margin-left: 10px;
  display: inline-block;
  height: 28px;
}
/* Table Column CSS */
.tdcheckbox{
  width: 3%;
  text-align: right;
}
.tddate{
  width: 10%;
  text-align: center;
}
.tdorder{
  width: 9%;
  text-align: center;
}
.tdbranch{
  width: 10%;
  text-align: left;
  padding-left: 5px;
}
.tdordercount{
  width: 90px;
  text-align: center;
}

.tdcustomer{
  text-align: left;
}
.tdpincode{
  width:8%;
  text-align: left;
}
.tdsonycenter{
  width:24%;
  text-align: left;
  padding-left: 5px;
}
.tdemailid{
  text-align: left;
}
.tdprice{
  text-align: right;
  padding-right: 15px !important;
}
.thprice{
  text-align: center;
  width: 8%;
}
.tdsku{
  text-align: center;
  width: 9%;
}
.tdproductsname{
  width: 18%;
}
.tdsapname{
  width: 10%;
}
.tdskumapping{
  text-align: center;
}
.tdstatus{
  width: 2%;
  text-align: center;
}
.centerid{
  width:40%;
  text-align:left;
}
.tdactions{
  width: 3%;
  text-align: center;
  font-size: 1.2em;
}
.tdactions a .fa{
  font-size: 20px;
}
.productsku{
  width:14%;
  text-align:center;
}
/* 
table#master_table th {
  font-size: .8em;
} */

td.details-control {
  background: url('../img/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('../img/details_close.png') no-repeat center center;
}
td.no-padding.bg-gray{
  background-color: #EDEDED;
}


.no-padding{
  padding: 0 0 5px 0 !important;
}

/* Animation Effects */
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li{
  position: relative;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  transition: transform 500ms ease-in-out;
  transform: scaleX(0);
  transform-origin: right;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li:hover:before {
  /* transition: transform 500ms ease-in-out; */
  transform: scaleX(1);
  transform-origin: left;
}
/* .hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav li:hover a.nav-link{
  color: #000 !important;
} */
.buttonOverAnimation{
  position: relative;
  overflow: hidden;
  transition: transform 500ms ease-in-out;
  text-transform: uppercase;
}
.buttonOverAnimation::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  transition: transform 500ms ease-in-out;
  transform: scaleX(0);
  transform-origin: right;
}
.buttonOverAnimation:hover::before {
  /* transition: transform 500ms ease-in-out; */
  transform: scaleX(1);
  transform-origin: left;
}
.buttonOverAnimation div{
  position: relative;
  transition: 500ms ease-in-out;  
}
/* Commented by Tejash Shah. Dont want to much Effects */
/* .buttonOverAnimation div::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  left: -150%;
  color: #FFF;
}
.buttonOverAnimation:hover div{
  transform: translateX(150%);
} */

/* Order Page Tab View Changed */
.ordertabs{
  position: relative;
}
.ordertabs::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  transition: transform 500ms ease-in-out;
  transform: scaleY(0);
  transform-origin: bottom;
}
.ordertabs:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
.ordertabs.active:hover::before {
  transform: scaleY(0);
}
.order-tab li a{
  color: white;
  padding: 0px;
}
.order-tab li a:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.order-tab {
  text-transform: uppercase;
  background-color: transparent;
  font-size: 13px;
  letter-spacing: .15em;
  
}
.order-tab li {
  min-width: 100px;
  border: 0px;
  margin: 0 0.3%;
  width: 12.15%;
}
/* Order Effects */
.order-tab .orderall{
  background-color: #5D66A8;
}
.order-tab .orderopen{
  background-color:#0087C4;
}
.order-tab .orderconfirmed{
  background-color: #80BE70;
}
.order-tab .orderdispatched{
  background-color: #C4BD62;
}
.order-tab .orderfulfilled{
  background-color:  #D96D6A;
}
.order-tab .orderpartial{
  background-color: #C155CC;
}
.order-tab .ordercancelled{
  background-color: #3570AA;
}
.order-tab .ordercancellation_request{
  background-color: #FF335B;
}
.order-tab .orderpayout{
  background-color: #CBA261;
}
/* on active */
.order-tab .active{
  background-color: white;
}

.order-tab .orderall.active a{
  color: #5D66A8;
}
.order-tab .orderopen.active a{
  color: #0087C4;
}
.order-tab .orderconfirmed.active a{
  color: #80BE70;
}
.order-tab .orderdispatched.active a{
  color: #a39d40;
}
.order-tab .orderfulfilled.active a{
  color: #D96D6A;
}
.order-tab .orderpartial.active a{
  color: #C155CC;
}
.order-tab .ordercancelled.active a{
  color: #3570AA;
}
.order-tab .ordercancellation_request.active a{
  color: #FF335B;
}
.order-tab .orderpayout.active a{
  color: #CBA261;
}

.ordernos,
.textvalue{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}
.textvalue{
  padding: 2px 20px 2px 20px;
}
.ordernos{
  padding: 15px 20px 5px 20px;
  font-size: 3em;
}
.whiteunderline{
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: white;
}

.hk-sec-wrapper{
  border: 0; /* Removed Bordered */
}

/* Tooltips */
a[data-tool-tips] {
  position: relative;
  color: #ef5585;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center;
}

a[data-tool-tips]::after {
  content: attr(data-tool-tips);
  position: absolute;
  bottom: 0;
  transform: scale(0);
  background-color: rgba(0, 0, 0, .9);
  color: seashell;
  white-space: nowrap;
  padding: 5px 10px;
  transition: all ease-out 150ms;
  text-align: center;
  font-size: .7em;
  line-height: 1.3em;
  border-radius: 5px;
}

a[data-tool-tips]:hover::after {
  transform: scale(1);
  bottom: 100%;
}
#contact_detail_table button{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  float: right;
}

button[data-tool-tips]::after {
  content: attr(data-tool-tips);
  position: absolute;
  bottom: 0;
  transform: scale(0);
  background-color: rgba(0, 0, 0, .9);
  color: seashell;
  white-space: nowrap;
  padding: 5px 10px;
  transition: all ease-out 150ms;
  text-align: center;
  font-size: .7em;
  line-height: 1.3em;
  border-radius: 5px;
}

button[data-tool-tips]:hover::after {
  transform: scale(1);
  bottom: 115%;
}



.alineanimation{
  position: relative;
  color: #DB747B !important;
  transition: color 500ms ease-in-out;
  cursor: pointer;
}
.alineanimation:hover{
  color: #2bbccd !important;
}
.alineanimation::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #2bbccd;
  transition: transform 500ms ease-in-out;
  transform: scaleX(0);
  transform-origin: right;
}
.alineanimation:hover::before {
  /* transition: transform 500ms ease-in-out; */
  transform: scaleX(1);
  transform-origin: left;
}
/* Model */
.modal-lg {
  max-width: 95% !important;
}
.modal-header{
  background-color: #e6e5d8;
}

/* CSS for Filter */
.page_filter {
  background-color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.page_filter .form-control {
  border-width: 1px;
  background-color: whitesmoke;
  border-color: #e0e3e4;
  padding: 5px 10px;
  height: 32px;
  font-size: 14px;
}
.page_filter .col-md-3{
  padding-left: 10px;
  padding-right: 0;
}
.page_filter span{
  font-size: 14px;
}
.page_filter h5{
  border-bottom: 1px solid #EDEDED;
  margin-bottom: 10px;
}
#search_string h4{
  font-size: 1.2em;
}
.filterlabel{
  width: 5%;
  padding-top: 5px;
  font-size: 14px;
}
.filterobjects{
  width: 93%;
}

.page_filter .select2-container--default .select2-selection--single{
  border: 1px solid #e0e3e4;
  height: 32px;
  background-color: whitesmoke;
}
.page_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  font-size: 14px;
  padding-left: 0;
}
.page_filter .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 32px;
  right: 5px;
}
.page_filter .select2-container--open .select2-dropdown--below{
  border: 1px solid #e0e3e4;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;  
}

.page_filer_container{
  width: 100%;
  text-align: center;
}
.page_filer_container div{
  padding: 1% 1%;
  display: inline-block;
  font-size: 13px;
}
.page_filer_container div.title{
  width: 38%;
  text-align: right;
  vertical-align: top;
  padding-top: 13px;  
}
.page_filer_container div.content{
  width: 60%;
  text-align: left;
}
.page_filer_container .save_button{
  text-align: center;
}
.page_filer_container .custom-control{
  display: inline-block;
}

.page_filer_container .table-sm td, 
.page_filer_container .table-sm th{
  padding: 5px;
}
.page_filter textarea.form-control{
  height: auto;
}
/* CSS Select 2 */
.select2-results__option[aria-selected] {
  cursor: pointer;
  font-size: 13px;
  padding: 10px;
  border-bottom: 1px solid #DFDFDF;
  text-transform: uppercase;
}
.two_column_container{
  display: flex !important;
  justify-content: center;
  align-items: stretch;
}
.two_column_container .two_column{
  width: 50%;
}
.two_column_container .two_col_divider{
  width: 25px;
}
/* Sony Center */
.sonycentername {
  position: fixed;
  left: calc(40% - 200px);
  z-index: 1030;
  padding: 5px 10px;
  margin-top: 15px;
  width: 400px;
  text-align: center;
  border-radius: 5px;
  background: rgba(255,255,255,.6);
  font-size: 13px;
  font-weight: bold;
}
.action_buttons{
  margin-top: 3px;
}
.forgotpassword{
  margin-top: 10px;
  display: inline-block;
  font-size: 13px;
}
.uppercase{
  text-transform: uppercase;
}
.hk-pg-wrapper .nav-tabs{
  margin-left: 0;
}
.order-tab li{
  margin: 0 2px;
}
/* Changes on Dispatch Tab on Order Page */
.disptach_data{
  padding: 10px 3px;
}
.disptach_data b{
  color:rgb(215, 75, 0);
}
.uppercase_text{
  text-transform: uppercase;
}
.animation_contain{
  display: flex;
  justify-content: flex-end;
}