:root {
    --black: #000000;
    --white: #FFFFFF;
    --offwhite: #F5F5F5;
    --home: #1b1b1d;
    --logo: #222222;
    --shade1: #21262B;
    --shade2: #292929;
    --shade3: #444444;
    --shade4: #676767;
    --shade5: #cccccc;
    --shade6: #e0e0e0;
    --bb_orange: #ef5e17;
    --bb_teal: #2ed9c3;
    --red: #A50000;
    --blue: #1DA1F2;
    --link: #3c3cfa;
    --purple: #7339aa;
    --pink: #ffaaaa;
    --yellow: #ffffb0;
    --tan: #fcddaa;
    --green: #bbf3bb;
    --money: #008000;
}

body {
    font-family: 'Lora', serif;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
}

#scrollBar {
    overflow-y: hidden;
}

#mainBackground {
    background-color: var(--home);
}

.alternateBackground {
    background-color: var(--logo);
}

.wrap {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 0 5rem;
}

.mobileView {
    display: none;
}


/***** LOGIN *****/

#topLogoContainer {
    position: relative;
    height: 50vh;
    width: 100vw;
}

#topLogo {
    z-index: 1;
    position: absolute;
    top: 0%;
    right: 0%;
    height: 105%;
    width: auto;
}

#centerLogoContainer {
    z-index: 2;
    position: fixed;
    background-color: var(--white);
    top: 50%;
    left: 50%;
    height: 35rem;
    width: 25rem;
    transform: translate(-50%, -50%);
    padding: 1rem 0;
    border: 0.25rem solid var(--logo);
    border-radius: 2rem;
}

#login {
    max-width: 20rem;
}

#loginLogo {
    height: auto;
    width: 3rem;
    margin: 0.5rem 0;
}

#loginHeader {
    margin: 0.5rem 0;
}

#OKTAloginButton {
    background-color: var(--bb_teal);
    color: var(--black);
    margin: 0.5rem 0;
}

#loginEmail,
#loginPassword {
    margin: 0.25rem 0;
}

#loginWarning {
    visibility: hidden;
    color: var(--red);
    padding: 0.75rem 0 0;
}

#loginButton {
    max-width: 9rem;
    margin: 0 0 0.5rem;
}

#forgotPassword {
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

#passwordLink {
    text-decoration: none;
}

#bottomLogoContainer {
    position: relative;
    height: 50vh;
    width: 100vw;
}

#bottomLogo {
    z-index: 1;
    position: absolute;
    left: 0%;
    bottom: 0%;
    height: 105%;
    width: auto;
}

#forgotEmail {
    margin: 2rem 0 3rem;
}

#resetWarning {
    display: none;
    color: var(--red);
    padding: 0.5rem 0 0;
}

#resetSuccess {
    display: none;
    color: var(--link);
    padding: 0.5rem 0 0;
}

#inactivityContainer {
    z-index: 2;
    position: fixed;
    background-color: var(--logo);
    top: 50%;
    left: 50%;
    height: 35rem;
    width: 25rem;
    transform: translate(-50%, -50%);
    padding: 1rem 0;
    border: 0.25rem solid var(--logo);
    border-radius: 2rem;
}

#inactivityLogo {
    height: 3.25rem;
    width: auto;
    margin: 0.5rem 0;
}

#inactivityHeader {
    color: var(--white);
    margin: 1rem 0;
}

#inactivityText {
    /* font-size: 1.35rem; */
    line-height: 1.5;
    color: var(--white);
    margin: 2.5rem 0;
}

#inactivityButton {
    max-width: 9rem;
    margin: 1rem 0 1rem;
}


/***** UNIVERSAL HEADER *****/

#header {
    font-family: 'Poppins', sans-serif;
    background-color: var(--black);
    color: var(--white);
    padding: 0.8rem 0;
}

#menu {
    font-size: 1.5rem;
}

#menuHeader {
    background-color: var(--shade6);
    height: 5rem;
    justify-content: start;
}

#menuLogo {
    height: auto;
    width: 14rem;
}

#menuSales {
    color: var(--logo);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.4rem;
    padding: 0.5rem;
    margin: 0;
}

#menuItem:hover {
    color: var(--bb_teal);
    font-weight: bold;
}

.currentPage {
    color: var(--bb_orange);
}

.iconDivider {
    width: 2.75rem;
    padding: 0 0.25rem;
}

#menuCategory {
    font-weight: bold;
}

#menuFooter {
    background-color: var(--shade6);
    max-height: 3.75rem;
    padding: 0.75rem 1rem;
    overflow-y: hidden;
}

#menuLogOut {
    color: var(--logo);
    padding: 0;
}

#menuLogOut:hover {
    color: var(--red);
    font-weight: bold;
}

#title {
    font-size: 2rem;
    letter-spacing: 0.25rem;
}

#logo {
    max-width: 33rem;
}

#logoFile {
    height: auto;
    width: 33rem;
}

#menuPlaceholder {
    width: 1.875rem;
}


/***** HOME *****/

#welcomeBar {
    margin: 2.5rem 0 0;
}

#welcome {
    color: var(--white);
    font-size: 2.25rem;
    margin: 0;
}

#contents {
    padding: 1rem 0;
}

.homeCard {
    background-color: var(--offwhite);
    color: var(--shade3);
    text-decoration: none;
    height: 12rem;
    max-width: 100%;
    width: 24rem;
    margin: 0;
}

.homeCardTitle {
    font-size: 1.75rem;
    padding: .75rem;
    opacity: 80%;
}

.homeCardIcon {
    height: 7rem;
    width: 7rem;
    padding: .75rem;
    opacity: 50%;
}

.homeCard:hover {
    background-color: var(--bb_teal);
    color: var(--shade2);
    box-shadow: inset 0 0 .15rem var(--shade6), 0 0 .5rem var(--shade6);
    transition: 0.5s ease-out;
}

.homeCard:hover .homeCardTitle {
    opacity: 90%;
    font-weight: bold;
}

.homeCard:hover .homeCardIcon {
    opacity: 90%;
}

#homeLabel {
    color: var(--white);
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
}


/***** PROFILE/PASSWORD *****/

#profile {
    color: var(--white);
    font-size: 1.2rem;
}

#profileTable tr,
#profileTable td {
    min-width: 30rem;
    padding: 0.5rem;
    border-top: 0.1rem solid white;
    border-bottom: 0.1rem solid white;
}

.profileLabel {
    text-align: right;
}

#passwordEditButton,
#passwordForgotButton {
    width: 9rem;
    margin: 1.5rem;
}

.viewPassword {
    padding: 0 0.5rem;
    cursor: pointer;
}

.passwordError,
.passwordSuccess {
    display: none;
    color: var(--white);
    text-align: center;
    padding: 0.5rem 0;
}

.passwordNotice {
    font-weight: bold;
}


/***** CHANGELOG *****/

#changelogNotice {
    color: var(--white);
    font-style: italic;
    text-align: center;
}

