.quote * {
    -webkit-touch-action: pan-y;
    -ms-touch-action: pan-y;
    -o-touch-action: pan-y;
    touch-action: pan-y;
}

.normal-space {
    margin-top: 20px;
}
.step-one-container {
    max-width: 900px;
    margin: auto;
}
.size-n-types-container {
    text-align: center;
}
.size-n-types-container .paper-types,
.size-n-types-container .paper-sizes{
    text-align: left;
    margin: auto;
}

.drawer {
    width:300px !important;
    border:none !important;
}
.md-app-side-drawer {
    z-index: 1;
}

.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: hsla(0,0%,65.9%,.67);
}

/* Resume Tour Icon customize window) */
.resume-tour {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1000;
    padding: 15px;
    border-radius: 100%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    transition: .3s;
    opacity: .9
}
.resume-tour i {
    font-size: 20px;
    height: 50px;
    width: 50px;
}
.resume-tour:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width:  calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 100%;
}
.resume-tour:hover {
    transform: scale(1.1);
    opacity: 1;
}
.resume-tour:active {
    color: #000
}
.resume-tour:active:after {
    background: transparent;
}
.resume-tour:hover:before {
    opacity: 1;
}
.resume-tour:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #007bff;
    left: 0;
    top: 0;
    border-radius: 100%;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
@media(max-width: 768px) {
    .resume-tour {
        right:  0px !important;
        bottom: 0px !important; 
        transform: scale(0.7);
        z-index: 1003 !important;
    }
}




.visible-768 {
    display: none;
}

@media(max-width: 768px) {
    .hidden-768 {
        display: none;
    }

    .visible-768 {
        display: block;
    }
}

::-moz-selection {
    /* Code for Firefox */
    color: white;
    background: #2f55d4 !important;
}

::selection {
    color: white;
    background: #2f55d4 !important;
}

.workspace {
    position: relative;
    width: 100%;
    padding-right: 20px;
    padding: 20px;
    background: #ffffff;
    padding-bottom: 75px;
    overflow: hidden;
    border: 1px solid #e2e2e2;
}
.machine {
    margin-top: 15px;
}
.machine .builder {
    width: 400px;
    margin: auto;
    height: 400px;
    position: relative;
    transition: .3s;
}

.md-app-container{
    overflow: hidden;
}
.machine .builder img {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 0;
    transition: .3s;
}

#customize-tab .md-app {
    border-right: none;
    border-top: none;
}

@media(max-width: 450px) {
    .machine .builder {
        width: 250px;
        height: 250px;
    }

    .machine .builder img {
        width: 250px;
        height: 250px;
    }
}

h6.legend {
    position: relative;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
}



/* Scale Image Animation */
.scale-img-enter-active {
    transition: all .8s ease;
}

