/*
 *  custom style
 *
 * This style is use in additional needs.
 *
 */

.anchor_cls{
    color: #0168fa !important;
    text-decoration: none;
    background-color: transparent;
}
.spinner-border {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}
.avatar-img {
    width: 154px;
    height: 154px;
    margin: 0 auto;
}
 .textbox-class{
      border-top: none;
    border-left: none;
    border-right: none;
 }
.pad-20{
        padding: 20px !important;
}

.feather-11 {
    width: 10px !important;
    height: 10px !important;
}
.width-min{
    flex-basis: auto;
}
.focus-cls{
    padding:27px;
    font-weight:bold;
    font-size:20px !important;
}

.dropdown-item1 {
    font-size: 12px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: #1c273c;
}

.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    z-index: 9;
}

.dropdown-item1 svg {
      width: 14px;
      height: 14px;
      stroke-width: 2.5px;
      margin-right: 10px;
      color: #8392a5; }

.ndatepick .select2-container
{
	width: 100% !important;
}
 .ui-datepicker
{
	z-index: 100 !important;
}
.select2-container {
    max-width: 100%;
}
/*.taskformd {
    overflow-y: scroll;
	    overflow-x: hidden;
}*/
.fname {
    padding: 0px;
    font-weight: 500;
    line-height: 1.25;
    color: #001737;
    font-size: 1.09375rem;
    margin-bottom: 15px;
}
.profile_edit {
border-radius: 0px;
    border-color: transparent;
    height: auto;
    padding-bottom: 0px;
    padding-bottom: 4px;
    padding-left: 0;
    border: 0px;
    border-bottom: 1px solid transparent;
    background-color: #fff0;
    padding-left: 10px;
    padding-top: 7px;
}
.profile_edit.active
{
 border: 0px;
    box-shadow: 0 0 0 0rem rgba(1, 104, 250, 0.25);
	border-bottom: 1px solid #a5c9ff;
	background: url('../img/pencilicon2.png') right center no-repeat;
	    background-color: white;
}
.profile_edit:focus {
    border: 0px;
    box-shadow: 0 0 0 0rem rgba(1, 104, 250, 0.25);
	border-bottom: 1px solid #a5c9ff;
	background: url('../img/pencilicon2.png') right center no-repeat;
}
.form-saver {
    background-color: #f5f8fa;
    border-top: 1px solid #cbd6e2;
    padding: 1rem 140px 1rem 3.25rem;
    position: fixed;
    bottom: 0px;
    width: 100%;
	display: none;
	transition-property: none;
    transition-duration: 300ms;
    transform: translateY(0%);
}
.page_loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99999;
    top: 0;
    text-align: center;
    padding-top: 25%;
}
.addnote{
    width: 69%;cursor: pointer;
}


.nav-common {
    background-color: #ffffff;
    height: 33px;
    display: inline-block;
    width: 33px;
    border-radius: 35px;
    box-shadow: 1px 1px #00000017;
}
.nav-common svg {
    height: 18px;
    text-align: center;
    margin: 7px auto;
    display: block;
}
nav.contact-call-nav {
    display: flex;
    gap: 10px;
}
.notreadcls{
   /* color:black;*/
   font-weight:bold
}
.readcls{
    color: gray;
}
.dhide
{
    display: none !important;
}
.pad13{
    padding-right: 13px;
}
.customer-com-sel {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;

   /* border-bottom: 1px solid rgba(72, 94, 144, 0.16);*/
   /*  border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(72, 94, 144, 0.16);*/
    display: flex;
    align-items: center;
    padding: 0 15px;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
}
.action-btn{
    color: #0091ae !important;
    font-size: 14px;
}
.df-logo {
    margin-top: 5px !important;
}
.focus-cls-reminder {
    padding: 27px;
    font-weight: bold;
    font-size: 16px !important;
}
.right-slide-wrap { 
    background-color: white; 
    position: fixed; 
        bottom: 0;
    right: -480px; /* Initial position outside the viewport */ 
     
    width: 480px; /* Set the width of your slide-in div */ 
     
    transition: right 0.3s ease; /* Add a transition for a smooth effect */ 
        box-shadow: -3px 3px 6px #00000012; 
            z-index: 9; 
} 
.right-slide-wrap-com { 
    background-color: white; 
    position: fixed; 
       bottom: 0; 
    right: -480px; /* Initial position outside the viewport */ 
    
    width: 480px; /* Set the width of your slide-in div */ 
     
    transition: right 0.3s ease; /* Add a transition for a smooth effect */ 
        box-shadow: -3px 3px 6px #00000012; 
            z-index: 9; 
                top: 0px;
} 
 
/* Add this class to move the div into the viewport */ 
.right-slide-wrap.open { 
    right: 0; 
} 
.right-slide-wrap-com.open { 
    right: 0; 
} 

