.no-shadow {
    box-shadow: 0 0 0 transparent;
}

td table, #perm_virtualterminal_table, #perm_api_table, #perm_mobile_table, #perm_qb_table, #perm_swipe_table, #perm_upload_table, #processors_allowed_table {
    box-shadow: 0 0 0 rgba(0, 0, 0,0);
}

.page-wrapper {
    position: relative;
    min-height: 100vh;
}

body {
    min-height: 100vh;
}

.footer {
    bottom: 0;
    width: 100%;
}


.page-wrapper abbr, .page-wrapper acronym {
    text-decoration: none;
}

.header {
    background: #4b3e5a;
}

.gw-header-logo {
    width: 276px;
    height: 47px;
}

.header .header-logo img {
    margin-top: 5px;
}

.header .navbar-nav a, .header .navbar-nav a * {
    color: #ffffff;
}

    .header .navbar-nav a:hover {
        color: #ffffff;
        text-decoration: none;
    }

.header .navbar-nav i {
    margin-right: 5px;
}

/*.open headers always get the darker color. If none are open, the sign-out button wins.*/
.header .sign-out, .header .navbar-nav .open, .header .navbar-nav .open ul {
    background-color: #701515;
}

    /* non-open headers always get the lighter color */
    .header .dropdown-menu, .header .navbar-nav .open ~ li a, .header .navbar-nav .open li:hover {
        background-color: #4b3e5a;
    }

.sidebar {
    float: left;
    position: relative;
}

    .sidebar h4 a .title {
        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    }

.sidebar-width {
    width: 300px;
}

h4.text-center {
    color: black !important;
}


.sidebar-clickable {
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    z-index: 9;
    top: 0px;
    bottom: 0px;
    left: 0px;
}


.main-column {
    background: #FFFFFF;
    margin-left: 276px;
}

.content-row {
    overflow: auto;
}

.submit-panel.clearfix .col-xl-4.col-md-6 {
    padding-left: 0px;
}

/**
These two styles enforce a minimum height to match the sidebar content
This is not a great solution, unfortunately there isn't a clean solution
to pushing down the footer based on the height of the absolutely-positioned menu.
**/
.merchant-content-row {
    min-height: 680px;
}

.affiliate-content-row {
    min-height: calc(100vh - 258px);
}

.content-container {
    max-width: 700px;
    color: #000000;
    padding-bottom: 20px;
    margin: 0px 0px 0px 1px; /* prevent from centering */
    float: left;
}

    .content-container.content-container--wide {
        max-width: 860px;
        width: 100%;
    }

#accordion-menu, .mini-menu {
    -webkit-box-shadow: 3px 3px 4px 0px #e6e6e6;
    -moz-box-shadow: 3px 3px 4px 0px #e6e6e6;
    box-shadow: 3px 3px 4px 0px #e6e6e6;
}

    #accordion-menu .menu-heading {
        background-color: #701515;
    }

.menu-heading .title {
    color: #FFFFFF;
}

.sidebar .panel-heading {
    color: #696969;
    border-bottom: 1px solid #cacaca;
}

.sidebar .panel-title a {
    display: block;
}


    .sidebar .panel-title a:hover {
        text-decoration: none;
        background-color: #f5f5f5;
    }

.sidebar .panel-group {
    width: 276px;
}

.sidebar .fa {
    padding: 16px;
}

.sidebar a, .affiliate-content-row .sidebar a .fas:not(.toggle-icon) {
    color: #353535;
}

.sidebar .panel-heading .title {
    font-size: 11.25px;
}

.sidebar .panel-title a:focus {
    text-decoration: none;
}

.sidebar .toggle-icon {
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    display: block;
}

.sidebar .toggle-icon-wrapper {
    background-color: #701515;
    display: inline-block;
    width: 60px;
    margin-right: 10px;
}

.sidebar .toggle-caret {
    padding: 0px;
    margin: 19px 20px 21px 0px;
}

.sidebar-sub-items {
    list-style-type: none;
    border-bottom: 1px solid #cacaca;
    padding: 0px;
    margin: 0px;
}

    .sidebar-sub-items li {
        background: #f0f0f0;
    }

        .sidebar-sub-items li:nth-child(odd) {
            background: #FFFFFF;
        }

    .sidebar-sub-items a {
        color: #696969;
        display: block;
        padding: 12px;
        padding-left: 20px;
    }

        .sidebar-sub-items a:hover {
            text-decoration: none;
        }

        .sidebar-sub-items .selected, .sidebar-sub-sub-items .selected, .sidebar-sub-items a:hover {
            background-color: #3C4041;
            color: #ffffff;
        }

.sidebar-sub-sub-items a {
    padding-left: 40px;
}

.sidebar-sub-sub-items .heading {
    font-weight: bold;
}

.mini-menu {
    font-size: 16px;
    background-color: #FF0000;
    display: inline-block;
}

    .mini-menu .toggle-icon {
        border-bottom: 1px solid #cacaca;
        display: block;
        margin: 0px;
    }

.btn.btn--outline {
    background-color: white;
    background-image: none;
    border: 1px solid #808080;
}

.btn--outline {
    padding: 4px 8px 5px 8px;
    margin: 0 2px;
    text-decoration: none;
    color: #000000;
    border-radius: 3px;
}

    .btn--outline.btn--blue {
        background-color: rgba(3, 123, 215, 0.25);
        border-color: #337ab7;
    }

        .btn--outline.btn--blue:hover {
            background-color: rgba(3, 123, 215, 0.75);
            border-color: #337ab7;
        }

    .btn--outline.btn--red {
        background-color: rgba(240, 76, 106, 0.25);
        border-color: #f04c6a;
    }

        .btn--outline.btn--red:hover {
            background-color: rgba(240, 76, 106, 0.75);
            border-color: #f04c6a;
        }

.admin {
    background-color: #f9f9f9;
    color: #d0d0d0;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    box-shadow: 0px 3px 4px #e6e6e6;
}

    .admin li {
        padding: 10px;
        display: inline-block;
        vertical-align: top;
    }

.user-icon-container {
    padding-right: 2px;
}

.admin .user {
    white-space: nowrap;
    width: 165px;
    padding-left: 0px;
    padding-right: 0px;
    display: inline-block;
}

.admin .name {
    display: inline-block;
    max-width: 165px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin .company {
    display: inline-block;
    max-width: 165px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin .user-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    color: #4b3e5a;
    text-align: center;
    font-size: 2.8em;
    padding: 5px;
}

.admin .user img {
    margin-right: 10px;
}

.admin .user .company {
    color: #474747;
    font-weight: bold;
}

.admin .search {
    margin-top: 3px;
}

.admin .date {
    margin-top: 10px;
    color: #9a9a9a;
}

    .admin .date i {
        margin-right: 10px;
        color: #9a9a9a;
    }

.admin .vertical-divider {
    border-left: 1px solid #CCCCCC;
    width: 1px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 5px;
    margin-top: 20px;
}

.contact-info {
    padding: 30px 20px;
    background-color: #f9f9f9;
    margin-top: 10px;
    border-top: 1px solid #c9c9c9;
}

.copyright {
    background-color: #701515;
    padding: 40px 20px;
    color: #FFFFFF;
    font-size: 12px;
}


/* field editing tools */
.form-group label a {
    margin-left: 3px;
}

.pg-field-gone {
    opacity: 0;
    display: none;
}

.pg-field-editing.pg-field-gone {
    opacity: .3;
    display: block;
}

.required-icon {
    color: #C51644;
    margin-left: 3px;
    display: inline-block;
}

    .required-icon.fa-check-circle {
        color: #0B9764;
    }

.tree {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fbfbfb;
    border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}

    .tree li {
        list-style-type: none;
        margin: 0;
        padding: 10px 5px 0 5px;
        position: relative
    }

        .tree li::before, .tree li::after {
            content: '';
            left: -20px;
            position: absolute;
            right: auto
        }

        .tree li::before {
            border-left: 1px solid #999;
            bottom: 50px;
            height: 100%;
            top: 0;
            width: 1px
        }

        .tree li::after {
            border-top: 1px solid #999;
            height: 20px;
            top: 25px;
            width: 25px
        }

        .tree li span {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 1px solid #999;
            border-radius: 5px;
            display: inline-block;
            padding: 3px 8px;
            text-decoration: none
        }

        .tree li.parent_li > span {
            cursor: pointer
        }

    .tree > ul > li::before, .tree > ul > li::after {
        border: 0
    }

    .tree li:last-child::before {
        height: 30px
    }

    .tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
        background: #eee;
        border: 1px solid #94a0b4;
        color: #000
    }

a.visit-aware:visited,
a.visit-aware.manually-marked-visited {
    color: #7647a2;
}

.expandV2 td, .expand_2V2 td {
    font-size: 14px;
}

.expand_2V2 td {
    background-color: #f9fbff;
}

.expandListAccordionRow {
    margin-left: 40px;
}

