.mr2,
.search-box .s-box-1.mr2 {
    margin-right: 32px;
}

.mt1,
.search-box .s-box-1.mt1,
.search-box .s-box-4.mt1  {
    margin-top: 8px;
}

.mt2 {
    margin-top: 16px;
}

.mb2 {
    margin-bottom: 16px;
}

.mb3 {
    margin-bottom: 24px;
}

.pr1 {
    padding-right: 8px;
}

.rd-header { 
    position: fixed;
    height: 70px;
    border-bottom: 1px solid #ccc;
    z-index: 2;
    width: 100%;
    background-color: #fff;
    height: 32px;
}
.rd-aside-nav { 
    min-width: 250px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: fixed;
    top: 70px;
    left: 0px;
}

.aside-content {
    overflow-y: auto;
    margin-bottom: 70px;
    background-color: #fff;
}

.aside-content a, a {
    text-decoration: none;
    color: #000;
}

h2 {
    margin-top: 48px;
    margin-bottom: 12px;
}

h3 {
    margin-top: 48px;
    margin-bottom: 12px;
}

.header-container {
    padding: 0px 32px;
    align-items: center;
    display: flex;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow {
    flex-grow: 1;
}

.flex-column {
    flex-direction: column;
}

.aside-content {
    padding: 12px 24px;
}

.nav-item {
    padding: 12px;
}
.nav-item:hover {
    background-color: #ccc;
    cursor: pointer;
}

h1 {
    font-family: "RotorFont500";
}

.page-title {
    font-size: 1.2rem;
}

.page-subtitle, .page-version {
    font-weight: 100;
    font-size: 1.2rem;
}

.nav-item-section {
    font-family: "RotorFont500";
    margin-top: 16px;
}

.page-content {
    display: flex;
}

.rd-main {
    width: 80%;
    max-width: 1180px;
    margin: auto;
    text-align: left;
    padding: 32px;
}

.right-nav {
    position: fixed;
    left: 85%;
    padding-top: 180px;
}

.right-nav li {
    padding: 6px 12px;
    list-style-position: inside;
}

.right-nav ul ul li{
    padding: 6px 12px 6px 36px;
}

.right-nav ul ul ul li{
    padding: 6px 12px 6px 52px;

}

.demo {
    margin: 20px 0px;

}

.demo .code {
    background-color: #193c63;
    color: #fff;
    font-family: monospace;
    font-weight: 400;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}

.demo .code * {
    font-family: monospace;
    font-weight: 400;
}

.demo .demo-example {
    display: flex;
    justify-content: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 20px 20px 0 0;
    flex-wrap: wrap;
}

.rotor-btn {
    padding: 6px 16px 4px 16px;
    background-color: #2D6BFF;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #fff;
    border: 0px;
    margin: 5px 20px;
    border: 1px solid #2D6BFF;
    height: 32px;
}

.rotor-btn.rotor-btn--stroked {
 background-color: transparent;
 border: 1px solid #2D6BFF;
 color:#2D6BFF;
}

.rotor-btn--transparent {
    background-color: transparent;
    border: 0px;
    color:#2D6BFF;
}

.rotor-btn--dark {
    background-color: #666;
    color: #fff;
    border: 1px solid #666;
}

.rotor-btn--green {
    background-color: #50D264;
    color: #000;
    border: 1px solid #50D264;
}

.rotor-btn--yellow {
    background-color: #FFEE17;
    color: #000;
    border: 1px solid #FFEE17;    
}

.rotor-btn--red {
    background-color: #D20532;
    color: #fff;
    border: 1px solid #D20532;
}

.rotor-btn--orange {
    background-color: #E4551F;
    color: #000;
    border: 1px solid #E4551F;
}

.rotor-btn--brown {
    background-color: #F2A900;
    color: #fff;
    border: 1px solid #F2A900;
}


.rotor-btn--light {
    background-color: #D1D1D1;
    color: #000;
    border: 1px solid #D1D1D1;
}

.rotor-btn--stroked.rotor-btn--dark {
    background-color: transparent;
    border: 1px solid #666;
    color: #000;
}

.rotor-btn--stroked.rotor-btn--green {
    background-color: transparent;
    color: #000;
    border: 1px solid #50D264;
}

.rotor-btn--stroked.rotor-btn--yellow {
    background-color: transparent;
    color: #000;
    border: 1px solid #FFEE17;    
}

.rotor-btn--stroked.rotor-btn--red {
    background-color: transparent;
    color: #000;
    border: 1px solid #D20532;
}

.rotor-btn--stroked.rotor-btn--orange {
    background-color: transparent;
    color: #000;
    border: 1px solid #E4551F;
}

.rotor-btn--stroked.rotor-btn--brown {
    background-color: transparent;
    border: 1px solid #F2A900;
}

.rotor-btn--stroked.rotor-btn--light {
    background-color: transparent;
    border: 1px solid #D1D1D1;
}

.rotor-btn--small {
    width: 80px;
    padding: auto;
}

.rotor-btn--medium {
    width: 124px;
}

.rotor-btn--large {
    width: 256px;
}

.rotor-btn--full {
    width: 100%;
}

.btn-conatiner {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.btn-conatiner label {
    font-size: 12px;
}

.flex-column {
    flex-direction: column;
}

.flex {
    display: flex;
} 

.flex-row {
    flex-direction: row;
}
.flex-center {
    justify-content: center;
}

.page-list{
    margin: 12px 24px;
    padding-left: 12px;
}

.page-list li{
    margin-left: 12px;
    padding-left: 12px;
}

.rotor-btn:hover,  .rotor-btn--hover {
    background-color: #4F4F4F;
    color: #fff;
    border: 1px solid #4F4F4F;
    cursor: pointer;
}

.rotor-btn--transparent:hover {
    background-color: transparent;
    border: 0px;
    color: #777;
}

.rotor-btn:active, .rotor-btn--active, .rotor-btn--active:hover{
    background-color: #7799FF;
    color: #000;
    border: 1px solid #7799FF;
    cursor: pointer;
}

.rotor-btn--light:active {
    background-color: #363737;
    color: #fff;
    border: 1px solid #363737;
}

.rotor-btn--dark:active {
    background-color: #333333;
    color: #fff;
    border: 1px solid #333333;
}

.rotor-btn--green:active {
    background-color: #71FFB1;
    color: #000;
    border: 1px solid #71FFB1;
}

.rotor-btn--yellow:active {
    background-color: #FFFF5D;
    color: #000;
    border: 1px solid #FFFF5D;    
}

.rotor-btn--red:active {
    background-color: #FF554F;
    color: #000;
    border: 1px solid #FF554F;
}

.rotor-btn--orange:active {
    background-color: #FF9477;
    color: #000;
    border: 1px solid #FF9477;
}

.rotor-btn--brown:active {
    background-color: #F2A900;
    color: #fff;
    border: 1px solid #F2A900;
}

.rotor-btn--transparent:active {
    background-color: transparent;
    border: 0px;
    color: #2D6BFF;
}

.rotor-btn--disabled, .rotor-btn--disabled:hover, .rotor-btn--disabled:hover, .rotor-btn:disabled  {
    background-color: #A6A6A6;
    color: #666;
    border: 1px solid #A6A6A6;
    cursor: not-allowed;
}

.rotor-checkbox {
    height: 16px;
    width: 16px;
    margin-right: 7px;
    box-sizing: border-box;

}


.rotor-checkbox {
    opacity: 0;
    position: relative;
    margin-right: -18px;
}
.rotor-checkbox, .rotor-checkbox__label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.rotor-checkbox + .rotor-checkbox__label:before {
    content: ' ';
    background: transparent;
    border: 2px solid #666666;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 10px;
    text-align: center;
}

.rotor-checkbox:disabled + .rotor-checkbox__label:before {
    background-color: transparent;
    border: 2px solid #a6a6a6;
    content: '';
    color: #fff;
    font-size: 13px;
    line-height: 13px;
    cursor: not-allowed;
}

.rotor-checkbox:disabled + .rotor-checkbox__label {
    color: #a6a6a6;
    cursor: not-allowed;
}

.rotor-checkbox:checked + .rotor-checkbox__label:before {
    background: #2D6BFF;
    border: 2px solid #2D6BFF;
    content: '\f00c';
    font-family: FontAwesome;
    color: #fff;
    font-size: 13px;
    line-height: 13px;
}

.rotor-checkbox:disabled:checked + .rotor-checkbox__label:before {
    background-color: #a6a6a6;
    border: 2px solid #a6a6a6;
    content: '\f00c';
    color: #777;
    font-size: 13px;
    line-height: 13px;
    cursor: not-allowed;
}

.rotor-checkbox__label {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}
.rotor-checkbox {
    height: 16px;
    width: 16px;
    margin-right: 7px;
    box-sizing: border-box;

}


.rotor-radio {
    opacity: 0;
    position: relative;
    margin-right: -18px;
}
.rotor-radio, .rotor-radio__label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.rotor-radio + .rotor-radio__label::before {
    content: '';
    background: transparent;
    border: 2px solid #666;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
}

.rotor-radio:disabled + .rotor-radio__label::before {
    background-color: transparent;
    border: 2px solid #a6a6a6;
    content: '';
    color: #fff;
    cursor: not-allowed;
}

.rotor-radio:disabled + .rotor-radio__label {
    color: #B1B3B3;
    cursor: not-allowed;
}

.rotor-radio:checked + .rotor-radio__label::before {
    border: 4px solid #2D6BFF;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
}

.rotor-radio:disabled:checked + .rotor-radio__label:before {
    border: 4px solid #B1B3B3;
    background-color: #63666A;
}

.rotor-radio__label {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.pending div {
    color: #aaa;
}

.demo1 {
    display: flex;
    width: 300px;
    margin: 8px auto;
}

.demo-example .btn-conatiner label {
    min-width: 120px;
}

.rotor-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

.rotor-switch .rotor-switch-input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.rotor-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 12px;
}

.rotor-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  background-color: #000000;
  -webkit-transition: .4s;
  transition: .4s;
}

.rotor-switch .rotor-switch-input:checked + .rotor-slider {
  background-color: #34CB81;
}

.rotor-switch .rotor-switch-input:focus + .rotor-slider {
  box-shadow: 0 0 1px #34CB81;
}

.rotor-switch .rotor-switch-input:checked + .rotor-slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
  background-color: #fff;
}