.scale-img-leave-active {
    transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.scale-img-enter, .scale-img-leave-to {
    transform: scale(2);
    opacity: 0;
}

.cart-items {
    display: inline-block;
    position: relative;
    right: 0;
    height: 25px;
    width: 25px;
    margin-left: auto;
    padding-top: 2px;
    padding-left: 7px;
    background: #ff6c0e;
    font-style: normal;
    border-radius: 100%;
    color: #ffffff;
}

.window-navigation {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #f6f6f6;
    left: 0;
    border-top: 1px solid #e1e1e1;
    width: 100%;
    padding: 10px;
}

.lease-period {
    margin-top: 5px;
    padding: 20px;
    position: absolute;
    width: 100%;
    bottom: 80px;
}

.lease-period h6 {
    text-align: center;
}

@media(max-width: 768px) {
    .lease-period {
        width: 90%;
        left: 5%;
    }
}

.overall-total {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    bottom: 0;
    background: #f6f6f6;
    padding: 10px;
    border-top: 1px solid #e1e1e1;
    height: 60px;
}

.overall-total h5 {
    margin: 0;
    padding: 5px;
}

.overall-total h5:last-child {
    color: #2f55d4
}

.hidden-xs {
    display: inline;
}

@media(max-width: 575px) {
    .hidden-xs {
        display: none;
    }
}

.quote-radio {
    display: block;
    box-sizing: border-box;
    box-shadow: 0 1px 3px #d1d1d1;
    padding: 10px;
    cursor: pointer;
    transition: .3s
}

.quote-radio:hover {
    background: #eaeaea;
}

.quote-radio input {
    margin-right: 5px;
}

.live-picker .yield {
    max-width: 500px;
    width: 500px;
}

.copier-item {
    left: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.copier-item .image-stack {
    position: relative;
    left: 0;
}

.copier-item .image-stack img {
    position: absolute;
    left: 0;
}

.copier-item .details {
    text-align: left;
}

.paper-types, .paper-sizes {
    max-width: 200px;
}

.md-drawer {
    box-shadow: none !important;
    width: 300px;
}


/* Accessories Sidebar */
.accessories-title {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-right: 20px;
}
.accessory-sidebar {
    position: relative;
    top: 30px;
    padding-right: 20px;
}

.accessory-sidebar .category {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #d1d1d1;
    cursor: pointer;
}

.accessory-sidebar .category.active {
    background: #ffffff;
    border: 1px solid #d1d1d1;
    border-bottom: none
}

.accessory-sidebar .category.active .accessories {
    border: 1px solid #d1d1d1;
    border-top: none;
}

.accessory-sidebar .accessories.active {
    border: 1px solid #d1d1d1
}

.accessory-sidebar .accessories .item {
    display: flex;
    padding: 5px;
    cursor: pointer;
    justify-content: space-between;
}
.accessory-sidebar .accessories .item.disabled {
    cursor: not-allowed;
    justify-content: space-between;
    opacity: .3;
    user-select: none;
}

.accessory-sidebar .accessories .item img {
    width: 50px;
    height: 50px;
}

.accessory-sidebar .accessories .item .name {
    display: table;
    overflow: hidden;
}

.accessory-sidebar .accessories .item .name div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    padding-left: 10px;
}

.accessory-sidebar .accessories .item .indicator {
    font-size: 18px;
    display: table;
}

.accessory-sidebar .accessories .item .indicator i {
    position: relative;
    top: 15px;
    right: 5px;
}


/* Remove borders from panel slider */
.md-app .md-content.md-theme-default {
    /*     border-left: none; */
    border-right: none;
    padding-right: 0;
}
.sliders {
    padding: 15px 150px;
    padding-bottom: 30px;
}
.sliders .item {
    margin-top: 20px;
}
@media(max-width: 1024px) {
    .sliders {
        padding: 20px;
        border: 1px solid #e6e6e6;
        padding-top: 0px;
        padding-bottom: 35px;
        margin-top: 20px;
    }
    .sliders .item {
        position: relative;
    }
}

/* Brands Sidebar */
.brands-sidebar {
    position: absolute;
    top: 130px;
}
@media(max-width: 768px) {
    .brands-sidebar {
        position: relative;
        top: 0;
        display: flex;
        margin-top: 20px !important;
        justify-content: center;
    }
}
.brands-sidebar img {
    width: 60px;
    margin: auto;
    margin-bottom: 10px;
    border: 1px solid #d1d1d1;
    padding: 5px;
    cursor: pointer;
    transition: .3s;
}
.brands-sidebar img:hover{
    transform: scale(1.1)
}
.brands-sidebar .item.active img {
  background: #d1dbff;
  border: none;
  box-shadow: 0 2px 2px #d1d1d1;
}


/* Product Price */
.product-price {
    position: absolute;
    right: 0;
    top: 120px;
    transition: .4s
}
.product-price .item{
    display: block;
    margin-top: 20px;
}
.product-price .item .title {
    color: #868686;
    font-size: 14px;
    font-weight: 300;
}
.product-price .item .price {
    color: #000000;
    font-weight: 600;
    font-size: 20px;
    font-weight: 400;
    margin-top:5px
}
.product-price > .item {
    display: block;
}
.product-price > .item .price {
    color: #448aff;
    font-size: 25px;
    margin-top: 10px;
    font-weight: 600;
}

@media(max-width: 768px) {
    .product-price {
        display: flex;
        justify-content: space-between;
        position: relative;
        top: 0;
        right: 0;
        background: #ffffff;
    }
    .product-price .title {
        font-size: 12px !important;
    }
    .product-price .top-price {
        display: flex;
        width: 66%;
        justify-content: space-between;
        text-align: center;
    }
    .product-price .top-price .item{
        width: 50%;
    }
    .product-price .top-price .item:last-child {
        margin-right: 0;
    }
    .product-price .price.grand {
        font-size: 20px;
        top: 0;
        margin-top: 5px;
    }
    .product-price .cart-buttons {
        display: none !important;
    }
    .product-price .item {
        width: 33%;
        margin-right: 5px;
        padding: 5px;
        border: 1px solid #e8e8e8
    }
    .product-price > .item {
        text-align: center;
        margin-right: 0;
    }
}


/* Department */
.departments .department{
    margin-bottom: -1px;
    background: whitesmoke;
    padding-bottom: 3px;
}
.departments .department > .header {
    display: flex;
    justify-content: space-between;
    background: #007bff !important;
    border: 0 !important;
    padding: 15px;
    color: #fff !important;
}

.departments .department > .header .name {
    font-size: 16px;
    font-style: italic;
    color: #fff !important;
}



/* Copiers in a department */
.copiers {
     margin-right: 10px;
}
.copiers:last-child {
    margin-bottom: 10px;
}
.copiers .tree {
    width: 20px;
    height: 30px;
    border-left: 1px solid #777;
    border-bottom: 1px solid #777;
    margin-left: 10px;
}
.copiers .header {
    background: #ffffff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px !important;
    margin-top: 10px;
    border: 1px solid #d1d1d1;
    position: relative;
}
.copiers .header .name {
    margin-top: 0px;
    font-weight:500;
    font-size: 15px;
}


/* Controls */
.copiers .controls {
    display: flex;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 3px;
    border: none;
}
.copiers .controls button{
    display: block;
    color: #7c7c7c;
    border: none;
    height: 40px;
    background: #ffffff;
    text-align: center;
    width: 50px;
    border: none;
    font-size: 16px;
    transition: .3s;
}
.copiers .controls button:first-child:hover,
.copiers .controls button:last-child:hover{
    background: #e1e1e1;
}


/* Copier's copier */
.copiers .copier .tree {
    margin-left: 40px;
}
.copiers .copier .copier-alias {
    background: #ffffff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 7px;
    margin-top: 10px;
    border: 1px solid #d1d1d1;
    border-radius: 0;
}
.copier-alias .flex-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.copier-alias .flex-between .remove {
    width: 30px;
    height: 30px;
    padding: 6px;
    color: #a2a2a2;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
}
.copier-alias .flex-between .remove:hover {
    background:none;
    font-weight:500;
    color: #000000;
}


/* Add to Cart buttons */
.cart-buttons .button {
    background: none;
    padding: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: .4s;
    border-radius: 3px;
    font-size: 11px;
    text-align: center;
    width: 120px;
    color:#007bff;
    border: 2px solid #007bff;
    margin-bottom: 5px;
    display: block;
}
.cart-buttons .button:hover {
    background: #007bff;
    color:#ffffff;
}
.cart-buttons .button.fill {
    color:#ffffff;
    background: #007bff;
}
.cart-buttons .button.fill:hover {
    background: #007bff;
}

/* Sidebar toggle when small screen */
@media(max-width: 768px) {
    /* Hide sidebar when <= 768 */
    .md-drawer {
        display: none;
    }
    /* Remove left padding for builder */
    .md-app-container {
        padding-left: 0 !important;
    }
    /* Hide left border */
    .md-app .md-content.md-theme-default {
        border-left: none !important;
        padding-left: 0 !important;
    }
    /* Increase container width */
    .outer-container {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }
}




/* FORM ERRORS */
.form-errors {
    margin-top: 20px;
    padding-left: 0;
    list-style: none;
    padding: 25px;
}
.form-errors li {
    margin-top: 10px;
    color: #ff4646;
    font-size: 14px;
}
.form-errors li:before {
    content:"·";
    font-size:60px;
    vertical-align:middle;
    line-height:20px;
    margin-right: 10px;
    color: #ff8b8b;
}


/* MD SELECT BOX NEEDS TO HAVE HIGHER INDEX THAN EnjoyHint */
.md-select-menu {
    z-index: 100000 !important;
    margin-left: 10px;
}















/**********************************************/
/****** THIS PART IS SOLELY FOR SUMMARY *******/
/**********************************************/
.summary-lease-period {
    margin-top: 20px;
    padding: 10px;
}
.summary-lease-period > div {
    font-weight: 600;
    position: relative;
    top: -10px;
}
.lease-period-label {
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 50px;
    text-transform: uppercase;
}



.quote-modal {
    width: 100%;
    background: #0000009e;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9 !important;
    overflow: auto !important;
}

.quote-modal .login-form {
    width: 600px;
    margin: auto;
    background: #ffffff;
    margin-top: 150px;
    box-shadow: 0 3px 20px #4f4f4f;
    border-radius: 3px;
    padding: 20px;
    position: relative;
    overflow: auto !important;
}

.quote-modal .register-wrapper {
    width: 80%;
    margin: auto;
    background: #ffffff;
    margin-top: 150px;
    box-shadow: 0 3px 20px #4f4f4f;
    border-radius: 3px;
    padding: 20px;
    position: relative;
    overflow-y: auto !important;
    margin-bottom: 90px;
}
@media(max-width:768px) {
    .quote-modal .register-wrapper {
        margin-top: 80px;
        width: 95%;
    }
    .captcha-n-submit {
        max-width: 100% !important;
        transform: scale(0.9);
    }
}
@media(max-width: 400px) {
    #html_element {
        margin: auto !important;
        position: relative;
        display: block;
        transform: scale(0.8);
        left: -20px !important;
    }
}
.quote-modal .register {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
@media(max-width: 768px) {
    .quote-modal .login-form {
        width: 85%;
    }
}
@media(max-width: 900px) {
   .quote-modal .register .register-image {
        display: none !important;
   }
}
.quote-modal .register > .close,
.quote-modal .login-form > .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
}
.quote-modal .login-form > .close:hover {
    color: black;
}
.quote-modal .register {
    width: 80%;
    height: 60% !important;
    margin: auto;
    background: #ffffff;
}