/* tablet media query */
@media (max-width: 991px) {
    /* Styles */
    .main-column {
        /*background-color: #00FF00;*/
        margin-left: 55px;
    }

    .sidebar {
        position: absolute;
        z-index: 10;
    }

    /** full-width shouldn't be enabled outside of smaller screens **/
    .full-width {
        width: 100%;
        margin-top: 50px !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .admin .user-icon {
        padding: 0px !important;
        padding-top: 2px !important;
        width: 26px !important;
        height: 26px !important;
    }

    .content-container {
        max-width: calc(100vw - 73px);
    }

    .full-mobile {
        width: 100% !important;
        max-width: calc(100vw - 73px) !important;
        display: block !important;
        margin-top: 0 !important
    }

    span.name {
        font-size: 20px;
    }

    .admin {
        white-space: nowrap;
    }

        .admin .user {
            max-width: calc(100% - 60px);
            width: calc(100% - 60px);
        }

        .admin .name {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    li.search.full-mobile {
        width: 92% !important;
        float: left;
    }

    #search-popover-icon {
        float: left;
    }

    .mobile-clearfix:before, .mobile-clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }

    .scrollbars-mobile {
        display: block;
        overflow-x: auto;
    }

    .options-security-keys-table, .fixed-width-mobile-table {
        table-layout: fixed;
    }

    table.fixed-width-mobile-table * {
        overflow-wrap: break-word;
    }

    .expandListAccordionRow {
        margin-left: 15px;
    }
}

/* tablet media query */
@media (min-width: 992px) {
    /* Styles */
    #merchant-home div[class*='col-md'] {
        padding: 3px !important;
    }

    #merchant-home .row {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.processor-item {
    padding-bottom: 15px;
    font-size: 18px;
}

pre {
    background-color: #fff;
}

.splash-page body, .splash-page p, .splash-page div, .splash-page table, .splash-page tr, .splash-page td, .splash-page th {
    background: #ffffff;
    font-size: 12px;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    color: #000000;
}

.splash-page {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

div.float_title {
    text-align: left;
}

div.float_description {
    text-align: left;
    padding: 0;
}

.float_title {
    padding: 0 15px 10px;
    margin: 0 -15px;
    border-bottom: rgb(229, 229, 229) solid 1px;
}

.modal-header.float_title {
    padding: 0 15px 10px;
    margin: 10px 0;
    border-bottom: rgb(229, 229, 229) solid 1px;
}

.float_title * {
    font-size: 18px;
    font-weight: 500;
}

#loading_cover {
    border: none;
}

#session_auth_form {
    border: none;
    background-color: initial;
    width: auto;
    max-width: 500px;
    /* This inherits top, margin-top from common.css */
    left: calc(50% - 250px);
    margin-left: initial;
    color: #606060; /* This matches the color set by the container. */
}

nav.breadcrumb-trail {
    margin-top: 12px;
    margin-left: -3px;
}

#gateway-breadcrumb {
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
}

.breadcrumb > .active {
    color: #2b2b2b;
}

.uiTrans {
    opacity: 0.50;
    -moz-opacity: 0.50;
    filter: alpha(opacity=50);
}

.pagination-container > div {
    margin: 20px 10px;
}

.address-record-container {
    width: 100%;
}

.dropdown-container .dropdown-menu li {
    font-size: 11.5px;
}

.disable-css-transitions {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.nm-dropdown-menu-delay-unhover {
    display: block;
    visibility: hidden;
    transition-delay: .35s; /* delay of .25 seconds on hover off */
}

.dropdown-container:hover .dropdown-menu {
    display: block;
    visibility: visible;
    transition-delay: 0s;
}

.content-container .flex-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7px;
    /* 100% of view width minus the sidebar */
    max-width: calc(100vw - 310px);
    width: calc(100vw - 310px);
}

@media (max-width: 1399px) {
    .content-container .flex-grid {
        max-width: calc(100vw - 55px);
    }
}

.content-container .flex-grid .sub-panel {
    padding: 0 7px;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sidebar .toggle-caret {
    transform: rotate(0deg);
    transition: transform 150ms ease;
}

.sidebar .caret-expanded.toggle-caret {
    transform: rotate(-180deg);
    transition: transform 150ms ease;
}

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

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes colorchange {
    0% {
        color: red;
    }

    25% {
        color: yellow;
    }

    50% {
        color: blue;
    }

    75% {
        color: green;
    }

    100% {
        color: red;
    }
}

@-webkit-keyframes colorchange {
    0% {
        color: red;
    }

    25% {
        color: yellow;
    }

    50% {
        color: blue;
    }

    75% {
        color: green;
    }

    100% {
        color: red;
    }
}

.easter-egg {
    animation: spin .5s infinite linear, colorchange 2.5s infinite linear;
}

.label .fas:first-child, .label .far:first-child, .label .fab:first-child {
    margin-right: 4px;
}

.reportingLabel.reportingLabel--green {
    background-color: rgba(15, 188, 123, 0.5);
}

.reportingLabel.reportingLabel--green2 {
    background-color: rgba(26, 209, 142, 0.5);
}

.reportingLabel.reportingLabel--beige {
    background-color: rgba(255, 187, 119, 0.5);
}

.reportingLabel.reportingLabel--beige2 {
    background-color: rgba(231, 158, 86, 0.5);
}

.reportingLabel.reportingLabel--blue {
    background-color: rgba(95, 170, 255, 0.5);
}

.reportingLabel.reportingLabel--blue2 {
    background-color: rgba(39, 141, 231, 0.5);
}

.reportingLabel.reportingLabel--red {
    background-color: rgba(228, 36, 86, 0.5);
}

.reportingLabel.reportingLabel--red2 {
    background-color: rgba(251, 61, 103, 0.5);
}

.reportingLabel.reportingLabel--grey {
    background-color: rgba(169, 169, 169, 0.5);
}

.reportingLabel.reportingLabel--grey2 {
    background-color: rgba(196, 196, 196, 0.5);
}

.isolatedRow {
    display: inline-block;
    border: solid black 1px;
}

.isolatedRow__box1 {
    float: left;
    background-color: #e6e6e6;
    padding: 5px 10px;
    border-right: solid black 1px;
}

.isolatedRow__box2 {
    float: left;
    padding: 5px 10px;
}

.affiliate-content-row .transactionSnapshotTable * {
    font-size: 12px;
}

.affiliate-content-row .transactionSnapshotTable__subHeader {
    background-color: white;
}

    .affiliate-content-row .transactionSnapshotTable__subHeader th {
        color: black;
    }

.affiliate-content-row .transactionSnapshotTable__drilldownIcon * {
    color: #037bd7;
}

.affiliate-content-row .transactionSnapshotTable__drilldownOption, .affiliate-content-row .transactionSnapshotTable__drilldownOption * {
    color: #037bd7;
}

.transactionSnapshotPage__dateRange {
    text-align: center;
}

.affiliate-content-row .transactionSnapshotPage__filterTable {
    max-width: 400px;
}

    .affiliate-content-row .transactionSnapshotPage__filterTable thead {
        background-color: white;
    }

        .affiliate-content-row .transactionSnapshotPage__filterTable thead * {
            color: #000000;
        }

.affiliate-content-row .transactionSnapshotPage__removeFilter {
    text-align: center;
}

.affiliate-content-row .transactionSnapshotPage__removeFilterIconContainer {
    font-size: 20px;
}

    .affiliate-content-row .transactionSnapshotPage__removeFilterIconContainer * {
        color: red;
    }

.affiliate-content-row .transactionSnapshotTable__drilldown {
    float: left;
    margin-right: 5px;
}

.affiliate-content-row .transactionSnapshotTable__drilldownMenu {
    padding: 10px;
}

    .affiliate-content-row .transactionSnapshotTable__drilldownMenu ul {
        list-style: none;
        padding-left: 20px;
    }

.affiliate-content-row .transactionSnapshotTable__drilldownViewTheseTransactions {
    margin-bottom: 10px;
}

    .affiliate-content-row .transactionSnapshotTable__drilldownViewTheseTransactions span {
        margin-bottom: 10px;
        color: #037bd7;
    }

.affiliate-content-row .transactionSnapshotTable__count {
    border-right: none;
    background-color: #e6e6e6;
    font-weight: 700;
    text-align: left;
}

.affiliate-content-row .transactionSnapshotTable__amount {
    text-align: right;
}

.affiliate-content-row table.transactionReportTable {
    width: auto;
}

.transactionReportTable.transactionReportTable--empty .transactionReportTable__row {
    text-align: center;
}

.transactionReportTable__row:nth-child(2n) {
    background-color: #f9f9f9;
}

.transactionReportTable__container {
    overflow: auto;
}

.draggableTableHeader {
    position: relative;
    cursor: move;
}

    .draggableTableHeader .draggableTableHeader__leftDivider {
        position: absolute;
        left: 0;
        width: 50%;
        height: 100%;
    }

    .draggableTableHeader .draggableTableHeader__rightDivider {
        position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
    }

    .draggableTableHeader.draggableTableHeader--ghost {
        background-color: grey;
        opacity: .4;
    }

.actionIcons i {
    padding: 1px;
}

.excel-icon {
    color: green;
    cursor: pointer;
}

    .excel-icon:hover {
        color: #006600;
    }

.sortable-list-body {
    height: 100%;
}

.sortable-field-list {
    width: 48%;
    padding: 0;
    float: left;
}

    .sortable-field-list .panel-body {
        padding: 5px;
    }

.sortable-field-list-item {
    padding: 5px 10px;
    border: 1px solid #ddd;
}

.draggable {
    cursor: move;
    margin-bottom: 2px;
    margin-top: 2px;
}

.sortable-chosen {
    background-color: #ddd;
}

.sortable-ghost {
}

.datePickerField .input-group-addon {
    cursor: pointer;
}

.one-time-notification-popup-container {
    position: absolute;
    top: 58px;
    right: 10px;
    z-index: 200;
    overflow: hidden;
    width: 400px;
    max-height: 680px;
    display: flex;
    flex-flow: column wrap;
}

.one-time-notification-popup {
    transition: opacity 0.4s ease-out;
    opacity: 1;
    box-shadow: 0px 3px 4px #00000030;
}

    .one-time-notification-popup.hide-notification {
        opacity: 0;
    }

    .one-time-notification-popup .panel-heading {
        border-radius: 1px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .one-time-notification-popup .fas.fa-times {
        cursor: pointer;
        margin: -5px;
        padding: 5px;
    }

/* This method os swapping the icons came from here: https://codingwithspike.wordpress.com/2014/11/16/fancy-css-checkboxes-with-fontawesome/ */

.input-icons-fa {
    margin-right: 10px;
    cursor: pointer;
}

.replace-input-icons-with-fa label {
    width: 100%;
    display: flex;
    align-items: center;
}

.replace-input-icons-with-fa input {
    display: none;
}

    .replace-input-icons-with-fa input ~ .input-icons-fa.input-circle-check-fa:before {
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        content: '\f111';
        color: black;
        font-weight: 400;
    }

    .replace-input-icons-with-fa input:checked ~ .input-icons-fa.input-circle-check-fa:before {
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        content: '\f058';
        color: #009f60;
        font-weight: 900;
    }

    .replace-input-icons-with-fa input ~ .input-icons-fa.input-square-check-fa:before {
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        content: '\f0c8';
        color: black;
        font-weight: 400;
    }

    .replace-input-icons-with-fa input:checked ~ .input-icons-fa.input-square-check-fa:before {
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        content: '\f14a';
        color: #009f60;
        font-weight: 900;
    }

.verification-option, .radio-option {
    display: flex;
    align-items: center;
    border: 1px solid rgb(232, 232, 232);
    margin: 3px;
    padding: 10px;
    border-radius: 4px;
}

    .verification-option label, .radio-option label {
        margin-bottom: 0px;
        width: 100%;
        display: flex;
        align-items: center;
        font-weight: normal;
    }

@media (max-width: 767px) {
    .container {
        width: 100%;
    }
}

.no-underline:hover, .no-underline:active, .no-underline:focus {
    text-decoration: none;
}

.clearAllFields {
    font-size: 14px;
}

@media only screen and (min-width: 1400px) {
    .vt-form-control-bar {
        min-height: 28px;
    }
}

form[name="edit_invoice"] .vt-form-control-bar {
    padding: 9px 0;
}

.order-templates-load-default-container[data-default-template-id="0"] {
    display: none;
}

.gw-switch[data-state="on"] .btn.btn-danger, .gw-switch[data-state="off"] .btn.btn-success {
    background: linear-gradient(#F4F5F7, #eff0f2);
    color: #333333;
}

.gw-switch .btn.active {
    box-shadow: 0px 3px 4px 0px #bbbbbb;
}
/* Prevent Bootstrap from attempting to make the label "clickable" */
.gw-switch__label {
    cursor: default;
}

    .gw-switch__label:active {
        background-image: inherit;
        outline: inherit;
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }

.gw-switch__label {
    /* Bootstrap uses various combinations of pseudo classes in some cases (such as clicking) that are more specific than we can get here.
     * We use important to squash all of them, without having to explicitly identify each of them (I gave up trying after *:focus, *:active:focus wasn't enough).
     * Examples:
     * .btn-default:active
     * .btn-default:focus
     * .btn-default:active:focus
     * overriding each of these didn't cover clicking the element. !important prevents any other psuedo classes from getting prioritized.
     */
    color: #333 !important;
    background-color: #FAFAFA !important;
    border-color: #CCC !important;
    border-bottom: 0px solid #999 !important;
    z-index: auto !important;
}

.gwButtonSet {
}



.gwButtonSet__button {
    /* Bootstrap uses various combinations of pseudo classes in some cases (such as clicking) that are more specific than we can get here.
     * We use important to squash all of them, without having to explicitly identify each of them (I gave up trying after *:focus, *:active:focus wasn't enough).
     * Examples:
     * .btn-default:active
     * .btn-default:focus
     * .btn-default:active:focus
     * overriding each of these didn't cover clicking the element. !important prevents any other psuedo classes from getting prioritized.
     */

    background: linear-gradient(#F4F5F7, #eff0f2) !important;
    color: #333333 !important;
    z-index: auto !important;
}

    .gwButtonSet__button[data-checked="true"] {
        background: linear-gradient(#0586e9, #037bd7) !important; /* !important is needed here to defeat the other !important on .gwButtonSet__button */
        color: white !important; /* !important is needed here to defeat the other !important on .gwButtonSet__button */
        border-bottom: 0px solid #1e4c73 !important; /* !important is needed here to defeat the other !important on .gwButtonSet__button */
    }

    .gwButtonSet__button > input {
        /* https://stackoverflow.com/a/22462740/10111244 */
        position: fixed;
        opacity: 0;
    }

/* "Locked" switches cannot have their options changed therefore they shouldn't appear clickable.  */
.gw-switch--locked .btn.btn-danger {
    cursor: default;
    /* !important is used here to prevent more specific pseudo selectors from taking over. See above comment */
    background-color: #b94246 !important;
    border-color: #b94246 !important;
    border-bottom: 0px solid #6c2c2d !important;
}

/* "Locked" switches cannot have their options changed therefore they shouldn't appear clickable.  */
.gw-switch--locked .btn.btn-success {
    cursor: default;
    /* !important is used here to prevent more specific pseudo selectors from taking over. See above comment */
    background-color: #31B404 !important;
    border-color: #31B404 !important;
    border-bottom: 0px solid #298A08 !important;
}

.informationalWell p:last-child {
    margin-bottom: 0;
}

.affiliate-content-row .search-popover-icon-symbol,
.feeScheduleTable__icon *,
.addServicesTable__icon * {
    /* Use bootstrap color for a's */
    color: #037bd7;
}

.addServicesTableError__icon * {
    color: #ff0000;
}

.affiliate-content-row .fas, .affiliate-content-row .far, .affiliate-content-row .fal, .affiliate-content-row .fa {
    /* This is reassigned so that all other text will be the correct font. */
    font-family: "Font Awesome 5 Pro";
}


.affiliate-content-row .content-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.htmlLoginBoxPage {
    max-width: 1000px;
}

.htmlLoginBoxPage__example {
    float: left;
    max-width: 300px;
}

    .htmlLoginBoxPage__example > img {
        width: 100%;
    }

.codeBlock {
    position: relative;
}

.codeBlock--black {
    background-color: #282A37;
}

.codeBlock .codeBlock__code {
    font-family: monospace;
}

.codeBlock__codeContainer {
    background-color: #282A37;
    border-radius: 0;
}

.codeBlock__code--pink {
    color: #FD76C7;
}

.codeBlock__code--green {
    color: #44FC74;
}

.codeBlock__code--purple {
    color: #a079ba;
}

.codeBlock__code--blue {
    color: #58a9ec;
}

.codeBlock__code--orange {
    color: #c78b6d;
}

.codeBlock__code--forest {
    color: #6eb484;
}

.codeBlock__code--white {
    color: #fff;
}

.codeBlock__code--yellow {
    color: #F1FC84;
}

.codeBlock__code--indentation {
    color: inherit;
}

.codeBlock__line--indent1x {
    padding-left: 14px;
}

.codeBlock__line--indent2x {
    padding-left: 28px;
}

.codeBlock__line--indent3x {
    padding-left: 42px;
}

.codeBlock__line--indent4x {
    padding-left: 56px;
}

.codeBlock__line--indent5x {
    padding-left: 70px;
}

.codeBlock__line--indent6x {
    padding-left: 84px;
}

.codeBlock:hover .codeBlock__buttonContainer {
    display: block;
}

.codeBlock__buttonContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

.button {
    min-width: 191px;
    height: 35px;
    color: #ffffff;
    background: #281146;
    font-size: 16px;
    padding: 3px 15px 5px 15px;
    display: inline-block;
    text-align: center;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    transition: 150ms;
    border: 0;
    text-decoration: none;
    margin: 2px;
    border-radius: 8px;
}

.btn {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 5px 15px 5px 15px;
    border: none;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    transition: 200ms ease-in-out;
    font-size: 16px;
    height: 35px;
    color: #ffffff;
    background: #281146;
    border: 0;
    text-decoration: none;
}

.bootstrap-datetimepicker-widget .btn {
    height: auto;
}

.button * {
    color: #ffffff;
}

.button:hover, .btn:hover {
    background: #281146;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    transition: 150ms;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
}

.button:active, .btn:active, .btn.active {
    opacity: 0.7;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.hover,
.btn.btn-primary.active,
.btn.btn-primary:not(:disabled):not(.disabled):active {
    background: #281146;
}

.button.button--green,
.btn.btn-success,
.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success.hover,
.btn.btn-success.active,
.btn.btn-success:not(:disabled):not(.disabled):active {
    background:#314dc1;
}

.button.button--blue,
.btn.btn-info,
.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.hover,
.btn.btn-info.active,
.btn.btn-info:not(:disabled):not(.disabled):active,
.bootstrap-datetimepicker-widget .picker-switch .btn,
.bootstrap-datetimepicker-widget .picker-switch .btn:hover,
.bootstrap-datetimepicker-widget .picker-switch .btn:active,
.btn.btn-view-new-bill:hover,
.pagination-options-container button,
.pagination-options-container button:hover,
.pagination-options-container button:focus {
    color: #ffffff;
    background: #136BE7;
}

.button.button--red,
.btn.btn-danger,
.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger.hover,
.btn.btn-danger.active,
.btn.btn-danger:not(:disabled):not(.disabled):active {
    background: #FD668A;
}

.button.button--orange {
    background: #FF9538;
}

.button.button--white,
.btn.btn-default,
.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default.hover,
.btn.btn-default.active,
.btn.btn-default:not(:disabled):not(.disabled):active,
.bootstrap-datetimepicker-widget .timepicker-picker .btn,
.bootstrap-datetimepicker-widget .timepicker-picker .btn:hover,
.bootstrap-datetimepicker-widget .timepicker-picker .btn:active,
.bootstrap-datetimepicker-widget .timepicker-picker .btn.btn-primary,
.bootstrap-datetimepicker-widget .timepicker-picker .btn.btn-primary:hover,
.bootstrap-datetimepicker-widget .timepicker-picker .btn.btn-primary:active,
.bootstrap-datetimepicker-widget .timepicker-picker .btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-lite,
.btn.btn-lite:hover,
.btn.btn-lite:active,
.btn.btn-lite.hover,
.btn.btn-lite.active,
.dropdown-toggle,
.dropdown-toggle:hover,
.btn.btn-to-control-panel:hover {
    background-image: none;
    background-color: #E6ECEF;
    color: #000;
}

.button.button--excel {
    background-image: none;
    background-color: #217043;
}

.button.button--csv {
    background-image: none;
    background-color: #2866BD;
}

.button.button--yellow,
.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:active,
.btn.btn-warning.hover,
.btn.btn-warning.active,
.btn.btn-warning:not(:disabled):not(.disabled):active {
    background: #FCDD55;
    color: #000;
}

.button.button--disabled {
    background-image: none;
    background-color: #A8B9C7;
    color: #ffffff;
}

.button.button--small, .btn.btn-sm {
    height: 29px;
    font-size: 12px;
    min-width: 131px;
    line-height: 22px;
    padding-top: 2px;
    border-radius: 4px;
}

.button.button--micro, .btn.btn-micro {
    height: 17px;
    font-size: 10px;
    min-width: 80px;
    line-height: 10px;
    padding: 2px 14px;
    border-radius: 16px;
}

.button.button--textFieldAdjacent {
    margin-top: 14px;
    height: 42px;
    font-size: 1.1em;
    min-width: 110px;
    padding-top: 2px;
}

.button.button--extraSmall {
    height: 24px;
    font-size: 14px;
    min-width: 90px;
    line-height: 16px;
}

.button--large {
    font-size: 22px;
    height: 51px;
    padding: 10px 25px;
}

.button.button--rounded {
    border-radius: 100px;
    display: block;
}

    .button.button--rounded:hover {
        cursor: pointer;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
    }

.button.button--fixedBottomRight {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1;
}

.open > .dropdown-toggle.btn-success {
    background: inherit;
}

.affiliate-content-row .btn {
    color: white;
}

.affiliate-content-row .container .panel .panel-heading {
    font-size: 16.8px;
    padding: 9px 8px 7px;
}

.gw-switch .btn.active {
    opacity: 1;
}

/* This is done for backwards compatibility with existing btn-primary elements that don't have the border. */
.btn.btn-primary.btn-primary-with-border {
    border-bottom: 3px solid #1e4c73;
}

.btn.btn-default:not(.use-default) {
    background-color: #FAFAFA;
    border-color: #CCC;
    border-bottom: 0px solid #999;
}

.gw-switch__label.btn:hover {
    box-shadow: 0px 3px 4px 0px #bbbbbb;
}

.gw-switch__label.btn:active {
    opacity: 1;
}

.input-group {
    box-shadow: 0 2px 4px #f3f3f3;
}

    .input-group .input-group-addon, .input-group .btn, .input-group .form-control {
        box-shadow: 0 0 0 0 transparent;
    }

.navbar .dropdown-toggle {
    background: transparent;
    color: white;
}

.search .btn {
    border: 1px solid #9a9a9a;
    box-shadow: 0px 2px 4px #efefef;
}

.date-dropdown { /** for inputs where there needs to be 3 dropdowns instead of just one **/
    width: 32%;
    display: inline-block;
}

.affiliate-content-row .transactionDetailPage table {
    margin: 0 0 10px;
}

.affiliate-content-row .transactionDetailPage .col-md-6 {
    padding: 0 5px;
}

.affiliate-content-row .transactionDetailPage button .transactionDetailPage__icon * {
    color: #000;
}

.affiliate-content-row .transactionDetailPage button .transactionDetailPage__icon.transactionDetailPage__icon--right * {
    margin-left: 5px;
    margin-right: -5px;
}

.affiliate-content-row .transactionDetailPage button .transactionDetailPage__icon.transactionDetailPage__icon--left * {
    margin-left: -5px;
    margin-right: 5px;
}

.transactionDetailPage .transactionDetailPage__billingShippingInformation {
    margin: 0 -5px;
}

.transactionDetailPage .transactionDetailPage__buttonRow {
    margin: 0 -2px 10px;
}

.transactionInformation .transactionInformation__itemDescription,
.creditCardInformation .creditCardInformation__itemDescription,
.checkInformation .checkInformation__itemDescription,
.cashInformation .cashInformation__itemDescription,
.merchantDefinedFieldsInformation__itemDescription {
    font-weight: bold;
}

.checkInformation .checkInformation__icon,
.creditCardInformation .creditCardInformation__icon {
    margin-right: 5px;
}

.checkInformation .checkInformation__footerLink,
.creditCardInformation .creditCardInformation__footerLink {
    margin: 0 10px;
    cursor: pointer;
}

    .checkInformation .checkInformation__footerLink:first-child,
    .creditCardInformation .creditCardInformation__footerLink:first-child {
        margin-left: 0;
    }

.creditCardInformation__ccTypeImageContainer {
    margin-left: 5px;
    display: inline-block;
    width: 28px;
}

    .creditCardInformation__ccTypeImageContainer img {
        width: 100%;
    }

.loading_spinner_text {
    width: 100%;
    text-align: center;
    font-size: 1.7em;
    font-weight: 200;
}


.resellerListUsersPage__tableContainer {
    max-width: 600px;
}

.permissionBlock {
    padding: 0;
    margin: 0;
    display: inline-block;
}

    .permissionBlock > li {
        display: inline;
        margin: 3px;
    }

        .permissionBlock > li:first-child {
            margin-left: 0;
        }

        .permissionBlock > li:last-child {
            display: inline;
            margin-right: 0;
        }

.affiliate-content-row .switchContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .affiliate-content-row .switchContainer .switchButton {
        position: relative;
        display: inline-block;
        font-size: 1.3em;
        font-weight: 300;
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.10);
        border: 1px solid #322a3d30;
        background-color: #fcfcfc;
        transition-duration: 200ms;
        padding: 10px;
        padding-top: 12px;
        padding-bottom: 8px;
        cursor: pointer;
        margin: 0;
    }

.affiliate-content-row .flagContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .affiliate-content-row .flagContainer .flagSection {
        position: relative;
        display: inline-block;
        font-size: 1.3em;
        font-weight: 300;
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.10);
        border: 1px solid #322a3d30;
        background-color: #fcfcfc;
        transition-duration: 200ms;
        padding: 10px;
        margin: 0;
    }

.affiliate-content-row .sidebar-sub-items a {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    padding-top: 13px;
    padding-bottom: 11px;
}

    .affiliate-content-row .sidebar-sub-items a:hover {
        color: white;
    }

.affiliate-content-row .switchContainer .switchButton__text {
    cursor: default;
}


.affiliate-content-row .sidebar .panel-heading .title {
    font-size: 12px;
    color: black;
    font-weight: 400;
    text-transform: uppercase;
    vertical-align: middle;
}

.affiliate-content-row .switchContainer .switchButton:hover {
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.10);
}

.affiliate-content-row .switchContainer .switchButton__green {
    background-color: #5CDDAD;
    background: #1ad18e;
    color: white;
    font-weight: 500;
    box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.15);
}

.affiliate-content-row .switchContainer .switchButton__red {
    background-color: #ff718c;
    background: #ff718c;
    color: white;
    font-weight: 500;
    box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.15);
}

.affiliate-content-row .flagContainer .flagSection.flagSection--green {
    background-color: #5CDDAD;
    background: #1ad18e;
    color: white;
    font-weight: 500;
    box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.15);
}

