﻿#PageContainer #MainContainer #MainInner #SubPageContent {
  display: flex; }

#MainLeft h1 {
  font-size: 22px; }

#MainLeft #MyPageLinks {
  margin-top: 30px; }
  #MainLeft #MyPageLinks li a {
    font-size: 16px;
    margin-bottom: 10px;
    display: block; }
  #MainLeft #MyPageLinks li.Selected > a {
    font-weight: bold; }

#MainRight {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1; }
  #MainRight .Header {
    width: 100%;
    margin: 0 auto;
    background-color: #F0F0F0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 999px) {
      #MainRight .Header {
        height: 60px; } }
    #MainRight .Header h1 {
      color: #757679;
      text-align: center; }
  #MainRight fieldset {
    margin-top: 10px;
    /* For IE Browsers*/ }
    #MainRight fieldset .row {
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 999px) {
        #MainRight fieldset .row {
          flex-direction: column; } }
    #MainRight fieldset label {
      position: relative;
      display: inline-block;
      width: 100%;
      margin: 20px 5px; }
    #MainRight fieldset label {
      width: 20%;
      font-size: 18px; }
    #MainRight fieldset input {
      padding: 10px;
      width: 100%;
      box-sizing: border-box;
      font-size: 18px; }
      @media screen and (max-width: 999px) {
        #MainRight fieldset input {
          font-size: 20px; } }
    #MainRight fieldset input {
      width: 78%; }
    #MainRight fieldset span {
      font-size: 18px;
      padding: 15px 10px;
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      transition: 0.2s;
      transition-timing-function: ease;
      transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
      opacity: 0.5; }
      @media screen and (max-width: 999px) {
        #MainRight fieldset span {
          font-size: 20px; } }
    #MainRight fieldset input:focus + span, #MainRight fieldset input:not(:placeholder-shown) + span {
      opacity: 1;
      transform: scale(0.75) translateY(-100%) translateX(-20%); }
    #MainRight fieldset input:focus + span, #MainRight fieldset input:not(:-ms-input-placeholder) + span {
      opacity: 1;
      transform: scale(0.75) translateY(-100%) translateX(-20%); }
  #MainRight .NormalButton {
    border: 1px solid #606060;
    box-sizing: border-box;
    margin: 20px 0 20px 0;
    width: 100%; }
  #MainRight .ResponsiveTable th,
  #MainRight .ResponsiveTable td {
    padding: 5px 5px !important; }
  #MainRight .ResponsiveTable td:before {
    width: 50%; }
  #MainRight section {
    width: 100%; }
  #MainRight table {
    width: 100%;
    margin-top: 20px; }
    #MainRight table thead th {
      font-weight: 100;
      font-size: 16px;
      color: #606060; }
    #MainRight table thead tr {
      text-align: left; }
    #MainRight table tbody td, #MainRight table tfoot td {
      font-size: 16px; }
      #MainRight table tbody td.strong, #MainRight table tfoot td.strong {
        font-weight: normal; }
    #MainRight table tr {
      border-bottom: 1px solid #202020; }
    #MainRight table .NormalButton {
      font-size: 22px;
      width: 80%;
      float: right;
      margin: 0 auto;
      border-radius: 0px; }
    #MainRight table .ShowInvoiceCopy img, #MainRight table .RequestInvoiceCopy img {
      width: 22px;
      cursor: pointer; }
  #MainRight #Orders .OrderListEmptyText {
    margin-top: 20px; }
    #MainRight #Orders .OrderListEmptyText span {
      font-size: 18px; }
  #MainRight #CustomerOrders {
    width: 100%;
    margin-top: 20px; }
    #MainRight #CustomerOrders .OrderListHeader, #MainRight #CustomerOrders .OrderSummary {
      display: flex;
      align-items: center;
      padding: 8px 5px;
      border-bottom: 1px solid #202020; }
      #MainRight #CustomerOrders .OrderListHeader span, #MainRight #CustomerOrders .OrderSummary span {
        font-size: 16px; }
      #MainRight #CustomerOrders .OrderListHeader .Number, #MainRight #CustomerOrders .OrderListHeader .Date, #MainRight #CustomerOrders .OrderSummary .Number, #MainRight #CustomerOrders .OrderSummary .Date {
        width: 18%; }
      #MainRight #CustomerOrders .OrderListHeader .State, #MainRight #CustomerOrders .OrderSummary .State {
        flex-grow: 1; }
      #MainRight #CustomerOrders .OrderListHeader .Total, #MainRight #CustomerOrders .OrderSummary .Total {
        width: 18%;
        text-align: right; }
      #MainRight #CustomerOrders .OrderListHeader .Toggle, #MainRight #CustomerOrders .OrderSummary .Toggle {
        width: 20%;
        text-align: right; }
    #MainRight #CustomerOrders .OrderListHeader span {
      font-weight: 100;
      color: #606060; }
    #MainRight #CustomerOrders .OrderSummary .OrderLink {
      font-size: 16px;
      color: #202020;
      text-decoration: underline; }
    #MainRight #CustomerOrders .Paging {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 20px;
      font-size: 16px; }
  #MainRight #CustomerOrderDetails {
    width: 100%;
    margin-top: 20px; }
    #MainRight #CustomerOrderDetails .InvoiceError {
      margin-bottom: 20px;
      padding: 12px 15px;
      border: 1px solid #C00000;
      color: #C00000;
      font-size: 16px; }
    #MainRight #CustomerOrderDetails h2 {
      font-size: 22px;
      margin: 30px 0 10px 0; }
    #MainRight #CustomerOrderDetails .OrderInfo {
      display: flex;
      flex-wrap: wrap;
      gap: 20px; }
      #MainRight #CustomerOrderDetails .OrderInfo .InfoBlock {
        flex: 1 1 45%;
        box-sizing: border-box;
        padding: 15px;
        background-color: #F0F0F0; }
        #MainRight #CustomerOrderDetails .OrderInfo .InfoBlock h2 {
          margin-top: 0; }
      #MainRight #CustomerOrderDetails .OrderInfo dl {
        display: grid;
        grid-template-columns: 40% 60%;
        row-gap: 8px;
        margin: 0; }
      #MainRight #CustomerOrderDetails .OrderInfo dt {
        color: #606060;
        font-size: 16px; }
      #MainRight #CustomerOrderDetails .OrderInfo dd {
        margin: 0;
        font-size: 16px; }
    #MainRight #CustomerOrderDetails .OrderLineTable .Note {
      font-size: 14px;
      color: #606060;
      margin-top: 4px; }
    #MainRight #CustomerOrderDetails table.OrderTotals {
      width: auto;
      margin: 10px 0 0 auto; }
      #MainRight #CustomerOrderDetails table.OrderTotals tr {
        border-bottom: none; }
      #MainRight #CustomerOrderDetails table.OrderTotals td {
        padding: 3px 10px; }
      #MainRight #CustomerOrderDetails table.OrderTotals .amount {
        min-width: 120px; }
      #MainRight #CustomerOrderDetails table.OrderTotals .GrandTotal td {
        font-weight: bold;
        border-top: 1px solid #202020; }
    #MainRight #CustomerOrderDetails .BackLink {
      margin-top: 30px;
      font-size: 16px; }
  #MainRight #OrderContainer, #MainRight #InvoiceContainer {
    flex-direction: column;
    width: 100%; }
  #MainRight #InvoiceContainer #OrderDetails label {
    width: 50%; }
  #MainRight #OrderDetails {
    display: flex;
    margin-bottom: 20px; }
    #MainRight #OrderDetails .Left, #MainRight #OrderDetails .Right {
      display: flex;
      width: 50%; }
    #MainRight #OrderDetails .InnerLeft, #MainRight #OrderDetails .InnerRight {
      display: flex;
      flex-direction: column; }
    #MainRight #OrderDetails .InnerRight {
      margin-left: 10px; }
    #MainRight #OrderDetails fieldset {
      width: 100%; }
    #MainRight #OrderDetails label {
      clear: left;
      float: left;
      font-size: 16px;
      margin: 5px 0; }
    #MainRight #OrderDetails span {
      float: left;
      position: relative;
      font-size: 16px;
      font-weight: bold;
      padding: 5px;
      opacity: 1;
      transition: unset;
      color: #606060;
      pointer-events: auto; }
    #MainRight #OrderDetails #Consignments {
      float: left;
      width: 50%;
      box-sizing: border-box; }
      #MainRight #OrderDetails #Consignments a {
        font-size: 16px;
        margin-left: 0;
        color: #606060; }
  #MainRight #OrderDetailsLines a, #MainRight #InvoiceDetailsLines a {
    font-size: 16px;
    color: #606060; }
  #MainRight #ConsentContainer section {
    margin-top: 20px; }
    #MainRight #ConsentContainer section .CheckboxOuterContainer {
      display: flex;
      justify-content: space-between;
      margin-top: 10px; }
    #MainRight #ConsentContainer section .CheckboxContainer {
      display: flex;
      align-items: center; }
    #MainRight #ConsentContainer section > span {
      font-size: 18px; }
    #MainRight #ConsentContainer section input {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border: 1px solid black;
      margin-right: 8px;
      box-sizing: border-box; }
      #MainRight #ConsentContainer section input:checked {
        background-color: #e9ecee;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
        color: #99a1a7; }
      #MainRight #ConsentContainer section input:checked:after {
        content: '\2714';
        font-size: 16px;
        color: black;
        box-sizing: border-box; }
      #MainRight #ConsentContainer section input:focus {
        outline: 0; }
    #MainRight #ConsentContainer section input:active, #MainRight #ConsentContainer section .regular-checkbox:checked:active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); }
    @media only screen and (max-width: 999px) {
      #MainRight #ConsentContainer section input {
        width: 32px;
        height: 32px; }
        #MainRight #ConsentContainer section input:checked:after {
          font-size: 32px; } }
    #MainRight #ConsentContainer section input {
      background-color: white; }
    #MainRight #ConsentContainer section label {
      font-size: 16px; }

