/*******************************************************************************
MRX Base
This stylesheet is used to define variables and base elements for MatchRX's
marketing platform

##########
SECTIONS
##########
- colors
- fonts
- icons
- custom badge styles
- custom button styles
- custom card styles
- custom popover styles
*******************************************************************************/

/* ===========================
   COLORS
=========================== */
:root {
    --c-blue-1: #edf8ff; /* Wholesale Background Blue */
    --c-blue-2: #b9e2ff;
    --c-blue-3: #37abff; /* Wholesale Blue */
    --c-blue-4: #d5efff; /* Wholesaler Application Banner Blue */

    --c-gray-1: #e4e4e4; /* Format Filler Gray */
    --c-gray-2: #d5d5d5; /* In Process Gray */
    --c-gray-3: #9fa2a8;
    --c-gray-4: #7a7b7b;
    --c-gray-5: #404041;
    --c-gray-6: #292d32;
    --c-gray-7: #6d6e71;
    --c-gray-8: #545555;
    --c-gray-9: #f8f7f7; /* Pharmacy Background Gray */
    --c-gray-10: #aaaaaa; /* Disabled Button Background */
    --c-gray-11: #333333; /* Disabled Button Text */
    --c-gray-12: #f3f3f3; /* pharmacy header */
    --c-gray-13: #323232; /* Dark Charcoal Gray */

    --c-green-1: #cde6d9; /* Active Green */
    --c-green-2: #0a705a; /* Checkout Green */

    --c-orange-1: #fef6ed; /* Pending Orange */
    --c-orange-2: #f69220; /* MatchRX Orange */
    --c-orange-3: #ff9900;
    --c-orange-4: #f26f28; /* Red Orange Medium */
    --c-orange-5: #ffe2c1; /* Declined Orage */

    --c-white: #ffffff;
    --c-black: #000000;
    --c-red: #dc3545;
    --c-yellow-2: #fff59d; /* Highlighter Yellow */

    --c-dark-bg: var(--c-gray-13);
}

.bg-gray-13 {
    background-color: var(--c-gray-13);
}
.text-gray-13 {
    color: var(--c-gray-13);
}

/* ===========================
   FONTS
=========================== */
@font-face {
    font-family: 'century-gothic-bold';
    src: url('../fonts/Century-Gothic-Bold.ttf');
}