.affiliate-content-row .flagContainer .flagSection.flagSection--red {
    background-color: #ff718c;
    background: #ff718c;
    color: white;
    font-weight: 500;
    box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.15);
}

.sizedTable-small {
    width: 300px;
    max-width: 99%;
}

.sizedTable--medium {
    width: 600px;
    max-width: 99%;
}

.sizedTable--full {
    width: 100%;
}

.reportEntry__name {
    width: 70%;
}

.reportEntry__nameText--highlighted {
    background-color: #1ad18e;
    color: white;
    padding: 10px;
    padding-top: 6px;
    padding-bottom: 4px;
    box-shadow: 0px 0px 5px 0px rgba(40,40,40,0.15);
}

.iconLink {
    margin-left: 2.5px;
    margin-right: 7.5px;
}

.addReport__container {
    display: inline-block;
}

.addReport__linkButton:hover {
    border: 0 !important;
    background-color: #1ad590;
    color: white !important;
}

.singleEntryPage__header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.singleEntryPage__title {
    font-size: 2.5em;
    font-weight: 200;
    margin: 0 10px 0 0;
}

.singleEntryPage__button-bar {
    display: flex;
    flex-direction: column;
}

.dataBox {
    border: 1px solid #ddd;
    border-radius: 3px;
}