@media screen and (max-width: 999px) {
  #PageContainer #MainContainer #MainInner #SubPageContent {
    flex-direction: column; }
    #PageContainer #MainContainer #MainInner #SubPageContent #MainLeft h1 {
      font-size: 30px;
      text-align: center; }
    #PageContainer #MainContainer #MainInner #SubPageContent #MainLeft ul li {
      border: 1px solid black;
      margin: 10px 0;
      padding: 10px 10px; }
      #PageContainer #MainContainer #MainInner #SubPageContent #MainLeft ul li a {
        font-size: 30px;
        text-decoration: none;
        margin-bottom: 0; }
  #MainRight {
    padding-top: 20px; }
    #MainRight h1 {
      font-size: 30px; }
    #MainRight fieldset label {
      width: 100%;
      font-size: 20px; }
    #MainRight fieldset input {
      width: 100%; }
    #MainRight table thead {
      display: none; }
    #MainRight table tbody td, #MainRight table tfoot td {
      font-size: 20px;
      margin: 10px 0; }
    #MainRight table tbody td::before {
      content: attr(data-th) " ";
      color: #606060; }
    #MainRight table .NormalButton {
      width: 100%;
      margin: 10px 0;
      font-size: 30px; }
    #MainRight .ResponsiveTable td {
      margin: 0.2em 0; }
    #MainRight #CustomerOrders .OrderListHeader {
      display: none; }
    #MainRight #CustomerOrders .OrderSummary {
      flex-wrap: wrap; }
      #MainRight #CustomerOrders .OrderSummary span {
        font-size: 20px; }
      #MainRight #CustomerOrders .OrderSummary .Number, #MainRight #CustomerOrders .OrderSummary .Date, #MainRight #CustomerOrders .OrderSummary .State, #MainRight #CustomerOrders .OrderSummary .Total {
        width: 50%;
        text-align: left;
        margin: 5px 0; }
        #MainRight #CustomerOrders .OrderSummary .Number::before, #MainRight #CustomerOrders .OrderSummary .Date::before, #MainRight #CustomerOrders .OrderSummary .State::before, #MainRight #CustomerOrders .OrderSummary .Total::before {
          content: attr(data-th) " ";
          color: #606060;
          display: block;
          font-size: 14px; }
      #MainRight #CustomerOrders .OrderSummary .Toggle {
        width: 100%;
        text-align: left;
        margin: 5px 0; }
        #MainRight #CustomerOrders .OrderSummary .Toggle .OrderLink {
          font-size: 20px; }
    #MainRight #CustomerOrders .Paging {
      font-size: 20px; }
    #MainRight #CustomerOrderDetails h2 {
      font-size: 24px; }
    #MainRight #CustomerOrderDetails .OrderInfo {
      flex-direction: column; }
      #MainRight #CustomerOrderDetails .OrderInfo .InfoBlock {
        flex-basis: auto; }
      #MainRight #CustomerOrderDetails .OrderInfo dt, #MainRight #CustomerOrderDetails .OrderInfo dd {
        font-size: 20px; }
    #MainRight #CustomerOrderDetails table.OrderTotals {
      width: 100%; }
      #MainRight #CustomerOrderDetails table.OrderTotals td {
        font-size: 20px; }
    #MainRight #CustomerOrderDetails .BackLink {
      font-size: 20px; }
    #MainRight #OrderDetails {
      flex-direction: column; }
      #MainRight #OrderDetails .Left, #MainRight #OrderDetails .Right {
        width: 100%; }
        #MainRight #OrderDetails .Left .InnerLeft, #MainRight #OrderDetails .Left .InnerRight, #MainRight #OrderDetails .Right .InnerLeft, #MainRight #OrderDetails .Right .InnerRight {
          width: 50%; }
      #MainRight #OrderDetails label, #MainRight #OrderDetails span, #MainRight #OrderDetails a {
        font-size: 20px; }
    #MainRight #OrderDetailsLines a, #MainRight #InvoiceDetailsLines a {
      font-size: 20px; }
    #MainRight #ConsentContainer {
      width: 100%; }
      #MainRight #ConsentContainer section {
        margin-top: 40px; }
        #MainRight #ConsentContainer section > span {
          font-size: 20px; }
        #MainRight #ConsentContainer section label {
          font-size: 30px; }
        #MainRight #ConsentContainer section .CheckboxOuterContainer {
          justify-content: space-between; } }