@font-face {
    font-family: 'piedra-regular';
    src: url('../fonts/Piedra-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Light.woff') format('woff'), url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-lightitalic';
    src: url('../fonts/Roboto-LightItalic.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-medium';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Medium.woff') format('woff'), url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-black';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Black.woff') format('woff'), url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-poppins {
    font-family: Poppins;
}

.font-weight-thin {
    font-weight: 100;
}
.font-weight-extra-light {
    font-weight: 200;
}
.font-weight-light {
    font-weight: 300;
}
.font-weight-normal {
    font-weight: 400;
}
.font-weight-medium {
    font-weight: 500;
}
.font-weight-semi-bold {
    font-weight: 600;
}
.font-weight-bold {
    font-weight: 700;
}
.font-weight-extra-bold {
    font-weight: 800;
}
.font-weight-black {
    font-weight: 900;
}

/* text colors */
.color-blue-3 {
    color: var(--c-blue-3);
}
.color-green-2 {
    color: var(--c-green-2) !important;
}
.color-orange-2 {
    color: var(--c-orange-2);
}

/* ===========================
   ICONS
=========================== */
:root {
    --bg-long-arrow: url("data:image/svg+xml,%3Csvg width='433' height='97' viewBox='0 0 433 97' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.01438 41.5C3.42454 41.4921 0.507958 44.3958 0.500016 47.9856C0.492074 51.5755 3.39578 54.492 6.98562 54.5L7.01438 41.5ZM430.586 53.5333C433.13 51.0006 433.139 46.885 430.607 44.341L389.332 2.88381C386.8 0.339799 382.684 0.330693 380.14 2.86348C377.596 5.39626 377.587 9.51183 380.12 12.0558L416.808 48.9067L379.957 85.5948C377.413 88.1276 377.404 92.2431 379.937 94.7871C382.469 97.3312 386.585 97.3403 389.129 94.8075L430.586 53.5333ZM6.98562 54.5L425.986 55.427L426.015 42.427L7.01438 41.5L6.98562 54.5Z' fill='%23000000'/%3E%3C/svg%3E");
    --bg-arrow: url("data:image/svg+xml,%3Csvg width='95' height='37' viewBox='0 0 95 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 16C1.11929 16 0 17.1193 0 18.5C0 19.8807 1.11929 21 2.5 21V16ZM93.7678 20.2678C94.7441 19.2915 94.7441 17.7085 93.7678 16.7322L77.8579 0.82233C76.8816 -0.15398 75.2986 -0.15398 74.3223 0.82233C73.346 1.79864 73.346 3.38155 74.3223 4.35786L88.4645 18.5L74.3223 32.6421C73.346 33.6184 73.346 35.2014 74.3223 36.1777C75.2986 37.154 76.8816 37.154 77.8579 36.1777L93.7678 20.2678ZM2.5 21H92V16H2.5V21Z' fill='%2337ABFF'/%3E%3C/svg%3E");
    --bg-clock: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='7' stroke='%23000000' stroke-width='2'/%3E%3Cpath d='M5.96472 3.1363C5.2865 3.31803 4.66807 3.67508 4.17157 4.17157C3.67508 4.66807 3.31803 5.2865 3.1363 5.96472' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18.0353 3.1363C18.7135 3.31803 19.3319 3.67508 19.8284 4.17157C20.3249 4.66807 20.682 5.2865 20.8637 5.96472' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 8V11.75C12 11.8881 12.1119 12 12.25 12H15' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

svg image {
    width: 100%;
    height: 100%;
}

/* ===========================
   CUSTOM BADGE STYLES
=========================== */
.badge {
    color: var(--c-white);
    border: 1px solid transparent;
}
.badge-pending {
    background-color: var(--c-orange-1);
    border-color: var(--c-orange-2);
    color: var(--c-orange-2);
}
.badge-in_review {
    background-color: var(--c-gray-1);
    border-color: var(--c-gray-3);
    color: var(--c-gray-7);
}
.badge-in_process {
    background-color: var(--c-gray-2);
    border-color: var(--c-gray-4);
    color: var(--c-gray-8);
}
.badge-declined {
    background-color: var(--c-orange-5);
    border-color: var(--c-orange-4);
    color: var(--c-orange-4);
}
.badge-active,
.badge-hidden {
    background-color: var(--c-green-1);
    border-color: var(--c-green-2);
    color: var(--c-green-2);
}
.badge-outline {
    background-color: var(--c-white);
    border-color: var(--c-black);
    color: var(--c-gray-13);
}

/* ===========================
   CUSTOM BUTTON STYLES
=========================== */
.btn.btn-blue,
.btn.btn-green,
.btn.btn-orange,
.btn.btn-red {
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--c-white);
    cursor: pointer;
    background-position: center;
    transition: background 0.8s;
    text-decoration: none;
}
a.btn-blue,
a.btn-green,
a.btn-orange,
a.btn.btn-red {
    display: inline-block;
    appearance: button;
}
a.btn:active:not(.btn-link):not(.btn-outline-dark),
a.btn:hover:not(.btn-link):not(.btn-outline-dark),
a.btn:link:not(.btn-link):not(.btn-outline-dark),
a.btn:visited:not(.btn-link):not(.btn-outline-dark) {
    color: var(--c-white);
}
a.btn:active:not(.btn-link),
a.btn:hover:not(.btn-link),
a.btn:link:not(.btn-link),
a.btn:visited:not(.btn-link) {
    text-decoration: none !important;
}
.btn-blue:after,
.btn-green:after,
.btn-orange:after,
.btn-red:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 5px;
    background: rgba(255, 255, 255, .2);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}
