/* @font-face kit by Fonts2u (https://fonts2u.com) */ 
@font-face {
  font-family:"Montserrat-Regular";
  src: url("../webfonts/Montserrat-Regular.ttf");
}

@media print {
  .d-print-none {
    display: none !important; }
  
  .col-md-10 {
    width: 100%;
    height: 100%;
  }

  .dataTables_filter, .dataTables_info { display: none; }
  .dataTable tfoot { display: none; }
}

.clear
{
  clear: both;
}
/* .fixed_bread_crum_bar
{
  position: fixed;
  z-index: 9999;
  width: 80.5%;
  top: 70px;
} */

.print
{
  cursor: pointer;
}
.bg-lwhite
{
  background-color: #f3f3f3;
}

.col-4_2
{
  -webkit-box-flex: 0;
    -ms-flex: 0 0 31%;
    flex: 0 0 31%;
    max-width: 31%;
}

a {
  text-decoration: none; }

select {
  width: 100%; }

i {
  cursor: pointer; }

li:hover i {
  color: #e1000a; }

i:hover {
  color: #e1000a; }

.display-6 {
  font-size: 20px; }

.text-light-red {
  color: #e1000a; }

table.dataTable tr td a i {
    /* font-size: 1.3rem; */
    margin: 0px 5px;
}

.custome_form input {
  width: 100%; }

.custome_form .table td, .custome_form .table th {
  border: none; }

#item_added .smallInp {
  width: 10%; }

.add_item {
  border: none; }

.dataTable .btn {
  padding: .275rem 0.25rem;
  line-height: 0.1;
  font-size: 0.8rem; }

.table td, .table th {
  padding: .35rem; }

#cart_icon i, #notification_icon i, #notes_icon i, #reorder_level_icon i, #leaves_icon i, #complain_icon i, #purchase_icon i, #purchase_return_icon i, #wtb_icon i, #wtw_icon i, #appo_icon i
{
  font-size: 20px;
}

#total_unseen_delete_update_rows, #total_unseen_orders, #total_unseen_notes, #total_reorder_level_rows, #total_unseen_leaves, #total_replied_leaves, #total_unseen_complain, #total_purchase, #total_purchase_return, #total_wtb, #total_wtw, #total_appo {
  position: absolute;
  background-color: #dc3545;
  color: white;
  padding: 3px 10px;
  border-radius: 100%;
  top: -23px;
  left: 10px; }

#retrieve_update_delete_notifications, #retrieve_total_unseen_orders, #retrieve_total_unseen_notes, #retrieve_reorder_level_notifications {
  display: none;
  position: absolute;
  top: 20px;
  left: -20px;
  z-index: 1;
  width: 400px;
  background: #fff;
  padding-top: 20px;
  padding-right: 10px;
  padding-left: 10px; }
  #retrieve_update_delete_notifications a, #retrieve_total_unseen_orders a, #retrieve_total_unseen_notes a, #retrieve_reorder_level_notifications a {
    display: block; }

#notification_icon:hover #retrieve_update_delete_notifications, #cart_icon:hover #retrieve_total_unseen_orders, #notes_icon:hover #retrieve_total_unseen_notes, #reorder_level_icon:hover #retrieve_reorder_level_notifications {
  display: block; }

#sidebar_css::-webkit-scrollbar, body::-webkit-scrollbar, .col-md-10::-webkit-scrollbar {
  width: 0.5em; }

#sidebar_css::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .col-md-10::-webkit-scrollbar {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

#sidebar_css::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .col-md-10::-webkit-scrollbar {
  background-color: darkgrey;
  outline: 1px solid slategrey; }

.display-5 {
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1; }

.display-6 {
  font-size: 1.3rem;
  font-weight: 100;
  line-height: 1; }

.display-7 {
  font-size: 1.1rem;
  font-weight: 100;
  line-height: 1; }

  /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modalanimation {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 ) 
  url('/assets/loading.gif') 
  50% 50% 
  no-repeat;
}

/* When the body has the loading class, we turn
 the scrollbar off with overflow:hidden */
body.loading .modalanimation {
  overflow: hidden;   
}

/* Anytime the body has the loading class, our
 modal element will be visible */
body.loading .modalanimation {
  display: block;
}


div.dataTables_wrapper div.dataTables_filter
{
  text-align: left;
}

div.dataTables_wrapper div.dataTables_filter input
{
  width: 450px;
}

.dataTable
{
  position: relative;
}
table.dataTable thead > tr > th
{
  position: sticky;
  top: 0; 
  /* Don't forget this, required for the stickiness */
}

table.dataTable thead th
{
  background: #fff;
}

input[type='checkbox']
{
  
  appearance: none;
  border: 1px solid #a79e9e;
  /* padding: 6px; */
  border-radius: 100%;
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  outline: none;
}

input[type='checkbox']:checked {
  background-color: #e1000a;
  position: relative;
  top: -2px;
  /* or whatever styles you want depending on your design */
  /* be as obvious as possible that it's a checkbox and that it's checked! */
}

input[type='checkbox']:checked:before
{
  content: '\2713';
  display: block;
  width: 10px;
  height: 10px;
  position: relative;
  bottom: 0px;
  font-size: 12px;
  left: 5px;
  font-weight: bold;
  color: #fff;
}

.delete_folder, .delete_note
{
  padding: 0.0rem 0.4rem;
  line-height: 1.4;
}

.lightshow
{
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: rgba( 0, 0, 0, .8 );
  z-index: 3;
  width: 100%;
  height: 100%;
}

.close_light_show
{
  right: 10px;
  top: 10px;
}

.left_arrow, .right_arrow
{
  background-color: #000;
  padding: 10px 20px;
  border-radius: 100%;
}

.darkened-image { 
  filter: brightness(50%);
} 

.more_images_span
{
  position: absolute;
    font-size: 50px;
    width: 100px;
    right: 30px;
    bottom: 40px;
    color: #fff;
}

.blink_me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.btn-warning
{
  background-color: #e98b00; 
  border-color: #e98b00;
}

.display-2-5-rem
{
  font-size: 2.5rem;
}

.form-control
{
  line-height: 1.3;
}

.select2-container .select2-selection--single
{
  height: 32px;
}

.sticky_header
{
  position: sticky;
  top: 0;
  background: white;
}

.currency_tag
{
  position: relative;
  color: #fff;
  right: 0%;
  padding: 2px;
  top: 0px;
  text-indent: 0px;
  z-index: 0;
}

.sticky-table {
  border-collapse: collapse;
  width: 100%;
}

.sticky-table th {
  position: sticky;
  top: 0;
  background: #f1f1f1;
  z-index: 1;
}