/* Department and Copier name on top of Image */
.copier-top-items {
    display:flex;
    justify-content: space-between;
    margin-top: -20px;
    height: 55px;
}
.copier-top-items .hidden-xs {
    width: 120px;
}
.copier-top-items .department-name {
    text-align: center;
    margin: auto;
}
@media(max-width: 768px) {
    .copier-top-items {
        margin: auto;
        text-align: center;
    }
    .copier-top-items .hidden-xs {
        display: none;
    }
}


/* CURRENTLY LOGGED IN USER TOPBAR */
.user-topbar {
    width: 100%;
    background: #6b26e7;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #5342b6;
}
.user-topbar div.profile{
    display: block;
    color: #ffffff;
    font-style: normal;
    position: relative;
}
.user-topbar div.profile img.avatar{
    width:  30px;
    height: 30px;
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: 20px;
}
.user-topbar div.profile div.name {
    padding: 10px;
    margin-left: 30px;
    font-weight: bold;
}
.user-topbar div.links{
    display: block;
}
.user-topbar div.links a{
    display: inline-block;
    padding: 10px;
    color: #dcdcdc;
}
.user-topbar div.links a:hover {
    color: #ffffff;
    text-decoration: none;
}
.login {
   width: 600px;
   margin: auto;
   margin-top: 120px;
   margin-bottom: 120px;
   padding: 20px;
   box-shadow: 0 1px 5px #d1d1d1;
}

@media(max-width: 768px) {
    .login {
        width: 90%;
    }
}
@media(max-width: 575px) {
    .login {
        width: 95%;
    }
}




/* Copier Pagination below the department name in customize */
.copier-pagination {
    display: flex;
    justify-content: center;
}

.copier-pagination .paginator {
    font-style: normal !important;
    font-size: 30px;
    margin: 0 10px;
    background: #007bff;
    color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
    width: 30px;
    height: 28px;
    display: block;
    transition: .3s;
    user-select: none;
}
.copier-pagination .paginator:hover {
    background: #086fde
}

.copier-pagination .label {
    margin-top: 3px;
    font-size: 12px;
}




.lease-application-button {
    background: transparent;
    border: 3px solid #448aff;
    font-size: 14px;
    padding: 10px 15px;
    min-width: 250px;
    color:#448aff;
    border-radius: 5px;
    font-weight: bold;
    transition: .5s;
}
.lease-application-button:hover {
    background: #448aff;
    color: #ffffff;
}
@media(max-width: 350px) {
    .lease-application-button {
        width: 90% !important
    }
}


.enjoyhint_close_btn {
    border-color: #007bff !important;
    transition: .4s;
    border-radius: 5px !important;
}
.enjoyhint_close_btn:hover {
    background: #007bff !important;
}
.enjoy_hint_label {
    background: none !important;
}