.rotor-switch .rotor-switch-input:disabled + .rotor-slider {
    background-color: #B1B3B3;
    cursor: not-allowed;
}

.rotor-switch .rotor-switch-input:disabled + .rotor-slider:before {
    background-color: #63666A;
}

.rotor-switch:has(.rotor-switch-input:disabled)  + label {
    color: #B1B3B3;
}

.rotor-switch-label {
    margin-left: 5px;
}


/************************
***Numerical Select******
*************************/


.rotor-numerical-select__quantity {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.rotor-numerical-select__quantity:focus, .rotor-numerical-select__quantity:focus-visible {
    outline: 0px;
}

.rotor-numerical-select__quantity::-webkit-inner-spin-button,
.rotor-numerical-select__quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.rotor-numerical-select {
    border:  1px solid #D1D1D1;
    display: inline-flex;
}

.rotor-numerical-select,
.rotor-numerical-select * {
    box-sizing: border-box;
}

.rotor-numerical-select .rotor-numerical-select__button {
    outline:none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    position: relative;
    border:  0px solid #D1D1D1;
}

.rotor-numerical-select button:before,
.rotor-numerical-select button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 10px;
    height: 2px;
    background-color: #666666;
    transform: translate(-50%, -50%);
}
.rotor-numerical-select button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.rotor-numerical-select .rotor-numerical-select__quantity {
    max-width: 5rem;
    padding: .5rem;
    border:  1px solid #D1D1D1;
    border-width: 0 1px;
    font-size: 14px;
    height: 32px;
    text-align: center;
}

