.autocomplete { position: absolute; background-color: #fff; box-shadow: 0 1px 3px rgba(17, 17, 19, 0.15); padding: 0; max-height: 200px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border: 0 solid transparent; overflow: auto; } .autocomplete a { font-size: 0.9375em; display: block; padding: 8px; text-decoration: none; color: #111113; border-bottom: 1px solid rgba(17, 17, 19, 0.05); } .autocomplete a:last-child { border-bottom-color: transparent; } .autocomplete a:hover, .autocomplete a.is-active { background-color: rgba(17, 17, 19, 0.04); color: #111113; text-decoration: underline; } .autocomplete-labels .label { margin-right: 4px; margin-bottom: 4px; } .combobox { position: relative; } .combobox input { padding-right: 36px; } .combobox select { position: absolute; top: 0; right: 0; width: 32px; height: 100%; z-index: 2; opacity: 0; cursor: pointer; } .combobox .combobox-caret { position: absolute; z-index: 1; top: 0; right: 0; width: 32px; height: 100%; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position-y: 50%; background-position-x: 50%; cursor: pointer; } .datepicker { position: absolute; background-color: #fff; padding: 20px; border: 0 solid transparent; border-radius: 4px; box-shadow: 0 6px 24px rgba(17, 17, 19, 0.12); } .datepicker.is-embed { border: 1px solid rgba(17, 17, 19, 0.05); max-width: 288px; position: static; box-shadow: none; } .datepicker-head { display: flex; align-items: center; margin-top: -4px; margin-bottom: 8px; } .datepicker-control { width: 24px; height: 24px; color: rgba(17, 17, 19, 0.75); font-size: 18px; font-weight: bold; text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none; } .datepicker-month-box { flex: 1; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #111113; text-align: center; padding: 8px 0 4px 0; } .datepicker-month-box span { margin: 0 1px; } .datepicker-select-year { display: inline-block; cursor: pointer; position: relative; height: 24px; line-height: 24px; } .datepicker-select-year .datepicker-select-year-caret { position: relative; top: -1px; display: inline-block; width: 0; height: 0; margin-left: .3em; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } .datepicker-select-year select { z-index: 2; position: absolute; top: 0; left: 0; opacity: 0; height: 24px; -webkit-appearance: menulist-button; -moz-appearance: menulist-button; -ms-appearance: menulist-button; appearance: menulist-button; } .datepicker-weekdays { white-space: nowrap; } .datepicker-weekdays span { display: inline-block; text-align: center; width: 36px; height: 24px; margin-top: -1px; margin-left: -1px; font-size: 11px; font-weight: bold; color: #111113; } .datepicker-row:after { content: ''; display: table; clear: both; } .datepicker-cell { float: left; text-align: center; width: 36px; height: 32px; line-height: 32px; margin-top: -1px; margin-left: -1px; font-size: 12px; border: 1px solid #fff; } .datepicker-cell a { display: block; color: #111113; line-height: 31px; text-decoration: none; border-radius: 4px; background: #fff; } .datepicker-cell.is-out a { background-color: transparent; color: rgba(17, 17, 19, 0.5); } .datepicker-cell.is-out a:hover { color: #fff; background-color: #158df7; } .datepicker-cell.is-today { border-color: #fff; } .datepicker-cell.is-today a { background: #ee2455; color: #fff; } .datepicker-cell.is-today a:hover { color: #fff; } .datepicker-cell.is-selected { border-color: #fff; } .datepicker-cell.is-selected a { background: #111113; color: #fff; } .datepicker-cell.is-selected a:hover { color: #fff; } .datepicker-cell a:hover { background: #158df7; color: #fff; } .datepicker-cell.is-disabled a, .datepicker-cell.is-disabled a:hover { background-color: #fff; color: rgba(17, 17, 19, 0.4); cursor: default; } .editable[placeholder]:empty:before { content: attr(placeholder); color: rgba(17, 17, 19, 0.4); font-weight: normal; } .editable[placeholder]:empty:focus:before { content: ""; } .input-number { position: relative; display: flex; } .input-number input[type=number]::-webkit-inner-spin-button, .input-number input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .input-number input[type=number] { -moz-appearance: textfield; width: auto; text-align: center; } .input-number input { border-radius: 0; border-left: 1px solid transparent; border-right: 1px solid transparent; } .input-number .is-up, .input-number .is-down { width: 32px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; color: #111113; font-size: 0.875em; text-decoration: none; text-align: center; -webkit-user-select: none; user-select: none; border: 1px solid rgba(17, 17, 19, 0.1); } .input-number .is-up:hover, .input-number .is-down:hover { background-color: rgba(17, 17, 19, 0.04); } .input-number .is-up { border-left-color: transparent; border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-left: -1px; } .input-number .is-up:hover { border-radius: 4px; } .input-number .is-down { border-right-color: transparent; border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-right: -1px; } .input-number .is-down:hover { border-radius: 4px; } .input-number .input-number-input input { border-left: 1px solid rgba(17, 17, 19, 0.1); border-right: 1px solid transparent; } .input-number input:hover, .input-number .input-number-input input:hover { border: 1px solid rgba(17, 17, 19, 0.2); } .input-number input:hover, .input-number .input-number-input input:hover { border: 1px solid rgba(17, 17, 19, 0.2); } .input-number input:focus, .input-number .input-number-input input:focus { border: 1px solid rgba(21, 141, 247, 0.5); } .input-number input.is-error, .input-number .input-number-input input.is-error { border: 1px solid rgba(238, 36, 85, 0.5); } .input-number input.is-error:focus, .input-number .input-number-input input.is-error:focus { border-color: rgba(238, 36, 85, 0.75); } .input-number input.is-success, .input-number .input-number-input input.is-success { border: 1px solid rgba(32, 188, 113, 0.5); } .input-number input.is-success:focus, .input-number .input-number-input input.is-success:focus { border-color: rgba(32, 188, 113, 0.75); } .input-number input.is-warning, .input-number .input-number-input input.is-warning { border: 1px solid rgba(255, 105, 81, 0.5); } .input-number input.is-warning:focus, .input-number .input-number-input input.is-warning:focus { border-color: rgba(255, 105, 81, 0.75); } .input-number .input-number-nav { position: relative; width: 24px; margin-left: -1px; } .input-number .input-number-nav .is-up, .input-number .input-number-nav .is-down { margin: 0; position: absolute; cursor: pointer; width: 24px; height: 50%; line-height: 20px; border: none; } .input-number .input-number-nav .is-up { border-top-left-radius: 0; border-bottom-right-radius: 0; top: 0; right: 0; border-top: 1px solid rgba(17, 17, 19, 0.1); border-right: 1px solid rgba(17, 17, 19, 0.1); } .input-number .input-number-nav .is-down { border-top-right-radius: 0; border-bottom-right-radius: 4px; border-right: 1px solid rgba(17, 17, 19, 0.1); border-bottom: 1px solid rgba(17, 17, 19, 0.1); right: 0; bottom: 0; } .slider { min-height: 14px; } .slider:disabled, .slider.is-disabled { opacity: .6; } .slider:disabled .slider-track, .slider:disabled .slider-handle, .slider:disabled .slider-ticks, .slider.is-disabled .slider-track, .slider.is-disabled .slider-handle, .slider.is-disabled .slider-ticks { cursor: default; } .slider:disabled .slider-fill, .slider.is-disabled .slider-fill { background-color: rgba(17, 17, 19, 0.2); } .slider-track { cursor: pointer; position: relative; width: 100%; height: 4px; box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset; background-color: rgba(17, 17, 19, 0.1); border: 0 solid transparent; border-radius: 4px; } .slider-fill { position: absolute; height: 4px; background-color: rgba(21, 141, 247, 0.7); border-radius: 4px; box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset; } .slider-handle { cursor: pointer; position: absolute; z-index: 2; width: 14px; height: 14px; margin-top: -5px; background-color: #fff; box-shadow: 0 1px 3px #111113; border: 0 solid transparent; border-radius: 50%; } .slider-ticks { cursor: pointer; position: relative; z-index: 1; min-height: 10px; margin-bottom: .7rem; } .slider-ticks span { position: absolute; border-left: 1px solid rgba(17, 17, 19, 0.3); height: 6px; margin-top: 3px; padding-top: 6px; font-size: 10px; text-align: center; line-height: 1.3; color: rgba(17, 17, 19, 0.5); } .upload { display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2px dashed rgba(21, 141, 247, 0.3); border-radius: 4px; height: 120px; cursor: pointer; } .upload .upload-placeholder { color: rgba(21, 141, 247, 0.5); font-style: italic; font-size: 0.875em; } .upload:hover, .upload.is-upload-hover { border-color: rgba(21, 141, 247, 0.35); background-color: rgba(21, 141, 247, 0.05); } .upload.is-upload-error { border-color: rgba(238, 36, 85, 0.35); background-color: rgba(238, 36, 85, 0.05); } .upload-target { background-color: rgba(21, 141, 247, 0.02); border: 1px solid rgba(21, 141, 247, 0.1); padding: 4px 8px; } .upload-target:empty { padding: 0; border: none; } .upload-target .upload-item { display: flex; font-size: 0.875em; border-bottom: 1px solid rgba(17, 17, 19, 0.05); padding-top: 4px; padding-bottom: 4px; } .upload-target .upload-item .close { margin-top: 2px; margin-right: 4px; } .upload-target .upload-item em { font-style: normal; color: rgba(17, 17, 19, 0.5); font-size: 0.75em; margin-left: 4px; } .upload-target .upload-item:last-child { border-bottom-color: transparent; } .upload-box { margin-right: -16px; margin-bottom: -16px; } .upload-box:after { content: ''; display: table; clear: both; } .upload-box .upload-item { float: left; width: 120px; height: 120px; border: 2px dashed rgba(21, 141, 247, 0.3); background-color: #fff; cursor: pointer; border-radius: 6px; position: relative; font-size: 0; line-height: 0; margin-right: 16px; margin-bottom: 16px; } .upload-box .upload-item.is-uploaded { border-style: solid; border-color: rgba(21, 141, 247, 0.35); } .upload-box .upload-item img { position: relative; z-index: 2; object-fit: cover; height: 100%; width: 100%; border-radius: 6px; } .upload-box .upload-item .close { position: absolute; z-index: 3; top: -4px; right: -8px; background-color: #ee2455; color: #fff; opacity: 1; } .upload-box .upload-item .close:hover { background-color: #111113; } .upload-box .upload-item:after { position: absolute; z-index: 1; top: 50%; left: 50%; margin-left: -12px; margin-top: -20px; content: '+'; font-size: 40px; line-height: 1; font-weight: normal; color: rgba(21, 141, 247, 0.5); } .upload-box .upload-item:hover, .upload-box .upload-item.is-upload-hover { border-color: rgba(21, 141, 247, 0.35); background-color: rgba(21, 141, 247, 0.05); } .upload-box .upload-item.is-upload-error { border-color: rgba(238, 36, 85, 0.35); background-color: rgba(238, 36, 85, 0.05); }