#changelogLink {
    color: var(--blue);
    font-weight: bold;
}

#cacheTable {
    color: var(--white);
}

#cacheTableFirstRow {
    border-bottom: 0.1rem solid white;
}

#cacheTable tr,
#cacheTable td {
    padding: 0.5rem;
}

.cacheLabel {
    min-width: 8rem;
    text-align: right;
    font-weight: bold;
}

.cacheText {
    min-width: 46rem;
}

.cacheInstructions {
    font-weight: bold;
    font-style: italic;
}

.accordionTitle {
    color: var(--black);
}

.changelogAccordionButton:focus {
    box-shadow: none;
    border-color: transparent;
}

.changelogVersionNumber {
    padding: 0 1rem;
}


/***** VISUALIZER *****/

/* VISUALIZER FORM SELECTION */

#navigation {
    background-color: var(--shade3);
    color: var(--white);
    padding: 0.75rem 0;
}

.selectionBox {
    padding: 0;
    margin: 0 1.2rem;
}

.dropdown {
    background: var(--shade1);
    color: var(--white);
    text-align: center;
    width: 11rem;
    padding: 0.5rem 0;
    border: 0.125rem solid var(--shade1);
}

.dropdown:focus {
    border-color: inherit;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dropdown:hover {
    cursor: pointer;
}

.dropdown option {
    background: var(--offwhite);
    color: var(--black);
}

.dropdownHeader {
    font-weight: bold;
}

.dropdownAll {
    font-style: italic;
}

#representativeBox,
#companyBox,
#categoryBox,
#groupBox {
    text-align-last: center;
}

#monthButton,
#monthYearButton,
#monthPayoutButton,
#monthSummaryButton {
    background: var(--shade1);
    color: var(--white);
    caret-color: transparent;
    text-align: center;
    width: 11rem;
    padding: 0.5rem 0;
    border: 0.125rem solid var(--shade1);
}

#monthButton::placeholder,
#monthYearButton::placeholder,
#monthPayoutButton::placeholder,
#monthSummaryButton::placeholder {
    color: var(--white);
    opacity: 1;
}

#monthButton:focus,
#monthYearButton:focus,
#monthPayoutButton:focus,
#monthSummaryButton:focus {
    border-color: inherit;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#visualizerBox,
#monthBox,
#visualizerButton,
#capsButton,
#approvalButton,
#payoutButton,
#summaryButton {
    width: 11rem;
    border: 0;
}

/* VISUALIZER CONTENTS */

#searchBar {
    display: none;
    position: sticky;
    z-index: 3;
    top: 0.5rem;
    padding: 0.25rem 0;
    width: 20%;
}

#searchForm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.15rem solid var(--black);
    border-radius: 0.25rem;
    background-color: var(--white);
}

#searchFormInput {
    border: none;
    margin: 0.2rem;
}

#searchFormUpButton,
#searchFormDownButton {
    height: 1.75rem;
    width: 1.75rem;
    z-index: 5;
    border: none;
    border-radius: 0.25rem;
    margin: 0.2rem;
    padding: 0;
    color: var(--shade1);
    background-color: var(--shade6);
}

input#searchFormInput:focus {
    outline: none;
}

#searchFormUpButton:focus,
#searchFormDownButton:focus {
    outline: none;
    color: var(--offwhite);
    background-color: var(--shade2);
}

#searchForm:focus-within {
    border: 0.2rem solid var(--link);
}

#overview {
    padding: 0.75rem 0;
}

#overviewTitle {
    visibility: hidden;
    font-size: 1.6rem;
    font-weight: bold;
}

.visualizerInfo {
    padding: 0;
}

#infoR {
    font-size: 1.15rem;
    text-decoration-line: underline;
}

#infoC {
    font-size: 1rem;
    font-style: italic;
}

.submissionIndicator {
    color: var(--blue);
    vertical-align: top;
    padding: 0 0.5rem;
}

.appendRow {
    float: right;
    cursor: pointer;
}

.visualizerAppendButton,
.visualizerPrintButton,
.payoutPrintButton,
.summaryPrintButton {
    color: var(--link);
    background-color: transparent;
    border-width: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
}

.tableHeader {
    background-color: var(--shade5);
}

#headerSortAsc {
    color: var(--link);
}

#headerSortDesc {
    color: var(--purple);
}

.customerNumber:hover,
.companyName:hover,
.item:hover,
.orderNumber:hover,
.termNumber:hover,
.numberRenewal:hover,
.paidDate:hover,
.quantity:hover,
.nbUnit:hover,
.amount:hover,
.afterCap:hover {
    cursor: pointer;
    color: var(--link);
}

.customerNumberDetail:hover {
    cursor: pointer;
    font-weight: bold;
    color: var(--link);
}

.tableValues tr:nth-child(even) {
    background-color: var(--shade6);
}

.confidentZero {
    background-color: var(--tan) !important;
}

.visualizerNoteButton {
    color: var(--link);
}

.disabledNoteButton {
    color: var(--shade4);
}

.commissionNote {
    display: none;
    position: fixed;
    z-index: 9;
    background-color: var(--offwhite);
    top: 0;
    right: 0;
    height: 21rem;
    width: 32.25rem;
    padding: 1rem;
    border: 0.125rem solid var(--shade2);
    border-radius: 0.625rem;
}

.commissionNote textarea {
    background: var(--white);
    color: var(--black);
    height: 70%;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.625rem;
    resize: none;
}

.commissionNote textarea:focus {
    outline: none;
}

.noteHeader {
    font-weight: bold;
}

.noteContainer {
    height: 15rem;
    width: 30rem;
    margin: 0.75rem 0 0;
    border: 0.05rem solid var(--shade4);
    border-radius: 0.625rem;
    overflow: hidden;
}

.viewNotes {
    background: var(--yellow);
    color: var(--black);
    height: 15rem;
    width: 30rem;
    padding: 0.5rem;
    resize: none;
    overflow-y: auto;
}

.noteFootnote {
    font-size: 0.8rem;
    font-style: italic;
}

.visualizerEditButton {
    all: unset;
    color: var(--link);
    cursor: pointer;
}

.disabledEditButton {
    color: var(--shade4);
}

.visualizerDisputeButton {
    all: unset;
    color: var(--link);
    cursor: pointer;
}

.disabledDisputeButton {
    color: var(--shade4);
}

.doubleClick {
    border: 1px solid var(--link);
}

#noResultsNotice {
    font-size: 1.15rem;
    padding: 5rem 0 0;
}

/* VISUALIZER TABLE SIZING */

