.bd-placeholder-img {
     font-size: 1.125rem;
     text-anchor: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
}
 @media (min-width: 768px) {
     .bd-placeholder-img-lg {
         font-size: 3.5rem;
    }
}
 .b-example-divider {
     width: 100%;
     height: 3rem;
     background-color: rgba(0, 0, 0, .1);
     border: solid rgba(0, 0, 0, .15);
     border-width: 1px 0;
     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
 .b-example-vr {
     flex-shrink: 0;
     width: 1.5rem;
     height: 100vh;
}
 .bi {
     vertical-align: -.125em;
     fill: currentColor;
}
 .nav-scroller {
     position: relative;
     z-index: 2;
     height: 2.75rem;
     overflow-y: hidden;
}
 .nav-scroller .nav {
     display: flex;
     flex-wrap: nowrap;
     padding-bottom: 1rem;
     margin-top: -1px;
     overflow-x: auto;
     text-align: center;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
}
 .btn-bd-primary {
     --bd-violet-bg: #712cf9;
     --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
     --bs-btn-font-weight: 600;
     --bs-btn-color: var(--bs-white);
     --bs-btn-bg: var(--bd-violet-bg);
     --bs-btn-border-color: var(--bd-violet-bg);
     --bs-btn-hover-color: var(--bs-white);
     --bs-btn-hover-bg: #6528e0;
     --bs-btn-hover-border-color: #6528e0;
     --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
     --bs-btn-active-color: var(--bs-btn-hover-color);
     --bs-btn-active-bg: #5a23c8;
     --bs-btn-active-border-color: #5a23c8;
}
 .bd-mode-toggle {
     z-index: 1500;
}
 .bi {
     display: inline-block;
     width: 2rem;
     height: 1rem;
}

   div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
    text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
 
 
.password-field-container {
  position: relative;
}

.password-toggle-edit {
  position: absolute;
  right: 45px;
  top: 71%;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle1 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle2 {
  position: absolute;
  right: 45px;
  top: 71%;
  transform: translateY(-50%);
  cursor: pointer;
}


.password-field-container {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.green-button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
/* In your CSS file */
.green-button {
  color: green;
  transition: color 0.3s ease; /* Adding a smooth transition effect */
}


/* In your CSS file */
.green-button {
  width: 100%;
/*  background-color: green;*/
  color: white;
  transition: background-color 0.3s ease;
}

.green-button:active {
  background-color: darkgreen; /* Change the background color when clicked */
}
/* In your CSS file */
.actions {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100px; /* Optional: Set a height for the container */
}


.dropdown-menu {
    position: absolute;
    top: 80%;
    left: 21px;
    min-width: 12rem;
    text-align: left;
}
 .nav-link1 {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: .875rem;
    font-weight: 500;
    color: #00388b;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
a:hover {
  text-decoration: none; 
  cursor: pointer; 
}

.horiz {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 900;
  overflow: hidden;
  background-color: #0d6efd;
}

li {
  float: left;
}

.horiz{
  display: block;
  color: white;
  text-align: center;
  padding: 8px 20px;
  text-decoration: none;
}
.horiz1:hover {
  background-color: #111;
}

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  box-sizing: border-box;
    padding: 7px,14px;
    margin-left: 2px;
    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 6px;
}

.current-page {
  background-color: #333;
  color: #fff;
  justify-content: center;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 0 2px;
}

/* Style for other pagination links */
.pagination a {
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 5px;
  margin: 0 2px;
}

.pagination a:hover {
  background-color: #ddd;
}

.styled-link1 {
   text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    padding: 6px 9px;
    background-color: #0d6efd;
    border: 2px solid #3777af;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover state - change background and text color */
.styled-link1:hover {
    background-color: #0074d9;
    color: #fff;
}

.styled-link2 {
   text-decoration: none;
    color: #ffffff;
    font-weight: 20px;
    padding: 1px 11px;
    background-color: #0d6efd;
    border: 2px solid #3777af;
    border-radius: 7px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}
.styled-link3 {
text-decoration: none;
    color: #ffffff;
    font-weight: 20px;
    padding: 1px 11px;
    background-color: #f17878;
    border: 2px solid #af3737;
    border-radius: 7px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.styled-link2:hover {
  color: white;
  text-decoration: none; 
  cursor: pointer; 
}

#company-select {
    width: 35%;
    padding: 6px;
    font-size: 17px;
    border: 1px solid #206da1;
    border-radius: 10px;
    background-color: #fff;
    color: #333;
    position: absolute;
    right: 26px;
    top: 23px;
    text-align: inherit;
}

#shipping_address {
    width: 35%;
    padding: 6px;
    top: 23px;
    font-size: 17px;
    right: 25px;
    border: 1px solid #206da1;
    border-radius: 10px;
    background-color: #fff;
    color: #333;
    text-align: inherit;
}

 .ginput_container {
  position: relative;
}

.help-icon {
 cursor: pointer;
    position: absolute;
    right: 29px;
    top: 51%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/25/Icon-round-Question_mark.jpg);
    background-size: cover;
}

.help-message {
 position: absolute;
    left: 0%;
    font-size: 13px;
    color: white;
    top: 160%;
    transform: translateY(-50%);
    display: none;
    background-color: #393838;
    border: 1px solid #ccc;
    padding: 10px 34px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.ginput_container .help-icon:hover + .help-message {
  display: inline-block;
}

.help-icon1 {
    cursor: pointer;
    position: absolute;
    right: 45px;
    top: 73%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/25/Icon-round-Question_mark.jpg);
    background-size: cover;
}


.ginput_container .help-icon1:hover + .help-message1 {
  display: inline-block;
}

.help-message1 {
    position: absolute;
    left: 66%;
    font-size: 13px;
    color: white;
    top: 120%;
    transform: translateY(-50%);
    display: none;
    background-color: #393838;
    border: 1px solid #ccc;
    padding: 10px 34px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.ui-dialog-titlebar-close {
  position: absolute;
  top: 357px;
  right: 123px;
  padding: 6px 22px;
}

.ui-dialog-titlebar-close {
  display: none;
}

.availability-box{
      position: absolute;
      top: 54px;
      right: 30px;
}

.availability-close-button{
      position: absolute;
      top: 105px;
      right: 129px;
      padding: 7px 22px;
 }

.availability-container{
  background: white;
}

.styled-table {
    border-collapse: collapse;
}

.styled-table th, .styled-table td {
   border: 2px solid #3a5980;
    padding: 9px 17px;
    text-align: left;
 }

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
    grid-gap: 2px;
    padding: 0px;
    width: 97%;
}

#billing_address{
    border-radius: 5px;
    padding: 0px 21px;
    right: 853px;
    position: absolute;
}

#shipping_address{
    border-radius: 5px;
    padding: 0px 21px;
    right: 140px;
    position: absolute;
}

