/* **------------------------------------------------------------------------------------- ** GLOBAL TEMPLATE STYLES **------------------------------------------------------------------------------------- */ html { -webkit-font-smoothing: antialiased; background-color: #e2e2e2; font-size: 16px; scroll-behavior: smooth; } html.disable-smooth-scroll { scroll-behavior: auto !important; } body { font-family: 'Pragmatica', sans-serif; font-weight: 300; font-style: normal; } body.x-body { font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; font-style: inherit !important; color: #4d565f !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Pragmatica', sans-serif; font-weight: 200; font-style: normal; } h1 { font-size:2rem; } /* ADA safe color contrast override (replaces default primary color in Bootstrap */ a { color: #1E6DF6; text-decoration: none; background-color: transparent; } /* **------------------------------------------------------------------------------------- ** COLOR UTILIY CLASSES (global) **------------------------------------------------------------------------------------- */ body.ADA #navigation-bar .nav-item a.nav-link, #navigation-bar .navbar-toggler { color: #000000 !important; } /* ADA safe color contrast override (replaces default primary color in Bootstrap */ .btn-primary { color: #fff; background-color: #1E6DF6; border-color: #1E6DF6; } /* ADA safe color contrast override (replaces default primary color in Bootstrap */ .text-primary { color: #1E6DF6 !important; } .bg-black { background: black; } .bg-darkgray { background-color: #464646; } .btn-white { background-color: #FFFFFF; color: #212529; } .btn-lightgray { background-color:#f5f4f4 !important; } .bg-white { background-color: #FFFFFF !important; } .bg-lightgray { background-color: #737373; } .bg-lightgreen { background-color:#e4fbcd; } .bg-footer { background-color: #464646; } .bg-hero { background: #acacac; } .bg-promobar { background: #90201a; } .border-bottom { border-bottom: 1px solid #999999 !important; } .border-light-gray { border: 1px solid #ddd !important; } .border-gray60 { border: 1px solid #999 !important; } .bg-orange { background: #fd8210; } .text-orange { color: #FF9900; } .bg-danger-light { background-color: #fceff0; } .bg-alerts-red { background-color: #f5002d; } /* opacity custom utility classes */ .opacity-0 { opacity: 0; } .opacity-1 { opacity: 0.1; } .opacity-2 { opacity: 0.2; } .opacity-3 { opacity: 0.3; } .opacity-4 { opacity: 0.4; } .opacity-5 { opacity: 0.5; } .opacity-6 { opacity: 0.6; } .opacity-7 { opacity: 0.7; } .opacity-8 { opacity: 0.8; } .opacity-9 { opacity: 0.9; } .opacity-hover-off:hover { opacity: 1.0; } /* misc classes - needs to be moved elsewhere, they dont go in this section */ .actionbuttons button.btn-light { color: #1E6DF6; } .modal { z-index:99999999 !important; } .modal-content .border-bottom { border-bottom: 1px solid #dee2e6 !important; } .file-drop-zone-title { padding: 40px 10px !important; } .file-drop-zone { display:flex !important; justify-content: center !important; } @media (min-width: 1px) and (max-width:568px) { .file-preview { display:none !important; } } /* dropshadow style for gallery view card components */ .card-drop-shadow { box-shadow: 0 0 10px rgba(0,0,0,0.1); } /* used on standardized links with FA icons and text to eliminate the underscore next to the icon on links */ /* used to remove underline completely from link and then only add it back to the span with text in it on hover */ a.icon-link { text-decoration: none !important; } a.icon-link:hover > span { text-decoration: underline !important; } /* **------------------------------------------------------------------------------------- ** FONT UTILITY CLASSES (global) **------------------------------------------------------------------------------------- */ .ffmeta { font-family: ff-meta-web-pro, serif !important; } .laski { font-family: laski-slab, sans-serif; } .trajan { font-family: "trajan-pro-3", serif !important; } .txt-15 { font-size: 2.2rem; } .txt-14 { font-size: 2.1rem; } .txt-13 { font-size: 2.0rem; } .txt-12 { font-size: 1.9rem; } .txt-11 { font-size: 1.8rem; } .txt-10 { font-size: 1.7rem; } .txt-9 { font-size: 1.6rem; } .txt-8 { font-size: 1.5rem; } .txt-7 { font-size: 1.4rem; } .txt-6 { font-size: 1.3rem; } .txt-5 { font-size: 1.2rem; } .txt-4 { font-size: 1.1rem; } .txt-3 { font-size: 1rem; } .txt-2 { font-size: 0.9rem; } .txt-1 { font-size: 0.8rem; } .txt-0 { font-size: 0.7rem; } .font-weight-100 { font-weight: 100; } .font-weight-200 { font-weight: 200; } .font-weight-300 { font-weight: 300; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .strike { text-decoration: line-through; } .text-underline { text-decoration: underline; } @media (min-width: 320px) and (max-width:568px) { .txt-sm-8 { font-size: 1.5rem !important } .txt-sm-7 { font-size: 1.4rem !important } .txt-sm-6 { font-size: 1.3rem !important } .txt-sm-5 { font-size: 1.2rem !important } .txt-sm-4 { font-size: 1.1rem !important } .txt-sm-3 { font-size: 1rem !important } .txt-sm-2 { font-size: 0.9rem !important } .txt-sm-1 { font-size: 0.8rem !important } .txt-sm-0 { font-size: 0.7rem !important } } /* Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap */ @media (max-device-width: 320px) { .txt-xs-8 { font-size: 1.5rem !important } .txt-xs-7 { font-size: 1.4rem !important } .txt-xs-6 { font-size: 1.3rem !important } .txt-xs-5 { font-size: 1.2rem !important } .txt-xs-4 { font-size: 1.1rem !important } .txt-xs-3 { font-size: 1rem !important } .txt-xs-2 { font-size: 0.9rem !important } .txt-xs-1 { font-size: 0.8rem !important } .txt-xs-0 { font-size: 0.7rem !important } } @media (min-width: 200px) and (max-width: 576px) { .txt-sm-8 { font-size: 1.5rem !important } .txt-sm-7 { font-size: 1.4rem !important } .txt-sm-6 { font-size: 1.3rem !important } .txt-sm-5 { font-size: 1.2rem !important } .txt-sm-4 { font-size: 1.1rem !important } .txt-sm-3 { font-size: 1rem !important } .txt-sm-2 { font-size: 0.9rem !important } .txt-sm-1 { font-size: 0.8rem !important } .txt-sm-0 { font-size: 0.7rem !important } } @media (min-device-width: 320px) and (max-device-width: 568px) { .txt-xs-8 { font-size: 1.5rem !important } .txt-xs-7 { font-size: 1.4rem !important } .txt-xs-6 { font-size: 1.3rem !important } .txt-xs-5 { font-size: 1.2rem !important } .txt-xs-4 { font-size: 1.1rem !important } .txt-xs-3 { font-size: 1rem !important } .txt-xs-2 { font-size: 0.9rem !important } .txt-xs-1 { font-size: 0.8rem !important } .txt-xs-0 { font-size: 0.7rem !important } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767px) { .txt-sm-8 { font-size: 1.5rem !important } .txt-sm-7 { font-size: 1.4rem !important } .txt-sm-6 { font-size: 1.3rem !important } .txt-sm-5 { font-size: 1.2rem !important } .txt-sm-4 { font-size: 1.1rem !important } .txt-sm-3 { font-size: 1rem !important } .txt-sm-2 { font-size: 0.9rem !important } .txt-sm-1 { font-size: 0.8rem !important } .txt-sm-0 { font-size: 0.7rem !important } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 810px) { .txt-md-8 { font-size: 1.5rem !important } .txt-md-7 { font-size: 1.4rem !important } .txt-md-6 { font-size: 1.3rem !important } .txt-md-5 { font-size: 1.2rem !important } .txt-md-4 { font-size: 1.1rem !important } .txt-md-3 { font-size: 1rem !important } .txt-md-2 { font-size: 0.9rem !important } .txt-md-1 { font-size: 0.8rem !important } .txt-md-0 { font-size: 0.7rem !important } } @media (min-width: 768px) and (max-width: 900px) { .txt-md-8 { font-size: 1.5rem !important } .txt-md-7 { font-size: 1.4rem !important } .txt-md-6 { font-size: 1.3rem !important } .txt-md-5 { font-size: 1.2rem !important } .txt-md-4 { font-size: 1.1rem !important } .txt-md-3 { font-size: 1rem !important } .txt-md-2 { font-size: 0.9rem !important } .txt-md-1 { font-size: 0.8rem !important } .txt-md-0 { font-size: 0.7rem !important } } @media (min-width: 768px) and (max-width: 992px) { .txt-md-8 { font-size: 1.5rem !important } .txt-md-7 { font-size: 1.4rem !important } .txt-md-6 { font-size: 1.3rem !important } .txt-md-5 { font-size: 1.2rem !important } .txt-md-4 { font-size: 1.1rem !important } .txt-md-3 { font-size: 1rem !important } .txt-md-2 { font-size: 0.9rem !important } .txt-md-1 { font-size: 0.8rem !important } .txt-md-0 { font-size: 0.7rem !important } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .txt-lg-8 { font-size: 1.5rem !important } .txt-lg-7 { font-size: 1.4rem !important } .txt-lg-6 { font-size: 1.3rem !important } .txt-lg-5 { font-size: 1.2rem !important } .txt-lg-4 { font-size: 1.1rem !important } .txt-lg-3 { font-size: 1rem !important } .txt-lg-2 { font-size: 0.9rem !important } .txt-lg-1 { font-size: 0.8rem !important } .txt-lg-0 { font-size: 0.7rem !important } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .txt-xl-8 { font-size: 1.5rem !important } .txt-xl-7 { font-size: 1.4rem !important } .txt-xl-6 { font-size: 1.3rem !important } .txt-xl-5 { font-size: 1.2rem !important } .txt-xl-4 { font-size: 1.1rem !important } .txt-xl-3 { font-size: 1rem !important } .txt-xl-2 { font-size: 0.9rem !important } .txt-xl-1 { font-size: 0.8rem !important } .txt-xl-0 { font-size: 0.7rem !important } } /* **------------------------------------------------------------------------------------- ** BORDER CLASSES (global) **------------------------------------------------------------------------------------- */ .border-xs-1,.border-sm-1,.border-md-1,.border-lg-1,.border-xl-1 { border-color: #dee2e6; } @media (min-width:1px) { .border-xs-0 { border-width:0px !important; border-style: solid !important; } .border-xs-1 { border-width:1px !important; border-style: solid !important; } .border-bottom-xs-0 { border-bottom-width:0px !important; border-bottom-style: solid !important; } .border-bottom-xs-1 { border-bottom-width:1px !important; border-bottom-style: solid !important; } .border-top-xs-0 { border-top-width:0px !important; border-top-style: solid !important; } .border-top-xs-1 { border-top-width:1px !important; border-top-style: solid !important; } .border-left-xs-0 { border-left-width:0px !important; border-left-style: solid !important; } .border-left-xs-1 { border-left-width:1px !important; border-left-style: solid !important; } .border-right-xs-0 { border-right-width:0px !important; border-right-style: solid !important; } .border-right-xs-1 { border-right-width:1px !important; border-right-style: solid !important; } } @media (min-width:576px) { .border-sm-0 { border-width:0px !important; border-style: solid !important; } .border-sm-1 { border-width:1px !important; border-style: solid !important; } .border-bottom-sm-0 { border-bottom-width:0px !important; border-bottom-style: solid !important; } .border-bottom-sm-1 { border-bottom-width:1px !important; border-bottom-style: solid !important; } .border-top-sm-0 { border-top-width:0px !important; border-top-style: solid !important; } .border-top-sm-1 { border-top-width:1px !important; border-top-style: solid !important; } .border-left-sm-0 { border-left-width:0px !important; border-left-style: solid !important; } .border-left-sm-1 { border-left-width:1px !important; border-left-style: solid !important; } .border-right-sm-0 { border-right-width:0px !important; border-right-style: solid !important; } .border-right-sm-1 { border-right-width:1px !important; border-right-style: solid !important; } } @media (min-width:768px) { .border-md-0 { border-width:0px !important; border-style: solid !important; } .border-md-1 { border-width:1px !important; border-style: solid !important; } .border-bottom-md-0 { border-bottom-width:0px !important; border-bottom-style: solid !important; } .border-bottom-md-1 { border-bottom-width:1px !important; border-bottom-style: solid !important; } .border-top-md-0 { border-top-width:0px !important; border-top-style: solid !important; } .border-top-md-1 { border-top-width:1px !important; border-top-style: solid !important; } .border-left-md-0 { border-left-width:0px !important; border-left-style: solid !important; } .border-left-md-1 { border-left-width:1px !important; border-left-style: solid !important; } .border-right-md-0 { border-right-width:0px !important; border-right-style: solid !important; } .border-right-md-1 { border-right-width:1px !important; border-right-style: solid !important; } } @media (min-width:992px) { .border-lg-0 { border-width:0px !important; border-style: solid !important; } .border-lg-1 { border-width:1px !important; border-style: solid !important; } .border-bottom-lg-0 { border-bottom-width:0px !important; border-bottom-style: solid !important; } .border-bottom-lg-1 { border-bottom-width:1px !important; border-bottom-style: solid !important; } .border-top-lg-0 { border-top-width:0px !important; border-top-style: solid !important; } .border-top-lg-1 { border-top-width:1px !important; border-top-style: solid !important; } .border-left-lg-0 { border-left-width:0px !important; border-left-style: solid !important; } .border-left-lg-1 { border-left-width:1px !important; border-left-style: solid !important; } .border-right-lg-0 { border-right-width:0px !important; border-right-style: solid !important; } .border-right-lg-1 { border-right-width:1px !important; border-right-style: solid !important; } } @media (min-width:1200px) { .border-xl-0 { border-width:0px !important; border-style: solid !important; } .border-xl-1 { border-width:1px !important; border-style: solid !important; } .border-bottom-xl-0 { border-bottom-width:0px !important; border-bottom-style: solid !important; } .border-bottom-xl-1 { border-bottom-width:1px !important; border-bottom-style: solid !important; } .border-top-xl-0 { border-top-width:0px !important; border-top-style: solid !important; } .border-top-xl-1 { border-top-width:1px !important; border-top-style: solid !important; } .border-left-xl-0 { border-left-width:0px !important; border-left-style: solid !important; } .border-left-xl-1 { border-left-width:1px !important; border-left-style: solid !important; } .border-right-xl-0 { border-right-width:0px !important; border-right-style: solid !important; } .border-right-xl-1 { border-right-width:1px !important; border-right-style: solid !important; } } /* **------------------------------------------------------------------------------------- ** GENERAL UTILIY CLASSES (global) **------------------------------------------------------------------------------------- */ .text-break { overflow-wrap: break-word; word-break: break-word } .noty_layout { z-index:999999999 !important; } .popover { max-width:400px !important; } .popover-body { padding: 1.2rem; } .datepicker-dropdown { cursor:pointer; } .datepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; text-align:center; margin: 1%; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .datepicker table tr td span:hover { background-color: #cccccc; } .datepicker { padding:10px; z-index:999999999 !important; } .datepicker .table-condensed th { text-align:center; } .datepicker-days { text-align:center; } .embed-responsive-1by1::before { padding-top: 55%; } .fa-disabled { opacity: 0.6; cursor: not-allowed; } .custom-file-control:lang(en)::after { content: "Select file..."; } .custom-file-label::after { background-color: #1E6DF6; color: #FFFFFF; } .img-75 { width:75%; } .img-50 { width:50%; } .img-max-width-100 { max-width:100px; } ul.list-styled > li { list-style-type: unset !important; } ul.list-styled-letter > li { list-style-type: upper-alpha !important; } ul.list-styled-disc > li { list-style-type: disc !important; } ul.list-notstyled > li { list-style-type: none !important; } .list-3 { columns: 3; } .list-2 { columns: 2; } @media (min-width: 576px) and (max-width:900px) { .list-3 {columns: 2;} } @media (max-width: 576px) { .list-3, .list-2 {columns: 1;} } .typekit-wordydiva { font-family: wordy-diva,cursive; } /* older separator for horizontal lists of links */ /* NOTE: This is probably being deprecated for a newer ul-li method below this */ .separator { content: ''; display: inline-block; background: #888; margin: 0px 4px; height: 18px; min-width: 1px; } /* newer method for making clean, wrappable list of horizontal links in top sections with a pipe divider */ /* (Uses: sorting, toplinks, regnav rows of links) */ /* NOTE: space between pipes is increased by using the pipebetween-2xspace class */ ul.pipebetween > li, ul.pipebetween-2xspace > li, ul.pipebetween-3xspace > li { list-style: none; display: inline; } ul.pipebetween > li:not(:last-child):after { content: "\007C"; color: #888; } ul.pipebetween-2xspace > li:not(:last-child):after { content: "\00A0\007C\00A0"; color: #888; } ul.pipebetween-3xspace > li:not(:last-child):after { content: "\00A0\00A0\007C\00A0\00A0"; color: #888; } /* rounded table classes (needs to be inside a card class div element) */ .card.rounded-card { border-radius: 10px; } .card > table.rounded-table, .card > table.rounded-table-nohead { border-collapse: separate; border-spacing: 0; } .card > table.rounded-table th, .card > table.rounded-table-nohead td { border-top: 0; font-weight: normal; } /* the first 'th' (or first 'td' when no th elements) within the first 'tr' of the 'tbody' */ .card > table.rounded-table tbody tr:first-child th:first-child, .card > table.rounded-table-nohead tbody tr:first-child td:first-child { border-radius: 10px 0 0 0; } /* the last 'th' (or last 'td' when no th elements) within the first 'tr' of the 'tbody' */ .card > table.rounded-table tbody tr:first-child th:last-child, .card > table.rounded-table-nohead tbody tr:first-child td:last-child { border-radius: 0 10px 0 0; } /* the first 'td' within the last 'tr' of the 'tbody' */ .card > table.rounded-table tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } /* the last 'td' within the last 'tr' of the 'tbody' */ .card > table.rounded-table tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } /* end - rounded table classes */ /* callout classes */ .callout { padding: 20px; margin: 20px 0; border: 1px solid #999; border-left-width: 5px; border-radius: 3px; } .callout h4 { margin-top: 0; margin-bottom: 5px; } .callout p:last-child { margin-bottom: 0; } .callout code { border-radius: 3px; } .callout-primary { border-left-color: #1E6DF6; } .callout-secondary { border-left-color: #6c757d; } .callout-success { border-left-color: #28a745; } .callout-danger { border-left-color: #dc3545; } .callout-warning { border-left-color: #ffc107; } .callout-info { border-left-color: #17a2b8; } .callout-bdc { border-left-color: #29527a; } /* end - callout classes */ .payment-balance { background-color: #FFF686; } .very-rounded { border-radius: 1rem; } .btn-rounded { border-radius: 10rem; } .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .staff-image { width: 100px; height: 100px; } .account-image { object-fit:cover; height:100px; width:100px; } @media (min-width: 1px) and (max-width: 766px) { .tooltip { display: none !important; } } /* extra small BS4 form-control style */ .form-control-xs { height: calc(1em + .375rem + 2px) !important; padding: .125rem .25rem !important; font-size: .75rem !important; line-height: 1.5; border-radius: .2rem; } /* custom BS4 classes for background colors for showroommode badge-pill in the masterbar */ .badge-showroommode-off { color: #fff; background-color: #4f575e; } .badge-showroommode-on { color: #fff; background-color: #a286bf; } /* class applied when showroommode is turned on */ /* note: this applies all element that have the 'showroom-hide' class on them */ .showroom-activated { display:none !important; } /* like (heart) circles style - start */ .like-outer-circle { position: absolute; right: 0px; bottom: 0px; padding: 15px; cursor: pointer; } .like-circle { display: flex; justify-content: center; align-items: center; background-color: #FFFFFF; border-radius: 50%; border: 1px solid #ddd; min-height: 45px; min-width: 45px; } .like-circle i.fa-heart { cursor: pointer !important } /* overrides for bottom for some of the like (heart instances, here for consistency but trying to remove them */ #details-featured-news .like-outer-circle, #news_posts_container .chalkpost .like-outer-circle, #news_index_container .chalkpost .like-outer-circle, #results-main .like-outer-circle, #results-collection-info .like-outer-circle, #collections-main .like-outer-circle, #details-featured-news .like-outer-circle { bottom: 16px; } /* like (heart) circles style - end */ /* Modals */ #myEnlargeImageModal .enlarge-image { max-width:700px; } #myEnlargeImageModal #enlarge_logo { max-width:140px; } #myEnlargeImageModal .modal-dialog { max-width:800px; } #BrandAddModal .modal-dialog { max-width:600px; } #discountAddProductsModal .modal-dialog, #discountAddGiftProductsModal .modal-dialog { max-width:800px; } #editProductModal .modal-dialog { max-width:900px; } #cropSlideModal .modal-dialog, #cropEditSlideModal .modal-dialog { max-width:576px; } #storesBrandAddModal .modal-dialog { max-width:700px; } #addPromotionModal .modal-dialog, #editPromotionModal .modal-dialog{ max-width:800px; } #contactReportIssueModal .modal-dialog, #contactReportIssueModalSuccess .modal-dialog { max-width:600px; } #viewColorKey { padding-right: 0px !important; left: auto !important; } #viewColorKey .green { background-color:#cfeaac; color:#000000; } #viewColorKey .yellow { background-color:#fcfbae; color:#000000; } #viewColorKey .lightgreen { background-color:#e4fbcd; color:#000000; } #viewColorKey .lightpurple { background-color:#f2e8fb; color:#000000; } #viewColorKey .gray { background-color:#7d7d7d; color:#FFFFFF; } /* back to top link */ #footer a#back-to-top { position: fixed; bottom: 30px; right: 30px; z-index: 1000; width: 62px; height: 62px; text-align: center; line-height: 62px; background-color: #f5f5f5; cursor: pointer; border: 0; border-radius: 2px; text-decoration: none; transition: opacity 0.2s ease-out; font-size: 34px; opacity: 0; ; } #footer #back-to-top:hover { background: #e9ebec; } #footer #back-to-top.show { opacity: 0.75; text-decoration: none !important; } #footer .storehours strong { font-weight:600; } #footer .storehours .dayofweek { min-width:110px; } .text-blue { color: #1E6DF6; } .btn-primary.btn-number:disabled, .btn-danger:disabled { background: #f0f0f0 !important; color:#a0a0a0 !important; border:1px solid #f0f0f0 !important; } .fa-circle.greencircle, .fa-check-circle.greencircle { color: #339833; } .fa-circle.yellowcircle { color: #fac30e; } .fa-circle.redcircle { color: #f00; } .table-striped.invert-bg tbody tr:nth-of-type(odd) { background-color: initial; } .table-striped.invert-bg tbody tr:nth-of-type(even) { background-color: rgba(0, 0, 0, .05); } .row-striped>div:nth-of-type(odd){ background-color: rgba(0, 0, 0, .05); } .row-striped-invert>div:nth-of-type(even){ background-color: rgba(0, 0, 0, .05); } /* CSS Corner Ribbons - Main -------------------------------------------------- */ .corner-ribbon{ width: 200px; background: #e43; position: relative; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; z-index: 5; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } /* CSS Corner Ribbons - Custom Styles -------------------------------------------------- */ .corner-ribbon.sticky{ position: fixed; } .corner-ribbon.shadow{ box-shadow: 0 0 3px rgba(0,0,0,.3); } /* CSS Corner Ribbons - Different positions -------------------------------------------------- */ .corner-ribbon.top-left{ top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .corner-ribbon.top-right{ top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .corner-ribbon.bottom-left{ top: auto; bottom: 25px; left: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .corner-ribbon.bottom-right{ top: auto; right: -50px; bottom: 25px; left: auto; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } /* Infinitescroll.js loading spinner -------------------------------------------------- */ .loader-wheel { font-size: 64px; /* change size here */ position: relative; height: 1em; width: 1em; padding-left: 0.45em; overflow: hidden; margin: 0 auto; animation: loader-wheel-rotate 0.5s steps(12) infinite; } .loader-wheel i { display: block; position: absolute; height: 0.3em; width: 0.1em; border-radius: 0.05em; background: #333; /* change color here */ opacity: 0.8; transform: rotate(-30deg); transform-origin: center 0.5em; } .infinite-scroll-request.loader-ellips { display:none; } @keyframes loader-wheel-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Loading circle for buttons on form submit -------------------------------------------------- */ .lds-ring { display: inline-block; position: relative; width: 24px; height: 16px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 16px; height: 16px; /* margin: 5px; */ margin:0px 10px; border: 3px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* **------------------------------------------------------------------------------------- ** INDIVIDUAL PAGE STYLES **------------------------------------------------------------------------------------- */ /* Info */ #map_canvas, .map-canvas { min-height: 300px; } #info-main i.fa.fa-star { color: #FFD700; font-size: .85rem; } #info-main .customer-service-logo { max-width: 125px; max-height: 100px; } /* Account */ #account-main .fab.fa-google { font-size: 1.75rem; color: #555555 } #account-main .fa-circle.redcircle { color: #f00; font-size: .75rem; } #account-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #account-main .header-quick-links .border-bottom { border-bottom: 1px solid #CCCCCC !important; } #account-main .color-picker { width: 100px; height: 40px; cursor: pointer; } #account-main .nav-tabs { display: none; } #account-main .section-header { background-color: #999999; color: #FFFFFF; } #account-main .border-secondary { border: 1px solid #dee2e6 !important } #account-main .border-secondary.border-top-0 { border-top: 0px solid transparent !important; } #account-main .border-secondary.border-bottom-0 { border-bottom: 0px solid transparent !important; } #account-main ul.product-list { list-style-type: none; } #account-content h5 a { display: block; text-decoration: none } #account-main .image_container { position: relative; } #account-main .image_container .image_text { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; width: 50px; padding: 0px; border-radius: 30px; padding-right: 15px !important; bottom: 15px; right: 18px; } #account-main .image_container .image_text a, #account-main .image_container .image_text2 a, #account-main .image_container .image_text3 a, #account-main .image_container .image_text4 a { color:#FFFFFF; } #account-main .image_container .image_text2 { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; width: 50px; padding: 0px; border-radius: 30px; padding-right: 15px !important; bottom: 15px; right: 75px; } #account-main .image_container .image_text3 { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; width: 50px; padding: 0px; border-radius: 30px; padding-right: 15px !important; bottom: 15px; right: 132px; } #account-main .image_container .image_text4 { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; width: 50px; padding: 0px; border-radius: 30px; padding-right: 15px !important; bottom: 15px; right: 189px; } #account-main h5 a .fa:before { content: "\f077"; } #account-main h5 a.collapsed .fa::before { content: "\f078"; } #account-staff .img-fluid { max-width: 100px; } #account-main #LogoSrc.img-fluid, #account-main #DesignLogoSrc.img-fluid { max-height:250px; } #account-main .wholesale-terms-list { list-style-type: none; } #account-main #account-brand .img-fluid { max-width:150px; } @media(min-width:992px) { #account-main .nav-tabs { display: flex; } #account-main .card { border: none; } #account-main .card .card-header { display: none; } #account-main .card .collapse { display: block; } } #account-main #collapse-account-grow .img-fluid { max-width:200px !important; } @media(max-width:991px) { #account-main .tab-pane { display: block !important; opacity: 1; } } @media (min-width: 1px) and (max-width: 991px) { #account-main .border-secondary { border: 0px solid transparent !important; } #account-main .section-header.rounded-top { border-radius: .25rem !important; } #account-main .account-image { /* -webkit-clip-path: circle(35px at center); clip-path: circle(35px at center); max-width: 70px; */ object-fit:cover; height:70px; width:70px; } } /* Library */ #library-main .nav-tabs { display: none; } #library-main h5 a .fa:before { content: "\f077"; } #library-main .fas.fa-asterisk { color:red; font-size:0.7rem; } #library-main .button-circle { background: #FFFFFF; border-radius: 30px; padding: 10px; width:45px; height:45px; border: 1px solid #ddd; } #library-main #librarydocumentfiles > li.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } #library-main #librarydocumentfiles .border-bottom { border-bottom: 1px solid #dee2e6!important; } #your-library-content h5 a { display: block; text-decoration: none } #library-main .fa-heart { cursor:pointer; } #library-main .libraryicon { max-width:175px; max-height:100px; } #library-main .rounded-circle { border: 3px solid #fff; height: 60px; width: 60px; object-fit: cover; margin-top: -13px; } #library-main .librarylisticon { max-width:135px; max-height:90px; } #library-main h5 a.collapsed .fa::before { content: "\f078"; } #library-main input[type="checkbox"] { transform: scale(1.5); } @media(min-width:992px) { #library-main .nav-tabs { display: flex; } #library-main .card { border: none; } #library-main .card .card-header { display: none; } #library-main .card .collapse { display: block; } } @media(max-width:991px) { #library-main .tab-pane { display: block !important; opacity: 1; } #library-main .libraryicon { max-width:100% !important; max-height:auto !important; } } /* Registry Accounting */ #registry-accounting-details-main input[type="radio"] { transform: scale(1.2); } @media(max-width:767px) { #registry-accounting-details-main .hideborder { border-bottom:1px solid transparent !important; } } /* Registry Items Requested */ #itemsrequestedlist .itemsrequestedrow { border-bottom: 1px solid #CCCCCC; } #itemsrequestedlist .headerrow { border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; font-weight:600; } #itemsrequestedlist > div.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } /* Ticket Tracking */ #ticket-main .sort-up a, #ticket-main .sort-down a { vertical-align: text-bottom; font-size:1.1rem; text-decoration:none; } #ticket-main .sort-up a.selected, #ticket-main .sort-down a.selected { color:#212529 } #ticket-main .nav-tabs { display: none; } #ticket-main .odd-row { background-color: rgba(0,0,0,.05); } #ticket-main .even-row{ background-color: #FFFFFF; } #ticket-main #collapse-ticket-home a { text-decoration:none; } #ticket-main #collapse-ticket-home .icon { max-height:50px; min-height:50px; } #ticket-main .fa-circle.redcircle { color: #f00; font-size: .75rem; } #ticket-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #ticket-main h5 a .fa:before { content: "\f077"; } #ticket-main h5 a.collapsed .fa::before { content: "\f078"; } @media(min-width:992px) { #ticket-main .nav-tabs { display: flex; } #ticket-main .card { border: none; } #ticket-main .card .card-header { display: none; } #ticket-main .card .collapse { display: block; } } @media(max-width:991px) { #ticket-main .tab-pane { display: block !important; opacity: 1; } } @media (min-width: 1px) and (max-width: 991px) { #ticket-main .border-secondary { border: 0px solid transparent !important; } } /* slides */ #slides-main ul { list-style-type: none; } #slides-main ul.slidestips { list-style-type: disc; } #slides-main .addslide { width: 300px; text-align: center; padding: 35px 0; } #slides-main .slideurl[readonly] { background-color: #FFFFFF; border: 1px solid transparent; } #slides-main .addslide a { color: #FFFFFF; } #slides-main .inactive { filter: contrast(0.25); -webkit-filter: contrast(0.25); } #slides-main .newsfeedinactive { filter: contrast(0.25); -webkit-filter: contrast(0.25); } #slides-main .ui-sortable-disabled { cursor: default !important } #slides-main .ui-sortable { cursor: move } #slides-main .fas.fa-toggle-on.fa-rotate-180 { color: #CCCCCC; margin-top: 1px; } #addSlideModal .custom-file .custom-file-input:lang(en) ~ .custom-file-label::after { background-color:#1E6DF6; color: #FFFFFF; } #slidebrands.ui-sortable { cursor: move; } /* contact bar */ #contact-bar { background-color: #FFFFFF; color: #555555; border-bottom: 1px solid #CCCCCC; } #contact-bar a { color: #1E6DF6; } #contact-bar img.social-icon { max-width: 20px; margin-top: -2px; } #contact-bar i.fa.fa-star { color: #FFD700; font-size: 1.0rem; margin: 0 1px; } #contact-bar i.fas.fa-star-half { color: #FFD700; font-size: 1.0rem; margin: 0 1px; } /* wholesale contact bar */ #wholesale-bar { z-index:60; background: #FFF; -webkit-box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, .25); -moz-box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, .25); box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, .25); } /* grid styles for mobile VPs */ @media (min-width: 1px) and (max-width: 767px) { #wholesale-bar > ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px; list-style: none; } #wholesale-bar > ul > li { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 25%; border: 1px #ddd solid; padding: 5px 0px 0px 0px; min-height: 40px; } #wholesale-bar > ul > li > a, #wholesale-bar > ul > li > span { display: flex; flex-direction: column; align-items: center; } } /* inline list style for md VPs and higher */ @media (min-width: 768px) { #wholesale-bar > ul > li { display: inline; list-style: none; } #wholesale-bar > ul > li:not(:last-child):after { content: "\00A0\007C\00A0"; color: #888; } } #wholesale-bar .fa-circle.greencircle { color: #339833; font-size: .75rem } #wholesale-bar .fa-circle.yellowcircle { color: #fac30e; font-size: .75rem } #wholesale-bar .fa-circle.redcircle { color: #f00; font-size: .75rem; } #wholesale-bar .wholesalesent { text-decoration:none; color: #212529 !important; cursor:default !important; } #wholesale-bar .dropdown-toggle::after { border: 0px solid transparent !important; } #wholesale-bar #smartbranddropdown .dropdown-menu, #wholesale-bar #assignsalerepcontent .dropdown-menu, #wholesale-bar #wholesaleinvitebranddropdown .dropdown-menu, #wholesale-bar #sharingstockdropdown .dropdown-menu { width: 300px !important; z-index:9999999 !important; } #wholesale-bar .dropdown:hover>.dropdown-menu { display: block; z-index:9999999 !important; } /* bread crumb */ #breadcrumb-container { background-color: #f5f4f4; color: #555555; } #breadcrumb-container a { color: #1E6DF6; } #breadcrumb-container img.social-icon { max-width: 20px; margin-top: -2px; } #breadcrumb-container i.fa.fa-star { color: #FFD700; font-size: 1.0rem; margin: 0 1px; } /* Siteguest Mini Nav */ #siteguest-mini-nav a { text-decoration: none; } #siteguest-mini-nav a > span:hover { border-bottom: 2px solid #28a745; } #siteguest-mini-nav .bullet { font-size: 30px; color: #898989; line-height:0.5; } /* Bridge Master Bar */ #bridge-bar-green { color: #FFFFFF; } #bridge-bar-green a, #bridge-bar-green a:hover { color: #1E6DF6; } #bridge-bar-green #nav-bridge-logo a, #bridge-bar-green #nav-bridge-logo-text a { color: #FFFFFF; } #bridge-bar-green .join-body, #bridge-bar-green .join-body a { color: #79b572; background-color: #FFFFFF; font-weight: 500; } #bridge-bar-green .barlinks a, #bridge-bar-green .barlinks-nvp a { color: #FFFFFF; text-decoration: none; } #bridge-bar-green .barlinks a:hover, #bridge-bar-green .barlinks-nvp a:hover { color: #FFFFFF; text-decoration: underline; } #bridge-bar-green .form-control:focus { color: #000000; background-color: #fff; border-color: #000000; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); } #bridge-bar-green .search-term { color: #000000; } #bridge-bar-green { background-color: #79b572; } #bridge-bar-green .bgd-white { border-radius: 8px; background-color: #FFFFFF; color: #696969; } #bridge-bar-green .bgd-white a { color: #1E6DF6 !important; } #bridge-bar-green .logo_nvp { max-width: 22px; } #bridge-bar-green .quick-links .d-md-inline-flex .breadcrumb-item + .breadcrumb-item::before { content: "|"; color: #FFFFFF; } #bridge-bar-green .quick-links ol li { list-style-type: none; } #bridge-bar-green .quick-links .breadcrumb { background:unset !important; } #bridge-bar-green .quick-links a { color:#FFFFFF !important; } #bridge-bar-green ul li { list-style-type: none; display: inline-block; } #bridge-bar-green a.brandlink { color: #FFFFFF !important; } #bridge-bar-green .border-right { border-right: 1px solid #FFFFFF !important; } #bridge-bar-green a.otherlink { color: #1E6DF6 !important; } #bridge-bar-white { color: #212529; } #bridge-bar-white #nav-bridge-logo a, #bridge-bar-white #nav-bridge-logo-text a { color: #212529; } #bridge-bar-white .join-body, #bridge-bar-white .join-body a { color: #79b572; background-color: #FFFFFF; font-weight: 500; } #bridge-bar-white .barlinks a, #bridge-bar-white .barlinks-nvp a { text-decoration: none; } #bridge-bar-white .barlinks a:hover, #bridge-bar-white .barlinks-nvp a:hover { text-decoration: underline; } #bridge-bar-white .form-control:focus { color: #000000; background-color: #fff; border-color: #000000; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); } #bridge-bar-white .search-term { color: #000000; } #bridge-bar-white { background-color: #FFFFFF; } #bridge-bar-white .bgd-white { border-radius: 8px; background-color: #FFFFFF; color: #696969; border: 1px solid #777; } #bridge-bar-white .bgd-white a { color: #1E6DF6 !important; } #bridge-bar-white .logo_nvp { max-width: 22px; } #bridge-bar-white .border-right { border-right: 1px solid #212529 !important; } #bridge-bar-white .quick-links .d-lg-inline-flex .breadcrumb-item + .breadcrumb-item::before { content: "\00A0\00A0\007C\00A0"; color: #a9a9a9; padding-right: 0; } #bridge-bar-white .quick-links ol li { list-style-type: none; } #bridge-bar-white .quick-links .breadcrumb { background:unset !important; } #bridge-bar-white ul li { list-style-type: none; display: inline-block; } #bridge-bar-retailer .form-control:focus { color: #000000; background-color: #fff; border-color: #000000; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); } #bridge-bar-retailer .logo { max-height:110px; } #bridge-bar-retailer .search-term { color: #000000; } #bridge-bar-retailer .start-free-registry { border: 1px solid #1E6DF6; } #collections-library .libraryiconsmall { max-width:100px; max-height:80px; } #bridge-bar-retailer .quick-links .d-lg-inline-flex .breadcrumb-item + .breadcrumb-item::before { content: "\00A0\00A0\007C\00A0"; color: #a9a9a9; padding-right: 0; } #bridge-bar-retailer .quick-links .d-lg-inline-flex .breadcrumb-item a.sale span { background: #bf373c !important; color: #FFFFFF !important; } #bridge-bar-retailer .quick-links .d-lg-inline-flex .breadcrumb-item a.sale:hover { color: #FFFFFF !important; } #bridge-bar-retailer .quick-links ol li { list-style-type: none; } #bridge-bar-retailer .quick-links .breadcrumb { background:unset !important; } #bridge-bar-retailer { color: #000000; } #bridge-bar-retailer a, #bridge-bar-retailer a:hover { color: #1E6DF6; } #bridge-bar-retailer #nav-bridge-logo a, #bridge-bar-retailer #nav-bridge-logo-text a { color: #000000 !important; } #bridge-bar-retailer .join-body, #bridge-bar-retailer .join-body a { color: #000000; background-color: #FFFFFF; font-weight: 500; } .bg-bridgebar-retailer { background-color: #FFFFFF; } #bridge-bar-retailer .logo_nvp { max-width: 22px; } #bridge-bar-retailer ul li { list-style-type: none; display: inline-block; } @media (min-width: 576px) and (max-width: 767px) { #bridge-bar .container { max-width: none !important; } #bridge-bar-retailer .container { max-width: none !important; } } #bridge-bar-white.dropshadow, #bridge-bar-green.dropshadow, #bridge-bar-retailer.dropshadow { box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.15); z-index: 100 !important; position: relative; } /* ----------------------------------------------------------------------Component Styles -------------------------------------------------------------- */ /* **------------------------------------------------------------------------------------- ** Mobile Gray NVP Gutter, simply add:
**------------------------------------------------------------------------------------- */ .mobile-gray-gutter-bar { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); background-color: #e8e8e8; } .mobile-gray-gutter-bar :before, .mobile-gray-gutter-bar :after { display: table; content: " "; } .mobile-gray-gutter-bar :after { clear: both; } /* Index */ .home-section { background-color:#f5f4f4 } .home-section .custom-file-control:lang(en)::after { content: "Select file..."; } .home-section .custom-file-control:lang(en)::before { content: "Click me"; } .home-section .custom-file-control.selected:lang(en)::after { content: "" !important; } .home-section .custom-file { overflow: hidden; } .home-section .custom-file-control { white-space: nowrap; } .join-us-card img { max-width:40px; } .chalknav .breadcrumb { background: #f5f4f4 } .chalknav .breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: .5rem; padding-left: .5rem; color: #6c757d; content: "\00B7"; } #contact-body .social-icon { max-width: 20px; margin-top: -2px; } #contact-body i.fa.fa-star { color: #FFD700; font-size: 1.0rem; margin: 0 1px; } #contact-body i.fas.fa-star-half { color: #FFD700; font-size: 1.0rem; margin: 0 1px; } #contact-body .icon, #shop-body .icon { width:20px } /* Monogram */ #monogram-main .header { background: #464646; color: #FFFFFF; } #monogram-main .monogram-image-area { height:150px; } #monogram-main ul { list-style-type: none; } /* News */ .chalkpost .rounded-circle { border: 3px solid #fff; height: 40px; width: 40px; object-fit: cover; } .chalkpost strong { font-weight: 600; } .chalkpost .chalk-right a { word-wrap: break-word; } .chalkpost .btn-secondary:disabled, .chalkpost .btn-secondary:disabled:hover { color: #000000 !important; } .chalkpost .comment { margin-left:68px; } .chalkpost.border-secondary, .chalkpost .border-secondary, #news_container .border-secondary, #news_container-bot .border-secondary, .card.border-secondary, .index-our-store-border, .index-write-form-border, .index-inactive-brands-list { border: 1px solid #CCCCCC !important; } .chalk-right .user.border-bottom { border-bottom: 1px solid #dedede !important; } .chalkpost .usertop.border-bottom { border-bottom: 1px solid #dedede !important; } #chalk_add .custom-file .custom-file-input:lang(en) ~ .custom-file-label::after { background-color:#1E6DF6; color: #FFFFFF; } h1.home-header { font-size: 1.5rem; } .chalkpost .rounded-circle { width: 50px; height: 50px; } .chalkpost button:not(.btn-light) { background-color: #0054a6 } .chalkpost .cbliket { display: none; } .chalkpost .dropdown-item:focus, .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #eeeeee; } .chalkpost .dropdown-item { color: #1E6DF6; } .chalkpost .btn-light, .chalkpost .btn-light a, .show>.btn-secondary.dropdown-toggle, #library-main .actionbuttons .btn-light, #library-main .actionbuttons .btn-light a { color: #1E6DF6; background: #EEEEEE; border: 1px solid #EEEEEE; } .chalkpost .btn-secondary:hover, .chalkpost .btn-secondary a:hover { color: #0056b3 !important; } .chalkpost .actionbuttons .btn { flex: 1; } .chalkpost .chalk-left .libraryicon { max-width: 175px; max-height: 100px; } .chalkpost .chalk-left i.fa-star { color: #FFD700; font-size: 3em; margin: 0 3px; } .chalkpost .chalk-left i.fa-heart { font-size: 1.4rem; } @media (min-width: 1px) and (max-width: 575px) { /* .chalkpost .chalk-left i { font-size: 5rem; } */ .chalk-right .user.border-bottom { border-bottom: 0px solid transparent !important; } #news_page_container, #news_posts_container { background-color: #f5f4f4 !important; } } .news-tag-font { font-family:sans-serif!important; font-weight:400; } /* Star Ratings */ .rating { border: none; float: left; } .rating>input { display: none; } .rating>label.fa:before { margin: 5px; font-size: 2rem; display: inline-block; content: "\f005"; } .rating>label { color: #ddd; float: right; } .rating>input:checked~label, /* show gold star when clicked */ .rating:not(:checked)>label:hover, /* hover current star */ .rating:not(:checked)>label:hover~label { color: #FFD700; } /* hover previous stars in list */ .rating>input:checked+label:hover, /* hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* lighten current selection */ .rating>input:checked~label:hover~label { color: #FFD700; } /* Reviews */ #reviews-main i.fa.fa-star, #deletereviewstars i.fa.fa-star { color: #FFD700; font-size: 1.5em; margin: 0 3px; } #reviews-main .border-secondary { border-bottom: 1px solid #dee2e6 !important } #reviews-main .single-review-stars i.fa.fa-star { font-size:2.7rem; } @media (min-width: 1px) and (max-width: 766px) { #reviews-main .border-left { border-left: 1px solid transparent !important; } } .tips ul { columns: 1 !important; } .tips ul li { list-style-type: disc !important; } /* warning, event, etc bars */ .bar-account-warning { color: #FFFFFF; background: #578cc5; } .bar-account-warning a { color: #FFFFFF; } .bar-account-flagged { color: #FFFFFF; background: #CC3333; } .bar-account-flagged a { color: #FFFFFF; } .bar-brandpromo { background: linear-gradient(to right, #660000 0%, #cc3333 100%); color: #FFFFFF; position: relative; z-index:10; } .bar-brandpromo a { color:#FFFFFF; } .bar-brandpromo a:hover { text-decoration:underline; } .bar-eventpromo { background: linear-gradient(to right, #106000 0%, #31c435 100%); color: #ffffff; } .bar-eventpromo a { color:#FFFFFF; } .bar-openregistry { background: linear-gradient(to right, #106000 0%, #31c435 100%); color: #efefef; } .bar-openregistry a { color: #efefef; } .bar-tips, .bar-tips-nvp { background: #FE7C04; color: #efefef; } .bar-tips a, .bar-tips-nvp a { color: #efefef; text-decoration: underline; } .bar-tips .tipsbar-close, .bar-tips-nvp .tipsbar-open { cursor:pointer; } .bar-freeshipping { background: linear-gradient(to right, #660000 0%, #cc3333 100%); color: #FFFFFF; } .bar-freeshipping a { color:#FFFFFF; } .bar-freeshipping a:hover { text-decoration:underline; } /* Master Bar */ #masterbar .dropdown-menu { margin-top: -.1rem; } .masterbar-account-image { object-fit: cover; height:30px; width:30px; border: 1px solid #dee2e6; } /* style for the numbered badge that appears on the message center icon */ .masterbar-messages-count[data-count]:after { position: absolute; right: -10px; top: -10px; content: attr(data-count); font-size: 70%; padding: .4em; border-radius: 999px; line-height: .75em; color: white; background: rgba(255,0,0,.85); text-align: center; min-width: 2em; font-weight: bold; } #ShoppingBar .social-nav-green, #NoLoginBar .social-nav-green { background-color: #339833; color: #ffffff; } #ShoppingBar .social-nav-green:hover, #NoLoginBar .social-nav-green:hover { color: #ffffff !important; text-decoration: none; } #MasterBar .social-nav-add-menu { width: 225px; } #MasterBar .social-nav-user-menu { min-width: 270px; max-width: 500px; } #MasterBar .social-nav-management-menu { width: 745px; position: fixed; left: 0; right: 0; top: auto; margin-left: auto; margin-right: auto; } #MasterBar .activities { width: 600px; position: fixed; left: 0; right: 0; top: auto; margin-left: auto; margin-right: auto; } #MasterBar .orders { width: 500px; position: fixed; left: 0; right: 0; top: auto; margin-left: auto; margin-right: auto; } #MasterBar .social-nav-management-menu li { list-style-type: none; } #MasterBar .bridge-logo, #NoLoginBar .bridge-logo { max-height:30px; } #NoLoginBar .bridge-logo, #MasterBar .bridge-logo { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } #NoLoginBar .bridge-logo:hover, #MasterBar .bridge-logo:hover{ -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } #MasterBar .social-nav-management-menu a.activate-nav:after, #MasterBar .social-nav-management-menu a:hover:after { border-bottom: 0px solid transparent !important; } #MasterBar .badge-tip { background: #fe8311; cursor:pointer; } #social-nav .dropdown-menu li a { color: #1E6DF6; } #social-nav .dropdown-menu .header, #social-nav .dropdown-menu .header a { color: #212529; } #social-nav, #social-nav2, #ShoppingBar, #NoLoginBar { background-color: #3c3c3c; color: #FFFFFF; } /* The container
- needed to position the dropdown content */ .shopping-bag-dropdown { position: relative; display: flex; justify-content: center; } /* Dropdown Content (Hidden by Default) */ .shopping-bag-dropdown .dropdown-content { position: absolute; text-align: left; background-color: #fff; padding: 10px 10px 0 10px; border: solid 1px #aaa; top:38px; left: 50%; transform: translateX(-50%);; min-width: 400px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 200; border-radius: 0.25rem; visibility:hidden; opacity:0; filter:alpha(opacity=0); -webkit-transition: 250ms ease; -moz-transition: 250ms ease; -o-transition: 250ms ease; transition: 250ms ease; } /* Dropdown Content - Hover state */ .shopping-bag-dropdown:hover .dropdown-content { display:flex; flex-direction: column; visibility:visible; opacity: 1; filter: alpha(opacity=100); } .shopping-bag-dropdown > .shopping-bag-btn { border: 2px solid transparent; } .shopping-bag-dropdown > .shopping-bag-btn:hover { border: 2px solid #FFFFFF !important; color: #FFFFFF !important; background-color: #28a745; -moz-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } /*Hides the shoipping bag hover dropdown on NVP*/ @media (min-width: 1px) and (max-width: 577px) { .shopping-bag-main .dropdown-content, .shopping-bag-wholesale .dropdown-content { display:none !important; } } @media (min-width: 1px) and (max-width: 767px) { .social-nav-management-menu { display:none !important; } } /* adds divider between the cartitem class items in any shopping bag dropdown */ div.dropdown-content > div.cart-item { border-bottom: 1px solid #999999 !important; } /* removes the divider after last of the cart-item elements in a shopping bag dropdown */ div.dropdown-content > div.cart-item:last-child { border-bottom: none !important; } /* **------------------------------------------------------------------------------------- ** Login **------------------------------------------------------------------------------------- */ #login-main #show_hide_password a { color:#212529; } /* **------------------------------------------------------------------------------------- ** Slideshow **------------------------------------------------------------------------------------- */ #slidehow { background: #030303; } #slideshow .img-container{ position:relative; } #slideshow .img-container .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; } #slideshow .overlay .slideshow-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#000000; background-color: rgba(255,255,255,.90); } #slideshow .img-container .poweredby { position: absolute; right: 20px; bottom: 15px; } #slideshow .img-container .poweredby a { color: #FFFFFF !important; opacity: 0.7; } /* override of BS4 carousel icons to have less opacity */ .carousel-control-next, .carousel-control-prev { opacity: 0.8; } /* override of BS4 carousel indicators to have less opacity */ .carousel-indicators li { opacity: 0.7; } /* **------------------------------------------------------------------------------------- ** Navigation **------------------------------------------------------------------------------------- */ #navigation-bar { z-index: 100; } .navbar-dropshadow { box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.15); } /* removes bullets from lists in nav-links and submenu ul's */ #navigation-bar ul { list-style: none; } /* main bar nav-link styling */ #navigation-bar .navbar-nav .nav-link { font-size: 16px; } /* hides the default BS4 dropdown carat (we are using a Font Awesome one) */ #navigation-bar .nav-link:after { display: none; } /* navbar search button styles - mobile only */ #navigation-bar form { max-width: 225px; } /* override for above form width for iphone5 VPs only */ @media (max-width: 360px) { #navigation-bar form { max-width: 190px; } } #navigation-bar .search { position: relative } #navigation-bar .search-term { width: 100%; outline: none; } #navigation-bar .search-button { position: absolute; right: 0; top: 1px; width: 40px; height: 36px; border: none; text-align: center; border-radius: 5px; cursor: pointer; font-size: 20px; } #navigation-bar .dropdown-menu { z-index: 9999999 !important; } /* lets the dropdown-menu display when hovered */ #navigation-bar .dropdown:hover > .dropdown-menu { display: block; } /* speeds up the opening/closing of menus when hovered */ #navigation-bar .animated.faster { -webkit-animation-duration: 200ms; animation-duration: 200ms; } #navigation-bar .navbar-toggler { border-color: #1E6DF6; } /* this nullifies a boostrap css style so the triangle carats can work on dropdown-toggle nav links */ @media (min-width: 768px) { #navigation-bar .dropdown-toggle::after { display: initial; width: initial; height: initial; margin-left: initial; vertical-align: initial; content: initial; border: initial; } } /* sets explicit relative position on alink so navbar-active triangle can be absotely positioned correctly in the following rule */ @media (min-width: 768px) { a.navbar-active-retail, a.navbar-active-nonretail { position: relative; } } /* navigation active page triangles under nav links */ @media (min-width: 768px) { #navigation-bar a.navbar-active-retail::after { content: ''; display: inline-block; position: absolute; color: white; bottom: -8px; left: 50%; margin-left: -8px; width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; } #navigation-bar a.navbar-active-nonretail::after { content: ''; display: inline-block; position: absolute; color: #464646; bottom: -8px; left: 50%; margin-left: -8px; width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #464646; } } /* adds a gray bottom border to non-retail members navigation bars for content separation */ /* .navbar-bottom-border { border-bottom: 1px solid #999 } */ /* Collections submenu classes */ @media (max-width: 768px) { #navigation-bar .collections-dropdown { width: auto !important; } #navigation-bar .collections-dropdown ul { column-count: 1 !important; } } /* Brands submenu classes */ @media (max-width: 768px) { #navigation-bar .brands-dropdown { width: auto !important; } #navigation-bar .brands-dropdown ul { column-count: 1 !important; } } /* Departments submenu classes */ /* sets secondary submenu properties and position */ /* left value is changed for additional css columns in javascript - see site.js */ #navigation-bar .main-dept ul { display:none; position:absolute; margin-top:-30px; left: 185px; z-index:100; background-color: #464646 !important; } /* shows secondary submenu when main-dept li link is hovered */ #navigation-bar .main-dept:hover ul { display: block; } /* sets default link color in submenu to white */ #navigation-bar .main-dept:hover ul li { color: #fff !important; } /* changes background of submenu li to white when hovered */ /* #navigation-bar .main-dept:hover ul li:hover { background-color:#fff; } */ /* changes color of the link in a submenu to text-primnary color when hovered */ /* #navigation-bar .main-dept:hover ul li:hover a { color: #1E6DF6 !important; } */ /* removes the bottom border on last li in a submenu, overriding border classes set in the markup */ #navigation-bar .main-dept:hover ul li:last-of-type { border-bottom: none !important; } /* hide the dept secondary submenus on mobile */ @media (max-width: 768px) { #navigation-bar .main-dept ul, .main-dept:hover ul { display: none; } } @media (max-width: 768px) { #navigation-bar .departments-dropdown { width: auto !important; } #navigation-bar .departments-dropdown ul { column-count: 1 !important; } } /* New submenu classes */ @media (max-width: 768px) { #navigation-bar .new-dropdown { width: auto !important; } } #navigation-bar .new-dropdown-img { max-width: 100px; max-height: 100px; } /* Sale submenu classes */ @media (max-width: 768px) { #navigation-bar .sale-dropdown { width: auto !important; } } #navigation-bar .sale-dropdown-img { max-width: 100px; max-height: 100px; } /* Gift Ideas submenu classes */ @media (max-width: 768px) { #navigation-bar .gifts-dropdown { width: auto !important; } } #navigation-bar .gifts-featured-img { max-width: 100px; max-height: 100px; } /* Pricing styles - new / sale / gift ideas submenus */ #navigation-bar .dropdown-menu .oldprice { text-decoration: line-through; } #navigation-bar .dropdown-menu .newprice { padding-left: 0.25rem; color: red; } /* **------------------------------------------------------------------------------------- ** Index **------------------------------------------------------------------------------------- */ #notifications .file-caption-name { padding-left: 0px; } #notifications .file-preview { display:none; } #notifications .card #product-share-logo { max-width:135px; } #news_container .news-events div.card > a, #news_container .new-releases div.card > a:first-child, #news_container .home-new-releases div.card > a.product-image:first-child { display: flex; max-width: 300px; min-width:300px; max-height: 200px; min-height: 200px; } #news_container .home-new-releases div.card > a.brand-logo { width: 300px; margin-top: 100px; margin-bottom: 100px; } #news_container .news-nav { border-left:0px !important; border-right:0px !important; } #news_container .news-events a > img, #news_container .new-releases a >img, #news_container .home-new-releases a.product-image >img { object-fit: cover; } #news_container .indexchalkpost i { font-size: 7rem; min-width: 300px; min-height: 200px; padding-top: 1.3rem; } /* overrides BS4 hove behavior for keywords tags/badges so that they remain the same background color on hover and also the text is underlined like a normal link */ #notifications a.badge-light:focus, #notifications a.badge-light:hover { background-color: #f8f9fa !important; text-decoration: underline !important; } /* **------------------------------------------------------------------------------------- ** Dashboard **------------------------------------------------------------------------------------- */ .dashboard-gutter { border-top: 1px solid #343a40; } #dashboard-profile-details .bullet { font-size: 30px; color: #898989; line-height: 0.5; } #dashboard-profile-details .rounded-circle, #dashboard-office-team .rounded-circle, #dashboard-business-friends .rounded-circle { border: 3px solid #fff; height: 100px; width: 100px; object-fit: cover; } #dashboard-news .rounded-circle { border: 3px solid #fff; height: 50px; width: 50px; object-fit: cover; } #dashboard-news div.card div.position-sticky > a:first-child, #dashboard-news-own div.card > a:first-child, #dashboard-products div.card > a:first-child, #product-new div.card div.position-sticky > a:first-child, #product-changes div.card div.position-sticky > a:first-child { display: flex; width: 300px; height: 200px; } #dashboard-news a > img, #dashboard-news-own a > img, #dashboard-products a > img { object-fit: cover; } #dashboard-news .brandlogo, #dashboard-news-own .brandlogo, #dashboard-products .brandlogo { max-height:80px; max-width:200px; padding-top:10px } #dashboard-activity i.fa.fa-star { color: #FFD700; margin: 0 2px; } #dashboard-files .libraryicon { max-width:100px; max-height:100px; } #dashboard-files .button-circle { background: #FFFFFF; border-radius: 30px; padding: 10px; width:45px; height:45px; border: 1px solid #ddd; } @media (min-width: 993px) and (max-width:1198px) { #dashboard-news div.card div.position-sticky > a:first-child, #dashboard-news-own div.card > a:first-child, #dashboard-products div.card > a:first-child, #product-new div.card div.position-sticky > a:first-child, #product-changes div.card div.position-sticky > a:first-child { width: 260px; } } @media (min-width: 1px) and (max-width:420px) { #dashboard-news div.card div.position-sticky > a:first-child, #dashboard-news-own div.card > a:first-child, #dashboard-products div.card > a:first-child, #product-new div.card div.position-sticky > a:first-child, #product-changes div.card div.position-sticky > a:first-child { width: 100%; } } @media (min-width: 1px) and (max-width:750px) { .dashboard-gutter { border-top: 15px solid #d6d6d6; } } /* **------------------------------------------------------------------------------------- ** Collections **------------------------------------------------------------------------------------- */ #collections-main .collection-card-width { min-width: 300px; } #collections-main div.card>a { min-height: 300px; } #collections-main div.card>a>div.collection-image-container div>img { max-height: 300px; max-width: 300px; width: auto; } .collections-rounded { border-radius: 0.5rem; } .collection-image-container .new-pill { position: absolute; left: 10px; bottom: 37px; } #collections-top .nextbrand { right: 15px; top: 60px; position: absolute; } .collections-brand-by-dept-list { column-count: 2; column-gap: 30px; } .collections-brand-by-dept-list > li { break-inside: avoid-column; line-height:2.25rem; } /* **------------------------------------------------------------------------------------- ** Results **------------------------------------------------------------------------------------- */ /* results collection image banner styles */ @media (min-width: 1px) and (max-width:575px) { #collection-lifestyle-banner {height:150px;} } @media (min-width: 576px) and (max-width:991px) { #collection-lifestyle-banner {height:250px;} } @media (min-width: 992px) { #collection-lifestyle-banner {height:350px;} } #collection-banner-image { object-fit: cover; } .collection-banner-offset-arrow { font-size: 1.5em; -webkit-text-stroke: 1px; -webkit-text-stroke-color: #fff; } /* required style for responsive image on cards/gallery views */ #results-main div.card > a, #results-collection-info div.card > a, #departments-main div.card > a, #collections-main div.card > a, #collections-new-brand-products div.card > a { display: flex; /* max-width: 350px; */ max-height: 350px; min-height: 350px; } /* required style for responsive image on cards/gallery views */ #results-main div.card > a > img, #results-collection-info div.card > a > img, #departments-main div.card > a > img, #collections-main div.card > a > img, #collections-new-brand-products div.card > a > img { object-fit: contain; } /* Brand logo styles */ #results-main .is-brand-logo, #results-edit .is-brand-logo, #collections-main .is-brand-logo, #collections-new-brand-products .is-brand-logo, #departments-main .is-brand-logo { width: 60% !important; min-width: 120px !important; } #results-main .is-brand-logo-archived, #results-edit .is-brand-logo-archived, #collections-main .is-brand-logo-archived { opacity: .6; filter: grayscale(40); width: 60% !important; min-width: 120px !important; } /* Pricing styles */ #results-main .oldprice, #results-edit .oldprice { color: #6c757d!important; text-decoration: line-through; } #results-main .newprice, #results-edit .newprice, #collections-main .newprice { /*padding-left: 0.25rem;*/ color: #dc3545!important; } .results-view-gallery { border-bottom: 1px solid #6c757d; } .results-view-list > div:last-child { padding-bottom: 1rem !important; margin-bottom: 0rem !important; border-bottom: 1px solid #6c757d!important; } /* adds spacing and separator X's between dimension list items in the results list view */ .results-dimension-list .list-inline-item:not(:last-child)::after { content: "\00a0\00a0x\00a0"; } .results-capacity::before { content: "\00a0\00a0/\00a0"; } /* adds commas and spacing between keyword links in the collection info on bottom of results */ #results-collection-info .collection-info-keywords:not(:last-child)::after { content: "\002c\00A0"; } /* shows and hides the complete designer bio text on results-collection-info */ #results-collection-info .designer-bio p.collapse:not(.show), #collections-collection-info .designer-bio p.collapse:not(.show) { height: 100px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } #results-collection-info .designer-bio p.collapsing, #collections-collection-info .designer-bio p.collapsing { min-height: 100px !important; } #results-collection-info .designer-bio a.showbio.collapsed:after, #collections-collection-info .designer-bio a.showbio.collapsed:after { content: '+ More'; } #results-collection-info .designer-bio a.showbio:not(.collapsed):after, #collections-collection-info .designer-bio a.showbio:not(.collapsed):after { content: '- Less'; } /* Product Update*/ #product-update-main .list-group-item { cursor:pointer; background-color:#FFFFFF; } #product-update-main .list-group .checked { color: green; } #product-update-main .list-group .notchecked { color: #FFFFFF; } #product_update_results .img-fluid { min-height:60px; max-width:100px; } #product-update-main .fa-arrow-alt-circle-up, #product-export-main .fa-arrow-alt-circle-down { color: #9b9b9b; } /* About */ #about-main .header { color: #000000; background: #999999; } /* Friends */ #friends-main .fa-circle.clearcircle { color: #FFFFFF; font-size: .75rem; } #friends-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #friends-main .fa-circle.greencircle.halfcircle:after { bottom: 0; content: ""; position: absolute; background: #fff; width: 50%; height: 100%; left: 0; right: 0; } /* Connections */ #connections-main ul { columns: 3; } #connections-main ul li { list-style-type: none; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } #connections-main ul li:first-of-type { margin-top: 0rem !important; } /* circles in connections design are deprecated by Josh - 9-4-19 */ #connections-main .fa-circle.clearcircle { color: #FFFFFF; font-size: .75rem; } /* circles in connections design are deprecated by Josh - 9-4-19 */ #connections-main .fa-circle.greencircle { color: #339833; font-size: .75rem } @media (max-device-width: 320px) { #connections-main ul { columns:1; } } @media (min-width: 320px) and (max-width:568px) { #connections-main ul { columns:1; } } @media (min-width: 200px) and (max-width: 576px) { #connections-main ul { columns:1; } } @media (min-device-width: 320px) and (max-device-width: 567px) { #connections-main ul { columns:1; } } @media (min-device-width: 568px) and (max-device-width: 576px) { #connections-main ul { columns:1; } } @media (min-width: 577px) and (max-width: 766px) { #connections-main ul { columns:2; } } @media (min-width: 767px) and (max-width: 813px) { #connections-main ul { columns:2; } } @media (min-width: 814px) and (max-width: 875px) { #connections-main ul { columns:2; } } @media (min-width: 876px) and (max-width: 992px) { #connections-main ul { columns:2; } } /* Gift Ideas */ /* Brands */ #gift-ideas-main ul li { list-style-type: none; } /* Brands */ .brands_list { columns: 2; list-style-type: none; } .inactive-brands_list { columns: 2; } @media (min-width: 200px) and (max-width: 576px) { .brands_list, .inactive-brands_list { columns: 1; } .brands_list li, .inactive-brands_list li{ list-style-type: disc !important; margin-left:20px; } } #brands-main ul li { list-style-type: none; } #brands-main #yourbrands ul li { list-style-type: disc; } #brands-main .brands-distributor-logos img { max-height:50px; max-width: 170px; padding-left: 20px; padding-right: 20px; padding-top: 20px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } #brands-main .brands-distributor-logos img:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } @media (min-width: 1px) and (max-width: 577px) { .brands-distributor-logos { width:50%; } } #brand-management-main .fa-circle.redcircle { color: #f00; font-size: .75rem; } #brand-management-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #brand-management-main .fa-circle.lightpurplecircle { color: #B09EC7; font-size: .75rem } #brand-management-main .section-header { background-color: #999999; color: #FFFFFF; } table#brandlisttable th, table#brandlisttable td { border:1px solid #CCCCCC } table#brandlisttable .modal-only { display:none; } #brandlisttable tr.green td:nth-of-type(5) { background-color:#cfeaac; color:black } #brandlisttable tr.lightgreen td:nth-of-type(5) { background-color:#e4fbcd; color:black } #brandlisttable tr.lightpurple td:nth-of-type(5) { background-color:#f2e8fb; color:black } #brandlisttable tr.yellow td:nth-of-type(5) { background-color:#fcfbae; color:black } #brandlisttable tr.bridge td:nth-of-type(5) { background-color:#ffccff; color:black } table#brandreordertable th, table#brandreordertable td { border:1px solid #CCCCCC } #brandreordertable tr.green td:nth-of-type(3) { background-color:#cfeaac; color:black } #brandreordertable tr.lightgreen td:nth-of-type(3) { background-color:#e4fbcd; color:black } #brandreordertable tr.lightpurple td:nth-of-type(3) { background-color:#f2e8fb; color:black } #brandreordertable tr.yellow td:nth-of-type(3) { background-color:#fcfbae; color:black } #brandreordertable tr.bridge td:nth-of-type(3) { background-color:#ffccff; color:black } /* Departments */ #departments-main ul li { list-style-type: none; } #brands_mostpopular .border { border: 0px solid transparent !important; } #brands_mostpopular img { max-height:250px; } @media (min-width: 200px) and (max-width: 766px) { #brands_mostpopular .border { border: 1px solid #dee2e6 !important } } /* Registry */ .powered-by-bridge { text-shadow: 1px 1px 2px #000000; } #registry-nav ul li a.regnav-active { border-bottom: 2px solid #79b572; } #registry-nav ul li a:hover { text-decoration: none; border-bottom: 2px solid #79b572; } #registry-management-main progress.stage1::-moz-progress-bar { background: red; } #registry-management-main progress.stage1::-webkit-progress-value { background: red; } #registry-management-main progress.stage1 { color: red; } #registry-management-main progress.stage2::-moz-progress-bar { background: #f6a333; } #registry-management-main progress.stage2::-webkit-progress-value { background: #f6a333; } #registry-management-main progress.stage2 { color: #f6a333; } #registry-management-main progress.stage3::-moz-progress-bar { background: #f3c402; } #registry-management-main progress.stage3::-webkit-progress-value { background: #f3c402; } #registry-management-main progress.stage3 { color: #f3c402; } #registry-management-main progress.stage4::-moz-progress-bar { background: #f3dc06; } #registry-management-main progress.stage4::-webkit-progress-value { background: #f3dc06; } #registry-management-main progress.stage4 { color: #f3dc06; } #registry-management-main progress.stage5::-moz-progress-bar { background: #99da03; } #registry-management-main progress.stage5::-webkit-progress-value { background: #99da03; } #registry-management-main progress.stage5 { color: #99da03; } #registry-management-main progress.stage6::-moz-progress-bar { background: #06b025; } #registry-management-main progress.stage6::-webkit-progress-value { background: #06b025; } #registry-management-main progress.stage6 { color: #06b025; } #registry-management-main a.dropdown-item { color: #1E6DF6; } #registry-management-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #registry-management-main .fa-circle.yellowcircle { color: #fac30e; font-size: .75rem } #registry-management-main .recent-data > div.row:nth-of-type(odd), #registry-management-main .registry-summary > div.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } #registry-management-main .recent-data > div.row:nth-of-type(odd) div, #registry-management-main .recent-data > div.row:nth-of-type(even) div { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; } .registry-warning { color: #FFFFFF; } .registry-warning a { text-decoration:underline; color:#FFFFFF } #registry-management-main div.card > a, #registry-accounting-main div.card > a{ display: flex; max-width: 140px; max-height: 140px; min-height: 140px; width:140px; } #registry-management-main a > img, #registry-accounting-main a > img { object-fit: cover; } #registry-management-main .btn-secondary, #registry-management-main .btn-secondary a, #registry-accounting-main .btn-secondary, #registry-accounting-main .btn-secondary a { color: #1E6DF6; background: #EEEEEE; border: 1px solid #EEEEEE; } #registry-main .border-secondary, #registry-accounting-details-main .border-secondary { border-color: #dee2e6 !important } #registry-main .input-number:disabled { color: #000000 !important; background-color: #FFFFFF !important; border: 0px solid transparent !important; } #registry-main div.card > a { display: flex; max-width: 100px; max-height: 130px; min-height: 130px; } #registry-main .card a > img { object-fit: cover; } #registry-main .already-gifted { filter: contrast(0.65); -webkit-filter: contrast(0.65); } #registry-main .gifting-completed { position: absolute; right:0; bottom:15px; background:#2972bd; color:#FFFFFF; } #registry-main .oldprice, #collections-main .oldprice { text-decoration:line-through; } #registry-main i.fa.fa-star { color: #FFD700; font-size: 1.5rem; margin: 0 3px; } #registry-main .fas.fa-asterisk { color:red; font-size:0.7rem; } #registry-main #show_hide_password a { color:#212529; } #registry-main .registry-admin, #registry-accounting-details-main .registry-admin { background: #faf9f9; } #registry-main .section-header { background-color: #999999; color: #FFFFFF; } #registry-main .green-header { background-color: #28a745; color: #FFFFFF; } #registry-main .green-header a { color: #FFFFFF; } #registry-main h3 a .fa:after { content: "\f077"; } #registry-main h3 a.collapsed .fa:after { content: "\f078"; } #registry-main .registry-admin h3 a { color: #000000; text-decoration:none !important; display:block; } #registry-main .no-registry-picture { border:solid 1px #cecece; width:140px; padding:50px 0 50px 0; text-align:center; font-weight:bold; cursor:pointer; } #registry-main progress.stage1::-moz-progress-bar { background: red; } #registry-main progress.stage1::-webkit-progress-value { background: red; } #registry-main progress.stage1 { color: red; } #registry-main progress.stage2::-moz-progress-bar { background: #f6a333; } #registry-main progress.stage2::-webkit-progress-value { background: #f6a333; } #registry-main progress.stage2 { color: #f6a333; } #registry-main progress.stage3::-moz-progress-bar { background: #f3c402; } #registry-main progress.stage3::-webkit-progress-value { background: #f3c402; } #registry-main progress.stage3 { color: #f3c402; } #registry-main progress.stage4::-moz-progress-bar { background: #f3dc06; } #registry-main progress.stage4::-webkit-progress-value { background: #f3dc06; } #registry-main progress.stage4 { color: #f3dc06; } #registry-main progress.stage5::-moz-progress-bar { background: #99da03; } #registry-main progress.stage5::-webkit-progress-value { background: #99da03; } #registry-main progress.stage5 { color: #99da03; } #registry-main progress.stage6::-moz-progress-bar { background: #06b025; } #registry-main progress.stage6::-webkit-progress-value { background: #06b025; } #registry-main progress.stage6 { color: #06b025; } #registry-management-main .form-check-label span.active { border-bottom: 2px solid #79b572; } #registry-main .registry-email-overlay{ width:100%; background-color:#464646; opacity:0.8; bottom:0; display:flex; justify-content:flex-end; align-items:center; min-width:350px; margin-top:-58px; min-height:50px; } #registry-main .registry-email-overlay-nophoto { width: 100%; background-color: #464646; opacity: 0.8; bottom: 0; display: block; min-width: 497px; margin-top: 332px; min-height: 50px; font-size:1rem; } #registry-main .regcouplepicplaceholder .nophoto-text { position: absolute; margin-left: auto; margin-right: auto; margin-top: -100px; } #registry-main .reg-couple-pic-admin-email-overlay { margin: 5px 15px 5px 0px; display: flex; flex-direction: column; align-items: flex-end; color: #ffffff; } #registry-main .reg-couple-pic-admin-email-overlay a { color: #ffffff; } #registry-main .regcouplepicplaceholder { display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; text-align: center; font-size: 20px; cursor: pointer; } #registry-main .fas.fa-toggle-on.fa-rotate-180 { color: #CCCCCC; margin-top: 1px; } #registry-main .advanced-link, #registry-main .create-in-store-link { width:165px; background: #FFFFFF; border:0px solid transparent; } #registry-main .input-number { width: 44px !important; flex: initial !important; } #registry-main .needed-disabled:disabled, #registry-main .gifted-disabled:disabled { background: #FFFFFF; color:#FFFFFF; } #registry-main #recentregistry { width: 100%; left: 0; right: 0; margin-left: 0; margin-right: 0; } #registry-main .digital-copy { position:fixed; bottom:10px; right:10px; box-shadow:5px 5px 10px #999; -webkit-box-shadow: 5px 5px 10px #999; -moz-box-shadow: 5px 5px 10px #999; cursor:pointer; z-index: 99999; } #registry-main .fa-arrows-alt-v { font-size: 3rem; color:#999999; cursor: n-resize } #registry-main .registry-tips .fa-arrows-alt-v { font-size: 1.1rem; color:#000000; cursor: n-resize } #registry-main .registry-image { max-height:300px; } #registry-main .registry-image.sort-height { max-height:150px; } #registry-main .brand-image.sort-height { max-height:30px; } #registry-main .fa-angle-double-up, #registry-main .fa-angle-double-down { font-size: 2rem; color:#999999; } #registry-main .btn-secondary:hover, #registry-main .btn-secondary a:hover { color: #0056b3 !important; } #registry-main .btn-secondary, #registry-main .btn-secondary a { color: #1E6DF6; background: #FFFFFF; border: 1px solid #FFFFFF; } @media (min-width: 200px) and (max-width: 766px) { #registry-main #recentregistry { width: 100vw !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; position: relative !important; } .recent-data .col-12.col-md-4 { border-top:1px solid transparent !important; } } @media (min-width: 200px) and (max-width: 991px) { #registry-main .here-to-help.border-secondary, #registry-main .registry-login.border-secondary { border-bottom: 0px solid transparent !important; } } #registry-main .registry-amounts .input-group-text { background: #FFFFFF; border:0px solid transparent; display:block; text-align:right; } @media (min-width: 992px) { #registry-main .registry-amounts .input-group-text { width:135px; } } @media (min-width: 1200px) { #registry-main .registry-amounts .input-group-text { width:165px; } } /* adds spacing and separator X's between lwh dimension list items in the registry list view */ ul.registry-dimension-lwh-list li:not(:last-child)::after { content: "\00a0\00a0x\00a0"; } /* adds a separator / before the capacity output in the registry-product-dimensions divs */ .registry-capacity::before { content: "\00a0\00a0/\00a0"; } /* About Bridge */ #about-bridge-main .brandImage { max-width: 125px; padding-left: 20px; padding-right: 20px; padding-top: 20px; } /* Customers */ #customerdetails-main .section-header { background-color: #999999; color: #FFFFFF; } #customerdetails-main #customer-order-history .img-fluid { max-height:200px; } #customerdetails-main .subsection > div.row:last-of-type {border-bottom: 0px !important;} /* News Manager */ .custom-file-label { overflow:hidden } #news-management-main .custom-file .custom-file-input:lang(en) ~ .custom-file-label::after { background-color:#1E6DF6; color: #FFFFFF; } #news-management-main .fileinput-remove, #news_container .fileinput-remove { display:none; } button.btn-secondary.fileinput-remove.fileinput-remove-button { color: #FFFFFF !important; } #news-management-main .glyphicon-zoom-in:before, #news_container .glyphicon-zoom-in:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f00e"; } #news-management-main .glyphicon-zoom-in:before, #news_container .glyphicon-zoom-in:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f00e"; } #news-management-main .glyphicon-trash:before, #news_container .glyphicon-trash:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f2ed"; } #kvFileinputModal .glyphicon-resize-vertical:before, #news_container .glyphicon-resize-vertical:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f07d"; } #kvFileinputModal .glyphicon-fullscreen:before, #news_container .glyphicon-fullscreen:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f31e"; } #kvFileinputModal .glyphicon-resize-full:before, #news_container .glyphicon-resize-full:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f424"; } #kvFileinputModal .glyphicon-remove:before, #news_container .glyphicon-remove:before { font-family:"Font Awesome 5 Pro"; font-style: normal; content: "\f00d"; } #kvFileinputModal .modal-title { font-weight:400; } #news-management-main .chalk-images > li.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } #news-management-main .chalk-images .border-bottom { border-bottom:1px solid #dee2e6!important } /* Data Sharing */ #data-sharing-main .btn-success:disabled { background-color:#CCCCCC; color: #000000; border-color:#000000; } /* Success Checklist */ .tipbenefits { background-color: #efefef; } .tipcheckboxwrapper { width:120px; background:lightgray; padding: 5px; margin-top: 15px; border-radius: 10px; } .tipcheckboxwrapper.green { background:#D0FBD0; color:green; } .tipcheckboxskipwrapper { width:75px; background:lightgray; padding: 5px; margin-top: 15px; border-radius: 10px; } .tipcheckboxskipwrapper.red { background:#FECABA; color:red; } #boardingChecklistAgreementModal input[type="checkbox"] { transform: scale(1.5); } /* Orders */ #orders-main .fa-circle.redcircle { color: #f00; font-size: .75rem; } #orders-main .dataTable thead th { color:#0056b3; } .orders .breadcrumb-item + .breadcrumb-item::before { content: "|"; } .orders .breadcrumb { background-color :#FFFFFF !important; } .orders ol li a:hover { text-decoration:none !important; } .orders ol li span.active { border-bottom: 2px solid #79b572; } .orders ol li span:hover { border-bottom: 2px solid #79b572; } #orders-main .fa-circle.greencircle, #orderdetail-main .fa-circle.greencircle { color: #339833; font-size: .75rem } #orders-main .fa-circle.yellowcircle, #orderdetail-main .fa-circle.yellowcircle { color: #fac30e; font-size: .75rem } #orderdetail-main .fa-circle.redcircle { color: red; font-size: .75rem } #orderdetail-main tr.order-detail-header-row { background-color:rgba(0,0,0,.05) } #orderdetail-main .fa-circle.largeyellowcircle { color: #fac30e; margin-left:.10rem; } #orderdetail-main .fa-circle.largegreencircle { color: #339833; margin-left:.10rem; } #orders-main .form-check-inline .form-check-input { margin-top: -2px; } #orders-main table.dataTable thead .sorting::after, #orders-main table.dataTable thead .sorting_asc::after, #orders-main table.dataTable thead .sorting_desc::after, #orders-main table.dataTable thead .sorting_asc_disabled::after, #orders-main table.dataTable thead .sorting_desc_disabled::after, #orders-main table.dataTable thead .sorting::before, #orders-main table.dataTable thead .sorting_asc::before, #orders-main table.dataTable thead .sorting_desc::before, #orders-main table.dataTable thead .sorting_asc_disabled::before, #orders-main table.dataTable thead .sorting_desc_disabled::before { color: #0056b3; } #orderdetail-top .breadcrumb-item + .breadcrumb-item::before { content: "|"; } #orderdetail-top ol li span.active { border-bottom: 2px solid #79b572; } #orderdetail-top ol li span:hover { border-bottom: 2px solid #79b572; } /* BEGIN - order details CSS grid */ .orderdetails-grid-container { display: grid; grid-template-columns: auto auto; grid-template-columns: 1fr 1fr; grid-gap: 5px; } .orderdetails-grid-child:nth-child(2) { grid-row-end: span 2; } .orderdetails-grid-child:nth-child(3) { grid-row-end: span 3; } .orderdetails-grid-child:nth-child(4) { grid-row-end: span 2; } .orderdetails-grid-child:nth-child(5), .orderdetails-grid-child:nth-child(6) { grid-column: 1 / -1; } @media screen and (max-width: 768px) { .orderdetails-grid-container { grid-template-columns: auto; } } @media screen and (min-width: 768px) { .orderdetails-grid-child.registry-order-view { grid-column-start: 2; grid-row-start: 1; } } /* END - order details grid */ /* firefox bugfix for select inputs overflowing the grid */ #orderdetail-main select { min-width: 0; } #orderdetail-main span.orderdiscount + span.orderdiscount { padding-top: .25rem; } /* responsively truncated website links in NVP order details */ @media screen and (max-width: 768px) { #orderdetail-main .reg-website-link { display: inline-block; width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* responsively truncated website links in desktop order details */ @media screen and (min-width: 768px) { #orderdetail-main .reg-website-link { display: inline-block; width: 20vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } #orderdetail-main .section-header, #orderdetail-contents .section-header, #orderdetail-administration .section-header, #orderdetail-wholesaleordering .section-header { background-color: #999999; color: #FFFFFF; } #orderdetail-main .subsection, #orderdetail-contents .subsection, #orderdetail-administration .subsection, #orderdetail-wholesaleordering .subsection { border: 1px solid #dee2e6 !important } #orderdetail-main .border-secondary.border-top-0, #orderdetail-contents .border-secondary.border-top-0, #orderdetail-Administration .border-secondary.border-top-0, #orderdetail-wholesaleordering .border-secondary.border-top-0 { border-top: 0px solid transparent !important; } #orderdetail-main .border-secondary.border-bottom-0, #orderdetail-contents .border-secondary.border-bottom-0, #orderdetail-Administration .border-secondary.border-bottom-0, #orderdetail-wholesaleordering .border-secondary.border-bottom-0 { border-bottom: 0px solid transparent !important; } #orders-by-brand-main tr.green { background-color:#d1e9cf; } #order-by-store-table .img-fluid { max-height:130px } #OrderData { width:100% !important; } /* Custom Pages */ @media (min-width: 200px) and (max-width: 676px) { #cke_1_top { display:none; } } /* Product - Share */ #excelimage { max-height:65px; } /* Products */ #products-add-multiple-main #moreprods, #products-add-multiple-main #setpattern { display:none; } #products-add-main .nav-tabs { display: none; } #products-add-main h5 a .fa:before { content: "\f077"; } #products-add-main h5 a.collapsed .fa::before { content: "\f078"; } #add-product-content input[type="checkbox"] { transform: scale(1.5); } #products-add-main .section-header { background-color: #999999; color: #FFFFFF; } #products-add-main h5 a { display: block; text-decoration: none; } #products-add-main .border-secondary { border: 1px solid #dee2e6 !important } #products-add-main .border-secondary.border-top-0 { border-top: 0px solid transparent !important; } #products-add-main .border-secondary.border-bottom-0 { border-bottom: 0px solid transparent !important; } #products-add-main .section-header.rounded-top { border-radius: .25rem !important; } #editProductModal .deletesku { background-color:#ffafaf; } #editProductModal .nav-tabs { display: none; } #editProductModal h5 a .fa:before { content: "\f077"; } #editProductModal h5 a.collapsed .fa::before { content: "\f078"; } #editProductModal .section-header { background-color: #999999; color: #FFFFFF; } #editProductModal h5 a { display: block; text-decoration: none; } #editProductModal .border-secondary { border: 1px solid #dee2e6 !important } #editProductModal .border-secondary.border-top-0 { border-top: 0px solid transparent !important; } #editProductModal .border-secondary.border-bottom-0 { border-bottom: 0px solid transparent !important; } #editProductModal .section-header.rounded-top { border-radius: .25rem !important; } #editProductModal .fa-trash-alt.disabled { color: #adadad } #products-overview-main tr.brandheader { background-color: #FFFFFF; } #products-overview-main tr.brandheader td { border-top:0px solid transparent !important } @media(min-width:992px) { #products-add-main .nav-tabs { display: flex; } #products-add-main .card { border: none; } #products-add-main .card .card-header { display: none; } #products-add-main .card .collapse { display: block; } } @media(min-width:829px) { #editProductModal .nav-tabs { display: flex; } #editProductModal .card { border: none; } #editProductModal .card .card-header { display: none; } #editProductModal .card .collapse { display: block; } } @media(max-width:989px) { #products-add-main .tab-pane { display: block !important; opacity: 1; } } @media(max-width:828px) { #editProductModal .tab-pane { display: block !important; opacity: 1; } } @media (min-width: 1px) and (max-width: 991px) { #products-add-main .subsection.border-secondary { border: 0px solid transparent !important; } #products-add-multiple-main #add-multiple-product-table { width: 100vw !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; position: relative !important; } } /* Noty Responsiveness */ @media (min-width: 1px) and (max-width: 767px) { #noty_layout__topRight { right: 0; margin-left: auto; margin-right: auto; left: 0; } } /*Checkout*/ #start-checkout-main .start-checkout-next-btn { width: 50%; } @media (max-width: 991px) { #start-checkout-main .start-checkout-next-btn { width: 100%; } } /* Overrides the BS4 bottom border classes on the div elements of the cart contents section on startcheckout so that they dont show on the last div and also works for single items in the same cart contents output */ #start-checkout-main .cart-contents div:last-child { border: none !important; } /* Added to allow border between 2 main blocks of the startcheckout page */ #start-checkout-main .start-checkout-border { border-right: 1px solid #343a40; } @media (min-width: 1px) and (max-width: 767px) { #start-checkout-main .start-checkout-border { border-bottom: 1px solid #343a40; } #start-checkout-main .start-checkout-border { border-right: none; } } /*for bottom border on the checkout help icons, used on NVP*/ @media (max-width: 575px) { #start-checkout-icons .icons-bottom-border { border-bottom:1px solid #dee2e6 !important } } #show-cart-main .checkout-section-bar { background-color: #f9f9f9 !important; } #start-checkout-main .oldprice, #show-cart-main .oldprice { text-decoration: line-through; } /* copy of the BS4 btn-secondary class because button.btn-secondary selector is being hijacked by custom color overrides in the header.cfm by something mark added at least 6 months ago - Josh 10-9-19 */ #show-cart-main .btn-promo-disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; } #show-cart-main .go-to-checkout-btn { min-width:280px; } /* makes the "Place Order" button full viewport width on NVP */ @media (min-width: 1px) and (max-width: 767px) { #show-cart-main .go-to-checkout-btn { display: block!important; width:100% !important; } } /* makes the "Place Order" button full viewport width on NVP */ @media (min-width: 1px) and (max-width: 767px) { #show-cart-main .place-order-btn, #checkout-main .place-order-btn { display: block!important; width:100% !important; } } /* adds dividers lines between shooping bag items in NVP */ @media (min-width: 1px) and (max-width: 767px) { #updatecart div.show-cart-row + div.show-cart-row { border-top: 1px solid #6c757d!important; } } /* show/hide toggle for the wholesale order terms section in showcart/checkout */ @media (min-width: 1px) and (max-width: 576px) { .wholesale-terms-toggle.collapsed:before { content:'+ Show'; } } @media (min-width: 577px) { .wholesale-terms-toggle.collapsed:before { content:'+ Show Terms'; } } @media (min-width: 1px) and (max-width: 576px) { .wholesale-terms-toggle:before { content:'- Hide'; } } @media (min-width: 577px) { .wholesale-terms-toggle:before { content:'- Hide Terms'; } } @media (min-width: 1px) and (max-width: 767px) { .wholesale-terms-label { min-width: 90px; } } /* class needed to override BS$ using "!impotant" on the d-flex class for properly toggling of the shipinfo block on the order form */ #order-form-main #shipinfo.toggle-show { display:none !important; } /* Checkout - CC Validator styles */ form #ccnumber { background-image: url(/img/jquerycreditcardvalidator-images.png), url(/img/jquerycreditcardvalidator-images.png); background-position: 4px -119px, 495px -58px; background-size: 120px 361px, 120px 361px; background-repeat: no-repeat; padding-left: 61px; } form #ccnumber.visa {background-position: 4px -163px, 495px -58px;} form #ccnumber.amex {background-position: 4px -205px, 495px -58px;} form #ccnumber.mastercard {background-position: 4px -247px, 495px -58px;} form #ccnumber.maestro {background-position: 4px -289px, 495px -58px;} form #ccnumber.discover {background-position: 4px -331px, 495px -58px;} /* xs viewport cc checkmarks */ @media (max-width: 575px) { form #ccnumber.valid.visa {background-position: 4px -163px, 440px -84px;} form #ccnumber.valid.amex {background-position: 4px -205px, 440px -84px;} form #ccnumber.valid.mastercard {background-position: 4px -247px, 440px -84px;} form #ccnumber.valid.maestro {background-position: 4px -289px, 440px -84px;} form #ccnumber.valid.discover {background-position: 4px -331px, 440px -84px;} } /* sm viewport cc checkmarks */ @media (min-width: 576px) and (max-width: 767px) { form #ccnumber.valid.visa {background-position: 4px -163px, 450px -84px;} form #ccnumber.valid.amex {background-position: 4px -205px, 450px -84px;} form #ccnumber.valid.mastercard {background-position: 4px -247px, 450px -84px;} form #ccnumber.valid.maestro {background-position: 4px -289px, 450px -84px;} form #ccnumber.valid.discover {background-position: 4px -331px, 450px -84px;} } /* md viewport cc checkmarks */ @media (min-width: 768px) and (max-width: 991px) { form #ccnumber.valid.visa {background-position: 4px -163px, 625px -84px;} form #ccnumber.valid.amex {background-position: 4px -205px, 625px -84px;} form #ccnumber.valid.mastercard {background-position: 4px -247px, 625px -84px;} form #ccnumber.valid.maestro {background-position: 4px -289px, 625px -84px;} form #ccnumber.valid.discover {background-position: 4px -331px, 625px -84px;} } /* lg viewport cc checkmarks */ @media (min-width: 992px) and (max-width: 1199px) { form #ccnumber.valid.visa {background-position: 4px -163px, 405px -84px;} form #ccnumber.valid.amex {background-position: 4px -205px, 405px -84px;} form #ccnumber.valid.mastercard {background-position: 4px -247px, 405px -84px;} form #ccnumber.valid.maestro {background-position: 4px -289px, 405px -84px;} form #ccnumber.valid.discover {background-position: 4px -331px, 405px -84px;} } /* xl or larger cc checkmarks */ @media (min-width: 1200px) { form #ccnumber.valid.visa {background-position: 4px -163px, 495px -84px;} form #ccnumber.valid.amex {background-position: 4px -205px, 495px -84px;} form #ccnumber.valid.mastercard {background-position: 4px -247px, 495px -84px;} form #ccnumber.valid.maestro {background-position: 4px -289px, 495px -84px;} form #ccnumber.valid.discover {background-position: 4px -331px, 495px -84px;} } /* Collections Manager */ #collections-management-main .fa-arrows-alt-v { font-size: 3rem; color:#999999; cursor: n-resize } #collections-management-main .dragger a { color:#999999; } #collections-management-main .dragger a.fas { font-size:5rem; } #collections-management-main input[type="checkbox"] { transform: scale(1.5); } #collections-management-main tr.divider { background-color:#fcfbae; } .collection-admin { background: #faf9f9; } /* Details */ /* replicates the "small" BS4 class for smaller text for the dimensions/capacity block at the top of details for middling VPs only to avoid wrapping */ @media (min-width: 768px) and (max-width: 991.98px) { .details-top-dimensions { font-size: 80%; font-weight: 400; } } /* adds spacing and separator X's between lwh dimension list items in the details view */ ul.details-dimension-lwh-list li:not(:last-child)::after { content: "\00a0\00a0x\00a0"; } /* adds spacing and separator X's between dwc dimension list items in the details view */ ul.details-dimension-dwc-list li:not(:last-child)::after { content: ",\00a0"; } /* adds a separator / before the capacity output in the details-top-dimensions div */ .details-capacity::before { content: "\00a0\00a0/\00a0"; } #details-page #new-product-link { position: absolute; left: 8%; top: 5%; } #details-page #custom-product-link { position: absolute; right: 8%; top: 5%; } #product-nvp-like { display:none; position: absolute; right: 2%; top: 3%; } @media (min-width: 1px) and (max-width: 576px) { #details-page #custom-product-link { position: absolute; left: 8% !important; right: inherit !important; top: 4% !important; background-color: rgba(255, 255, 255, 0.8) !important; } #product-nvp-like { display:block !important; } } #details-page #product-mobile-pricing-container { display: flex; align-items: center; position: absolute; bottom: 5px; left: 6%; min-height: 60px; } #product-mobile-pricing.trans-background, #product-mobile-pricing-next.trans-background { background-color: rgba(255, 255, 255, 0.8); } .details-price-separator { content: ''; display: inline-block; background: #888; height: 2rem; width: 1px; } .details-main-height { max-height: 750px; } .details-thumb { border: 1px white solid; } .details-thumb:hover { border: 1px black solid; } .details-sidebar-title { min-width: 90px; } .chalkpost .rounded-circle { border: 3px solid #fff; height: 60px; width: 60px; object-fit: cover; margin-top:-13px; } #details-page .cbliket { display: none; } #details-page .dropdown-item:focus, .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #eeeeee; } #details-page .dropdown-item { color: #1E6DF6; } #details-page .btn-keywords-update, .show>.btn-secondary.dropdown-toggle { color: #1E6DF6; background: #EEEEEE; border: 1px solid #EEEEEE; } #details-page .btn-keywords-update:hover { color: #0056b3 !important; } #details-page .actionbuttons .btn { flex: 1; cursor: initial; } #details-page .actionbuttons .btn-light:hover { background-color: #f8f9fa; border-color: #f8f9fa; } #details-page i.fa.fa-star { color: #FFD700; font-size: 1.1rem; } #details-page .chalk-left i { font-size: 10rem; } @media (min-width: 1px) and (max-width: 766px) { #details-page .chalk-left i { font-size: 5rem; } } #details-main input[type='number'] { -moz-appearance:textfield; } #details-main .product-circle { position: absolute; background: #FFFFFF; border-radius: 30px; right: 5px; bottom: 5px; padding: 5px; width: 30px; vertical-align: middle; } #details-main .customskudata .input-group-prepend label { width:50px; } #details-main input::-webkit-outer-spin-button, #details-main input::-webkit-inner-spin-button { -webkit-appearance: none; } @media (min-width: 1px) and (max-width: 576px) { .details-item-date { margin-left: 0; width: 100%; } .details-item-date-blank { display: none; } } @media (min-width: 768px) and (max-width: 992px) { .details-item-date { margin-left: 0; width: 100%; } } #details-shopbytags #tagscontainer { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .05rem; } #details-shopbytags #tagscontainer.collapse:not(.show) { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .05rem; height: 100px; overflow: hidden; } #details-shopbytags #tagscontainer.collapsing { height: 100px; } #details-shopbytags a.showmore.collapsed::after { content: '+ Show More Tags'; } #details-shopbytags a.showmore:not(.collapsed)::after { content: '- Show Fewer Tags'; } /* details product thumbs borders (removes bottom border on desktop */ @media (min-width: 767px) { #details-main .product-thumbs-borders { border-bottom: 0px !important; } } .arrow-indent { background: url(https://www.rosenthalshowroom.com/img/indentarrow20.gif) -1px -4px no-repeat; } #messagingReplyModal .arrow-indent { width:20px; height:20px; } /* Stores */ #stores-main .store-image { max-height:50px; max-width: 170px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } #stores-main .store-image:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } #stores-main .brands-distributor-logos img { max-height:50px; max-width: 170px; padding-left: 20px; padding-right: 20px; padding-top: 20px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } #stores-main .brands-distributor-logos img:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } #stores-main .product-stores { columns:3; } @media (min-width: 200px) and (max-width: 577px) { #stores-main .product-stores { columns:1 !important; } } @media (min-width: 578px) and (max-width: 990px) { #stores-main .product-stores { columns:2 !important; } } /* Discounts */ #discounts-main .discountlist > div.row:nth-of-type(odd), #discounts-main .productlist > div.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } #discountAddProductsModal [type="checkbox"], #discounts-main [type="checkbox"] { transform: scale(1.5); } #discounts-main .img-fluid, #discountAddProductsModal .img-fluid { max-height:150px; } .addproductsearchresults .row.checked { background-color: #ddf1dd; } /* Promotions */ #promotions-main .section-header { background: linear-gradient(to right, #660000 0%, #cc3333 100%);; color: #FFFFFF; } #promotions-main .list-group .checked, #addPromotionModal .modal-body .list-group .checked, #editPromotionModal .modal-body .list-group .checked { color: green; } #promotions-main .list-group .notchecked, #addPromotionModal .modal-body .list-group .notchecked, #editPromotionModal .modal-body .list-group .notchecked { color: #FFFFFF; } #promotions-main .list-group-item, #addPromotionModal .list-group-item, #editPromotionModal .list-group-item { cursor:pointer; background-color:#FFFFFF; } /* Messaging Center */ #messaging-main div.odd, #messagingReplyModal div.odd { background-color: rgba(0,0,0,.05); border-color: #000000; } #messaging-main div.even, #messagingReplyModal div.even { background-color: #FFFFFF; border-color: #000000; } #messaging-main .messages .messagerow:nth-of-type(4n+0) >div, #messaging-main .messages .messagerow:nth-of-type(4n+1) >div{ background-color: rgba(0, 0, 0, .05); } /* Footer */ #footer { background: #FFFFFF !important; box-shadow: 0px 500px 0px 500px #e9e9e9, 0 -1px 10px rgba(0, 0, 0, .25); padding-top: 20px; } #footer .border-secondary { border-color: #F0F0F0; } #footer h5 { padding-bottom: 6px; margin-bottom: 10px; color: #ffffff; } #footer a { color: #1E6DF6; text-decoration: none; background-color: transparent; } #footer a:hover { text-decoration: underline !important; } #footer ul.social li { padding: 3px 0; } #footer ul.social li a i { margin-right: 5px; font-size: 25px; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.social li:hover a i { font-size: 30px; margin-top: -10px; } #footer ul.social li a, #footer ul.quick-links li a { color: #ffffff; } #footer ul.social li a:hover { color: #eeeeee; } #footer ul.quick-links li { padding: 3px 0; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.quick-links li:hover { padding: 3px 0; margin-left: 5px; font-weight: 700; } #footer ul.quick-links li a i { margin-right: 5px; } #footer ul.quick-links li:hover a i { font-weight: 700; } #footer #site-thankyou { position: relative; top: 7px; color: #fff; } #footer .footer-logo { max-height:120px; } #registry-footer-bottom { position: fixed; bottom: 0px; right: 0px; width: 100%; text-align: center; z-index: 100; border-width:2px; } #registry-footer-bottom > div > div { -webkit-box-shadow: 0px -4px 4px -1px rgba(0, 0, 0, .25); -moz-box-shadow: 0px -4px 4px -1pxx rgba(0, 0, 0, .25); box-shadow: 0px -4px 4px -1px rgba(0, 0, 0, .25); } .registry-footer-row { background-color: #339833; color: #fff; } #registry-footer-bottom .bg-success { border-width:2px !important; border-style: solid; } #registry-footer-bottom a { color: #ffffff; } #registry-tab-right { position: fixed; background-color: #339833; color: #fff; z-index: 10; bottom: 250px; left: 0px; width: 120px; padding: 0; } #registry-tab-right a, #registry-tab-right-hidden a { color: #ffffff; } #registry-tab-right-hidden { position: fixed; background-color: #339833; color: #fff; z-index: 10; bottom: 250px; right: 0px; width: 45px; padding: 0; } #brand-footer { background: #e9e9e9; min-height:160px; color: #696969; } #brand-footer a { color: #0A5CEB; } #brand-footer img { position: relative; top: -2px; } #brand-footer .bridge-logo-brand { background: url("/img/bridge-logo.png") no-repeat 0 0; background-size: 9%; background-position-y: -1px; padding-left: 28px; } @media (max-width: 568px) { #brand-footer { text-align: center; min-height:270px !important; } } /* **------------------------------------------------------------------------------------- ** INCLUDE STYLES - Styles below for files in the /inc directory **------------------------------------------------------------------------------------- */ #directorylist .directoryrow { border-bottom: 1px solid #CCCCCC; } #directorylist .headerrow { border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; } #directorylist > div.row:nth-of-type(odd) { background: rgba(0,0,0,.05); } /* **------------------------------------------------------------------------------------- ** DEVELOPMENT CLASSES **------------------------------------------------------------------------------------- */ .row-hl { background: #f4f4f4; } .item-hl { border: 1px solid #333; } /* **------------------------------------------------------------------------------------- ** MEDIA QUERIES ** Note: media queries specifc to pages/IDs should be stored in the individual page styles. ** Note: The entries below can be used as a cheatsheet but bootstrap default breakpoint ** solutions should be used as much as possible **------------------------------------------------------------------------------------- */ /* Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap */ @media screen and (max-device-width: 320px) {} @media screen and (min-device-width: 320px) and (max-device-width: 568px) {} @media screen and (min-device-width: 320px) and (max-device-width: 768px) {} @media (min-width: 500px) {} /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) {} /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) {} @media (min-width: 768px) and (max-width: 992px) {} /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) {} @media only screen and (max-width: 992px) {} /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) {} /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {} /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {} /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {} /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {}