/* Solves #23184 - inputs not opening mobile keyboard */
md-input-container label {
    pointer-events: none;
}
/* Override browser's autofill colors */
body .flyout input:-webkit-autofill,
body .flyout input:-webkit-autofill:hover,
body .flyout input:-webkit-autofill:focus,
body .flyout textarea:-webkit-autofill,
body .flyout textarea:-webkit-autofill:hover,
body .flyout textarea:-webkit-autofill:focus,
body .flyout select:-webkit-autofill,
body .flyout select:-webkit-autofill:hover,
body .flyout select:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    box-shadow: 0 0 0 1000px #153858 inset !important;
}
.flyout .flyout-table.no-top-border {
    border-top: none;
}
/* Display select inputs under the clicked element, not on top of that */
.md-select-menu-container { 
    margin-top: 45px;
}
/* Adjust "Notify abuse" link inside Classified section */
md-card-footer .button-link.subtle {
    line-height: 40px;
}
.toolbar-bottom--padding-left {
    padding-left: 10px;
}
/* Solve #23538, focus on accordion elements */
.accordion:focus {
    outline: none !important;
}
/* Fix circular loaders spacing */
md-progress-circular {
    margin-left: 10px;
}
.registration-postal-code {
    width: 100%;
}
.registration-postal-code a {
    display: block;
    text-align: center;
    padding-top: 25px;
}
.vaccines-cart-qty {
    max-width: 115px;
    margin-left: 10px;
}

/* Small fixes for new disable style issues */
.md-calendar-date-disabled {
    color: #16315b !important;
    opacity: 0.3;
}
/* Careerlines and Classified filters fix */
body .select-button md-select:not([disabled]):focus .md-select-value {
    color: #16315b;
}
body .list-item.bg .md-button:hover {
    /* background-color: rgba(158,158,158,0.2) !important; */
}
body .list-item.bg .md-button:hover md-icon {
    color: #0265ff !important;
}
.sidenav__link-text {
    text-align: left;
}
.sidenav__logos {
    padding-bottom: 30px;
}
.sidenav__logos img {
    max-width: 100%;
    padding: 8px 18px;
}
.my-account-invoices {
    min-width: 105px;
    text-align: center;
    padding-top: 12px !important;
    padding-bottom: 5px !important;
}
.my-account-invoices md-button {
    margin-top: 0;
}
.load-more-pagination {
    text-align: right;
    margin-bottom: 1em;
}
.search-bar--qty__input.custom-input {
    max-width: 158px;
    padding-left: 112px;
}
/* Clear all X clear button on inputs for IE11, as it is buggy */
::-ms-clear {
    display: none;
}

@media (max-width: 400px) {
    .toolbar-qty .required-label {
        display: none;
    }

    .toolbar-qty .search-bar--qty__input {
        padding-left: 50px;
        max-width: 80px;
    }
}


.menuBardemoBasicUsage .page-container {
    padding: 32px;
}

.menuBardemoBasicUsage .page {
    margin: 0 auto;
    padding: 24px;
    max-width: 680px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
}

    .menuBardemoBasicUsage .page h1 {
        text-align: center;
        font-size: 1.8rem;
        margin-top: 0;
        font-weight: normal;
    }

    .menuBardemoBasicUsage .page p {
        line-height: 1.6rem;
    }

.color-black {
    color: black !important;
}

.background-color-black {
    color: black !important;
    background-color: #eaedf3 !important;
}

.order-search,
.order-search-box {
    display: flex;
    margin-right: 15px;
} 
.order-search .account-filter__search.toolbar-search {
    width: 200px;
    min-width: 200px;
}

.order-search md-input-container {
    background-color: #e6e6e6;
    color: #314a75;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    padding-left: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.order-search md-input-container md-select {
    height: 48px;
}

.order-search md-input-container * {
    color: #314a75;
}

.order-search .md-select-value {
    border: 0 !important;
    outline: 0 !important;
}

.order-search .md-select-value .md-select-icon:after {
    background-position: 0 0;
}


.order-search .md-select-value .md-select-icon {
    margin: 5px 8px 0;
}

/* .order-search .search-bar--text__input.custom-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;  
    height: 100%;
} */

.order-search md-select[disabled="disabled"] {
    opacity: 0.3;
    cursor: not-allowed;
}

@media screen and (max-width: 725px) {
    .account-filter .layout-row {
        flex-wrap: wrap;
    }
    
    body .account-filter .md-toolbar-tools {
        max-height: 100%;
        height: 100%;
    }

    body .order-search .account-filter__search.toolbar-search {
        width: 100%;
        min-width: 120px;
    }

    .order-search {
        margin: 10px 0;
    }
}

/* Changes to the listing for backorders to include a sublist of products */
md-list-item.list-item-with-sublist {
    padding: 0;
}
.list-main-row-item-container {
    width: 100%;
}
.list-item-with-sublist .list-main-row-item {
    padding: 0 16px;
    padding-right: 80px;
    position: relative;
}
.list-main-row-item-with-border {
    border-bottom: 1px solid #dde4ee;
}
.list-item-with-sublist .list-main-row-item md-icon {
    position: absolute;
    top: 18px;
    right: 22px;
}
.layout-sublist {
    opacity: 0.7;
    background: #f5f7fa;
}
.layout-sublist md-list {
    width: 100%;
    padding: 0;
}
.layout-sublist md-list-item:hover {
    box-shadow: none;
}
.layout-sublist md-list-item:last-child {
    border-bottom: 0;
}
.layout-sublist .list-item {
    padding: 16px 80px 0 16px;
    background: #f5f7fa;
}
.layout-sublist .md-title {
    line-height: 18px;
    width: 100%;
    font-size: 15px;
    color: #0265FF;
    font-weight: normal;
}
/* End changes to the listing for backorders to include a sublist of products */

.main {
    margin: 0 auto;
}

.bg-primary .md-dialog-content *, .bg-primary .page-alert__content * {
    color: #211E1F;
}

md-toolbar._md-toolbar-transitions {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
}

.wrapper .accordion {
    margin-bottom: 0;
}

.layout-row a {
    text-decoration: none;
}

.md-button.md-propharma-theme.md-accent.md-fab, .md-button.md-propharma-theme.md-accent.md-raised {
    color: #fff;
}

.md-card {
    margin-bottom: 12px;
}

h4.md-caption {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #909090;
}

h3.md-title.card-title {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.md-body-2 p {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.button-link.subtle {
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    color: #31A5D8;
}

.md-accent.md-raised.md-button.md-propharma-theme.md-ink-ripple:hover {
    background-color: #31A5D8;
}

.md-subhead-2.ng-binding {
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 1px;
    color: #211E1F;
}

.calendar__col label.md-caption,
.md-calendar-day-header th  {
    font-size: 12px;
    line-height: 2.4;
    letter-spacing: 0.01em;
    color: #888B90;
}

.md-body-1.calendar__date.ng-binding {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.md-calendar-date span.md-calendar-date-selection-indicator {
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.01em;
    color: #211E1F !important;
}

.document-list .list-row-layout .list-row-item {
    width: 25vw;
    max-width: 25%;
    padding-top: 25px;
}

.list-row-item.layout-column span.md-caption {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #888B90;
}

.list-row-item.layout-column .md-body-1.ng-binding {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.badge.ng-binding.ng-scope {
    font-size: 10px;
    line-height: 10px;
    color: #FFFFFF;
}

a.md-button, button.md-button {
    font-family: 'Graphik', sans-serif;
}

.md-fab.md-mini.back-to-order.md-button.md-ink-ripple md-icon {
    display: none;
}

.back-to-order {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: #211E1F;
    cursor: pointer;
    padding: 0 32px;
}

.back-to-order span {
    display: inline-block;
}

.back-to-order:hover {
    text-decoration: underline;
}

.back-to-btn {
    display: inline-block;
    float: right;
}

.inline-title {
    display: inline-block;
}

.primary-blue {
    color: #31A5D8;
}

.arrow-icon {
    font-size: 16px;
    margin-right: 10px;
}

h3.md-subhead {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

md-card md-card-footer p.md-caption {
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    color: #211E1F;
    opacity: 0.75;
}

md-card md-card-footer  .md-button.md-primary {
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.01em;
    color: #31A5D8;
}

md-card h4.md-caption {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #888B90;
}

md-card md-card-content .md-title.card-title {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

md-card md-card-content span.md-body-2 p {
    font-family: 'Graphik', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #211E1F;
    opacity: 0.75;
}

.accordion__content p.md-body-2 {
    font-family: 'Graphik', sans-serif;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.open-accordion-content {
    padding: 0 !important;
}

.open-accordion-content .list-row-layout {
    width: 100%;
}

.open-accordion-content a.md-fab.subtle, 
.open-accordion-content button.md-fab.subtle {
    background-color: #F1F8FC !important;
}

.fill-none-svg svg {
    fill: none !important;
}

.flyout md-toolbar {
    background: #153858;
    box-shadow: 0px 4px 20px #123351;
}

.flyout.md-sidenav-right.md-whiteframe-4dp.ng-isolate-scope {
    background-color: #153858;
}

.flyout .md-headline, 
.flyout .rte h3, 
.rte .flyout h3 {
    font-size: 20px;
    font-weight: lighter;
    line-height: 26px;
    color: #FFFFFF;
}

.dl-inline .flyout dd, .dl-inline .flyout dt, .flyout .custom-input, .flyout .custom-input__label, .flyout .dl-inline dd, .flyout .dl-inline dt, .flyout .md-body-1, .flyout .rte p, .flyout .rte ul li, .flyout md-checkbox .md-label, .rte .flyout p, .rte ul .flyout li, md-checkbox .flyout .md-label {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.flyout .flyout-table .list-item {
    border-bottom: 0.5px solid #fff;
    padding-top: 18px;
    padding-bottom: 8px;
}

.flyout .flyout-table span a {
    color: #FFE45C;
}

.flyout .md-button.md-propharma-theme.md-accent.md-fab, 
.flyout .md-button.md-propharma-theme.md-accent.md-raised {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.04em;
    color: #fff;
}

body.layout-row {
    justify-content: center;
}

.md-nav-bar {
    
}

.accordion__content {
    padding-bottom: 0;
}

.main.l-page.ng-scope.layout-column.flex {
    margin-left: 0;
    position: static;
}

*[role="button"] {
    cursor: pointer;
}

.flyout form {
    padding-bottom: 4%;
}

.flyout.md-sidenav-right md-input-container.md-block > label.md-required {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #fff;
}

.flyout.md-sidenav-right md-input-container.md-block:focus > label.md-required {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #31A5D8;
}

.flyout md-input-container.md-block > input.md-input {
    border-color: #fff;
}

.flyout md-input-container.md-block:focus > input.md-input {
    border-color: #31A5D8;
}

.flyout .cart-item .cart-item__header {
    background-color: rgba(26, 88, 133, 0.8);
    padding-bottom: 10px;
    border-color: #8CCEE7 !important;
}

.flyout .cart-item .cart-item__footer {
    background-color: rgba(26, 88, 133, 0.8);
}

.flyout .cart-item .cart-item__header .md-overline {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B0DAEB;
}

.flyout .cart-item .cart-item__footer .list-row-item.layout-column span.md-caption {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    letter-spacing: 0.01em;
    color: #B0DAEB;
    padding-top: 4px;
    margin-bottom: 8px;
}

.flyout .cart-item .cart-item__footer .list-row-item.layout-column .md-body-1.ng-binding {
    color: #fff !important;
}

.flyout .flyout-total .md-title.text-right.ng-binding,
.flyout .list-item > a  {
    color: #FFE45C !important;
}

.flyout .list-item-grid-box {
    margin-bottom: 3rem;
}
.flyout .list-item-grid-box img {
    width: 100%;
    height: auto;
}

.flyout .list-item-grid-box img:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* two items */
.flyout .list-item-grid-box img:nth-child(1):nth-last-child(2) {
    width: 49%;
    margin-right: 2%;
    float: left;
}

.flyout .list-item-grid-box img:nth-child(2):nth-last-child(1) {
    width: 49%;
}

/* three items */
.flyout .list-item-grid-box img:nth-child(1):nth-last-child(3) {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
    float: left;
}

.flyout .list-item-grid-box img:nth-child(2):nth-last-child(2) {
    width: 49%;
    margin-right: 2%;
    float: left;
}

.flyout .list-item-grid-box img:nth-child(3):nth-last-child(1) {
    width: 49%;
    height: 519px;
    object-fit: cover;
}

.flyout md-content {
    height: 100%;
}

.flyout .list-item-buttons-wrapper {
    width: 90%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 12px 0px;
    background-color: #153858;
}

.flyout .list-item .list-item-button {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-decoration-line: underline;
    color: #D6EFFA;
}

.flyout md-progress-linear {
    padding-bottom: 3rem;
}

.flyout .flyout-table {
    border-top: none transparent;
    margin-bottom: 72px;
}

.flyout .flyout-table:last-child {
    margin-bottom: 0;
}

.flyout .flyout-table:not(.mute-table-border) .list-item:last-child {
    border-bottom: 0.5px solid #fff;
}

.flyout .flyout-total {
    border-bottom: 2px solid #fff
}

.flyout .flyout-total .list-item {
    border-bottom-width: 2px;
    margin-top: 10px;
}

.flyout .cart-item .cart-item__footer {
    align-items: flex-start;
}

.flyout .cart-item .cart-item__footer .list-row-item span {
    display: flex;
    justify-content: center;
}

.flyout .cart-item .cart-item__footer {
    padding: 16px 16px 0 16px;
}

.flyout .cart-item__footer .md-button.md-icon-button:not(.disabled) md-icon {
    color: #B0DAEB;
}

.flyout .cart-item__footer .layout-row {
    padding-bottom: 8px;
}

.flyout .cart-item__footer > .list-item-quantity {
    width: 89px;
    position: relative;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 2px solid #FFE45C;
}

.flyout .cart-item__footer > .list-item-quantity.out-of-stock {
    border-bottom-color: #D53D41;
}

.flyout .cart-item__footer > .list-item-quantity .list-item-control {
    font-weight: bold;
}

.flyout .cart-item__footer > .list-item-quantity.out-of-stock .list-item__increase {
    pointer-events: none;
}

.flyout .disabled-button {
    pointer-events: none;
}

.flyout .cart-item__footer > .list-item-quantity.out-of-stock .list-item-control {
    color: #D53D41 !important;
}

.flyout .cart-item__footer > .list-item-quantity:after {
    content: "";
    position: absolute;
    bottom: 0;
    background-color: #1e5d8b;
    width: 89px;
    height: 36px;
    z-index: -1;
}

.flyout .cart-item__footer > .list-item-quantity .list-row-item {
    width: 100%;
}

.flyout .cart-item__footer .list-row-controls {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flyout .cart-item__footer .list-row-controls > span {
    color: #fff !important;
}

.flyout .cart-item__footer .list-item-quantity .list-item-control {
    font-size: 20px;
    line-height: 1;
    color: #FFE45C !important;
    display: inline-block;
    padding: 10px;
    margin: -10px;
}

.flyout .cart-item__footer .list-item-quantity-input {
    width: 60px;
    text-align: center;
    background: transparent;
    border: none;
    color: white;
    border-color: transparent;
}

.flyout .cart-item__footer .list-item-quantity-input:focus-visible {
    outline: 1px solid #fff;
    border-radius: 4px;
}

.flyout .list-item-availability {
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #D53D41;
    display: block;
    margin: 6px 0;
}

.document-list .list-row-layout .list-row-item > button.md-button {
    margin: 0;
}

.list-wrapper-container {
    background-color: #EAF5FA;
    display: flex; 
    flex-direction: column;
    align-items: center;
    padding: 37px 32px 59px;
}

.list-wrapper-container .raw, 
.list-wrapper-container md-list {
    width: 100%;
}

.list-wrapper-container .raw .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 58px;
}

.list-wrapper-container .list-header {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-wrapper-container .list-header .remove-all-btn {
    font-weight: 400;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #D53D41;
}

.list-wrapper-container .list-filter-btn {
    position: relative;
    background: #D6EFFA !important;
    border: 0.75px solid #31A5D8;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.list-wrapper-container .list-filter-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 174px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;
    z-index: 9;
    padding: 28px 18px;
    border: 0.25px solid #D1D3D4;
    box-sizing: border-box;
    box-shadow: 0px 8px 16px rgba(176, 190, 197, 0.2);
    border-radius: 4px;
}

.list-wrapper-container .list-filter-list span {
    display: block;
}

.list-wrapper-container .list-filter-list label {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.01em;
    color: #211E1F;
    position: relative;
    padding-left: 25px;
}

.list-wrapper-container .filter-icon > svg {
    width: 12px;
}

.list-wrapper-container .list-filter-list input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.list-wrapper-container .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 15px;
    width: 15px;
    border: 1px solid #31A5D8;
    box-sizing: border-box;
    border-radius: 4px;
}

.list-wrapper-container:hover input ~ .checkmark {

}

.list-wrapper-container input:checked ~ .checkmark {
  background-color: #31A5D8;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.list-wrapper-container input:checked ~ .checkmark:after {
  display: block;
}

.list-wrapper-container .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.address-search-input {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.01em;
    border: none;
    border-bottom: 1px solid #64676C;
    margin-bottom: 27px;
    background-color: transparent;
    position: relative;
    padding-left: 52px;
}

.search-icon {
    color: #211e1f !important;
    position: absolute;
    margin-left: 12px;
}

.address-search-input:focus-visible {
    outline: none;
}

md-list-item.address-list {
    padding: 24px 34px;
}

.address-list .list-row .list-row-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 20% 20% 40% 20%;
}

.address-list .address__delete {
    color: inherit
}

.all-address__delete {
    color: #D53D41;
}

.selected-address {
    margin-top: 37px;
    margin-bottom: 59px;
}

h3 {
    font-weight: 300;
    margin-bottom: 16px;
}

.address-list .list-row-item.layout-column .md-body-1.ng-binding {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

md-nav-bar .md-nav-bar {
    width:100%;
    border-bottom: 1px solid #dadfe0;
}

.top-nav-bar {
    position: relative;
    z-index:9;
    margin-bottom: 53px;
}

.top-nav-bar,
.top-nav-bar md-content {
    overflow: initial;
}

.md-nav-bar .menuItem-link {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 5%;
}

.md-nav-bar .menuItem-link.active:after,
.md-nav-bar .menuItem-link:hover:after {
    content: "";
    width: 100%;
    height:1px;
    background-color: #3b99c3;
    position: absolute;
    bottom: 0;
    left: 0;
}

.md-nav-bar .sidenav__logo-container  {
    background-color: #31A5D8;
}

.md-nav-bar ._md-nav-bar-list md-list-item:before {
    min-height: auto;
}

.md-nav-bar md-list-item.md-no-proxy {
    display: inline-block;
}

.md-nav-bar .sidenav__logo-container {
    padding: 18px 38px;
}

.md-nav-bar .sidenav__links {
    padding: 0;
    margin-left: 24px;
}

.md-nav-bar .sidenav__links {
    display: flex;
    justify-content: flex-start;
}

.md-nav-bar .sidenav__link-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: #211E1F;
}

.md-nav-bar .sidenav__link-text a {
    color: #211E1F;
    line-height: 1.6;
}

.md-nav-bar .nav-bar-controls{
    position: relative;
    right: 0;
    display: flex;
    margin: 0 24px;
}

.md-nav-bar .nav-bar-controls:after {
    content: "";
    width: 1px;
    height: 40px;
    background-color: #D1D3D4;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.md-nav-bar .md-button:not([disabled]):hover {
    background-color: transparent !important;
}

.md-nav-bar .search-dropdown-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.md-nav-bar .search-dropdown-icon md-icon {
    width: 30px;
    height: 30px;
    color: #211E1F;
}

.md-nav-bar .account-dropdown {
    position: relative;
    display: flex;
}

.md-nav-bar .account-list {
    position: absolute;
    left: -72px;
    top: 108%;
    z-index: 9;
    background: #FFFFFF;
    box-shadow: 0px 8px 16px rgba(176, 190, 197, 0.48);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    white-space: nowrap;
}

.md-nav-bar .account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #C1171B;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.md-nav-bar .account-username {
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #211E1F;
    width: 100%;
    padding: 17px;
    border-bottom: 1px solid #D1D3D4;
}

.md-nav-bar .account-list .sidenav__link-text {
    width: 100%;
    padding: 17px 17px 0;
}

.md-nav-bar .account-list .sidenav__link-text:last-child {
    border-top: 1px solid #D1D3D4;
    padding-bottom: 17px;
    margin-top: 17px;
}

.md-nav-bar .menuItem-link .sidenav__link-badge {
    position: relative;
    left: 10px;
    margin-top: 6px;
}

.header-top-bar {
    width:100%;
    height: 28px;
    background: #D6EFFA;
    font-weight: 400;
    font-size: 11px;
    line-height: 10px;
    letter-spacing: 0.01em;
    color: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

.header-top-bar a {
    color: #3ba9da;
    cursor: pointer;
}

.header-top-bar a:hover {
   text-decoration: underline;
}

.home-banner__logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-search {
    width: 358px;
    height: 43px;
}

.banner-search md-input-container {
    margin: 0;
}

.banner-search .banner-search-input {
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    color: #FFFFFF !important;
    height: 36px;
    background: rgba(214, 239, 250, .3);
    border: 0.5px solid #8CCEE7 !important;
    box-sizing: border-box;
    border-radius: 48px;
    padding: 0 44px;
    overflow: hidden;
    position: relative;
}

.banner-search .banner-search-input:focus {
    outline: none;
}

.banner-search .banner-search-input {
    padding-bottom: 0 !important;
}

.banner-search .banner-search-input::placeholder {
    color: #fff;
    opacity: .8;
}

.banner-search-icon {
    position: absolute;
    margin-top: 6px;
    margin-left: 14px;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
/*Ask to albert later*/
 /* transition: background-color 600000s 0s, color 600000s 0s;*/
}

.md-nav-bar .md-button {
    min-height: 40px;
    height: auto;
    line-height: 1;
}

.md-nav-bar .sidenav__user {
    display: flex;
    align-items: center;
    margin-right: 3%;
}

.md-nav-bar .sidenav__user .md-button {
    height: auto;
    padding: 14px 26px;
    background-color: #211E1F !important;
}

.md-nav-bar .sidenav__user .md-button .sidenav__link-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #FFFFFF !important;
    text-transform: uppercase;
}

.md-nav-bar .sidenav__user .md-button .sidenav__link-badge {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    position: relative;
    background-color: transparent;
    right: 0;
    transform: translateY(0);
}

.md-nav-bar .sidenav__user .md-button:not([disabled]):hover {
    background-color: #211E1F !important;
}

.quick-search-results {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.back-button-h4,
.results-text {
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #211E1F;

    width: 100%;
}

.back-button-h4 {
    line-height: 22px;
    margin: 40px 0;
    margin-left: -10px;
    display: inline-block;
    width: auto;
}

.back-button-h4 > svg {
    float: left;
}

.back-button-product-details {
    margin: -10px;
}

md-toolbar md-nav-bar {
    margin-bottom: 0;
}

.body-nav-bar {
    display: block;
    margin-top: 52px;
    margin-bottom: 77px;
    position: relative;
}

.justify-center {
    justify-content: center;
}

.indent-section {
    width: 100%;
    max-width: 520px !important;
}

.indent-section .form__title {
    font-weight: 400;
    font-size: 24px;
    line-height: 26px;
    color: #211E1F;
}

.dark-bg-content {
    background-color: #153858;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.dark-bg-content a {
    color: #fff;
    text-decoration: underline;
}

.home-banner__form-container form input,
.home-contact__form-container form input {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.home-banner__form-container form button,
.home-contact__form-container form button {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.home-banner__form__text * {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.01em !important;
    color: #211E1F !important;
}

.home-contact__info h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 10px;
}

.home-contact__info p {
    line-height: 2;
    margin-bottom: 0;
}

.home-contact__form-container form label,
.home-contact__form-container form md-select .md-select-value.md-select-placeholder {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #999999;
}

.home-contact__form-container form md-select {
    border-bottom: 1px solid #999;
}

.home-contact__form-container form md-select .md-select-value.md-select-placeholder {
    color: #211E1F;
}

.section-wrapper {
    margin-bottom: 40px;
}

.section-title {
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #211E1F;
    margin-bottom: 24px;
}

.section--main {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;

    background: #F1F8FC;
    padding: 42px 70px;
}

.section--main h3 {
    margin-bottom: 40px;
}

.section--main p {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #000000;
}

.section-grid {
    display: grid;
    grid-template-columns: 33% 53%;
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    column-gap: 4%;
}

.label-title {
    font-weight: 400;
    font-size: 11px;
    line-height: 11px;
    letter-spacing: 0.01em;
    color: #64676C;
}

ul.accounts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.accounts-list li {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 0.75px solid #D1D3D4;
}

.item-list-controls .item-list-control {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    background: #211E1F;
    border-radius: 4px;
    padding: 8px 29px;
}

.item-list-controls .item-list-control:hover {
    background-color:#211E1F !important;
    color:#fff;
}

.icon__delete md-icon {
    color: #64676C;
}

.account-button {
    margin-left: 0;
}

.add-account--form {
    
}

.add-account--form label {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #999999 !important;
}

.add-account--form input {
    width: 100%;
    max-width: 411px;
}

.add-account--form md-input-container {
    margin-bottom: 36px;
}

.margin-t-0 {
    margin-top:0;
}

.add-account--form input,
.update-account--form input {
    font-weight: 400;
    font-size: 18px;
    line-height: 2.2;
    letter-spacing: 0.01em;
    color: #211E1F;
    background: transparent;
    border: 0;
    border-bottom: 0.1px solid #999;
}

.update-account--form md-input-container label {
    position: relative;
    width: 20% !important;
}

.add-account--form input:focus,
.update-account--form input:focus {
    outline: none;
    border-bottom-color:#31A5D8;
}

.add-account--form input:disabled,
.update-account--form input:disabled {
    border-bottom-color:#999 !important;
}

.update-account--form .field-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 50px;
}

.update-account--form .input-error-message {
    position:absolute;
    top: 45px;
    left: 210px;
    color: red;
}

.update-account--form .field-row label {
    font-size: 12px;
    line-height: 1.6;
    width: 20%;
}

.update-account--form .field-row input,
.update-account--form .check-boxes {
    width: 80%;
}

.update-account--form .reset-password {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #31A5D8;
    text-decoration: none;
}

.update-account--form .reset-password:hover {
    text-decoration: underline;
}

.update-account--form .check-boxes {

}

.update-account--form .account--form__checkbox {
    width: 48%;
    display: inline-block;
}

.update-account--form .account--form__checkbox .md-label {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.wrapper-title {
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #211E1F;
}

.tooltip-btn {
    width: 12px;
    height: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #D53D41;
    border-radius: 50%;
    border: 1px solid #D53D41;
    cursor: pointer;
}

.search-bar-wrapper {
    background-color: #fff;
    padding: 61px 29px !important;
}

.search-bar-wrapper h3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 30px;
}

.search-bar {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-bar .search-bar__main {
    width: 72%;
}

.search-bar .search-bar__main .search-bar__input {
    padding: 11px 186px 11px 19px;
}

.search-bar .search-bar__sub {
    width: 14%;
}

.search-bar .search-bar__btn {
    width: 10%;
    margin: 0;
}

.search-bar .search-bar__input {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
}

.search-bar__main .reset-button {
    width:11px;
    height:11px;
    background-color: #D1D3D4;
    color: #fff;
    position: absolute;
    top: 15px;
    right: 210px;
    border-radius: 50%;
    font-size: 9px;
    line-height: 1.26;
    text-align: center;
    cursor: pointer;
    text-shadow: 0.1px 0.1px 1.5px #000;
}

.search-bar__main,
.search-bar__main .custom-input-container {
    position: relative;
}

.search-bar-wrapper .search-bar-filter {
    position:absolute;
    font-weight: 400;
    font-size: 12px;
    line-height: 3;
    letter-spacing: 0.01em;
    color: #000000;

    width:100%;
    max-width: 24%;
    top: 50%;
    left: 76%;
    transform: translateY(-50%);
    border: 0;
    border-left: 1px solid #D1D3D4;
    padding-left: 20px;
    padding-right: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    cursor: pointer;
    background-color: transparent;
    z-index: 1;
}

.search-bar-wrapper .search-bar-filter:focus {
    outline: none;
}

.search-bar-wrapper .search-bar-filter > option {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #000000;
}

.search-bar-wrapper .custom-input__label {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #64676C;
    z-index: 1;
}

.search-bar-wrapper .search-bar--qty__input {
    padding-left: 50px;
}

input.banner-search-input:-webkit-autofill,
input.banner-search-input:-webkit-autofill:hover, 
input.banner-search-input:-webkit-autofill:focus, 
input.banner-search-input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px rgba(214, 239, 250, .3) inset !important;
    -webkit-text-fill-color: #fff !important;
}

.flyout .subtotal-fee .flyout-total {
    border-bottom: 1px solid #506a81;
}

.flyout .flyout-total .list-item .md-subhead {
    font-weight: 500;
    letter-spacing: 0.5px;
}

.flyout .flyout-total-amount {
    margin-top: 15px;
    border-bottom: 2px solid #fff;
}

.flyout .flyout-total-amount .md-title {
    letter-spacing: 1px;
}

.form--custom-care.first-care-table label {
    font-size: 12px;
}

.form--custom-care label {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 8px;
    display: block;
}

.form--custom-care md-input-container {
    margin-bottom: 32px;
}

.form--custom-care input,
.form--custom-care textarea {
    width: 100%;
    height: auto;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    border-color: #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
    background-color: transparent;
}

.form--custom-care md-input-container.md-propharma-theme .md-input {
    border-color: #211E1F;
}

.form--custom-care md-input-container.md-propharma-theme.md-input-invalid .md-input {
    border-color: rgb(255,97,97);
}

.form--custom-care.form--invoice-detail input:disabled {
    background: rgba(214, 239, 250, 0.5);
    border: 1px solid #D6EFFA;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 0;
}

.form--invoice-detail {
    display: flex;
    justify-content: space-between;
}

.form--invoice-detail .invoice-detail__set:first-child {
    width: 45.3333%;
}

.form--invoice-detail .invoice-detail__set {
    width: 25.3333%;
}

.onelink-custom-select {
    width: 100%;
    background: none transparent;
    border: 0.5px solid #64676C;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    cursor: pointer;

    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.select-wrapper::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 18px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #000 transparent transparent transparent;
    user-select: none;
    z-index: 0;
}

.onelink-select.select-wrapper {
    position: relative;
}

.onelink-select.select-wrapper:after {
    border-width: 5px;
}

.form--invoice-detail__submit {
    display: flex;
    flex-direction: column;
}

.form--invoice-detail__submit .invoice-detail__links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.middle-invoice-detail {
    margin-left: 128px;
}

.form--invoice-detail__submit .invoice-detail__link {
    width: 33.3333%;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.form--invoice-table a {
    color: #31A5D8;
    text-decoration: underline;
}

.form--invoice-table .invoice-table__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 33px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid #64676C;
}

.form--invoice-table .invoice-table__header {
    border-bottom: 1.2px solid #64676C;
    padding: 10px 0;
}

.form--invoice-table .invoice-table__footer {
    border-top: 1.2px solid #64676C;
    display: flex;
    padding: 24px 0 22px 0;
}

.form--invoice-table .invoice-table__footer .half {
    flex-basis: 50%;
}

.form--invoice-table .invoice-table__footer .one-third {
    flex-basis: 33.3333%;
}

.form--invoice-table .invoice-table__footer:last-child {
    border-bottom: 0;
    font-weight: 600;
}

.form--invoice-table .invoice-table__cell {
    width: 100%;
    max-width: 8%;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    position: relative;
}

.form--invoice-table .invoice-table__cell .expected-price {
    background-color: #D6EFFA;
    padding: 7px 16px;
}

.form--invoice-table .invoice-table__cell .invoice-table-title {
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
}

.form--invoice-table .invoice-table__cell .invoice-table-title br {
    content: "";
    margin: -0.4rem;
    display: block;
}

.form--invoice-table .invoice-table__cell.length-cell {
    max-width: 14%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form--invoice-table .invoice-table__cell.short-cell {
    max-width: 6%;
}

.form--invoice-table .invoice-table__cell.medium-cell {
    max-width: 8%;
}

.form--invoice-table .invoice-table__cell.center-cell {
    max-width: 8%;
    text-align: center;
}

.form--invoice-table .invoice-table__cell input[type='text'] {
    width: 52px;
    background: none transparent;
    border: 0.25px solid #211E1F;
    box-sizing: border-box;
    padding: 7px 0;
    margin-top: -6px;
    text-align: center; 
}

.form--invoice-table .exceed-quantity-error {
    border-color: red !important;
    color: #D53D41;
    position: relative;
}

.form--invoice-table span.exceed-quantity-error {
    position: absolute;
    width: 110px;
    left: -17px;
    top: 24px;
    font-weight: 400;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: red;
    text-align: center;
}

.section--homepage,
.section--aboutus,
.section--contactus {
    justify-content: center;
}

.section--aboutus .rte.rte-block {
    padding: 0;
}

.main--bg-white {
    background-color: #fff;
}

.main--bg-white h3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.main--bg-white label,
.main--bg-white input,
.main--bg-white md-select,
.main--bg-white textarea {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #999999;
}

.add-account--form .md-block-half,
.main--bg-white .md-block-half {
    width: 100%;
    max-width: 48%;
    margin-top: 0 !important;
}

.main--bg-white md-select {
    margin-top: 32px;
    border-bottom: 1px solid #9caecb;
}

.main--bg-white md-select:focus {
    border-bottom: transparent;
}

.main--bg-white .md-select-placeholder span:first-child {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.main--bg-white .form-fieldset {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main--bg-white textarea {
    min-height: 70px;
    margin-top: 32px;
}

.md-button.md-pwr-theme.md-accent.md-fab, 
.md-button.md-pwr-theme.md-accent.md-raised {
    color: #fff;
}

md-nav-bar + .section--main {
    margin-top: 44px;
}

ul.templates-list {
    background-color: #fff;
}

ul.templates-list  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 23px 30px;
    padding: 23px 30px;
}

ul.templates-list li span[class*="label"] {
    font-weight: 400;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #64676C;
    display: block;
}

ul.templates-list li .template__edit {
    background-color: #31A5D8;
}

ul.templates-list .single-template__item {
    display: block;
    width: 10vw;
    max-width: 200px;
}

ul.templates-list .single-template__item:last-child {
    width: 14vw;
    max-width: 175px;
}

.modal--account__delete {
    text-align: center;
}

.modal--account__delete h2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.01em;
    color: #D53D41;
    margin-bottom: 12px !important;
}

.modal--account__delete p {
    margin-bottom: 30px;
}

.modal--account__delete md-dialog-actions {
    justify-content: center !important;
}

.section--main .md-button.md-accent.md-fab, 
.section--main .md-button.md-accent.md-raised {
    min-width: 112px;
    color: #fff;
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: auto;
    line-height: 1;
}

md-input-container.md-propharma-theme .md-placeholder, 
md-input-container.md-propharma-theme label {
    color: #64676C !important;
}

.section--table {
    background-color: #fff;
    padding: 39px 28px;
}

.section--table .section--table__header {
    justify-content: space-between;
}

.section--table .template-id__label {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64676C;
    margin-bottom: 5px;
}

.section--table .template-controls img {
    margin-right: 16px;
}

.section--table .template-controls img:last-child {
    margin-right: 0;
}

.section--table h3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.template-table-wrapper {
    border-radius: 6px;
    position: relative;
}

.table--order-template {
    width: 100%;
    border-radius: 6px;
    border-collapse: separate;
    min-height: 200px;
    box-shadow: 0px 0px 1px #64676c;
}

.table--order-template input {
    max-width: 82px;
    width: 100%;
    padding: 4px;
    text-align: center;
}

.table--order-template textarea {
    min-width: 60px;
    min-height: 65px;
    width: 100%;
    padding: 6px;
    box-sizing: border-box; 
}

.table--order-template .hidden-column {
    display: none;
}

.table--order-template .table-red-row .icon__delete md-icon {
    color: red;
}

.table--order-template th {
    height: 10px;
}

.table--order-template th .column-sort-arrows { 
	padding-right: 16px;
	position: absolute;
    top: 50%;
    right: -2px;
}

.table--order-template .column-title {
    word-break: normal;
    padding-right: 1px;
}

.column-sort-arrows:before,
.column-sort-arrows:after {
	border: 4px solid transparent;
	content: "";
	display: block;
	height: 0;
	right: 5px;
	top: 0;
	position: absolute;
	width: 0;
}
.column-sort-arrows:before {
	border-bottom-color: #999;
	margin-top: -9px;
}
.column-sort-arrows.sort-ascend:before {
    border-bottom-color: #111;
}
.column-sort-arrows:after {
	border-top-color: #999;
	margin-top: 1px;
}
.column-sort-arrows.sort-descend:after {
    border-top-color: #111;
}

.table--order-template .table--checkbox-field {
    padding-right: 0 !important;
    width: 18px !important;
}

.table--order-template .table--delete-field {
    padding-left: 0 !important;
    padding-right: 10px !important;
    width: 18px !important;
}

.table--order-template .table--order-template__header th:nth-child(2),
.table--order-template .table--order-template__header td:nth-child(2),
.table--order-template .table--order-template__header th:nth-child(3),
.table--order-template .table--order-template__header td:nth-child(3),
.table--order-template .table--order-template__header th:nth-child(4),
.table--order-template .table--order-template__header td:nth-child(4),
.table--order-template .table--order-template__header th:nth-child(5),
.table--order-template .table--order-template__header td:nth-child(5) {
    min-width: 90px;
}

.table--order-template .table--order-template__header th:nth-child(6),
.table--order-template .table--order-template__header td:nth-child(6),
.table--order-template .table--order-template__header th:nth-child(7),
.table--order-template .table--order-template__header td:nth-child(7) {
    min-width: 70px;
}

.table--order-template .table--order-template__header th:nth-child(8),
.table--order-template .table--order-template__header td:nth-child(8),
.table--order-template .table--order-template__header th:nth-child(9),
.table--order-template .table--order-template__header td:nth-child(9) {
    min-width: 60px;
}

.table--order-template .table--order-template__header th:nth-child(10),
.table--order-template .table--order-template__header td:nth-child(10),
.table--order-template .table--order-template__header th:nth-child(11),
.table--order-template .table--order-template__header td:nth-child(11) {
    min-width: 70px;
}

.table--order-template .table--order-template__header th:nth-child(12),
.table--order-template .table--order-template__header td:nth-child(12) {
    min-width: 50px;
}

.table--order-template .table--order-template__header th:nth-child(13),
.table--order-template .table--order-template__header td:nth-child(13) {
    min-width: 50px;
}

.table--order-template .table--order-template__header th:nth-child(14),
.table--order-template .table--order-template__header td:nth-child(14) {
    min-width: 30px;
}

.table--order-template .table--order-template__header th:last-child,
.table--order-template .table--order-template__header td:last-child {
    padding-right: 18px;
}

.table--order-template .table--order-template__header {
    border-radius: 6px 6px 0 0;
}

.table--order-template .table--order-template__header th {
    border-top: 0.5px solid #cfd9de;
}

.table--order-template .table--order-template__header th:first-child {
    border-left: 0.5px solid #cfd9de;
    border-top-left-radius: 6px;
}

.table--order-template .table--order-template__header th:last-child {
    border-right: 0.5px solid #cfd9de;
    border-top-right-radius: 6px;
}

.table--order-template .table--order-template__row td:first-child {
    border-left: 0.5px solid #cfd9de;
}

.table--order-template .table--order-template__row td:last-child {
    border-right: 0.5px solid #cfd9de;
}

.table--order-template .table--order-template__row:hover {
    background-color: #f1f8fc;
}

.table--order-template .table--order-template__row td md-checkbox {
    margin-bottom: 0;
}

.table--order-template .table--order-template__header th, 
.table--order-template .table--order-template__row td {
    padding: 12px;
    border-bottom: 0.5px solid #cfd9de;
    text-align: left;
    vertical-align: middle;

    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    word-break: break-word;
}

.table--order-template .table--order-template__row:last-child {
    border: none;
}

.table--order-template .table--order-template__content {
    overflow: auto;
}

.table--order-template .table--order-template__header {
    background: #EAF5FA;
    border-radius: 6px 6px 0 0;
}

.table--order-template .table--order-template__header th {
    font-weight: 400;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #211E1F;
    position: relative;
}

.table--order-template .table--order-template__row {
    padding: 10px 0;
    line-height: 2.3;
}

.table--order-template .table--order-template__row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.table--buttons {
    width: 100%;
    margin-top: 30px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    z-index: 9;
}

.table--buttons .table--buttons-row {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.table--buttons .light-color-btn {
    background-color: #EFF2F8 !important;
    color: #211E1F !important;
}

.modal--template-filter {
    max-width: 666px !important;
    max-height: 100% !important;
    padding: 56px 54px;
    text-align: left;
}

.modal--template-filter h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
    text-align:left !important;
}

.modal--template-filter p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
    text-align:left !important;
}

.modal--template-filter .modal--template-filter__buttons {
    justify-content: flex-end !important;
}

.modal--template-filter__options {
    display: flex;
    flex-wrap: wrap;
    margin: 36px 0;
}

.modal--template-filter__options md-input-container {
    flex: 1 1 33.3333%;
    margin: 0;

    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

md-nav-bar + h2.section-title {
    margin-top: 37px;
}

.table--order-template__editing .table--order-template__delete {
    margin-top: -10px;
}

.table--order-template__editing textarea {
    font-weight: 400;
    font-size: 8.5px;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.search-bar--products__add {
    width:100%;
    display: flex;
    justify-content: space-between;
}

.search-bar--products__add .search-bar--text__input {
    margin-bottom: 5px;
}

.add-product-to-template + .search-bar--products__add .search-bar--text__input {
    margin-bottom: 0;
}

.search-bar--products__add input {
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
}

.search-bar--products__add input::placeholder {
    color: #a5aecb !important;   
}

.search-bar--products__add .search-bar__main {
    flex-grow: 1;
    margin-right: 2%;
}

.search-bar--products__add .search-bar__sub {
    width: 20%;
    margin-right: 2%;
}

.search-bar--products__add .search-bar__input {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #211E1F;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
    background-color: transparent;
}

.search-bar--products__add .search-bar__input::placeholder {
    color: #64676C;
}

.search-bar--products__add .search-bar__sub .search-bar__input {
    padding-left: 115px;
}

.search-bar--products__add .search-bar__input::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.search-bar--products__add .reset-button {
    right: 15px;
}

.search-bar--products__add .custom-input__label {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    text-align: right;
    letter-spacing: 0.01em;
    color: #64676C;
}

.search-bar--products__add .search-bar__btn {
    margin: 0 0 5px;
}

.order-template__search-form {
    display: flex;
    align-items: center;
    margin-right: 20px;
    position: relative;
}

.order-template__search-form .reset-button {
    width:11px;
    height:11px;
    background-color: #D1D3D4;
    color: #fff;
    position: absolute;
    top: 15px;
    right: 12px;
    border-radius: 50%;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.order-template__search-form md-icon {
    color: #31A5D8;
    margin: 0 0 0 12px;
}

.order-template__search-form input {
    width: 140px;
    background: #F5F7FA;
    border-radius: 20px;
    border: 0 transparent;
    padding: 14px 38px 14px 42px;

    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.order-template__search-form input:focus {
    outline: 0;
}

.home-banner__logo {
    cursor: pointer;
}

.banner-search form md-icon {
    z-index: 9;
    cursor: pointer;
}

.order-details--header {
    justify-content: space-between;
}

.title__grey {
    color: #64676C;
}

.order-total {
    justify-content: space-between;
    margin-top: 21px;

    font-weight: 400;
    font-size: 20px;
    line-height: 2;
    border-bottom: 2px solid #211E1F;
    margin-bottom: 22px;
}

.order-template__create {
    justify-content: space-between;
}

.form__create,
.form__upload {
    flex: 0 0 48%;
    max-width: 48%;
}

.form__create label {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 10px;
}

.form__create input {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
    background-color: transparent;
}

.form__create .form .row {
    margin-bottom: 26px;
}

.form__create .blob-text {
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
}

.form__create .form {
    display: flex;
    flex-direction: column;
}

.form__create .form input {
    width: 100%;
}

.form__upload p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.form__upload .box {
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.01em;
    color: #211E1F;

    max-width: 220px;
    min-height: 133px;
    background-color: transparent;
    position: relative;
}

.box.has-advanced-upload {
    outline: 2px dashed #64676C;
    outline-offset: -10px;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

.box__input {
    padding: 43px 30px 25px;
}

.box__input:hover {
    background-color: #f8fcfd;
}

.box__uploading, 
.box__success, 
.box__error {
    display: none;
}

.box__file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.box__input {
    width: 100%;
    text-align: center;
}

.box__input md-icon {
    display: block;
    margin-bottom: 12px;
}

.box__input label {
    font-weight: 400;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.box__input button {
    display: none;
}

.box__input .box__link {
    color: #31a5d8;
    text-decoration: underline;
}

.box__input .box__grey {
    color: #64676C;
}

.request-title__suubmit {
    margin-bottom: 0 !important;
}

.request-header__submit {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.request-date__submit {
    font-weight: 400;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64676C;
}

.request-detail--number {
    padding-bottom: 20px;
}

.request-detail--items span:last-child {
    padding-top: 5px;
}

.request-detail--list {
    width: 100%;
    display: table;
    padding: 26px 27px;
    background-color: #fff;
}

.request-detail--list .request-detail--list__row, 
.request-detail--list .request-detail--list__header {
    display: table-row;
}

.request-detail--list .request-detail--list__cell {
    max-width: 136px;
    min-width: 28px;
    display: table-cell;
    text-align: left;
}

.request-detail--list .request-detail--list__cell > span {
    display: block;
    padding: 28px 0;
    border-top: 1px solid #64676C;
}   

.request-detail--list .request-detail--list__header .request-detail--list__cell {
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    padding-bottom: 22px;
    border-bottom: 1.4px solid #64676C;
}

.request-detail-total--wrapper {
    padding: 0px 20px;
    background-color: #fff;
}

.request-detail-total {
    display: flex;
    padding: 20px 20px 38px;
    justify-content: space-between;
    border-top: 2px solid #64676C;
}

.request-detail-total span {
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.request-detail-controls {
    margin-top: 23px;
    justify-content: space-between;
}

.section-title--marginless {
    margin-bottom: 0 !important;
}

.search--bar--template .search-bar__input {
    width: 100%;
    max-width: 86%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
    background-color: transparent;
}

p.search-hint-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #64676C;
    margin-top: 0;
}

.my-template-wrapper {
    margin: 40px 0;
}

.my-template-wrapper__header {
    display: flex;
    justify-content: space-between;
}

.my-template-wrapper__header md-checkbox .md-label {
    font-weight: 400;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #64676C;
}

.my-template-wrapper__header md-checkbox .md-container,
.my-template-wrapper__header md-checkbox .md-icon {
    width: 15px;
    height: 15px;
}

.my-template-wrapper__header md-checkbox.md-checked .md-icon:after {
    left: 3px;
    top: -1px;
}

.my-template-wrapper__body {
    background-color: #F5F7FA;
    padding: 32px 25px;
}

.my-template--list {
    max-height: 332px;
    padding: 0;
    overflow-y: auto;
}

.my-template--list .my-template--list__item {
    background-color: #fff;
    margin-bottom: 2px;
}

.my-template--list .my-template--list__item .list-row-layout {
    width: 100%;
    align-items: center;
    padding: 18px 0;
}

.my-template--list .my-template--list__item .list-row-item {
    padding-bottom: 0;
}

.my-template--list .my-template--list__item md-checkbox {
    margin-bottom: 0;
}

.my-template--list .my-template--list__item .md-body-1 {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.my-template--list .my-template--list__item .list-row-item:first-child {
    width: 5%;
}

.my-template--list .my-template--list__item .list-row-item {
    width: 22.1053%;
}

.single-form-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-top: 32px;
    margin-bottom: 18px !important;
}

.template-maintain--form label {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    display: block;
}

.space-in-between {
    justify-content: space-between;
}

.align-items {
    align-items: center;
}

.template-maintain--form .search-bar__input {
    width: calc(100% - 4.5%);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
    background-color: transparent;
    margin-right: 2%;
}

.template-maintain--form .input__half {
    flex-grow: 1;
}

.template-maintain--form .md-button {
    margin-left: 0;
    margin-right: 0;
}

.template-product-result__wrapper {
    margin-top: 28px;
}

.template-product-result {
    background-color: #F5F7FA;
    padding: 32px 25px;
}

.template-product-result .md-button {
    margin-top: -5px;
}

.order-subtotal,
.order-fee {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
    border-bottom: 0.5px solid #211E1F;
    padding-top: 21px;
    padding-bottom: 8px;
}

.order-fee-warning {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #D53D41;
}

.file-upload__wrapper {
    display: flex;
}

.example-file__download {
    width: 100px;
    height: 133px;
    background: #F1F8FC;
    border-radius: 2px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    padding: 48px 10px 10px;

    font-weight: 400;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.upload__warning {
    font-weight: 500;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64676C;
}

.upload__warning span {
    width: 13px;
    height: 13px;
    text-align: center;
    font-size: 9px;
    border: 1px solid #64676C;
    border-radius: 50%;
    display: inline-block;
}

.section--main .section-title__warning {
    color: #D53D41;
    margin-bottom: 40px;
}

.table__warning .table--order-template__header {
    background-color: rgba(213, 61, 65, 0.12);
}

.quick-searchbar {
    position: absolute; 
    top: 101px; 
    z-index: 29; 
    width: 100%;
    background-color: #fff;
}

.quick-searchbar h2.section-title.search-section-title {
    margin-top: 50px;
    margin-bottom: 0;
}

.quick-searchbar-overlay {
    content: "";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 101px;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 28;
    display: block;
}

.quick-searchbar .md-content.content,
.full-product-search .md-content.content {
    padding-top: 0;
}

.quick-searchbar .search-section-title:after {
    content: 'QUICK PRODUCT SEARCH';
}

.full-product-search .search-section-title:after {
    content: 'FULL PRODUCT SEARCH';
}

.box-file__uploaded {
    max-width: 200px;
    max-height: 24px;
    background-color: #F5F7FA;
    border-radius: 2px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.box-file__uploaded2 {
    max-width: 213px;
    max-height: none;
    height: auto;
    background-color: #F5F7FA;
    border-radius: 2px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 12px; 
}

.box-file__uploaded2.wrong-file {
    background-color: rgba(213, 61, 65, .1);
}

.box-file__uploaded2 .uploaded-file__delete {
    position: static;
    float: right;
}

.clr {
    clear:both;
    height:0;
}

.uploaded-file__name,
.uploaded-file__size {
    font-size: 12px;
    font-weight: 300;
    color: rgba(213, 61, 65, .9);
    margin: 0;
    line-height: normal;
}

.uploaded-file__name {
    font-weight: 300;
    font-size: 12px;
    color: rgba(213, 61, 65, .9);
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.uploaded-file__size {
    font-weight: 400;
    font-size:10px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #64676C;
}

.uploaded-file__delete {
    position: absolute;
    right: 12px;
    top: 12px;
}

.box.has-advanced-upload {
    width: 210px; 
    outline-offset: 0; 
    position: relative;
}

.search-panel {
    height: 100%;
}

h3.customer-user-header {
    font-size: 12px;
    margin-top:30px;
}

.body-wrapper {
    min-height:100%;
}

.dialog-content__center {
    text-align: center;
    padding: 60px 75px;
}

.dialog-content__succeed h2.md-title {
    color: #6DBF66;
}

.dialog-content__failed h2.md-title {
    color: #D53D41;
}

.order-info-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #211E1F;
}

.backorder-list .list-row-layout.layout-bottom {
    max-width: 100%;
    flex: 0 0 100%;
}

.backorder-list .list-row-layout.layout-bottom .list-row-item:last-child {
    align-items: flex-start;
}

.theme-color-yellow {
    color: #FFE45C;
}

md-toolbar {
    box-shadow: none;
}

.in-page--product-search .list-row-layout.layout-top .list-row-item {
    flex: 0 0 20%;
    word-break: break-all;
}

.in-page--product-search .list-row-layout.layout-top .list-row-item:last-child {
    align-items: flex-end;
}

md-dialog md-dialog-content,
md-dialog-content h2, 
md-dialog-content p {
    text-align:center !important;
}

md-dialog md-input-container {
    text-align: justify !important;
}

md-dialog-actions {
    justify-content: center !important;
}

.flyout .list-item .md-body-1.text-right.ng-binding {
    max-width: 60%;
}

.homepage-body-nav-bar ._md-nav-bar-list {
    width: 100%;
    display: block;
}

.homepage-body-nav-bar ._md-nav-bar-list .md-nav-item {
    display: inline-block;
}

.homepage-body-nav-bar ._md-nav-bar-list .md-nav-item:last-child {
    float: right;
}

md-input-container .md-resize-wrapper textarea {
    min-height: 121px;
    height: auto !important;
}

.home-contact.wrapper {
    margin: 0 auto;
}

.home-contact.wrapper .layout-wrap.layout-xs-column.layout-row {
    width: 1040px;
    margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
    .home-contact.wrapper .layout-wrap.layout-xs-column.layout-row {
        width: auto;
    }
    .layout-row{
        width:100%;
    }
}
#template_name_Input_error {
    position: relative;
    order: 4;
    overflow: hidden;
    clear: left;

    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.55,0,.55,.2);
    padding-top: 5px;
}

.input-error-message {
    border-color: red !important;
}

.add-user-form-wrapper {
    margin-top: 3rem;
}

.failed-added {
    color: red;
    font-weight: 100;
    margin-bottom: 3rem;
    display: flex;
    line-height: 14px;
    margin-top: 8px;
}

.failed-added::before {
    content: '\2715';
    background-color: red;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; 
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    font-size:8px;
    line-height: 14px;
    color: white;
}

.succeed-added {
    color: green;
    font-weight: 100;
    margin-bottom: 2rem;
}

.succeed-added:before {
    content: '\2713';
    background-color: green;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: 14px; 
    height: 14px;
    border-radius: 50%;

    font-size:10px;
    color: white;
    font-size: 10px;
    line-height: 16px;
}

.add-product-to-template {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

label.select-field-label {
    opacity: 1;
    height: 100%;
}

.select-field-label + md-select.md-propharma-theme.ng-invalid.ng-touched .md-select-value {
    border-bottom-color: transparent !important;
}

form md-select .md-select-value {
    border-bottom-color: transparent;
}

.section--main form md-select .md-select-value {
    border-bottom-color: transparent;
}

md-select.md-propharma-theme.ng-invalid.ng-touched .md-select-value {
    color: #64676C !important;
    border-bottom-color: #64676C !important;
}

md-select-menu md-option .md-text {
    font-weight: 300 !important;
}

md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
    transform: none;
    -webkit-transform: none;
}

md-input-container.select-has-value label:not(.md-no-float) {
    transform: translate3d(0,11px,0) scale(.75);
    transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
}

.section--contact-form {
    margin-bottom: 80px;
}

.home-contact__form-container form md-select {
    border-bottom-color: transparent;
    margin-top: 32px;
}

.home-contact__form-container form .md-input-invalid md-select {
    border-bottom-color: inherit;
}

.home-contact__form-container form md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
    color: #211E1F !important;
}

.blur-out-text {
    opacity: 0.3;
}

.download-modal {
    position: relative;
    padding: 50px;
    width: 593px;
    max-width: 100% !important;
}

.download-modal__subhead {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.download-file-title {
    display:flex;
    flex-direction: column;
    justify-content: flex-start; 
    text-align:left; 
    margin-left: 12px; 
    max-width: 330px;
}

.modal-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
}

.table--order-template.table__warning .icon__delete md-icon {
    color: #211E1F;
}

.is-onelink-loading #onelink-loader {
    display: flex;
    animation: fadeIn 300ms linear;
}

#onelink-loader {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 199;
    animation: fadeOut 300ms linear;
}

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes fadeOut {
    from { opacity: 1 }
    to { opacity: 0 }
}

.loading-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.spinning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.spinning svg {
    margin-bottom: 1rem;
    animation-name: spin;
    animation-duration: 1800ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.updated-user::before {
    content: "Updated";
    color: green;
    font-size: 16px;
}

.print-qrcode-modal {
    max-width: none !important;
    width: 550px !important;
    padding: 48px 38px;
}

.print-qrcode-modal .mng-modal {
    height: auto;
}

.print-qrcode-modal h2.md-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.print-qrcode-modal md-checkbox .md-label {
    font-weight: 500
}

.print-qrcode-modal md-dialog-content {
    text-align: left !important;
}

.print-qrcode-modal .modal__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.print-qrcode-modal .modal__content__row {
    width: 100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}

    .print-qrcode-modal .modal__content .modal__content-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 28px 5px 37px 0;
        border-top: 1px solid #b1b3b6;
    }

.print-qrcode-modal .modal__content .modal__content-row .qr-code-detail {
    max-width: 357px;
    margin-right: 58px;
}

.print-qrcode-modal .modal__content .modal__content-row .qr-code-detail .detail-text {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 8px;
}

.print-qrcode-modal .modal__content .modal__content-row:last-child {
    border-bottom: 1px solid #b1b3b6;
}

.print-qrcode-modal .modal__buttons {
    display:flex;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin-top: 16px;
}

/*.qr-code {
    width: auto;
    height: 100%;
}*/

.size-wrapper {
    display: flex;
    flex-direction: column;
}

.print-sizes {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.print-sizes md-checkbox {
    margin-top: 16px;
    margin-bottom: 0;
}

.print-sizes md-checkbox:first-child {
    margin-right:36px;
}

.qr-code2{
    width: 100px;
    height: 100px;
}


.arrow-ex {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgb(49,165,216);
}

.mng-modal {
    height: 500px;
}

.input-message-wrapper {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 80%;
    position: relative;
}

md-checkbox.qrCheck.md-propharma-theme[disabled]:not(.md-checked) .md-icon {
    border-color: #999;
}

md-checkbox.qrCheck.md-propharma-theme[disabled] .md-label {
    color: #999;
}

.order-qty-error {
    border-color: red;
    margin-bottom: 12px;
}

.required-field-error {
    position: absolute;
    bottom: -18px;
    color: red;
}

.order-quantity-error {
    font-size:11px;
    color:red;
    line-height:1.2;
    position:absolute;
    left:-24px;
    width:180%;
    margin-top:30px;
}

#onelink-loader.in-page-loader {
    position: relative;
    min-height: 15vh;
    display: block;
    color: #000;
    background-color: transparent;
}

.order-receipt .product-list .list-row-layout.layout-top .list-row-item {
    flex: 0 0 17%;
}

.order-receipt .product-list .list-row-layout.layout-top .list-row-item:last-child {
    text-align: right;
}

.update-account--form label {
    font-size: 12px;
    line-height: 1.6;
    width: 151px;
}

.update-account--form .md-block {
    position: relative;
}

.selected-template-name-input {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #64676C;
    border: 0.75px solid #211E1F;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 11px 19px;
    position: relative;
}

.flyout md-select.md-propharma-theme:not([disabled]):focus .md-select-value{
    color:white;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.of-hidden {
    overflow: hidden;
}

.accordion-btn {
    font-weight: 600; 
    font-size: 10px; 
    line-height: 1.6;
    text-align: right; 
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
    color: #211E1F;
}

.qr-code-details {
    display: block; 
    text-align:left;
    font-weight: 700; 
    font-size: 10px; 
    line-height: 1.6; 
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
    color: #64676C;
}

.choose-qr-label-size {
    display: block; 
    text-align:left;
    font-weight: 700; 
    font-size: 10px; 
    line-height: 1.6; 
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
    color: #64676C;
}

.please-select-size {
    color: red; 
    padding-top:10px;
    display:none
}

.home-banner__product--update {
    background-color: #EAF5FA;
    margin-top: 32px;
    padding: 17px 21px;
}

.home-banner__product--update h2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #211E1F;
}

.home-banner__product--update p,
.home-banner__product--update ul,
.home-banner__product--update ol {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    color: #211E1F;
    opacity: 0.75;
    display: block;
}

.forgot-password-dialog {
    width:100%;
    max-width:496px;
    padding: 50px 38px;
}

.forgot-password-dialog h2 {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    color: #211E1F;
    text-align: left !important;
}

.forgot-password-dialog .form md-input-container {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #211E1F;
    margin-bottom: 24px;
}

.password-token-link {
    align-items: flex-start;
    padding-left: 4px;
}

.password-token-link .token-link {
    margin-left: 0;
}

.forgot-password-dialog .md-button.md-pwr-theme.md-primary {
    color: #31A5D8;
}

.forgot-password-dialog .md-button.md-pwr-theme.md-accent.md-raised {
    background-color: #31A5D8;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.hidden {
    display: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.hide-column {
    display: none;
}

 /* Collect personal info contact form updates */
.contact__collect-info .md-caption {
    display: block;
    color: #64676C;
    font-size: 10px;
}
.contact__collect-info .md-caption a {
    color: inherit;
    text-decoration: underline;
}
.contact__collect-info .md-caption a:hover {
    color: #0265ff;
}
.footer-bar a {
    margin-right: 16px;
}

#onelink-loader.in-container-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    background-color: rgba(0, 0, 0, 0.25);
}

.loading-img-container {
    background: white;
    height: 300px;
    width: 400px;
}

.loading-text {
    color: black;
    padding-top: 26px;
    font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.mt-20 {
    margin-top: 20px;
}

.layout-suborder {
    padding: 32px !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* .layout-suborder .list-item {
    padding: 0 !important;
} */

.accordion__content-suborder .open-accordion-content {
    /* padding: 32px !important; */
    border-bottom: 0.5px solid #dde4ee !important;
}

/* F8FCFD */

.accordion-suborder {
    background-color: #F8FCFD !important;
}


.md-list-unstyled {
    padding: 0px !important;
}

.accordion__content-suborder {
    padding: 0 !important;
    /* background-color: #F8FAFB !important; */
}

.accordion__content-suborder .md-list {
    padding-top: 0px !important;
}

.open-accordion-content-suborder {
    padding: 32px;
    border-bottom: 1px solid #DDE4EE;
}

.list-row-suborder {
    padding: 32px;
    border-bottom: 1px solid #DDE4EE;
}

.layout-sublist-suborder {
    padding: 24px !important;
    background-color: #F1F8FC !important;
    /* border-bottom: 1px solid #DDE4EE !important; */
}

.layout-suborder .md-title {
    color: #31A5D8 !important;
}

.layout-suborder .list-row-layout .list-row-item {
    padding-top: 16px !important;
}

.show-more-caption,
.show-less-caption {
    font-size: 10px;
    font-style: normal;
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    color: #64676C;
    flex: none;
    order: 0;
}

.show-less-icon,
.show-more-icon {
    height: 10px !important;
    width: 10px !important;
    min-width: 10px;
}

/* Track Order simple overlay menu */
.track-order-simple-menu {
    position: relative;
    display: inline-block;
}

.track-order-simple-menu__content {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 350px;
    background-color: #fff;
    border: 1px solid #D1D3D4;
    box-shadow: 0 8px 16px rgba(176, 190, 197, 0.2);
    border-radius: 4px;
    padding: 12px 0;
    left: 0;
}

.track-order-simple-menu__content .link-menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}

.track-order-simple-menu__content .link-menu-container + .link-menu-container {
    border-top: 1px solid #F0F2F5;
}

.track-order-simple-menu__content .menu-container a {
    color: #31A5D8;
}

.track-order-simple-menu__button {
    color: #fff;
}

.un-tracked {
    border-top: 1px solid #393939;
}

.padding-top-none-suborder {
    padding-top: 0 !important;
}

.home-dropdown-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: #FFFFFF;
}


.home-banner__search-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 1;
    justify-content: space-between;
    margin-left: 3rem;
}

.dropdown-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-title .s16{
    height: 16px;
    width: 16px;
    min-height: 16px;
    min-width: 16px;
}

.no-scroll {
    overflow: hidden;
}

/* Dropdown styles */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
}

.arrow {
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.dropdown-content {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 102px;
    width: 100%;
    height: 80vh;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 200;
    padding: 2rem;
    color: #333;
    overflow-y: auto;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

.dropdown-content.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 20px; /* Adding gap between items */
    opacity: 0;
}

.dropdown-content.show .dropdown-grid {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 0.1s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    width: calc(25% - 15px); /* 4 columns with gap consideration */
    padding: 1rem;
    text-decoration: none;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D1D3D4;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.dropdown-item.no-border {
    border: none;
    justify-content: center;
}
.dropdown-item.no-hover:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}
.dropdown-item:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.arrow-right {
    font-size: 1.2rem;
}

.arrow-right .md-primary {
    color: #1C1B1F !important;
}

/* Category title and back link */
.category-title {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0;
}

.category-title a {
    color: #000000;
    text-decoration: none;
}

.dropdown-content.show .category-title {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 0.1s;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: #211E1F;
    text-decoration: none;
    margin-right: 1rem;
    font-size: 1rem;
}

.back-link .md-primary {
    color: #31a9db;
}

.dropdown-item .md-primary {
    color: #1C1B1F;
}

.arrow-left {
    margin-right: 5px;
}

/* Child categories container */
.child-categories {
    display: none;
}

.child-categories.active {
    display: block;
}

/* Main categories container */
.main-categories {
    display: block;
}

.main-categories.hidden {
    display: none;
}

/* See all button */
.see-all-btn {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    /* margin-top: 2rem; */
    text-align: center;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}

.see-all-btn:hover {
    background-color: #444;
}

/* Overlay */
.overlay {
    opacity: 0;
    position: fixed;
    top: 102px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Search bar styles */
.search-container {
    position: relative;
}

.search-form {
    display: flex;
    align-items: center;
}

.search-input {
    padding: 0.6rem 1rem;
    padding-right: 2.5rem;
    border: none;
    border-radius: 20px;
    width: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 0.9rem;
}

.search-input:focus {
    outline: none;
    background-color: white;
}

.search-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
}

.show-more-less-icon span:hover {
    color: #31A5D8 !important;
}

.show-more-less-icon md-icon:hover {
    color: #31A5D8 !important;
}

/* Account Orders: hover color for Show more/Show less toggle */
.list-row-item .show-more-less-icon {
  transition: color 0.2s ease;
}
.list-row-item .show-more-less-icon:hover {
  color: #31A5D8;
}
.list-row-item .show-more-less-icon:hover .md-icon,
.list-row-item .show-more-less-icon:hover .md-primary,
.list-row-item .show-more-less-icon:hover md-icon {
  color: #31A5D8 !important;
  fill: #31A5D8 !important;
}
.list-row-item .show-more-less-icon:hover svg,
.list-row-item .show-more-less-icon:hover svg path {
  fill: #31A5D8 !important;
}

/* Ensure caption text also turns blue when hovering the icon/link */
.list-row-item a.show-more-less-icon:hover .show-more-caption,
.list-row-item a.show-more-less-icon:hover .show-less-caption {
  color: #31A5D8 !important;
}

.track-order-button {
    background-color: #D1D3D4 !important;
    color: #64676C !important;
}