.dataBox__heading {
    padding: 7px 10px;
    background-color: #e7e7e7;
    font-size: 18px;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #dcdcdc;
}

.dataBox__body {
    padding: 0 10px 5px 10px;
}

.dataBox__body--unpadded {
    padding: 0;
}

.dataBox__body--fullHeight {
    height: calc(100% - 56px);
}

.reportLineItem {
    margin-bottom: 5px;
}

.reportLineItem__number {
    display: inline-block;
    line-height: 29px;
    padding-top: 2px;
    color: white;
    background-color: #191223;
    width: 50px;
    text-align: center;
    margin-right: 10px;
    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%, 0% 0%);
}

.reportLineItem__name {
    display: inline-block;
}

.button.twoFactorAuthenticationPage__submitButton {
    margin-top: 26px;
}

.draggableListing {
    width: 49%;
    margin-bottom: 15px;
    counter-reset: field-counter;
}

.draggableListing__entries {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.draggableItem {
    cursor: move;
}

    .draggableItem * {
        pointer-events: none;
    }

    .draggableItem:hover .draggableItem__icon--left,
    .draggableItem:hover .draggableItem__icon--right {
        pointer-events: all;
    }

.draggableItem--hidden {
    display: none;
}

.draggableItem__endOfList {
    height: 100%;
}

.draggableItem:last-child {
    flex-grow: 1;
    min-height: 30px;
}

.draggableItem__realEntry, .draggableItem__fakeEntry {
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 2px 0 0;
    line-height: 30px;
    margin: 2.5px 5px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.05);
    /* Turning these into floating items prevents margin collapse for more consistent spacing */
    float: left;
    clear: left;
    width: calc(100% - 10px);
}

/* Fake entries are padded on both sides */
.draggableItem__fakeEntry {
    padding: 0 8px;
}

/* But real ones on one side only so the arrows go to the edge */
.draggableItem--left .draggableItem__realEntry {
    padding-left: 8px;
}

.draggableItem--right .draggableItem__realEntry {
    padding-right: 8px;
}

.draggableItem--right .draggableItem__text {
    counter-increment: field-counter;
}

.draggableItem--right div:not(.draggableItem__endOfList) .draggableItem__text::after {
    float: right;
    text-align: center;
    width: 30px;
    background-color: #ddd;
    margin-right: 0;
    content: counter(field-counter);
    line-height: 22px;
    padding-top: 2px;
    margin-top: 5px;
    display: block;
}

.draggableItem__text {
    display: block;
    float: left;
    width: calc(100% - 36px);
    line-height: 36px;
}

.draggableItem__fakeEntry {
    background-color: #d0d0d0;
}

    .draggableItem__fakeEntry .draggableItem__text {
        /* These rows have no icon on them so they have to be wider to
    put the column number in line with the rest
     */
        width: calc(100% - 4px);
    }

.draggableItem__icon--right {
    float: right;
    cursor: pointer;
    padding: 4px 10px 2px;
}

    /* Specifying icon colour elsewhere doesn't work reliably.  See https://github.com/FortAwesome/react-fontawesome/issues/179 */

    .draggableItem__icon--right path {
        color: #498FDE;
    }

.draggableItem__icon--left {
    float: left;
    padding: 4px 10px 2px;
    cursor: pointer;
}

    .draggableItem__icon--left path {
        color: #FD95A8;
    }

.draggableItem--right:hover .draggableItem__realEntry, .draggableItem--left:hover .draggableItem__realEntry {
    background-color: #eaeaea;
}

/* Once dragging begins, deactivate the tilt and colour-change effect to avoid weird look when dragging*/
.draggableListing--dragging:hover .draggableItem__realEntry {
    background-color: white;
    transition: all 0ms ease-in-out;
    transform: none;
}

.affiliate-content-row .currentIpHostContainer {
    margin: 30px 0;
}

.affiliate-content-row .currentIpHost {
    margin: 12px 0;
}

    .affiliate-content-row .currentIpHost .currentIpHost--label {
        font-weight: 700;
        padding: 0;
        font-size: 1.2em;
    }

    .affiliate-content-row .currentIpHost .currentIpHost--value {
        margin: 0 10px 0 5px;
        font-family: monospace;
        font-weight: 500;
        background-color: #282A37;
        padding: 5px;
        color: #F1FC84;
    }

    .affiliate-content-row .currentIpHost .currentIpHost--button {
        display: inline-block;
    }

.addToWhitelistTableRow {
    width: 100%;
}

.affiliate-content-row .addToWhitelistTableRow .textField .textField__helpContainer {
    min-height: 0;
}

.affiliate-content-row .addToWhitelistTableRow .textField input {
    font-family: monospace;
    font-weight: 500;
}

.affiliate-content-row .currentWhitelistTables {
    width: 100%;
}

.securityKeyDetails--buttons {
    text-align: center;
}

.affiliate-content-row code {
    font-family: monospace;
    background-color: transparent;
    padding: 0;
    font-size: 100%;
}

