/*
  i wish this required CSS was better documented :(
  https://github.com/FezVrasta/popper.js/issues/674
  derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
  */

  .dropdown-click.form-control:focus{
    font-size: 1.35rem !important;
}

  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }

  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
    width: 280px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
    width:280px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }

/* colender */
.field-custom > input {
  height: 45px; 
 font-size: 20px;
}
.arrow-back{
 background:#939393;
 border-radius: 0 5px 5px 0;
}
/* .nxt-arrow{
 position:absolute;
 top:50%;
 right:0px;
}
.prev-arrow{
 position:absolute;
 top:50%;
 left:0px;
} */
.m-auto{
 margin:0 auto;
}
.fild-align {
 display: flex;
 width: 100%;
 justify-content: center;
 flex-direction: column;
} 

#specifyTimeSect >.time_menu_specifyTimeSect > b{
 display:block;
 text-align:center;
}
.top-align{

}

.nxt-arrow > .input-group-task{
 width: 40px;
 height: 40px;
 border-radius: 50%;
 line-height: 40px;
 text-align: center;
 font-size: 22px;
}

.h80{
 height: 92% !important;;
}
.cd-style .del-addr-name{
 font-weight:500;
 padding-bottom: 10px;
 font-size: 20px;
}




#calendar-address-dropdown::-webkit-scrollbar {
 width: 10px;
}


/* Track */

#calendar-address-dropdown::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 5px;
}


/* Handle */

#calendar-address-dropdown::-webkit-scrollbar-thumb {
 background: #99a0b3;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
}


/* Handle on hover */

#calendar-address-dropdown::-webkit-scrollbar-thumb:hover {
 background: #99a0b3;
}


.tooltip-inner {
 background-color: transparent!important;
 color: #E7F1FD;
 box-shadow: none!important;
 font-size: .6875rem;
 border-radius: 30px;
 padding: 7px 15px;
 text-align: center;
 min-width: 100%;
 color: #000;
}

.popper, .tooltip {
 position: absolute;
 z-index: 9999;
 background: #ffffff!important;
 color: black;
 width: 14%;
 border-radius: 3px;
 box-shadow: 0 !important;
 padding: 10px;
 text-align: center;
 font-weight: 500;
}


.tooltip-arrow{
border-color:#dddddd!important;
border-left-color: transparent!important;
 border-right-color: transparent!important;
} 

.tooltip{
 box-shadow: 0 0 1px rgb(0 0 0 / 25%)!important;
}
.pop-header{
  line-height: 37px;
  font-size: 21px;
  margin: 0px;
}


.form-field-custom{
  position:relative; 
}
.form-field-custom > label{
  display:none;
  width:100%;
} 

.form-field-custom > .txt-fild{
  display:block;
  width:100%;
  border-bottom:1px solid #e0e0e0;
  border-top:none;
  border-right:none;
  border-left:none;
  padding:7px 10px;
  font-size:18px;
  margin-bottom:10px;
}

.worning-msg{
  position: absolute;
  margin: 0 auto;
  width: 40%;
  top: 40%;
  z-index: 99;
  text-align: center;
  left: 0px;
  right: 0px;
  background: #fff;
  box-shadow: 1px 1px 10px #8a8888;
  padding: 33px;
}

.f-20{
  font-size: 20px!important;
}

.ful-overlay{
  position: absolute;
    width: 100%;
    background: #ffffffba;
    z-index: 9999;
    height: 100%;
}

/* calendar advisory window popup button style */
.cont-bttns > .pg-primery{
  background: #004d9a;
  color: #fff;
  font-size: 16px;
  padding: 11px 30px;
  width: 26%;
  border-radius: 7px;
  border: none;
}

.cont-bttns > .pg-danger{
    background: white;
    font-size: 16px;
    padding: 10px 30px;
    width: 26%;
    border-radius: 7px;
    margin-right: 54px;
    border: solid 1px #004d9a;
    color: #004d9a;
}

#incur-msg{
  font-weight: 300;
  line-height: 1.5rem;
}

.padding-btm-add{padding-bottom:50px !important;}




.tooltip_shipment {
  position: relative;
  cursor: pointer;
}

/* Show the tooltip on hover */
.tooltip_shipment:hover .tooltip_shipment_tooltiptext {
  visibility: visible;
  opacity: 1.0;
filter: alpha(opacity=100);
}

.tooltip_shipment_tooltiptext {
  font-size: 16px;
  font-family: 'Roboto', sans-serif !important;
  position: absolute;
  width: 355px;
  right: 0%;
  bottom: 100%;
  margin-bottom: 15px;
  font-weight: 500 !important;
  padding: 28px;
  box-shadow: 0 1px 9px rgb(0 0 0 / 10%);
  display: block; background-color:white; 
  color: #004d9a;
  visibility: hidden;
  opacity: 0;
  text-align: left;
}

/* The bordered part of the triangle */


.tooltip_shipment_tooltiptext::before,
.tooltip_shipment_tooltiptext::after {
  content: "";
  position: absolute;
  border-left:10px solid transparent;
  border-right: 10px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -10px;
}

.tooltip_shipment_tooltiptext::before {
  border-top: 10px solid #e3dede;
  /* margin-top: 5px; */
}

/* The white fill of the triangle */
.tooltip_shipment_tooltiptext::after {
  border-top: 10px solid white;
  margin-top: -2px;
  z-index: 9999;
}