.order_button{
    font-size: 13px;
    float: right;
    padding: 8px 28px;
}

.order-head{
/*     position: absolute;*/
     height: 124px; 
    padding: 0px 700px 3px 32px;
    width: 1415px;
/*    top: 660px;*/
}

#order_user_id{
/*    position: absolute;*/
    width: 524px;
    border: 1px solid #c9d0d6;
    border-radius: 3px;
    font-size: 0.95em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: none;
    padding: 8px 10px 7px;
    top: 73px;
    right: 748px;
}

  .grid-container3 {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.card3 {
    width: 430px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.card-header3 {
    text-align: center;
    background-color: #efefef;
    background-image: linear-gradient(180deg, #efefef, #dfe1e2);
    text-shadow: #fff 0 1px 0;
    border: solid 1px #cdcdcd;
    border-color: #d4d4d4;
    border-top-color: #e6e6e6;
    border-right-color: #d4d4d4;
    border-bottom-color: #cdcdcd;
    border-left-color: #d4d4d4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    z-index: 800;padding: 0px 14px;
 }

.card-content3 {
  padding: 2px 0px;
}

.custom-table3 th {
    text-align: center;
    background-color: #efefef;
    background-image: linear-gradient(180deg, #efefef, #dfe1e2);
    text-shadow: #fff 0 1px 0;
    border: solid 1px #cdcdcd;
    border-color: #d4d4d4;
    border-top-color: #e6e6e6;
    border-right-color: #d4d4d4;
    border-bottom-color: #cdcdcd;
    border-left-color: #d4d4d4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    z-index: 800;padding: 0px 14px;
    padding: 6px 12px;
}

.center-text3 {
    text-align: center;
}

.left-text3 {
    text-align: left;
}

.custom-modal-close-button{
     position: absolute;
    top: 356px;
    right: 123px;
     padding: 7px 22px;
}

.high-card1{
 width: 650px;
 margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}


#order_order_notes_admin_only_input{
    font-size: 16px;
    padding: 7px 11px 42px 1041px;
}

.label5{
    display: block;
    width: 289px;
    float: left;
    font-size: 1.0em;
    font-weight: bold;
    color: #5E6469;
    padding: 0px 2px;
}

#notes5{
    width: calc(80% - 25px);
    border: 1px solid #c9d0d6;
    border-radius: 3px;
    font-size: 0.95em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: none;
    padding: 8px 10px 7px;
}

 #add-notes{
    padding: 10px 29px;
    right: 96px;
    position: absolute;
    top: 1688px;
}

.notes-row{
    padding: 10px 10px;
}

.delete-note{
    position: absolute;
    padding: 6px 7px 6px 8px;
    right: 32px;
}


.order-head1{
/*    position: absolute;*/
    /* height: 124px; */
    padding: 0px 746px 28px 34px;
    width: 1416px;
/*    top: 1338px;*/
}

.add_note{
    right: 130px;
    position: absolute;
    padding: 8px 35px;
}

.form-note{
    width: 370px;
    height: 72px;
}

.note-font{
    font-size: 16px;
}

.add-note-button{
    right: 11px;
    position: absolute;
    top: 181px;
    padding: 7px 21px;
}

.note-modal-close-button{
    right: 91px;
    position: absolute;
    top: 182px;
    padding: 6px 18px;
}

.delete-sales-tax-document {
    position: absolute;
    top: 929.5px;
    width: 16px;
    height: 18px;
    text-align: center;
    left: 303px;
    display: inline-block;
    background-color: #ffffff;
    cursor: pointer;
    border: 1px solid #ff3838;
    border-radius: 6px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */



.required_input::after {
  content:" *"; 
  color: #e32;
  position: absolute; 
  margin: -6px 0px 0px -12px; 
  font-size: large; 
  padding: 0 0 0 0; 
}