.options-navigation {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@keyframes head_tilt {
    0% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(7deg);
    }

    80% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

@keyframes head_tilt_back {
    from {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.popUpModal__overlay {
    z-index: 100;
    opacity: 0;
    transition: opacity 375ms;
    background-color: rgba(255,255,255,0.90);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.popUpModal {
    z-index: 101;
    background-color: rgb(255,255,255);
    margin: 40px auto;
    overflow: auto;
    outline: none;
    box-shadow: 0px 4px 14px rgba(0,0,0,0.20);
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    width: 600px;
}

    .popUpModal.ReactModal__Content--after-open {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        animation-duration: 375ms;
    }

.popUpModal__overlay.ReactModal__Overlay--after-open {
    opacity: 1;
}

.popUpModal__overlay.ReactModal__Overlay--before-close {
    opacity: 0;
}

.popUpModal.ReactModal__Content--before-close {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    animation-duration: 375ms;
}

.popUpModal.popUpModal--small {
    width: 440px;
}

.popUpModal.popUpModal--large {
    width: 90%;
}

.popUpModal .popUpModal__header {
    padding: 10px 15px;
    width: 100%;
    font-size: 1.6em;
    font-weight: 500;
}

    .popUpModal .popUpModal__header:after {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        margin-top: 5px;
        background: -webkit-linear-gradient(left, #000000 0%,#222222 7%,#ffffff 100%);
        background: linear-gradient(to right, #000000 0%,#222222 7%,#ffffff 100%);
    }

.popUpModal .popUpModal__body {
    padding: 5px 15px;
    font-size: 1.2em;
    font-weight: 300;
}

.popUpModal .popUpModal__footer {
    width: 100%;
    padding: 10px 15px 12px 15px;
}

    .popUpModal .popUpModal__footer button {
        margin: 0 5px;
    }

    .popUpModal .popUpModal__footer:before {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        margin-bottom: 12px;
    }

.megaButton {
    padding: 20px;
    margin: 4px 0;
    border: 1px solid rgba(0,0,0,0.40);
    box-shadow: 0 2px 4px 0 rgba(20,20,20,0.30);
    transition-duration: 200ms;
    display: block;
    color: black;
    background-color: #fafafa;
}

    .megaButton:hover {
        transform: translateY(-2px);
        cursor: pointer;
        box-shadow: 0 4px 8px 0 rgba(20,20,20,0.40);
        text-decoration: none;
    }

    .megaButton:active {
        opacity: 0.7;
    }

.megaButton__header {
    font-size: 25px;
    text-align: center;
    font-weight: 200;
}

.megaButton__icon {
    padding-right: 5px;
}

.megaButton__description {
    font-weight: 300;
    text-align: center;
    margin: 20px 0 0 0;
}


.maxWidthPage700 {
    width: 100%;
    max-width: 700px;
}

.maxWidthPage900 {
    width: 100%;
    max-width: 900px;
}

.maxWidthPage1200 {
    width: 100%;
    max-width: 1200px;
}

.costPlanAmountCell, .feeScheduleAmountCell {
    font-size: 18px;
    text-align: right;
}

.feeScheduleBillMeCell {
    text-align: center;
}

.feeScheduleDescriptionCell {
    width: 100%;
}

.linkedcells {
    border-collapse: separate;
    border-spacing: 20px;
}

    .linkedcells td {
        width: 33.33%;
        vertical-align: top;
    }

    .linkedcells .panel {
        padding: 10px;
    }

@media (max-width: 680px) {
    .linkedcells {
        width: 100%;
    }

        .linkedcells td {
            display: block;
            width: 100%;
        }
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background-color: #d3d3d3;
    outline: none;
    border-radius: 20px;
    border-bottom: 2px #c6c6c6 solid;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    transition-duration: .2s;
}

    input[type="range"]:hover {
        opacity: 0.9;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        background: #037bd7;
        cursor: pointer;
        border-radius: 20px;
        border: 0 solid #1e4c73;
        box-shadow: 0 2px 2px #969696;
    }

    input[type="range"]::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #037bd7;
        cursor: pointer;
        border-radius: 20px;
        box-shadow: 0 1px 1px #969696;
    }

/* Microsoft Edge */
@supports (-ms-ime-align:auto) and (color:unset) {
    input[type="range"] {
        border-radius: 0;
        height: 20px;
    }

        input[type="range"]::-ms-thumb {
            border-radius: 0;
        }
}

/* IE 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    input[type="range"] {
        padding: 0;
        border-radius: 0;
    }
}

.feeScheduleList td:nth-child(2) {
    width: 75px;
}

.feeScheduleList td:nth-child(3) {
    width: 115px;
}

.feeScheduleList__icon--red * {
    color: #f04c6a;
}

.feeScheduleList__icon--green * {
    color: #1ad18e;
}

.feeScheduleList__link.feeScheduleList__link--default {
    background-color: #1ad18e;
    background: #1ad18e;
    padding: 5px 10px;
    color: white;
}

.feeScheduleList__inUseRow.feeScheduleList__inUseRow-account {
    font-style: italic;
    margin-left: 5px;
}

.assignFeeScheduleCostPlanTable__merchantRow td:nth-child(1) {
    width: 64px;
}

.assignFeeScheduleCostPlanTable__merchantRow td:nth-child(3) {
    width: 60%;
}

.assignFeeScheduleCostPlanTable__merchantRow td {
    padding: 0 8px;
}

.assignFeeScheduleCostPlanTable__selectAllRow th:first-child {
    padding-left: 22px;
}

.assignFeeScheduleCostPlanTable__selectAllRow th:nth-child(2) {
    padding: 8px 8px 4px 8px;
}

.addEditFeeScheduleEntry__description {
    width: 100%;
}

.addEditFeeScheduleEntry__input {
    min-width: 125px;
}

.addEditFeeScheduleEntry__cost {
    font-size: 18px;
    text-align: right;
}

.addEditFeeScheduleEntry__billMe {
    width: 75px;
}

.addEditFeeScheduleEntry__highlight-green {
    background-color: #D7F4EA;
}

.addFeeScheduleForm__input {
    margin: 10px 0;
}

.allowOverflow {
    overflow: auto;
}

.fullWidthRow {
    margin-left: -15px;
    margin-right: -15px;
}

.deviceDetail {
    display: flex;
    justify-content: space-around;
}

.deviceDetail__overview > ul, .deviceDetail__processorSupport > ul {
    padding-left: 20px;
}

.deviceDetail__overview > ul {
    list-style: none;
}

    .deviceDetail__overview > ul span {
        display: list-item;
    }

        .deviceDetail__overview > ul span * {
            display: inline;
        }

        .deviceDetail__overview > ul span li {
            margin-left: 8px;
        }

.deviceDetail__overviewEntry svg path {
    color: #44FC74;
}


.orderDevices__navLink svg * {
    color: white;
}

.orderDevices__navLinkIconContainer {
    margin-right: 10px;
}

.orderDevices__navLink {
    float: right;
}

    .orderDevices__navLink.button {
        position: relative;
        top: -5px;
    }

.cartPage__noDevices {
    margin: 40px auto;
    max-width: 600px;
}

.cartPage__submitButtonContainer {
    text-align: right;
}

.cartPage__row {
    margin: 0 -15px;
}

.cartPage__shippingEntity, .cartPage__billingEntity {
    margin: 0 auto;
    max-width: 290px;
}

.cartPage__notChargedText {
    text-align: center;
}

.affiliate-content-row .cartListEntry td {
    font-size: 1.5em;
    border: none;
}

.cartListEntry td:nth-child(1) img {
    width: 60px;
}

.cartListEntry td:nth-child(1) {
    width: calc(60px + 10px + 10px);
    padding: 10px;
}

.cartListEntry__field {
    font-size: .7em;
}

.cartListEntry__field--quantity {
    width: 80px;
}

.cartListEntry__quantity {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cartListEntry__removeButton {
    margin-left: 10px;
    cursor: pointer;
}

    .cartListEntry__removeButton svg * {
        color: #ff718c;
    }

.cartListEntry__footerLabel {
    text-align: right;
}

.affiliate-content-row .cartListEntry td.cartListEntry__tax {
    text-align: right;
    font-size: 1em;
}

.cartListEntry__price {
    text-align: right;
}

.radioButton {
    font-size: 12px;
}

.radioGroupField__label {
    font-size: 10px;
}

.radioButton input {
    margin: 0;
    visibility: hidden;
}

.radioButton label {
    margin: 0;
}

.radioButton__selectedIcon svg * {
    color: #1ad18e;
}

.radioGroupField__errorContainer {
    height: 17px;
}

.qrPlaceholder {
    width: 128px;
    margin-right: 0;
    margin-left: auto;
}

#floatlayer_cover {
    box-shadow: 0px 3px 4px 0px #bbbbbb;
}

.agreementPage__buttonContainer {
    margin: 15px 0px;
}

.agreementPage__arrowIcon {
    color: #ffffff;
    padding-left: 6px;
}

.title__container {
    position: relative;
}

.title__buttons {
    position: absolute;
    top: 13px;
    right: 0;
}

.title__container {
    position: relative;
}

.title__buttons {
    position: absolute;
    top: 13px;
    right: 0;
}


/* Realign icons used in input field trim */
.input-group-addon i {
    margin-top: -2px;
}

/* !important to override the !important declaration on this selector in common.css */
.modern-level3table .table-header td {
    padding-top: 2px !important;
}

.verification-option div {
    margin-top: 3px;
}

.smallerTable thead th {
    font-size: 14px;
    padding: 4px;
}

.commissionEntry:nth-child(2n) td {
    background-color: #f7f7f7;
}

.affiliate-content-row td.commissionEntry__value {
    font-size: 12px;
    padding: 4px;
}

.commissionEntry__value i {
    color: #4f4f4f;
}

.commissionEntry__value--large {
    font-size: 20px;
}

.extraMargin {
    margin-top: 10px;
    margin-bottom: 20px;
}

h1.totalCommission {
    text-align: center;
    font-size: 35px;
    font-weight: 200;
}

    h1.totalCommission b {
        white-space: nowrap;
        font-weight: 600;
    }

b.explanation {
    display: block;
    text-align: center;
    color: #f04c6a;
}

.scrollableContainer {
    max-width: 100%;
    overflow-x: auto;
}

.downloadButtons {
    text-align: center;
}

    .downloadButtons button {
        margin: 20px 2px;
    }

.affiliate-content-row .button--excelDownload {
    background-image: none;
    background-color: #217043;
}

.affiliate-content-row .button--csvDownload {
    background-image: none;
    background-color: #2866BD;
}

.affiliate-content-row button.button--excelDownload * {
    color: white;
}

.affiliate-content-row button.button--csvDownload * {
    color: white;
}

.buttonGroup {
    margin: 15px 0;
}

.affiliate-content-row .buttonGroup button {
    margin-right: 10px;
}

.themePreview .themePreview__menubar {
    width: 300px;
    ;
    height: 15px;
    display: flex;
    align-items: center;
}

.themePreview .themePreview__imageSpacer {
    width: 70px;
}

.themePreview .themePreview__image1 {
    height: 15px;
    display: block;
}

.themePreview .themePreview__image2 {
    height: 15px;
    display: block;
}


.themePreview {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}

    .themePreview .themePreview__icon {
        margin: 5px 5px 0px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .themePreview .themePreview__highlight {
        background-color: #ffffff;
        height: 45%;
        width: 45%;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.themePreview__icon.themepreview__icon--grey1 {
    background-color: #474747;
    width: 122px;
    height: 122px;
}

.themePreview__icon.themepreview__icon--primary1 {
    width: 122px;
    height: 122px;
}

.themePreview__icon.themepreview__icon--primary2 {
    width: 80px;
    height: 80px;
}

.themePreview__icon.themepreview__icon--comp2_2 {
    width: 80px;
    height: 80px;
}

.themePreview__icon.themepreview__icon--grey2 {
    background-color: #474747;
    width: 80px;
    height: 80px;
}

.themePreview__icon.themepreview__icon--grey3 {
    background-color: #474747;
    width: 122px;
    height: 122px;
}

.themePreview__icon.themepreview__icon--comp1_1 {
    width: 122px;
    height: 122px;
}

.amount.amount--negative {
    color: #FF0000;
}

.colorPicker {
    display: inline;
    position: relative;
}

.colorPicker__button {
    vertical-align: middle;
    margin: 10px 0;
    margin-right: 5px;
    padding: 2px;
}

.colorPicker__preview {
    width: 100px;
    height: 30px;
    border: 1px solid #777777;
}

.colorPicker__flyout {
    position: absolute;
    z-index: 99999;
}

.colorPicker__entry, .affiliate-content-row .colorPicker__entry {
    vertical-align: middle;
    font-size: 16px;
    width: 80px;
    font-family: monospace;
}

.scaledToFit {
    max-width: 100%;
}

.dropZone {
    border: 1px dashed #000000;
    border-radius: 0px;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 16px;
    font-weight: 300;
    min-height: 88px;
    transition-duration: 200ms;
}

    .dropZone p {
        margin-bottom: 0;
    }

.dropZone--error {
    border: 1px dashed #e42f56;
    background-color: #F9B6C4;
    transition-duration: 200ms;
}

.row.row--verticalCenter {
    display: flex;
    align-items: center;
}

.row.row--extraMargin {
    margin-bottom: 10px;
}

.text-right {
    text-align: right;
}

.receiptPage table {
    margin: 10px 0 0 0;
}

.receiptPage h2 {
    padding: 0 0 6px 0;
}

.receiptPage__buttonBar {
    float: right; /* This is supposed to make the buttons appear over the "Order Receipt" header. */
    margin-right: -2px; /* Counter balence for the button's margin-right of 2px */
}

.receiptPage__iconContainer {
    margin-right: 10px;
}

.receiptPage__row {
    margin: 0 -5px;
}

.receiptPage__column {
    padding: 0 5px;
}

.receiptPage__spacer {
    height: 5px;
}

.orderConfirmationTable__description {
    width: 180px;
}

.orderConfirmationTable__description {
    font-size: 15px;
    font-weight: 600;
}

.receiptShippingInformation__description,
.receiptBillingInformation__description {
    font-size: 15px;
}

.orderConfirmationTable__data {
    font-size: 15px;
}

.productManagerAddEditForm__imageThumbnail {
    max-width: 75px;
    max-height: 75px;
    float: left;
}

    .productManagerAddEditForm__imageThumbnail img {
        width: 100%;
    }

.productManagerAddEditForm__imageDelete {
    float: left;
    margin-left: 8px;
}

    .productManagerAddEditForm__imageDelete i {
        padding-top: 23px;
        color: #FB3D67;
    }

.receiptProductInformation__totalDescription {
    text-align: right;
    font-weight: 600;
}

.receiptProductInformation__amount {
    text-align: right;
}

.receiptOrderConfirmation table tr,
.receiptProductInformation table tr:not(.receiptProductInformation__subHeaderRow) {
    border-bottom: none;
}

.receiptOrderConfirmation table td,
.receiptProductInformation table td {
    border-right: none;
}

.receiptOrderConfirmation table td {
    padding: 0 8px 0 8px;
}

.receiptProductInformation table td {
    font-size: 16px;
    padding: 2px 8px 2px 8px;
}

.orderHistoryPage__excelDownloadContainer {
    min-width: 280px;
}


.orderHistoryPage__excelIconSpacer {
    margin-right: 10px;
}

.orderHistoryPage__header {
    margin: auto -15px;
}

.orderHistoryPage__excelSpacer {
    height: 14px;
}

.orderHistoryPage__excelDownloadContainer .orderHistoryPage__excelDownload.button {
    width: 100%;
    margin: 0;
}

.orderHistoryPage__legend {
    margin-top: 25px;
    caption-side: bottom;
}

    .orderHistoryPage__legend > ul {
        padding: 0;
    }

.orderHistoryPage__legendRow {
    display: flex;
    align-items: center;
    margin: 6px auto;
}

.orderHistoryPage__legendLabel {
    min-width: 150px;
    width: 150px;
    text-align: center;
    padding: 7px;
    border: 1px solid #c5c5c5;
    font-weight: 700;
    margin-right: 10px;
    font-size: 16px;
}

.orderHistoryPage__legendDescription > p {
    padding: 0;
    margin: 0;
}

.orderHistoryPage__label--green {
    background-color: #1ad18e;
    color: white;
}

.orderHistoryPage__label--red {
    background-color: #FB3D67;
    color: white;
}

.orderHistoryPage__label--blue {
    background-color: #278DE7;
    color: white;
}

.orderHistoryPage__label--yellow {
    background-color: #F4F04C;
}

.orderHistoryPage__label--white {
    background-color: #ffffff;
}

.orderHistoryPage__ordersTable thead,
.orderHistoryPage__ordersTable tbody {
    width: 100%;
}

.orderHistoryPage__ordersTable.orderHistoryPage__ordersTable--loading {
    position: relative;
}

    .orderHistoryPage__ordersTable.orderHistoryPage__ordersTable--loading:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.7);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50px 50px;
        content: "";
    }

.orderHistoryPage__noOrdersRow {
    height: 70px;
    text-align: center;
    font-weight: bold;
}

.popper {
    background-color: #fff;
    max-width: 250px;
    border-radius: 2px;
    border: 1px solid #b0b0b0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
    z-index: 500;
}

    .popper .popper__header {
        border-bottom: 1px solid #333;
        padding: 7px 5px;
        margin: 0;
    }

    .popper .popper__body {
        padding: 5px;
        white-space: normal;
    }

    .popper .popper__arrow {
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: 5px;
    }

    .popper[data-placement^="top"] {
        margin-bottom: 5px;
    }

        .popper[data-placement^="top"] .popper__arrow {
            border-width: 5px 5px 0 5px;
            border-color: #fff transparent transparent transparent;
            bottom: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }

    .popper[data-placement^="bottom"] {
        margin-top: 5px;
    }

        .popper[data-placement^="bottom"] .popper__arrow {
            border-width: 0 5px 5px 5px;
            border-color: transparent transparent #fff transparent;
            top: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }

    .popper[data-placement^="right"] {
        margin-left: 5px;
    }

        .popper[data-placement^="right"] .popper__arrow {
            border-width: 5px 5px 5px 0;
            border-color: transparent #fff transparent transparent;
            left: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }

    .popper[data-placement^="left"] {
        margin-right: 5px;
    }

        .popper[data-placement^="left"] .popper__arrow {
            border-width: 5px 0 5px 5px;
            border-color: transparent transparent transparent #fff;
            right: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }

    .popper[data-x-out-of-boundaries] {
        display: none;
    }

.actions {
    box-shadow: 0px 3px 9px 0px rgba(80,80,80,0.10);
    margin-bottom: 15px;
}

    .actions h4 {
        text-align: center;
        font-size: 19px;
        font-weight: 300;
        font-family: "Public Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    }

    .actions .actions__links {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

        .actions .actions__links a {
            display: inline-block;
            color: black;
            text-align: center;
            flex-grow: 1;
            min-width: 100px;
            white-space: nowrap;
            padding: 15px 0;
            font-size: 15px;
            font-family: "Public Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        }

            .actions .actions__links a:focus, .actions .actions__links a:hover {
                text-decoration: none;
            }

            .actions .actions__links a:hover {
                background-color: #f5f5f5;
            }

            .actions .actions__links a i {
                display: block;
                font-size: 32px;
                padding-bottom: 23px;
                margin-left: auto;
                margin-right: auto;
            }

                /* The actual FontAwesome glyph */
                .actions .actions__links a i::before {
                    border-bottom: 1px solid black;
                    padding: 10px 5px;
                }

    .actions .actions__title1,
    .actions .actions__title2,
    .actions .actions__title3 {
        height: 6px;
    }

    .actions .actions__title1 {
        background-color: #929292;
    }

    .actions .actions__title2 {
        background-color: #808080;
    }

    .actions .actions__title3 {
        background-color: #717171
    }

.security-key-source-description-container {
    margin-bottom: 5px;
}

.security-key-source-description-header {
    font-weight: bolder;
}

/* CSS Exclusive to Merchant Control Panel Home Page */
#merchant-home .searchbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
    margin-bottom: 1px;
}

#merchant-home .search {
    display: flex;
}


#merchant-home .lastTransaction {
    display: flex;
    align-items: center;
    box-shadow: 0px 3px 9px 0px rgba(80,80,80,0.10);
    padding: 4px 12px;
    border: 1px solid #E8E8E8;
    font-size: 16px;
    justify-content: space-between;
    margin-top: 7px;
    margin-bottom: 2px;
}

#merchant-home .lastTransaction__container {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    max-width: 200px;
}

#merchant-home .lastTransaction__name {
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 991px) {
    #merchant-home .search, #merchant-home .lastTransaction {
        flex-basis: 100%;
    }

    #merchant-home .searchbar {
        flex-wrap: wrap;
        padding: 0 10px;
    }

    #merchant-home #search-popover-icon {
        float: right;
    }

    #merchant-home #merchant-search-box {
        display: inline-block;
        width: calc(100% - 70px);
    }

    #merchant-home .lastTransaction {
        flex-direction: column;
        max-width: 100%;
    }

    #merchant-home .lastTransaction__link, #merchant-home .lastTransaction__title {
        text-align: center;
    }

    #merchant-home .lastTransaction__name {
        text-align: center;
        font-size: 20px;
    }

    #merchant-home .lastTransaction__container {
        margin-left: 0;
        max-width: 100%;
    }
}

