* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @font-face { font-family: 'grapp'; src:  url('https://app.grapp-label.eu/assets/fonts/grapp.eot?53sown'); src:  url('https://app.grapp-label.eu/assets/fonts/grapp.eot?53sown#iefix') format('embedded-opentype'), url('https://app.grapp-label.eu/assets/fonts/grapp.ttf?53sown') format('truetype'), url('https://app.grapp-label.eu/assets/fonts/grapp.woff?53sown') format('woff'), url('https://app.grapp-label.eu/assets/fonts/grapp.svg?53sown#grapp') format('svg'); font-weight: normal; font-style: normal; font-display: block; } #label-editor { overflow: hidden; } body { --color-text: #1d1d1d; --color-title: #0d0c22; --color-bg: #f5f5f5; --color-link: #1d1d1d; --color-link-hover: #000000; --black: #1d1d1d; --white: #ffffff; --grey: #2f2f2d; --light-grey : #e8e8e8; --blue : 13,202,240; --organic : #38a741; --valid : #0dc167; --warning : #ffc107; --danger : #ec4545; --main : var(--bs-info); --bg-input : #f7f7f7; --bs-secondary-rgb: 118,118,118; --bs-light-rgb: 247,247,247; --font-family-body: "Plus Jakarta Sans", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --site-max-width: 1290px; --transition: cubic-bezier(.165,.84,.44,1); --bs-dark-rgb: 29,29,29; --bs-secondary-bg-subtle: var(--bg-input); --bs-primary-rgb: var(--blue); } .hidden { display: none; } .color-main { color: var(--main); } .color-organic { color: var(--organic); } .mw-10 { min-width: 10%; } .mw-15 { min-width: 15%; } .vh-100 { height: calc(100 * var(--vh, 1vh)) !important; } .min-vh-100 { min-height: calc(100 * var(--vh, 1vh)) !important; } .modal { --bs-modal-border-radius: 25px; --bs-modal-border-width: 0px; --bs-modal-header-border-width: 0px; --bs-modal-footer-border-width: 0px; --bs-modal-width: 600px; --bs-modal-title-line-height : 1.1; --bs-modal-margin: 5vw; } .modal-backdrop { --bs-backdrop-opacity: 0.7; } .modal-content { box-shadow: 0px 15px 55px 0px rgba(0, 0, 0, 0.15); } .modal-header { position: relative; --bs-modal-header-padding: clamp(25px, 4vw, 40px) clamp(15px, 4vw, 55px) clamp(5px, 1vw, 16px); } .modal-body { --bs-modal-padding: 1rem clamp(15px, 4vw, 55px); } .modal-footer { padding: 1rem clamp(15px, 4vw, 55px) clamp(20px, 3vw, 40px); } .row { } .btn { --bs-btn-border-radius: 25px; --bs-btn-font-size: 14px; --bs-btn-font-weight: 700; --bs-btn-line-height: 1; --bs-btn-padding-x: 25px; --bs-btn-padding-y: 12px; --bs-btn-border-width: 2px; --bs-modal-footer-gap: 0;   } .isChrome .btn { --bs-btn-font-weight: 600; } .btn-sm, .btn-md-sm { --bs-btn-font-size: 13px; --bs-btn-border-radius: 25px; --bs-btn-padding-x: 15px; --bs-btn-padding-y: 11px; } .btn-xs { --bs-btn-font-size: 12px; } .btn-lg { --bs-btn-border-radius: 30px; --bs-btn-padding-x: 30px; --bs-btn-padding-y: 16px; } .btn-xl { --bs-btn-font-size: 15px; } .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--color-title); --bs-btn-border-color: var(--color-title); --bs-btn-hover-bg: #565564;  --bs-btn-hover-border-color: #565564; } .btn-primary { --bs-btn-bg: var(--main); --bs-btn-border-color: var(--main); --bs-btn-hover-bg: #565564; --bs-btn-hover-border-color: #565564; --bs-btn-active-bg: var(--main); --bs-btn-active-border-color: var(--main); --bs-btn-disabled-bg: var(--main); --bs-btn-disabled-border-color: var(--main); } .btn-outline-primary { --bs-btn-color: rgb(var(--blue)); --bs-btn-border-color: rgb(var(--blue)); --bs-btn-hover-bg: rgb(var(--blue)); --bs-btn-hover-border-color: rgb(var(--blue)); } .btn-light { --bs-btn-bg: var(--white); --bs-btn-border-color: var(--white); } .btn-link { --bs-btn-color: var(--color-link); --bs-btn-hover-color: var(--color-link-hover); } .btn[data-bs-toggle="popover"] { --bs-btn-font-size: 15px !important; } .btn-fixed { --bs-btn-font-size: 25px; border-radius: 50%; padding: 12px; aspect-ratio: 1/1; box-shadow: 0 0px 30px 0 rgba(0,0,0,.25); } .btn-fixed:hover { transform: translateY(-5px); } .modal .btn-close { display: flex; --bs-btn-close-opacity: 1; --bs-btn-close-bg: none; width: auto; height: auto; } .btn-close i { font-size: 20px; } .modal-header .btn-close { position: absolute; right: clamp(15px, 2vw, 25px); top: clamp(15px, 1.5vw, 20px); } .form-control { --bs-border-width: 0; --bs-form-valid-border-color: var(--bg-input); padding: .85rem 1rem; font-size: 15px; font-weight: 600; background-color: var(--bg-input); border-radius: 5px; } .form-control:focus, .form-select:focus, #label-editor .form-check-input:focus { background-color: var(--bg-input); border-color: var(--bg-input); } .form-check-input { --bs-border-color: #b8bec3; } .form-control:focus, .form-select:focus, .form-check-input:focus, .form-control.is-valid:focus, .was-validated .form-control:valid:focus, .form-check-input.is-valid:focus, .was-validated .form-check-input:valid:focus, .rcp_card_name:focus { box-shadow: 0 0 0 2px rgba(13,202,240,1); } .form-control[readonly] { cursor: default; } .form-control[readonly]:focus { box-shadow: none !important; } .form-check-input:focus { border-color: var(--bs-gray-400); } .form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label { color: inherit; } .invalid-feedback { font-size: 13px; font-weight: 700; } .form-control.is-invalid, .was-validated .form-control:invalid { background-image: none; } .form-control.is-valid, .was-validated .form-control:valid { background-image: none; padding-right: 1rem; } .bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle { border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 2px var(--bs-form-invalid-border-color); } #label-editor .form-switch .form-check-input { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); background-color: var(--bs-gray-400); border-color: var(--bs-gray-400); cursor: pointer; } .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); box-shadow: none; } .form-switch .form-check-input { --bs-border-width: 2px; width: 2.4em; height: 1.35em; margin-right: .5em; margin-top: .2em; } .form-check .form-check-label { vertical-align: text-top; } #label-editor .form-check-input:checked { background-color: var(--main); border-color: var(--main); } .form-check-input.is-valid, .was-validated .form-check-input:valid { --bs-form-valid-border-color: var(--bs-border-color); } .form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked { background-color: var(--bs-blue); } .modal .form-control { font-size: 17px; padding: .65rem .9rem; } .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.2 4.6L8 11.4l6.8-6.8H1.2z'/%3E%3C/svg%3E"); --bs-border-width: 0; background-color: var(--bg-input); font-size: 15px; font-weight: 700; padding: .85rem 1rem; } .input-group-text { padding: .375rem 1rem .375rem 0; font-size: 15px; color: var(--color-text); border: none; background-color: transparent; } #label-datas .field-type-text .input-group-text, #label-datas .field-type-number .input-group-text { position: absolute; right: 0; height: 100%; z-index: 6; } .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding-right: 40px; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100% !important; } .dropdown-menu { --bs-dropdown-font-size: 15px; --bs-dropdown-border-width: 0px; --bs-dropdown-link-active-bg: transparent; --bs-dropdown-header-color: var(--black); --bs-dropdown-link-hover-bg: var(--color-bg); --bs-dropdown-padding-x: 10px; --bs-dropdown-padding-y: 10px; box-shadow: 0 10px 30px 0 rgba(31,45,61,.1); max-width: calc(100vw - 30px); } .dropdown-header { font-size: 15px; font-weight: 800; } .dropdown-item { font-weight: 500 !important; --bs-dropdown-item-border-radius: 5px; --bs-dropdown-item-padding-y: 7px; } .dropdown-item .text:first-letter { text-transform: uppercase; } .bootstrap-select .dropdown-menu li { margin-right: 0px; } .bootstrap-select .dropdown-menu li a.opt { padding-left: 15px; } .bootstrap-select.show-tick .dropdown-menu li a span.text { margin-right: 25px; } .bootstrap-select.dropdown-menu li a span.text { line-height: 1.2; } .dropdown-item.active, .dropdown-item:active { color: var(--bs-dropdown-link-color); font-weight: 800; } .dropdown-item.selected { color: var(--white); background-color: var(--main); } .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { top: 10px; } .bootstrap-select > .dropdown-toggle { --bs-btn-border-radius: 5px; --bs-btn-font-size: 15px; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 14px; --bs-btn-border-width: 0px; --bs-btn-line-height: 1.4; --bs-btn-font-weight: 600; --bs-btn-active-bg: var(--bg-input); background-color: var(--bg-input); } .bootstrap-select .dropdown-toggle .filter-option-inner-inner { min-height: 20px; } .bootstrap-select .dropdown-toggle .filter-option-inner-inner:first-letter { text-transform: uppercase; } .bs-searchbox .form-control { padding: .55rem 1rem; font-weight: 400; } .dropdown-toggle:after, .dropup .dropdown-toggle:after { border: 0; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f107"; font-size: 16px; margin-top: 0 !important; margin-bottom: -1px; } .dropup .dropdown-toggle:after { transform: rotate(180deg); } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } body .loading { pointer-events: none; } .loading .fa-spinner, .loading .spinner-border { display: inline-block !important; } .btn.loading { position: relative; color: var(--bs-btn-bg); } .touchscreen .btn.loading { color: var(--bs-btn-hover-bg); } .btn.loading .spinner-border { color: var(--bs-btn-color) !important; } .btn.loading > span { opacity: 0; } .btn.loading .spinner-border { display: inline-block !important; position: absolute; left: calc(50% - (var(--bs-spinner-width)/2)); top: calc(50% - (var(--bs-spinner-height)/2)); opacity: 1; } body.loading, body.loading * { cursor: wait !important; } body.loading * { pointer-events: none; } .alert { --bs-success-bg-subtle: #dbf2bb; --bs-warning-bg-subtle: #feea86; --bs-alert-border: 0; --bs-alert-border-radius: 8px; --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .9rem; --bs-danger-text-emphasis: #c62828; font-weight: 500; } .login .alert:not(.alert-success) { font-size: 14px; line-height: 1.4; } .alert .alert-icon { font-size: 17px; } .alert a { font-weight: 700; color: var(--bs-alert-color); } .alert-success .alert-icon:before,  .toast-success .alert-icon:before {content: "\f00c";} .alert-danger .alert-icon:before, .alert-warning .alert-icon:before, .toast-danger .alert-icon:before, .toast-warning .alert-icon:before {content: "\f071";} .alert .incorrect_password a:last-of-type { display: inline-block; } .alert-dismissible .btn-close { top: 50%; right: 8px; padding: 10px 10px; transform: translateY(-50%); } .toast-alert { --bs-toast-max-width: min(390px, 95%); width: auto; max-width: var(--bs-toast-max-width); bottom: clamp(15px, 3vw, 30px); right: clamp(15px, 3vw, 30px); z-index: var(--bs-toast-zindex); } .toast-alert .toast-body { padding-left: 15px; } .toast-success {background-color: var(--valid);} .toast-warning {background-color: var(--warning); color: var(--bs-alert-color) !important;} .toast-danger {background-color: var(--danger);} .btn > i { } .card { --bs-card-spacer-y: 25px; --bs-card-spacer-x: 25px; } .grapp-popover { --bs-popover-max-width: 250px; --bs-popover-bg: var(--bs-cyan); --bs-popover-body-color: var(--bs-white); --bs-popover-border-color: var(--main); --bs-popover-header-bg: var(--main); --bs-popover-header-color: var(--bs-white); --bs-popover-body-padding-y: .8rem; --bs-popover-font-size: 13px; line-height: 1.3; } .grapp-tooltip { --bs-tooltip-bg: var(--main); --bs-tooltip-padding-y: 0.5rem; --bs-tooltip-padding-x: 0.7rem; --bs-tooltip-font-size: 12px; --bs-tooltip-opacity: 1; } ::selection{background:var(--color-link); color:var(--color-bg);} ::-moz-selection{background:var(--color-link); color:var(--color-bg);} html { padding:0; margin:0; } html.has-cursor, html.has-cursor * { cursor: none; } body { padding:0; margin:0; font-size:15px; font-weight:400; line-height:1.55; font-family:var(--font-family-body); color:var(--color-text); background-color: var(--color-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; width:100%; position:relative; } .animate { -webkit-transition: all 0.3s var(--transition);  -o-transition: all 0.3s var(--transition);  transition: all 0.3s var(--transition); } a { color:var(--color-link); text-decoration:none; -webkit-transition: all 0.3s var(--transition);  -o-transition: all 0.3s var(--transition);  transition: all 0.3s var(--transition); } a:hover { color:var(--color-link-hover); text-decoration:none; } .fw-bolder { font-weight: 800 !important; } a img { border:none; } p { margin:0 0 25px 0; } hr { opacity: .07; } ol { margin:0 0 10px 0; padding-left:25px; } ol li { padding-bottom:5px; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } .table { --bs-table-border-color: #f3f4f6; } table { } table table { border-collapse: collapse; border-spacing: 0; margin:0px 0 0px; } th, td { padding:13px 20px; } th { background-color: var(--bs-table-border-color); text-align: left; line-height: 1.2; } table tr td p { margin-bottom:5px; } h1, h2, h3, h4, h5, .title, h6 { line-height: 1; clear: both; margin:0; font-family:var(--font-family-body); font-weight:800; color:var(--color-title); position:relative; letter-spacing: 0; -moz-font-smoothing:antialiased; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; } h1, .h1 { font-size: clamp(28px, 4vw, 40px); } h1 small, .h1 small { font-size: clamp(16px, 2vw, 20px); } h2, .h2 { font-size: clamp(30px, 3.333vw, 40px); } h3, .h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; } h4, .h4 { font-size: clamp(16px, 1.5vw, 20px); } h5, .h5 { font-size: 20px; line-height: 1; } sub, sup { font-size: 70% !important; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } small { font-size: 80%; } .bigger { font-size: 120%; } .smaller { font-size: 90%; } .fs-14 { font-size: 14px; } img { border: 0; } [class^="grapp-icon-"], [class*=" grapp-icon-"] { font-family: 'grapp' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .grapp-icon-expand:before { content: "\e900"; } .grapp-icon-home:before { content: "\e901"; } .grapp-icon-infos:before { content: "\e902"; } .grapp-icon-logout:before { content: "\e903"; } .grapp-icon-qrcode:before { content: "\e904"; } .grapp-icon-settings:before { content: "\e905"; } .grapp-icon-user:before { content: "\e906"; } #language-selection { z-index: 99; } .login #language-selection, body.error #language-selection { position: absolute !important; top: clamp(15px, 2vw, 25px); right: clamp(5px, 2vw, 20px); } #language-selection ul { padding: 0; margin: 0; list-style: none; } #language-selection > a { display: inline-block; background-color: var(--white); border-radius: 10px; padding: 9px 10px 8px; } #language-selection > a img { display: block; width: 29px; border-radius: 3px; } #language-selection nav { display: none; position: absolute; top: 45px; right: 0px; width: 185px; max-height: min(50vh, 300px); background-color: var(--white); border-radius: 8px; padding: 14px 13px 1px; overflow: auto; } #language-selection nav li { margin-bottom: 13px; line-height: 1; } #language-selection nav li a { display: flex; align-items: center; font-size: 13px; font-weight: 600; } #language-selection nav li .flag-icon { display: inline-block; margin-right: 10px; } #language-selection nav li .flag-icon img { display: block; width: 30px; border-radius: 3px; } #bartop { padding:4px 0 4px clamp(10px, 4vw, 80px); } #bartop .btn-sm { --bs-btn-padding-y: 8px; --bs-btn-line-height: 1; } .subscription-name { font-size: 10px; padding: 4px 6px; } #label-count { font-size: 14px; min-height: 38px; z-index: 98; } #label-count .label-count { min-height: 15px; } #label-count strong { font-size: 13px; padding-top: 1px; min-height: 15px; } #banner:empty { display: none; } .sidebar { top: 0px; left: 0px; width: 95px; -webkit-transition: width .25s cubic-bezier(.99,0,.5,.99); -o-transition: width .25s cubic-bezier(.99,0,.5,.99); transition: width .25s cubic-bezier(.99,0,.5,.99); z-index: 98; padding-left: 20px; padding-right: 20px; } .sidebar-expand .sidebar { width: 215px; } .sidebar .grapp-tooltip { margin-left: -10px !important; } .main--container { width: calc(100% - 95px); -webkit-transition: all .25s cubic-bezier(.99,0,.5,.99); -o-transition: all .25s cubic-bezier(.99,0,.5,.99); transition: all .25s cubic-bezier(.99,0,.5,.99); margin-left: 95px; padding: 50px clamp(10px, 6vw, 105px) clamp(50px, 4vw, 85px); } @media only screen and (min-width: 1080px){ .sidebar-expand .main--container { width: calc(100% - 215px); margin-left: 215px; } } .main--container #app-container { padding-top: clamp(30px, 4vw, 85px); } .main--container #banner:not(:empty) + #app-container { padding-top: clamp(20px, 3vw, 35px); } .app-icon { width: 60px; height: 60px; } #navbar .app-icon { width: 42px; height: 42px; margin: min(25px, 4vh) 0 min(70px, 8vh) 3px; } #site-navigation { border-color: #3b3b39 !important; } .menu-main, .menu-account { list-style: none; } .menu-account { column-gap: min(50px, 7vw); } .menu-main .menu-item a { color: var(--white); border-radius: 10px; width: 100%; } body:not(.sidebar-expand) .menu-main .menu-item a { width: 45px; transition-delay: 0s; } .menu-main .menu-item .menu-item-icon i, .menu-main .menu-item .menu-item-text { opacity: .85; } .menu-main .menu-item-icon { font-size: 20px; width: 45px; height: 45px; } #menu-subscription { font-size: 8px; padding: 2px 3px; top: 5px; left: 55%; border-radius: 2px; color: var(--white) !important; } .menu-main .menu-item-icon i.grapp-icon-qrcode { font-size: 21px; } .menu-main .menu-item-active a, .menu-main a:hover { background-color: var(--grey); } .menu-main .menu-item-text { font-size: 13px; opacity: 0; transition-delay: 0s; min-width: 115px; opacity: .5; padding-left: .1rem; padding-top: 2px; } .menu-main .menu-item.active .menu-item-icon i, .menu-main .menu-item.active .menu-item-text, .menu-main .menu-item:hover .menu-item-icon i, .menu-main .menu-item:hover .menu-item-text { opacity: 1 !important; } .sidebar-expand .menu-main .menu-item-text { display: inline-block !important; transition-delay: .15s; } @media only screen and (min-width: 767px){ .menu-main .menu-item-text { clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);  } .sidebar-expand .menu-main .menu-item-text { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } .menu-account .menu-item-text { font-size: 17px; } #navbar-toggler { padding: 7px 11px; } #navbar-toggler i { display: inline-block; font-size: 18px; margin-left: 2px; transform: rotate(180deg); } .sidebar-expand #navbar-toggler i { transform: rotate(0deg); } .login .main--container { width: 100%; } .login.register #language-selection { position: fixed !important; } @media only screen and (min-width: 993px){ .login #page-header { padding-left: 10% !important; } .login.register #content { padding-top: min(8vw, 140px) !important; padding-bottom: min(3.5vw, 60px) !important; } } .login-form-wrapper { max-width: 420px; } label.label { font-weight: 700; font-size: 14px; } .login .app-icon { margin: 0 0 20px 0; } .login #page-header > div > div p { max-width: 380px; } .needs-validation .form-control, .registration-form .form-control { --bs-border-width: 2px; --bs-border-color: var(--bg-input); padding: .7rem 1rem; } .login .form-control { font-size: 14px; } .password-input { position: relative; } .password-input .showpasswordbtn { top: 24px; font-size: 15px; } .password-input .showpasswordbtn i { min-width: 18px; } .login .agree_to_terms_text { font-size: 13px; } .login .agree_to_terms_fieldset { font-size: 14px; } #rcp-sandbox-gateway-test-cards { display: none; } .register .registration-form .registration_total_details thead.membership-amount, .register .registration-form .registration_total_details .row-membership { display: none; } .register .registration-form table.registration_total_details { margin-bottom: 2.5rem; } #rcp_discount_code_wrap .rcp_discount_amount { display: none !important; } .menu-account a { padding-bottom: 5px; } .menu-account .menu-item-active a { border-bottom: 3px solid var(--main); } .my-account #content .rcp_message, .my-account #profile-editor-form-wrapper { max-width: 850px; } .my-account .subscription-table-wrapper { max-width: 1170px; } .table-grapp th { background-color: var(--bs-table-border-color) !important; padding: 1rem .7rem; } .table-grapp td { font-size: 14px; } .registration_total_details th { padding: .7rem .7rem; } .register .registration_total_details tbody td, .register .registration_total_details tfoot td { padding-left: 2px; } td.text-lowercase:first-letter { text-transform: uppercase; } .badge.payment-status { --bs-badge-padding-x: 6px; --bs-badge-padding-y: 4px; --bs-badge-font-size: 11px; background-color: rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity,1)); } .badge.payment-status-abandoned { background-color: var(--warning); } .badge.payment-status-failed { background-color: var(--danger); } .badge.payment-status-complete, .badge.payment-status-refunded { background-color: var(--valid); } #profile-editor-form-wrapper #zipcode_billing { min-width: 90px; } .password-reset-wrapper { display: none; } .rcp_subscription_level { max-width: 300px; border-color: var(--color-bg); } .rcp_subscription_level.active { border-color: rgb(var(--blue)); } .rcp_subscription_level .subscription_label_quota { min-height: 73px; } .rcp_subscription_level .subscription_label_quota strong { font-size: 50px; } ul.check-list { padding: 0; list-style: none; } ul.check-list li { margin-bottom: 8px; padding-left: 20px; line-height: 1.4; } ul.check-list li:before { content: ''; display: inline-block; width: .5em; height: 1em; border-style: solid; border-width: 0 .26em .26em 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); color: rgb(var(--blue)); margin-right: 10px; margin-left: -15px; } .upgrade-form-wrapper { max-width: 735px; } .upgrade-form-wrapper .agree_to_terms_fieldset { font-size: 14px; } .upgrade-form-wrapper #submit_wrap { margin-top: 1.5rem; } .upgrade-form-wrapper #submit_wrap .btn-lg { --bs-btn-padding-y: 18px; } .blockUI.blockMsg { font-size: 14px; font-weight: 700; border-radius: 15px !important; opacity: 1 !important; width: auto !important; top: 35% !important; } .blockUI.blockOverlay { background-color: var(--color-bg) !important; opacity: 0.8 !important; } .login.register .blockUI.blockOverlay { background-color: var(--white) !important; } #rcp_gateway_extra_fields { padding-bottom: 3rem; } .register #rcp_gateway_extra_fields { padding-bottom: 2rem; } body:(.register) #rcp_gateway_extra_fields { background-color: var(--white); border-radius: var(--bs-border-radius-xl); padding: 3rem 3rem 1.5rem; margin-bottom: 3rem; } #rcp_card_name_wrap label { display: block; font-size: 14px; font-weight: 700; margin-bottom: .5rem; } #gateway_fields_wrapper:has(> .rcp_gateway_fields[style*="display:none"]) { background-color: red !important; } .rcp_card_name { border: 2px solid var(--bg-input); font-size: 15px; font-weight: 700; line-height: 1.5; padding: 15px 1rem;  background-color: var(--bg-input); border-radius: 5px; margin-bottom: 15px; height: 50px; width: 100%; } .rcp_card_name:focus { outline: none; } #rcp_card_wrap > label { display: none; } .rcp_error { font-size: 13px; font-weight: 700; margin-top: .25rem; margin-bottom: 0; color: var(--bs-form-invalid-color); } .rcp-gateway-saved-payment-method input[type="radio"]:checked + label, .rcp-gateway-saved-payment-method.current label, .rcp_gateway_stripe_fields .rcp-gateway-saved-payment-method input[type="radio"]:checked + label { border-color: rgb(var(--blue)) !important; border-width: 2px !important; } .rcp-gateway-saved-card-brand:before { display: inline-block; content: ""; width: 32px; height: 20px; margin:0 12px 0 5px; background-size: 32px 20px; } .rcp-gateway-saved-card-brand.mastercard:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/mastercard.svg);} .rcp-gateway-saved-card-brand.visa:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/visa.svg);} .rcp-gateway-saved-card-brand.amex:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/amex.svg);} .rcp-gateway-saved-card-brand.diners:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/diners.svg);} .rcp-gateway-saved-card-brand.unionpay:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/unionpay.svg);} .rcp-gateway-saved-card-brand.discover:before {background-image: url(https://app.grapp-label.eu/assets/img/credit-cards/discover.svg);} .rcp-gateway-saved-payment-method > label + .rcp-gateway-saved-payment-method-sep { display: none; } .rcp-gateway-saved-card-delete { font-weight: 700; } .rcp-gateway-add-payment-method-wrap label { cursor: pointer; } .rcp-gateway-new-card-fields { max-width: 470px; } #rcp_card_name_wrap { margin-bottom: 0; } .no-brand { margin-top: 0 !important; } .card-welcome .intro-text { max-width: 415px; } .card-welcome h1 { font-size: clamp(32px, 4vw, 48px); } .card-help, .card-welcome { padding: clamp(40px, 4vw, 45px) clamp(25px, 4vw, 45px); } @media only screen and (min-width: 993px){ .card-help { max-width: 330px; } } .no-brand .card-help h3 { margin-bottom: auto !important; } #brands-list { position: relative; } #brands-list-header { } @media only screen and (min-width: 576px) { #brands-list, #brands-list .row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2rem; } } #brands-list .col { } #brands-list .brand-name { font-size: clamp(25px, 3vw, 30px); font-weight: 800; } #brands-list .card-brand .dropdown-menu { --bs-dropdown-font-size: 14px; } .card-brand .label-count { font-size: clamp(60px, 4.5vw, 76px); } .card-brand .label-count + span { word-spacing: 1000px; } .breadcrumbs a { font-size: 17px; } .breadcrumbs a i { font-size: 12px; margin-top: 3px; } .breadcrumbs a:hover i { } .labels #page-header { max-width: var(--site-max-width); } .brands-tools .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: auto !important; } .brands-tools select, .brands-tools .bootstrap-select > .dropdown-toggle { width: auto; background-color: var(--white); border-radius: 25px; padding-left: clamp(20px, 2vw, 25px); } .brands-tools .bootstrap-select > .dropdown-toggle { min-width: min(70vw, 250px); } .brands-tools form.open { background-color: var(--white); border-radius: 25px; padding-right: 40px; font-size: 14px; } .brands-tools #search-label { background-color: var(--white); border-radius: 25px; padding-right: 50px; padding-top: var(--bs-btn-padding-y, .85rem); padding-bottom: var(--bs-btn-padding-y, .85rem); font-size: 14px; } .brands-tools #searchsubmit, .brands-tools #closesearch { right: 15px; top: 48%; } .brands-tools form:not(.open) #closesearch { opacity: 0; pointer-events: none; } .brands-tools form.open { position: absolute !important; width: 100% !important; } .brands-tools form.open #searchsubmit { right: 45px; } #labels-list-container { max-width: var(--site-max-width); margin-left: 0; } #labels-list .label-card { padding: 0; } .label-card > .card { --bs-card-spacer-y: 20px; min-height: 115px; } .label-card > .card:hover { box-shadow: 0 15px 30px 0 rgba(31,45,61,.1); } .label-card .label-image { min-width: 85px; min-height: 95px; } .label-card .label-image img { width: auto; height: 95px; } .label-card .label-informations { } .label-card .label-name { width: 45%; } .label-card .label-name h4 { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.2; } .label-card .label-vintage { min-width: 15%; white-space: nowrap; } .label-card .label-appellation { font-size: 14px; } .label-card .label-qr-informations { min-width: clamp(95px, 7vw, 120px); } .label-card .label-stats { } .label-card .label-qrcode { } .label-card .label-qrcode .btn { font-size: 28px; } .label-card .label-qrcode .btn:hover { color: var(--color-link-hover) !important; } .label-card .label-status { } .label-card .badge { --bs-badge-padding-x: 1.5em; --bs-badge-padding-y: 1.15em; --bs-badge-border-radius: 3em; --bs-badge-font-size: 12px; min-width: 80px; } .text-bg-success, .text-bg-complete { background-color: var(--valid) !important; } .label-card .label-actions { min-width: 12%; } #downloadLabel .modal-body > div { } #downloadLabel .modal-body > div img { max-width: 100%; height: auto; } .createQRcode { --bs-btn-font-size: 13px; --bs-btn-font-weight: 500; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 22px; } .createQRcode .spinner-border { --bs-spinner-width: .8rem; --bs-spinner-height: .8rem; } #label-download #qrcode-preview { margin-left: -1.5%; min-width: min(45%, 245px); } #label-download #qrcode-preview img { max-width: 100%; height: auto; } #label-download #qrcode-preview > div { max-width: min(80%, 170px); } .edit-label .main--container { padding-right: clamp(10px, 3vw, 60px); } #label-editor h3 { font-size: 22px; } #label-editor input { max-width: 100%; } #label-editor .section { padding-top: 20px; padding-bottom: 30px; } .label-image-preview-container { min-height: 150px; } .label-image-preview-container > img { height: 190px; width: auto; mix-blend-mode: darken; } .label-image-preview-container input[type="file"] { display: block; width: 0 !important; height: 42px; overflow: hidden; } #label-editor .section-ingredients > h3 { margin-bottom: 15px !important; font-size: 15px; } .section-ingredients-raw > h3 { display: none !important; } .section-ingredients .bootstrap-select .dropdown-menu { padding-right: 10px; } .section-ingredients .bootstrap-select .dropdown-menu.show .inner { } .section-ingredients .bootstrap-select .dropdown-menu li { margin-bottom: 5px; } .organic-ingredients { display: none; } .organic-ingredients .field { margin-bottom: 8px !important; display: flex; align-items: center; line-height: 1.3; } .organic-ingredients > .field-label { display: none !important; } .calculator-data { --bs-gutter-x: 1.2rem; align-self: flex-end; } .section-nutrition-declaration { --padding-y: .8rem; } .section-nutrition-declaration .py-3 { padding-top: var(--padding-y) !important; padding-bottom: var(--padding-y) !important; } .section-nutrition-declaration .pt-3 { padding-top: var(--padding-y) !important; } .section-nutrition-declaration .pb-3 { padding-bottom: var(--padding-y) !important; } .section-nutrition-declaration > h3 { display: none; } .section-nutrition-declaration input { padding-right: 2px !important; font-size: 17px; } .section-nutrition-declaration .energy-kcal label { display: none; } .display-values-negligeable-container > .field-label { display: none !important; } .field-type-true_false .form-check-label *:not(strong) { font-size: 14px; color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity,1)); } .section-allergens .btn-outline-dark { --bs-btn-border-color: var(--bs-gray-200); } .recycling-infos > label { display: none !important; } .field-type-repeater .repeater-row { border-top: 1px solid var(--bs-gray-200); } .field-type-repeater .repeater-row:first-of-type, .field-type-repeater .repeater-instructions + .repeater-row { border-top: none; margin-top: 0 !important; } .recycling-options { column-gap: 24px; } .recycling-options > .recycling-category { width: calc(40% - 12px); } .recycling-options > .recycling-material { width: calc(60% - 12px); } .recycling-collection { width: 100%; } .paper_collection, [data-collection="paper_collection"] {--recycling-color: #0470b6;} .glass_collection, [data-collection="glass_collection"] {--recycling-color: #009136;} .plastic_collection, [data-collection="plastic_collection"] {--recycling-color: #f2bd00;} .metal_collection, [data-collection="metal_collection"] {--recycling-color: #1cbbf0;} .organic_collection, [data-collection="organic_collection"] {--recycling-color: #875a2c;} .textile_collection, [data-collection="textile_collection"] {--recycling-color: #875a2c;} .unsorted, [data-collection="unsorted"] {--recycling-color: #999999;} .bull { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background-color: var(--recycling-color); } .recycling-preview .recycling-code-number { top: 45%; } .recycling-preview .recycling-collection { line-height: 1.2; } .recycling-preview .recycling-icon { width: 70px; height: 70px; fill: var(--recycling-color, #000); } .recycling-preview .recycling-code { min-height: 15px; } #smartphone { height: 882px; max-height: 882px; aspect-ratio: 452/882; top: 20px; background: url(https://app.grapp-label.eu/assets/img/smartphone-preview.png) top center no-repeat; background-size: contain; transform: scale(min(var(--preview, 1), .94)); transform-origin: 50% 0; will-change: transform; } #smartphone:before { content: ""; display: block; position: absolute; top: 2.1%; left: 50%; transform: translateX(-50%); height: 30px; width: 100%; max-width: 452px; background: url(https://app.grapp-label.eu/assets/img/smartphone-status-bar.png) top center no-repeat; background-size: contain; z-index: 2; } #smartphone #smartphone-iframe-container { height: 100%; width: 100%; padding: 4.3% 7.9% 8.5%; overflow: hidden; -webkit-filter: drop-shadow(-50px 100px 90px rgba(0,0,0,0.15)); filter: drop-shadow(-50px 100px 90px rgba(0,0,0,0.15)); } #smartphone iframe { height: 100%; width: 100%; -webkit-clip-path: url(#screen-smartphone); clip-path: url(#screen-smartphone); } .svg { position: absolute; width: 0; height: 0; } #cropImagePop { --bs-modal-border-radius: 20px; --bs-modal-width: min(60vw, 800px); } #cropImagePop .modal-dialog-centered { } #cropImagePop .modal-header { padding-bottom: 2px; padding-top: 15px; } #cropImagePop .modal-body { --bs-modal-padding: 1rem 15px; } #cropImagePop .croppie-container .cr-boundary { height: 60vh; } #cropImagePop .modal-footer { padding: 1rem 15px 20px; } .accordion { --bs-accordion-btn-icon-width: 15px; --bs-accordion-btn-padding-x: 0rem; --bs-accordion-btn-padding-y: clamp(22px, 2.1vw, 40px); --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0; --bs-accordion-active-bg: var(--white); --bs-accordion-inner-border-radius: 1rem; --bs-accordion-active-color: var(--color-text); --bs-accordion-btn-icon-transform: none; } .accordion-button { font-size: clamp(14px, 1vw, 18px); } .accordion-button:before, .accordion-button:after { display: block; content: ""; position: absolute; top: 50%; right: var(--bs-accordion-btn-padding-x); background-image: none; background-color: var(--color-text); height: 3px; width: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); } .accordion-button.collapsed:before { transform: rotate(90deg); } .accordion .accordion-body a { color: var(--main); } .page-help + .btn-help { display: none !important; } #contact-form-wrapper .alert i { font-size: clamp(40px, 5vw, 72px); } .error .main--container { width: 100%; margin-left: 0px !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .error .main--container img { max-width: 70%; height: auto; } @media only screen and (min-width: 769px){ #navbar .simplebar-content-wrapper { height: 100% !important; } #navbar .simplebar-content-wrapper .simplebar-content { height: 100%; display: flex; flex-direction: column; } } @media only screen and (max-width: 1200px){ .btn:not(.btn-lg):not(.btn-xl):not(.dropdown-toggle):not(.dropdown-item):not(.btn-fixed) { --bs-btn-padding-x: 13px; } .main--container { padding: 50px clamp(10px, 4vw, 105px) clamp(50px, 4vw, 85px); } #brands-list + .card-help { width: 100% !important; max-width: 100%; } #smartphone { background: none; } #smartphone:before { display: none; } #smartphone #smartphone-iframe-container { padding-top: 0; } #smartphone iframe { height: 100%; width: 100%; border-radius: var(--bs-border-radius-xl); -webkit-clip-path: none; clip-path: none; } } @media only screen and (max-width: 992px){ .edit-label .btn-help { display: none !important; } body.preview-open { overflow: hidden; } #label-preview { position: fixed !important; top: 0px; padding: 0 !important; left: 0; height: calc(100 * var(--vh, 1vh)); z-index: 100 !important; align-items: center; opacity: 0; pointer-events: none; } .preview-open #label-preview { opacity: 1; background-color: rgba(var(--bs-black-rgb),.5); pointer-events: all; } #smartphone { transform-origin: 50% 50%; transform: translateX(100%) scale(min(var(--preview, 1), .94)); transition-delay: .2s; } .preview-open #smartphone { transform: translateX(0%) scale(min(var(--preview, 1), .94)); } #smartphone #smartphone-iframe-container { padding: 0vh 5vw 3vh; } #showpreviewlabel { z-index: 101 !important; min-width: 56px; min-height: 56px; } #showpreviewlabel .fa-xmark { font-size: 22px; padding: 3px; } body:not(.preview-open) #showpreviewlabel .fa-xmark, .preview-open #showpreviewlabel .fa-eye { display: none; } #cropImagePop { --bs-modal-width: min(75vw, 800px); } } @media only screen and (max-width: 768px){ .hide-mobile { display: none; } .btn:not(.btn-lg):not(.btn-xl):not(.dropdown-toggle):not(.dropdown-item):not(.btn-fixed) { --bs-btn-font-size: 13px; --bs-btn-padding-x: 18px; } .btn-sm:not(.btn-lg):not(.btn-xl):not(.dropdown-toggle):not(.dropdown-item):not(.btn-fixed) { --bs-btn-font-size: 11px; --bs-btn-padding-x: 10px; } .btn-fixed { --bs-btn-font-size: 20px; } .bootstrap-select > .dropdown-toggle, .brands-tools #search-label { --bs-btn-font-size: 14px; --bs-btn-padding-x: 11px; --bs-btn-padding-y: 11px; } .brands-tools select, .brands-tools .bootstrap-select > .dropdown-toggle { } .label-card .badge { --bs-badge-font-size: 11px; } .modal .form-control { font-size: 15px; } .modal-footer .btn:only-child { width: 100%; } .dropdown-menu { --bs-dropdown-font-size: 14px; } .dropdown-item { white-space: normal; } .sidebar { position: relative!important; width: 100% !important; min-height: 0 !important; padding-left: 0px; padding-right: 0px; padding-bottom: 0; overflow: visible !important; } .login #language-selection > a, .login #language-selection nav { background-color: var(--bg-input); } .login.register #page-header { position: relative !important; } .login.register #content { min-height: 0 !important; } #navbar .app-icon { width: 30px; height: 30px; margin: 5px 0 10px 0px; } #site-navigation { position: relative; background-color: var(--color-bg); border-bottom: none !important; overflow: hidden; padding-left: clamp(15px, 5vw, 80px) !important; } .menu-main { padding-top: max(10px, 2vw); } .menu-main .simplebar-content { display: flex; } .menu-main .simplebar-horizontal { opacity: 0; display: none; } .menu-main .menu-item { margin: 0 min(2.3vw, 15px); } .menu-main .menu-item:first-of-type { margin-left: 0; } .menu-main .menu-item-logout { margin-left: auto; } .menu-main .menu-item a { width: 100% !important; flex-direction: column; text-align: center; border-radius: 0; } .menu-main .menu-item a * { color: var(--color-title); } .menu-main .menu-item-active a, .menu-main a:hover { background-color: transparent; } #menu-subscription { display: none !important; top: -2px; } .menu-main .menu-item-icon { font-size: 24px; width: 40px; height: 32px; color: var(--main); } .grapp-icon-home { -webkit-text-stroke-width: 2.2px; -webkit-text-stroke-color: var(--color-title); color: var(--color-bg) !important; font-size: 22px; } .grapp-icon-user { -webkit-text-stroke-width: .6px; -webkit-text-stroke-color: var(--color-title); } .menu-main .menu-item-text { font-size: 10.5px; min-width: 0; padding-left: 0; white-space: nowrap; } #bartop { padding-top: 8px; } #label-count { color: var(--white); } #label-count strong { font-size: 12px; padding-top: 2px; } .app #language-selection > a { background-color: transparent; border-radius: 0; padding: 0; } #language-selection > a img { width: 24px; } .app #language-selection nav { top: 30px; } .app .main--container { width: 100% !important; margin-left: 0 !important; padding-top: 15px !important; position: unset !important; } .login.register #page-header { height: auto !important; padding-top: 12vh !important; } #brands-list .col { max-width: 100%; } .label-card .label-informations { width: auto; flex: 1 0 50%; } .label-card .label-informations > div { width: 100%; } .menu-account .menu-item-text { font-size: 15px; } td.cell { display: block; width: 100%; }    td.cell:before { content: attr(data-title); display: block; font-weight: 700; } #account-overview td.cell { padding-left: 0; }  #payment-history th, #payment-history tbody td { white-space: nowrap; } .brands-tools form { width: 43px !important; } .brands-tools form:not(.open) { overflow: hidden; } .brands-tools form:not(.open) #search-label { padding-right: 15px; pointer-events: none; } .brands-tools #searchsubmit, .brands-tools #closesearch { right: 6px; } .brands-tools form:not(.open) .form-control::placeholder {opacity: 0;} .brands-tools form:not(.open) .form-control::-ms-input-placeholder {opacity: 0;} #downloadLabel .modal-body > div img { max-width: 80%; } .section-nutrition-declaration label { font-size: 14px; } } @media only screen and (max-width: 576px){ .btn-sm { --bs-btn-padding-y: 9px; } #bartop .btn-sm { --bs-btn-padding-y: 5px; --bs-btn-line-height: .9; max-width: 100px; } #site-navigation { padding-left: 15px !important; } .menu-main .menu-item-logout { margin-left: min(2.5vw, 15px); } .app .main--container { padding-right: 15px !important; padding-left: 15px !important; } #createLabelBtn, #addLabelBtn { width: 100%; } .label-card .label-image { min-width: 60px; } .label-card .label-name h4 { font-size: 15px; } .label-card .label-vintage { font-size: 14px; } .label-card .label-appellation { font-size: 13px; } .label-card .badge { --bs-badge-padding-y: 12px; min-width: 70px; } .label-card .label-qr-informations { min-width: 0px; } .label-card .label-stats { font-size: 13px; } .label-card .label-stats i { font-size: 12px; } .label-card .label-qrcode .btn { font-size: 34px; } #label-download #qrcode-preview { margin-left: -4%; } #label-download #qrcode-preview > div { position: relative !important; font-size: 13px; } } @media only screen and (max-width: 480px){ .recycling-options { column-gap: 0px; } .recycling-options > div { width: 100% !important; } }