.hiddenField {
    display: none;
}
.customerNumber {
    min-width: 7rem;
}
.companyName {
    min-width: 21rem;
}
.item {
    min-width: 12rem;
}
.orderNumber {
    min-width: 5rem;
}
.termNumber {
    min-width: 3.25rem;
}
.numberRenewal {
    min-width: 3.25rem;
}
.paidDate {
    min-width: 5rem;
}
.quantity {
    min-width: 2.75rem;
}
.nbUnit {
    min-width: 2.75rem;
}
.amount {
    min-width: 7.5rem;
}
.afterCap {
    min-width: 7.5rem;
}
.noteRow,
.editRow,
.disputeRow {
    text-align: center;
    font-style: italic;
}
.quantity,
.nbUnit,
.amount,
.afterCap {
    text-align: right;
}
.afterCapValue {
    text-align: right;
}
.noteButton,
.editButton,
.disputeButton {
    text-align: center;
}
#afterCapLabel {
    font-weight: bold;
    text-align: right;
}
#afterCapTotal {
    font-weight: bold;
    text-align: right;
    border-top: 0.125rem solid var(--black);
}


/***** DETAIL *****/

/* DETAIL CONTENTS */

#detailOverview {
    padding: 1.5rem 0 0;
}

#detailSubtext {
    padding: 0 0 1.5rem;
}

#detailTitle {
    font-size: 1.6rem;
    font-weight: bold;
}

#detailSubtitle {
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
}

.detailMaxCapForm {
    padding: 1.5rem 0 0;
}

#maxCapForm {
    width: 12rem;
    padding: 0.25rem;
    margin: 0.25rem 1rem;
    border: 0.1rem solid var(--black);
    border-radius: 0.25rem;
}

#maxCapLabel {
    font-weight: bold;
    text-align: center;
    padding: 0;
}

#maxCapInput {
    margin: 0.25rem 0;
    text-align: center;
}

#maxCapFormButton {
    width: 6rem;
}

#maxCapModal {
    text-align: center;
}

.maxCapModalHeader {
    text-align: right;
}

.maxCapModalValue {
    text-align: left;
    font-weight: bold;
}

.detailButton {
    padding: 3rem 0 0;
}

/* DETAIL TABLE SIZING */

.detailShipTo{
    min-width: 5rem;
}
.detailItem {
    min-width: 5rem;
}
.detailTerm {
    min-width: fit-content;
}
.detailOrder {
    min-width: 4rem;
}
.detailPaidDate {
    min-width: 4rem;
}
.detailQty {
    min-width: 2rem;
}
.detailUnit {
    min-width: 2rem;
}
.detailAmt {
    min-width: 6rem;
}
.detailAfterCap {
    min-width: 6rem;
}


/***** EDITOR *****/

/* EDITOR CONTENTS */

#editTitle {
    font-size: 1.6rem;
    font-weight: bold;
}

.editHeaders {
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: underline;
    padding: 0.5rem 0 0;
}

.editorForm {
    padding: 0;
}

#infoEditorC {
    font-size: 1rem;
    font-style: italic;
}

#editorNotes {
    padding: 0 0 2rem;
}

.leftNote {
    padding-right: 3rem;
}

.editorNoteHeader {
    font-weight: bold;
    padding: 1rem 0 0.5rem;
}

.noteHistoryContainer {
    height: 15rem;
    width: 30rem;
    border: 0.05rem solid var(--shade4);
    border-radius: 0.625rem;
    overflow: hidden;
}

.editorHistory {
    background: var(--yellow);
    color: var(--black);
    height: 15rem;
    width: 30rem;
    padding: 0.5rem;
    resize: none;
    overflow-y: auto;
}

.rightNote {
    padding-left: 3rem;
}

.newNoteContainer {
    height: 15rem;
    width: 30rem;
    border: 0.05rem solid var(--shade4);
    border-radius: 0.625rem;
    overflow: hidden;
}

.editorNote {
    background: var(--yellow);
    color: var(--black);
    height: 15rem;
    width: 30rem;
    padding: 0.5rem;
    border: none;
    resize: none;
}

.editorNote:focus {
    outline: none;
}

.editorButtons {
    padding: 0.75rem 0;
}

#editFormButton,
#returnButton {
    width: 12rem;
}

#editorModal {
    text-align: center;
}

.historyHeader {
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: underline;
    padding: 5rem 0 0;
}

.historyTable {
    padding: 0;
}

#activeHistory {
    background-color: var(--green);
}

/* EDITOR TABLE SIZING */

#actionSelect {
    color: var(--red);
    text-align: center;
}
#representativeSelect {
    text-align: center;
}
#categorySelect {
    color: var(--shade4);
    text-align: center;
}
#customerNumberActive {
    min-width: 6rem;
}
#companyNameActive {
    color: var(--shade4);
    min-width: 8rem;
}
#itemActive {
    min-width: 4.25rem;
}
#orderNumberActive {
    color: var(--shade4);
    min-width: 4.5rem;
}
#termNumberActive {
    min-width: 3rem;
}
#numberRenewalActive {
    color: var(--shade4);
    min-width: 3rem;
}
#paidDateActive {
    min-width: 4.5rem;
}
#quantityActive {
    color: var(--shade4);
    min-width: 3rem;
}
#nbUnitActive {
    min-width: 3rem;
}
#amountActive {
    color: var(--shade4);
    min-width: 6.5rem;
}
#afterCapActive {
    min-width: 6.5rem;
}
#confidentActive {
    color: var(--shade4);
    text-align: center;
}
#quantityActive,
#nbUnitActive,
#amountActive,
#afterCapActive {
    text-align: right;
}
.actionEdit,
.representativeEdit,
.categoryEdit,
.confidentEdit {
    height: 1.875rem;
    width: 100%;
}
.editInput {
    width: 100%;
}
.inputRight {
    text-align: right;
}
.tableStrike {
    text-decoration: line-through;
}
#actionHistory {
    color: var(--red);
    min-width: max-content;
}
#modifierHistory {
    min-width: max-content;
}
#dateTimeHistory {
    color: var(--shade4);
    min-width: max-content;
}
#representativeHistory {
    min-width: max-content;
}
#categoryHistory {
    color: var(--shade4);
    min-width: max-content;
}
#customerNumberHistory {
    min-width: max-content;
}
#companyNameHistory {
    color: var(--shade4);
    min-width: 9rem;
    max-width: 10rem;
}
#itemHistory {
    min-width: 4.5rem;
}
#orderNumberHistory {
    color: var(--shade4);
    min-width: max-content;
}
#termNumberHistory {
    min-width: max-content;
}
#numberRenewalHistory {
    color: var(--shade4);
    min-width: max-content;
}
#paidDateHistory {
    min-width: max-content;
}
#quantityHistory {
    color: var(--shade4);
    min-width: max-content;
}
#nbUnitHistory {
    min-width: max-content;
}
#amountHistory {
    color: var(--shade4);
    min-width: 6rem;
}
#afterCapHistory {
    min-width: 6rem;
}
#quantityHistory,
#nbUnitHistory,
#amountHistory,
#afterCapHistory {
    text-align: right;
}


/***** DISPUTE *****/

/* DISPUTE CONTENTS */

#disputeOverview {
    padding: 1.5rem 0 1rem;
}