#merchant-home .search .input-group,
#merchant-home .search .btn {
    box-shadow: none;
    padding: 0;
}

#merchant-home #header_transaction_id_quick_search, #merchant-home #header_transaction_id_search_button > button {
    height: 36px;
    padding: 5px 12px 8px 12px;
    margin-top: 11px;
}

#merchant-home .dashboardDisplay {
    border: 1px solid #E8E8E8;
    background-color: white;
    position: relative;
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    width: 200px;
    min-height: 112px;
    padding: 14px 5px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
    margin-bottom: 16px;
    margin-right: 6px;
}

    #merchant-home .dashboardDisplay .dashboardDisplay__title {
        font-size: 19px;
        font-weight: 300;
    }

    #merchant-home .dashboardDisplay .dashboardDisplay__text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #merchant-home .dashboardDisplay .dashboardDisplay__link {
        font-size: 15px;
        font-weight: 300;
        font-style: italic;
        text-decoration: none;
        display: block;
    }

.dashboardDisplay .dashboardDisplay__link--red {
    color: red;
}

#merchant-home #header_transaction_id_quick_search {
    font-size: 20px;
}

#merchant-home #header_transaction_id_search_button > button {
    border-left: 0;
}

#merchant-home #header_transaction_id_quick_search::-webkit-input-placeholder,
#merchant-home #header_transaction_id_quick_search::-moz-placeholder,
#merchant-home #header_transaction_id_quick_search:-ms-input-placeholder,
#merchant-home #header_transaction_id_quick_search:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
}