@media(min-width: 1024px) {
    .enjoyhint_close_btn {
        top: 100px !important;
        right: 100px !important;
        font-size: 150px !important;
    }
}

.enjoyhint_next_btn,
.enjoyhint_skip_btn,
.enjoyhint_prev_btn {
    border-color: #3697ff !important;
    color: #ffffff !important;
    border-radius: 5px !important;
}

.enjoyhint_next_btn:hover,
.enjoyhint_skip_btn:hover,
.enjoyhint_prev_btn:hover {
    background: #3697ff !important;
}

.md-dialog-actions .md-button{
    color: #448aff !important;
}
.md-dialog-actions .md-button:hover {
    background: #d1d1d1;
}


/* Fix ugly button */
.md-tabs-navigation .md-button:hover {
    background: none !important
}


/* Fix ugly multiselect textbox */
.multiselect__input {
    border-radius: 0 !important;
    margin-bottom: 20px;
}
.multiselect__input:focus {
    margin-bottom: 20px !important;
    padding: 15px !important
}


.pdf-files-list div a {
    display: block;
    max-width: 400px;
    padding: 7px;
    border: 2px solid #ff5252;
    border-radius: 3px;
    color: #ff5252 !important;
}
.pdf-files-list div a:hover {
    text-decoration: none;
    background: #ff5252;
    color: #fff !important;
}
.pdf-files-list .md-icon {
    color: #ff5252 !important;
    margin-right: 5px;
}
.pdf-files-list div a:hover > .md-icon {
    color: #fff !important;
}


.short-description {
    font-size: 16px;
    width: 70%;
    margin: auto;
    text-align: center;
    color: #828395
}



.md-snackbar{
    background: white !important;
    color: #000000 !important
}
.md-snackbar .md-button:hover{
    background: #d1d1d1;
    color: #d1d1d1
}
    
.enjoyhint_prev_btn.fix{
    left: 520px !important;
    margin-top: 120px !important;
}
.enjoyhint_next_btn.fix {
   left: 630px !important;
   margin-top: 120px !important;
}



#meanmenu {
    z-index: 100 !important;
}


/* If 11x17 is the only size selected, 
disable user from adding an a4 copier */
.cant-select-a4 * {
    opacity: .4;
    user-select: none;
    cursor: not-allowed
}
.cant-select-a4 {
    cursor: not-allowed
}

.md-tooltip {
    font-size: 14px !important;
    font-weight: normal;
    padding: 10px !important;
    max-height: auto !important;
    height: 40px !important;
    word-wrap: break-word !important;
    display: block !important;
}




 div#printer-repair-page {
    background: url(/wp-content/uploads/2021/07/SOS_02.15_BlogPost.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    transition: .4s
}

.repair-search {
    max-width: 500px;
    background: #fff;
    margin: auto;
    padding: 25px;
    box-shadow: 0 1px 2px #929292
}

.repair-search .title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
    margin-bottom: 25px
}

.repair-search small {
    font-size: 14px;
}

.repair-search .form {
    display: block
}

.repair-search input, .repair-search button {
    border: none;
    width: 100%;
    padding: 20px
}

.repair-search input {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background: #e4e4e4;
    font-size: 25px !important;
    height: 60px;
    text-align: center
}

.repair-search button {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 14px
}

.repair-search button:hover {
    background: #4a61de;
    background-position: bottom;
    transition: .3s
}

.alert .message {
    font-size: 17px;
    margin: 0;
    color: #ff0040
}

.alert .sub-message {
    font-size: 14px;
    margin: 5px 0;
    color: #6f6f6f
}

.repair-search .footer-details {
    text-align: center;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #e1e1e1
}