#disputeTitle {
    font-size: 1.6rem;
    font-weight: bold;
}

.disputeContainer {
    padding: 0;
}

.disputeButtons {
    padding: 0.75rem 0;
}

.disputeActionButton {
    width: 12rem;
}

#disputeFormButton,
#closeDisputeButton {
    width: 12rem;
}

#disputeModal,
#closeDisputeModal {
    text-align: center;
}

/* DISPUTE TABLE SIZING */

.disputeRepresentative {
    min-width: 9rem;
}
.disputeCompany {
    min-width: fit-content;
    color: var(--shade4);
}
.disputeCategory {
    min-width: 9rem;
}
.disputeCustomer {
    min-width: 7.5rem;
    color: var(--shade4);
}
.disputeCompanyName {
    min-width: 11rem;
}
.disputeItem {
    min-width: 6rem;
    color: var(--shade4);
}
.disputeTerm {
    min-width: fit-content;
}
.disputeOrder {
    min-width: 5rem;
    color: var(--shade4);
}
.disputePaidDate {
    min-width: 5.5rem;
}
.disputeQty {
    min-width: 3rem;
    color: var(--shade4);
}
.disputeUnit {
    min-width: 3rem;
}
.disputeAmt {
    min-width: 7rem;
}
.disputeAfterCap {
    min-width: 7rem;
}


/***** APPEND *****/

/* APPEND CONTENTS */

#appendTitle {
    font-size: 1.6rem;
    font-weight: bold;
}

.appendHeaders {
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: underline;
    padding: 1rem 0 0.5rem;
}

.appendLabels {
    text-align: right;
    font-weight: bold;
    padding-right: 0.5rem;
}

.appendField,
.appendDropdown,
.appendDatepicker {
    height: 1.8rem;
    width: 100%;
}

.appendInput {
    width: 100%;
}

#appendNote {
    padding: 0 0 1rem;
}

.appendNoteHeader {
    font-weight: bold;
    padding: 0.5rem 0;
}

.appendNote {
    background: var(--yellow);
    color: var(--black);
    height: 15rem;
    width: 30rem;
    padding: 0.5rem;
    border: none;
    resize: none;
}

.appendNote:focus {
    outline: none;
}

.appendButton {
    padding: 0.75rem 0;
}

#appendFormButton {
    width: 10rem;
}

#appendError {
    display: none;
    color: var(--red);
    text-align: center;
    padding: 0.5rem 0;
}

#appendErrorHeader {
    font-weight: bold;
}

#appendModal {
    text-align: center;
}

.appendModalHeader {
    text-align: right;
    font-weight: bold;
}

.appendModalValue {
    text-align: left;
}

/* APPEND TABLE SIZING */

.appendTable tbody tr td {
    min-width: 20rem;
}


/***** DISPUTES LOG *****/

/* DISPUTES LOG CONTENTS */

#disputesLabel {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 2rem 0 1.5rem;
}

#noDisputesNotice {
    font-size: 1.1rem;
    font-style: italic;
    padding: 0 0 2rem;
}

/* DISPUTES LOG TABLE SIZING */

.disputesLogRepresentative {
    min-width: 12rem;
}
.disputesLogCompany {
    min-width: 6rem;
}
.disputesLogCategory {
    min-width: 10rem;
}
.disputesLogTimestamp {
    min-width: 10rem;
}
.disputesLogEntry {
    min-width: 24rem;
}
.visitDisputeLabel {
    min-width: 3rem;
    text-align: center;
}


/***** CAPS *****/

/* CAPS FORM SELECTION */

#capsSearch {
    background-color: var(--shade1);
    border-radius: 0.25rem;
    width: 15rem;
}

#capsSearchFormInput {
    background-color: var(--shade1);
    color: var(--white);
    text-align: center;
    width: 12.5rem;
    border: none;
    margin: 0.2rem;
}

input#capsSearchFormInput::placeholder {
    color: var(--offwhite);
}

input#capsSearchFormInput:focus {
    outline: none;
}

/* CAPS CONTENTS */

.capsTableHeader {
    background-color: var(--shade5);
    padding: 0.5rem 0.25rem;
    margin: 0 0 0.5rem;
}

.capsAccordionHeader {
    padding: 0.5rem 0.25rem;
}

.capsAccordionHeader:focus {
    box-shadow: none;
    border-color: transparent;
}

.capsAccordionBody {
    padding: 0 0 0.5rem;
}

.capsAccordionLimit {
    background-color: var(--pink);
}


/***** APPROVAL *****/

/* APPROVAL CONTENTS */

#companyApprovalBox {
    text-align-last: center;
}

#approvalTable {
    font-size: 1.25rem;
}

#approvalR {
    text-decoration-line: underline;
}

#approvalC {
    font-style: italic;
}

#approvalCheckbox {
    padding: 0 0 1rem;
}

.signatureCheck,
.signatureCheckSelect {
    border: 0.05rem solid var(--shade3);
}

.signatureLabel,
.signatureLabelSelect {
    display: flex;
    align-items: center;
    margin: 0 0.5rem;
}

.signatureLabel:hover,
.signatureLabelSelect:hover {
    cursor: pointer;
}

#submitButton,
#managerSubmitButton,
#managerConfirmButton,
#adminRevertButton,
#adminConfirmButton,
#adminManualButton,
#adminManualConfirmButton,
#disputeConfirmButton,
#disputeCloseButton {
    width: 10rem;
}

#submissionNotice {
    padding: 0 0 1rem;
}

#managerSelect {
    padding: 1rem 0 1rem;
}

#approvalModal,
#revertModal,
#manualModal {
    text-align: center;
}

#confirmMonth {
    font-weight: bold;
}

#confirmReps,
#confirmReversal,
#confirmManual {
    font-size: 1.25rem;
}

#eSign {
    font-weight: bold;
    font-style: italic;
}

#awaitingHeader {
    padding: 5rem 0 1rem;
}

#awaitingTable {
    font-size: 1.25rem;
}

#revertHeader,
#manualHeader {
    font-weight: bold;
    padding: 5rem 0 1rem;
}

#adminRevertButton,
#adminManualButton {
    margin: 1rem 0;
}

/* APPROVAL TABLE SIZING */

#category {
    min-width: 11rem;
}
#amtApproval,
#afterCapApproval {
    min-width: 12rem;
}
#amtApproval,
#afterCapApproval {
    text-align: right;
}
#awaitingRep {
    min-width: 20rem;
}
#awaitingCompany {
    min-width: 7rem;
}


/***** PAYOUT *****/

/* PAYOUT CONTENTS */

#conversionRateForm,
#NARLicensingStatusForm,
#CBBLicensingStatusForm {
    width: 12rem;
    padding: 0.25rem;
    margin: 0.25rem 1rem;
    border: 0.1rem solid var(--black);
    border-radius: 0.25rem;
}