html body .btn-blue:disabled,
html body .btn-green:disabled,
html body .btn-orange:disabled,
html body .btn-red:disabled {
    background-color: var(--c-gray-10);
    color: var(--c-gray-11);
    pointer-events: none;
    cursor: not-allowed;
}
.btn-blue:focus:not(:active)::after,
.btn-green:focus:not(:active)::after,
.btn-orange:focus:not(:active)::after,
.btn-red:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}
.btn-blue:focus,
.btn-green:focus,
.btn-orange:focus,
.btn-red:focus {
    outline: none;
}

.btn-blue {
    background-color: var(--c-blue-3);
    border-color: var(--c-blue-3);
}

.btn-green {
    background-color: var(--c-green-2);
    border-color: var(--c-green-2);
}

.btn-orange {
    background-color: var(--c-orange-3);
    border-color: var(--c-orange-3);
}
.btn-orange:focus,
.btn-orange:hover {
    background-color: var(--c-orange-4);
}

.btn-red {
    background-color: var(--c-red);
}


/* black and white buttons */
.btn.btn-black {
    background-color: var(--c-black);
    color: var(--c-white);
    border-radius: 7px;
}
.btn.btn-mrx-outline {
    background-color: var(--c-white);
    border: 1px solid var(--c-black);
    color: var(--c-gray-13);
    border-radius: 7px !important;
    transition-property: all;
}
.show>.btn.btn-mrx-outline,
.btn.btn-mrx-outline:hover,
.btn.btn-mrx-outline.active {
    background-color: var(--c-black);
    color: var(--c-white);
    font-style: italic;
}
a.btn.btn-mrx-outline:active, a.btn.btn-mrx-outline:link, a.btn.btn-mrx-outline:visited {
    color: var(--c-gray-13) !important;
}
a.btn.btn-mrx-outline:hover {
    color: var(--c-white) !important;
}

.show>.btn.btn-mrx-outline svg use,
.btn.btn-mrx-outline:hover svg use,
.btn.btn-mrx-outline.active svg use {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%);
}

.btn-remove {
    position: relative;
    padding-right: 24px;
    line-height: 19px;
}
.btn-black span.filter-icon.remove {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    background-color: var(--c-white);
    mask-image: url("/ui/images/filter-icons.svg#close");
}
.btn-remove:hover:after {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%);
}
.btn-mrx-outline span.filter-icon {
    background-color: #000;
}
.btn-mrx-outline span.filter-icon.down-arrow {
    width: 10px;
    height: 8px;
    background-color: var(--c-gray-10);
    mask-image: url("/ui/images/filter-icons.svg#downArrow");
}
.btn-mrx-outline span.filter-icon.filter {
    width: 36px;
    height: 22px;
    mask-image: url("/ui/images/filter-icons.svg#filter");
}
.btn.btn-mrx-outline:hover span.filter-icon,
.btn.btn-mrx-outline.active span.filter-icon {
    background-color: #fff;
}
.btn.btn-mrx-outline:hover span.filter-icon {
    transition: background-color .15s ease-in-out;
}
.btn.btn-mrx-outline span.filter-icon.reset {
    width: 15px;
    height: 17px;
    mask-image: url("/ui/images/filter-icons.svg#reset");
}

.btn.btn-mrx-outline:disabled,
.btn.btn-mrx-outline:disabled:hover {
    border: 1px solid var(--c-gray-11);
    color: var(--c-gray-11);
    background-color: var(--c-gray-10);
    font-style: normal;
    cursor: not-allowed;
}