.repair-search .footer-details * {
    margin: 0;
    padding: 0
}

.loader-wrapper {
    display: flex;
    justify-content: center
}

.loader-wrapper .message {
    position: relative;
    top: 5px;
    left: 5px
}

.printer-repair-features {
    width: 100%
}

.printer-repair-features .main {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly
}

.printer-repair-features .main .item {
    background: #fff;
    width: 33.33%;
    text-align: center;
    box-shadow: 0 3px 2px #b7b7b7
}

.printer-repair-features .main .item .title {
    margin: 0;
    background: #2c4054;
    color: #fff;
    padding: 10px
}

.printer-repair-features .main .item .content {
    margin: 0;
    padding: 10px 15px
}

.printer-repair-features .main .item img {
    width: 150px
}

.printer-repair-features {
    border-top: 3px solid #e8bfab
}

.printer-repair-features h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-top: 50px
}

@media (max-width: 768px) {
    .repair-search {
        width: 90%;
        margin: auto
    }

    .printer-repair-features .main {
        display: block
    }

    .printer-repair-features .main .item {
        width: 100%;
        margin-bottom: 30px
    }
}

@media (max-width: 575px) {
    .printer-repair-features .main {
        width: 90%
    }
}




/* small-screen-accessories-toggle */
.small-screen-accessories-toggle {
    display: none;
    position: absolute;
    top: 250px;
    left: -1px !important;
    z-index: 1 !important;
    background: #e3e3e3;
    border-radius: 3px;
}
.small-screen-accessories-toggle:hover {
    background: #007bff !important;
}
small-screen-accessories-toggle .label {
    line-height: 1px !important;
    letter-spacing: 1px !important;
    background: red !important;
}
@media(max-width: 768px) {
    .small-screen-accessories-toggle {
        display: block;
    }
}

@media(max-width: 450px) {
    .small-screen-accessories-toggle {
        top: 220px !important;
    }
}


.mini-accessories {
    background: #0000002e;
    width: 100%;
    box-shadow: 0 3px 23px #000000ad !important;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 53px !important;
    display: flex;
    min-height: 100% !important;
}
.mini-accessories .wrapper {
    background: #000000b3 !important;
    width: 65%;
    height: 100%;
    position:absolute;
    padding-bottom: 20px;
    min-height: 100% !important;
    box-shadow: 0 3px 20px #292929;
}
.mini-accessories .wrapper h4{
    text-align: center;
    margin-top: 20px;
}
.mini-accessories .filler {
    width: 100%;
}
.mini-accessories .close-modal-indicator {
    width: 200px;
    display: block !important;
    position: absolute;
    top: 45%;
    border-top-left-radius: 100% !important;
    border-bottom-left-radius: 100% !important;
    right: 0;
}
.mini-accessories img {
    width: 40px;
    max-width: 40px;
    height: 40px;
    max-height: 40px;
    border-radius: 4px;
    opacity: .9;
}
.mini-accessories .close {
    font-size: 30px;
    position: relative;
    right: 10px;
    opacity: 1 !important;
    font-weight: normal;
    color: #ffffff;
}
.mini-accessories .category {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #202020;
    border-color: #4a4a4a !important;
    color: #fff;
    background: #0000009c;
}
.mini-accessories .accessories .item {
    padding: 3px;
    display: flex;
    justify-content: space-between;
}
.mini-accessories .accessories .item .fa {
    margin-top: 13px;
    margin-right: 5px;
}
.mini-accessories .accessories .item:hover {
    cursor: pointer;
    font-weight: 500;
    transition: .2s;
}
.mini-accessories .accessories .item .name {
    padding: 10px 3px;
    color: #ffffff;
    font-size: 11px;
}
.mini-accessories .mt-3.text-center a {
    color: #00bdff;
}