#conversionRateLabel,
#NARLicensingStatusLabel,
#CBBLicensingStatusLabel {
    font-weight: bold;
    text-align: center;
    padding: 0;
}

#conversionRateInput,
#NARLicensingStatusInput,
#CBBLicensingStatusInput {
    margin: 0.25rem 0;
    text-align: center;
}

#conversionRateFormButton,
#revertConversionRateFormButton,
#NARLicensingStatusFormButton,
#revertNARLicensingStatusFormButton,
#CBBLicensingStatusFormButton,
#revertCBBLicensingStatusFormButton {
    width: 6rem;
}

#payoutsLabel {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem;
}

.payoutInfo {
    padding: 0;
}

#payoutTableNAR,
#payoutTableCBB,
#payoutTableCommissionTotal,
#payoutTableNARLicensing,
#payoutTableCBBLicensing {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.payoutTables {
    border: 1px solid var(--black);
}

.payoutTableName {
    text-align: center;
    background-color: var(--shade3);
    color: var(--offwhite);
}

.payoutTableHeader {
    background-color: var(--shade5);
}

#conversionRateModal,
#revertConversionRateModal,
#NARLicensingStatusModal,
#revertNARLicensingStatusModal,
#CBBLicensingStatusModal,
#revertCBBLicensingStatusModal {
    text-align: center;
}

.conversionRateModalHeader,
.revertConversionRateModalHeader,
.NARLicensingStatusModalHeader,
.revertNARLicensingStatusModalHeader,
.CBBLicensingStatusModalHeader,
.revertCBBLicensingStatusModalHeader {
    text-align: right;
}

.conversionRateModalValue,
.revertConversionRateModalValue,
.NARLicensingStatusModalValue,
.revertNARLicensingStatusModalValue,
.CBBLicensingStatusModalValue,
.revertCBBLicensingStatusModalValue {
    text-align: left;
    font-weight: bold;
}

#confirmPayouts {
    font-size: 1.25rem;
    font-weight: bold;
}

#payoutModal {
    text-align: center;
}

#confirmPayoutMonth {
    text-decoration: underline;
}

#overrideHeader {
    font-weight: bold;
    padding: 5rem 0 1rem;
}

#adminOverrideButton {
    width: 8rem;
    margin: 1rem 0;
}

#overrideModal {
    text-align: center;
}

#confirmOverride {
    font-size: 1.25rem;
}

#adminSubmitButton {
    width: 10rem;
}

/* PAYOUT TABLE SIZING */

.payoutTableMonth {
    min-width: 9rem;
    padding-left: 0.25rem;
}

.payoutTableMonthLicensing {
    min-width: 11rem;
    padding-left: 0.25rem;
}

.payoutTableHeaderOne {
    min-width: 8rem;
}

.payoutTableHeaderTwo {
    min-width: 6.75rem;
}

.payoutTableHeaderThree {
    min-width: 8.5rem;
}

.payoutTableAlignCenter {
    text-align: center;
}

.payoutTableAlignRight {
    text-align: right;
}

.payoutTableColorOne {
    color: var(--red);
}

.payoutTableColorTwo {
    color: var(--money);
}

.payoutTableColorThree {
    color: var(--purple);
}


/***** SUMMARY *****/

/* SUMMARY CONTENTS */

#summaryDirectSalesTable,
#summaryLicensingTable {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.repSummaryTable {
    font-size: 1.25rem;
}

.repSummaryTableHeader th {
    font-size: 1.35rem;
    padding: 0 0 0.5rem;
}

.managerTableHeader {
    padding: 2rem 0 0;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: underline;
}

.summaryTables {
    font-size: 1.1rem;
}

.summaryTableHeader th {
    font-size: 1.2rem;
    padding: 0 0 0.5rem;
}

.summaryFiller {
    min-width: 2.5rem;
}

.summaryTableValuesLabel {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
}

.summaryTableValuesNumber {
    text-align: right;
}

.summaryTableAmountLabel {
    font-weight: bold;
    padding: 0.25rem 0;
}

.summaryTableLicensingLabel {
    font-weight: bold;
}

.summaryTableYTD {
    font-size: 1rem;
    text-align: right;
}

.summaryTableFooter {
    border-top: 0.15rem solid var(--black);
    border-bottom: 0.15rem solid var(--black);
}

/* SUMMARY TABLE SIZING */

.summaryDirectSalesSizing {
    min-width: 11rem;
}
.summaryLicensingSizingOne {
    min-width: 16rem;
}
.summaryLicensingSizingTwo {
    min-width: 9rem;
}


/***** 404 *****/

#errorBar {
    margin: 7.5rem 0 2.5rem;
}

#error404 {
    color: var(--white);
    font-size: 2.25rem;
    margin: 0;
}

#errorIcons {
    color: var(--white);
}


/***** FOOTER *****/

#footer {
    z-index: 3;
    position: absolute;
    color: var(--shade4);
    font-size: 0.75rem;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 1rem 0;
}


/***** LOADER *****/