.rotor-numerical-select:has(.rotor-numerical-select__quantity:focus-visible), .rotor-numerical-select--focused {
    border:  1px solid #2D6BFF;
}

.rotor-numerical-select__quantity:focus-visible, .rotor-numerical-select--focused .rotor-numerical-select__quantity {
    border:  1px solid #2D6BFF;
    border-width: 0 1px;
}


.rotor-numerical-select:has(.rotor-numerical-select__quantity:hover), .rotor-numerical-select--hover {
    background-color: #F7F7F7;
}

.rotor-numerical-select__quantity:hover, .rotor-numerical-select--hover .rotor-numerical-select__quantity {
    background-color: #F7F7F7;
}

.rotor-numerical-select:has(.rotor-numerical-select__quantity:disabled), .rotor-numerical-select--disabled {
    background-color: #A6A6A6;
    border: 1px solid #A6A6A6;
    cursor: not-allowed;
    color: #666666;
}

.rotor-numerical-select__quantity:disabled, .rotor-numerical-select--disabled .rotor-numerical-select__quantity, .rotor-numerical-select--disabled .rotor-numerical-select__button {
    background-color: #A6A6A6;
    border: 1px solid #A6A6A6;
    cursor: not-allowed;
    color: #666666;
}


 .rotor-numerical-select--success {
    border:  1px solid #50D264;
}