.mini-cart-buttons {
    display:none;
    z-index: 1000;
    text-align: center;
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 30px;
    padding-bottom: 20px;
}
.mini-cart-buttons .not-in-cart {
    display: flex;
    justify-content: center;
    width: 100% !important;
    max-width: 250px;
    margin: auto;
}
@media(max-width: 768px) {
    .mini-cart-buttons {
        display: block;
    }
}
.mini-cart-buttons .button {
    width: 100%;
    display: block;
    font-size: 10px;
    color: #007bff;
    background: none;
    border: 1px solid #007bff;
    margin-top: 3px;
    text-align: center;
    padding: 5px 0px;
    border-radius: 3px;
    cursor: pointer;
    transition: .2s;
    margin: 0px 5px;
    width: 100% !important;
}
.mini-cart-buttons .m-auto{
    display: flex;
    justify-content: center;
    margin: auto !important;
}

.mini-cart-buttons .button.fill {
    background: #007bff;
    color: #fff;
}
.mini-cart-buttons .button:hover {
    background: #0869d3;
    color: #ffffff;
}


/* Brand picker became unclickable, increase z-index */
#tour_brand_picker {
    z-index: 1000;
}

.enjoy_hint_label {
    font-size: 20px !important;
}
@media(min-width: 768px) {
    /* Increase enjoyhint font size */
    .enjoy_hint_label {
        font-size: 30px !important;
        max-height: 100% !important;
        min-height: 30px !important;
        line-height: 30px !important;
    }
}








.multiselect__option.multiselect__option--highlight:after {
    position: absolute;
    z-index: 100000000 !important;
    font-size: 18px;
}


/* We are hacking multiselect to add a placeholder
 * after the added tags
 */
.multiselect__tags .placeholder {
    position: relative;
    bottom: 10px;
    left: 10px;
    color: #bdbdbd;
    font-size: 14px;
}

@media(max-width: 575px) {
    .multiselect__tags .placeholder {
        display: block;
        margin-top: 15px;
    }
}



/* Mobile fixes only for the quote tool*/
@media(max-width: 575px) {
    .workspace {
        padding: 0 !important;
        border: none !important;
        margin-top: 20px;
        padding-bottom: 120px !important;
    }

    .copier-top-items {
        text-align:center !important;
        display: block !important;
        margin: auto !important;
    }
}



.summary-buttons-lg {
    display: flex;
}
.summary-buttons-xs {
    display: none;
}

@media(max-width: 500px) {
    .summary-buttons-lg {
        display: none !important;
    }
    .summary-buttons-xs {
        display: flex !important;
    }
    .summary-buttons-xs .md-button {
        padding: 5px !important;
        height: 30px;
        min-width: 70px;
    }
    .summary-buttons-xs .md-button-content {
        font-size: 10px;
    }

    .price-breakdown .prints .title,
    .price-breakdown .prints .value {
        font-size: 13px !important;
    }
    .product-price .price {
        font-size: 16px !important;
        font-weight: 500;
    }
}


/* Increment/Decrement buttons in step one */
@media(max-width: 768px) {
    .header.a3-container,
    .header.a4-container {
        display: block !important;
    }
    .header.a3-container .name,
    .header.a4-container .name {
        font-size: 14px !important;
    }
    .header.a3-container .name br,
    .header.a4-container .name br {
        display: none;
    }
    .controls.A3,
    .controls.A4 {
        display: flex !important;
        justify-content: center;
        position: relative !important;
    }
}
.floating-phone,
.small-screen-bottom-bar {
    display: none;
    transition:.4s;
}


/* Floating taskbar and phone number @768 */ 
@media(max-width: 768px) {
    .floating-phone {
        position: fixed;
        left: 10px;
        bottom: 13px;
        z-index: 1000;
        display: block
    }
    .small-screen-bottom-bar {
        left: 0;
        right: 0;
        bottom: 0;
        z-index:10;
        width: 100%;
        height: 50px;
        display: block;
        position: fixed;
        background: #fff;
        border-top: 1px solid #c9c9c9;
        box-shadow: 0 3px 20px #d1d1d1;
    }
}


/* Exceeds max prints style */
.exceed-max-prints .message {
    position: absolute;
    top: 35% !important;
    z-index: 500;
    margin: auto;
    font-size: 20px;
    background: #d1d1d159;
    padding: 20px;
}
@media(max-width: 575px) {
    .exceed-max-prints .message {
        font-size: 14px;
        padding: 10px;
    }
}
.opaque {
    opacity: .5;
}


@media(max-width: 575px) {
    .multiselect {
        width: 99% !important;
    }
}