/* ===========================
   CUSTOM CARD STYLES
=========================== */
.card.card-blue {
    border-radius: 10px;
    box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.25);
}
.card.card-blue .card-header {
    border: 1px solid transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    user-select: none;
}
.card.card-blue .register-title {
    cursor: pointer;
}
.card.card-blue .card-header {
    height: 64px;
    background-color: var(--c-blue-4);
}
.card.card-blue .close-header {
    height: 64px;
    background-color: var(--c-blue-4);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.card.card-blue .close-header:hover {
    background-color: var(--c-blue-4);
}

.card.card-blue .card-body {
    padding: 0;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* overwriting glyphicons is not idea, but necessary to get this to look and function the way they want */
.card.card-blue .glyphicon-chevron-down,
.card.card-blue .glyphicon-chevron-up {
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(../../images/descthin.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(0deg);
    transition: transform 0.25s linear;
}
.card.card-blue .glyphicon-chevron-up {
    transform: rotate(-180deg);
}
.card.card-blue .glyphicon-chevron-down:before,
.card.card-blue .glyphicon-chevron-up:before {
    content: '';
}

/* ===========================
   CUSTOM POPOVER STYLES
=========================== */
.popover-mrx {
    background-color: var(--c-white);
    border: 2px solid var(--c-gray-7);
    border-radius: 10px;
    font-family: Poppins;
    z-index: 5;
}
.popover-mrx .popover-mrx-header {
    padding: 0.75rem 0.75rem 0.5rem;
    text-align: center;
}
.popover-mrx .popover-header {
    display: inline;
    width: auto;
    padding: 0 0.5rem 0.5rem;
    margin: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--c-gray-2);
    line-height: 1;
    color: var(--c-black);
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
}
.popover-mrx p {
    color: var(--c-gray-7);
}
.popover-mrx a,
.popover-mrx a:hover {
    color: var(--c-blue-3);
    font-style: italic;
    text-decoration: underline;
}
.popover-mrx.bs-popover-auto[x-placement^=top] .arrow::before,
.popover-mrx.bs-popover-top .arrow::before {
    border-top-color: var(--c-gray-5);
}
.popover-mrx.bs-popover-auto[x-placement^=top] .arrow::after,
.popover-mrx.bs-popover-top .arrow::after {
    bottom: 2px;
}

.popover-mrx.bs-popover-auto[x-placement^=left] .arrow::before,
.popover-mrx.bs-popover-left .arrow::before {
    border-left-color: var(--c-gray-5);
}
.popover-mrx.bs-popover-auto[x-placement^=left] .arrow::after,
.popover-mrx.bs-popover-left .arrow::after {
    right: 2px;
}
.popover-mrx.bs-popover-auto[x-placement^=right] .arrow::before,
.popover-mrx.bs-popover-right .arrow::before {
    border-right-color: var(--c-gray-5);
}
.popover-mrx.bs-popover-auto[x-placement^=right] .arrow::after,
.popover-mrx.bs-popover-right .arrow::after {
    left: 2px;
}
.popover-mrx.bs-popover-auto[x-placement^=bottom] .arrow::before,
.popover-mrx.bs-popover-bottom .arrow::before {
    border-bottom-color: var(--c-gray-5);
}
.popover-mrx.bs-popover-auto[x-placement^=bottom] .arrow::after,
.popover-mrx.bs-popover-bottom .arrow::after {
    top: 2px;
}
.popover-mrx .popover-body {
    padding: 0.5rem 0.75rem;
    text-align: center;
}

/* skeleton popover */
.popover-mrx.skeleton {
    border-color: var(--c-black);
}
.popover-mrx.skeleton p {
    color: var(--c-gray-13);
}
.popover-mrx.skeleton a,
.popover-mrx.skeleton a:hover {
    color: var(--c-orange-4);
    font-style: italic;
    text-decoration: underline;
}
.popover-mrx.skeleton.bs-popover-auto[x-placement^=top] .arrow::before,
.popover-mrx.skeleton.bs-popover-top .arrow::before {
    border-top-color: var(--c-black);
}
.popover-mrx.skeleton.bs-popover-auto[x-placement^=left] .arrow::before,
.popover-mrx.skeleton.bs-popover-left .arrow::before {
    border-left-color: var(--c-black);
}
.popover-mrx.skeleton.bs-popover-auto[x-placement^=right] .arrow::before,
.popover-mrx.skeleton.bs-popover-right .arrow::before {
    border-right-color: var(--c-black);
}
.popover-mrx.skeleton.bs-popover-auto[x-placement^=bottom] .arrow::before,
.popover-mrx.skeleton.bs-popover-bottom .arrow::before {
    border-bottom-color: var(--c-gray-5);
}
.popover-mrx.skeleton .popover-header {
    color: var(--c-gray-13);
}
.popover-mrx.skeleton p strong {
    color: var(--c-gray-13);
}

/* green popover */
.popover-mrx.green {
    border: 2px solid var(--c-green-2);
}
.popover-mrx.green .popover-body {
    color: var(--c-green-2);
}
.popover-mrx.green.bs-popover-auto[x-placement^=top] .arrow::before,
.popover-mrx.green.bs-popover-top .arrow::before {
    border-top-color: var(--c-green-2);
}

.popover-mrx.green.bs-popover-auto[x-placement^=left] .arrow::before,
.popover-mrx.green.bs-popover-left .arrow::before {
    border-left-color: var(--c-green-2);
}
.popover-mrx.green.bs-popover-auto[x-placement^=right] .arrow::before,
.popover-mrx.green.bs-popover-right .arrow::before {
    border-right-color: var(--c-green-2);
}
.popover-mrx.green.bs-popover-auto[x-placement^=bottom] .arrow::before,
.popover-mrx.green.bs-popover-bottom .arrow::before {
    border-bottom-color: var(--c-green-2);
}

/* shipping details popover */
.popover-mrx.popover-shipping-details {
    width: 300px;
    border-color: var(--c-black);
    border-radius: 4px;
    z-index: 1000;
}
.popover-mrx.popover-shipping-details,
.popover-mrx.popover-shipping-details .header {
    background-color: var(--c-black) !important;
}
.popover-mrx.popover-shipping-details .header {
    border: none;
    text-align: center;
}
.popover-mrx.popover-shipping-details h1,
.popover-mrx.popover-shipping-details h2,
.popover-mrx.popover-shipping-details p {
    color: var(--c-white);
}
.popover-mrx.popover-shipping-details hr {
    margin: 0 auto;
    border-color: var(--c-white);
}
.popover-mrx.popover-shipping-details hr.narrow {
    width: 75%;
}
.popover-mrx.popover-shipping-details h1 {
    margin: 0 0 10px;
    font-size: 22px;
}
.popover-mrx.popover-shipping-details h2 {
    margin: 10px 0;
    font-size: 18px;
    line-height: 20px;
}
.popover-mrx.popover-shipping-details h3 {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1;
    color: var(--c-orange-2);
    text-transform: uppercase;
}
.popover-mrx.popover-shipping-details p {
    padding: 0;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 16px;
}
.popover-mrx.popover-shipping-details .white-box {
    max-width: 200px;
    margin: 0 auto 20px;
    padding: 5px 10px;
    color: var(--c-black);
    background: var(--c-white);
    border-radius: 8px;
}
.popover-mrx.popover-shipping-details .white-box:last-child {
    margin-bottom: 0;
}
.popover-mrx.popover-shipping-details.bs-popover-auto[x-placement^=top] .arrow::after,
.popover-mrx.popover-shipping-details.bs-popover-top .arrow::after {
    border-top-color: var(--c-black);
}
.popover-mrx.popover-shipping-details.bs-popover-auto[x-placement^=top] .arrow::before,
.popover-mrx.popover-shipping-details.bs-popover-top .arrow::before {
    border-top-color: var(--c-black);
}
.popover-mrx.popover-shipping-details.bs-popover-auto[x-placement^=bottom] .arrow::after,
.popover-mrx.popover-shipping-details.bs-popover-bottom .arrow::after {
    border-bottom-color: var(--c-black);
}
.popover-mrx.popover-shipping-details.bs-popover-auto[x-placement^=bottom] .arrow::before,
.popover-mrx.popover-shipping-details.bs-popover-bottom .arrow::before {
    border-bottom-color: var(--c-black);
}


/* popover modifiers */
.popover-mrx .popover-body.nopad {
    padding: 0;
}
.popover-mrx .popover-body.nopad p {
    padding: 0.5rem 0.75rem;
}
.popover-mrx .btn {
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
/* custom loader */
.page-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(2px);
    z-index: 2147483646;
}
.loader-icon {
    width: 200px;
    height: 200px;
    overflow: hidden;
}