#merchant-home #search-popover-icon {
    display: inline-block;
    font-size: 20px;
    margin: 15px 6px 0 6px;
}

#merchant-home #dashboard__editButton {
    font-weight: normal;
}

@media screen and (min-width: 992px) {
    #merchant-home #header_transaction_id_quick_search {
        width: 289px;
    }

    #merchant-home #header_transaction_id_search_button {
        display: inline-block;
    }

    #merchant-home #dashboard__editButton {
        margin-top: -36px;
    }
}

#merchant-home #dashboard {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#merchant-home .dashboardDisplay .dashboardDisplay__title {
    margin-top: 0;
}

#merchant-home .dashboardDisplay.dashboardDisplay--dropzone {
    box-shadow: none;
    flex-shrink: true;
    flex-grow: 200;
    border: 0;
    background-color: transparent;
    display: none;
}

#merchant-home .dashboardDisplay.dashboardDisplay__hidden {
    display: none;
}

#merchant-home .dashboardDisplay .dashboardDisplay__controls {
    position: absolute;
    vertical-align: top;
    font-size: 14px;
    right: 5px;
    top: 5px;
    display: none;
}

#merchant-home #dashboard__editor {
    opacity: 0;
}

#merchant-home #dashboard__editButton {
    float: right;
}

#merchant-home #dashboard .dashboardDisplay.dashboardDisplay--dropPossible {
    border: 1px dashed #808080;
}

#merchant-home #dashboard__editor:checked ~ #dashboard .dashboardDisplay__controls {
    display: block;
}

#merchant-home #dashboard__editor:checked ~ #dashboard .dashboardDisplay.dashboardDisplay--dropzone {
    display: block;
}

#merchant-home #dashboard__editor:checked ~ #dashboard .dashboardDisplay[draggable] {
    cursor: move;
}

#merchant-home #dashboard__editor:checked ~ #dashboard .dashboardDisplay.dashboardDisplay__hidden {
    display: inline-block;
    opacity: 0.5;
}

#merchant-home #dashboard__status {
    display: none;
}

#merchant-home .dashboardControl {
    display: none;
}

    #merchant-home .dashboardControl a {
        float: right;
        text-decoration: none;
        cursor: pointer;
    }

@media (max-width: 500px) {

    #dashboard {
        justify-content: space-between;
    }

    #merchant-home .dashboardDisplay {
        width: 49%;
        min-height: 44px;
        padding: 7px 0;
        font-size: 23px;
        margin-right: 0px;
    }

    #merchant-home #dashboard.dashboard--hidden {
        display: none;
    }

    #merchant-home .dashboardDisplay .dashboardDisplay__title {
        font-size: 13px;
        margin-bottom: 0;
    }

    #merchant-home .dashboardDisplay {
        font-size: 18px;
    }

        #merchant-home .dashboardDisplay .dashboardDisplay__link {
            font-size: 12px;
        }

    .content-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #dashboard__editButton, #dashboard__editor {
        display: none;
    }

    #merchant-home .dashboardControl {
        display: block;
    }
}

.transactionSearchForm .button {
    margin-left: -2px;
}

.one-time-notification-popup-container .tid, .one-time-notification-popup-container .dismissed, .one-time-notification-popup-container .accepted {
    display: none;
}

.otnId {
    display: none;
}

.addServicesPage table th:first-child {
    width: 100%;
}

.addServicesPage .fontAwesomeCheckbox {
    margin: 0;
}

.device-nav-tabs .nav > li > a {
    /* position: relative; */
    display: block;
    padding: 10px 10px;
}

.cloud_registration_help_text {
    background-color: #eeeeee;
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break: keep-all;
}

.wrapEnforced {
    /* See https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ for explanation */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.transaction-reporting-today-header-button {
    margin-top: -10px;
}

.transaction-reporting-sort-buttons {
    display: flex;
    flex-direction: row;
}

    .transaction-reporting-sort-buttons div {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 20px;
    }

        .transaction-reporting-sort-buttons div.radio {
            margin-top: 0;
        }

.report-sort-and-range-info {
    color: #515151;
}

.otnSubmit {
    display: inline;
}

.cloud-vt-hide {
    display: none;
}
/** Make sure inputs are visible while editing config for ui */
.ui-edit-mode .cloud-vt-hide {
    display: block;
}

.otnSubmit {
    display: inline;
}

#cancel_vt_cloud_notice {
    visibility: hidden;
    margin-top: 10px;
}

    #cancel_vt_cloud_notice > p {
        display: inline-block;
        background: #eff0f2;
    }

.marketplace-app-store-link {
    border-bottom: 1px solid #7f7f7f;
}

#app-store-icon {
    color: #0BD992;
    padding-right: 20px;
}

.counterPill {
    border-radius: 18px;
    display: inline-block;
    margin-left: 3px;
    border: 1px solid #cdd4da;
    padding: 5px 10px;
    font-size: 9px;
    background-color: #ffffff;
}

a:hover .counterPill {
    background-color: #3c4041;
}

i.fa-cash-register {
    color: #0B9764;
}

i.fa-star {
    color: #FCDD55;
}

.history-popout {
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #5a5a5a;
    color: white;
    position: absolute;
    z-index: 202020;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
    margin-top: 20px;
    transition: opacity 0.5s;
}

.history-popout-angle {
    margin-top: -30px;
    height: 0px;
    width: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    margin-left: 20px;
    border-bottom: 20px solid #5a5a5a;
    position: absolute;
}

.history-popout.history-popout-shown {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;
}

.history-popout.history-popout-hiding {
    opacity: 0;
    visibility: visible;
    transition: opacity 0.5s;
}


.key-history:hover {
    cursor: pointer;
}

.card {
    border-radius: 3px;
    padding: 4px 8px;
    white-space: nowrap;
    color: #000000;
    background-color: #32165d;
    font-weight: 600;
}

    .card.card-small {
        border-radius: 10px;
        padding: 0 10px;
        font-size: 12px;
    }

    .card.card-micro {
        border-radius: 10px;
        padding: 1px 5px;
        font-size: 10px;
    }

    .card.card-blue {
        background-color: #136BE7;
        color: #FFFFFF;
    }

    .card.card-red {
        background-color: #FFACC0;
    }

    .card.card-green {
        background-color: #8AE0C3;
    }

    .card.card-dark {
        background-color: #090A0C;
        color: #FFFFFF;
    }

    .card.card-yellow {
        background-color: #FEFDBB;
    }

    .card.card-orange {
        background-color: #FFE5B8;
    }