.right-slide-wrap-assign-to
{
    background-color: white; 
    position: fixed; 
       bottom: 0; 
    right: -480px; /* Initial position outside the viewport */ 
    
    width: 480px; /* Set the width of your slide-in div */ 
     
    transition: right 0.3s ease; /* Add a transition for a smooth effect */ 
        box-shadow: -3px 3px 6px #00000012; 
            z-index: 9; 
                top: 0px;
}
.right-slide-wrap-assign-to.open { 
    right: 0; 
} 


 
.right_headWrap { 
    display: flex; 
    justify-content: space-between; 
    padding: 20px 50px; 
    align-items: center; 
    background: linear-gradient(90deg, rgb(227 6 19) 0%, rgb(255 209 209) 85%, rgba(255,255,255,1) 100%); 
} 
.right_headWrap h3 { 
    margin: 0px; 
    color:white; 
} 
.rightSlide-body 
{ 
            padding: 20px 50px;
} 
.slideRight-footer {
padding: 20px 50px;
    background-color: rgb(245, 248, 250);
    text-align: right;
    position: absolute;
    width: 100%;
    bottom: 0px;
}
.RMstyle{
    position: static!important;
}
button.SlideCreate { 
    background-color: #f71422;
    border: 1px solid #f71422;
    color: white!important;
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: 600;
} 
button.slideAdd { 
    background-color: white;
    border: 1px solid #f71422;
    color: #f71422!important;
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: 600;
} 
button.slideCancel.closebtnM { 
    background-color: white;
    border: 1px solid #f71422;
    color: #f71422!important;
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: 600;
}
/*.right-slide-wrap, .right-slide-wrap-com {
   
    padding-bottom: 25px;
}*/
.dropdown.actiondrop a {
    background-color: unset;
    border: none;
    color:#0091ae;
}
.dropdown.actiondrop a:hover {
    background-color: unset;
    border: none;
    color:#0091ae;
}
.centerTDTH
{
    width: 50px;
    text-align: center;
}
.right_headWrap .close {
    color: white!important;
}
/*body
{
    overflow-x:hidden;
}*/

.select2-container .select2-selection--single {
    height: 39px!important;
    padding-top: 4px;
    padding-left: 5px;
}
  .rwd-table {
  margin: auto;
  min-width: 300px;
  width: 100%;
  border-collapse: collapse;
}

.rwd-table tr:first-child {
    border-top: none;
    background: #b7b7b72e;
    color: #494949;
}

.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: white;
}

.rwd-table tr:nth-child(odd):not(:first-child) {
  background-color: white;
}

.rwd-table th {
  display: none;
}

.rwd-table td {
  display: block;
}

.rwd-table td:first-child {
  margin-top: .5em;
}

.rwd-table td:last-child {
  margin-bottom: .5em;
}

.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 120px;
  display: inline-block;
  color: #000;
}

.rwd-table th,
.rwd-table td {
  text-align: left;
}

.rwd-table {
  color: #333;
  border-radius: .4em;
  overflow: hidden;
      margin-top: 5px;
}

.rwd-table tr {
  border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
  padding: .5em 1em;
}
@media screen and (max-width: 601px) {
  .rwd-table tr:nth-child(2) {
    border-top: none;
  }
}
@media screen and (min-width: 600px) {
  .rwd-table tr:hover:not(:first-child) {
    background-color: #d8e7f3;
  }
  .rwd-table td:before {
    display: none;
  }
  .rwd-table th,
  .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table th,
  .rwd-table td {
    padding: 1em !important;
  }
}

.custComplaintWrap {
    display: flex;
    gap: 10px;
}
.latestTaskk td
{
    padding: 11px 10px;
    border-top: 1px solid #eaeaea;
}
.latestTaskk th{
    padding: 11px 10px;
}





.trackCargo .card {
z-index: 0;
    background-color: #ffffff;
    padding-bottom: 20px;
    border-radius: 3px;
}

.trackCargo .top {
    padding-top: 40px;

}

/*Icon progressbar*/
.trackCargo #progressbar {
    margin-bottom: 15px;
    overflow: hidden;
    color: #455A64;
    padding-left: 0px;
    margin-top: 10px;
} 

.trackCargo .cust-font
{
        font-size: 11px;
    text-align: center;
    font-weight: 400!important;
        width: 64px;
}

.trackCargo #progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 16.6%;
    float: left;
    position: relative;
    font-weight: 400;
}

.trackCargo #progressbar .step0:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f10c";
    color: #fff;
}

.trackCargo #progressbar li:before {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    font-size: 16px;
    background: #C5CAE9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
}

/*ProgressBar connectors*/
.trackCargo #progressbar li:after {
content: '';
    width: 100%;
    height: 6px;
    background: #C5CAE9;
    position: absolute;
    left: 0;
    top: 12px;
    z-index: -1;
}

.trackCargo #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
}

.trackCargo #progressbar li:nth-child(5):after, .trackCargo #progressbar li:nth-child(6):after {
    left: -50%;
}

.trackCargo #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}

.trackCargo #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.trackCargo #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/*Color number of the step and the connector before it*/
.trackCargo #progressbar li.active:before, .trackCargo #progressbar li.active:after {
    background: #f71422;
}

.trackCargo #progressbar li.active:before {
    font-family: Font Awesome 5 Pro;
    content: "\f1b3";
}

.trackCargo .icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
}
.trackHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}



@media screen and (max-width: 992px) {
    .trackCargo .icon-content {
        width: 50%;
    }
}
.trackingWrap {
  display: none; /* Initially hide the trackingWrap */
}
span.toggleTrack {
font-size: 15px;
    font-weight: 600;

}
.trackHead
{
    background-color: #ffe3d1;
    border: 1px solid #e9e9e9;
    padding: 8px 12px;
    border-radius: 3px;
}
a.toggleTrackNew {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.custLScroll
{
        overflow-y: auto;
    max-height: 410px;
}

.pos-rel{
    position:relative;
}
.pos-rel .togglePassword {
    position: absolute;
    top: 9px;
    right: 12px;
}