/* 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: #e6e5d7;

}

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;

}

#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: #e6e5d8; /* Background for Top NAV  */

}

.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-light{

  background: #e6e5d8; /* Background for Left NAV  */

}

.hk-wrapper .hk-navbar{

  box-shadow: none; /* Remove Shadow from Top NAV */

  border-bottom: 1px solid #d0cfc0;

}

.hk-wrapper.hk-vertical-nav .hk-nav{

  box-shadow: none;  /* Remove Shadow from Left NAV */

  border-right: 1px solid #d0cfc0;

}

.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 #d0cfc0;

  -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: #FAFAFA;

  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: #fff;

  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: 150px;

  border: 0px;

  margin: 0 0.3%;

  width: 13.5%;

}

/* 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 .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 .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%;

}

.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: center;

}

.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;

}



.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;  

}



/* CSS Select 2 */

.select2-results__option[aria-selected] {

  cursor: pointer;

  font-size: 13px;

  padding: 10px;

  border-bottom: 1px solid #DFDFDF;

  text-transform: uppercase;

}



/* Sony Center */

.sonycentername {

  position: fixed;

  left: calc(50% - 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;

}