.rotor-numerical-select--success .rotor-numerical-select__quantity {
    border:  1px solid #50D264;
    border-width: 0 1px;
}

 .rotor-numerical-select--error {
    border:  1px solid #D20532;
}

 .rotor-numerical-select__quantity {
    border:  1px solid #D20532;
    border-width: 0 1px;
}

.rotor-loading-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #D1D1D1;
    border-bottom-color: #666666;
    border-radius: 50%;
    box-sizing: border-box;
    margin: 16px auto;
    display: block;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.rotor-loading-spinner--definite {
      width: 48px;
      height: 48px;
      border:5px solid #D1D1D1;
      border-radius: 50%;
      position: relative;
      transform:rotate(45deg);
      box-sizing: border-box;
}
.rotor-loading-spinner--definite::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset:-5px;
    border-radius: 50%;
    border:5px solid #666666;
    animation: prixClipFix 2s infinite linear;
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
      

/*****************
*******Extra******
*****************/

.content-spacing > span {
    margin:0px 20px;
}

.content-spacing .rotor-numerical-select {
     margin:20px auto;
}

.rotor-textbox {
    border: 1px solid #D1D1D1;
    border-radius: 0px;
    height: 32px;
    background-color: #fff;
    font-size: .8rem;
    min-width: 14.25rem;
    padding: 0 0.5rem;
    font-family: 'RotorFont';
}

.rotor-textbox.rotor-textbox--error,
#sold_to_account.rotor-textbox.rotor-textbox--error {
    border: 1px solid #EB1616;
    color: #EB1616;
}

.rotor-textbox:hover {
    border: 1px solid #D1D1D1;
    background: #F7F7F7;
    border-radius: 0px;
}

.rotor-textbox:focus, .rotor-textbox:focus-visible, .rotor-textbox:focus-within {
    border: 1px solid #2D6BFF;
    background: #F7F7F7;
    border-radius: 0px;
    outline: 0px;
}

.button-link {
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-sizing: border-box;
}

a.button-link:hover, a.button-link:active, a.button-link:visited, a.button-link:link {
    color: #fff;
    font-size: 14px;
}