/* POPUP */ .popup--dealer { top: 0; left: 0; right: 0; bottom: 0; position: fixed; background: rgba(0, 0, 0, 0.66); display: none; z-index: 999999; .popup--box { top: 50%; left: 50%; width: 890px; height: 560px; margin-top: -280px; margin-left: -325px; position: fixed; background-color: #fff; .box--head { float: left; width: 100%; padding: 16px 24px; background-color: #062e3c; span { color: #ffffff; font-size: 18px; font-weight: bold; letter-spacing: 0.9px; } .icon--button { float: right; color: #ffffff; font-size: 18px; padding: 3px 8px; margin-top: -6px; margin-bottom: -6px; outline: none; background: transparent; border: 1px solid #fff; border-radius: 3px; &:hover { color: #012c3b; background: #ffffff; } } } .box--content { float: left; width: 100%; .content--description { float: left; width: 100%; padding: 20px 24px; span { color: #002e3c; font-size: 16px; font-weight: 500; letter-spacing: 0.4px; line-height: 1.4; display: block; } } .content--select { float: left; width: 100%; padding: 20px 24px; padding-top: 0; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } .select--background { float: left; width: calc(100% - 204px); margin-top: 4px; margin-right: 4px; margin-bottom: 4px; background-color: #fff; border-radius: 3px; i { width: auto; padding: 9px 10px; margin-left: -32px; outline: none; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } } } } .content--box { float: left; width: 100%; .box--categories { float: left; width: 50%; padding: 16px; padding-top: 0; padding-left: 24px; .categories--list { float: left; width: 100%; min-height: 234px; max-height: 234px; padding: 12px 16px; margin-bottom: 16px; overflow: auto; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; &.error { border: 1px solid #d02727; } } .categories--box { float: left; width: 100%; min-height: 90px; max-height: 90px; padding: 12px 16px; overflow: auto; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; .box--content { float: left; width: 100%; .content--info { float: left; width: 100%; ul { li { color: #062e3c; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; line-height: 2; list-style: none; position: relative; border-bottom: 1px solid #dadada; button { float: right; color: #ff4c4c; font-size: 16px; padding: 5px 0; outline: none; right: 0; position: absolute; background: transparent; border: 0; } } } .image { float: left; width: 100%; height: 64px; padding: 16px; text-align: center; img { width: 80px; } } } } &.error { border: 1px solid #d02727; } } } .box--settings { float: left; width: 50%; padding: 16px; padding-top: 0; padding-right: 24px; .settings--head { float: left; width: 100%; padding-bottom: 12px; span { color: #002e3c; font-size: 16px; font-weight: bold; letter-spacing: 0.6px; } } .settings--price { float: left; width: 100%; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 4px double #e0dfdf; .price--select { float: left; width: 100%; margin-bottom: 16px; select { float: left; width: 100%; padding: 12px 16px; outline: none; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; &.error { border: 1px solid #d02727; } } } .price--box { float: left; width: 100%; .box--price { float: left; width: 48%; margin-bottom: 16px; b { color: #002e3c; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; } span { float: left; width: 100%; color: #002e3c; font-size: 16px; font-weight: 500; letter-spacing: 0.6px; padding: 12px 16px; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; } &.box--price-left { margin-right: 4%; } } .box--input { float: left; width: 48%; b { color: #002e3c; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; } input { float: left; width: 100%; padding: 12px 16px; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; &.error { border: 1px solid #d02727; } } span { float: left; width: 100%; color: #002e3c; font-size: 16px; font-weight: 500; letter-spacing: 0.6px; padding: 12px 16px; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; } &.box--input-left { margin-right: 4%; } } &.none { display: none; } } } .settings--shipping { float: left; width: 100%; .shipping--select { float: left; width: 100%; select { float: left; width: 100%; padding: 12px 16px; outline: none; background-color: #f3f3f3; border: 1px solid #eaeaea; border-radius: 2px; &.error { border: 1px solid #d02727; } } } } } } .content--button { float: left; width: 100%; padding: 16px 24px; bottom: 0; position: absolute; background: #f3f3f3; border-top: 1px solid #eaeaea; .button--border { width: 200; color: #002e3c; display: block; background-color: transparent; border: 2px solid #002e3c; &:hover { border-radius: 30px; } } } } .box--button { padding: 16px; top: 0; right: 0; position: absolute; outline: none; background: transparent; border: 0; i { color: #fff; font-size: 20px; } } .box--footer { float: left; width: 100%; padding: 16px; bottom: -70px; position: absolute; background-color: #efefef; border-top: 2px solid #dfdedf; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; button { float: right; width: auto; color: #012e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px; margin-left: 16px; outline: none; background-color: transparent; border: 1px solid #002e3c; border-radius: 2px; z-index: 1; &.secondary { color: #ffffff; background-color: #012d3c; &:hover { background-color: #013f54; } } &:hover { color: #fff; background-color: #012e3c; } } } &.height-auto { height: auto; } } .popup--media { float: left; width: 50%; min-height: 250px; max-height: 700px; top: 15%; left: 50%; margin-left: -25%; position: relative; background-color: #ffffff; border-radius: 3px; .box--head { float: left; width: 100%; padding: 16px; background-color: #012d3c; border-bottom: 1px solid #01171f; border-top-left-radius: 3px; border-top-right-radius: 3px; span { color: #ffffff; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; } .icon--button { float: right; color: #ffffff; font-size: 18px; padding: 3px 8px; margin-top: -6px; margin-bottom: -6px; outline: none; background: transparent; border: 1px solid #fff; border-radius: 3px; &:hover { color: #012c3b; background: #ffffff; } } } .box--content { float: left; width: 100%; position: relative; .content--directory { float: left; width: 300px; top: 0; bottom: 0; position: absolute; border-right: 1px solid #dfdedf; .directory--content { height: 599px; padding: 8px; overflow: auto; .image { float: left; width: 299px; padding: 49px; top: -8px; left: -27px; text-align: center; right: 0; bottom: 0; position: absolute; background-color: #fff; z-index: 999999999999; img { width: 122px; } } } } .content--media { float: right; width: calc(100% - 300px); height: 649px; .media--dragDrop { float: left; width: 100%; padding: 24px; position: relative; border-bottom: 1px solid #dfdedf; .dragDrop--disabled { float: left; width: 100%; height: 148px; padding: 24px; margin: -24px; display: none; position: absolute; background-color: #ffffff94; &.disabled { display: block; } } .fileuploader { float: left; width: 100%; height: 100px; padding: 36px; text-align: center; background-color: #f1f1f1; border: 1px solid #dadada; border-radius: 8px; -webkit-box-shadow: 0 0 5px rgba(164, 197, 108, 0.6); -moz-box-shadow: 0 0 5px rgba(164, 197, 108, 0.6); -o-box-shadow: 0 0 5px rgba(164, 197, 108, 0.6); box-shadow: 0 0 5px rgba(164, 197, 108, 0.6); .fileuploader-input { float: left; width: 100%; .fileuploader-input-inner { float: left; width: 100%; .fileuploader-input-caption { color: #062e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; text-transform: uppercase; } } } .fileuploader-items { .fileuploader-items-list { .fileuploader-item { .columns { .column-thumbnail { display: none; } .column-title { display: none; } .column-actions { display: none; } } .progress-bar2 { .fileuploader-progressbar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; .bar { position: absolute; left: 0; top: 0; width: 0%; height: 100%; border-radius: 0; background: #1a3c7317; border-bottom: 4px solid #1a3c73; box-shadow: none; } } span { color: #062e3c; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; line-height: 2; text-decoration: none; } } } } } } } .media--list { float: left; width: 100%; height: 450px; padding: 10px; overflow: auto; span { float: left; width: 100%; color: #a3c56d; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; line-height: 2; padding: 14px 24px; background-color: #efefef; border-radius: 50px; } .image { float: left; width: 100%; text-align: center; img { width: 120px; } } .thumb--wrap { display: block; float: left; position: relative; margin: 10px 10px 15px; .wrap-container { height: 100px; width: 100px; border: 1px solid #dadada; border-radius: 2px; .container--inner { width: 100px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; img { max-width: 98px; max-height: 98px; } i { max-width: 98px; max-height: 98px; font-size: 36px; } } } &.selected { -moz-box-shadow: 0 0 5px #a3c56c; -webkit-box-shadow: 0 0 5px #a3c56c; -o-box-shadow: 0 0 5px #a3c56c; box-shadow: 0 0 5px #a3c56c; border-color: #a3c56c !important; } } } } } .box--footer { float: left; width: 100%; height: 50px; padding: 7px 16px; bottom: 0; position: absolute; background-color: #efefef; border-top: 2px solid #dfdedf; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; button { float: right; width: auto; color: #012e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px; margin-left: 16px; outline: none; background-color: transparent; border: 1px solid #002e3c; border-radius: 2px; z-index: 1; &.secondary { color: #ffffff; background-color: #012d3c; &:hover { background-color: #013f54; } } &:hover { color: #fff; background-color: #012e3c; } } } } .popup--articleStockspaceEdit { top: 50%; left: 50%; width: 890px; height: 522px; margin-top: -280px; margin-left: -325px; position: fixed; background-color: #efefef; .box--head { float: left; width: 100%; padding: 16px 24px; background-color: #062e3c; span { color: #ffffff; font-size: 18px; font-weight: bold; letter-spacing: 0.9px; } .icon--button { float: right; color: #ffffff !important; font-size: 14px !important; padding-left: 0 !important; outline: none; background-color: transparent; border: 0; } } .box--content { float: left; width: 100%; .content--inner { float: left; width: 100%; .inner--tab { float: left; width: 100%; padding: 24px; background-color: #efefef; .tabs--head { float: left; width: 100%; list-style: none; background-color: #efefef; border-bottom: 4px solid #012d3c; li { color: #012e3c; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; line-height: 1.8; display: inline-block; padding: 6px 12px; cursor: pointer; &.none { color: #848484; } &.disabled { pointer-events: none; opacity: 0.4; } &.tabs--current { color: #fff; background: #012d3c; border-top-left-radius: 3px; border-top-right-radius: 3px; } } } .tabs--content { float: left; width: 100%; display: none; padding: 16px; padding-bottom: 0; .content--box { .box--form { .input { float: left; width: 100%; margin-bottom: 16px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } .select--background { float: left; width: calc(100% - 204px); margin-top: 4px; margin-right: 4px; margin-bottom: 4px; background-color: #fff; border-radius: 3px; select { float: left; width: 100%; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 9px 12px; outline: none; position: relative; background-color: transparent; border: 1px solid #dadada; border-radius: 3px; &:hover ~ i { background-color: #ffffff; } } i { width: auto; padding: 9px 10px; margin-left: -32px; outline: none; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } } } } } .box--stock-limits { span { float: left; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 1.4; padding-bottom: 16px; } .input { float: left; width: 100%; margin-bottom: 16px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } } } } } &.tabs--current { display: block; background-color: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; } } } } .content--button { float: left; width: 100%; padding: 16px 24px; bottom: 0; position: absolute; background: #f3f3f3; border-top: 1px solid #eaeaea; .button--border { width: 200; color: #002e3c; display: block; background-color: transparent; border: 2px solid #002e3c; &:hover { border-radius: 30px; } } } } .box--footer { float: right; padding: 0 24px; right: 0; bottom: 24px; position: absolute; button { &.secondary { background-color: #062e3d; } } } } .popup--articleConfigurator { float: left; width: 30%; min-height: 500px; max-height: 700px; top: 15%; left: 50%; margin-left: -15%; position: relative; background-color: #ffffff; border-radius: 3px; .box--head { float: left; width: 100%; padding: 16px; background-color: #012d3c; border-bottom: 1px solid #01171f; border-top-left-radius: 3px; border-top-right-radius: 3px; span { float: left; color: #ffffff; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; padding: 5px 0; } .icon--button { float: right; color: #ffffff !important; font-size: 14px !important; padding: 5px 16px !important; padding-left: 0 !important; outline: none; background-color: transparent; border: 0; } } .box--content { float: left; width: 100%; position: relative; .content--inner { float: left; width: 100%; padding: 24px; border-right: 1px solid #dfdedf; .inner--box { float: left; width: 100%; padding-bottom: 24px; select { float: left; width: 100%; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 9px 12px; margin-top: 16px; outline: none; position: relative; background-color: transparent; border: 1px solid #dadada; border-radius: 3px; } span { color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 1.4; } } .inner--line { float: left; width: 100%; text-align: center; margin-bottom: 16px; position: relative; span { color: #002e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; padding: 0 24px; position: relative; background-color: #ffffff; z-index: 9; } .line { width: 100%; height: 2px; margin-top: -9px; position: absolute; background-color: #efefef; } } .inner--input { float: left; width: 100%; padding-bottom: 24px; input { float: left; width: 100%; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 9px 12px; margin-top: 16px; outline: none; position: relative; background-color: transparent; border: 1px solid #dadada; border-radius: 3px; } span { color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 1.4; } } .inner--checkbox { float: left; width: 100%; padding-bottom: 24px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; } .checkbox--label { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } } .checkbox--checkmark { float: left; width: calc(100% - 204px); outline: none; position: relative; input { position: absolute; opacity: 0; cursor: pointer; &:checked ~ .checkmark { background-color: #a3c56c9e; border: 1px solid #dadada; &:before { left: 13px; top: 9px; width: 5px; height: 10px; position: absolute; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: block; content: ''; } } } .checkmark { position: absolute; top: 0; left: 0; height: 36px; width: 36px; margin-top: 4px; margin-right: 4px; margin-bottom: 4px; background-color: #ffffff; border: 1px solid #dadada; border-radius: 3px; } } } .inner--reminder { float: left; width: 100%; margin-bottom: 52px; border: 1px solid #dfdedf; .reminder--box { float: left; width: 100%; .box--head { float: left; width: 100%; padding: 6px 12px; background-color: #fff; border-bottom: 1px solid #dfdedf; span { color: #062e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; } } .box--add { float: left; width: 100%; form { float: left; width: 100%; input { float: left; width: calc(100% - 46px); color: #062e3c; font-size: 14px; font-weight: 500; letter-spacing: 0.6px; padding: 12px; border-bottom: 1px solid #dfdedf; border-radius: 2px; border-top-right-radius: 0; border-bottom-right-radius: 0; } button { float: left; width: 46px; height: 41px; padding: 0; background-color: #013f54; border-bottom: 1px solid #dfdedf; border-radius: 0; } } } .box--content { float: left; width: 100%; .content--reminders { float: left; width: 100%; li { float: left; width: 100%; padding: 10px 24px; position: relative; border-bottom: 1px solid #dfdedf; button { &.arrows--button { position: absolute; top: 3px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; right: 10px; outline: none; border: 0; &:before { content: "\f047"; font-family: "Font Awesome 5 Pro"; } } &.delete--button { position: absolute; top: 3px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; right: 10px; outline: none; border: 0; &:before { content: "\f2ed"; font-family: "Font Awesome 5 Pro"; } } &.edit--button { position: absolute; top: 3px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; right: 40px; outline: none; border: 0; &:before { content: "\f040"; font-family: "Font Awesome 5 Pro"; } } &.edit--show { position: absolute; top: 3px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; right: 65px; outline: none; border: 0; &:before { content: "f737"; font-family: "Font Awesome 5 Pro"; } } &.save--button { position: absolute; top: 3px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; right: 40px; outline: none; border: 0; &:before { content: "\f00c"; font-family: "Font Awesome 5 Pro"; } } } &.removed--item { display: none; } } } } } } } } .box--footer { float: left; width: 100%; height: 50px; padding: 7px 16px; bottom: 0; position: absolute; background-color: #efefef; border-top: 2px solid #dfdedf; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; button { float: right !important; width: auto; color: #012e3c !important; font-size: 12px !important; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px !important; margin-left: 16px; outline: none !important; background-color: transparent !important; border: 1px solid #002e3c !important; border-radius: 2px; z-index: 1; &.secondary { color: #ffffff; background-color: #012d3c; &:hover { background-color: #013f54; } } &:hover { color: #fff; background-color: #012e3c; } } } } .popup--articleConfiguratorEdit { float: left; width: 60%; height: auto; top: 10%; left: 36%; bottom: 10%; margin-left: -15%; position: absolute; background-color: #ffffff; border-radius: 3px; .box--head { float: left; width: 100%; padding: 16px; background-color: #012d3c; border-bottom: 1px solid #01171f; border-top-left-radius: 3px; border-top-right-radius: 3px; span { color: #ffffff; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.8; } .icon--button { float: right; color: #ffffff !important; font-size: 14px !important; padding: 5px 16px !important; padding-left: 0 !important; outline: none; background-color: transparent; border: 0; } } .box--content { float: left; top: 59px; left: 0; right: 0; bottom: 50px; position: absolute; .content--inner { float: left; top: 0; left: 0; right: 0; bottom: 0; padding: 16px; overflow: auto; position: absolute; display: block; .inner--box { float: left; width: 100%; padding: 16px; .box--title { text-align: left; padding-left: 24px; span { color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 0 10px; background-color: #ffffff; } } .box--inside { float: left; width: 100%; min-height: 150px; padding: 24px; padding-bottom: 0; margin-top: -10px; border: 1px solid #dadada; .inside--columns { float: left; width: 100%; .cloumns--box { float: left; width: 100%; .box--input { float: left; width: 100%; margin-bottom: 16px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } input { float: left; width: calc(100% - 204px); color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 9px 12px; margin-top: 4px; margin-right: 4px; margin-bottom: 4px; outline: none; background-color: #fff; border: 1px solid #dadada; border-radius: 3px; } } } .box--info { float: left; width: 100%; margin-bottom: 16px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } .info--ul { float: left; width: calc(100% - 204px); padding: 7px; ul { li { float: left; color: #002e3c; font-size: 11px; font-weight: bold; letter-spacing: 0.6px; padding: 7px 12px; margin-right: 16px; background-color: #fff; border: 1px solid #dadada; border-radius: 3px; } } } } } .box--checkbox { float: left; width: 100%; margin-bottom: 16px; label { float: left; width: 100%; position: relative; background-color: #efefef; border-radius: 3px; } .checkbox--label { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; span { float: left; width: 200px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; text-align: left; line-height: 2; padding: 8px 12px; } } .checkbox--checkmark { float: left; width: calc(100% - 204px); outline: none; position: relative; input { position: absolute; opacity: 0; cursor: pointer; &:checked ~ .checkmark { background-color: #a3c56c9e; border: 1px solid #dadada; &:before { left: 13px; top: 9px; width: 5px; height: 10px; position: absolute; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: block; content: ''; } } } .checkmark { position: absolute; top: 0; left: 0; height: 36px; width: 36px; margin-top: 4px; margin-right: 4px; margin-bottom: 4px; background-color: #ffffff; border: 1px solid #dadada; border-radius: 3px; } } } .box--tabs { float: left; width: 100%; margin-bottom: 24px; .tabs--head { float: left; width: 100%; ul { float: left; width: 100%; list-style: none; background-color: #ffffff; li { color: #012e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; display: inline-block; padding: 6px 12px; padding-top: 8px; cursor: pointer; &.tabs--current { color: #fff; background: #012d3c; border-top-left-radius: 3px; border-top-right-radius: 3px; } } } } .tabs--content { float: left; width: 100%; .content--box { float: left; width: 100%; min-height: 150px; padding: 0; display: none; background-color: #ffffff; border: 2px solid #012d3c; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; .box--table { float: left; width: 100%; .table--thead { float: left; width: 100%; background-color: #efefef; border-bottom: 1px solid #dadada; .thead { float: left; width: 100%; ul { li { float: left; width: 120px; color: #012e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; padding: 12px 6px; border-left: 1px solid #fff; border-right: 1px solid #dadada; &.width--full { width: calc(100% - 770px); } &.width50 { width: 50px; } &.text-align--right { text-align: right; } &.pos--right { float: right; } } } } } .table--tbody { float: left; width: 100%; .tbody { float: left; width: 100%; background-color: #ffffff; border-bottom: 1px solid #dadada; ul { li { float: left; width: 120px; color: #012e3c; font-size: 12px; font-weight: 500; letter-spacing: 0.6px; padding: 12px 6px; input { float: left; width: 100%; height: 30px; color: #012e3c; font-size: 12px; font-weight: 500; letter-spacing: 0.6px; padding: 9px; display: none; position: relative; background-color: #efefef; border: 1px solid #ccc; border-radius: 2px; z-index: 9999999999999; } &.input { padding: 4px 12px; } &.width--full { width: calc(100% - 770px); } &.width50 { width: 50px; } &.text-align--right { text-align: right; input { text-align: right; } } &.pos--right { float: right; } } } &:nth-child(2n) { background-color: #efefef; border-bottom: 1px solid #dadada; } } } } &.tabs--current { display: inherit; } } } .input--background { top: 0; left: 0; right: 0; bottom: 0; position: fixed; display: none; z-index: 999999999999; } } .box--stock { float: left; width: 100%; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 3px; .stock--head { float: left; width: 100%; padding: 4px 20px; background-color: #efefef; border-bottom: 1px solid #dadada; span { color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; } } .stock--content { float: left; width: 100%; ul { li { float: left; width: 100%; padding: 4px 20px; border-bottom: 1px solid #ccc; strong { float: left; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; } span { float: right; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; } &.line { padding: 0; } &.border-bottom-none { border-bottom: 0; } } } } } .box--warehouse { float: left; width: 100%; padding-bottom: 24px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 3px; .warehouse--head { float: left; width: 100%; background-color: #efefef; border-bottom: 1px solid #dadada; span { float: left; color: #002e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; padding: 7px 12px; &.head--right { float: right; width: 146px; height: 38px; text-align: right; border-left: 1px solid #ccc; &.last { width: 80px; padding: 4px 8px; i { color: #012d3c; font-size: 13px; font-weight: 400; padding: 2px; } } } } } .warehouse--content { float: left; width: 100%; ul { li { float: left; width: 100%; padding-top: 24px; .warehouse--head { float: left; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; background-color: #ffffff; border-bottom: 2px solid #012d3c; .head--info { float: left; width: auto; .info--button { float: left; width: auto; button { float: left; padding: 12px 8px; font-size: 12px; outline: none; background-color: transparent; border: 0; } } .info--title { float: left; width: auto; span { color: #002e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; line-height: 2.4; padding: 5px 0px; } } .info--link { float: left; width: auto; a { float: left; color: #002e3c; font-size: 12px; font-weight: bold; letter-spacing: 0.6px; line-height: 2; padding: 7px 7px; } } .info--available-online { float: left; width: auto; span { color: #002e3c; font-size: 10px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; padding: 9px 0px; } i { font-size: 12px; font-weight: bold; padding: 13px 6px; padding-right: 0; &.green { color: #a3c56d; } &.red { color: #cf1f27; } } } } span { float: left; color: #002e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; padding: 7px 12px; &.head--right { float: right; width: 146px; height: 38px; text-align: right; border-left: 0; &.last { width: 80px; text-align: left; padding: 4px 8px; } } } } .warehouse--content { float: right; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; display: none; ul { li { float: left; width: 100%; padding: 0; background-color: #ffffff; border-bottom: 1px solid #dadada; span { float: left; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; line-height: 2; padding: 4px 20px; .star--color { color: #f8cd17; } &.head--right { float: right; width: 185px; height: 38px; text-align: right; border-left: 0; &.last { width: 120px; text-align: left; padding: 4px 8px; i { color: #012d3c; font-size: 15px; font-weight: 400; padding: 2px; position: relative; &.icon--edit { } &.icon--star-plus { color: #f8cd17; font-weight: bold; &:after { content: "\f067"; color: #012e3c; font-size: 9px; font-weight: bold; position: absolute; right: 2px; bottom: 1px; } } &.icon--star-minus { color: #f8cd17; font-weight: bold; &:after { content: "\f068"; color: #cf1f27; font-size: 9px; font-weight: bold; position: absolute; right: 2px; bottom: 2px; } } &.icon--stockspace { } &.icon--barcode { font-weight: 100; } } button { outline: none; background-color: #fff; border: 0; } } } } } } &.current { display: block; } } } } } } } &.columns-50 { width: 49%; } &.columns-mr { margin-right: 2%; } } } } } } .box--footer { float: left; width: 100%; height: 50px; padding: 7px 16px; bottom: 0; position: absolute; background-color: #efefef; border-top: 2px solid #dfdedf; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; button { float: right !important; width: auto; color: #012e3c !important; font-size: 12px !important; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px !important; margin-left: 16px; outline: none !important; background-color: transparent !important; border: 1px solid #002e3c !important; border-radius: 2px; z-index: 1; &.secondary { color: #ffffff; background-color: #012d3c; &:hover { background-color: #013f54; } } &:hover { color: #fff; background-color: #012e3c; } } } } .popup--articleMediaConfigurator { float: left; width: 40%; min-height: 350px; max-height: 700px; top: 15%; left: 50%; margin-left: -20%; position: relative; background-color: #ffffff; border-radius: 3px; .box--head { float: left; width: 100%; padding: 10px; background-color: #012d3c; border-bottom: 1px solid #01171f; border-top-left-radius: 3px; border-top-right-radius: 3px; span { float: left; color: #ffffff; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; padding: 5px 0; } .icon--button { float: right; color: #ffffff !important; font-size: 14px !important; padding: 5px 16px !important; padding-left: 0 !important; outline: none; background-color: transparent; border: 0; } } .box--content { float: left; width: 100%; position: relative; .content--mapping { float: left; width: 250px; top: 0; bottom: 0; position: absolute; border-right: 1px solid #dfdedf; .mapping--head { float: left; width: 100%; height: 50px; padding: 16px; background-color: #efefef; border-bottom: 1px solid #dfdedf; span { color: #002e3c; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; line-height: 1.3; } } .mapping--content { float: left; width: 100%; position: relative; .content--inner { float: left; width: 100%; .inner--select { float: left; width: 100%; label { float: left; width: 100%; padding: 12px; position: relative; span { float: left; width: 100%; color: #002e3c; font-size: 11px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; padding-bottom: 4px; } .select--background { float: left; width: 100%; background-color: #fff; border-radius: 3px; select { float: left; width: 100%; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 9px 12px; outline: none; position: relative; background-color: transparent; border: 1px solid #dadada; border-radius: 3px; &.error { border: 1px solid #e74c3c; } &:hover ~ i { background-color: #ffffff; } } i { width: auto; padding: 9px 10px; margin-left: -32px; outline: none; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } } } } } .content--button { float: left; width: 100%; padding: 12px; button { width: 100%; } } } } .content--table { float: right; width: calc(100% - 250px); .table--head { float: left; width: 100%; height: 50px; padding: 16px; background-color: #efefef; border-bottom: 1px solid #dfdedf; span { color: #002e3c; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; line-height: 1.3; } } .table { float: left; width: 100%; height: 550px; margin-bottom: 50px; position: relative; overflow: auto; display: block; .ui-columns-search { float: right; margin-top: -100px; margin-right: 68px; margin-bottom: 54px; input { width: 250px; padding: 8px 16px; background-color: #efefef; border: 1px solid #e8e8e8; border-radius: 2px; } } .ui-columns-table { float: left; width: 100%; .ui-table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #dadada; thead { width: 100%; height: 50px; padding: 16px 0; background-color: #efefef; border-bottom: 2px solid #dadada; border-radius: 2px; tr { width: 100%; background-color: #ffffff; th { color: #012d3c; font-size: 13px; font-weight: bold; letter-spacing: 0.6px; padding: 12px 16px; line-height: 1.5; text-align: left } } } tbody { .ui-table-rows-even { background-color: #ffffff; } .ui-table-rows-odd { background-color: #efefef; } tr { width: 100%; height: 40px; td { color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; padding: 12px; button { float: right; color: #e74c3c; font-size: 16px; outline: none; background-color: transparent; border: 0; } } } } } .ui-table-footer { width: 100%; bottom: 0; padding: 6px 20px; position: absolute; border-top: 1px solid #dfdedf; span { width: 50%; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 1.6; display: inline-block; vertical-align: middle; } .ui-table-size { text-align: left; select { width: auto; padding: 6px; outline: none; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } } .ui-table-results { display: none; } .ui-table-controls { float: right; text-align: right; .ui-table-control-disabled { width: auto; line-height: 2; padding: 0px 14px; opacity: 0.5; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } .ui-table-control-prev { width: auto; line-height: 2; padding: 0px 14px; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } .ui-table-control-next { width: auto; line-height: 2; padding: 0px 14px; background-color: #efefef; border: 1px solid #dadada; border-radius: 2px; } } } } } } } .box--footer { float: left; width: 100%; height: 50px; padding: 7px 16px; bottom: 0; position: absolute; background-color: #efefef; border-top: 2px solid #dfdedf; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; button { float: right !important; width: auto; color: #012e3c !important; font-size: 12px !important; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px !important; margin-left: 16px; outline: none !important; background-color: transparent !important; border: 1px solid #002e3c !important; border-radius: 2px; z-index: 1; &.secondary { color: #ffffff; background-color: #012d3c; &:hover { background-color: #013f54; } } &:hover { color: #fff; background-color: #012e3c; } } } } .popup--checkAboBox { top: 50%; left: 50%; width: 600px; height: 300px; padding: 48px 48px; margin-top: -138px; margin-left: -225px; position: fixed; background-color: #fff; .box--head { float: left; width: 100%; margin-bottom: 16px; span { color: #002e3c; font-size: 20px; font-weight: bold; letter-spacing: 0.9px; } } .box--content { float: left; width: 100%; span { color: #002e3c; font-size: 17px; font-weight: 500; letter-spacing: 0.4px; line-height: 2; display: block; } .button--border { float: left; width: 180px; color: #002e3c; display: block; margin-top: 16px; background-color: transparent; border: 2px solid #002e3c; &:hover { border-radius: 30px; } &.green { color: #fff; background-color: #8ac24a; border: 2px solid #88c341; } &.times { width: 110px; margin-left: 1px; } } } .box--button { padding: 16px; top: 0; right: 0; position: absolute; outline: none; background: transparent; border: 0; i { font-size: 36px; } } } } .popup--mailer { top: 0; left: 0; right: 0; bottom: 0; position: fixed; display: none; background-color: #00000082; border-radius: 3px; z-index: 999999999999; .mailer--box { background-color: #fff; border-radius: 2px; box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.87); opacity: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top: 10%; left: 15%; right: 6%; bottom: 10%; position: fixed; border-radius: 3px; .box--head { float: left; width: 100%; padding: 12px; background-color: #a3c56c; border-top-left-radius: 2px; border-top-right-radius: 2px; .head--title { float: left; width: 50%; span { color: #fff; font-size: 14px; font-weight: bold; } } .head--button { float: right; button { color: #ffffff; font-size: 18px; padding: 2px 0px; margin-top: -4px; margin-bottom: -4px; outline: none; background: #a3c56c; border: 0; } } } .box--send { float: left; width: 100%; height: 116px; background-color: #f8f8fa; border-bottom: 1px solid #f1eded; .send--to { float: left; width: 100%; padding: 12px 20px; padding-bottom: 0; span { float: left; width: 70px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 1.6; padding: 8px 0; } input { float: left; width: calc(100% - 70px); color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 10px 20px; margin: 0; background-color: #ffffff; border: 1px solid #f1eded; border-radius: 50px; &.error { border: 1px solid #c56c6c; } } } .send--subject { float: left; width: 100%; padding: 12px 20px; span { float: left; width: 70px; color: #002e3c; font-size: 14px; font-weight: 400; letter-spacing: 0.6px; line-height: 1.6; padding: 8px 0; } input { float: left; width: calc(100% - 70px); color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 10px 20px; margin: 0; background-color: #ffffff; border: 1px solid #f1eded; border-radius: 50px; &.error { border: 1px solid #c56c6c; } } } } .box--media { float: left; width: 100%; height: 50px; background-color: #f8f8fa; border-top: 1px solid #ffffff; border-bottom: 1px solid #f1eded; .media--data { float: left; padding: 9px 0; margin-left: 16px; a { float: left; width: auto; color: #012e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px; margin-right: 16px; outline: none; background-color: transparent; border: 1px solid #002e3c; border-radius: 2px; z-index: 1; &:hover { color: #fff; background-color: #012e3c; } } &.add--data { float: right; button { float: right; width: auto; color: #012e3c; font-size: 12px; font-weight: 400; letter-spacing: 0.6px; padding: 7px 12px; margin-right: 16px; outline: none; background-color: transparent; border: 1px solid #002e3c; border-radius: 2px; z-index: 1; &:hover { color: #fff; background-color: #012e3c; } &:disabled { opacity: 0.4; } } } } } .box--message { float: left; width: 100%; top: 210px; left: 0; right: 0; bottom: 0px; position: absolute; background-color: #ffffff; textarea { float: left; width: 100%; height: 390px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 24px; resize: none; background-color: #ffffff; } .note-editor { float: left; width: 100%; top: 0; left: 0; right: 0; bottom: 50px; position: absolute; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; resize: none; background-color: #ffffff; .note-toolbar-wrapper { float: left; width: 75%; bottom: -55px; position: absolute; .note-toolbar { padding: 0 5px 8px 5px; .note-btn-group { margin: 0; border-right: 1px solid #e4dede; .note-btn { color: #013f54 !important; padding: 11px 18px 11px 18px; background: #f8f8fa !important; } } } } .note-editing-area { float: left; width: 100%; top: 0; left: 0; right: 0; bottom: 0; position: absolute; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; resize: none; overflow: auto; background-color: #ffffff; .note-editable { height: auto !important; max-height: inherit !important; min-height: inherit !important; padding: 0; } } .note-statusbar { display: none; } } } .box--button { float: left; width: 100%; height: 50px; bottom: 0; position: absolute; background-color: #f8f8fa; border-top: 1px solid #f1eded; .button-right { float: right; height: 50px; margin-top: -1px; border-left: 1px solid #f1eded; .right--select { float: left; padding: 7.9px; margin-right: 16px; border-left: 1px solid #fff; span { float: left; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 9px; } select { float: left; width: 200px; color: #002e3c; font-size: 15px; font-weight: 400; letter-spacing: 0.6px; padding: 8px 14px; outline: none; background-color: #ffffff; border: 1px solid #f1eded; border-radius: 50px; } } button { float: right; width: 200px; height: 50px; color: #fff; font-size: 15px; font-weight: bold; letter-spacing: 0.6px; outline: none; background-color: #a3c56c; border: 0; &:hover { background-color: #77a840; } } } } } } /**/