.loader {
    margin: 27.5vh 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accordionLoader {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.car__body {
    animation: shake 0.2s ease-in-out infinite alternate;
}
.car__line {
    transform-origin: center right;
    stroke-dasharray: 22;
    animation: line 0.8s ease-in-out infinite;
    animation-fill-mode: both;
}
.car__line--top {
    animation-delay: 0s;
}
.car__line--middle {
    animation-delay: 0.2s;
}
.car__line--bottom {
    animation-delay: 0.4s;
}
@keyframes shake {
    0% {
        transform: translateY(-1%);
   }
    100% {
        transform: translateY(3%);
   }
}
@keyframes line {
    0% {
        stroke-dashoffset: 22;
   }
    25% {
        stroke-dashoffset: 22;
   }
    50% {
        stroke-dashoffset: 0;
   }
    51% {
        stroke-dashoffset: 0;
   }
    80% {
        stroke-dashoffset: -22;
   }
    100% {
        stroke-dashoffset: -22;
   }
}


/***** MOBILE-FIRST DESIGN *****/

@media screen and (max-width: 1400px) {
    /* VISUALIZER */
    .visualizerInfo {
        overflow-x: auto;
        font-size: 0.8rem;
    }
    .customerNumber {
        min-width: 5.75rem;
    }
    .companyName {
        min-width: 19rem;
    }
    .item {
        min-width: 9.5rem;
    }
    .orderNumber {
        min-width: 4rem;
    }
    .termNumber {
        min-width: 2.5rem;
    }
    .numberRenewal {
        min-width: 2.5rem;
    }
    .paidDate {
        min-width: 4rem;
    }
    .quantity {
        min-width: 2.75rem;
    }
    .nbUnit {
        min-width: 2.75rem;
    }
    .amount {
        min-width: 5.75rem;
    }
    .afterCap {
        min-width: 5.75rem;
    }
    /* DETAIL */
    .detailTable {
        overflow-x: auto;
    }
    /* EDITOR */
    .editorTable {
        overflow-x: auto;
    }
    .leftNote {
        padding-right: 2rem;
    }
    .noteHistoryContainer {
        height: 14rem;
        width: 27.5rem;
    }
    .editorHistory {
        height: 14rem;
        width: 27.5rem;
    }
    .rightNote {
        padding-left: 2rem;
    }
    .newNoteContainer {
        height: 14rem;
        width: 27.5rem;
    }
    #companyNameActive {
        min-width: 9rem;
    }
    #itemActive {
        min-width: 5rem;
    }
    .editorNote {
        height: 14rem;
        width: 27.5rem;
    }
    .historyTable {
        overflow-x: auto;
    }
    #companyNameHistory {
        min-width: 10rem;
        max-width: 11rem;
    }
    #itemHistory {
        min-width: 5rem;
    }
    /* DISPUTE */
    .disputeTable {
        overflow-x: auto;
    }
    /* APPEND */
    .appendNote {
        height: 14rem;
        width: 27.5rem;
    }
    /* CAPS */
    .capsAccordionMaxLabel {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    /* UNIVERSAL HEADER */
    #logoFile {
        height: auto;
        width: 25rem;
    }
    /* VISUALIZER */
    .selectionBox {
        margin: 0.25rem 1.2rem;
    }
    .dropdown,
    #monthButton,
    #visualizerButton {
        font-size: 0.9rem;
    }
    #overviewTitle {
        font-size: 1.4rem;
    }
    #infoR {
        font-size: 1rem;
    }
    #infoC {
        font-size: 0.8rem;
    }
    /* DETAIL */
    #detailTitle {
        font-size: 1.4rem;
    }
    #detailSubtitle {
        font-size: 1.1rem;
    }
    /* EDITOR */
    #editTitle {
        font-size: 1.4rem;
    }
    .editHeaders {
        font-size: 1.15rem;
    }
    .leftNote {
        padding-right: 1.5rem;
    }
    .editorNoteHeader {
        font-size: 0.9rem;
    }
    .noteHistoryContainer {
        height: 12.5rem;
        width: 25rem;
    }
    .editorHistory {
        height: 12.5rem;
        width: 25rem;
    }
    .rightNote {
        padding-left: 1.5rem;
    }
    .newNoteContainer {
        height: 12.5rem;
        width: 25rem;
    }
    .editorNote {
        height: 12.5rem;
        width: 25rem;
    }
    .historyHeader {
        font-size: 1.15rem;
        padding: 3rem 0 0;
    }
    /* DISPUTE */
    #disputeTitle {
        font-size: 1.4rem;
    }
    /* APPEND */
    #appendTitle {
        font-size: 1.4rem;
    }
    .appendHeaders {
        font-size: 1.15rem;
    }
    .appendNoteHeader {
        font-size: 1rem;
    }
    .appendNote {
    height: 12.5rem;
    width: 25rem;
    }
    /* CAPS */
    #capsButton {
        font-size: 0.9rem;
    }
    .capsTableHeader {
        font-size: 0.9rem;
    }
    .capsAccordionHeader {
        font-size: 0.9rem;
    }
    .capsAccordionBody {
        font-size: 0.9rem;
    }
    /* APPROVAL */
    #monthYearButton,
    #approvalButton {
        font-size: 0.9rem;
    }
    /* PAYOUT */
    #monthPayoutButton,
    #payoutButton {
        font-size: 0.9rem;
    }
    /* SUMMARY */
    #monthSummaryButton,
    #summaryButton {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 1000px) {
    body {
        overflow-x: auto;
        overflow-y: auto;
    }
    #scrollBar {
        overflow-y: auto;
    }
    .desktopView {
        display: none;
    }
    .mobileView {
        display: block;
    }
    /* LOGIN */
    #topLogoContainer,
    #topLogo,
    #bottomLogoContainer,
    #bottomLogo {
        display: none;
    }
    /* UNIVERSAL HEADER */
    #menuHeader {
        justify-content: space-between;
    }
    #menuSales {
        letter-spacing: 0.2rem;
    }
    #menuLogoMobile {
        height: 2.75rem;
        width: auto;
    }
    #title {
        font-size: 1.75rem;
    }
    #logo {
        max-width: 6rem;
    }
    #logoFileMobile {
        height: 5rem;
        width: auto;
    }
    /* HOME */
    #welcome {
        font-size: 1.75rem;
    }
    .homeCard {
        height: 10rem;
        max-width: 20rem;
    }
    .homeCardTitle {
        font-size: 1.5rem;
    }
    #homeLabel {
        font-size: 1.35rem;
    }
    #profile {
        font-size: 1.1rem;
    }
    #profileTable tr,
    #profileTable td {
        min-width: min-content;
    }
    /* CHANGELOG */
    .cacheLabel {
        min-width: 7rem;
    }
    .cacheText {
        min-width: min-content;
    }
    /* VISUALIZER */
    .dropdown,
    #monthButton,
    #visualizerButton {
        font-size: 0.8rem;
    }
    #overviewTitle {
        font-size: 1.2rem;
    }
    #noResultsNotice {
        font-size: 1rem;
        padding: 4rem 0 0;
    }
    /* DETAIL */
    #detailTitle {
        font-size: 1.2rem;
    }
    #detailSubtitle {
        font-size: 1rem;
    }
    .detailTable {
        font-size: 0.8rem;
    }
    /* EDITOR */
    .editorTable {
        font-size: 0.8rem;
    }
    #infoEditorC {
        font-size: 0.8rem;
    }
    #editorNotes {
        display: block !important;
        font-size: 0.8rem;
    }
    .leftNote {
        padding: 0;
    }
    .noteHistoryContainer {
        margin-left: auto;
        margin-right: auto;
    }
    .rightNote {
        padding: 0;
    }
    .newNoteContainer {
        margin-left: auto;
        margin-right: auto;
    }
    #editFormButton,
    #returnButton {
        font-size: 0.8rem;
        width: 10rem;
    }
    .historyTable {
        font-size: 0.8rem;
    }
    #customerNumberActive {
        min-width: 5rem;
    }
    #companyNameActive {
        min-width: 7.5rem;
    }
    #itemActive {
        min-width: 3.75rem;
    }
    #orderNumberActive {
        min-width: 4rem;
    }
    #termNumberActive {
        min-width: 2.25rem;
    }
    #numberRenewalActive {
        min-width: 2.25rem;
    }
    #paidDateActive {
        min-width: 4rem;
    }
    #quantityActive {
        min-width: 2.25rem;
    }
    #nbUnitActive {
        min-width: 2.25rem;
    }
    #amountActive {
        min-width: 5rem;
    }
    #afterCapActive {
        min-width: 5rem;
    }
    #confidentActive {
        min-width: 2.25rem;
    }
    .editInput {
        height: 1.875rem;
    }
    #companyNameHistory {
        min-width: 8rem;
        max-width: 9rem;
    }
    #itemHistory {
        min-width: 4rem;
    }
    #orderNumberHistory {
        min-width: 4rem;
    }
    #paidDateHistory {
        min-width: 4rem;
    }
    #amountHistory {
        min-width: 5rem;
    }
    #afterCapHistory {
        min-width: 5rem;
    }
    /* DISPUTE */
    .disputeTable {
        font-size: 0.8rem;
    }
    #disputeFormButton,
    #closeDisputeButton {
        font-size: 0.8rem;
        width: 10rem;
    }
    .disputeActionButton {
        font-size: 0.8rem;
        width: 10rem;
    }
    /* APPEND */
    .appendInput {
        height: 1.875rem;
    }
    #appendNote {
        font-size: 0.8rem;
    }
    #appendFormButton {
        font-size: 0.8rem;
        width: 8rem;
    }
    /* CAPS */
    #capsButton {
        font-size: 0.8rem;
    }
    .capsTableHeader {
        font-size: 0.8rem;
    }
    .capsAccordionHeader {
        font-size: 0.8rem;
    }
    .capsAccordionBody {
        font-size: 0.8rem;
    }
    .capsAccordionValueLabel {
        display: none;
    }
    /* APPROVAL */
    #monthYearButton,
    #approvalButton {
        font-size: 0.8rem;
    }
    #approvalTable,
    #awaitingTable {
        font-size: 1rem;
    }
    #category {
        min-width: 9rem;
    }
    #amtApproval,
    #afterCapApproval {
        min-width: 10rem;
    }
    #approvalCheckbox   .signatureCheck {
        margin-top: 0.1rem;
        margin-left: 0;
    }
    .signatureLabel,
    .signatureLabelSelect,
    #submissionNotice,
    #awaitingHeader,
    #revertHeader,
    #manualHeader,
    #overrideHeader {
        font-size: 0.9rem;
    }
    #awaitingRep {
        min-width: 16rem;
    }
    #awaitingCompany {
        min-width: 6rem;
    }
    /* DISPUTES LOG */
    #disputesLabel {
        font-size: 1.35rem;
    }
    /* PAYOUT */
    #monthPayoutButton,
    #payoutButton {
        font-size: 0.8rem;
    }
    #payoutsLabel {
        font-size: 1.35rem;
    }
    .payoutInfo {
        overflow-x: auto;
    }
    #payoutTableNAR,
    #payoutTableCBB,
    #payoutTableCommissionTotal,
    #payoutTableNARLicensing,
    #payoutTableCBBLicensing {
        display: block;
    }
    .payoutTables {
        width: 100%;
    }
    /* SUMMARY */
    #monthSummaryButton,
    #summaryButton {
        font-size: 0.8rem;
    }
    .repSummaryTable,
    .summaryTables {
        width: 100%;
    }
    /* FOOTER */
    #footer {
        font-size: 0.5rem;
    }
}

