/*----------------- reset ----------------------*/ body, abbr, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, big, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background:none repeat scroll 0 0 transparent; border:0 none; margin:0; padding:0; outline:0 none; } h1, h2, h3, h4, h5, h6 { font-size:100%; } /*---------------- our defaults ----------------*/ html, body { overflow-x: hidden;} body { font-size:1em; font-family:Helvetica,Arial,'Dejavu Sans',sans-serif; line-height:1.4; &.iframe { height:auto; } &.admin { font:normal 12px Helvetica,Arial,'Dejavu Sans',sans-serif; color:#666; } &.body-email { background-color:#fff; margin:0 20px; #main-content-box { display:block; flex:none; } } } h1, h2, h3, h4, h5, h6 { margin:0 0 .8em; font-size:100%; } a img, img a { outline:none; border:0; } a:hover { h1, h2, h3, h4, h5, h6 { color:inherit; } } p { margin:0 0 1em; } ul { margin:.3em 0 .3em .2em; list-style:square; } li { margin-left:1em; } img { vertical-align:middle; } /*---------- input elements--------------*/ input { &[type="search"], &[type="text"], &[type="datetime"], &[type="tel"], &[type="email"], &[type="color"] { -webkit-appearance:none; -moz-appearance:none; } } textarea { font-family: inherit; font-size: inherit; -webkit-appearance:none; -moz-appearance:none; } input:not([type="image"]), select { font-size:1em; box-sizing:border-box; border:1px solid #c1c1c1; border-radius:0; padding:4px; margin:0; &.C { text-align:center; } &.R { text-align:right; } } textarea { font-size:1em; box-sizing:border-box; border:1px solid #c1c1c1; border-radius:0; padding:3px; margin:0; resize:vertical; width:100%; } select { padding:3px 18px 3px 3px; background:#fff; background-image:url(/media/icons/arrow-select.svg); background-repeat:no-repeat; background-size:12px; background-position:97% center; -webkit-appearance:none; -moz-appearance:none; appearance:none; &::-ms-expand { display:none; } } input { &[type="submit"], &[type="button"], &[type="cancel"] { -webkit-appearance:none; border:0 solid; } &[type="file"] { border:0; } &[type="submit"], &[type="button"], &[type="cancel"] { font-size:1.1em; letter-spacing:.04em; color:#fff; background-color:#888; border:0; padding:.5em 1.5em; cursor:pointer; } &[type="radio"], &[type="checkbox"] { margin:5px; } } td input { &[type="radio"], &[type="checkbox"] { margin:2px 5px 2px 5px; } } button.minor, input[type="button"].minor{ background-color:#aaa; } button.small, input[type="button"].small{ font-size:.95em; padding:0.4em 1.1em; } button.xsmall, input[type="button"].xsmall { font-size:.85em; padding:0.3em 0.8em; } button.xxsmall, input[type="button"].xxsmall { font-size:.75em; padding:0.2em 0.5em; } button.right, input[type="button"].right{ float:right; margin-right:0; } button { font-size:1.1em; color:#fff; background-color:#444; border:0; padding:.5em 1.5em; cursor:pointer; -webkit-appearance:none; border:0 solid; &.fw { width:100%; } &.vspace { margin:10px 0; } &.R { margin-left:auto; } &::-moz-focus-inner { border:0; } &.icn-action { padding-left:22px !important; background-position-x:4px} } /*---------- pseudo classes --------------*/ input:not([type="radio"]):not([type="checkbox"])[disabled], textarea[disabled], select[disabled], button[disabled], input:not([type="radio"]):not([type="checkbox"])[readonly], textarea[readonly], select[readonly], button[readonly] { background-color:#eee; color:#888; } input:not([type="radio"]):not([type="checkbox"]):focus, button:focus, textarea:focus, select:focus, input:not([type="radio"]):not([type="checkbox"]):active, button:active, textarea:active, select:active { box-shadow:#7993a3 0 0 7px; } input { &[type="file"]:focus, &[type="checkbox"]:focus, &[type="file"]:active, &[type="checkbox"]:active { box-shadow:none; } } input::placeholder, textarea::placeholder { color:#888; } fieldset { position:relative; background-color:#F7F7F9; padding:10px; padding-top:40px; margin:20px 0; &.no-legend { padding-top:20px; } &.fw { width:100%; box-sizing:border-box; } legend { position:absolute; box-sizing:border-box; font-size:12px; font-weight:700; top:0; left:0; width:100%; padding:7px; border-top:1px solid #d2d2d2; background-color:#EAEAEB; color:#444; } &:first-child, &.first { margin-top:0; } &:last-child, &.last { margin-bottom:0; } &.empty { padding:10px; } &.fw-content { padding:28px 2px 0 0; } &.white { background-color:#fff; border:1px solid #e9e9e9; border-top: none } fieldset { margin:20px 0; } } /*---------- containers--------------*/ .input-container { margin-bottom:15px; &.B label { font-weight:bold; } &.error label { color:#a80002; } .note { color:#888; font-size:.88em; padding:0 10px; line-height:1.2; margin-bottom:-5px; } } .fields-holder { &.B label { font-weight:bold; } &.R { text-align:right; } &.mb0 .input-container { margin-bottom:0px; } &.mb5 .input-container { margin-bottom:5px; } .input-error, label.error { font-weight:normal; color:#a80002; font-size:.9em; margin:3px 0; } input.error, textarea.error { border-color:#a80002; background-color:#fefafb; } } /*---------- required-fields--------------*/ .required-fields { &::before { content:'Required fields'; float:right; font-size:11px; color:#888; padding-right:10px; background:url(/media/icons/req.png) no-repeat right top; } &::after { content:''; display:table; clear:both; } } /*---------- input-addon--------------*/ .input-addon { display:inline-flex; width:100%; } .input-addon.VC { align-items:center; } .input-addon-field { flex:1; } .input-addon-item { border-radius:0; } .input-block { display:inline-block; width:100%; &.text { margin-top:3px; padding-top:2px; } } /*---------- input-uniform--------------*/ .input-uniform { select, input[type="text"], input[type="number"].uniform { width:150px; } &.fw { select, input[type="text"], input[type="number"].uniform { width:100%; } } &.w70 { select, input[type="text"], input[type="number"].uniform { width:70px; } } &.w100 { select, input[type="text"], input[type="number"].uniform { width:100px; } } &.w200 { select, input[type="text"], input[type="number"].uniform { width:200px; } } &.w300 { select, input[type="text"], input[type="number"].uniform { width:300px; } } &.w400 { select, input[type="text"], input[type="number"].uniform { width:400px; } } &.w500 { select, input[type="text"], input[type="number"].uniform { width:500px; } } select.w-auto, input[type="text"].w-auto, input[type="number"].w-auto.uniform { width:auto; } } /*---------- label-ignore--------------*/ .label-ignore { white-space:nowrap; button { margin-right:5px; } label { white-space:nowrap; } } /*---------- label-R--------------*/ .label-R label { text-align:right; padding-right:10px; box-sizing:border-box; } .label-R .label-ignore label { text-align:inherit; } /*---------- label-bold--------------*/ .label-bold label { font-weight:bold; } /*---------- label-block--------------*/ .label-block { input, textarea, select { display:block; width:100%; } input[type="radio"], input[type="checkbox"], input[type="submit"], input[type="button"], input[type="cancel"] { display:inline-block; width:inherit; } label { display:inline-block; margin-bottom:3px; width:100%; font-weight:bold; } label.type-option { width:auto } label.empty { display:block; } } /*---------- label-inline--------------*/ .label-inline { input, textarea, select { width:100%; } input[type="radio"], input[type="checkbox"], input[type="submit"], input[type="button"], input[type="cancel"] { width:inherit; } input[type="radio"], input[type="checkbox"] { margin-top:10px; } .input-container { display:flex; align-items:flex-start;} label { flex:0 0 25%; padding-top:6px; &.nowrap { white-space:nowrap; } } .label-ignore { margin-left:25%; display:block; } &.label-0 { label { flex:none; } } &.label-10 { label { flex:0 0 10%; } .label-ignore { margin-left:10%; } } &.label-20 { label { flex:0 0 20%; } .label-ignore { margin-left:20%; } } &.label-30 { label { flex:0 0 30%; } .label-ignore { margin-left:30%; } } &.label-35 { label { flex:0 0 35%; } .label-ignore { margin-left:35%; } } &.label-50 { label { flex:0 0 50%; } .label-ignore { margin-left:50%; } } .label-none { display:block; label { flex:none; } } .input-addon { flex:1; } } /*---------- label-inside--------------*/ .label-inside { label { display:none; } input[type="checkbox"] + label,input[type="radio"] + label, .row-label label { display:inline-block; } } /*---------- mobile version--------------*/ .is-mobile { input, select, textarea { padding:0.6em; } input[type="radio"], input[type="checkbox"] { padding:inherit; } select { padding-right:21px; } } /*---------------- radio-swatch ----------------*/ input.radio-swatch { position:absolute; opacity:0; + label { display:inline-block; border:1px solid #bbb; width:40px; height:40px; margin-right:5px; position:relative; cursor:pointer; background-color:#fff; background-position: center center; background-repeat: no-repeat; background-size:cover; } &:checked + label:before { content:''; display:block; position:absolute; top:3px; right:3px; width:20px; height:20px; background:url(/media/icons/tick_swatch.png) right top no-repeat; } + label div { display:none; } } /*===================================================== END of FORM ELEMENTS ==================================================================*/ /*---------------- msg ----------------*/ .msg { margin:4px 0 6px; padding:4px; img { float:left; } } .msg-txt { margin-left:24px; color:#f2802c; font-size:12px; font-family:Helvetica, Arial, Geneva; ul { margin:0; padding:0; margin-left:16px; li { color:#f2802c; font-size:11px; font-family:Helvetica, Arial, Geneva; } } } .dialog-msg { margin:20px 0; background:#FFDADA url(/media/icons/warn.svg) no-repeat 10px 10px / 20px; line-height:20px; padding:10px 40px; font-weight:700; font-size:1.1em; &.info { background-image:url(/media/icons/info.svg); background-color:#fff7e9; } } textarea.code, input.code { color:#444; font:12px normal Monaco, monospace, Courier; } .monospace { color:#444; font:12px normal Monaco, monospace, Courier; } /*---------------- detail ----------------*/ .detail { margin-top:.2em; color:#888; font-size:11px; line-height:1.2em; &.R { text-align:right; } &.-R { text-align:right; } &.-wb { word-break:break-all; } } a .detail { color:inherit; } /*---------------- instructions ----------------*/ .instructions { font:normal 11px Helvetica,Arial,'Dejavu Sans',sans-serif-serif; color:#444; &.mb { margin-bottom:5px; } ul li { margin-left:0; } } .instructions_large { font:normal 13px Helvetica,Arial,'Dejavu Sans',sans-serif-serif; color:#2D2B6A; } /*---------------- field-label ----------------*/ .field-label { font-size:12px; padding:0 2px 5px 5px; color:#888; white-space:nowrap; text-align:right; &.L { text-align:left; } &.C { text-align:center; } &.B { text-align:left; font-weight:700; color:#666; } &.T { text-align:left; font-weight:700; padding-top:5px; padding-left:0; margin-top:5px; border-top:1px solid #cdcdcd; color:#666; } &.M { text-align:left; margin-top:6px; } &.VT { vertical-align:top; } &.fw { width:100%; } &.req { background:url(/media/icons/req.png) no-repeat right top; padding-right:8px; vertical-align:baseline; } &.inline { color:#2a5167; text-align:left; font-size:14px; padding:0; margin:15px 0 0; } &.rule { position:relative; height:10px; &:before { content:''; position:absolute; top:50%; left:0; border-bottom:1px solid #cdcdcd; width:100%; } } &.title { color:#2a5167; font-size:14px; text-align:left; font-weight:bold; } } form .field-label { padding-top:2px; &.pt0 { padding-top:0; } } #unisearch-more-content .field-label { font-weight:normal; &.B, &.T { font-weight:700; } } /*---------------- class-based table ----------------*/ .table { display:table; border-collapse: collapse; .tr { display:table-row; .td,.th { display:table-cell; padding:5px 10px; border:1px solid #d2d2d2; white-space:nowrap; text-align:left; } } &.fw { width: 100%; } } /*---------------- table-fields ----------------*/ table.table-fields { border-collapse:collapse; } .table-fields.fw, input.fw { width:100%; } .table-fields hr, hr.table-fields { color:initial; background-color:initial; height:2px; border:none; border-top:1px solid #ccc; border-bottom:1px solid #fff; } .table-fields { &.borderpad td { border:1px solid #bbb; padding:4px; } .qtip-hint { margin:0 2px -3px 0; position:relative; top:2px; } &.pad5 td { padding:5px; } &.bgw td { background-color:#fff; } &.brdr td { border:1px solid #d2d2d2; } &.pad5 td.field-label { padding-top:7px; } &.inline td.field-label { padding-top:0; } tr { vertical-align:top; td { line-height:20px; img.hover-show-next { margin-right:3px; } &.wrap { white-space:normal; } &.R { text-align:right; } &.B { font-weight:bold; } &.editor { padding-right:2px; } } } &.less-space { td { line-height:16px; } } } .req-fields { font-size:11px; color:#888; float:right; padding-right:8px; background:url(/media/icons/req.png) no-repeat right top; } .table-fields .field-action, .field-action { padding-top:15px; } /*---------------- popup ----------------*/ .popup { padding:3px; border:1px solid #444; background-color:#ffd; .table-fields { border:none; background:transparent; border-collapse:collapse; textarea, input, select, .field-label { font-size:11px; } label { font-weight:400; } td { background:transparent; } } } /*---------------- table-list ----------------*/ .table-list { color:#444; border-collapse:collapse; clear:both; &.fw { width:100%; } &.tight { td { padding:4px 6px; } th { padding:8px 6px; } } &.less-space { td { padding:2px 4px; } th { padding:4px; } } &.less-hspace { td,th { padding-left:3px; padding-right:3px; } } &.extra-space { td, th { padding:10px; } } &.fixed { table-layout:fixed; } &.info tr th { background-color:#fff7e9; } &.actions > tbody:last-of-type > tr:last-child { td { background:none; border:none; } td.table-button-add { background:#F29330; a { display:block; white-space:nowrap; letter-spacing:.04em; color:#444; font-size:1.1em; &:hover { color:#fff; } } } } &.context-nav tr { &:last-child td { background:none; } } &.no-border td { border:none; } &.bg-none td { background:none !important;} tr { &.C { th, td { text-align:center; } } &.L { th, td { text-align:left; } } &.R { th, td { text-align:right; } } &.B { th, td { font-weight:700; } } &.space { th, td { padding:5px 10px; } } &:nth-of-type(odd) td { background-color:#F7F7F9; } &:nth-of-type(even) td { background-color:#fff; } &.today:nth-of-type(odd) td { background-color:#FFF2F2; } &.today:nth-of-type(even) td { background-color:#F7E4E4; } &:hover td.draghandle { width:15px; height:15px; background-image:url(/media/icons/updown2.gif); background-position:center center; background-repeat:no-repeat; cursor:move; } &.selectable { td { cursor:pointer; } &:hover td { background-color:#D2D2D2; &.noclick { cursor:inherit; } } &.rcs td { background-color:#FECB80; } } &.info td { background-color:#fff7e9; } &.no-border td { border:none; } &.no-bg td { background:none; } &.no-bgcolor td { background-color:transparent; } td, th { font-size:1em; padding:5px 10px; border:1px solid #E9E9E9; white-space:nowrap; line-height:16px; &.overflow { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; .detail { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } } &.wrap { white-space:normal; } &.C { text-align:center; } &.L { text-align:left; } &.R { text-align:right; } &.B { font-weight:700; } &.fw { width:100%; } &.mw100 { max-width:100px; } &.mw150 { max-width:150px; } &.mw200 { max-width:200px; } &.mw300 { max-width:300px; } &.mw400 { max-width:400px; } &.draghandle { min-width:15px; } &.rs-no-striked { text-decoration:none; } &.icon { padding:0; .icn-action { margin-right:0; padding:0; padding-left:13px; } } .M0 { margin:0; } &.VT { vertical-align:top; } } th { border-color:#D2D2D2; text-align:left; background-color:#EAEAEB; padding:8px; color:#444; font-weight:700; a { color:#6D6D6D; } } } table { &.table-fields { td { padding:5px; line-height:inherit;} } &.plain { tr { &:nth-of-type(odd) td { background-color:transparent; } &:nth-of-type(even) td { background-color:transparent; } td { border:none; padding:0; } } } } a { text-decoration:none; &:hover { text-decoration:underline; } } .icn-action { &.link.L, &.popupwindow.L { float:left; top:-3px; position:relative; } } .rs-striked td { text-decoration:line-through; } .rs-dim td { color:#9daab7; } .rs-blue td { color:#04C; } } fieldset .table-list { tr:nth-of-type(odd) td { background-color:#FBFAFC; } td { border:1px solid #D9D9D9; } } /*---------------- search ----------------*/ #search { input { margin:0; padding:0; font:normal 12px Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; color:#A2A2A2; } label { font:normal 11px Helvetica,Geneva,Arial,SunSans-Regular,sans-serif; color:#A2A2A2; span { vertical-align:middle; } } #p-search { width:80px; vertical-align:middle; line-height:19px; margin-left:4px; padding-right:20px; border:1px solid #A2A2A2; background-image:url(/media/icons/search.gif); background-position:center right; background-repeat:no-repeat; } } #dlg { background-color:#efefef; position:absolute; z-index:1; width:400px; visibility:visible; display:none; .dlg_header { background-color:#727272; } } /*---------------- address-picker ----------------*/ .address-picker { &.address_find { padding-top:8px; } .address_find_fields { padding-bottom:4px; } .address_fields { border-top:1px solid #bbb; padding-top:8px; } } .address-picker-error-code-title { float:left; font-weight:700; } .address-picker-error-code { float:left; } .address-picker-error-description { float:left; clear:both; } .address-picker-error-clear { clear:both; height:0; } /*---------------- notify-container ----------------*/ #notify-container { z-index:80000; display:none; top:115px; color:#fff; width:400px; .ui-notify-message-style { box-shadow:0 0 12px #444; padding:10px; .notify-title { font-size:15px; font-weight:700; min-height:20px; } .notify-text { clear:both; font-size:13px; line-height:1.2em; margin-top:10px} img { float:left; margin-right:10px; margin-bottom:10px; height:30px; } a { text-decoration:underline; color:#fff; } .ui-notify-cross { margin-top:-7px; font-size:24px; text-decoration:none; font-weight:normal; text-shadow:none; padding:0; } } } /*---------------- info-box ----------------*/ td .info-box { padding:4px 10px; margin:0 3px; background-position:7px 5px; white-space:normal; } .info-box { box-sizing:border-box; clear:both; font-size:13px; font-weight:normal; background-color:#f2f2f2; border-radius:10px; padding:10px; margin-bottom:10px; line-height:18px; background-size:20px; background-repeat:no-repeat; background-position:10px 10px; a { color:#E17009; } &.note { background-color:#efefef; color:#666666; padding:15px;} &.note::before { content:'Note: '; font-weight:bold; } &.has-head.note::before { content:''; } &.warn { background-image:url(/media/icons/warn.svg); padding-left:35px; } &.info { background-image:url(/media/icons/info.svg); padding-left:35px; } &.tick { background-image:url(/media/icons/tick.svg); padding-left:35px; } &.cross { background-image:url(/media/icons/cross.svg); padding-left:35px; } &.B { font-weight:700; font-size:14px; } &.R { float:right; } &.border { border:1px solid #bbb; } &.large { font-size:20px; background-size:35px; padding-left:55px; line-height:24px; } &.no-space { margin:0; } &.no-space-above { margin-top:0; } &.plain { background-color:inherit; border:none; background-position:0 5px; padding-left:25px} &:empty { display:none; } } fieldset .info-box { border:1px solid #cdcdcd; } /*---------------- info-pane ----------------*/ .info-pane { border:1px solid #d2d2d2; padding:5px; background-color:#FFFBF2; } /*---------------- info-path ----------------*/ .info-path { padding:0 8px; color:#1100D7; em:before { content:"\2192"; font-size:16px; padding:0 3px; } } /*---------------- dialog ----------------*/ body.modal-open { position:fixed; left:0; right:0; } .modal-dlg { .blackout-bg { position:fixed; top:0; left:0; right:0; height:100%; background:rgba(0, 0, 0, 0.4); z-index:1001; .ajax-message { padding:140px 30px 30px; background:url('/media/icons/loading.svg') no-repeat center 30px; background-size:80px; color:#fff; font-size:24px; } } .knockout-bg { position:absolute; background:#fff; padding:12px; margin-top:-12px; margin-left:-12px; border:3px solid #000; z-index:1002; } .fixed-bg { position:fixed; top:0; left:0; right:0; height:100vh; z-index:1001; .blackout-bg { opacity:0.3; } } .flex-bg { display:table-cell; vertical-align:middle; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; height:100%; padding:0 15px; } .dialog { position:relative; flex:none; padding:20px; border-radius:15px; z-index:15; background-color:#fff; box-sizing:border-box; max-height:100%; width:100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); #dialog_inner_content { font-size: 14px; margin-bottom:20px; overflow-y:auto; overflow-x:hidden; } .dialog-title { color:#2a5167; font-size:1.7em; font-weight:300; margin-bottom:0.8em; a { color:#444; } } .dialog-close { position:absolute; width:20px; height:20px; right:10px; top:10px; z-index:15; background-image:url(/media/icons/close.svg); background-repeat:no-repeat; background-size:contain; cursor:pointer; } .dialog-title.sub { font-size:14px; font-weight:700; } .dialog-buttons { .button-submit, .button-cancel { padding:8px 20px; font-size:1em; min-width:80px; } .button-submit { font-weight:600;} .button-cancel { font-size:1.2em; &.submit { font-size:1em; color: #fff; background:#f29330; border-radius:5px; display:inline-block; text-align: center;} } } &.modal-box { padding:0; #dialog_inner_content { margin:0; } .dialog-buttons, .dialog-title { display:none; } } } } /*---------------- breadcrumb ----------------*/ .breadcrumb { a { color:#888; } img { width:22px; height:10px; background-image:url(/media/icons/arrow.gif); background-repeat:no-repeat; background-position:center bottom; } .selected { font-weight:700; } } del { color:#f2802c; } ins { text-decoration:none; background-color:#FFFFC0; } /*---------------- color-button ----------------*/ .color-button { display:inline-block; width:20px; height:20px; border:1px solid #888; margin:0 3px -7px 0; &.small { margin:0; width:15px; height:15px; } } .color-button-alpha { display:inline-block; width:20px; height:20px; background:url(/media/icons/alpha.png); margin:0 3px -7px 0; } .highlight { background-color:#ffd; } .display_none { display:none; } .ajax_list select { font:normal 12px Helvetica,Arial,'Dejavu Sans',sans-serif; width:200px; } .label_box { font:normal 12px Helvetica,Arial,'Dejavu Sans',sans-serif; margin:4mm; } #debug-msg { border:1px solid #f2802c; margin:6px 0; padding:6px; font-size:11px; color:#333; background-color:#FFD; } /*---------------- breakout ----------------*/ .section-inner { .breakout { position:relative; display:table; width:100vw; left:50%; > * { position:relative; margin-left:auto; margin-right:auto; left:-50% ; } } } /*---------------- header-nav ----------------*/ #header-nav { left:0; right:0; z-index:1000; } /*---------------- footer ----------------*/ #footer-ipages { float:right; margin-left:8px; a { text-decoration:none; } } #footer a { &.ilogo { border:1px solid #25426C; background-color:#ddd; padding:1px 6px; font:normal 9px Helvetica,Arial; color:#25426C; &:hover { background-color:#25426C; color:#fff; } } &.slinks { font-size:4px; &:hover { cursor:default; } } } /*---------------- path ----------------*/ #path, .path { margin:0 0 12px; text-decoration:none; } #path a, .path a { text-decoration:none; } #path img, .path img { width:18px; height:10px; background-image:url(/media/icons/arrow.gif); background-repeat:no-repeat; background-position:center bottom; } /*---------------- pg-gallery-fw ----------------*/ .pg-gallery-fw { line-height:1em; .caption-description h1.pg-title { display:none; } } /*---------------- drag drop ----------------*/ .dragdrop_list { display:block; width:300px; margin:2px; padding:2px; border:1px solid #bbb; background-color:#fafaff; } .drop_hover { border:1px solid red; } .drag_item { } td.showDragHandle { background-image:url(/media/icons/updown2.gif); background-position:center center; background-repeat:no-repeat; cursor:move; } ._Body_0 h1 { color:#444; font:18px Verdana,Helvetica,Arial,'Dejavu Sans',sans-serif; margin:16px 0 8px; font-weight:700; } .flv_player { background-color:#d9d9d9; text-align:center; h2 a { font-weight:700; font-size:14px; color:#000 !important; } h3 a { font-size:18px; color:#000 !important; } p a { font-size:12px; color:#000 !important; } } #crop_button { background:transparent url(/media/icons/icon_image_crop.jpg) no-repeat scroll 0 0; height:35px; width:35px; } .crop_down { background:transparent url(/media/icons/icon_image_crop_down.jpg) no-repeat scroll 0 0 !important; } .hover_li { background-color:#F0F5FF; } .IE_drop_me { width:600px; height:50px; border:2px dotted #CCC; background-color:#DDD; } #IEimg { width:600px; list-style-position:outside; list-style-type:decimal; margin:0; padding:0; li { cursor:pointer; margin:0; padding:0; margin-top:5px; height:50px; margin-left:20px; } } /*---------------- miscellaneous buttons and icons ----------------*/ .ajax-loader { text-align:center; font-size:14px; line-height:30px;} .ajax-loader:before { content:''; display:inline-block; width:30px; height:30px; margin-right:10px; vertical-align: middle; background:url(/media/icons/ajax_loader_trans.gif) no-repeat center center; background-size: contain;} .icn-action { padding:2px 4px 2px 20px; margin-bottom:-3px; text-decoration:none; font-weight:400; background-repeat:no-repeat; background-position:1px center; min-height:14px; display:inline-block; vertical-align:middle; &.R { float:right; } &.M0 { margin:0; } &:hover { color:#E17009; cursor:pointer; } &.nohover:hover { color:inherit; cursor:auto; } &.white-hover:hover { color:#fff; } &.field-label { color:#777; font:bold 11px Helvetica, Arial, sans-serif; } &.popupwindow { background-image:url(/media/admin/linkpop_arrow.svg); background-size:16px 16px; } &.bg { background-image:url(/media/admin/bg_edit.gif); } &.admin { background-image:url(/media/icons/admin.svg); background-size:18px 18px; padding-left:18px; } &.edit { background-image:url(/media/icons/edit.svg); background-size:14px 14px; padding-left:18px; } &.edit-white { background-image:url(/media/icons/edit_white.svg); background-size:14px 14px; padding-left:18px; } &.edit-grey { background-image:url(/media/icons/edit_grey.svg); background-size:14px 14px; padding-left:18px; } &.html { background-image:url(/media/icons/html.svg); background-size:15px 15px; padding-left:18px; } &.new { background-image:url(/media/icons/plus.svg); background-size:12px 12px; padding-left:16px; } &.new-white { background-image:url(/media/icons/new_white.svg); background-size:12px 12px; padding-left:16px; } &.delete { background-image:url(/media/icons/delete.svg); background-size:15px 14px; } &.undo { background-image:url(/media/icons/undo.svg); background-size:15px 14px; } &.info { background-image:url(/media/admin/template/tinyInfo.png); padding-top:4px 4px; } &.sort_down { background-image:url(/media/admin/sort_down.png); } &.attributes { background-image:url(/media/admin/attributes.png); } &.link { background-image:url(/media/admin/link_arrow.svg); background-size:16px 16px; } &.list { background-image:url(/media/icons/list.svg); background-size:14px 14px; } &.makelink { background-image:url(/media/icons/link.svg); background-size:16px 16px; } &.run { background-image:url(/media/icons/run.svg); background-size:16px 16px; } &.client { background-image:url(/media/admin/client.svg); background-size:16px 16px; } &.email { background-image:url(/media/icons/email.svg); background-size:16px 16px; } &.website { background-image:url(/media/admin/website.svg); background-size:17px 17px; } &.crm { background-image:url(/media/admin/crm.svg); background-size:16px 16px; } &.user { background-image:url(/media/admin/user.svg); background-size:14px 14px; } &.arrow_r { background-image:url(/media/admin/arrow_r.gif); } &.enabled { background-image:url(/media/icons/tick.svg); } &.stock_daily { background-image:url(/media/icons/stock_daily.gif); } &.statement { background-image:url(/media/icons/statement.svg); background-size:16px 16px; } &.magnify { background-image:url(/media/icons/magnify.gif); padding-left:23px 23px; } &.power_on { background-image:url(/media/icons/power_on.svg); background-size:17px 17px; } &.power_off { background-image:url(/media/icons/power_off.svg); background-size:17px 17px; } &.print { background-image:url(/media/icons/print.svg); background-size:17px 17px; } &.export { background-image:url(/media/icons/export.png); } &.date { background-image:url(/media/icons/date.svg); background-size:18px 18px; padding-left:20px } &.play { background-image:url(/media/icons/play.svg); background-size:14px 14px; } &.revert { background-image:url(/media/admin/revert.png); } &.labels { background-image:url(/media/icons/labels.svg); background-size:17px 17px; } &.locked { background-image:url(/media/icons/lock.svg); background-size:16px 16px; } &.lock { background-image:url(/media/icons/lock_open.png); } &.toggle_arrow { background-image:url(/media/admin/toggle_arrow.gif); } &.toggle_arrow_down { background-image:url(/media/admin/toggle_arrow_down.gif); } &.tick { background-image:url(/media/icons/tick.svg); background-size:16px 16px; } &.cross { background-image:url(/media/icons/cross.svg); background-size:16px 16px; } &.preview { background-image:url(/media/icons/preview.svg); background-size:19px 19px; padding-left:22px; } &.arrow_ltr { background-image:url(/media/icons/arrow_ltr.gif); padding-left:40px; padding-top:15px; } &.unpaid { background-image:url(/media/icons/unpaid.gif); padding-left:35px; } &.next { background-image:url(/media/icons/arrow_next.gif); padding-left:6px; margin-left:0; margin-right:0; } &.back { background-image:url(/media/icons/arrow_back.gif); padding-left:6px; margin-left:0; margin-right:0; } &.login { background-image:url(/media/icons/login.svg); background-size:14px 14px; padding-left:18px; } &.cancel-white { background-image:url(/media/icons/cancel_white.svg); background-size:12px 12px; padding-left:18px; } &.jumplink { display:block; font-weight:400; padding-left:20px; margin:0; } &.inlinelink { float:right; position:relative; } &.smaller { background-size:8px; padding-left:9px; font-size:10px; } &.alias { background-image:url(/media/admin/alias.png); } &.copy { background-image:url(/media/icons/copy.svg); background-size:18px 18px; } &.plain { padding-left:15px; } } .fileupload-content .icn-action { &.edit { background-image:url(/media/admin/edit_pencil_pale.png); } &.delete { background-image:url(/media/admin/delete_pale.png); } } .disabled .icn-action { &.power_on { background-image:url(/media/icons/power_off.svg); } &.power_off { background-image:url(/media/icons/power_on.svg); } } #full-page-loader { position:fixed; left:0; top:0; bottom:0; right:0; z-index:9999; background:url(/media/icons/macSpinBlack.gif) no-repeat center center; &:after { content:''; background-color:#000; opacity:.5; position:absolute; width:100%; height:100%; } } body #shim { position:absolute; z-index:100; height:0; background-color:#000; opacity:0; transform:translateZ(0); transition:opacity 0.4s, transform 0.4s 0; } /*-------------- qtip ------------*/ .qtip { max-width:1024px;} .qtip-hint { display:none; width:16px; height:15px; background-image:url(/media/admin/template/tinyInfo.png); display:inline-block; } .ui-tooltip-content a { color:#f47920; &:hover { color:#4c5961; } } .qtip-info-css { padding:5px; background:#fff; border:2px solid #444; border-radius:10px; box-shadow:5px 5px 5px #aaa; } /*-------------- tinymce tabs ------------*/ .editor-tab-wrapper { display:inline-block; border:1px solid rgba(0, 0, 0, 0.2); border-bottom:0; .editor-tab { width:80px; background-color:#f0f0f0; display:inline-block; text-align:center; padding:8px; color:#000; font-size:1.1em; cursor:pointer; &:hover { background-color:#e7f4f9; } &.active { background-color:#fddea6; } } } /*---------------- attributes ----------------*/ ul { &.attribute-set > li { margin:0; &::after { border:none; } } &.attribute-subset { margin:0; } &.attribute, &.attr-set { margin:0; > li { margin:0; } } } /*---------------- export-button ----------------*/ .export-button { width:28px; height:25px; padding:0; background:#fff url(/media/icons/export.svg) no-repeat 0 4px / 16px 16px;} #unisearch-more-actions .export-button { background-position:0 0 } /*---------------- paginator ----------------*/ .paginator { clear:both; margin:6px 0; text-align:right; &.no-clear { clear:none; } b { background-color: #F29330; padding: 2px 3px; border-radius: 5px; color: white; } a { padding-left: 2px; } } /*---------------- star rating ----------------*/ .star-rating { font-size:0; white-space:nowrap; display:inline-block; width:75px; height:15px; overflow:hidden; position:relative; background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNMTAsMEwxMy4wOSw2LjU4M0wyMCw3LjYzOUwxNSwxMi43NjRMMTYuMTgsMjBMMTAsMTYuNTgzTDMuODIsMjBMNSwxMi43NjRMMCw3LjYzOUw2LjkxLDYuNTgzTDEwLDBaIiBzdHlsZT0iZmlsbDp3aGl0ZTtmaWxsLW9wYWNpdHk6MC43NTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgIDxwYXRoIGQ9Ik0xMy4wOSw2LjU4M0wyMCw3LjYzOUwxNSwxMi43NjRMMTYuMTgsMjBMMTAsMTYuNTgzTDMuODIsMjBMNSwxMi43NjRMMCw3LjYzOUw2LjkxLDYuNTgzTDEwLDBMMTMuMDksNi41ODNaTTcuMzYzLDYuNzk1TDcuMzMzLDYuODQ5TDcuMjk4LDYuODk5TDcuMjU2LDYuOTQ0TDcuMjA5LDYuOTg0TDcuMTU4LDcuMDE3TDcuMTAzLDcuMDQ0TDcuMDQ1LDcuMDY0TDYuOTg2LDcuMDc3TDEuMDM3LDcuOTg2TDUuMzU4LDEyLjQxNUw1LjM5NiwxMi40NTlMNS40MjksMTIuNTA3TDUuNDU2LDEyLjU1OUw1LjQ3NywxMi42MTRMNS40OTEsMTIuNjdMNS40OTksMTIuNzI4TDUuNDk5LDEyLjc4Nkw1LjQ5MywxMi44NDRMNC40NzksMTkuMDY0TDkuNzU4LDE2LjE0NUw5LjgxNSwxNi4xMThMOS44NzUsMTYuMDk5TDkuOTM3LDE2LjA4N0wxMCwxNi4wODNMMTAuMDYzLDE2LjA4N0wxMC4xMjUsMTYuMDk5TDEwLjE4NSwxNi4xMThMMTAuMjQyLDE2LjE0NUwxNS41MjEsMTkuMDY0TDE0LjUwNywxMi44NDRMMTQuNTAxLDEyLjc4NkwxNC41MDEsMTIuNzI4TDE0LjUwOSwxMi42N0wxNC41MjMsMTIuNjE0TDE0LjU0NCwxMi41NTlMMTQuNTcxLDEyLjUwN0wxNC42MDQsMTIuNDU5TDE0LjY0MiwxMi40MTVMMTguOTYzLDcuOTg2TDEzLjAxNCw3LjA3N0wxMi45NTUsNy4wNjRMMTIuODk3LDcuMDQ0TDEyLjg0Miw3LjAxN0wxMi43OTEsNi45ODRMMTIuNzQ0LDYuOTQ0TDEyLjcwMiw2Ljg5OUwxMi42NjcsNi44NDlMMTIuNjM3LDYuNzk1TDEwLDEuMTc3TDcuMzYzLDYuNzk1WiIgc3R5bGU9ImZpbGw6cmdiKDYyLDYyLDYyKTsiLz4KPC9zdmc+Cg==); background-size:contain; .stars { display:inline-block; height:15px; background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNMTAsMEwxMy4wOSw2LjU4M0wyMCw3LjYzOUwxNSwxMi43NjRMMTYuMTgsMjBMMTAsMTYuNTgzTDMuODIsMjBMNSwxMi43NjRMMCw3LjYzOUw2LjkxLDYuNTgzTDEwLDBaIiBzdHlsZT0iZmlsbDpyZ2IoMjU1LDE4NSw2OSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICA8cGF0aCBkPSJNMTMuMDksNi41ODNMMjAsNy42MzlMMTUsMTIuNzY0TDE2LjE4LDIwTDEwLDE2LjU4M0wzLjgyLDIwTDUsMTIuNzY0TDAsNy42MzlMNi45MSw2LjU4M0wxMCwwTDEzLjA5LDYuNTgzWk03LjA5MSw2LjY2OEw3LjA3MSw2LjcwMkw3LjA0NSw2LjczMUw3LjAxMyw2Ljc1NEw2Ljk3OCw2Ljc3MUw2Ljk0LDYuNzgxTDAuNDE1LDcuNzc4TDUuMTQzLDEyLjYyNEw1LjE2NywxMi42NTNMNS4xODQsMTIuNjg2TDUuMTk2LDEyLjcyMkw1LjIsMTIuNzU5TDUuMTk3LDEyLjc5Nkw0LjA4NCwxOS42MjZMOS45MDMsMTYuNDA4TDkuOTM0LDE2LjM5NEw5Ljk2NiwxNi4zODZMMTAsMTYuMzgzTDEwLjAzNCwxNi4zODZMMTAuMDY2LDE2LjM5NEwxMC4wOTcsMTYuNDA4TDE1LjkxNiwxOS42MjZMMTQuODAzLDEyLjc5NkwxNC44LDEyLjc1OUwxNC44MDQsMTIuNzIyTDE0LjgxNiwxMi42ODZMMTQuODMzLDEyLjY1M0wxNC44NTcsMTIuNjI0TDE5LjU4NSw3Ljc3OEwxMy4wNiw2Ljc4MUwxMy4wMjIsNi43NzFMMTIuOTg3LDYuNzU0TDEyLjk1NSw2LjczMUwxMi45MjksNi43MDJMMTIuOTA5LDYuNjY4TDEwLDAuNDcxTDcuMDkxLDYuNjY4WiIvPgo8L3N2Zz4K); background-size:contain; } input[type='radio'] { opacity:0; width:20%; height:100%; margin:0; padding:0; z-index:2; position:relative; } i { display:inline-block; opacity:0; position:absolute; left:0; height:100%; width:20%; z-index:1; background:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjZmFhNjFhIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=); background-size:contain; } input:hover + i, input:checked + i { opacity:1; } input:hover { cursor:pointer; } i ~ i { width:40%; } i ~ i ~ i { width:60%; } i ~ i ~ i ~ i { width:80%; } i ~ i ~ i ~ i ~ i { width:100%; } } /*---------------- swatches ----------------*/ .swatch { float:left; min-width:14px; height:14px; padding:3px; border:1px solid #bbb; line-height:14px; text-align:center;} .swatch span { /* Set text to white to get full inversion of background */ color: white; mix-blend-mode: difference; /* Since difference only inverts, you apply saturation separately */ filter: saturate(1000%); /* Optional: isolation forces it to blend only with the parent .swatch */ isolation: isolate; } .swatches { display:inline-flex; vertical-align:middle;} /*---------------- tippy ----------------*/ .tippy-box { width:auto !important; max-width:1080px !important; font-size:inherit; color:inherit; background-color:transparent; .folio-content { min-width: 700px !important; max-width: 700px !important; } .admin-head { margin-top:0; } } .tippy-content { border:2px solid #888; border-radius:13px; padding:10px; background-color:white; box-shadow: 5px 5px 5px rgba(0,0,0,0.15);} .tippy-arrow { color:#888; } .tippy { &.info-hint { position:relative; display:inline-block; font-size:0; line-height:0; width:20px; vertical-align:top; &:hover { cursor:pointer; } &::before { content:""; display:block; width:15px; height:15px; background:url(/media/icons/info_clear.svg) no-repeat center center; background-size: contain; position:absolute; right:2px; top:0; } } } .tippy-box[data-theme="pane"] .tippy-content { background-color: #f2f2f2; } /*---------------- toggle-visibility ----------------*/ .toggle-visibility { padding-left: 12px; background:url(/media/admin/toggle_arrow.gif) no-repeat 0px 4px; &:hover { cursor:pointer;} .no-click:hover { cursor:initial;} &.toggle_arrow_down { background-image:url(/media/admin/toggle_arrow_down.gif); } .toggle-show { max-height: 0; transition: max-height 0.7s;} } /*---------------- autocomplete ----------------*/ .autocomplete { .dropdown { position:absolute; background-color:white; max-height:200px; overflow-y:auto; border:1px solid #ccc; box-shadow:0 7px 10px rgba(0,0,0,0.3); tr td { padding:5px; cursor:pointer; } tr:hover td { background-color:#666; color:#fff; } } .input-display { cursor:pointer; box-sizing: border-box; background:#efefef url(/media/icons/cross.svg) no-repeat 4px center / 13px 13px; border:1px solid #bbb; padding:2px 5px 2px 20px; line-height:20px; } &.fw .input-display { width:100%; } } /*---------------- sortable ----------------*/ table.sortable { th { position:relative; white-space:nowrap; &:hover { cursor:pointer; } &::before { content:''; position:relative; display:inline-block; width:0; vertical-align:middle; } &.sort-asc::before { content:url(/media/icons/sort_asc.svg); width:14px; height:14px; } &.sort-desc::before { content:url(/media/icons/sort_dsc.svg); width:14px; height:14px; } &.sort-none { &:hover { cursor:default; } } @media print { &::before { content:none !important; } } } } /*---------------- miscellaneous ----------------*/ .fetch-pane { margin-bottom:30px;} .nowrap { white-space:nowrap; } .wrap { white-space:normal; } #svg-icons, #auto-popup { display:none; } .divider { height:1px; width:100%; background-color:#ccc; margin:20px 0 10px; border-bottom:1px solid #fff; } .code_snippet { font:normal 11px Courier New,Courier,Monaco,monospace; margin:6px 0; padding:6px; border:1px solid #bbb; background-color:#ffe; } .label-related { clear:both; } .address_list select { background-color:#777; color:#fff; } .rss-pane .rss-divider { margin:10px 0; border-top:1px solid #AAA; } .twitface { margin-top:15px; } .forgot-password { text-decoration:underline; display:block; margin-bottom:30px; } .pad10 { padding:10px; } img.r-pop { float:right; margin-top:3px; } span.r-pop { margin-right:12px; } .flex-vertical-container { flex-direction:column; display:flex !important; } .flex-shrink { flex:1 0 1; } .flex-grow { flex:1 1 0; } .align-right { text-align:right; } .align-center { text-align:center; } .t-row { display:table-row; &.VM .t-cell { vertical-align: middle; } } .t-cell { display:table-cell; vertical-align:top; padding:0 2px; &:first-child { padding-left:0; padding-right:5px; } &:last-child { padding-right:0; } &.fw { width:100%; } &.w50 { width:50%; } &.C { text-align:center; } &.R { text-align:right; } &.sp10 { padding-right:10px; } &.sp20 { padding-right:20px; } &.VM { vertical-align: middle; } } .clickthrough-none { a.pg-link { cursor:default; pointer-events:none; &:hover { color:inherit; } } } .x-scroll { overflow-x: scroll; } .y-scroll { overflow-y: scroll; } .sort-indicator { background: url(/media/icons/sort_dsc.svg) no-repeat left center; padding-left:15px; margin-left:-5px; &.dsc { background-image: url(/media/icons/sort_asc.svg); } } .showhidepass { cursor:pointer; min-width:27px; display:inline-block; background:url(/media/icons/preview_grey.svg) no-repeat center center / 20px 20px; border:1px solid #c1c1c1; border-left:none; } .show-text .showhidepass { background-image:url(/media/icons/preview_grey_cancelled.svg); } .js-link { cursor:pointer; } /*---------------- folio-background ----------------*/ .folio-background-wrapper { margin:0 -10px; } .folio-background { background-color:#f4f4f7; padding:15px; .folio-content { background-color:#fff; padding:10px; box-shadow:1px 1px 5px #888; } .folio-break { height:20px; } .pad10 { padding:0; } } .print-per-page { margin-top: 20px; } /* ---------- grid --------- */ .grid { display:grid; grid-gap:10px; &.__c11 { grid-template-columns: 1fr 1fr; } &.__c111 { grid-template-columns: 1fr 1fr 1fr; } &.__c1111 { grid-template-columns: 1fr 1fr 1fr 1fr; } &.__c12 { grid-template-columns: 1fr 2fr; } &.__c13 { grid-template-columns: 1fr 3fr; } &.__c21 { grid-template-columns: 2fr 1fr; } &.__c31 { grid-template-columns: 3fr 1fr; } &.__c41 { grid-template-columns: 4fr 1fr; } &.__c51 { grid-template-columns: 5fr 1fr; } &.__cborders { grid-column-gap:20px; > div { position:relative; &:before { position:absolute; content:''; height:100%; width:1px; background-color:#cdcdcd; left:-10px; } &:first-child:before { display:none; } } } } /* ---------- key-tip --------- */ .key-tip { font-size: 12px; max-width: 220px; div:first-child { font-weight: bold; } > div { display: flex; margin-bottom: 4px; padding-bottom: 2px; align-items: center; gap: 10px; border-bottom: 1px solid #dadcc0} img, .color-button { width:30px; height:30px; margin:0; } } @media screen and (max-width: 641px) { .grid:not(.__nowrap) { grid-template-columns: 1fr !important;} } /*---------------- staging-mode ----------------*/ #staging-box { display:none; } .staging-mode #staging-box { display:block; padding:5px; width:100%; background-color:#ab2f01; text-align:center; color:#fff; font-size:13px; cursor:pointer; } /* ==== DATERANGEPICKER.COM CLONE THEME ==== */ .flatpickr-calendar { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); border-radius: 12px; border: none; font-family: 'Roboto', -apple-system, sans-serif; /* Header (month + nav) */ .flatpickr-month { .flatpickr-current-month { font-weight: bold; } } /* Weekday labels */ .flatpickr-weekdays { span.flatpickr-weekday { color: #94a3b8; font-weight: bold; } } /* Selected / range days */ .flatpickr-day { &.selected, &.startRange, &.endRange { background: #6366f1 !important; border-color: #6366f1 !important; color: white !important; } &.inRange { background: rgba(99, 102, 241, 0.2) !important; box-shadow: -5px 0 0 rgba(99, 102, 241, 0.15) !important; } &.today { font-weight: bold; color: red; } /* Optional: nicer hover for non-selected days */ &:hover { background: rgba(255, 255, 255, 0.2); } } /* Shortcut Buttons Plugin (presets panel on the left) */ .shortcut-buttons-flatpickr-wrapper { display: block; padding: 0; position: absolute; top: 0; left: -123px; width: 120px; background-color: #f9f9f9; border-radius: 12px; border: 1px solid #e6e6e6; text-align: left; max-height: 300px; overflow: auto; & .shortcut-buttons-flatpickr-button { width: 100%; background: none; color: inherit; font-size: 0.9em; &:hover { color: white; background-color: #6366f1; } &:nth-child(7) { margin-top: 10px; } &:nth-child(7):before { content: ""; border-top: 2px solid #e6e6e6; width: 100%; display: block; position: absolute; left: 0; right: 0; margin-top: -12px; } } } } /*---------------- print media ----------------*/ @media print { @page { size:auto; margin:10mm 10mm 10mm 10mm; } body { margin:0px; } .breakhere { page-break-before:always; } .pad10 { padding:0; } .folio-background { background-color:#fff; padding:0; .folio-content { background-color:#fff; padding:0; box-shadow:none; } .folio-break { background-color:#fff; height:0; } } .print-per-page { page-break-before: always; margin:0; &:last-of-type { page-break-before: avoid;} } } /*---------------- mobile ----------------*/ @media (max-width: 767px) { /*---------- responsive-fields--------------*/ .responsive-fields { .input-container { display:block; } input, textarea, select { display:block; width:100%; padding:0.5rem; } input[type="radio"], input[type="checkbox"] { width:inherit; padding:inherit;display:inline-block; } label { display:block; margin-bottom:5px; } label.type-option { display:inline-block } .label-R label { text-align:left; } } /*---------- responsive-table--------------*/ .responsive-table { thead, tbody, th, td, tr { display:block; background-color:#fff; } thead tr { position:absolute; top:-9999px; left:-9999px; } tr { border:1px solid #888; margin:20px 0; &:nth-of-type(odd) td { background-color:#fff; } td { border:none; border-bottom:1px solid #eee; position:relative; padding-left:30%; text-align:left; font-size:1.1em; min-height:1.1em; &.fw { width:auto; } &:before { position:absolute; top:6px; left:6px; padding-right:10px; white-space:nowrap; content:attr(data-label); } } } .edit-action, .delete-action { display:inline-block; } &.table-list { .delete-action { padding:0; } .action-block { border:none; td { padding:4px; a { background-image:none; } &:before { content:""; } } } .r-hide { display:none; } } } table.responsive-table { display:block; background-color:#fff; } #notify-container.ui-notify { top:100px; width:inherit; right:0; } }