@media screen and (max-width: 725px) {
    /* LOGIN */
    #centerLogoContainer,
    #inactivityContainer {
        height: 32.5rem;
        width: 20rem;
    }
    #login {
        max-width: 17.5rem;
    }
    /* UNIVERSAL HEADER */
    #title {
        letter-spacing: normal;
    }
    /* HOME */
    #welcomeBar {
        margin: 1.25rem 0 0;
    }
    #welcome {
        font-size: 1.5rem;
    }
    #contents {
        padding: 0;
    }
    .homeCard {
        height: 9rem;
    }
    .homeCardTitle {
        font-size: 1.4rem;
    }
    #homeLabel {
        font-size: 1.25rem;
        margin: 1rem 0 0.5rem;
    }
    #profile {
        font-size: 1rem;
    }
    #profileTable tr {
        min-width: none;
        border-top: 0.1rem solid white;
        border-bottom: 0.1rem solid white;
    }
    #profileTable td {
        min-width: none;
        border: 0;
    }
    .profileLabel,
    .profileText,
    .viewPassword {
        display: block;
        text-align: center;
    }
    .emailHeader {
        display: none;
    }
    /* CHANGELOG */
    .cacheLabel,
    .cacheText {
        min-width: none;
        display: block;
        text-align: center;
    }
    /* VISUALIZER */
    #searchFormInput {
        font-size: 0.8rem;
    }
    #overviewTitle {
        font-size: 1.2rem;
    }
    .visualizerInfo {
        font-size: 0.7rem;
    }
    .customerNumber {
        min-width: 5.5rem;
    }
    .companyName {
        min-width: 14rem;
    }
    .item {
        min-width: 7rem;
    }
    .orderNumber {
        min-width: 3.5rem;
    }
    .termNumber {
        min-width: max-content;
    }
    .numberRenewal {
        min-width: max-content;
    }
    .paidDate {
        min-width: 3.5rem;
    }
    .quantity {
        min-width: 2.25rem;
    }
    .nbUnit {
        min-width: 2.25rem;
    }
    .amount {
        min-width: 5rem;
    }
    .afterCap {
        min-width: 5rem;
    }
    .commissionNote {
        height: 17.5rem;
        width: 26.25rem;
    }
    .noteContainer {
        height: 12rem;
        width: 24rem;
    }
    .viewNotes {
        height: 12rem;
        width: 24rem;
    }
    #noResultsNotice {
        font-size: .8rem;
        padding: 3rem 0 0;
    }
    /* DETAIL */
    #detailTitle {
        font-size: 1rem;
    }
    #detailSubtitle {
        font-size: 0.9rem;
    }
    /* EDITOR */
    #editTitle {
        font-size: 1.2rem;
    }
    .editHeaders {
        font-size: 1rem;
    }
    .editorNoteHeader {
        font-size: 0.8rem;
    }
    .historyHeader {
        font-size: 1rem;
        padding: 1.5rem 0 0;
    }
    /* DISPUTE */
    #disputeTitle {
        font-size: 1.2rem;
    }
    /* APPEND */
    #appendTitle {
        font-size: 1.2rem;
    }
    .appendHeaders {
        font-size: 1rem;
    }
    .appendLabels {
        font-size: 0.8rem;
    }
    .appendField,
    .appendDropdown,
    .appendDatepicker {
        font-size: 0.8rem;
    }
    .appendNoteHeader {
        font-size: 0.8rem;
    }
    #appendError {
        font-size: 0.8rem;
    }
    .appendModalHeader {
        font-size: 0.9rem;
    }
    .appendModalValue {
        font-size: 0.9rem;
    }
    .appendTable tbody tr td {
        min-width: 15rem;
    }
    /* CAPS */
    #capsSearchFormInput {
        font-size: 0.7rem;
    }
    .capsTableHeader {
        font-size: 0.6rem;
    }
    .capsAccordionHeader {
        font-size: 0.7rem;
    }
    .capsAccordionBody {
        font-size: 0.7rem;
    }
    /* APPROVAL */
    #approvalCheckbox   .signatureCheck {
        width: 1.25rem;
    }
    #awaitingHeader,
    #revertHeader,
    #manualHeader,
    #overrideHeader {
        text-align: center;
    }
    /* DISPUTES LOG */
    #disputesLabel {
        font-size: 1.25rem;
        margin: 1.5rem 0 1rem;
    }
    /* PAYOUT */
    #payoutsLabel {
        font-size: 1.25rem;
        margin: 0.75rem 0 0.25rem;
    }
    .payoutTableHeader,
    .payoutTableValues {
        font-size: 0.9rem;
    }
    .payoutTableMonth {
        min-width: 8.25rem;
    }
    .payoutTableHeaderOne {
        min-width: 7.25rem;
    }
    .payoutTableHeaderTwo {
        min-width: 6.25rem;
    }
    .payoutTableHeaderThree {
        min-width: 8rem;
    }
}

@media screen and (max-width: 600px) {
    /* VISUALIZER */
    #searchForm {
        width: 12rem;
    }
    #searchFormInput {
        width: 7rem;
    }
    .visualizerInfo {
        padding: 0 1rem;
    }
    /* APPROVAL */
    #approvalCheckbox   .signatureCheck {
        width: 1rem;
    }
    .signatureLabel,
    .signatureLabelSelect,
    #submissionNotice,
    #awaitingHeader,
    #revertHeader,
    #manualHeader,
    #overrideHeader {
        font-size: 0.8rem;
    }
    .signatureLabel {
        width: 80%;
    }
    #amtApproval,
    #afterCapApproval {
        min-width: 8rem;
    }
    #awaitingHeader,
    #revertHeader,
    #manualHeader,
    #overrideHeader {
        padding: 3rem 3rem 1rem;
    }
    /* APPEND */
    .appendLabels {
        font-size: 0.7rem;
    }
    .appendField,
    .appendDropdown,
    .appendDatepicker {
        font-size: 0.7rem;
    }
    .appendNoteHeader {
        font-size: 0.7rem;
    }
    .appendModalHeader {
        font-size: 0.8rem;
    }
    .appendModalValue {
        font-size: 0.8rem;
    }
    .appendTable tbody tr td {
        min-width: 12.5rem;
    }
    /* PAYOUT */
    #payoutStatus {
        font-size: 0.8rem;
    }
    /* SUMMARY */
    .repSummaryTable {
        font-size: 1.1rem;
    }
    .repSummaryTableHeader th {
        font-size: 1.2rem;
    }
    .managerTableHeader {
        font-size: 1.3rem;
    }
    .summaryTables {
        font-size: 1rem;
    }
    .summaryTableHeader th {
        font-size: 1.1rem;
    }
    .summaryDirectSalesSizing {
        min-width: 6rem;
    }
    .summaryLicensingSizingOne {
        min-width: 10rem;
    }
    .summaryLicensingSizingTwo {
        min-width: 5rem;
    }
}

@media screen and (max-width: 450px) {
    /* UNIVERSAL HEADER */
    #title {
        font-size: 1.25rem;
        letter-spacing: normal;
    }
    #logo {
        max-width: 4rem;
    }
    #logoFileMobile {
        height: 4rem;
        width: auto;
    }
    /* HOME */
    #welcomeBar {
        margin: 1rem 0 0;
    }
    #welcome {
        font-size: 1.25rem;
    }
    .homeCard {
        height: 7.5rem;
        max-width: 16rem;
    }
    .homeCardTitle {
        font-size: 1.25rem;
        padding: 0.25rem;
    }
    #homeLabel {
        font-size: 1rem;
        margin: 0.75rem 0;
    }
    /* VISUALIZER */
    #overviewTitle {
        font-size: 1rem;
    }
    .commissionNote {
        height: 14rem;
        width: 20rem;
        padding: 0.5rem;
    }
    .noteContainer {
        height: 9.75rem;
        width: 18.75rem;
        margin: 0.5rem 0 0;
    }
    .viewNotes {
        height: 9.75rem;
        width: 18.75rem;
    }
    #noResultsNotice {
        text-align: center;
        font-size: .7rem;
        padding: 2rem 0 0;
    }
    /* EDITOR */
    .noteHistoryContainer {
        height: 11rem;
        width: 20rem;
    }
    .editorHistory {
        height: 11rem;
        width: 20rem;
    }
    .newNoteContainer {
        height: 11rem;
        width: 20rem;
    }
    .editorNote {
        height: 11rem;
        width: 20rem;
    }
    /* APPEND */
    .appendLabels {
        font-size: 0.6rem;
    }
    .appendField,
    .appendDropdown,
    .appendDatepicker {
        font-size: 0.6rem;
    }
    .appendNoteHeader {
        font-size: 0.6rem;
    }
    .appendNote {
        height: 11rem;
        width: 20rem;
    }
    .appendTable tbody tr td {
        min-width: 10rem;
    }
    /* APPROVAL */
    #approvalTable,
    #awaitingTable {
        font-size: 0.8rem;
    }
    #category {
        min-width: 7rem;
    }
    .signatureLabel,
    .signatureLabelSelect,
    #submissionNotice,
    #awaitingHeader,
    #revertHeader,
    #manualHeader,
    #overrideHeader {
        font-size: 0.7rem;
    }
    #submissionNotice {
        padding: 0 2rem 1rem;
    }
    #amtApproval,
    #afterCapApproval {
        min-width: 6rem;
    }
    #awaitingRep {
        min-width: 12rem;
    }
    #awaitingCompany {
        min-width: 5rem;
    }
    /* DISPUTES LOG */
    #disputesLabel {
        font-size: 1.15rem;
        margin: 1rem 0 0.75rem;
    }
    /* PAYOUT */
    #payoutsLabel {
        font-size: 1.15rem;
        margin: 0.5rem 0 0;
    }
    .payoutInfo {
        padding: 0 1rem;
    }
    /* SUMMARY */
    .repSummaryTable {
        font-size: 0.9rem;
    }
    .repSummaryTableHeader th {
        font-size: 1.1rem;
    }
    .managerTableHeader {
        padding: 1rem 0 0;
        font-size: 1.2rem;
    }
    .summaryTables {
        font-size: 0.8rem;
    }
    .summaryTableHeader th {
        font-size: 0.9rem;
    }
}


/***** PRINT DESIGN *****/

@media print {
    .print_hide {
        display: none !important;
    }
    .container,
    .container-fluid {
        max-width: 100%;
    }
    #payoutTableNAR,
    #payoutTableCBB,
    #payoutTableCommissionTotal {
        transform: scale(0.9);
        margin: 0rem;
        break-inside: avoid;
    }
    #payoutTableNARLicensing,
    #payoutTableCBBLicensing {
        transform: scale(0.8);
        margin: 0rem;
        break-inside: avoid;
    }
    #summaryDirectSalesTable,
    #summaryLicensingTable {
        transform: scale(0.8);
        margin: 0rem;
        break-inside: avoid;
    }
    #footer {
        font-size: 0.5rem;
        margin: 0rem;
    }
}