/* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .multiselect { position: relative; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; cursor: pointer; outline: none; border: var(--ms-border-width, 1px) solid var(--ms-border-color, #D1D5DB); border-radius: var(--ms-radius, 4px); background: var(--ms-bg, #FFFFFF); font-size: var(--ms-font-size, 1rem); min-height: calc(2 * var(--ms-border-width, 1px) + var(--ms-font-size, 1rem) * var(--ms-line-height, 1.375) + 2 * var(--ms-py, 0.5rem)); } .multiselect.is-open { border-radius: var(--ms-radius, 4px) var(--ms-radius, 4px) 0 0; } .multiselect.is-open-top { border-radius: 0 0 var(--ms-radius, 4px) var(--ms-radius, 4px); } .multiselect.is-disabled { cursor: default; background: var(--ms-bg-disabled, #F3F4F6); } .multiselect.is-active { box-shadow: 0 0 0 var(--ms-ring-width, 3px) var(--ms-ring-color, #10B98130); } .multiselect-multiple-label, .multiselect-single-label, .multiselect-placeholder { display: flex; align-items: center; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; background: transparent; line-height: var(--ms-line-height, 1.375); padding-left: var(--ms-px, 0.875rem); } .multiselect-placeholder { color: var(--ms-placeholder-color, #9CA3AF); } .multiselect-search { width: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; outline: none; box-sizing: border-box; border: 0; appearance: none; font-size: inherit; font-family: inherit; background: var(--ms-bg, #FFFFFF); border-radius: var(--ms-radius, 4px); padding-left: var(--ms-px, 0.875rem); } .multiselect-search::-webkit-search-decoration, .multiselect-search::-webkit-search-cancel-button, .multiselect-search::-webkit-search-results-button, .multiselect-search::-webkit-search-results-decoration { -webkit-appearance: none; } .multiselect-tags { flex-grow: 1; flex-shrink: 1; display: flex; flex-wrap: wrap; margin: var(--ms-tag-my, 0.25rem) 0 0; padding-left: var(--ms-py, 0.5rem); align-items: center; } .multiselect-tag { background: var(--ms-tag-bg, #10B981); color: var(--ms-tag-color, #FFFFFF); font-size: var(--ms-tag-font-size, 0.875rem); line-height: var(--ms-tag-line-height, 1.25rem); font-weight: var(--ms-tag-font-weight, 600); padding: var(--ms-tag-py, 0.125rem) 0 var(--ms-tag-py, 0.125rem) var(--ms-tag-px, 0.5rem); border-radius: var(--ms-tag-radius, 4px); margin-right: var(--ms-tag-mx, 0.25rem); margin-bottom: var(--ms-tag-my, 0.25rem); display: flex; align-items: center; white-space: nowrap; } .multiselect-tag.is-disabled { padding-right: var(--ms-tag-px, 0.5rem); background: var(--ms-tag-bg-disabled, #9CA3AF); color: var(--ms-tag-color-disabled, #FFFFFF); } .multiselect-tag-remove { display: flex; align-items: center; justify-content: center; padding: var(--ms-tag-remove-py, 0.25rem) var(--ms-tag-remove-px, 0.25rem); margin: var(--ms-tag-remove-my, 0rem) var(--ms-tag-remove-mx, 0.125rem); border-radius: var(--ms-tag-remove-radius, 4px); } .multiselect-tag-remove:hover { background: #00000010; } .multiselect-tag-remove-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; opacity: 0.8; display: inline-block; width: 0.75rem; height: 0.75rem; } .multiselect-tags-search-wrapper { display: inline-block; position: relative; margin: 0 var(--ms-tag-mx, 4px) var(--ms-tag-my, 4px); flex-grow: 1; flex-shrink: 1; height: 100%; } .multiselect-tags-search-copy { visibility: hidden; white-space: pre-wrap; display: inline-block; height: 1px; width: 100%; } .multiselect-tags-search { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 0; appearance: none; outline: none; padding: 0; font-size: inherit; font-family: inherit; box-sizing: border-box; width: 100%; appearance: none; } .multiselect-tags-search::-webkit-search-decoration, .multiselect-tags-search::-webkit-search-cancel-button, .multiselect-tags-search::-webkit-search-results-button, .multiselect-tags-search::-webkit-search-results-decoration { -webkit-appearance: none; } .multiselect-spinner { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: var(--ms-spinner-color, #10B981); width: 1rem; height: 1rem; z-index: 10; margin: 0 var(--ms-px, 0.875rem) 0 0; animation: multiselect-spin 1s linear infinite; flex-shrink: 0; flex-grow: 0; } .multiselect-clear { padding: 0 var(--ms-px, 0.875rem) 0 0px; position: relative; z-index: 10; opacity: 1; transition: 0.3s; flex-shrink: 0; flex-grow: 0; display: flex; } .multiselect-clear:hover .multiselect-clear-icon { background-color: var(--ms-clear-color-hover, #000000); } .multiselect-clear-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: var(--ms-clear-color, #999999); width: 0.625rem; height: 1.125rem; display: inline-block; transition: 0.3s; } .multiselect-caret { transform: rotate(0deg); transition: 0.3s transform; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: var(--ms-caret-color, #999999); width: 0.625rem; height: 1.125rem; margin: 0 var(--ms-px, 0.875rem) 0 0; position: relative; z-index: 10; flex-shrink: 0; flex-grow: 0; pointer-events: none; } .multiselect-caret.is-open { transform: rotate(180deg); pointer-events: auto; } .multiselect-dropdown { position: absolute; left: calc(var(--ms-border-width, 1px) * -1); right: calc(var(--ms-border-width, 1px) * -1); bottom: 0; transform: translateY(100%); border: var(--ms-dropdown-border-width, 1px) solid var(--ms-dropdown-border-color, #D1D5DB); margin-top: calc(var(--ms-border-width, 1px) * -1); max-height: 15rem; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 100; background: var(--ms-dropdown-bg, #FFFFFF); display: flex; flex-direction: column; border-radius: 0 0 var(--ms-dropdown-radius, 4px) var(--ms-dropdown-radius, 4px); outline: none; } .multiselect-dropdown.is-top { transform: translateY(-100%); top: var(--ms-border-width, 1px); bottom: auto; flex-direction: column-reverse; border-radius: var(--ms-dropdown-radius, 4px) var(--ms-dropdown-radius, 4px) 0 0; } .multiselect-dropdown.is-hidden { display: none; } .multiselect-options { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; max-height: var(--ms-max-height, 10rem); } .multiselect-options.is-top { flex-direction: column-reverse; } .multiselect-group { padding: 0; margin: 0; @apply p-0 m-0; } .multiselect-group-label { padding: var(--ms-group-label-py, 0.3rem) var(--ms-group-label-px, 0.75rem); font-size: 0.875rem; font-weight: 600; background: #E5E7EB; color: #374151; cursor: default; line-height: var(--ms-group-label-line-height, 1.375); display: flex; box-sizing: border-box; text-decoration: none; align-items: center; justify-content: flex-start; text-align: left; } .multiselect-group-label.is-pointable { cursor: pointer; } .multiselect-group-label.is-pointed { background: var(--ms-group-label-bg-pointed, #D1D5DB); color: var(--ms-group-label-color-pointed, #374151); } .multiselect-group-label.is-selected { background: var(--ms-group-label-bg-selected, #059669); color: var(--ms-group-label-color-selected, #FFFFFF); } .multiselect-group-label.is-disabled { background: var(--ms-group-label-bg-disabled, #F3F4F6); color: var(--ms-group-label-color-disabled, #D1D5DB); cursor: not-allowed; } .multiselect-group-label.is-selected.is-pointed { background: var(--ms-group-label-bg-selected-pointed, #0c9e70); color: var(--ms-group-label-color-selected-pointed, #FFFFFF); } .multiselect-group-label.is-selected.is-disabled { background: var(--ms-group-label-bg-selected-disabled, #75cfb1); color: var(--ms-group-label-color-selected-disabled, #D1FAE5); } .multiselect-group-options { padding: 0; margin: 0; } .multiselect-option { padding: var(--ms-option-py, 0.5rem) var(--ms-option-px, 0.75rem); font-size: var(--ms-option-font-size, 1rem); line-height: var(--ms-option-line-height, 1.375); cursor: pointer; display: flex; box-sizing: border-box; text-decoration: none; align-items: center; justify-content: flex-start; text-align: left; } .multiselect-option.is-pointed { background: var(--ms-option-bg-pointed, #F3F4F6); color: var(--ms-option-color-pointed, #1F2937); } .multiselect-option.is-selected { background: var(--ms-option-bg-selected, #10B981); color: var(--ms-option-color-selected, #FFFFFF); } .multiselect-option.is-disabled { background: var(--ms-option-bg-disabled, #FFFFFF); color: var(--ms-option-color-disabled, #D1D5DB); cursor: not-allowed; } .multiselect-option.is-selected.is-pointed { background: var(--ms-option-bg-selected-pointed, #26c08e); color: var(--ms-option-color-selected-pointed, #FFFFFF); } .multiselect-option.is-selected.is-disabled { background: var(--ms-option-bg-selected-disabled, #87dcc0); color: var(--ms-option-color-selected-disabled, #D1FAE5); } .multiselect-no-options, .multiselect-no-results { padding: var(--ms-option-py, 0.5rem) var(--ms-option-px, 0.75rem); color: var(--ms-empty-color, #4B5563); } .multiselect-fake-input { background: transparent; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 1px; border: 0; padding: 0; font-size: 0; outline: none; } .multiselect-fake-input:active, .multiselect-fake-input:focus { outline: none; } .multiselect-spacer { display: none; } @keyframes multiselect-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }.slider-target, .slider-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; } .slider-target { position: relative; } .slider-base, .slider-connects { width: 100%; height: 100%; position: relative; z-index: 1; } .slider-connects { overflow: hidden; z-index: 0; } .slider-connect, .slider-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } .slider-connect { height: 100%; width: 100%; } .slider-origin { height: 10%; width: 10%; } .slider-txt-dir-rtl.slider-horizontal .slider-origin { left: 0; right: auto; } .slider-vertical .slider-origin { width: 0; } .slider-horizontal .slider-origin { height: 0; } .slider-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; } .slider-touch-area { height: 100%; width: 100%; } .slider-state-tap .slider-connect, .slider-state-tap .slider-origin { -webkit-transition: transform 0.3s; transition: transform 0.3s; } .slider-state-drag * { cursor: inherit !important; } .slider-tooltip-focus .slider-tooltip, .slider-tooltip-drag .slider-tooltip { display: none !important; } .slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden), .slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden), .slider-tooltip-drag .slider-active .slider-tooltip { display: block !important; } .slider-horizontal { height: var(--slider-height, 6px); } .slider-horizontal .slider-handle { width: var(--slider-handle-width, 16px); height: var(--slider-handle-height, 16px); top: calc(((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + 1px) * -1); right: calc(var(--slider-handle-width, 16px) / 2 * -1); } .slider-vertical { width: var(--slider-height, 6px); height: var(--slider-vertical-height, 300px); } .slider-vertical .slider-handle { width: var(--slider-handle-height, 16px); height: var(--slider-handle-width, 16px); top: calc(var(--slider-handle-width, 16px) / 2 * -1); right: calc(((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + 1px) * -1); } .slider-txt-dir-rtl.slider-horizontal .slider-handle { left: calc(var(--slider-handle-width, 16px) / 2 * -1); right: auto; } .slider-base { background-color: var(--slider-bg, #D1D5DB); border-radius: var(--slider-radius, 9999px); } .slider-connects { border-radius: var(--slider-radius, 9999px); } .slider-connect { background: var(--slider-connect-bg, #10B981); cursor: pointer; } .slider-draggable { cursor: ew-resize; } .slider-vertical .slider-draggable { cursor: ns-resize; } .slider-handle { width: var(--slider-handle-width, 16px); height: var(--slider-handle-height, 16px); border-radius: var(--slider-handle-radius, 9999px); background: var(--slider-handle-bg, #fff); border: var(--slider-handle-border, 0); box-shadow: var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32)); cursor: grab; } .slider-handle:focus { outline: none; box-shadow: 0 0 0 var(--slider-handle-ring-width, 3px) var(--slider-handle-ring-color, #10B98130), var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32)); } .slider-active { box-shadow: var(--slider-handle-shadow-active, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42)); cursor: grabbing; } [disabled] .slider-connect { background: var(--slider-connect-bg-disabled, #9CA3AF); } [disabled].slider-target, [disabled].slider-handle, [disabled] .slider-handle { cursor: not-allowed; } [disabled] .slider-tooltip { background: var(--slider-tooltip-bg-disabled, #9CA3AF); border-color: var(--slider-tooltip-bg-disabled, #9CA3AF); } .slider-tooltip { position: absolute; display: block; font-size: var(--slider-tooltip-font-size, 0.875rem); line-height: var(--slider-tooltip-line-height, 1.25rem); font-weight: var(--slider-tooltip-font-weight, 600); white-space: nowrap; padding: var(--slider-tooltip-py, 2px) var(--slider-tooltip-px, 6px); min-width: var(--slider-tooltip-min-width, 20px); text-align: center; color: var(--slider-tooltip-color, #fff); border-radius: var(--slider-tooltip-radius, 5px); border: 1px solid var(--slider-tooltip-bg, #10B981); background: var(--slider-tooltip-bg, #10B981); } .slider-horizontal .slider-tooltip-top { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); } .slider-horizontal .slider-tooltip-top:before { content: ""; position: absolute; bottom: calc(var(--slider-tooltip-arrow-size, 5px) * -2); left: 50%; width: 0; height: 0; border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-top-color: inherit; transform: translate(-50%); } .slider-horizontal .slider-tooltip-bottom { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; top: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); } .slider-horizontal .slider-tooltip-bottom:before { content: ""; position: absolute; top: calc(var(--slider-tooltip-arrow-size, 5px) * -2); left: 50%; width: 0; height: 0; border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-bottom-color: inherit; transform: translate(-50%); } .slider-vertical .slider-tooltip-left { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); } .slider-vertical .slider-tooltip-left:before { content: ""; position: absolute; right: calc(var(--slider-tooltip-arrow-size, 5px) * -2); top: 50%; width: 0; height: 0; border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-left-color: inherit; transform: translateY(-50%); } .slider-vertical .slider-tooltip-right { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; left: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px)); } .slider-vertical .slider-tooltip-right:before { content: ""; position: absolute; left: calc(var(--slider-tooltip-arrow-size, 5px) * -2); top: 50%; width: 0; height: 0; border: var(--slider-tooltip-arrow-size, 5px) solid transparent; border-right-color: inherit; transform: translateY(-50%); } .slider-horizontal .slider-origin > .slider-tooltip { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); left: auto; } .slider-horizontal .slider-origin > .slider-tooltip-top { bottom: calc(var(--slider-tooltip-arrow-size, 5px) + ((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2) + var(--slider-tooltip-distance, 3px) + 1px); } .slider-horizontal .slider-origin > .slider-tooltip-bottom { top: calc(var(--slider-tooltip-arrow-size, 5px) + ((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2) + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px); } .slider-vertical .slider-origin > .slider-tooltip { transform: translate(0, calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px)) * -1 + 1px)); top: auto; } .slider-vertical .slider-origin > .slider-tooltip-left { right: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + ((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2) + var(--slider-tooltip-distance, 3px) - 1px); } .slider-vertical .slider-origin > .slider-tooltip-right { left: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + ((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2) + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px); }[data-simplebar] { position: relative; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; } .simplebar-wrapper { overflow: hidden; width: inherit; height: inherit; max-width: inherit; max-height: inherit; } .simplebar-mask { direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; left: 0; top: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; z-index: 0; } .simplebar-offset { direction: inherit !important; box-sizing: inherit !important; resize: none !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; } .simplebar-content-wrapper { direction: inherit; box-sizing: border-box !important; position: relative; display: block; height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */ width: auto; max-width: 100%; /* Not required for horizontal scroll to trigger */ max-height: 100%; /* Needed for vertical scroll to trigger */ scrollbar-width: none; -ms-overflow-style: none; } .simplebar-content-wrapper::-webkit-scrollbar, .simplebar-hide-scrollbar::-webkit-scrollbar { width: 0; height: 0; } .simplebar-content:before, .simplebar-content:after { content: ' '; display: table; } .simplebar-placeholder { max-height: 100%; max-width: 100%; width: 100%; pointer-events: none; } .simplebar-height-auto-observer-wrapper { box-sizing: inherit !important; height: 100%; width: 100%; max-width: 1px; position: relative; float: left; max-height: 1px; overflow: hidden; z-index: -1; padding: 0; margin: 0; pointer-events: none; flex-grow: inherit; flex-shrink: 0; flex-basis: 0; } .simplebar-height-auto-observer { box-sizing: inherit; display: block; opacity: 0; position: absolute; top: 0; left: 0; height: 1000%; width: 1000%; min-height: 1px; min-width: 1px; overflow: hidden; pointer-events: none; z-index: -1; } .simplebar-track { z-index: 1; position: absolute; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } [data-simplebar].simplebar-dragging .simplebar-content { pointer-events: none; user-select: none; -webkit-user-select: none; } [data-simplebar].simplebar-dragging .simplebar-track { pointer-events: all; } .simplebar-scrollbar { position: absolute; left: 0; right: 0; min-height: 10px; } .simplebar-scrollbar:before { position: absolute; content: ''; background: black; border-radius: 7px; left: 2px; right: 2px; opacity: 0; transition: opacity 0.2s 0.5s linear; } .simplebar-scrolling .simplebar-scrollbar:before, .simplebar-hover .simplebar-scrollbar:before, .simplebar-mouse-entered .simplebar-scrollbar:before { opacity: 0.5; transition-delay: 0s; transition-duration: 0s; } .simplebar-scrollbar.simplebar-visible:before { /* When hovered, remove all transitions from drag handle */ opacity: 0.5; transition-delay: 0s; transition-duration: 0s; } .simplebar-track.simplebar-vertical { top: 0; width: 11px; } .simplebar-scrollbar:before { top: 2px; bottom: 2px; left: 2px; right: 2px; } .simplebar-track.simplebar-horizontal { left: 0; height: 11px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar { right: auto; left: 0; top: 0; bottom: 0; min-height: 0; min-width: 10px; width: auto; } /* Rtl support */ [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical { right: auto; left: 0; } .simplebar-dummy-scrollbar-size { direction: rtl; position: fixed; opacity: 0; visibility: hidden; height: 500px; width: 500px; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: scrollbar !important; } .simplebar-dummy-scrollbar-size > div { width: 200%; height: 200%; margin: 10px 0; } .simplebar-hide-scrollbar { position: fixed; left: 0; visibility: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .tns-outer { padding: 0 !important; } .tns-outer [hidden] { display: none !important; } .tns-outer [aria-controls], .tns-outer [data-action] { cursor: pointer; } .tns-slider { -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; } .tns-slider > .tns-item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tns-horizontal.tns-subpixel { white-space: nowrap; } .tns-horizontal.tns-subpixel > .tns-item { display: inline-block; vertical-align: top; white-space: normal; } .tns-horizontal.tns-no-subpixel:after { content: ""; display: table; clear: both; } .tns-horizontal.tns-no-subpixel > .tns-item { float: left; } .tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item { margin-right: -100%; } .tns-no-calc { position: relative; left: 0; } .tns-gallery { position: relative; left: 0; min-height: 1px; } .tns-gallery > .tns-item { position: absolute; left: -100%; -webkit-transition: transform 0s, opacity 0s; -moz-transition: transform 0s, opacity 0s; transition: transform 0s, opacity 0s; } .tns-gallery > .tns-slide-active { position: relative; left: auto !important; } .tns-gallery > .tns-moving { -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; } .tns-autowidth { display: inline-block; } .tns-lazy-img { -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; transition: opacity 0.6s; opacity: 0.6; } .tns-lazy-img.tns-complete { opacity: 1; } .tns-ah { -webkit-transition: height 0s; -moz-transition: height 0s; transition: height 0s; } .tns-ovh { overflow: hidden; } .tns-visually-hidden { position: absolute; left: -10000em; } .tns-transparent { opacity: 0; visibility: hidden; } .tns-fadeIn { opacity: 1; filter: alpha(opacity=100); z-index: 0; } .tns-normal, .tns-fadeOut { opacity: 0; filter: alpha(opacity=0); z-index: -1; } .tns-vpfix { white-space: nowrap; } .tns-vpfix > div, .tns-vpfix > li { display: inline-block; } .tns-t-subp2 { margin: 0 auto; width: 310px; position: relative; height: 10px; overflow: hidden; } .tns-t-ct { width: 2333.3333333333%; width: -webkit-calc(100% * 70 / 3); width: -moz-calc(100% * 70 / 3); width: calc(100% * 70 / 3); position: absolute; right: 0; } .tns-t-ct:after { content: ""; display: table; clear: both; } .tns-t-ct > div { width: 1.4285714286%; width: -webkit-calc(100% / 70); width: -moz-calc(100% / 70); width: calc(100% / 70); height: 10px; float: left; }@-webkit-keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes notyf-fadeinleft{0%{opacity:0;transform:translateX(25%)}to{opacity:1;transform:translateX(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translateX(25%)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes notyf-fadeoutright{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(25%)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(25%)}}@-webkit-keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@-webkit-keyframes ripple{0%{transform:scale(0) translateY(-45%) translateX(13%)}to{transform:scale(1) translateY(-45%) translateX(13%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translateX(13%)}to{transform:scale(1) translateY(-45%) translateX(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;-webkit-animation:notyf-fadeinup .3s ease-in forwards;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px 0 rgba(0,0,0,.25);position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{-webkit-animation:notyf-fadeoutdown .3s forwards;animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{-webkit-animation:notyf-fadeoutright .3s forwards;animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translateX(0)}.notyf__toast--disappear .notyf__message{-webkit-animation-delay:.05s;animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translateX(13%);z-index:5;-webkit-animation:ripple .4s ease-out forwards;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.3s;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;-webkit-animation:notyf-fadeinleft .3s forwards;animation:notyf-fadeinleft .3s forwards;-webkit-animation-delay:.35s;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:rgba(0,0,0,.25);border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:rgba(0,0,0,.15)}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;-webkit-animation:notyf-fadeinup .3s forwards;animation:notyf-fadeinup .3s forwards;-webkit-animation-delay:.25s;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;-webkit-animation-duration:.5s;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px 0 rgba(0,0,0,.13);width:100%}.notyf__dismiss{width:56px}}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}.tippy-box[data-placement^=top]>.tippy-backdrop{transform-origin:0 25%;border-radius:40% 40% 0 0}.tippy-box[data-placement^=top]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-55%)}.tippy-box[data-placement^=top]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%,-45%)}.tippy-box[data-placement^=bottom]>.tippy-backdrop{transform-origin:0 -50%;border-radius:0 0 30% 30%}.tippy-box[data-placement^=bottom]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-45%)}.tippy-box[data-placement^=bottom]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%)}.tippy-box[data-placement^=left]>.tippy-backdrop{transform-origin:50% 0;border-radius:50% 0 0 50%}.tippy-box[data-placement^=left]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-box[data-placement^=left]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-75%,-50%)}.tippy-box[data-placement^=right]>.tippy-backdrop{transform-origin:-50% 0;border-radius:0 50% 50% 0}.tippy-box[data-placement^=right]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-box[data-placement^=right]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-25%,-50%)}.tippy-box[data-animatefill]{background-color:transparent!important}.tippy-backdrop{position:absolute;background-color:#333;border-radius:50%;width:calc(110% + 32px);left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop[data-state=hidden]{opacity:0}.tippy-backdrop:after{content:"";float:left;padding-top:100%}.tippy-backdrop+.tippy-content{transition-property:opacity;will-change:opacity}.tippy-backdrop+.tippy-content[data-state=hidden]{opacity:0}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}@charset "UTF-8"; /*! main.scss | Vuero | Css ninja 2020-2021 */ /* ========================================================================== SCSS Imports ========================================================================== */ :root { --danger: rgb(230, 41, 100); --dark: rgb(40, 50, 82); --info: rgb(3, 152, 226); --link: rgb(72, 95, 199); --primary: rgb(65, 185, 131); --success: rgb(6, 214, 158); --warning: rgb(250, 173, 66); --white: rgb(255, 255, 255); } :root { --danger--color-invert: rgb(255, 255, 255); --danger--dark-color: rgb(210, 25, 83); --danger--light-color: rgb(253, 237, 242); --dark--800--lighten: rgb(53, 67, 109); --dark--color-invert: rgb(255, 255, 255); --info--color-invert: rgb(255, 255, 255); --info--dark-color: rgb(3, 135, 201); --info--light-color: rgb(235, 248, 255); --link--color-invert: rgb(255, 255, 255); --link--dark-color: rgb(56, 79, 184); --link--light-color: rgb(239, 241, 250); --primary--color-invert: rgb(255, 255, 255); --primary--dark-color: rgb(45, 128, 91); --primary--light-color: rgb(240, 250, 245); --success--color-invert: rgb(255, 255, 255); --success--dark-color: rgb(4, 144, 106); --success--light-color: rgb(235, 254, 249); --warning--color-invert: rgba(0, 0, 0, 0.7); --warning--dark-color: rgb(144, 85, 4); --warning--light-color: rgb(255, 246, 235); --white--800--lighten: rgb(255, 255, 255); } /** * This mixin create CSS variables with distinct HSL layers. */ :root { --sidebar: #344258; --body-color: #f9f9f9; --title-grey: #a9abac; --background-grey: #f0f0f0; --medium-grey: #ddd; --light-grey: #eee; --white: #fff; --border: hsl(0, 0%, 86%); --placeload-nuance-from: rgba(0, 0, 0, 0.07); --placeload-nuance-to: rgba(0, 0, 0, 0.15); --placeload-dark-nuance-from: rgba(255, 255, 255, 0.15); --placeload-dark-nuance-to: rgba(255, 255, 255, 0.24); --primary-h: 153; --primary-s: 48%; --primary-l: 49%; --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-grey-h: 0; --primary-grey-s: 0%; --primary-grey-l: 80%; --primary-grey: hsl(var(--primary-grey-h), var(--primary-grey-s), var(--primary-grey-l)); --secondary-h: 222; --secondary-s: 82%; --secondary-l: 56%; --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)); --purple-h: 261; --purple-s: 32%; --purple-l: 55%; --purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l)); --blue-h: 198; --blue-s: 100%; --blue-l: 61%; --blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --red-h: 345; --red-s: 94%; --red-l: 57%; --red: hsl(var(--red-h), var(--red-s), var(--red-l)); --orange-h: 19; --orange-s: 100%; --orange-l: 75%; --orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l)); --yellow-h: 43; --yellow-s: 100%; --yellow-l: 72%; --yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l)); --green-h: 113; --green-s: 59%; --green-l: 71%; --green: hsl(var(--green-h), var(--green-s), var(--green-l)); --pink-h: 344; --pink-s: 100%; --pink-l: 81%; --pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)); --light-blue-h: 196; --light-blue-s: 84%; --light-blue-l: 71%; --light-blue: hsl(var(--light-blue-h), var(--light-blue-s), var(--light-blue-l)); --dark-h: 226; --dark-s: 34%; --dark-l: 24%; --dark: hsl(var(--dark-h), var(--dark-s), var(--dark-l)); --link-h: 229; --link-s: 53%; --link-l: 53%; --link: hsl(var(--link-h), var(--link-s), var(--link-l)); --info-h: 200; --info-s: 97%; --info-l: 45%; --info: hsl(var(--info-h), var(--info-s), var(--info-l)); --success-h: 164; --success-s: 95%; --success-l: 43%; --success: hsl(var(--success-h), var(--success-s), var(--success-l)); --warning-h: 35; --warning-s: 95%; --warning-l: 62%; --warning: hsl(var(--warning-h), var(--warning-s), var(--warning-l)); --danger-h: 341; --danger-s: 79%; --danger-l: 53%; --danger: hsl(var(--danger-h), var(--danger-s), var(--danger-l)); --smoke-white-h: 0; --smoke-white-s: 0%; --smoke-white-l: 99%; --smoke-white: hsl(var(--smoke-white-h), var(--smoke-white-s), var(--smoke-white-l)); --placeholder-h: 0; --placeholder-s: 0%; --placeholder-l: 81%; --placeholder: hsl(var(--placeholder-h), var(--placeholder-s), var(--placeholder-l)); --muted-grey-h: 0; --muted-grey-s: 0%; --muted-grey-l: 60%; --muted-grey: hsl(var(--muted-grey-h), var(--muted-grey-s), var(--muted-grey-l)); --fade-grey-h: 0; --fade-grey-s: 0%; --fade-grey-l: 93%; --fade-grey: hsl(var(--fade-grey-h), var(--fade-grey-s), var(--fade-grey-l)); --widget-grey-h: 228; --widget-grey-s: 33%; --widget-grey-l: 97%; --widget-grey: hsl(var(--widget-grey-h), var(--widget-grey-s), var(--widget-grey-l)); --dark-dark-text-h: 240; --dark-dark-text-s: 6%; --dark-dark-text-l: 68%; --dark-dark-text: hsl(var(--dark-dark-text-h), var(--dark-dark-text-s), var(--dark-dark-text-l)); --dark-text-h: 226; --dark-text-s: 34%; --dark-text-l: 24%; --dark-text: hsl(var(--dark-text-h), var(--dark-text-s), var(--dark-text-l)); --light-text-h: 232; --light-text-s: 14%; --light-text-l: 68%; --light-text: hsl(var(--light-text-h), var(--light-text-s), var(--light-text-l)); --dark-sidebar-h: 240; --dark-sidebar-s: 4%; --dark-sidebar-l: 14%; --dark-sidebar: hsl(var(--dark-sidebar-h), var(--dark-sidebar-s), var(--dark-sidebar-l)); --landing-xxx-h: 225; --landing-xxx-s: 25%; --landing-xxx-l: 6%; --landing-xxx: hsl(var(--landing-xxx-h), var(--landing-xxx-s), var(--landing-xxx-l)); --landing-yyy-h: 230; --landing-yyy-s: 26%; --landing-yyy-l: 13%; --landing-yyy: hsl(var(--landing-yyy-h), var(--landing-yyy-s), var(--landing-yyy-l)); } .is-dark { --background-grey: var(--dark-sidebar-light-5); --border: var(--dark-sidebar-light-12); --primary-h: 159; /* Hue */ --primary-s: 85%; /* Saturation */ --primary-l: 43%; /* Lightness */ --dark-text-h: 232; --dark-text-s: 14%; --dark-text-l: 68%; --dark-text: hsl(var(--dark-text-h), var(--dark-text-s), var(--dark-text-l)); --red-h: 324; --red-s: 100%; --red-l: 63%; --red: hsl(var(--red-h), var(--red-s), var(--red-l)); } :root { /** * primary */ --primary-dark-1: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 1%) ); --primary-dark-2: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 2%) ); --primary-dark-3: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 3%) ); --primary-dark-4: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 4%) ); --primary-dark-5: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 5%) ); --primary-dark-6: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 6%) ); --primary-dark-7: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 7%) ); --primary-dark-8: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%) ); --primary-dark-9: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 9%) ); --primary-dark-10: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%) ); --primary-dark-11: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 11%) ); --primary-dark-12: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 12%) ); --primary-dark-13: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 13%) ); --primary-dark-14: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 14%) ); --primary-dark-15: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 15%) ); --primary-dark-16: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 16%) ); --primary-dark-18: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 18%) ); --primary-dark-20: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%) ); --primary-dark-22: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 22%) ); --primary-dark-24: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 24%) ); --primary-dark-26: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 26%) ); --primary-dark-28: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 28%) ); --primary-dark-30: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 30%) ); --primary-dark-35: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 35%) ); --primary-dark-40: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%) ); --primary-dark-42: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 42%) ); --primary-dark-45: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 45%) ); --primary-dark-48: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 48%) ); --primary-dark-50: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 50%) ); --primary-dark-60: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 60%) ); --primary-dark-70: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 70%) ); --primary-dark-80: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 80%) ); --primary-dark-90: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) - 90%) ); --primary-light-1: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 1%) ); --primary-light-2: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 2%) ); --primary-light-3: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 3%) ); --primary-light-4: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 4%) ); --primary-light-5: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 5%) ); --primary-light-6: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 6%) ); --primary-light-7: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 7%) ); --primary-light-8: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 8%) ); --primary-light-9: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 9%) ); --primary-light-10: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%) ); --primary-light-11: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 11%) ); --primary-light-12: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 12%) ); --primary-light-13: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 13%) ); --primary-light-14: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 14%) ); --primary-light-15: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 15%) ); --primary-light-16: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 16%) ); --primary-light-18: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 18%) ); --primary-light-20: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%) ); --primary-light-22: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 22%) ); --primary-light-24: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 24%) ); --primary-light-26: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 26%) ); --primary-light-28: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 28%) ); --primary-light-30: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 30%) ); --primary-light-35: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 35%) ); --primary-light-40: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%) ); --primary-light-42: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 42%) ); --primary-light-45: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 45%) ); --primary-light-48: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 48%) ); --primary-light-50: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 50%) ); --primary-light-60: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 60%) ); --primary-light-70: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 70%) ); --primary-light-80: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 80%) ); --primary-light-90: hsl( var(--primary-h), var(--primary-s), calc(var(--primary-l) + 90%) ); /** * secondary colors */ --secondary-light-1: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 1%) ); --secondary-light-2: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 2%) ); --secondary-light-3: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 3%) ); --secondary-light-4: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 4%) ); --secondary-light-5: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 5%) ); --secondary-light-6: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 6%) ); --secondary-light-7: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 7%) ); --secondary-light-8: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 8%) ); --secondary-light-9: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 9%) ); --secondary-light-10: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%) ); --secondary-light-11: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 11%) ); --secondary-light-12: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 12%) ); --secondary-light-13: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 13%) ); --secondary-light-14: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 14%) ); --secondary-light-15: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 15%) ); --secondary-light-16: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 16%) ); --secondary-light-18: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 18%) ); --secondary-light-20: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%) ); --secondary-light-22: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 22%) ); --secondary-light-24: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 24%) ); --secondary-light-26: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 26%) ); --secondary-light-28: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 28%) ); --secondary-light-30: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 30%) ); --secondary-light-35: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 35%) ); --secondary-light-40: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%) ); --secondary-light-42: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 42%) ); --secondary-light-45: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 45%) ); --secondary-light-48: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 48%) ); --secondary-light-50: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 50%) ); --secondary-light-60: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 60%) ); --secondary-light-70: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 70%) ); --secondary-light-80: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 80%) ); --secondary-light-90: hsl( var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 90%) ); /** * primary-grey colors */ --primary-grey-dark-4: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 4%) ); --primary-grey-dark-5: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 5%) ); --primary-grey-dark-8: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 8%) ); --primary-grey-dark-10: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 10%) ); --primary-grey-dark-15: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 15%) ); --primary-grey-dark-20: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 20%) ); --primary-grey-dark-30: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 30%) ); --primary-grey-dark-35: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 35%) ); --primary-grey-dark-40: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) - 40%) ); --primary-grey-light-2: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) + 2%) ); --primary-grey-light-3: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) + 3%) ); --primary-grey-light-5: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) + 5%) ); --primary-grey-light-6: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) + 6%) ); --primary-grey-light-10: hsl( var(--primary-grey-h), var(--primary-grey-s), calc(var(--primary-grey-l) + 10%) ); /** * danger colors */ --danger-light-20: hsl( var(--danger-h), var(--danger-s), calc(var(--danger-l) + 20%) ); --danger-light-24: hsl( var(--danger-h), var(--danger-s), calc(var(--danger-l) + 24%) ); --danger-light-36: hsl( var(--danger-h), var(--danger-s), calc(var(--danger-l) + 36%) ); --danger-light-40: hsl( var(--danger-h), var(--danger-s), calc(var(--danger-l) + 40%) ); /** * warning colors */ --warning-light-20: hsl( var(--warning-h), var(--warning-s), calc(var(--warning-l) + 20%) ); --warning-light-24: hsl( var(--warning-h), var(--warning-s), calc(var(--warning-l) + 24%) ); --warning-light-32: hsl( var(--warning-h), var(--warning-s), calc(var(--warning-l) + 32%) ); /** * info colors */ --info-shadow-from: hsla(var(--info-h), var(--info-s), var(--info-l), 0.42); --info-shadow-to: hsla(var(--info-h), var(--info-s), var(--info-l), 0.2); --info-light-20: hsl( var(--info-h), var(--info-s), calc(var(--info-l) + 20%) ); --info-light-24: hsl( var(--info-h), var(--info-s), calc(var(--info-l) + 24%) ); --info-light-45: hsl( var(--info-h), var(--info-s), calc(var(--info-l) + 45%) ); /** * success colors */ --success-light-20: hsl( var(--success-h), var(--success-s), calc(var(--success-l) + 20%) ); --success-light-24: hsl( var(--success-h), var(--success-s), calc(var(--success-l) + 24%) ); --success-light-40: hsl( var(--success-h), var(--success-s), calc(var(--success-l) + 40%) ); --success-light-45: hsl( var(--success-h), var(--success-s), calc(var(--success-l) + 45%) ); --success-light-48: hsl( var(--success-h), var(--success-s), calc(var(--success-l) + 48%) ); /** * purple colors */ --purple-light-36: hsl( var(--purple-h), var(--purple-s), calc(var(--purple-l) + 36%) ); --purple-light-38: hsl( var(--purple-h), var(--purple-s), calc(var(--purple-l) + 38%) ); /** * blue colors */ --blue-light-32: hsl( var(--blue-h), var(--blue-s), calc(var(--blue-l) + 32%) ); --blue-light-34: hsl( var(--blue-h), var(--blue-s), calc(var(--blue-l) + 34%) ); /** * red colors */ --red-light-38: hsl( var(--red-h), var(--red-s), calc(var(--red-l) + 38%) ); /** * orange colors */ --orange-light-18: hsl( var(--orange-h), var(--orange-s), calc(var(--orange-l) + 18%) ); --orange-light-20: hsl( var(--orange-h), var(--orange-s), calc(var(--orange-l) + 20%) ); /** * yellow colors */ --yellow-dark-8: hsl( var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) - 8%) ); --yellow-light-22: hsl( var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) + 22%) ); /** * green colors */ --green-light-15: hsl( var(--green-h), var(--green-s), calc(var(--green-l) + 15%) ); --green-light-22: hsl( var(--green-h), var(--green-s), calc(var(--green-l) + 22%) ); --green-light-23: hsl( var(--green-h), var(--green-s), calc(var(--green-l) + 23%) ); /** * smoke-white colors */ --smoke-white-dark-2: hsl( var(--smoke-white-h), var(--smoke-white-s), calc(var(--smoke-white-l) - 2%) ); --smoke-white-dark-8: hsl( var(--smoke-white-h), var(--smoke-white-s), calc(var(--smoke-white-l) - 8%) ); --smoke-white-dark-10: hsl( var(--smoke-white-h), var(--smoke-white-s), calc(var(--smoke-white-l) - 10%) ); --smoke-white-dark-16: hsl( var(--smoke-white-h), var(--smoke-white-s), calc(var(--smoke-white-l) - 16%) ); --smoke-white-light-2: hsl( var(--smoke-white-h), var(--smoke-white-s), calc(var(--smoke-white-l) + 2%) ); /** * placeholder colors */ --placeholder-dark-8: hsl( var(--placeholder-h), var(--placeholder-s), calc(var(--placeholder-l) - 8%) ); --placeholder-light-10: hsl( var(--placeholder-h), var(--placeholder-s), calc(var(--placeholder-l) + 10%) ); --placeholder-light-16: hsl( var(--placeholder-h), var(--placeholder-s), calc(var(--placeholder-l) + 16%) ); /** * muted-grey colors */ --muted-grey-dark-25: hsl( var(--muted-grey-h), var(--muted-grey-s), calc(var(--muted-grey-l) - 25%) ); --muted-grey-light-14: hsl( var(--muted-grey-h), var(--muted-grey-s), calc(var(--muted-grey-l) + 14%) ); --muted-grey-light-15: hsl( var(--muted-grey-h), var(--muted-grey-s), calc(var(--muted-grey-l) + 15%) ); /** * fade-grey colors */ --fade-grey-dark-2: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 2%) ); --fade-grey-dark-3: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 3%) ); --fade-grey-dark-4: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 4%) ); --fade-grey-dark-5: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 5%) ); --fade-grey-dark-6: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 6%) ); --fade-grey-dark-8: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) - 8%) ); --fade-grey-light-2: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) + 2%) ); --fade-grey-light-3: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) + 3%) ); --fade-grey-light-4: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) + 4%) ); --fade-grey-light-5: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) + 5%) ); --fade-grey-light-6: hsl( var(--fade-grey-h), var(--fade-grey-s), calc(var(--fade-grey-l) + 6%) ); /** * widget-grey colors */ --widget-grey-dark-1: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 1%) ); --widget-grey-dark-2: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 2%) ); --widget-grey-dark-3: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 3%) ); --widget-grey-dark-4: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 4%) ); --widget-grey-dark-8: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 8%) ); --widget-grey-dark-12: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) - 12%) ); --widget-grey-light-1: hsl( var(--widget-grey-h), var(--widget-grey-s), calc(var(--widget-grey-l) + 1%) ); /** * dark-dark-text colors */ --dark-dark-text-light-14: hsl( var(--dark-dark-text-h), var(--dark-dark-text-s), calc(var(--dark-dark-text-l) + 14%) ); /** * dark-text colors */ --dark-text-light-18: hsl( var(--dark-text-h), var(--dark-text-s), calc(var(--dark-text-l) + 18%) ); --dark-text-light-25: hsl( var(--dark-text-h), var(--dark-text-s), calc(var(--dark-text-l) + 25%) ); --dark-text-light-35: hsl( var(--dark-text-h), var(--dark-text-s), calc(var(--dark-text-l) + 35%) ); /** * light-text colors */ --light-text-dark-2: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 2%) ); --light-text-dark-4: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 4%) ); --light-text-dark-5: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 5%) ); --light-text-dark-6: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 6%) ); --light-text-dark-8: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 8%) ); --light-text-dark-10: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 10%) ); --light-text-dark-12: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 12%) ); --light-text-dark-20: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 20%) ); --light-text-dark-22: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) - 22%) ); --light-text-light-2: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) + 2%) ); --light-text-light-5: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) + 5%) ); --light-text-light-6: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) + 6%) ); --light-text-light-12: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) + 12%) ); --light-text-light-15: hsl( var(--light-text-h), var(--light-text-s), calc(var(--light-text-l) + 15%) ); /** * dark-sidebar colors */ --dark-sidebar-dark-2: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 2%) ); --dark-sidebar-dark-3: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 3%) ); --dark-sidebar-dark-4: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 4%) ); --dark-sidebar-dark-5: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 5%) ); --dark-sidebar-dark-6: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 6%) ); --dark-sidebar-dark-10: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 10%) ); --dark-sidebar-dark-12: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) - 12%) ); --dark-sidebar-light-1: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 1%) ); --dark-sidebar-light-2: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 2%) ); --dark-sidebar-light-3: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 3%) ); --dark-sidebar-light-4: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 4%) ); --dark-sidebar-light-5: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 5%) ); --dark-sidebar-light-6: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 6%) ); --dark-sidebar-light-7: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 7%) ); --dark-sidebar-light-8: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 8%) ); --dark-sidebar-light-9: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 9%) ); --dark-sidebar-light-10: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 10%) ); --dark-sidebar-light-12: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 12%) ); --dark-sidebar-light-14: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 14%) ); --dark-sidebar-light-15: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 15%) ); --dark-sidebar-light-16: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 16%) ); --dark-sidebar-light-18: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 18%) ); --dark-sidebar-light-20: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 20%) ); --dark-sidebar-light-22: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 22%) ); --dark-sidebar-light-25: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 25%) ); --dark-sidebar-light-55: hsl( var(--dark-sidebar-h), var(--dark-sidebar-s), calc(var(--dark-sidebar-l) + 55%) ); /** * landing-xxx colors */ --landing-xxx-dark-2: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) - 2%) ); --landing-xxx-light-2: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 2%) ); --landing-xxx-light-4: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 4%) ); --landing-xxx-light-6: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 6%) ); --landing-xxx-light-8: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 8%) ); --landing-xxx-light-12: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 12%) ); --landing-xxx-light-14: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 14%) ); --landing-xxx-light-18: hsl( var(--landing-xxx-h), var(--landing-xxx-s), calc(var(--landing-xxx-l) + 18%) ); /** * landing-yyy colors */ --landing-yyy-dark-6: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) - 6%) ); --landing-yyy-dark-12: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) - 12%) ); --landing-yyy-light-2: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) + 2%) ); --landing-yyy-light-4: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) + 4%) ); --landing-yyy-light-6: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) + 6%) ); --landing-yyy-light-8: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) + 8%) ); --landing-yyy-light-18: hsl( var(--landing-yyy-h), var(--landing-yyy-s), calc(var(--landing-yyy-l) + 18%) ); } :root { --base-shadow: rgba(0, 0, 0, 0.12); --light-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06); --light-box-shadow-md: -1px 3px 10px 0 rgba(0, 0, 0, 0.12); --primary-shadow-from: hsla( var(--primary-h), var(--primary-s), var(--primary-l), 0.42 ); --primary-shadow-to: hsla( var(--primary-h), var(--primary-s), var(--primary-l), 0.2 ); --primary-box-shadow: 0 14px 26px -12px var(--primary-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--primary-shadow-to) !important; --secondary-shadow-from: hsla( var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.42 ); --secondary-shadow-to: hsla( var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.2 ); --secondary-box-shadow: 0 14px 26px -12px var(--secondary-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--secondary-shadow-to) !important; --danger-shadow-from: hsla( var(--danger-h), var(--danger-s), var(--danger-l), 0.42 ); --danger-shadow-to: hsla( var(--danger-h), var(--danger-s), var(--danger-l), 0.2 ); --danger-box-shadow: 0 14px 26px -12px var(--danger-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--danger-shadow-to) !important; --warning-shadow-from: hsla( var(--warning-h), var(--warning-s), var(--warning-l), 0.42 ); --warning-shadow-to: hsla( var(--warning-h), var(--warning-s), var(--warning-l), 0.2 ); --warning-box-shadow: 0 14px 26px -12px var(--warning-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--warning-shadow-to) !important; --info-shadow-from: hsla( var(--info-h), var(--info-s), var(--info-l), 0.42 ); --info-shadow-to: hsla( var(--info-h), var(--info-s), var(--info-l), 0.2 ); --info-box-shadow: 0 14px 26px -12px var(--info-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--info-shadow-to) !important; --success-shadow-from: hsla( var(--success-h), var(--success-s), var(--success-l), 0.42 ); --success-shadow-to: hsla( var(--success-h), var(--success-s), var(--success-l), 0.2 ); --success-box-shadow: 0 14px 26px -12px var(--success-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--success-shadow-to) !important; --purple-shadow-from: hsla( var(--purple-h), var(--purple-s), var(--purple-l), 0.42 ); --purple-shadow-to: hsla( var(--purple-h), var(--purple-s), var(--purple-l), 0.2 ); --purple-box-shadow: 0 14px 26px -12px var(--purple-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--purple-shadow-to) !important; --blue-shadow-from: hsla( var(--blue-h), var(--blue-s), var(--blue-l), 0.42 ); --blue-shadow-to: hsla( var(--blue-h), var(--blue-s), var(--blue-l), 0.2 ); --blue-box-shadow: 0 14px 26px -12px var(--blue-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--blue-shadow-to) !important; --red-shadow-from: hsla( var(--red-h), var(--red-s), var(--red-l), 0.42 ); --red-shadow-to: hsla( var(--red-h), var(--red-s), var(--red-l), 0.2 ); --red-box-shadow: 0 14px 26px -12px var(--red-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--red-shadow-to) !important; --orange-shadow-from: hsla( var(--orange-h), var(--orange-s), var(--orange-l), 0.42 ); --orange-shadow-to: hsla( var(--orange-h), var(--orange-s), var(--orange-l), 0.2 ); --orange-box-shadow: 0 14px 26px -12px var(--orange-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--orange-shadow-to) !important; --yellow-shadow-from: hsla( var(--yellow-h), var(--yellow-s), var(--yellow-l), 0.42 ); --yellow-shadow-to: hsla( var(--yellow-h), var(--yellow-s), var(--yellow-l), 0.2 ); --yellow-box-shadow: 0 14px 26px -12px var(--yellow-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--yellow-shadow-to) !important; --green-shadow-from: hsla( var(--green-h), var(--green-s), var(--green-l), 0.42 ); --green-shadow-to: hsla( var(--green-h), var(--green-s), var(--green-l), 0.2 ); --green-box-shadow: 0 14px 26px -12px var(--green-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--green-shadow-to) !important; --github-shadow-from: hsla( var(--github-h), var(--github-s), var(--github-l), 0.42 ); --github-shadow-to: hsla( var(--github-h), var(--github-s), var(--github-l), 0.2 ); --github-box-shadow: 0 14px 26px -12px var(--github-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--github-shadow-to) !important; --invision-shadow-from: hsla( var(--invision-h), var(--invision-s), var(--invision-l), 0.42 ); --invision-shadow-to: hsla( var(--invision-h), var(--invision-s), var(--invision-l), 0.2 ); --invision-box-shadow: 0 14px 26px -12px var(--invision-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--invision-shadow-to) !important; --facebook-shadow-from: hsla( var(--facebook-h), var(--facebook-s), var(--facebook-l), 0.42 ); --facebook-shadow-to: hsla( var(--facebook-h), var(--facebook-s), var(--facebook-l), 0.2 ); --facebook-box-shadow: 0 14px 26px -12px var(--facebook-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--facebook-shadow-to) !important; --amazon-shadow-from: hsla( var(--amazon-h), var(--amazon-s), var(--amazon-l), 0.42 ); --amazon-shadow-to: hsla( var(--amazon-h), var(--amazon-s), var(--amazon-l), 0.2 ); --amazon-box-shadow: 0 14px 26px -12px var(--amazon-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--amazon-shadow-to) !important; --twitter-shadow-from: hsla( var(--twitter-h), var(--twitter-s), var(--twitter-l), 0.42 ); --twitter-shadow-to: hsla( var(--twitter-h), var(--twitter-s), var(--twitter-l), 0.2 ); --twitter-box-shadow: 0 14px 26px -12px var(--twitter-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--twitter-shadow-to) !important; --angular-shadow-from: hsla( var(--angular-h), var(--angular-s), var(--angular-l), 0.42 ); --angular-shadow-to: hsla( var(--angular-h), var(--angular-s), var(--angular-l), 0.2 ); --angular-box-shadow: 0 14px 26px -12px var(--angular-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--angular-shadow-to) !important; --linkedin-shadow-from: hsla( var(--linkedin-h), var(--linkedin-s), var(--linkedin-l), 0.42 ); --linkedin-shadow-to: hsla( var(--linkedin-h), var(--linkedin-s), var(--linkedin-l), 0.2 ); --linkedin-box-shadow: 0 14px 26px -12px var(--linkedin-shadow-from), 0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--linkedin-shadow-to) !important; } :root { --radius-small: 2px; --radius: 4px; --radius-large: 6px; --radius-rounded: 9999px; } :root { --font: "Roboto", sans-serif; --font-alt: "Montserrat", sans-serif; --font-monospace: "Fira Code", monospace; --font-size: 14px; } /*! _variables.scss | Vuero | Css ninja 2020-2021 */ /* Theses variables are used to map bulma variables to our css variables Some colors are not here because they are overriden with bulma-css-var package. */ /* ========================================================================== 2. Global colors ========================================================================== */ /* ========================================================================== 4. Fonts ========================================================================== */ /* ========================================================================== 5. Layout ========================================================================== */ .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis, .file-cta, .file-name, .select select, .textarea, .input, .button { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: 1px solid transparent; border-radius: var(--radius); box-shadow: none; display: inline-flex; font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.5em - 1px); padding-left: calc(0.75em - 1px); padding-right: calc(0.75em - 1px); padding-top: calc(0.5em - 1px); position: relative; vertical-align: top; } .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus, .pagination-ellipsis:focus, .file-cta:focus, .file-name:focus, .select select:focus, .textarea:focus, .input:focus, .button:focus, .is-focused.pagination-previous, .is-focused.pagination-next, .is-focused.pagination-link, .is-focused.pagination-ellipsis, .is-focused.file-cta, .is-focused.file-name, .select select.is-focused, .is-focused.textarea, .is-focused.input, .is-focused.button, .pagination-previous:active, .pagination-next:active, .pagination-link:active, .pagination-ellipsis:active, .file-cta:active, .file-name:active, .select select:active, .textarea:active, .input:active, .button:active, .is-active.pagination-previous, .is-active.pagination-next, .is-active.pagination-link, .is-active.pagination-ellipsis, .is-active.file-cta, .is-active.file-name, .select select.is-active, .is-active.textarea, .is-active.input, .is-active.button { outline: none; } [disabled].pagination-previous, [disabled].pagination-next, [disabled].pagination-link, [disabled].pagination-ellipsis, [disabled].file-cta, [disabled].file-name, .select select[disabled], [disabled].textarea, [disabled].input, [disabled].button, fieldset[disabled] .pagination-previous, fieldset[disabled] .pagination-next, fieldset[disabled] .pagination-link, fieldset[disabled] .pagination-ellipsis, fieldset[disabled] .file-cta, fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input, fieldset[disabled] .button { cursor: not-allowed; } .is-unselectable, .tabs, .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis, .breadcrumb, .file, .button { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after { border: 3px solid transparent; border-radius: 2px; border-right: 0; border-top: 0; content: " "; display: block; height: 0.625em; margin-top: -0.4375em; pointer-events: none; position: absolute; top: 50%; transform: rotate(-45deg); transform-origin: center; width: 0.625em; } .tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .level:not(:last-child), .breadcrumb:not(:last-child), .block:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .box:not(:last-child) { margin-bottom: 1.5rem; } .modal-close, .delete { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: rgba(10, 10, 10, 0.2); border: none; border-radius: var(--radius-rounded); cursor: pointer; pointer-events: auto; display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 0; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; outline: none; position: relative; vertical-align: top; width: 20px; } .modal-close::before, .delete::before, .modal-close::after, .delete::after { background-color: var(--white); content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } .modal-close::before, .delete::before { height: 2px; width: 50%; } .modal-close::after, .delete::after { height: 50%; width: 2px; } .modal-close:hover, .delete:hover, .modal-close:focus, .delete:focus { background-color: rgba(10, 10, 10, 0.3); } .modal-close:active, .delete:active { background-color: rgba(10, 10, 10, 0.4); } .is-small.modal-close, .is-small.delete { height: 16px; max-height: 16px; max-width: 16px; min-height: 16px; min-width: 16px; width: 16px; } .is-medium.modal-close, .is-medium.delete { height: 24px; max-height: 24px; max-width: 24px; min-height: 24px; min-width: 24px; width: 24px; } .is-large.modal-close, .is-large.delete { height: 32px; max-height: 32px; max-width: 32px; min-height: 32px; min-width: 32px; width: 32px; } .control.is-loading::after, .select.is-loading::after, .loader, .button.is-loading::after { animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: var(--radius-rounded); border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; position: relative; width: 1em; } .hero-video, .is-overlay, .modal-background, .modal, .image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, .image.is-1by1 .has-ratio, .image.is-5by4 img, .image.is-5by4 .has-ratio, .image.is-4by3 img, .image.is-4by3 .has-ratio, .image.is-3by2 img, .image.is-3by2 .has-ratio, .image.is-5by3 img, .image.is-5by3 .has-ratio, .image.is-16by9 img, .image.is-16by9 .has-ratio, .image.is-2by1 img, .image.is-2by1 .has-ratio, .image.is-3by1 img, .image.is-3by1 .has-ratio, .image.is-4by5 img, .image.is-4by5 .has-ratio, .image.is-3by4 img, .image.is-3by4 .has-ratio, .image.is-2by3 img, .image.is-2by3 .has-ratio, .image.is-3by5 img, .image.is-3by5 .has-ratio, .image.is-9by16 img, .image.is-9by16 .has-ratio, .image.is-1by2 img, .image.is-1by2 .has-ratio, .image.is-1by3 img, .image.is-1by3 .has-ratio { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .navbar-burger { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; border: none; color: currentColor; font-family: inherit; font-size: 1em; margin: 0; padding: 0; } /* Bulma Base */ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; } button, input, select, textarea { margin: 0; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } img, video { height: auto; max-width: 100%; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } td:not([align]), th:not([align]) { text-align: inherit; } html { background-color: var(--white); font-size: var(--font-size); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; text-size-adjust: 100%; } article, aside, figure, footer, header, hgroup, section { display: block; } body, button, input, optgroup, select, textarea { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; } body { color: var(--body-color); font-size: 1em; font-weight: 400; line-height: 1.5; } a { color: var(--link); cursor: pointer; text-decoration: none; } a strong { color: currentColor; } a:hover { color: #363636; } code { background-color: whitesmoke; color: #da1039; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; } hr { background-color: whitesmoke; border: none; display: block; height: 2px; margin: 1.5rem 0; } img { height: auto; max-width: 100%; } input[type=checkbox], input[type=radio] { vertical-align: baseline; } small { font-size: 0.875em; } span { font-style: inherit; font-weight: inherit; } strong { color: #363636; font-weight: 700; } fieldset { border: none; } pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; } pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; } table td, table th { vertical-align: top; } table td:not([align]), table th:not([align]) { text-align: inherit; } table th { color: #363636; } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* Bulma Elements */ .box { background-color: var(--white); border-radius: var(--radius-large); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: block; padding: 1.25rem; } a.box:hover, a.box:focus { box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px var(--link); } a.box:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px var(--link); } .button { background-color: var(--white); border-color: var(--border); border-width: 1px; color: #363636; cursor: pointer; justify-content: center; padding-bottom: calc(0.5em - 1px); padding-left: 1em; padding-right: 1em; padding-top: calc(0.5em - 1px); text-align: center; white-space: nowrap; } .button strong { color: inherit; } .button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large { height: 1.5em; width: 1.5em; } .button .icon:first-child:not(:last-child) { margin-left: calc(-0.5em - 1px); margin-right: 0.25em; } .button .icon:last-child:not(:first-child) { margin-left: 0.25em; margin-right: calc(-0.5em - 1px); } .button .icon:first-child:last-child { margin-left: calc(-0.5em - 1px); margin-right: calc(-0.5em - 1px); } .button:hover, .button.is-hovered { border-color: #b5b5b5; color: #363636; } .button:focus, .button.is-focused { border-color: #485fc7; color: #363636; } .button:focus:not(:active), .button.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--link); } .button:active, .button.is-active { border-color: #4a4a4a; color: #363636; } .button.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline; } .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused { background-color: whitesmoke; color: #363636; } .button.is-text:active, .button.is-text.is-active { background-color: #e8e8e8; color: #363636; } .button.is-text[disabled], fieldset[disabled] .button.is-text { background-color: transparent; border-color: transparent; box-shadow: none; } .button.is-ghost { background: none; border-color: transparent; color: var(--link); text-decoration: none; } .button.is-ghost:hover, .button.is-ghost.is-hovered { color: var(--link); text-decoration: underline; } .button.is-white { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white:hover, .button.is-white.is-hovered { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white:focus, .button.is-white.is-focused { border-color: transparent; color: #0a0a0a; } .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--white); } .button.is-white:active, .button.is-white.is-active { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white[disabled], fieldset[disabled] .button.is-white { background-color: var(--white); border-color: transparent; box-shadow: none; } .button.is-white.is-inverted { background-color: #0a0a0a; color: var(--white); } .button.is-white.is-inverted:hover, .button.is-white.is-inverted.is-hovered { background-color: black; } .button.is-white.is-inverted[disabled], fieldset[disabled] .button.is-white.is-inverted { background-color: #0a0a0a; border-color: transparent; box-shadow: none; color: var(--white); } .button.is-white.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-white.is-outlined { background-color: transparent; border-color: var(--white); color: var(--white); } .button.is-white.is-outlined:hover, .button.is-white.is-outlined.is-hovered, .button.is-white.is-outlined:focus, .button.is-white.is-outlined.is-focused { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .button.is-white.is-outlined.is-loading::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-white.is-outlined.is-loading:hover::after, .button.is-white.is-outlined.is-loading.is-hovered::after, .button.is-white.is-outlined.is-loading:focus::after, .button.is-white.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-white.is-outlined[disabled], fieldset[disabled] .button.is-white.is-outlined { background-color: transparent; border-color: var(--white); box-shadow: none; color: var(--white); } .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } .button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined.is-hovered, .button.is-white.is-inverted.is-outlined:focus, .button.is-white.is-inverted.is-outlined.is-focused { background-color: #0a0a0a; color: var(--white); } .button.is-white.is-inverted.is-outlined.is-loading:hover::after, .button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-white.is-inverted.is-outlined.is-loading:focus::after, .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-white.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a; } .button.is-black { background-color: #0a0a0a; border-color: transparent; color: var(--white); } .button.is-black:hover, .button.is-black.is-hovered { background-color: #040404; border-color: transparent; color: var(--white); } .button.is-black:focus, .button.is-black.is-focused { border-color: transparent; color: var(--white); } .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .button.is-black:active, .button.is-black.is-active { background-color: black; border-color: transparent; color: var(--white); } .button.is-black[disabled], fieldset[disabled] .button.is-black { background-color: #0a0a0a; border-color: transparent; box-shadow: none; } .button.is-black.is-inverted { background-color: var(--white); color: #0a0a0a; } .button.is-black.is-inverted:hover, .button.is-black.is-inverted.is-hovered { background-color: var(--white); } .button.is-black.is-inverted[disabled], fieldset[disabled] .button.is-black.is-inverted { background-color: var(--white); border-color: transparent; box-shadow: none; color: #0a0a0a; } .button.is-black.is-loading::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } .button.is-black.is-outlined:hover, .button.is-black.is-outlined.is-hovered, .button.is-black.is-outlined:focus, .button.is-black.is-outlined.is-focused { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .button.is-black.is-outlined.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-black.is-outlined.is-loading:hover::after, .button.is-black.is-outlined.is-loading.is-hovered::after, .button.is-black.is-outlined.is-loading:focus::after, .button.is-black.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-black.is-outlined[disabled], fieldset[disabled] .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a; } .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: var(--white); color: var(--white); } .button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined.is-hovered, .button.is-black.is-inverted.is-outlined:focus, .button.is-black.is-inverted.is-outlined.is-focused { background-color: var(--white); color: #0a0a0a; } .button.is-black.is-inverted.is-outlined.is-loading:hover::after, .button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-black.is-inverted.is-outlined.is-loading:focus::after, .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-black.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: var(--white); box-shadow: none; color: var(--white); } .button.is-light { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:hover, .button.is-light.is-hovered { background-color: #eeeeee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:focus, .button.is-light.is-focused { border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .button.is-light:active, .button.is-light.is-active { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light[disabled], fieldset[disabled] .button.is-light { background-color: whitesmoke; border-color: transparent; box-shadow: none; } .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .button.is-light.is-inverted:hover, .button.is-light.is-inverted.is-hovered { background-color: rgba(0, 0, 0, 0.7); } .button.is-light.is-inverted[disabled], fieldset[disabled] .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); border-color: transparent; box-shadow: none; color: whitesmoke; } .button.is-light.is-loading::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-light.is-outlined { background-color: transparent; border-color: whitesmoke; color: whitesmoke; } .button.is-light.is-outlined:hover, .button.is-light.is-outlined.is-hovered, .button.is-light.is-outlined:focus, .button.is-light.is-outlined.is-focused { background-color: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .button.is-light.is-outlined.is-loading::after { border-color: transparent transparent whitesmoke whitesmoke !important; } .button.is-light.is-outlined.is-loading:hover::after, .button.is-light.is-outlined.is-loading.is-hovered::after, .button.is-light.is-outlined.is-loading:focus::after, .button.is-light.is-outlined.is-loading.is-focused::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-light.is-outlined[disabled], fieldset[disabled] .button.is-light.is-outlined { background-color: transparent; border-color: whitesmoke; box-shadow: none; color: whitesmoke; } .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7); } .button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined.is-hovered, .button.is-light.is-inverted.is-outlined:focus, .button.is-light.is-inverted.is-outlined.is-focused { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .button.is-light.is-inverted.is-outlined.is-loading:hover::after, .button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-light.is-inverted.is-outlined.is-loading:focus::after, .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent whitesmoke whitesmoke !important; } .button.is-light.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); box-shadow: none; color: rgba(0, 0, 0, 0.7); } .button.is-dark { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:hover, .button.is-dark.is-hovered { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:focus, .button.is-dark.is-focused { border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--dark); } .button.is-dark:active, .button.is-dark.is-active { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark[disabled], fieldset[disabled] .button.is-dark { background-color: var(--dark); border-color: transparent; box-shadow: none; } .button.is-dark.is-inverted { background-color: var(--dark--color-invert); color: var(--dark); } .button.is-dark.is-inverted:hover, .button.is-dark.is-inverted.is-hovered { background-color: var(--dark--color-invert); } .button.is-dark.is-inverted[disabled], fieldset[disabled] .button.is-dark.is-inverted { background-color: var(--dark--color-invert); border-color: transparent; box-shadow: none; color: var(--dark); } .button.is-dark.is-loading::after { border-color: transparent transparent var(--dark--color-invert) var(--dark--color-invert) !important; } .button.is-dark.is-outlined { background-color: transparent; border-color: var(--dark); color: var(--dark); } .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, .button.is-dark.is-outlined.is-focused { background-color: var(--dark); border-color: var(--dark); color: var(--dark--color-invert); } .button.is-dark.is-outlined.is-loading::after { border-color: transparent transparent var(--dark) var(--dark) !important; } .button.is-dark.is-outlined.is-loading:hover::after, .button.is-dark.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-outlined.is-loading:focus::after, .button.is-dark.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--dark--color-invert) var(--dark--color-invert) !important; } .button.is-dark.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-outlined { background-color: transparent; border-color: var(--dark); box-shadow: none; color: var(--dark); } .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: var(--dark--color-invert); color: var(--dark--color-invert); } .button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined.is-hovered, .button.is-dark.is-inverted.is-outlined:focus, .button.is-dark.is-inverted.is-outlined.is-focused { background-color: var(--dark--color-invert); color: var(--dark); } .button.is-dark.is-inverted.is-outlined.is-loading:hover::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-inverted.is-outlined.is-loading:focus::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--dark) var(--dark) !important; } .button.is-dark.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: var(--dark--color-invert); box-shadow: none; color: var(--dark--color-invert); } .button.is-primary { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:hover, .button.is-primary.is-hovered { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--primary); } .button.is-primary:active, .button.is-primary.is-active { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary[disabled], fieldset[disabled] .button.is-primary { background-color: var(--primary); border-color: transparent; box-shadow: none; } .button.is-primary.is-inverted { background-color: var(--primary--color-invert); color: var(--primary); } .button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered { background-color: var(--primary--color-invert); } .button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted { background-color: var(--primary--color-invert); border-color: transparent; box-shadow: none; color: var(--primary); } .button.is-primary.is-loading::after { border-color: transparent transparent var(--primary--color-invert) var(--primary--color-invert) !important; } .button.is-primary.is-outlined { background-color: transparent; border-color: var(--primary); color: var(--primary); } .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused { background-color: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .button.is-primary.is-outlined.is-loading::after { border-color: transparent transparent var(--primary) var(--primary) !important; } .button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--primary--color-invert) var(--primary--color-invert) !important; } .button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined { background-color: transparent; border-color: var(--primary); box-shadow: none; color: var(--primary); } .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: var(--primary--color-invert); color: var(--primary--color-invert); } .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused { background-color: var(--primary--color-invert); color: var(--primary); } .button.is-primary.is-inverted.is-outlined.is-loading:hover::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-inverted.is-outlined.is-loading:focus::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--primary) var(--primary) !important; } .button.is-primary.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: var(--primary--color-invert); box-shadow: none; color: var(--primary--color-invert); } .button.is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered { background-color: var(--primary--light-color); border-color: transparent; color: var(--primary--dark-color); } .button.is-primary.is-light:active, .button.is-primary.is-light.is-active { background-color: var(--primary--light-color); border-color: transparent; color: var(--primary--dark-color); } .button.is-link { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link:hover, .button.is-link.is-hovered { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link:focus, .button.is-link.is-focused { border-color: transparent; color: var(--link--color-invert); } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--link); } .button.is-link:active, .button.is-link.is-active { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link[disabled], fieldset[disabled] .button.is-link { background-color: var(--link); border-color: transparent; box-shadow: none; } .button.is-link.is-inverted { background-color: var(--link--color-invert); color: var(--link); } .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { background-color: var(--link--color-invert); } .button.is-link.is-inverted[disabled], fieldset[disabled] .button.is-link.is-inverted { background-color: var(--link--color-invert); border-color: transparent; box-shadow: none; color: var(--link); } .button.is-link.is-loading::after { border-color: transparent transparent var(--link--color-invert) var(--link--color-invert) !important; } .button.is-link.is-outlined { background-color: transparent; border-color: var(--link); color: var(--link); } .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .button.is-link.is-outlined.is-loading::after { border-color: transparent transparent var(--link) var(--link) !important; } .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--link--color-invert) var(--link--color-invert) !important; } .button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { background-color: transparent; border-color: var(--link); box-shadow: none; color: var(--link); } .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: var(--link--color-invert); color: var(--link--color-invert); } .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused { background-color: var(--link--color-invert); color: var(--link); } .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--link) var(--link) !important; } .button.is-link.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: var(--link--color-invert); box-shadow: none; color: var(--link--color-invert); } .button.is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { background-color: var(--link--light-color); border-color: transparent; color: var(--link--dark-color); } .button.is-link.is-light:active, .button.is-link.is-light.is-active { background-color: var(--link--light-color); border-color: transparent; color: var(--link--dark-color); } .button.is-info { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info:hover, .button.is-info.is-hovered { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; color: var(--info--color-invert); } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--info); } .button.is-info:active, .button.is-info.is-active { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info[disabled], fieldset[disabled] .button.is-info { background-color: var(--info); border-color: transparent; box-shadow: none; } .button.is-info.is-inverted { background-color: var(--info--color-invert); color: var(--info); } .button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { background-color: var(--info--color-invert); } .button.is-info.is-inverted[disabled], fieldset[disabled] .button.is-info.is-inverted { background-color: var(--info--color-invert); border-color: transparent; box-shadow: none; color: var(--info); } .button.is-info.is-loading::after { border-color: transparent transparent var(--info--color-invert) var(--info--color-invert) !important; } .button.is-info.is-outlined { background-color: transparent; border-color: var(--info); color: var(--info); } .button.is-info.is-outlined:hover, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined.is-focused { background-color: var(--info); border-color: var(--info); color: var(--info--color-invert); } .button.is-info.is-outlined.is-loading::after { border-color: transparent transparent var(--info) var(--info) !important; } .button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--info--color-invert) var(--info--color-invert) !important; } .button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { background-color: transparent; border-color: var(--info); box-shadow: none; color: var(--info); } .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: var(--info--color-invert); color: var(--info--color-invert); } .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined.is-hovered, .button.is-info.is-inverted.is-outlined:focus, .button.is-info.is-inverted.is-outlined.is-focused { background-color: var(--info--color-invert); color: var(--info); } .button.is-info.is-inverted.is-outlined.is-loading:hover::after, .button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-info.is-inverted.is-outlined.is-loading:focus::after, .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--info) var(--info) !important; } .button.is-info.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: var(--info--color-invert); box-shadow: none; color: var(--info--color-invert); } .button.is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { background-color: var(--info--light-color); border-color: transparent; color: var(--info--dark-color); } .button.is-info.is-light:active, .button.is-info.is-light.is-active { background-color: var(--info--light-color); border-color: transparent; color: var(--info--dark-color); } .button.is-success { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success:hover, .button.is-success.is-hovered { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; color: var(--success--color-invert); } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--success); } .button.is-success:active, .button.is-success.is-active { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success[disabled], fieldset[disabled] .button.is-success { background-color: var(--success); border-color: transparent; box-shadow: none; } .button.is-success.is-inverted { background-color: var(--success--color-invert); color: var(--success); } .button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { background-color: var(--success--color-invert); } .button.is-success.is-inverted[disabled], fieldset[disabled] .button.is-success.is-inverted { background-color: var(--success--color-invert); border-color: transparent; box-shadow: none; color: var(--success); } .button.is-success.is-loading::after { border-color: transparent transparent var(--success--color-invert) var(--success--color-invert) !important; } .button.is-success.is-outlined { background-color: transparent; border-color: var(--success); color: var(--success); } .button.is-success.is-outlined:hover, .button.is-success.is-outlined.is-hovered, .button.is-success.is-outlined:focus, .button.is-success.is-outlined.is-focused { background-color: var(--success); border-color: var(--success); color: var(--success--color-invert); } .button.is-success.is-outlined.is-loading::after { border-color: transparent transparent var(--success) var(--success) !important; } .button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--success--color-invert) var(--success--color-invert) !important; } .button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { background-color: transparent; border-color: var(--success); box-shadow: none; color: var(--success); } .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: var(--success--color-invert); color: var(--success--color-invert); } .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined.is-hovered, .button.is-success.is-inverted.is-outlined:focus, .button.is-success.is-inverted.is-outlined.is-focused { background-color: var(--success--color-invert); color: var(--success); } .button.is-success.is-inverted.is-outlined.is-loading:hover::after, .button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-success.is-inverted.is-outlined.is-loading:focus::after, .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--success) var(--success) !important; } .button.is-success.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: var(--success--color-invert); box-shadow: none; color: var(--success--color-invert); } .button.is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { background-color: var(--success--light-color); border-color: transparent; color: var(--success--dark-color); } .button.is-success.is-light:active, .button.is-success.is-light.is-active { background-color: var(--success--light-color); border-color: transparent; color: var(--success--dark-color); } .button.is-warning { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:hover, .button.is-warning.is-hovered { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--warning); } .button.is-warning:active, .button.is-warning.is-active { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning[disabled], fieldset[disabled] .button.is-warning { background-color: var(--warning); border-color: transparent; box-shadow: none; } .button.is-warning.is-inverted { background-color: var(--warning--color-invert); color: var(--warning); } .button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { background-color: var(--warning--color-invert); } .button.is-warning.is-inverted[disabled], fieldset[disabled] .button.is-warning.is-inverted { background-color: var(--warning--color-invert); border-color: transparent; box-shadow: none; color: var(--warning); } .button.is-warning.is-loading::after { border-color: transparent transparent var(--warning--color-invert) var(--warning--color-invert) !important; } .button.is-warning.is-outlined { background-color: transparent; border-color: var(--warning); color: var(--warning); } .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined.is-hovered, .button.is-warning.is-outlined:focus, .button.is-warning.is-outlined.is-focused { background-color: var(--warning); border-color: var(--warning); color: var(--warning--color-invert); } .button.is-warning.is-outlined.is-loading::after { border-color: transparent transparent var(--warning) var(--warning) !important; } .button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--warning--color-invert) var(--warning--color-invert) !important; } .button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { background-color: transparent; border-color: var(--warning); box-shadow: none; color: var(--warning); } .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: var(--warning--color-invert); color: var(--warning--color-invert); } .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined.is-hovered, .button.is-warning.is-inverted.is-outlined:focus, .button.is-warning.is-inverted.is-outlined.is-focused { background-color: var(--warning--color-invert); color: var(--warning); } .button.is-warning.is-inverted.is-outlined.is-loading:hover::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-inverted.is-outlined.is-loading:focus::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--warning) var(--warning) !important; } .button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: var(--warning--color-invert); box-shadow: none; color: var(--warning--color-invert); } .button.is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { background-color: var(--warning--light-color); border-color: transparent; color: var(--warning--dark-color); } .button.is-warning.is-light:active, .button.is-warning.is-light.is-active { background-color: var(--warning--light-color); border-color: transparent; color: var(--warning--dark-color); } .button.is-danger { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:hover, .button.is-danger.is-hovered { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--danger); } .button.is-danger:active, .button.is-danger.is-active { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger[disabled], fieldset[disabled] .button.is-danger { background-color: var(--danger); border-color: transparent; box-shadow: none; } .button.is-danger.is-inverted { background-color: var(--danger--color-invert); color: var(--danger); } .button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered { background-color: var(--danger--color-invert); } .button.is-danger.is-inverted[disabled], fieldset[disabled] .button.is-danger.is-inverted { background-color: var(--danger--color-invert); border-color: transparent; box-shadow: none; color: var(--danger); } .button.is-danger.is-loading::after { border-color: transparent transparent var(--danger--color-invert) var(--danger--color-invert) !important; } .button.is-danger.is-outlined { background-color: transparent; border-color: var(--danger); color: var(--danger); } .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused { background-color: var(--danger); border-color: var(--danger); color: var(--danger--color-invert); } .button.is-danger.is-outlined.is-loading::after { border-color: transparent transparent var(--danger) var(--danger) !important; } .button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--danger--color-invert) var(--danger--color-invert) !important; } .button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined { background-color: transparent; border-color: var(--danger); box-shadow: none; color: var(--danger); } .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: var(--danger--color-invert); color: var(--danger--color-invert); } .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused { background-color: var(--danger--color-invert); color: var(--danger); } .button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--danger) var(--danger) !important; } .button.is-danger.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: var(--danger--color-invert); box-shadow: none; color: var(--danger--color-invert); } .button.is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered { background-color: var(--danger--light-color); border-color: transparent; color: var(--danger--dark-color); } .button.is-danger.is-light:active, .button.is-danger.is-light.is-active { background-color: var(--danger--light-color); border-color: transparent; color: var(--danger--dark-color); } .button.is-small { font-size: 0.75rem; } .button.is-small:not(.is-rounded) { border-radius: var(--radius-small); } .button.is-normal { font-size: 1rem; } .button.is-medium { font-size: 1.25rem; } .button.is-large { font-size: 1.5rem; } .button[disabled], fieldset[disabled] .button { background-color: var(--white); border-color: var(--border); box-shadow: none; opacity: 0.5; } .button.is-fullwidth { display: flex; width: 100%; } .button.is-loading { color: transparent !important; pointer-events: none; } .button.is-loading::after { position: absolute; left: calc(50% - (1em * 0.5)); top: calc(50% - (1em * 0.5)); position: absolute !important; } .button.is-static { background-color: whitesmoke; border-color: var(--border); color: #7a7a7a; box-shadow: none; pointer-events: none; } .button.is-rounded { border-radius: var(--radius-rounded); padding-left: calc(1em + 0.25em); padding-right: calc(1em + 0.25em); } .buttons { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } .buttons .button { margin-bottom: 0.5rem; } .buttons .button:not(:last-child):not(.is-fullwidth) { margin-right: 0.5rem; } .buttons:last-child { margin-bottom: -0.5rem; } .buttons:not(:last-child) { margin-bottom: 1rem; } .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) { font-size: 0.75rem; } .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) { border-radius: var(--radius-small); } .buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) { font-size: 1.25rem; } .buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) { font-size: 1.5rem; } .buttons.has-addons .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } .buttons.has-addons .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -1px; } .buttons.has-addons .button:last-child { margin-right: 0; } .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { z-index: 2; } .buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected { z-index: 3; } .buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover { z-index: 4; } .buttons.has-addons .button.is-expanded { flex-grow: 1; flex-shrink: 1; } .buttons.is-centered { justify-content: center; } .buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } .buttons.is-right { justify-content: flex-end; } .buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } .container { flex-grow: 1; margin: 0 auto; position: relative; width: auto; } .container.is-fluid { max-width: none !important; padding-left: 32px; padding-right: 32px; width: 100%; } @media screen and (min-width: 1024px) { .container { max-width: 960px; } } @media screen and (max-width: 1215px) { .container.is-widescreen:not(.is-max-desktop) { max-width: 1152px; } } @media screen and (min-width: 1216px) { .container:not(.is-max-desktop) { max-width: 1152px; } } .content li + li { margin-top: 0.25em; } .content p:not(:last-child), .content dl:not(:last-child), .content ol:not(:last-child), .content ul:not(:last-child), .content blockquote:not(:last-child), .content pre:not(:last-child), .content table:not(:last-child) { margin-bottom: 1em; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #363636; font-weight: 600; line-height: 1.125; } .content h1 { font-size: 2em; margin-bottom: 0.5em; } .content h1:not(:first-child) { margin-top: 1em; } .content h2 { font-size: 1.75em; margin-bottom: 0.5714em; } .content h2:not(:first-child) { margin-top: 1.1428em; } .content h3 { font-size: 1.5em; margin-bottom: 0.6666em; } .content h3:not(:first-child) { margin-top: 1.3333em; } .content h4 { font-size: 1.25em; margin-bottom: 0.8em; } .content h5 { font-size: 1.125em; margin-bottom: 0.8888em; } .content h6 { font-size: 1em; margin-bottom: 1em; } .content blockquote { background-color: whitesmoke; border-left: 5px solid var(--border); padding: 1.25em 1.5em; } .content ol { list-style-position: outside; margin-left: 2em; margin-top: 1em; } .content ol:not([type]) { list-style-type: decimal; } .content ol:not([type]).is-lower-alpha { list-style-type: lower-alpha; } .content ol:not([type]).is-lower-roman { list-style-type: lower-roman; } .content ol:not([type]).is-upper-alpha { list-style-type: upper-alpha; } .content ol:not([type]).is-upper-roman { list-style-type: upper-roman; } .content ul { list-style: disc outside; margin-left: 2em; margin-top: 1em; } .content ul ul { list-style-type: circle; margin-top: 0.5em; } .content ul ul ul { list-style-type: square; } .content dd { margin-left: 2em; } .content figure { margin-left: 2em; margin-right: 2em; text-align: center; } .content figure:not(:first-child) { margin-top: 2em; } .content figure:not(:last-child) { margin-bottom: 2em; } .content figure img { display: inline-block; } .content figure figcaption { font-style: italic; } .content pre { -webkit-overflow-scrolling: touch; overflow-x: auto; padding: 1.25em 1.5em; white-space: pre; word-wrap: normal; } .content sup, .content sub { font-size: 75%; } .content table { width: 100%; } .content table td, .content table th { border: 1px solid var(--border); border-width: 0 0 1px; padding: 0.5em 0.75em; vertical-align: top; } .content table th { color: #363636; } .content table th:not([align]) { text-align: inherit; } .content table thead td, .content table thead th { border-width: 0 0 2px; color: #363636; } .content table tfoot td, .content table tfoot th { border-width: 2px 0 0; color: #363636; } .content table tbody tr:last-child td, .content table tbody tr:last-child th { border-bottom-width: 0; } .content .tabs li + li { margin-top: 0; } .content.is-small { font-size: 0.75rem; } .content.is-normal { font-size: 1rem; } .content.is-medium { font-size: 1.25rem; } .content.is-large { font-size: 1.5rem; } .icon { align-items: center; display: inline-flex; justify-content: center; height: 1.5rem; width: 1.5rem; } .icon.is-small { height: 1rem; width: 1rem; } .icon.is-medium { height: 2rem; width: 2rem; } .icon.is-large { height: 3rem; width: 3rem; } .icon-text { align-items: flex-start; color: inherit; display: inline-flex; flex-wrap: wrap; line-height: 1.5rem; vertical-align: top; } .icon-text .icon { flex-grow: 0; flex-shrink: 0; } .icon-text .icon:not(:last-child) { margin-right: 0.25em; } .icon-text .icon:not(:first-child) { margin-left: 0.25em; } div.icon-text { display: flex; } .image { display: block; position: relative; } .image img { display: block; height: auto; width: 100%; } .image img.is-rounded { border-radius: var(--radius-rounded); } .image.is-fullwidth { width: 100%; } .image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, .image.is-1by1 .has-ratio, .image.is-5by4 img, .image.is-5by4 .has-ratio, .image.is-4by3 img, .image.is-4by3 .has-ratio, .image.is-3by2 img, .image.is-3by2 .has-ratio, .image.is-5by3 img, .image.is-5by3 .has-ratio, .image.is-16by9 img, .image.is-16by9 .has-ratio, .image.is-2by1 img, .image.is-2by1 .has-ratio, .image.is-3by1 img, .image.is-3by1 .has-ratio, .image.is-4by5 img, .image.is-4by5 .has-ratio, .image.is-3by4 img, .image.is-3by4 .has-ratio, .image.is-2by3 img, .image.is-2by3 .has-ratio, .image.is-3by5 img, .image.is-3by5 .has-ratio, .image.is-9by16 img, .image.is-9by16 .has-ratio, .image.is-1by2 img, .image.is-1by2 .has-ratio, .image.is-1by3 img, .image.is-1by3 .has-ratio { height: 100%; width: 100%; } .image.is-square, .image.is-1by1 { padding-top: 100%; } .image.is-5by4 { padding-top: 80%; } .image.is-4by3 { padding-top: 75%; } .image.is-3by2 { padding-top: 66.6666%; } .image.is-5by3 { padding-top: 60%; } .image.is-16by9 { padding-top: 56.25%; } .image.is-2by1 { padding-top: 50%; } .image.is-3by1 { padding-top: 33.3333%; } .image.is-4by5 { padding-top: 125%; } .image.is-3by4 { padding-top: 133.3333%; } .image.is-2by3 { padding-top: 150%; } .image.is-3by5 { padding-top: 166.6666%; } .image.is-9by16 { padding-top: 177.7777%; } .image.is-1by2 { padding-top: 200%; } .image.is-1by3 { padding-top: 300%; } .image.is-16x16 { height: 16px; width: 16px; } .image.is-24x24 { height: 24px; width: 24px; } .image.is-32x32 { height: 32px; width: 32px; } .image.is-48x48 { height: 48px; width: 48px; } .image.is-64x64 { height: 64px; width: 64px; } .image.is-96x96 { height: 96px; width: 96px; } .image.is-128x128 { height: 128px; width: 128px; } .notification { background-color: whitesmoke; border-radius: var(--radius); position: relative; padding: 1.25rem 2.5rem 1.25rem 1.5rem; } .notification a:not(.button):not(.dropdown-item) { color: currentColor; text-decoration: underline; } .notification strong { color: currentColor; } .notification code, .notification pre { background: var(--white); } .notification pre code { background: transparent; } .notification > .delete { right: 0.5rem; position: absolute; top: 0.5rem; } .notification .title, .notification .subtitle, .notification .content { color: currentColor; } .notification.is-white { background-color: var(--white); color: #0a0a0a; } .notification.is-black { background-color: #0a0a0a; color: var(--white); } .notification.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .notification.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .notification.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .notification.is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .notification.is-link { background-color: var(--link); color: var(--link--color-invert); } .notification.is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .notification.is-info { background-color: var(--info); color: var(--info--color-invert); } .notification.is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .notification.is-success { background-color: var(--success); color: var(--success--color-invert); } .notification.is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .notification.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .notification.is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .notification.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .notification.is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .progress { -moz-appearance: none; -webkit-appearance: none; border: none; border-radius: var(--radius-rounded); display: block; height: 1rem; overflow: hidden; padding: 0; width: 100%; } .progress::-webkit-progress-bar { background-color: #ededed; } .progress::-webkit-progress-value { background-color: #4a4a4a; } .progress::-moz-progress-bar { background-color: #4a4a4a; } .progress::-ms-fill { background-color: #4a4a4a; border: none; } .progress.is-white::-webkit-progress-value { background-color: var(--white); } .progress.is-white::-moz-progress-bar { background-color: var(--white); } .progress.is-white::-ms-fill { background-color: var(--white); } .progress.is-white:indeterminate { background-image: linear-gradient(to right, var(--white) 30%, #ededed 30%); } .progress.is-black::-webkit-progress-value { background-color: #0a0a0a; } .progress.is-black::-moz-progress-bar { background-color: #0a0a0a; } .progress.is-black::-ms-fill { background-color: #0a0a0a; } .progress.is-black:indeterminate { background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%); } .progress.is-light::-webkit-progress-value { background-color: whitesmoke; } .progress.is-light::-moz-progress-bar { background-color: whitesmoke; } .progress.is-light::-ms-fill { background-color: whitesmoke; } .progress.is-light:indeterminate { background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%); } .progress.is-dark::-webkit-progress-value { background-color: var(--dark); } .progress.is-dark::-moz-progress-bar { background-color: var(--dark); } .progress.is-dark::-ms-fill { background-color: var(--dark); } .progress.is-dark:indeterminate { background-image: linear-gradient(to right, var(--dark) 30%, #ededed 30%); } .progress.is-primary::-webkit-progress-value { background-color: var(--primary); } .progress.is-primary::-moz-progress-bar { background-color: var(--primary); } .progress.is-primary::-ms-fill { background-color: var(--primary); } .progress.is-primary:indeterminate { background-image: linear-gradient(to right, var(--primary) 30%, #ededed 30%); } .progress.is-link::-webkit-progress-value { background-color: var(--link); } .progress.is-link::-moz-progress-bar { background-color: var(--link); } .progress.is-link::-ms-fill { background-color: var(--link); } .progress.is-link:indeterminate { background-image: linear-gradient(to right, var(--link) 30%, #ededed 30%); } .progress.is-info::-webkit-progress-value { background-color: var(--info); } .progress.is-info::-moz-progress-bar { background-color: var(--info); } .progress.is-info::-ms-fill { background-color: var(--info); } .progress.is-info:indeterminate { background-image: linear-gradient(to right, var(--info) 30%, #ededed 30%); } .progress.is-success::-webkit-progress-value { background-color: var(--success); } .progress.is-success::-moz-progress-bar { background-color: var(--success); } .progress.is-success::-ms-fill { background-color: var(--success); } .progress.is-success:indeterminate { background-image: linear-gradient(to right, var(--success) 30%, #ededed 30%); } .progress.is-warning::-webkit-progress-value { background-color: var(--warning); } .progress.is-warning::-moz-progress-bar { background-color: var(--warning); } .progress.is-warning::-ms-fill { background-color: var(--warning); } .progress.is-warning:indeterminate { background-image: linear-gradient(to right, var(--warning) 30%, #ededed 30%); } .progress.is-danger::-webkit-progress-value { background-color: var(--danger); } .progress.is-danger::-moz-progress-bar { background-color: var(--danger); } .progress.is-danger::-ms-fill { background-color: var(--danger); } .progress.is-danger:indeterminate { background-image: linear-gradient(to right, var(--danger) 30%, #ededed 30%); } .progress:indeterminate { animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: moveIndeterminate; animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; background-repeat: no-repeat; background-size: 150% 150%; } .progress:indeterminate::-webkit-progress-bar { background-color: transparent; } .progress:indeterminate::-moz-progress-bar { background-color: transparent; } .progress:indeterminate::-ms-fill { animation-name: none; } .progress.is-small { height: 0.75rem; } .progress.is-medium { height: 1.25rem; } .progress.is-large { height: 1.5rem; } @keyframes moveIndeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } } .table { background-color: var(--white); color: #363636; } .table td, .table th { border: 1px solid var(--border); border-width: 0 0 1px; padding: 0.5em 0.75em; vertical-align: top; } .table td.is-white, .table th.is-white { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .table td.is-black, .table th.is-black { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .table td.is-light, .table th.is-light { background-color: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .table td.is-dark, .table th.is-dark { background-color: var(--dark); border-color: var(--dark); color: var(--dark--color-invert); } .table td.is-primary, .table th.is-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .table td.is-link, .table th.is-link { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .table td.is-info, .table th.is-info { background-color: var(--info); border-color: var(--info); color: var(--info--color-invert); } .table td.is-success, .table th.is-success { background-color: var(--success); border-color: var(--success); color: var(--success--color-invert); } .table td.is-warning, .table th.is-warning { background-color: var(--warning); border-color: var(--warning); color: var(--warning--color-invert); } .table td.is-danger, .table th.is-danger { background-color: var(--danger); border-color: var(--danger); color: var(--danger--color-invert); } .table td.is-narrow, .table th.is-narrow { white-space: nowrap; width: 1%; } .table td.is-selected, .table th.is-selected { background-color: var(--primary); color: var(--primary--color-invert); } .table td.is-selected a, .table td.is-selected strong, .table th.is-selected a, .table th.is-selected strong { color: currentColor; } .table td.is-vcentered, .table th.is-vcentered { vertical-align: middle; } .table th { color: #363636; } .table th:not([align]) { text-align: inherit; } .table tr.is-selected { background-color: var(--primary); color: var(--primary--color-invert); } .table tr.is-selected a, .table tr.is-selected strong { color: currentColor; } .table tr.is-selected td, .table tr.is-selected th { border-color: var(--primary--color-invert); color: currentColor; } .table thead { background-color: transparent; } .table thead td, .table thead th { border-width: 0 0 2px; color: #363636; } .table tfoot { background-color: transparent; } .table tfoot td, .table tfoot th { border-width: 2px 0 0; color: #363636; } .table tbody { background-color: transparent; } .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom-width: 0; } .table.is-bordered td, .table.is-bordered th { border-width: 1px; } .table.is-bordered tr:last-child td, .table.is-bordered tr:last-child th { border-bottom-width: 1px; } .table.is-fullwidth { width: 100%; } .table.is-hoverable tbody tr:not(.is-selected):hover { background-color: #fafafa; } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { background-color: #fafafa; } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) { background-color: whitesmoke; } .table.is-narrow td, .table.is-narrow th { padding: 0.25em 0.5em; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: #fafafa; } .table-container { -webkit-overflow-scrolling: touch; overflow: auto; overflow-y: hidden; max-width: 100%; } .tags { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } .tags .tag { margin-bottom: 0.5rem; } .tags .tag:not(:last-child) { margin-right: 0.5rem; } .tags:last-child { margin-bottom: -0.5rem; } .tags:not(:last-child) { margin-bottom: 1rem; } .tags.are-medium .tag:not(.is-normal):not(.is-large) { font-size: 1rem; } .tags.are-large .tag:not(.is-normal):not(.is-medium) { font-size: 1.25rem; } .tags.is-centered { justify-content: center; } .tags.is-centered .tag { margin-right: 0.25rem; margin-left: 0.25rem; } .tags.is-right { justify-content: flex-end; } .tags.is-right .tag:not(:first-child) { margin-left: 0.5rem; } .tags.is-right .tag:not(:last-child) { margin-right: 0; } .tags.has-addons .tag { margin-right: 0; } .tags.has-addons .tag:not(:first-child) { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .tags.has-addons .tag:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tag:not(body) { align-items: center; background-color: whitesmoke; border-radius: var(--radius); color: #4a4a4a; display: inline-flex; font-size: 0.75rem; height: 2em; justify-content: center; line-height: 1.5; padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } .tag:not(body) .delete { margin-left: 0.25rem; margin-right: -0.375rem; } .tag:not(body).is-white { background-color: var(--white); color: #0a0a0a; } .tag:not(body).is-black { background-color: #0a0a0a; color: var(--white); } .tag:not(body).is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .tag:not(body).is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .tag:not(body).is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .tag:not(body).is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .tag:not(body).is-link { background-color: var(--link); color: var(--link--color-invert); } .tag:not(body).is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .tag:not(body).is-info { background-color: var(--info); color: var(--info--color-invert); } .tag:not(body).is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .tag:not(body).is-success { background-color: var(--success); color: var(--success--color-invert); } .tag:not(body).is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .tag:not(body).is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .tag:not(body).is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .tag:not(body).is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .tag:not(body).is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .tag:not(body).is-normal { font-size: 0.75rem; } .tag:not(body).is-medium { font-size: 1rem; } .tag:not(body).is-large { font-size: 1.25rem; } .tag:not(body) .icon:first-child:not(:last-child) { margin-left: -0.375em; margin-right: 0.1875em; } .tag:not(body) .icon:last-child:not(:first-child) { margin-left: 0.1875em; margin-right: -0.375em; } .tag:not(body) .icon:first-child:last-child { margin-left: -0.375em; margin-right: -0.375em; } .tag:not(body).is-delete { margin-left: 1px; padding: 0; position: relative; width: 2em; } .tag:not(body).is-delete::before, .tag:not(body).is-delete::after { background-color: currentColor; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } .tag:not(body).is-delete::before { height: 1px; width: 50%; } .tag:not(body).is-delete::after { height: 50%; width: 1px; } .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { background-color: #e8e8e8; } .tag:not(body).is-delete:active { background-color: #dbdbdb; } .tag:not(body).is-rounded { border-radius: var(--radius-rounded); } a.tag:hover { text-decoration: underline; } .title, .subtitle { word-break: break-word; } .title em, .title span, .subtitle em, .subtitle span { font-weight: inherit; } .title sub, .subtitle sub { font-size: 0.75em; } .title sup, .subtitle sup { font-size: 0.75em; } .title .tag, .subtitle .tag { vertical-align: middle; } .title { color: #363636; font-size: 2rem; font-weight: 600; line-height: 1.125; } .title strong { color: inherit; font-weight: inherit; } .title:not(.is-spaced) + .subtitle { margin-top: -1.25rem; } .title.is-1 { font-size: 3rem; } .title.is-2 { font-size: 2.5rem; } .title.is-3 { font-size: 2rem; } .title.is-4 { font-size: 1.5rem; } .title.is-5 { font-size: 1.25rem; } .title.is-6 { font-size: 1rem; } .title.is-7 { font-size: 0.75rem; } .subtitle { color: #4a4a4a; font-size: 1.25rem; font-weight: 400; line-height: 1.25; } .subtitle strong { color: #363636; font-weight: 600; } .subtitle:not(.is-spaced) + .title { margin-top: -1.25rem; } .subtitle.is-1 { font-size: 3rem; } .subtitle.is-2 { font-size: 2.5rem; } .subtitle.is-3 { font-size: 2rem; } .subtitle.is-4 { font-size: 1.5rem; } .subtitle.is-5 { font-size: 1.25rem; } .subtitle.is-6 { font-size: 1rem; } .subtitle.is-7 { font-size: 0.75rem; } .heading { display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; } .number { align-items: center; background-color: whitesmoke; border-radius: var(--radius-rounded); display: inline-flex; font-size: 1.25rem; height: 2em; justify-content: center; margin-right: 1.5rem; min-width: 2.5em; padding: 0.25rem 0.5rem; text-align: center; vertical-align: top; } /* Bulma Form */ .select select, .textarea, .input { background-color: var(--white); border-color: var(--border); border-radius: var(--radius); color: #363636; } .select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder { color: rgba(54, 54, 54, 0.3); } .select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder { color: rgba(54, 54, 54, 0.3); } .select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder { color: rgba(54, 54, 54, 0.3); } .select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder { color: rgba(54, 54, 54, 0.3); } .select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input { border-color: #b5b5b5; } .select select:focus, .textarea:focus, .input:focus, .select select.is-focused, .is-focused.textarea, .is-focused.input, .select select:active, .textarea:active, .input:active, .select select.is-active, .is-active.textarea, .is-active.input { border-color: var(--link); box-shadow: 0 0 0 0.125em var(--link); } .select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input { background-color: whitesmoke; border-color: whitesmoke; box-shadow: none; color: #7a7a7a; } .select select[disabled]::-moz-placeholder, [disabled].textarea::-moz-placeholder, [disabled].input::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder { color: rgba(122, 122, 122, 0.3); } .select select[disabled]::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder { color: rgba(122, 122, 122, 0.3); } .select select[disabled]:-moz-placeholder, [disabled].textarea:-moz-placeholder, [disabled].input:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder { color: rgba(122, 122, 122, 0.3); } .select select[disabled]:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder { color: rgba(122, 122, 122, 0.3); } .textarea, .input { box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); max-width: 100%; width: 100%; } [readonly].textarea, [readonly].input { box-shadow: none; } .is-white.textarea, .is-white.input { border-color: var(--white); } .is-white.textarea:focus, .is-white.input:focus, .is-white.is-focused.textarea, .is-white.is-focused.input, .is-white.textarea:active, .is-white.input:active, .is-white.is-active.textarea, .is-white.is-active.input { box-shadow: 0 0 0 0.125em var(--white); } .is-black.textarea, .is-black.input { border-color: #0a0a0a; } .is-black.textarea:focus, .is-black.input:focus, .is-black.is-focused.textarea, .is-black.is-focused.input, .is-black.textarea:active, .is-black.input:active, .is-black.is-active.textarea, .is-black.is-active.input { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .is-light.textarea, .is-light.input { border-color: whitesmoke; } .is-light.textarea:focus, .is-light.input:focus, .is-light.is-focused.textarea, .is-light.is-focused.input, .is-light.textarea:active, .is-light.input:active, .is-light.is-active.textarea, .is-light.is-active.input { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .is-dark.textarea, .is-dark.input { border-color: var(--dark); } .is-dark.textarea:focus, .is-dark.input:focus, .is-dark.is-focused.textarea, .is-dark.is-focused.input, .is-dark.textarea:active, .is-dark.input:active, .is-dark.is-active.textarea, .is-dark.is-active.input { box-shadow: 0 0 0 0.125em var(--dark); } .is-primary.textarea, .is-primary.input { border-color: var(--primary); } .is-primary.textarea:focus, .is-primary.input:focus, .is-primary.is-focused.textarea, .is-primary.is-focused.input, .is-primary.textarea:active, .is-primary.input:active, .is-primary.is-active.textarea, .is-primary.is-active.input { box-shadow: 0 0 0 0.125em var(--primary); } .is-link.textarea, .is-link.input { border-color: var(--link); } .is-link.textarea:focus, .is-link.input:focus, .is-link.is-focused.textarea, .is-link.is-focused.input, .is-link.textarea:active, .is-link.input:active, .is-link.is-active.textarea, .is-link.is-active.input { box-shadow: 0 0 0 0.125em var(--link); } .is-info.textarea, .is-info.input { border-color: var(--info); } .is-info.textarea:focus, .is-info.input:focus, .is-info.is-focused.textarea, .is-info.is-focused.input, .is-info.textarea:active, .is-info.input:active, .is-info.is-active.textarea, .is-info.is-active.input { box-shadow: 0 0 0 0.125em var(--info); } .is-success.textarea, .is-success.input { border-color: var(--success); } .is-success.textarea:focus, .is-success.input:focus, .is-success.is-focused.textarea, .is-success.is-focused.input, .is-success.textarea:active, .is-success.input:active, .is-success.is-active.textarea, .is-success.is-active.input { box-shadow: 0 0 0 0.125em var(--success); } .is-warning.textarea, .is-warning.input { border-color: var(--warning); } .is-warning.textarea:focus, .is-warning.input:focus, .is-warning.is-focused.textarea, .is-warning.is-focused.input, .is-warning.textarea:active, .is-warning.input:active, .is-warning.is-active.textarea, .is-warning.is-active.input { box-shadow: 0 0 0 0.125em var(--warning); } .is-danger.textarea, .is-danger.input { border-color: var(--danger); } .is-danger.textarea:focus, .is-danger.input:focus, .is-danger.is-focused.textarea, .is-danger.is-focused.input, .is-danger.textarea:active, .is-danger.input:active, .is-danger.is-active.textarea, .is-danger.is-active.input { box-shadow: 0 0 0 0.125em var(--danger); } .is-small.textarea, .is-small.input { border-radius: var(--radius-small); font-size: 0.75rem; } .is-medium.textarea, .is-medium.input { font-size: 1.25rem; } .is-large.textarea, .is-large.input { font-size: 1.5rem; } .is-fullwidth.textarea, .is-fullwidth.input { display: block; width: 100%; } .is-inline.textarea, .is-inline.input { display: inline; width: auto; } .input.is-rounded { border-radius: var(--radius-rounded); padding-left: calc(calc(0.75em - 1px) + 0.375em); padding-right: calc(calc(0.75em - 1px) + 0.375em); } .input.is-static { background-color: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } .textarea { display: block; max-width: 100%; min-width: 100%; padding: calc(0.75em - 1px); resize: vertical; } .textarea:not([rows]) { max-height: 40em; min-height: 8em; } .textarea[rows] { height: initial; } .textarea.has-fixed-size { resize: none; } .radio, .checkbox { cursor: pointer; display: inline-block; line-height: 1.25; position: relative; } .radio input, .checkbox input { cursor: pointer; } .radio:hover, .checkbox:hover { color: #363636; } [disabled].radio, [disabled].checkbox, fieldset[disabled] .radio, fieldset[disabled] .checkbox, .radio input[disabled], .checkbox input[disabled] { color: #7a7a7a; cursor: not-allowed; } .radio + .radio { margin-left: 0.5em; } .select { display: inline-block; max-width: 100%; position: relative; vertical-align: top; } .select:not(.is-multiple) { height: 2.5em; } .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--link); right: 1.125em; z-index: 4; } .select.is-rounded select { border-radius: var(--radius-rounded); padding-left: 1em; } .select select { cursor: pointer; display: block; font-size: 1em; max-width: 100%; outline: none; } .select select::-ms-expand { display: none; } .select select[disabled]:hover, fieldset[disabled] .select select:hover { border-color: whitesmoke; } .select select:not([multiple]) { padding-right: 2.5em; } .select select[multiple] { height: auto; padding: 0; } .select select[multiple] option { padding: 0.5em 1em; } .select:not(.is-multiple):not(.is-loading):hover::after { border-color: #363636; } .select.is-white:not(:hover)::after { border-color: var(--white); } .select.is-white select { border-color: var(--white); } .select.is-white select:hover, .select.is-white select.is-hovered { border-color: var(--white); } .select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { box-shadow: 0 0 0 0.125em var(--white); } .select.is-black:not(:hover)::after { border-color: #0a0a0a; } .select.is-black select { border-color: #0a0a0a; } .select.is-black select:hover, .select.is-black select.is-hovered { border-color: black; } .select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .select.is-light:not(:hover)::after { border-color: whitesmoke; } .select.is-light select { border-color: whitesmoke; } .select.is-light select:hover, .select.is-light select.is-hovered { border-color: #e8e8e8; } .select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .select.is-dark:not(:hover)::after { border-color: var(--dark); } .select.is-dark select { border-color: var(--dark); } .select.is-dark select:hover, .select.is-dark select.is-hovered { border-color: var(--dark); } .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { box-shadow: 0 0 0 0.125em var(--dark); } .select.is-primary:not(:hover)::after { border-color: var(--primary); } .select.is-primary select { border-color: var(--primary); } .select.is-primary select:hover, .select.is-primary select.is-hovered { border-color: var(--primary); } .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { box-shadow: 0 0 0 0.125em var(--primary); } .select.is-link:not(:hover)::after { border-color: var(--link); } .select.is-link select { border-color: var(--link); } .select.is-link select:hover, .select.is-link select.is-hovered { border-color: var(--link); } .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { box-shadow: 0 0 0 0.125em var(--link); } .select.is-info:not(:hover)::after { border-color: var(--info); } .select.is-info select { border-color: var(--info); } .select.is-info select:hover, .select.is-info select.is-hovered { border-color: var(--info); } .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { box-shadow: 0 0 0 0.125em var(--info); } .select.is-success:not(:hover)::after { border-color: var(--success); } .select.is-success select { border-color: var(--success); } .select.is-success select:hover, .select.is-success select.is-hovered { border-color: var(--success); } .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { box-shadow: 0 0 0 0.125em var(--success); } .select.is-warning:not(:hover)::after { border-color: var(--warning); } .select.is-warning select { border-color: var(--warning); } .select.is-warning select:hover, .select.is-warning select.is-hovered { border-color: var(--warning); } .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { box-shadow: 0 0 0 0.125em var(--warning); } .select.is-danger:not(:hover)::after { border-color: var(--danger); } .select.is-danger select { border-color: var(--danger); } .select.is-danger select:hover, .select.is-danger select.is-hovered { border-color: var(--danger); } .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { box-shadow: 0 0 0 0.125em var(--danger); } .select.is-small { border-radius: var(--radius-small); font-size: 0.75rem; } .select.is-medium { font-size: 1.25rem; } .select.is-large { font-size: 1.5rem; } .select.is-disabled::after { border-color: #7a7a7a; } .select.is-fullwidth { width: 100%; } .select.is-fullwidth select { width: 100%; } .select.is-loading::after { margin-top: 0; position: absolute; right: 0.625em; top: 0.625em; transform: none; } .select.is-loading.is-small:after { font-size: 0.75rem; } .select.is-loading.is-medium:after { font-size: 1.25rem; } .select.is-loading.is-large:after { font-size: 1.5rem; } .file { align-items: stretch; display: flex; justify-content: flex-start; position: relative; } .file.is-white .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--white); color: #0a0a0a; } .file.is-white:active .file-cta, .file.is-white.is-active .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-black .file-cta { background-color: #0a0a0a; border-color: transparent; color: var(--white); } .file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta { background-color: #040404; border-color: transparent; color: var(--white); } .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); color: var(--white); } .file.is-black:active .file-cta, .file.is-black.is-active .file-cta { background-color: black; border-color: transparent; color: var(--white); } .file.is-light .file-cta { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta { background-color: #eeeeee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); color: rgba(0, 0, 0, 0.7); } .file.is-light:active .file-cta, .file.is-light.is-active .file-cta { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-dark .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--dark); color: var(--dark--color-invert); } .file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-primary .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--primary); color: var(--primary--color-invert); } .file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-link .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--link); color: var(--link--color-invert); } .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-info .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--info); color: var(--info--color-invert); } .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-success .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--success); color: var(--success--color-invert); } .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-warning .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--warning); color: var(--warning--color-invert); } .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-danger .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--danger); color: var(--danger--color-invert); } .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-small { font-size: 0.75rem; } .file.is-normal { font-size: 1rem; } .file.is-medium { font-size: 1.25rem; } .file.is-medium .file-icon .fa { font-size: 21px; } .file.is-large { font-size: 1.5rem; } .file.is-large .file-icon .fa { font-size: 28px; } .file.has-name .file-cta { border-bottom-right-radius: 0; border-top-right-radius: 0; } .file.has-name .file-name { border-bottom-left-radius: 0; border-top-left-radius: 0; } .file.has-name.is-empty .file-cta { border-radius: var(--radius); } .file.has-name.is-empty .file-name { display: none; } .file.is-boxed .file-label { flex-direction: column; } .file.is-boxed .file-cta { flex-direction: column; height: auto; padding: 1em 3em; } .file.is-boxed .file-name { border-width: 0 1px 1px; } .file.is-boxed .file-icon { height: 1.5em; width: 1.5em; } .file.is-boxed .file-icon .fa { font-size: 21px; } .file.is-boxed.is-small .file-icon .fa { font-size: 14px; } .file.is-boxed.is-medium .file-icon .fa { font-size: 28px; } .file.is-boxed.is-large .file-icon .fa { font-size: 35px; } .file.is-boxed.has-name .file-cta { border-radius: var(--radius) var(--radius) 0 0; } .file.is-boxed.has-name .file-name { border-radius: 0 0 var(--radius) var(--radius); border-width: 0 1px 1px; } .file.is-centered { justify-content: center; } .file.is-fullwidth .file-label { width: 100%; } .file.is-fullwidth .file-name { flex-grow: 1; max-width: none; } .file.is-right { justify-content: flex-end; } .file.is-right .file-cta { border-radius: 0 var(--radius) var(--radius) 0; } .file.is-right .file-name { border-radius: var(--radius) 0 0 var(--radius); border-width: 1px 0 1px 1px; order: -1; } .file-label { align-items: stretch; display: flex; cursor: pointer; justify-content: flex-start; overflow: hidden; position: relative; } .file-label:hover .file-cta { background-color: #eeeeee; color: #363636; } .file-label:hover .file-name { border-color: var(--border); } .file-label:active .file-cta { background-color: #e8e8e8; color: #363636; } .file-label:active .file-name { border-color: var(--border); } .file-input { height: 100%; left: 0; opacity: 0; outline: none; position: absolute; top: 0; width: 100%; } .file-cta, .file-name { border-color: var(--border); border-radius: var(--radius); font-size: 1em; padding-left: 1em; padding-right: 1em; white-space: nowrap; } .file-cta { background-color: whitesmoke; color: #4a4a4a; } .file-name { border-color: var(--border); border-style: solid; border-width: 1px 1px 1px 0; display: block; max-width: 16em; overflow: hidden; text-align: inherit; text-overflow: ellipsis; } .file-icon { align-items: center; display: flex; height: 1em; justify-content: center; margin-right: 0.5em; width: 1em; } .file-icon .fa { font-size: 14px; } .label { color: #363636; display: block; font-size: 1rem; font-weight: 700; } .label:not(:last-child) { margin-bottom: 0.5em; } .label.is-small { font-size: 0.75rem; } .label.is-medium { font-size: 1.25rem; } .label.is-large { font-size: 1.5rem; } .help { display: block; font-size: 0.75rem; margin-top: 0.25rem; } .help.is-white { color: var(--white); } .help.is-black { color: #0a0a0a; } .help.is-light { color: whitesmoke; } .help.is-dark { color: var(--dark); } .help.is-primary { color: var(--primary); } .help.is-link { color: var(--link); } .help.is-info { color: var(--info); } .help.is-success { color: var(--success); } .help.is-warning { color: var(--warning); } .help.is-danger { color: var(--danger); } .field:not(:last-child) { margin-bottom: 0.75rem; } .field.has-addons { display: flex; justify-content: flex-start; } .field.has-addons .control:not(:last-child) { margin-right: -1px; } .field.has-addons .control:not(:first-child):not(:last-child) .button, .field.has-addons .control:not(:first-child):not(:last-child) .input, .field.has-addons .control:not(:first-child):not(:last-child) .select select { border-radius: 0; } .field.has-addons .control:first-child:not(:only-child) .button, .field.has-addons .control:first-child:not(:only-child) .input, .field.has-addons .control:first-child:not(:only-child) .select select { border-bottom-right-radius: 0; border-top-right-radius: 0; } .field.has-addons .control:last-child:not(:only-child) .button, .field.has-addons .control:last-child:not(:only-child) .input, .field.has-addons .control:last-child:not(:only-child) .select select { border-bottom-left-radius: 0; border-top-left-radius: 0; } .field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered, .field.has-addons .control .input:not([disabled]):hover, .field.has-addons .control .input:not([disabled]).is-hovered, .field.has-addons .control .select select:not([disabled]):hover, .field.has-addons .control .select select:not([disabled]).is-hovered { z-index: 2; } .field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active, .field.has-addons .control .input:not([disabled]):focus, .field.has-addons .control .input:not([disabled]).is-focused, .field.has-addons .control .input:not([disabled]):active, .field.has-addons .control .input:not([disabled]).is-active, .field.has-addons .control .select select:not([disabled]):focus, .field.has-addons .control .select select:not([disabled]).is-focused, .field.has-addons .control .select select:not([disabled]):active, .field.has-addons .control .select select:not([disabled]).is-active { z-index: 3; } .field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover, .field.has-addons .control .input:not([disabled]):focus:hover, .field.has-addons .control .input:not([disabled]).is-focused:hover, .field.has-addons .control .input:not([disabled]):active:hover, .field.has-addons .control .input:not([disabled]).is-active:hover, .field.has-addons .control .select select:not([disabled]):focus:hover, .field.has-addons .control .select select:not([disabled]).is-focused:hover, .field.has-addons .control .select select:not([disabled]):active:hover, .field.has-addons .control .select select:not([disabled]).is-active:hover { z-index: 4; } .field.has-addons .control.is-expanded { flex-grow: 1; flex-shrink: 1; } .field.has-addons.has-addons-centered { justify-content: center; } .field.has-addons.has-addons-right { justify-content: flex-end; } .field.has-addons.has-addons-fullwidth .control { flex-grow: 1; flex-shrink: 0; } .field.is-grouped { display: flex; justify-content: flex-start; } .field.is-grouped > .control { flex-shrink: 0; } .field.is-grouped > .control:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } .field.is-grouped > .control.is-expanded { flex-grow: 1; flex-shrink: 1; } .field.is-grouped.is-grouped-centered { justify-content: center; } .field.is-grouped.is-grouped-right { justify-content: flex-end; } .field.is-grouped.is-grouped-multiline { flex-wrap: wrap; } .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { margin-bottom: 0.75rem; } .field.is-grouped.is-grouped-multiline:last-child { margin-bottom: -0.75rem; } .field.is-grouped.is-grouped-multiline:not(:last-child) { margin-bottom: 0; } @media screen and (min-width: 769px), print { .field.is-horizontal { display: flex; } } .field-label .label { font-size: inherit; } @media screen and (max-width: 768px) { .field-label { margin-bottom: 0.5rem; } } @media screen and (min-width: 769px), print { .field-label { flex-basis: 0; flex-grow: 1; flex-shrink: 0; margin-right: 1.5rem; text-align: right; } .field-label.is-small { font-size: 0.75rem; padding-top: 0.375em; } .field-label.is-normal { padding-top: 0.375em; } .field-label.is-medium { font-size: 1.25rem; padding-top: 0.375em; } .field-label.is-large { font-size: 1.5rem; padding-top: 0.375em; } } .field-body .field .field { margin-bottom: 0; } @media screen and (min-width: 769px), print { .field-body { display: flex; flex-basis: 0; flex-grow: 5; flex-shrink: 1; } .field-body .field { margin-bottom: 0; } .field-body > .field { flex-shrink: 1; } .field-body > .field:not(.is-narrow) { flex-grow: 1; } .field-body > .field:not(:last-child) { margin-right: 0.75rem; } } .control { box-sizing: border-box; clear: both; font-size: 1rem; position: relative; text-align: inherit; } .control.has-icons-left .input:focus ~ .icon, .control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, .control.has-icons-right .select:focus ~ .icon { color: #4a4a4a; } .control.has-icons-left .input.is-small ~ .icon, .control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, .control.has-icons-right .select.is-small ~ .icon { font-size: 0.75rem; } .control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, .control.has-icons-right .select.is-medium ~ .icon { font-size: 1.25rem; } .control.has-icons-left .input.is-large ~ .icon, .control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, .control.has-icons-right .select.is-large ~ .icon { font-size: 1.5rem; } .control.has-icons-left .icon, .control.has-icons-right .icon { color: var(--border); height: 2.5em; pointer-events: none; position: absolute; top: 0; width: 2.5em; z-index: 4; } .control.has-icons-left .input, .control.has-icons-left .select select { padding-left: 2.5em; } .control.has-icons-left .icon.is-left { left: 0; } .control.has-icons-right .input, .control.has-icons-right .select select { padding-right: 2.5em; } .control.has-icons-right .icon.is-right { right: 0; } .control.is-loading::after { position: absolute !important; right: 0.625em; top: 0.625em; z-index: 4; } .control.is-loading.is-small:after { font-size: 0.75rem; } .control.is-loading.is-medium:after { font-size: 1.25rem; } .control.is-loading.is-large:after { font-size: 1.5rem; } /* Bulma Components */ .breadcrumb { font-size: 1rem; white-space: nowrap; } .breadcrumb a { align-items: center; color: var(--link); display: flex; justify-content: center; padding: 0 0.75em; } .breadcrumb a:hover { color: #363636; } .breadcrumb li { align-items: center; display: flex; } .breadcrumb li:first-child a { padding-left: 0; } .breadcrumb li.is-active a { color: #363636; cursor: default; pointer-events: none; } .breadcrumb li + li::before { color: #b5b5b5; content: "/"; } .breadcrumb ul, .breadcrumb ol { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; } .breadcrumb .icon:first-child { margin-right: 0.5em; } .breadcrumb .icon:last-child { margin-left: 0.5em; } .breadcrumb.is-centered ol, .breadcrumb.is-centered ul { justify-content: center; } .breadcrumb.is-right ol, .breadcrumb.is-right ul { justify-content: flex-end; } .breadcrumb.is-small { font-size: 0.75rem; } .breadcrumb.is-medium { font-size: 1.25rem; } .breadcrumb.is-large { font-size: 1.5rem; } .breadcrumb.has-arrow-separator li + li::before { content: "→"; } .breadcrumb.has-bullet-separator li + li::before { content: "•"; } .breadcrumb.has-dot-separator li + li::before { content: "·"; } .breadcrumb.has-succeeds-separator li + li::before { content: "≻"; } .card { background-color: var(--white); border-radius: 0.25rem; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; max-width: 100%; position: relative; } .card-footer:first-child, .card-content:first-child, .card-header:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .card-footer:last-child, .card-content:last-child, .card-header:last-child { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .card-header { background-color: transparent; align-items: stretch; box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); display: flex; } .card-header-title { align-items: center; color: #363636; display: flex; flex-grow: 1; font-weight: 700; padding: 0.75rem 1rem; } .card-header-title.is-centered { justify-content: center; } .card-header-icon { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; border: none; color: currentColor; font-family: inherit; font-size: 1em; margin: 0; padding: 0; align-items: center; cursor: pointer; display: flex; justify-content: center; padding: 0.75rem 1rem; } .card-image { display: block; position: relative; } .card-image:first-child img { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .card-image:last-child img { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .card-content { background-color: transparent; padding: 1.5rem; } .card-footer { background-color: transparent; border-top: 1px solid #ededed; align-items: stretch; display: flex; } .card-footer-item { align-items: center; display: flex; flex-basis: 0; flex-grow: 1; flex-shrink: 0; justify-content: center; padding: 0.75rem; } .card-footer-item:not(:last-child) { border-right: 1px solid #ededed; } .card .media:not(:last-child) { margin-bottom: 1.5rem; } .dropdown { display: inline-flex; position: relative; vertical-align: top; } .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { display: block; } .dropdown.is-right .dropdown-menu { left: auto; right: 0; } .dropdown.is-up .dropdown-menu { bottom: 100%; padding-bottom: 4px; padding-top: initial; top: auto; } .dropdown-menu { display: none; left: 0; min-width: 12rem; padding-top: 4px; position: absolute; top: 100%; z-index: 20; } .dropdown-content { background-color: var(--white); border-radius: var(--radius); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); padding-bottom: 0.5rem; padding-top: 0.5rem; } .dropdown-item { color: #4a4a4a; display: block; font-size: 0.875rem; line-height: 1.5; padding: 0.375rem 1rem; position: relative; } a.dropdown-item, button.dropdown-item { padding-right: 3rem; text-align: inherit; white-space: nowrap; width: 100%; } a.dropdown-item:hover, button.dropdown-item:hover { background-color: whitesmoke; color: #0a0a0a; } a.dropdown-item.is-active, button.dropdown-item.is-active { background-color: var(--link); color: var(--link--color-invert); } .dropdown-divider { background-color: #ededed; border: none; display: block; height: 1px; margin: 0.5rem 0; } .level { align-items: center; justify-content: space-between; } .level code { border-radius: var(--radius); } .level img { display: inline-block; vertical-align: top; } .level.is-mobile { display: flex; } .level.is-mobile .level-left, .level.is-mobile .level-right { display: flex; } .level.is-mobile .level-left + .level-right { margin-top: 0; } .level.is-mobile .level-item:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } .level.is-mobile .level-item:not(.is-narrow) { flex-grow: 1; } @media screen and (min-width: 769px), print { .level { display: flex; } .level > .level-item:not(.is-narrow) { flex-grow: 1; } } .level-item { align-items: center; display: flex; flex-basis: auto; flex-grow: 0; flex-shrink: 0; justify-content: center; } .level-item .title, .level-item .subtitle { margin-bottom: 0; } @media screen and (max-width: 768px) { .level-item:not(:last-child) { margin-bottom: 0.75rem; } } .level-left, .level-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } .level-left .level-item.is-flexible, .level-right .level-item.is-flexible { flex-grow: 1; } @media screen and (min-width: 769px), print { .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { margin-right: 0.75rem; } } .level-left { align-items: center; justify-content: flex-start; } @media screen and (max-width: 768px) { .level-left + .level-right { margin-top: 1.5rem; } } @media screen and (min-width: 769px), print { .level-left { display: flex; } } .level-right { align-items: center; justify-content: flex-end; } @media screen and (min-width: 769px), print { .level-right { display: flex; } } .media { align-items: flex-start; display: flex; text-align: inherit; } .media .content:not(:last-child) { margin-bottom: 0.75rem; } .media .media { border-top: 1px solid var(--border); display: flex; padding-top: 0.75rem; } .media .media .content:not(:last-child), .media .media .control:not(:last-child) { margin-bottom: 0.5rem; } .media .media .media { padding-top: 0.5rem; } .media .media .media + .media { margin-top: 0.5rem; } .media + .media { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; } .media.is-large + .media { margin-top: 1.5rem; padding-top: 1.5rem; } .media-left, .media-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } .media-left { margin-right: 1rem; } .media-right { margin-left: 1rem; } .media-content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; text-align: inherit; } @media screen and (max-width: 768px) { .media-content { overflow-x: auto; } } .menu { font-size: 1rem; } .menu.is-small { font-size: 0.75rem; } .menu.is-medium { font-size: 1.25rem; } .menu.is-large { font-size: 1.5rem; } .menu-list { line-height: 1.25; } .menu-list a { border-radius: var(--radius-small); color: #4a4a4a; display: block; padding: 0.5em 0.75em; } .menu-list a:hover { background-color: whitesmoke; color: #363636; } .menu-list a.is-active { background-color: var(--link); color: var(--link--color-invert); } .menu-list li ul { border-left: 1px solid var(--border); margin: 0.75em; padding-left: 0.75em; } .menu-label { color: #7a7a7a; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; } .menu-label:not(:first-child) { margin-top: 1em; } .menu-label:not(:last-child) { margin-bottom: 1em; } .message { background-color: whitesmoke; border-radius: var(--radius); font-size: 1rem; } .message strong { color: currentColor; } .message a:not(.button):not(.tag):not(.dropdown-item) { color: currentColor; text-decoration: underline; } .message.is-small { font-size: 0.75rem; } .message.is-medium { font-size: 1.25rem; } .message.is-large { font-size: 1.5rem; } .message.is-white { background-color: var(--white--800--lighten); } .message.is-white .message-header { background-color: var(--white); color: #0a0a0a; } .message.is-white .message-body { border-color: var(--white); } .message.is-black { background-color: #fafafa; } .message.is-black .message-header { background-color: #0a0a0a; color: var(--white); } .message.is-black .message-body { border-color: #0a0a0a; } .message.is-light { background-color: #fafafa; } .message.is-light .message-header { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .message.is-light .message-body { border-color: whitesmoke; } .message.is-dark { background-color: var(--dark--800--lighten); } .message.is-dark .message-header { background-color: var(--dark); color: var(--dark--color-invert); } .message.is-dark .message-body { border-color: var(--dark); } .message.is-primary { background-color: var(--primary--light-color); } .message.is-primary .message-header { background-color: var(--primary); color: var(--primary--color-invert); } .message.is-primary .message-body { border-color: var(--primary); color: var(--primary--dark-color); } .message.is-link { background-color: var(--link--light-color); } .message.is-link .message-header { background-color: var(--link); color: var(--link--color-invert); } .message.is-link .message-body { border-color: var(--link); color: var(--link--dark-color); } .message.is-info { background-color: var(--info--light-color); } .message.is-info .message-header { background-color: var(--info); color: var(--info--color-invert); } .message.is-info .message-body { border-color: var(--info); color: var(--info--dark-color); } .message.is-success { background-color: var(--success--light-color); } .message.is-success .message-header { background-color: var(--success); color: var(--success--color-invert); } .message.is-success .message-body { border-color: var(--success); color: var(--success--dark-color); } .message.is-warning { background-color: var(--warning--light-color); } .message.is-warning .message-header { background-color: var(--warning); color: var(--warning--color-invert); } .message.is-warning .message-body { border-color: var(--warning); color: var(--warning--dark-color); } .message.is-danger { background-color: var(--danger--light-color); } .message.is-danger .message-header { background-color: var(--danger); color: var(--danger--color-invert); } .message.is-danger .message-body { border-color: var(--danger); color: var(--danger--dark-color); } .message-header { align-items: center; background-color: #4a4a4a; border-radius: var(--radius) var(--radius) 0 0; color: #fff; display: flex; font-weight: 700; justify-content: space-between; line-height: 1.25; padding: 0.75em 1em; position: relative; } .message-header .delete { flex-grow: 0; flex-shrink: 0; margin-left: 0.75em; } .message-header + .message-body { border-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .message-body { border-color: var(--border); border-radius: var(--radius); border-style: solid; border-width: 0 0 0 4px; color: #4a4a4a; padding: 1.25em 1.5em; } .message-body code, .message-body pre { background-color: var(--white); } .message-body pre code { background-color: transparent; } .modal { align-items: center; display: none; flex-direction: column; justify-content: center; overflow: hidden; position: fixed; z-index: 40; } .modal.is-active { display: flex; } .modal-background { background-color: rgba(10, 10, 10, 0.86); } .modal-content, .modal-card { margin: 0 20px; max-height: calc(100vh - 160px); overflow: auto; position: relative; width: 100%; } @media screen and (min-width: 769px) { .modal-content, .modal-card { margin: 0 auto; max-height: calc(100vh - 40px); width: 640px; } } .modal-close { background: none; height: 40px; position: fixed; right: 20px; top: 20px; width: 40px; } .modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; -ms-overflow-y: visible; } .modal-card-head, .modal-card-foot { align-items: center; background-color: whitesmoke; display: flex; flex-shrink: 0; justify-content: flex-start; padding: 20px; position: relative; } .modal-card-head { border-bottom: 1px solid var(--border); border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large); } .modal-card-title { color: #363636; flex-grow: 1; flex-shrink: 0; font-size: 1.5rem; line-height: 1; } .modal-card-foot { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); border-top: 1px solid var(--border); } .modal-card-foot .button:not(:last-child) { margin-right: 0.5em; } .modal-card-body { -webkit-overflow-scrolling: touch; background-color: var(--white); flex-grow: 1; flex-shrink: 1; overflow: auto; padding: 20px; } .navbar { background-color: var(--white); min-height: 3.25rem; position: relative; z-index: 30; } .navbar.is-white { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-brand > .navbar-item, .navbar.is-white .navbar-brand .navbar-link { color: #0a0a0a; } .navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, .navbar.is-white .navbar-brand .navbar-link:focus, .navbar.is-white .navbar-brand .navbar-link:hover, .navbar.is-white .navbar-brand .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-brand .navbar-link::after { border-color: #0a0a0a; } .navbar.is-white .navbar-burger { color: #0a0a0a; } @media screen and (min-width: 1024px) { .navbar.is-white .navbar-start > .navbar-item, .navbar.is-white .navbar-start .navbar-link, .navbar.is-white .navbar-end > .navbar-item, .navbar.is-white .navbar-end .navbar-link { color: #0a0a0a; } .navbar.is-white .navbar-start > a.navbar-item:focus, .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, .navbar.is-white .navbar-start .navbar-link:focus, .navbar.is-white .navbar-start .navbar-link:hover, .navbar.is-white .navbar-start .navbar-link.is-active, .navbar.is-white .navbar-end > a.navbar-item:focus, .navbar.is-white .navbar-end > a.navbar-item:hover, .navbar.is-white .navbar-end > a.navbar-item.is-active, .navbar.is-white .navbar-end .navbar-link:focus, .navbar.is-white .navbar-end .navbar-link:hover, .navbar.is-white .navbar-end .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-start .navbar-link::after, .navbar.is-white .navbar-end .navbar-link::after { border-color: #0a0a0a; } .navbar.is-white .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-dropdown a.navbar-item.is-active { background-color: var(--white); color: #0a0a0a; } } .navbar.is-black { background-color: #0a0a0a; color: var(--white); } .navbar.is-black .navbar-brand > .navbar-item, .navbar.is-black .navbar-brand .navbar-link { color: var(--white); } .navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, .navbar.is-black .navbar-brand .navbar-link:focus, .navbar.is-black .navbar-brand .navbar-link:hover, .navbar.is-black .navbar-brand .navbar-link.is-active { background-color: black; color: var(--white); } .navbar.is-black .navbar-brand .navbar-link::after { border-color: var(--white); } .navbar.is-black .navbar-burger { color: var(--white); } @media screen and (min-width: 1024px) { .navbar.is-black .navbar-start > .navbar-item, .navbar.is-black .navbar-start .navbar-link, .navbar.is-black .navbar-end > .navbar-item, .navbar.is-black .navbar-end .navbar-link { color: var(--white); } .navbar.is-black .navbar-start > a.navbar-item:focus, .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, .navbar.is-black .navbar-start .navbar-link:focus, .navbar.is-black .navbar-start .navbar-link:hover, .navbar.is-black .navbar-start .navbar-link.is-active, .navbar.is-black .navbar-end > a.navbar-item:focus, .navbar.is-black .navbar-end > a.navbar-item:hover, .navbar.is-black .navbar-end > a.navbar-item.is-active, .navbar.is-black .navbar-end .navbar-link:focus, .navbar.is-black .navbar-end .navbar-link:hover, .navbar.is-black .navbar-end .navbar-link.is-active { background-color: black; color: var(--white); } .navbar.is-black .navbar-start .navbar-link::after, .navbar.is-black .navbar-end .navbar-link::after { border-color: var(--white); } .navbar.is-black .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link { background-color: black; color: var(--white); } .navbar.is-black .navbar-dropdown a.navbar-item.is-active { background-color: #0a0a0a; color: var(--white); } } .navbar.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand > .navbar-item, .navbar.is-light .navbar-brand .navbar-link { color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, .navbar.is-light .navbar-brand .navbar-link:focus, .navbar.is-light .navbar-brand .navbar-link:hover, .navbar.is-light .navbar-brand .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-burger { color: rgba(0, 0, 0, 0.7); } @media screen and (min-width: 1024px) { .navbar.is-light .navbar-start > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-end .navbar-link { color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, .navbar.is-light .navbar-start .navbar-link:focus, .navbar.is-light .navbar-start .navbar-link:hover, .navbar.is-light .navbar-start .navbar-link.is-active, .navbar.is-light .navbar-end > a.navbar-item:focus, .navbar.is-light .navbar-end > a.navbar-item:hover, .navbar.is-light .navbar-end > a.navbar-item.is-active, .navbar.is-light .navbar-end .navbar-link:focus, .navbar.is-light .navbar-end .navbar-link:hover, .navbar.is-light .navbar-end .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-start .navbar-link::after, .navbar.is-light .navbar-end .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } } .navbar.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand > .navbar-item, .navbar.is-dark .navbar-brand .navbar-link { color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, .navbar.is-dark .navbar-brand .navbar-link:focus, .navbar.is-dark .navbar-brand .navbar-link:hover, .navbar.is-dark .navbar-brand .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand .navbar-link::after { border-color: var(--dark--color-invert); } .navbar.is-dark .navbar-burger { color: var(--dark--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-dark .navbar-start > .navbar-item, .navbar.is-dark .navbar-start .navbar-link, .navbar.is-dark .navbar-end > .navbar-item, .navbar.is-dark .navbar-end .navbar-link { color: var(--dark--color-invert); } .navbar.is-dark .navbar-start > a.navbar-item:focus, .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, .navbar.is-dark .navbar-start .navbar-link:focus, .navbar.is-dark .navbar-start .navbar-link:hover, .navbar.is-dark .navbar-start .navbar-link.is-active, .navbar.is-dark .navbar-end > a.navbar-item:focus, .navbar.is-dark .navbar-end > a.navbar-item:hover, .navbar.is-dark .navbar-end > a.navbar-item.is-active, .navbar.is-dark .navbar-end .navbar-link:focus, .navbar.is-dark .navbar-end .navbar-link:hover, .navbar.is-dark .navbar-end .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-start .navbar-link::after, .navbar.is-dark .navbar-end .navbar-link::after { border-color: var(--dark--color-invert); } .navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-dropdown a.navbar-item.is-active { background-color: var(--dark); color: var(--dark--color-invert); } } .navbar.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand > .navbar-item, .navbar.is-primary .navbar-brand .navbar-link { color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, .navbar.is-primary .navbar-brand .navbar-link:focus, .navbar.is-primary .navbar-brand .navbar-link:hover, .navbar.is-primary .navbar-brand .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand .navbar-link::after { border-color: var(--primary--color-invert); } .navbar.is-primary .navbar-burger { color: var(--primary--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-primary .navbar-start > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, .navbar.is-primary .navbar-end .navbar-link { color: var(--primary--color-invert); } .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, .navbar.is-primary .navbar-start .navbar-link:focus, .navbar.is-primary .navbar-start .navbar-link:hover, .navbar.is-primary .navbar-start .navbar-link.is-active, .navbar.is-primary .navbar-end > a.navbar-item:focus, .navbar.is-primary .navbar-end > a.navbar-item:hover, .navbar.is-primary .navbar-end > a.navbar-item.is-active, .navbar.is-primary .navbar-end .navbar-link:focus, .navbar.is-primary .navbar-end .navbar-link:hover, .navbar.is-primary .navbar-end .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-start .navbar-link::after, .navbar.is-primary .navbar-end .navbar-link::after { border-color: var(--primary--color-invert); } .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { background-color: var(--primary); color: var(--primary--color-invert); } } .navbar.is-link { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-brand > .navbar-item, .navbar.is-link .navbar-brand .navbar-link { color: var(--link--color-invert); } .navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, .navbar.is-link .navbar-brand .navbar-link:focus, .navbar.is-link .navbar-brand .navbar-link:hover, .navbar.is-link .navbar-brand .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-brand .navbar-link::after { border-color: var(--link--color-invert); } .navbar.is-link .navbar-burger { color: var(--link--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-link .navbar-start > .navbar-item, .navbar.is-link .navbar-start .navbar-link, .navbar.is-link .navbar-end > .navbar-item, .navbar.is-link .navbar-end .navbar-link { color: var(--link--color-invert); } .navbar.is-link .navbar-start > a.navbar-item:focus, .navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, .navbar.is-link .navbar-start .navbar-link:focus, .navbar.is-link .navbar-start .navbar-link:hover, .navbar.is-link .navbar-start .navbar-link.is-active, .navbar.is-link .navbar-end > a.navbar-item:focus, .navbar.is-link .navbar-end > a.navbar-item:hover, .navbar.is-link .navbar-end > a.navbar-item.is-active, .navbar.is-link .navbar-end .navbar-link:focus, .navbar.is-link .navbar-end .navbar-link:hover, .navbar.is-link .navbar-end .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-start .navbar-link::after, .navbar.is-link .navbar-end .navbar-link::after { border-color: var(--link--color-invert); } .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-dropdown a.navbar-item.is-active { background-color: var(--link); color: var(--link--color-invert); } } .navbar.is-info { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-brand > .navbar-item, .navbar.is-info .navbar-brand .navbar-link { color: var(--info--color-invert); } .navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, .navbar.is-info .navbar-brand .navbar-link:focus, .navbar.is-info .navbar-brand .navbar-link:hover, .navbar.is-info .navbar-brand .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-brand .navbar-link::after { border-color: var(--info--color-invert); } .navbar.is-info .navbar-burger { color: var(--info--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-info .navbar-start > .navbar-item, .navbar.is-info .navbar-start .navbar-link, .navbar.is-info .navbar-end > .navbar-item, .navbar.is-info .navbar-end .navbar-link { color: var(--info--color-invert); } .navbar.is-info .navbar-start > a.navbar-item:focus, .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, .navbar.is-info .navbar-start .navbar-link:focus, .navbar.is-info .navbar-start .navbar-link:hover, .navbar.is-info .navbar-start .navbar-link.is-active, .navbar.is-info .navbar-end > a.navbar-item:focus, .navbar.is-info .navbar-end > a.navbar-item:hover, .navbar.is-info .navbar-end > a.navbar-item.is-active, .navbar.is-info .navbar-end .navbar-link:focus, .navbar.is-info .navbar-end .navbar-link:hover, .navbar.is-info .navbar-end .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-start .navbar-link::after, .navbar.is-info .navbar-end .navbar-link::after { border-color: var(--info--color-invert); } .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-dropdown a.navbar-item.is-active { background-color: var(--info); color: var(--info--color-invert); } } .navbar.is-success { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-brand > .navbar-item, .navbar.is-success .navbar-brand .navbar-link { color: var(--success--color-invert); } .navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, .navbar.is-success .navbar-brand .navbar-link:focus, .navbar.is-success .navbar-brand .navbar-link:hover, .navbar.is-success .navbar-brand .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-brand .navbar-link::after { border-color: var(--success--color-invert); } .navbar.is-success .navbar-burger { color: var(--success--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-success .navbar-start > .navbar-item, .navbar.is-success .navbar-start .navbar-link, .navbar.is-success .navbar-end > .navbar-item, .navbar.is-success .navbar-end .navbar-link { color: var(--success--color-invert); } .navbar.is-success .navbar-start > a.navbar-item:focus, .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, .navbar.is-success .navbar-start .navbar-link:focus, .navbar.is-success .navbar-start .navbar-link:hover, .navbar.is-success .navbar-start .navbar-link.is-active, .navbar.is-success .navbar-end > a.navbar-item:focus, .navbar.is-success .navbar-end > a.navbar-item:hover, .navbar.is-success .navbar-end > a.navbar-item.is-active, .navbar.is-success .navbar-end .navbar-link:focus, .navbar.is-success .navbar-end .navbar-link:hover, .navbar.is-success .navbar-end .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-start .navbar-link::after, .navbar.is-success .navbar-end .navbar-link::after { border-color: var(--success--color-invert); } .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-dropdown a.navbar-item.is-active { background-color: var(--success); color: var(--success--color-invert); } } .navbar.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand > .navbar-item, .navbar.is-warning .navbar-brand .navbar-link { color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, .navbar.is-warning .navbar-brand .navbar-link:focus, .navbar.is-warning .navbar-brand .navbar-link:hover, .navbar.is-warning .navbar-brand .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand .navbar-link::after { border-color: var(--warning--color-invert); } .navbar.is-warning .navbar-burger { color: var(--warning--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-warning .navbar-start > .navbar-item, .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, .navbar.is-warning .navbar-end .navbar-link { color: var(--warning--color-invert); } .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, .navbar.is-warning .navbar-start .navbar-link:focus, .navbar.is-warning .navbar-start .navbar-link:hover, .navbar.is-warning .navbar-start .navbar-link.is-active, .navbar.is-warning .navbar-end > a.navbar-item:focus, .navbar.is-warning .navbar-end > a.navbar-item:hover, .navbar.is-warning .navbar-end > a.navbar-item.is-active, .navbar.is-warning .navbar-end .navbar-link:focus, .navbar.is-warning .navbar-end .navbar-link:hover, .navbar.is-warning .navbar-end .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-start .navbar-link::after, .navbar.is-warning .navbar-end .navbar-link::after { border-color: var(--warning--color-invert); } .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { background-color: var(--warning); color: var(--warning--color-invert); } } .navbar.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand > .navbar-item, .navbar.is-danger .navbar-brand .navbar-link { color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, .navbar.is-danger .navbar-brand .navbar-link:focus, .navbar.is-danger .navbar-brand .navbar-link:hover, .navbar.is-danger .navbar-brand .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand .navbar-link::after { border-color: var(--danger--color-invert); } .navbar.is-danger .navbar-burger { color: var(--danger--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-danger .navbar-start > .navbar-item, .navbar.is-danger .navbar-start .navbar-link, .navbar.is-danger .navbar-end > .navbar-item, .navbar.is-danger .navbar-end .navbar-link { color: var(--danger--color-invert); } .navbar.is-danger .navbar-start > a.navbar-item:focus, .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, .navbar.is-danger .navbar-start .navbar-link:focus, .navbar.is-danger .navbar-start .navbar-link:hover, .navbar.is-danger .navbar-start .navbar-link.is-active, .navbar.is-danger .navbar-end > a.navbar-item:focus, .navbar.is-danger .navbar-end > a.navbar-item:hover, .navbar.is-danger .navbar-end > a.navbar-item.is-active, .navbar.is-danger .navbar-end .navbar-link:focus, .navbar.is-danger .navbar-end .navbar-link:hover, .navbar.is-danger .navbar-end .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-start .navbar-link::after, .navbar.is-danger .navbar-end .navbar-link::after { border-color: var(--danger--color-invert); } .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { background-color: var(--danger); color: var(--danger--color-invert); } } .navbar > .container { align-items: stretch; display: flex; min-height: 3.25rem; width: 100%; } .navbar.has-shadow { box-shadow: 0 2px 0 0 whitesmoke; } .navbar.is-fixed-bottom, .navbar.is-fixed-top { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom { bottom: 0; } .navbar.is-fixed-bottom.has-shadow { box-shadow: 0 -2px 0 0 whitesmoke; } .navbar.is-fixed-top { top: 0; } html.has-navbar-fixed-top, body.has-navbar-fixed-top { padding-top: 3.25rem; } html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { padding-bottom: 3.25rem; } .navbar-brand, .navbar-tabs { align-items: stretch; display: flex; flex-shrink: 0; min-height: 3.25rem; } .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { background-color: transparent; } .navbar-tabs { -webkit-overflow-scrolling: touch; max-width: 100vw; overflow-x: auto; overflow-y: hidden; } .navbar-burger { color: #4a4a4a; cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; margin-left: auto; } .navbar-burger span { background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color, opacity, transform; transition-timing-function: ease-out; width: 16px; } .navbar-burger span:nth-child(1) { top: calc(50% - 6px); } .navbar-burger span:nth-child(2) { top: calc(50% - 1px); } .navbar-burger span:nth-child(3) { top: calc(50% + 4px); } .navbar-burger:hover { background-color: rgba(0, 0, 0, 0.05); } .navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .navbar-burger.is-active span:nth-child(2) { opacity: 0; } .navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .navbar-menu { display: none; } .navbar-item, .navbar-link { color: #4a4a4a; display: block; line-height: 1.5; padding: 0.5rem 0.75rem; position: relative; } .navbar-item .icon:only-child, .navbar-link .icon:only-child { margin-left: -0.25rem; margin-right: -0.25rem; } a.navbar-item, .navbar-link { cursor: pointer; } a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active { background-color: #fafafa; color: var(--link); } .navbar-item { flex-grow: 0; flex-shrink: 0; } .navbar-item img { max-height: 1.75rem; } .navbar-item.has-dropdown { padding: 0; } .navbar-item.is-expanded { flex-grow: 1; flex-shrink: 1; } .navbar-item.is-tab { border-bottom: 1px solid transparent; min-height: 3.25rem; padding-bottom: calc(0.5rem - 1px); } .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { background-color: transparent; border-bottom-color: var(--link); } .navbar-item.is-tab.is-active { background-color: transparent; border-bottom-color: var(--link); border-bottom-style: solid; border-bottom-width: 3px; color: var(--link); padding-bottom: calc(0.5rem - 3px); } .navbar-content { flex-grow: 1; flex-shrink: 1; } .navbar-link:not(.is-arrowless) { padding-right: 2.5em; } .navbar-link:not(.is-arrowless)::after { border-color: var(--link); margin-top: -0.375em; right: 1.125em; } .navbar-dropdown { font-size: 0.875rem; padding-bottom: 0.5rem; padding-top: 0.5rem; } .navbar-dropdown .navbar-item { padding-left: 1.5rem; padding-right: 1.5rem; } .navbar-divider { background-color: whitesmoke; border: none; display: none; height: 2px; margin: 0.5rem 0; } @media screen and (max-width: 1023px) { .navbar > .container { display: block; } .navbar-brand .navbar-item, .navbar-tabs .navbar-item { align-items: center; display: flex; } .navbar-link::after { display: none; } .navbar-menu { background-color: var(--white); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); padding: 0.5rem 0; } .navbar-menu.is-active { display: block; } .navbar.is-fixed-bottom-touch, .navbar.is-fixed-top-touch { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom-touch { bottom: 0; } .navbar.is-fixed-bottom-touch.has-shadow { box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-touch { top: 0; } .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { -webkit-overflow-scrolling: touch; max-height: calc(100vh - 3.25rem); overflow: auto; } html.has-navbar-fixed-top-touch, body.has-navbar-fixed-top-touch { padding-top: 3.25rem; } html.has-navbar-fixed-bottom-touch, body.has-navbar-fixed-bottom-touch { padding-bottom: 3.25rem; } } @media screen and (min-width: 1024px) { .navbar, .navbar-menu, .navbar-start, .navbar-end { align-items: stretch; display: flex; } .navbar { min-height: 3.25rem; } .navbar.is-spaced { padding: 1rem 2rem; } .navbar.is-spaced .navbar-start, .navbar.is-spaced .navbar-end { align-items: center; } .navbar.is-spaced a.navbar-item, .navbar.is-spaced .navbar-link { border-radius: var(--radius); } .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent .navbar-link:focus, .navbar.is-transparent .navbar-link:hover, .navbar.is-transparent .navbar-link.is-active { background-color: transparent !important; } .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { background-color: transparent !important; } .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { background-color: whitesmoke; color: #0a0a0a; } .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: var(--link); } .navbar-burger { display: none; } .navbar-item, .navbar-link { align-items: center; display: flex; } .navbar-item.has-dropdown { align-items: stretch; } .navbar-item.has-dropdown-up .navbar-link::after { transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-item.has-dropdown-up .navbar-dropdown { border-bottom: 2px solid var(--border); border-radius: var(--radius-large) var(--radius-large) 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); top: auto; } .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { display: block; } .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { opacity: 1; pointer-events: auto; transform: translateY(0); } .navbar-menu { flex-grow: 1; flex-shrink: 0; } .navbar-start { justify-content: flex-start; margin-right: auto; } .navbar-end { justify-content: flex-end; margin-left: auto; } .navbar-dropdown { background-color: var(--white); border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); border-top: 2px solid var(--border); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; left: 0; min-width: 100%; position: absolute; top: 100%; z-index: 20; } .navbar-dropdown .navbar-item { padding: 0.375rem 1rem; white-space: nowrap; } .navbar-dropdown a.navbar-item { padding-right: 3rem; } .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { background-color: whitesmoke; color: #0a0a0a; } .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: var(--link); } .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { border-radius: var(--radius-large); border-top: none; box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: block; opacity: 0; pointer-events: none; top: calc(100% + (-4px)); transform: translateY(-5px); transition-duration: 86ms; transition-property: opacity, transform; } .navbar-dropdown.is-right { left: auto; right: 0; } .navbar-divider { display: block; } .navbar > .container .navbar-brand, .container > .navbar .navbar-brand { margin-left: -0.75rem; } .navbar > .container .navbar-menu, .container > .navbar .navbar-menu { margin-right: -0.75rem; } .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom-desktop { bottom: 0; } .navbar.is-fixed-bottom-desktop.has-shadow { box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-desktop { top: 0; } html.has-navbar-fixed-top-desktop, body.has-navbar-fixed-top-desktop { padding-top: 3.25rem; } html.has-navbar-fixed-bottom-desktop, body.has-navbar-fixed-bottom-desktop { padding-bottom: 3.25rem; } html.has-spaced-navbar-fixed-top, body.has-spaced-navbar-fixed-top { padding-top: 5.25rem; } html.has-spaced-navbar-fixed-bottom, body.has-spaced-navbar-fixed-bottom { padding-bottom: 5.25rem; } a.navbar-item.is-active, .navbar-link.is-active { color: #0a0a0a; } a.navbar-item.is-active:not(:focus):not(:hover), .navbar-link.is-active:not(:focus):not(:hover) { background-color: transparent; } .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { background-color: #fafafa; } } .hero.is-fullheight-with-navbar { min-height: calc(100vh - 3.25rem); } .pagination { font-size: 1rem; margin: -0.25rem; } .pagination.is-small { font-size: 0.75rem; } .pagination.is-medium { font-size: 1.25rem; } .pagination.is-large { font-size: 1.5rem; } .pagination.is-rounded .pagination-previous, .pagination.is-rounded .pagination-next { padding-left: 1em; padding-right: 1em; border-radius: var(--radius-rounded); } .pagination.is-rounded .pagination-link { border-radius: var(--radius-rounded); } .pagination, .pagination-list { align-items: center; display: flex; justify-content: center; text-align: center; } .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis { font-size: 1em; justify-content: center; margin: 0.25rem; padding-left: 0.5em; padding-right: 0.5em; text-align: center; } .pagination-previous, .pagination-next, .pagination-link { border-color: var(--border); color: #363636; min-width: 2.5em; } .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { border-color: #b5b5b5; color: #363636; } .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { border-color: #485fc7; } .pagination-previous:active, .pagination-next:active, .pagination-link:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); } .pagination-previous[disabled], .pagination-next[disabled], .pagination-link[disabled] { background-color: var(--border); border-color: var(--border); box-shadow: none; color: #7a7a7a; opacity: 0.5; } .pagination-previous, .pagination-next { padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } .pagination-link.is-current { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .pagination-ellipsis { color: #b5b5b5; pointer-events: none; } .pagination-list { flex-wrap: wrap; } .pagination-list li { list-style: none; } @media screen and (max-width: 768px) { .pagination { flex-wrap: wrap; } .pagination-previous, .pagination-next { flex-grow: 1; flex-shrink: 1; } .pagination-list li { flex-grow: 1; flex-shrink: 1; } } @media screen and (min-width: 769px), print { .pagination-list { flex-grow: 1; flex-shrink: 1; justify-content: flex-start; order: 1; } .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis { margin-bottom: 0; margin-top: 0; } .pagination-previous { order: 2; } .pagination-next { order: 3; } .pagination { justify-content: space-between; margin-bottom: 0; margin-top: 0; } .pagination.is-centered .pagination-previous { order: 1; } .pagination.is-centered .pagination-list { justify-content: center; order: 2; } .pagination.is-centered .pagination-next { order: 3; } .pagination.is-right .pagination-previous { order: 1; } .pagination.is-right .pagination-next { order: 2; } .pagination.is-right .pagination-list { justify-content: flex-end; order: 3; } } .panel { border-radius: var(--radius-large); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); font-size: 1rem; } .panel:not(:last-child) { margin-bottom: 1.5rem; } .panel.is-white .panel-heading { background-color: var(--white); color: #0a0a0a; } .panel.is-white .panel-tabs a.is-active { border-bottom-color: var(--white); } .panel.is-white .panel-block.is-active .panel-icon { color: var(--white); } .panel.is-black .panel-heading { background-color: #0a0a0a; color: var(--white); } .panel.is-black .panel-tabs a.is-active { border-bottom-color: #0a0a0a; } .panel.is-black .panel-block.is-active .panel-icon { color: #0a0a0a; } .panel.is-light .panel-heading { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .panel.is-light .panel-tabs a.is-active { border-bottom-color: whitesmoke; } .panel.is-light .panel-block.is-active .panel-icon { color: whitesmoke; } .panel.is-dark .panel-heading { background-color: var(--dark); color: var(--dark--color-invert); } .panel.is-dark .panel-tabs a.is-active { border-bottom-color: var(--dark); } .panel.is-dark .panel-block.is-active .panel-icon { color: var(--dark); } .panel.is-primary .panel-heading { background-color: var(--primary); color: var(--primary--color-invert); } .panel.is-primary .panel-tabs a.is-active { border-bottom-color: var(--primary); } .panel.is-primary .panel-block.is-active .panel-icon { color: var(--primary); } .panel.is-link .panel-heading { background-color: var(--link); color: var(--link--color-invert); } .panel.is-link .panel-tabs a.is-active { border-bottom-color: var(--link); } .panel.is-link .panel-block.is-active .panel-icon { color: var(--link); } .panel.is-info .panel-heading { background-color: var(--info); color: var(--info--color-invert); } .panel.is-info .panel-tabs a.is-active { border-bottom-color: var(--info); } .panel.is-info .panel-block.is-active .panel-icon { color: var(--info); } .panel.is-success .panel-heading { background-color: var(--success); color: var(--success--color-invert); } .panel.is-success .panel-tabs a.is-active { border-bottom-color: var(--success); } .panel.is-success .panel-block.is-active .panel-icon { color: var(--success); } .panel.is-warning .panel-heading { background-color: var(--warning); color: var(--warning--color-invert); } .panel.is-warning .panel-tabs a.is-active { border-bottom-color: var(--warning); } .panel.is-warning .panel-block.is-active .panel-icon { color: var(--warning); } .panel.is-danger .panel-heading { background-color: var(--danger); color: var(--danger--color-invert); } .panel.is-danger .panel-tabs a.is-active { border-bottom-color: var(--danger); } .panel.is-danger .panel-block.is-active .panel-icon { color: var(--danger); } .panel-tabs:not(:last-child), .panel-block:not(:last-child) { border-bottom: 1px solid #ededed; } .panel-heading { background-color: #ededed; border-radius: var(--radius-large) var(--radius-large) 0 0; color: #363636; font-size: 1.25em; font-weight: 700; line-height: 1.25; padding: 0.75em 1em; } .panel-tabs { align-items: flex-end; display: flex; font-size: 0.875em; justify-content: center; } .panel-tabs a { border-bottom: 1px solid var(--border); margin-bottom: -1px; padding: 0.5em; } .panel-tabs a.is-active { border-bottom-color: #4a4a4a; color: #363636; } .panel-list a { color: #4a4a4a; } .panel-list a:hover { color: var(--link); } .panel-block { align-items: center; color: #363636; display: flex; justify-content: flex-start; padding: 0.5em 0.75em; } .panel-block input[type=checkbox] { margin-right: 0.75em; } .panel-block > .control { flex-grow: 1; flex-shrink: 1; width: 100%; } .panel-block.is-wrapped { flex-wrap: wrap; } .panel-block.is-active { border-left-color: var(--link); color: #363636; } .panel-block.is-active .panel-icon { color: var(--link); } .panel-block:last-child { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); } a.panel-block, label.panel-block { cursor: pointer; } a.panel-block:hover, label.panel-block:hover { background-color: whitesmoke; } .panel-icon { display: inline-block; font-size: 14px; height: 1em; line-height: 1em; text-align: center; vertical-align: top; width: 1em; color: #7a7a7a; margin-right: 0.75em; } .panel-icon .fa { font-size: inherit; line-height: inherit; } .tabs { -webkit-overflow-scrolling: touch; align-items: stretch; display: flex; font-size: 1rem; justify-content: space-between; overflow: hidden; overflow-x: auto; white-space: nowrap; } .tabs a { align-items: center; border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; color: #4a4a4a; display: flex; justify-content: center; margin-bottom: -1px; padding: 0.5em 1em; vertical-align: top; } .tabs a:hover { border-bottom-color: #363636; color: #363636; } .tabs li { display: block; } .tabs li.is-active a { border-bottom-color: var(--link); color: var(--link); } .tabs ul { align-items: center; border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; display: flex; flex-grow: 1; flex-shrink: 0; justify-content: flex-start; } .tabs ul.is-left { padding-right: 0.75em; } .tabs ul.is-center { flex: none; justify-content: center; padding-left: 0.75em; padding-right: 0.75em; } .tabs ul.is-right { justify-content: flex-end; padding-left: 0.75em; } .tabs .icon:first-child { margin-right: 0.5em; } .tabs .icon:last-child { margin-left: 0.5em; } .tabs.is-centered ul { justify-content: center; } .tabs.is-right ul { justify-content: flex-end; } .tabs.is-boxed a { border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0; } .tabs.is-boxed a:hover { background-color: whitesmoke; border-bottom-color: var(--border); } .tabs.is-boxed li.is-active a { background-color: var(--white); border-color: var(--border); border-bottom-color: transparent !important; } .tabs.is-fullwidth li { flex-grow: 1; flex-shrink: 0; } .tabs.is-toggle a { border-color: var(--border); border-style: solid; border-width: 1px; margin-bottom: 0; position: relative; } .tabs.is-toggle a:hover { background-color: whitesmoke; border-color: #b5b5b5; z-index: 2; } .tabs.is-toggle li + li { margin-left: -1px; } .tabs.is-toggle li:first-child a { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } .tabs.is-toggle li:last-child a { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } .tabs.is-toggle li.is-active a { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); z-index: 1; } .tabs.is-toggle ul { border-bottom: none; } .tabs.is-toggle.is-toggle-rounded li:first-child a { border-bottom-left-radius: var(--radius-rounded); border-top-left-radius: var(--radius-rounded); padding-left: 1.25em; } .tabs.is-toggle.is-toggle-rounded li:last-child a { border-bottom-right-radius: var(--radius-rounded); border-top-right-radius: var(--radius-rounded); padding-right: 1.25em; } .tabs.is-small { font-size: 0.75rem; } .tabs.is-medium { font-size: 1.25rem; } .tabs.is-large { font-size: 1.5rem; } /* Bulma Grid */ .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .columns.is-mobile > .column.is-narrow { flex: none; width: unset; } .columns.is-mobile > .column.is-full { flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { flex: none; width: 25%; } .columns.is-mobile > .column.is-one-fifth { flex: none; width: 20%; } .columns.is-mobile > .column.is-two-fifths { flex: none; width: 40%; } .columns.is-mobile > .column.is-three-fifths { flex: none; width: 60%; } .columns.is-mobile > .column.is-four-fifths { flex: none; width: 80%; } .columns.is-mobile > .column.is-offset-three-quarters { margin-left: 75%; } .columns.is-mobile > .column.is-offset-two-thirds { margin-left: 66.6666%; } .columns.is-mobile > .column.is-offset-half { margin-left: 50%; } .columns.is-mobile > .column.is-offset-one-third { margin-left: 33.3333%; } .columns.is-mobile > .column.is-offset-one-quarter { margin-left: 25%; } .columns.is-mobile > .column.is-offset-one-fifth { margin-left: 20%; } .columns.is-mobile > .column.is-offset-two-fifths { margin-left: 40%; } .columns.is-mobile > .column.is-offset-three-fifths { margin-left: 60%; } .columns.is-mobile > .column.is-offset-four-fifths { margin-left: 80%; } .columns.is-mobile > .column.is-0 { flex: none; width: 0%; } .columns.is-mobile > .column.is-offset-0 { margin-left: 0%; } .columns.is-mobile > .column.is-1 { flex: none; width: 8.33333337%; } .columns.is-mobile > .column.is-offset-1 { margin-left: 8.33333337%; } .columns.is-mobile > .column.is-2 { flex: none; width: 16.66666674%; } .columns.is-mobile > .column.is-offset-2 { margin-left: 16.66666674%; } .columns.is-mobile > .column.is-3 { flex: none; width: 25%; } .columns.is-mobile > .column.is-offset-3 { margin-left: 25%; } .columns.is-mobile > .column.is-4 { flex: none; width: 33.33333337%; } .columns.is-mobile > .column.is-offset-4 { margin-left: 33.33333337%; } .columns.is-mobile > .column.is-5 { flex: none; width: 41.66666674%; } .columns.is-mobile > .column.is-offset-5 { margin-left: 41.66666674%; } .columns.is-mobile > .column.is-6 { flex: none; width: 50%; } .columns.is-mobile > .column.is-offset-6 { margin-left: 50%; } .columns.is-mobile > .column.is-7 { flex: none; width: 58.33333337%; } .columns.is-mobile > .column.is-offset-7 { margin-left: 58.33333337%; } .columns.is-mobile > .column.is-8 { flex: none; width: 66.66666674%; } .columns.is-mobile > .column.is-offset-8 { margin-left: 66.66666674%; } .columns.is-mobile > .column.is-9 { flex: none; width: 75%; } .columns.is-mobile > .column.is-offset-9 { margin-left: 75%; } .columns.is-mobile > .column.is-10 { flex: none; width: 83.33333337%; } .columns.is-mobile > .column.is-offset-10 { margin-left: 83.33333337%; } .columns.is-mobile > .column.is-11 { flex: none; width: 91.66666674%; } .columns.is-mobile > .column.is-offset-11 { margin-left: 91.66666674%; } .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } .columns.is-mobile > .column.is-offset-12 { margin-left: 100%; } @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; width: unset; } .column.is-full-mobile { flex: none; width: 100%; } .column.is-three-quarters-mobile { flex: none; width: 75%; } .column.is-two-thirds-mobile { flex: none; width: 66.6666%; } .column.is-half-mobile { flex: none; width: 50%; } .column.is-one-third-mobile { flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { flex: none; width: 25%; } .column.is-one-fifth-mobile { flex: none; width: 20%; } .column.is-two-fifths-mobile { flex: none; width: 40%; } .column.is-three-fifths-mobile { flex: none; width: 60%; } .column.is-four-fifths-mobile { flex: none; width: 80%; } .column.is-offset-three-quarters-mobile { margin-left: 75%; } .column.is-offset-two-thirds-mobile { margin-left: 66.6666%; } .column.is-offset-half-mobile { margin-left: 50%; } .column.is-offset-one-third-mobile { margin-left: 33.3333%; } .column.is-offset-one-quarter-mobile { margin-left: 25%; } .column.is-offset-one-fifth-mobile { margin-left: 20%; } .column.is-offset-two-fifths-mobile { margin-left: 40%; } .column.is-offset-three-fifths-mobile { margin-left: 60%; } .column.is-offset-four-fifths-mobile { margin-left: 80%; } .column.is-0-mobile { flex: none; width: 0%; } .column.is-offset-0-mobile { margin-left: 0%; } .column.is-1-mobile { flex: none; width: 8.33333337%; } .column.is-offset-1-mobile { margin-left: 8.33333337%; } .column.is-2-mobile { flex: none; width: 16.66666674%; } .column.is-offset-2-mobile { margin-left: 16.66666674%; } .column.is-3-mobile { flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { flex: none; width: 33.33333337%; } .column.is-offset-4-mobile { margin-left: 33.33333337%; } .column.is-5-mobile { flex: none; width: 41.66666674%; } .column.is-offset-5-mobile { margin-left: 41.66666674%; } .column.is-6-mobile { flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { flex: none; width: 58.33333337%; } .column.is-offset-7-mobile { margin-left: 58.33333337%; } .column.is-8-mobile { flex: none; width: 66.66666674%; } .column.is-offset-8-mobile { margin-left: 66.66666674%; } .column.is-9-mobile { flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { flex: none; width: 83.33333337%; } .column.is-offset-10-mobile { margin-left: 83.33333337%; } .column.is-11-mobile { flex: none; width: 91.66666674%; } .column.is-offset-11-mobile { margin-left: 91.66666674%; } .column.is-12-mobile { flex: none; width: 100%; } .column.is-offset-12-mobile { margin-left: 100%; } } @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { flex: none; width: unset; } .column.is-full, .column.is-full-tablet { flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { flex: none; width: 25%; } .column.is-one-fifth, .column.is-one-fifth-tablet { flex: none; width: 20%; } .column.is-two-fifths, .column.is-two-fifths-tablet { flex: none; width: 40%; } .column.is-three-fifths, .column.is-three-fifths-tablet { flex: none; width: 60%; } .column.is-four-fifths, .column.is-four-fifths-tablet { flex: none; width: 80%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { margin-left: 75%; } .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { margin-left: 66.6666%; } .column.is-offset-half, .column.is-offset-half-tablet { margin-left: 50%; } .column.is-offset-one-third, .column.is-offset-one-third-tablet { margin-left: 33.3333%; } .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { margin-left: 25%; } .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { margin-left: 20%; } .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { margin-left: 40%; } .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { margin-left: 60%; } .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { margin-left: 80%; } .column.is-0, .column.is-0-tablet { flex: none; width: 0%; } .column.is-offset-0, .column.is-offset-0-tablet { margin-left: 0%; } .column.is-1, .column.is-1-tablet { flex: none; width: 8.33333337%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.33333337%; } .column.is-2, .column.is-2-tablet { flex: none; width: 16.66666674%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.66666674%; } .column.is-3, .column.is-3-tablet { flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { flex: none; width: 33.33333337%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333337%; } .column.is-5, .column.is-5-tablet { flex: none; width: 41.66666674%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66666674%; } .column.is-6, .column.is-6-tablet { flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { flex: none; width: 58.33333337%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.33333337%; } .column.is-8, .column.is-8-tablet { flex: none; width: 66.66666674%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66666674%; } .column.is-9, .column.is-9-tablet { flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { flex: none; width: 83.33333337%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333337%; } .column.is-11, .column.is-11-tablet { flex: none; width: 91.66666674%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66666674%; } .column.is-12, .column.is-12-tablet { flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { margin-left: 100%; } } @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; width: unset; } .column.is-full-touch { flex: none; width: 100%; } .column.is-three-quarters-touch { flex: none; width: 75%; } .column.is-two-thirds-touch { flex: none; width: 66.6666%; } .column.is-half-touch { flex: none; width: 50%; } .column.is-one-third-touch { flex: none; width: 33.3333%; } .column.is-one-quarter-touch { flex: none; width: 25%; } .column.is-one-fifth-touch { flex: none; width: 20%; } .column.is-two-fifths-touch { flex: none; width: 40%; } .column.is-three-fifths-touch { flex: none; width: 60%; } .column.is-four-fifths-touch { flex: none; width: 80%; } .column.is-offset-three-quarters-touch { margin-left: 75%; } .column.is-offset-two-thirds-touch { margin-left: 66.6666%; } .column.is-offset-half-touch { margin-left: 50%; } .column.is-offset-one-third-touch { margin-left: 33.3333%; } .column.is-offset-one-quarter-touch { margin-left: 25%; } .column.is-offset-one-fifth-touch { margin-left: 20%; } .column.is-offset-two-fifths-touch { margin-left: 40%; } .column.is-offset-three-fifths-touch { margin-left: 60%; } .column.is-offset-four-fifths-touch { margin-left: 80%; } .column.is-0-touch { flex: none; width: 0%; } .column.is-offset-0-touch { margin-left: 0%; } .column.is-1-touch { flex: none; width: 8.33333337%; } .column.is-offset-1-touch { margin-left: 8.33333337%; } .column.is-2-touch { flex: none; width: 16.66666674%; } .column.is-offset-2-touch { margin-left: 16.66666674%; } .column.is-3-touch { flex: none; width: 25%; } .column.is-offset-3-touch { margin-left: 25%; } .column.is-4-touch { flex: none; width: 33.33333337%; } .column.is-offset-4-touch { margin-left: 33.33333337%; } .column.is-5-touch { flex: none; width: 41.66666674%; } .column.is-offset-5-touch { margin-left: 41.66666674%; } .column.is-6-touch { flex: none; width: 50%; } .column.is-offset-6-touch { margin-left: 50%; } .column.is-7-touch { flex: none; width: 58.33333337%; } .column.is-offset-7-touch { margin-left: 58.33333337%; } .column.is-8-touch { flex: none; width: 66.66666674%; } .column.is-offset-8-touch { margin-left: 66.66666674%; } .column.is-9-touch { flex: none; width: 75%; } .column.is-offset-9-touch { margin-left: 75%; } .column.is-10-touch { flex: none; width: 83.33333337%; } .column.is-offset-10-touch { margin-left: 83.33333337%; } .column.is-11-touch { flex: none; width: 91.66666674%; } .column.is-offset-11-touch { margin-left: 91.66666674%; } .column.is-12-touch { flex: none; width: 100%; } .column.is-offset-12-touch { margin-left: 100%; } } @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; width: unset; } .column.is-full-desktop { flex: none; width: 100%; } .column.is-three-quarters-desktop { flex: none; width: 75%; } .column.is-two-thirds-desktop { flex: none; width: 66.6666%; } .column.is-half-desktop { flex: none; width: 50%; } .column.is-one-third-desktop { flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { flex: none; width: 25%; } .column.is-one-fifth-desktop { flex: none; width: 20%; } .column.is-two-fifths-desktop { flex: none; width: 40%; } .column.is-three-fifths-desktop { flex: none; width: 60%; } .column.is-four-fifths-desktop { flex: none; width: 80%; } .column.is-offset-three-quarters-desktop { margin-left: 75%; } .column.is-offset-two-thirds-desktop { margin-left: 66.6666%; } .column.is-offset-half-desktop { margin-left: 50%; } .column.is-offset-one-third-desktop { margin-left: 33.3333%; } .column.is-offset-one-quarter-desktop { margin-left: 25%; } .column.is-offset-one-fifth-desktop { margin-left: 20%; } .column.is-offset-two-fifths-desktop { margin-left: 40%; } .column.is-offset-three-fifths-desktop { margin-left: 60%; } .column.is-offset-four-fifths-desktop { margin-left: 80%; } .column.is-0-desktop { flex: none; width: 0%; } .column.is-offset-0-desktop { margin-left: 0%; } .column.is-1-desktop { flex: none; width: 8.33333337%; } .column.is-offset-1-desktop { margin-left: 8.33333337%; } .column.is-2-desktop { flex: none; width: 16.66666674%; } .column.is-offset-2-desktop { margin-left: 16.66666674%; } .column.is-3-desktop { flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { flex: none; width: 33.33333337%; } .column.is-offset-4-desktop { margin-left: 33.33333337%; } .column.is-5-desktop { flex: none; width: 41.66666674%; } .column.is-offset-5-desktop { margin-left: 41.66666674%; } .column.is-6-desktop { flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { flex: none; width: 58.33333337%; } .column.is-offset-7-desktop { margin-left: 58.33333337%; } .column.is-8-desktop { flex: none; width: 66.66666674%; } .column.is-offset-8-desktop { margin-left: 66.66666674%; } .column.is-9-desktop { flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { flex: none; width: 83.33333337%; } .column.is-offset-10-desktop { margin-left: 83.33333337%; } .column.is-11-desktop { flex: none; width: 91.66666674%; } .column.is-offset-11-desktop { margin-left: 91.66666674%; } .column.is-12-desktop { flex: none; width: 100%; } .column.is-offset-12-desktop { margin-left: 100%; } } @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; width: unset; } .column.is-full-widescreen { flex: none; width: 100%; } .column.is-three-quarters-widescreen { flex: none; width: 75%; } .column.is-two-thirds-widescreen { flex: none; width: 66.6666%; } .column.is-half-widescreen { flex: none; width: 50%; } .column.is-one-third-widescreen { flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { flex: none; width: 25%; } .column.is-one-fifth-widescreen { flex: none; width: 20%; } .column.is-two-fifths-widescreen { flex: none; width: 40%; } .column.is-three-fifths-widescreen { flex: none; width: 60%; } .column.is-four-fifths-widescreen { flex: none; width: 80%; } .column.is-offset-three-quarters-widescreen { margin-left: 75%; } .column.is-offset-two-thirds-widescreen { margin-left: 66.6666%; } .column.is-offset-half-widescreen { margin-left: 50%; } .column.is-offset-one-third-widescreen { margin-left: 33.3333%; } .column.is-offset-one-quarter-widescreen { margin-left: 25%; } .column.is-offset-one-fifth-widescreen { margin-left: 20%; } .column.is-offset-two-fifths-widescreen { margin-left: 40%; } .column.is-offset-three-fifths-widescreen { margin-left: 60%; } .column.is-offset-four-fifths-widescreen { margin-left: 80%; } .column.is-0-widescreen { flex: none; width: 0%; } .column.is-offset-0-widescreen { margin-left: 0%; } .column.is-1-widescreen { flex: none; width: 8.33333337%; } .column.is-offset-1-widescreen { margin-left: 8.33333337%; } .column.is-2-widescreen { flex: none; width: 16.66666674%; } .column.is-offset-2-widescreen { margin-left: 16.66666674%; } .column.is-3-widescreen { flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { flex: none; width: 33.33333337%; } .column.is-offset-4-widescreen { margin-left: 33.33333337%; } .column.is-5-widescreen { flex: none; width: 41.66666674%; } .column.is-offset-5-widescreen { margin-left: 41.66666674%; } .column.is-6-widescreen { flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { flex: none; width: 58.33333337%; } .column.is-offset-7-widescreen { margin-left: 58.33333337%; } .column.is-8-widescreen { flex: none; width: 66.66666674%; } .column.is-offset-8-widescreen { margin-left: 66.66666674%; } .column.is-9-widescreen { flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { flex: none; width: 83.33333337%; } .column.is-offset-10-widescreen { margin-left: 83.33333337%; } .column.is-11-widescreen { flex: none; width: 91.66666674%; } .column.is-offset-11-widescreen { margin-left: 91.66666674%; } .column.is-12-widescreen { flex: none; width: 100%; } .column.is-offset-12-widescreen { margin-left: 100%; } } .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .columns:last-child { margin-bottom: -0.75rem; } .columns:not(:last-child) { margin-bottom: calc(1.5rem - 0.75rem); } .columns.is-centered { justify-content: center; } .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } .columns.is-gapless > .column { margin: 0; padding: 0 !important; } .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } .columns.is-gapless:last-child { margin-bottom: 0; } .columns.is-mobile { display: flex; } .columns.is-multiline { flex-wrap: wrap; } .columns.is-vcentered { align-items: center; } @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: flex; } } @media screen and (min-width: 1024px) { .columns.is-desktop { display: flex; } } .columns.is-variable { --columnGap: 0.75rem; margin-left: calc(-1 * var(--columnGap)); margin-right: calc(-1 * var(--columnGap)); } .columns.is-variable > .column { padding-left: var(--columnGap); padding-right: var(--columnGap); } .columns.is-variable.is-0 { --columnGap: 0rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-0-mobile { --columnGap: 0rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-0-tablet { --columnGap: 0rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-0-tablet-only { --columnGap: 0rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-0-touch { --columnGap: 0rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-0-desktop { --columnGap: 0rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-0-desktop-only { --columnGap: 0rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-0-widescreen { --columnGap: 0rem; } } .columns.is-variable.is-1 { --columnGap: 0.25rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-1-mobile { --columnGap: 0.25rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-1-tablet { --columnGap: 0.25rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-1-tablet-only { --columnGap: 0.25rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-1-touch { --columnGap: 0.25rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-1-desktop { --columnGap: 0.25rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-1-desktop-only { --columnGap: 0.25rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-1-widescreen { --columnGap: 0.25rem; } } .columns.is-variable.is-2 { --columnGap: 0.5rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-2-mobile { --columnGap: 0.5rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-2-tablet { --columnGap: 0.5rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-2-tablet-only { --columnGap: 0.5rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-2-touch { --columnGap: 0.5rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-2-desktop { --columnGap: 0.5rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-2-desktop-only { --columnGap: 0.5rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-2-widescreen { --columnGap: 0.5rem; } } .columns.is-variable.is-3 { --columnGap: 0.75rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-3-mobile { --columnGap: 0.75rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-3-tablet { --columnGap: 0.75rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-3-tablet-only { --columnGap: 0.75rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-3-touch { --columnGap: 0.75rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-3-desktop { --columnGap: 0.75rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-3-desktop-only { --columnGap: 0.75rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-3-widescreen { --columnGap: 0.75rem; } } .columns.is-variable.is-4 { --columnGap: 1rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-4-mobile { --columnGap: 1rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-4-tablet { --columnGap: 1rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-4-tablet-only { --columnGap: 1rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-4-touch { --columnGap: 1rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-4-desktop { --columnGap: 1rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-4-desktop-only { --columnGap: 1rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-4-widescreen { --columnGap: 1rem; } } .columns.is-variable.is-5 { --columnGap: 1.25rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-5-mobile { --columnGap: 1.25rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-5-tablet { --columnGap: 1.25rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-5-tablet-only { --columnGap: 1.25rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-5-touch { --columnGap: 1.25rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-5-desktop { --columnGap: 1.25rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-5-desktop-only { --columnGap: 1.25rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-5-widescreen { --columnGap: 1.25rem; } } .columns.is-variable.is-6 { --columnGap: 1.5rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-6-mobile { --columnGap: 1.5rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-6-tablet { --columnGap: 1.5rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-6-tablet-only { --columnGap: 1.5rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-6-touch { --columnGap: 1.5rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-6-desktop { --columnGap: 1.5rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-6-desktop-only { --columnGap: 1.5rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-6-widescreen { --columnGap: 1.5rem; } } .columns.is-variable.is-7 { --columnGap: 1.75rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-7-mobile { --columnGap: 1.75rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-7-tablet { --columnGap: 1.75rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-7-tablet-only { --columnGap: 1.75rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-7-touch { --columnGap: 1.75rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-7-desktop { --columnGap: 1.75rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-7-desktop-only { --columnGap: 1.75rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-7-widescreen { --columnGap: 1.75rem; } } .columns.is-variable.is-8 { --columnGap: 2rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-8-mobile { --columnGap: 2rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-8-tablet { --columnGap: 2rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-8-tablet-only { --columnGap: 2rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-8-touch { --columnGap: 2rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-8-desktop { --columnGap: 2rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-8-desktop-only { --columnGap: 2rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-8-widescreen { --columnGap: 2rem; } } .tile { align-items: stretch; display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-height: min-content; } .tile.is-ancestor { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .tile.is-ancestor:last-child { margin-bottom: -0.75rem; } .tile.is-ancestor:not(:last-child) { margin-bottom: 0.75rem; } .tile.is-child { margin: 0 !important; } .tile.is-parent { padding: 0.75rem; } .tile.is-vertical { flex-direction: column; } .tile.is-vertical > .tile.is-child:not(:last-child) { margin-bottom: 1.5rem !important; } @media screen and (min-width: 769px), print { .tile:not(.is-child) { display: flex; } .tile.is-1 { flex: none; width: 8.33333337%; } .tile.is-2 { flex: none; width: 16.66666674%; } .tile.is-3 { flex: none; width: 25%; } .tile.is-4 { flex: none; width: 33.33333337%; } .tile.is-5 { flex: none; width: 41.66666674%; } .tile.is-6 { flex: none; width: 50%; } .tile.is-7 { flex: none; width: 58.33333337%; } .tile.is-8 { flex: none; width: 66.66666674%; } .tile.is-9 { flex: none; width: 75%; } .tile.is-10 { flex: none; width: 83.33333337%; } .tile.is-11 { flex: none; width: 91.66666674%; } .tile.is-12 { flex: none; width: 100%; } } /* Bulma Helpers */ .has-text-white { color: var(--white) !important; } a.has-text-white:hover, a.has-text-white:focus { color: var(--white) !important; } .has-background-white { background-color: var(--white) !important; } .has-text-black { color: #0a0a0a !important; } a.has-text-black:hover, a.has-text-black:focus { color: black !important; } .has-background-black { background-color: #0a0a0a !important; } .has-text-light { color: whitesmoke !important; } a.has-text-light:hover, a.has-text-light:focus { color: #dbdbdb !important; } .has-background-light { background-color: whitesmoke !important; } .has-text-dark { color: var(--dark) !important; } a.has-text-dark:hover, a.has-text-dark:focus { color: var(--dark) !important; } .has-background-dark { background-color: var(--dark) !important; } .has-text-primary { color: var(--primary) !important; } a.has-text-primary:hover, a.has-text-primary:focus { color: var(--primary) !important; } .has-background-primary { background-color: var(--primary) !important; } .has-text-primary-light { color: var(--primary--light-color) !important; } a.has-text-primary-light:hover, a.has-text-primary-light:focus { color: var(--primary--light-color) !important; } .has-background-primary-light { background-color: var(--primary--light-color) !important; } .has-text-primary-dark { color: var(--primary--dark-color) !important; } a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { color: var(--primary--dark-color) !important; } .has-background-primary-dark { background-color: var(--primary--dark-color) !important; } .has-text-link { color: var(--link) !important; } a.has-text-link:hover, a.has-text-link:focus { color: var(--link) !important; } .has-background-link { background-color: var(--link) !important; } .has-text-link-light { color: var(--link--light-color) !important; } a.has-text-link-light:hover, a.has-text-link-light:focus { color: var(--link--light-color) !important; } .has-background-link-light { background-color: var(--link--light-color) !important; } .has-text-link-dark { color: var(--link--dark-color) !important; } a.has-text-link-dark:hover, a.has-text-link-dark:focus { color: var(--link--dark-color) !important; } .has-background-link-dark { background-color: var(--link--dark-color) !important; } .has-text-info { color: var(--info) !important; } a.has-text-info:hover, a.has-text-info:focus { color: var(--info) !important; } .has-background-info { background-color: var(--info) !important; } .has-text-info-light { color: var(--info--light-color) !important; } a.has-text-info-light:hover, a.has-text-info-light:focus { color: var(--info--light-color) !important; } .has-background-info-light { background-color: var(--info--light-color) !important; } .has-text-info-dark { color: var(--info--dark-color) !important; } a.has-text-info-dark:hover, a.has-text-info-dark:focus { color: var(--info--dark-color) !important; } .has-background-info-dark { background-color: var(--info--dark-color) !important; } .has-text-success { color: var(--success) !important; } a.has-text-success:hover, a.has-text-success:focus { color: var(--success) !important; } .has-background-success { background-color: var(--success) !important; } .has-text-success-light { color: var(--success--light-color) !important; } a.has-text-success-light:hover, a.has-text-success-light:focus { color: var(--success--light-color) !important; } .has-background-success-light { background-color: var(--success--light-color) !important; } .has-text-success-dark { color: var(--success--dark-color) !important; } a.has-text-success-dark:hover, a.has-text-success-dark:focus { color: var(--success--dark-color) !important; } .has-background-success-dark { background-color: var(--success--dark-color) !important; } .has-text-warning { color: var(--warning) !important; } a.has-text-warning:hover, a.has-text-warning:focus { color: var(--warning) !important; } .has-background-warning { background-color: var(--warning) !important; } .has-text-warning-light { color: var(--warning--light-color) !important; } a.has-text-warning-light:hover, a.has-text-warning-light:focus { color: var(--warning--light-color) !important; } .has-background-warning-light { background-color: var(--warning--light-color) !important; } .has-text-warning-dark { color: var(--warning--dark-color) !important; } a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { color: var(--warning--dark-color) !important; } .has-background-warning-dark { background-color: var(--warning--dark-color) !important; } .has-text-danger { color: var(--danger) !important; } a.has-text-danger:hover, a.has-text-danger:focus { color: var(--danger) !important; } .has-background-danger { background-color: var(--danger) !important; } .has-text-danger-light { color: var(--danger--light-color) !important; } a.has-text-danger-light:hover, a.has-text-danger-light:focus { color: var(--danger--light-color) !important; } .has-background-danger-light { background-color: var(--danger--light-color) !important; } .has-text-danger-dark { color: var(--danger--dark-color) !important; } a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { color: var(--danger--dark-color) !important; } .has-background-danger-dark { background-color: var(--danger--dark-color) !important; } .has-text-black-bis { color: #121212 !important; } .has-background-black-bis { background-color: #121212 !important; } .has-text-black-ter { color: #242424 !important; } .has-background-black-ter { background-color: #242424 !important; } .has-text-grey-darker { color: #363636 !important; } .has-background-grey-darker { background-color: #363636 !important; } .has-text-grey-dark { color: #4a4a4a !important; } .has-background-grey-dark { background-color: #4a4a4a !important; } .has-text-grey { color: #7a7a7a !important; } .has-background-grey { background-color: #7a7a7a !important; } .has-text-grey-light { color: #b5b5b5 !important; } .has-background-grey-light { background-color: #b5b5b5 !important; } .has-text-grey-lighter { color: #dbdbdb !important; } .has-background-grey-lighter { background-color: #dbdbdb !important; } .has-text-white-ter { color: whitesmoke !important; } .has-background-white-ter { background-color: whitesmoke !important; } .has-text-white-bis { color: #fafafa !important; } .has-background-white-bis { background-color: #fafafa !important; } .is-flex-direction-row { flex-direction: row !important; } .is-flex-direction-row-reverse { flex-direction: row-reverse !important; } .is-flex-direction-column { flex-direction: column !important; } .is-flex-direction-column-reverse { flex-direction: column-reverse !important; } .is-flex-wrap-nowrap { flex-wrap: nowrap !important; } .is-flex-wrap-wrap { flex-wrap: wrap !important; } .is-flex-wrap-wrap-reverse { flex-wrap: wrap-reverse !important; } .is-justify-content-flex-start { justify-content: flex-start !important; } .is-justify-content-flex-end { justify-content: flex-end !important; } .is-justify-content-center { justify-content: center !important; } .is-justify-content-space-between { justify-content: space-between !important; } .is-justify-content-space-around { justify-content: space-around !important; } .is-justify-content-space-evenly { justify-content: space-evenly !important; } .is-justify-content-start { justify-content: start !important; } .is-justify-content-end { justify-content: end !important; } .is-justify-content-left { justify-content: left !important; } .is-justify-content-right { justify-content: right !important; } .is-align-content-flex-start { align-content: flex-start !important; } .is-align-content-flex-end { align-content: flex-end !important; } .is-align-content-center { align-content: center !important; } .is-align-content-space-between { align-content: space-between !important; } .is-align-content-space-around { align-content: space-around !important; } .is-align-content-space-evenly { align-content: space-evenly !important; } .is-align-content-stretch { align-content: stretch !important; } .is-align-content-start { align-content: start !important; } .is-align-content-end { align-content: end !important; } .is-align-content-baseline { align-content: baseline !important; } .is-align-items-stretch { align-items: stretch !important; } .is-align-items-flex-start { align-items: flex-start !important; } .is-align-items-flex-end { align-items: flex-end !important; } .is-align-items-center { align-items: center !important; } .is-align-items-baseline { align-items: baseline !important; } .is-align-items-start { align-items: start !important; } .is-align-items-end { align-items: end !important; } .is-align-items-self-start { align-items: self-start !important; } .is-align-items-self-end { align-items: self-end !important; } .is-align-self-auto { align-self: auto !important; } .is-align-self-flex-start { align-self: flex-start !important; } .is-align-self-flex-end { align-self: flex-end !important; } .is-align-self-center { align-self: center !important; } .is-align-self-baseline { align-self: baseline !important; } .is-align-self-stretch { align-self: stretch !important; } .is-flex-grow-0 { flex-grow: 0 !important; } .is-flex-grow-1 { flex-grow: 1 !important; } .is-flex-grow-2 { flex-grow: 2 !important; } .is-flex-grow-3 { flex-grow: 3 !important; } .is-flex-grow-4 { flex-grow: 4 !important; } .is-flex-grow-5 { flex-grow: 5 !important; } .is-flex-shrink-0 { flex-shrink: 0 !important; } .is-flex-shrink-1 { flex-shrink: 1 !important; } .is-flex-shrink-2 { flex-shrink: 2 !important; } .is-flex-shrink-3 { flex-shrink: 3 !important; } .is-flex-shrink-4 { flex-shrink: 4 !important; } .is-flex-shrink-5 { flex-shrink: 5 !important; } .is-clearfix::after { clear: both; content: " "; display: table; } .is-pulled-left { float: left !important; } .is-pulled-right { float: right !important; } .is-radiusless { border-radius: 0 !important; } .is-shadowless { box-shadow: none !important; } .is-clickable { cursor: pointer !important; pointer-events: all !important; } .is-clipped { overflow: hidden !important; } .is-relative { position: relative !important; } .is-marginless { margin: 0 !important; } .is-paddingless { padding: 0 !important; } .m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mr-1 { margin-right: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .ml-1 { margin-left: 0.25rem !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .ml-2 { margin-left: 0.5rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .m-3 { margin: 0.75rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mr-3 { margin-right: 0.75rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .ml-3 { margin-left: 0.75rem !important; } .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .m-4 { margin: 1rem !important; } .mt-4 { margin-top: 1rem !important; } .mr-4 { margin-right: 1rem !important; } .mb-4 { margin-bottom: 1rem !important; } .ml-4 { margin-left: 1rem !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-5 { margin: 1.5rem !important; } .mt-5 { margin-top: 1.5rem !important; } .mr-5 { margin-right: 1.5rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .ml-5 { margin-left: 1.5rem !important; } .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .m-6 { margin: 3rem !important; } .mt-6 { margin-top: 3rem !important; } .mr-6 { margin-right: 3rem !important; } .mb-6 { margin-bottom: 3rem !important; } .ml-6 { margin-left: 3rem !important; } .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; } .my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-auto { margin: auto !important; } .mt-auto { margin-top: auto !important; } .mr-auto { margin-right: auto !important; } .mb-auto { margin-bottom: auto !important; } .ml-auto { margin-left: auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pr-1 { padding-right: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-left: 0.25rem !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-left: 0.5rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .pt-3 { padding-top: 0.75rem !important; } .pr-3 { padding-right: 0.75rem !important; } .pb-3 { padding-bottom: 0.75rem !important; } .pl-3 { padding-left: 0.75rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .p-4 { padding: 1rem !important; } .pt-4 { padding-top: 1rem !important; } .pr-4 { padding-right: 1rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pl-4 { padding-left: 1rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-5 { padding: 1.5rem !important; } .pt-5 { padding-top: 1.5rem !important; } .pr-5 { padding-right: 1.5rem !important; } .pb-5 { padding-bottom: 1.5rem !important; } .pl-5 { padding-left: 1.5rem !important; } .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .p-6 { padding: 3rem !important; } .pt-6 { padding-top: 3rem !important; } .pr-6 { padding-right: 3rem !important; } .pb-6 { padding-bottom: 3rem !important; } .pl-6 { padding-left: 3rem !important; } .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-auto { padding: auto !important; } .pt-auto { padding-top: auto !important; } .pr-auto { padding-right: auto !important; } .pb-auto { padding-bottom: auto !important; } .pl-auto { padding-left: auto !important; } .px-auto { padding-left: auto !important; padding-right: auto !important; } .py-auto { padding-top: auto !important; padding-bottom: auto !important; } .is-size-1 { font-size: 3rem !important; } .is-size-2 { font-size: 2.5rem !important; } .is-size-3 { font-size: 2rem !important; } .is-size-4 { font-size: 1.5rem !important; } .is-size-5 { font-size: 1.25rem !important; } .is-size-6 { font-size: 1rem !important; } .is-size-7 { font-size: 0.75rem !important; } @media screen and (max-width: 768px) { .is-size-1-mobile { font-size: 3rem !important; } .is-size-2-mobile { font-size: 2.5rem !important; } .is-size-3-mobile { font-size: 2rem !important; } .is-size-4-mobile { font-size: 1.5rem !important; } .is-size-5-mobile { font-size: 1.25rem !important; } .is-size-6-mobile { font-size: 1rem !important; } .is-size-7-mobile { font-size: 0.75rem !important; } } @media screen and (min-width: 769px), print { .is-size-1-tablet { font-size: 3rem !important; } .is-size-2-tablet { font-size: 2.5rem !important; } .is-size-3-tablet { font-size: 2rem !important; } .is-size-4-tablet { font-size: 1.5rem !important; } .is-size-5-tablet { font-size: 1.25rem !important; } .is-size-6-tablet { font-size: 1rem !important; } .is-size-7-tablet { font-size: 0.75rem !important; } } @media screen and (max-width: 1023px) { .is-size-1-touch { font-size: 3rem !important; } .is-size-2-touch { font-size: 2.5rem !important; } .is-size-3-touch { font-size: 2rem !important; } .is-size-4-touch { font-size: 1.5rem !important; } .is-size-5-touch { font-size: 1.25rem !important; } .is-size-6-touch { font-size: 1rem !important; } .is-size-7-touch { font-size: 0.75rem !important; } } @media screen and (min-width: 1024px) { .is-size-1-desktop { font-size: 3rem !important; } .is-size-2-desktop { font-size: 2.5rem !important; } .is-size-3-desktop { font-size: 2rem !important; } .is-size-4-desktop { font-size: 1.5rem !important; } .is-size-5-desktop { font-size: 1.25rem !important; } .is-size-6-desktop { font-size: 1rem !important; } .is-size-7-desktop { font-size: 0.75rem !important; } } @media screen and (min-width: 1216px) { .is-size-1-widescreen { font-size: 3rem !important; } .is-size-2-widescreen { font-size: 2.5rem !important; } .is-size-3-widescreen { font-size: 2rem !important; } .is-size-4-widescreen { font-size: 1.5rem !important; } .is-size-5-widescreen { font-size: 1.25rem !important; } .is-size-6-widescreen { font-size: 1rem !important; } .is-size-7-widescreen { font-size: 0.75rem !important; } } .has-text-centered { text-align: center !important; } .has-text-justified { text-align: justify !important; } .has-text-left { text-align: left !important; } .has-text-right { text-align: right !important; } @media screen and (max-width: 768px) { .has-text-centered-mobile { text-align: center !important; } } @media screen and (min-width: 769px), print { .has-text-centered-tablet { text-align: center !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-centered-tablet-only { text-align: center !important; } } @media screen and (max-width: 1023px) { .has-text-centered-touch { text-align: center !important; } } @media screen and (min-width: 1024px) { .has-text-centered-desktop { text-align: center !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-centered-desktop-only { text-align: center !important; } } @media screen and (min-width: 1216px) { .has-text-centered-widescreen { text-align: center !important; } } @media screen and (max-width: 768px) { .has-text-justified-mobile { text-align: justify !important; } } @media screen and (min-width: 769px), print { .has-text-justified-tablet { text-align: justify !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-justified-tablet-only { text-align: justify !important; } } @media screen and (max-width: 1023px) { .has-text-justified-touch { text-align: justify !important; } } @media screen and (min-width: 1024px) { .has-text-justified-desktop { text-align: justify !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-justified-desktop-only { text-align: justify !important; } } @media screen and (min-width: 1216px) { .has-text-justified-widescreen { text-align: justify !important; } } @media screen and (max-width: 768px) { .has-text-left-mobile { text-align: left !important; } } @media screen and (min-width: 769px), print { .has-text-left-tablet { text-align: left !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-left-tablet-only { text-align: left !important; } } @media screen and (max-width: 1023px) { .has-text-left-touch { text-align: left !important; } } @media screen and (min-width: 1024px) { .has-text-left-desktop { text-align: left !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-left-desktop-only { text-align: left !important; } } @media screen and (min-width: 1216px) { .has-text-left-widescreen { text-align: left !important; } } @media screen and (max-width: 768px) { .has-text-right-mobile { text-align: right !important; } } @media screen and (min-width: 769px), print { .has-text-right-tablet { text-align: right !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-right-tablet-only { text-align: right !important; } } @media screen and (max-width: 1023px) { .has-text-right-touch { text-align: right !important; } } @media screen and (min-width: 1024px) { .has-text-right-desktop { text-align: right !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-right-desktop-only { text-align: right !important; } } @media screen and (min-width: 1216px) { .has-text-right-widescreen { text-align: right !important; } } .is-capitalized { text-transform: capitalize !important; } .is-lowercase { text-transform: lowercase !important; } .is-uppercase { text-transform: uppercase !important; } .is-italic { font-style: italic !important; } .is-underlined { text-decoration: underline !important; } .has-text-weight-light { font-weight: 300 !important; } .has-text-weight-normal { font-weight: 400 !important; } .has-text-weight-medium { font-weight: 500 !important; } .has-text-weight-semibold { font-weight: 600 !important; } .has-text-weight-bold { font-weight: 700 !important; } .is-family-primary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-secondary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-sans-serif { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-monospace { font-family: monospace !important; } .is-family-code { font-family: monospace !important; } .is-block { display: block !important; } @media screen and (max-width: 768px) { .is-block-mobile { display: block !important; } } @media screen and (min-width: 769px), print { .is-block-tablet { display: block !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-block-tablet-only { display: block !important; } } @media screen and (max-width: 1023px) { .is-block-touch { display: block !important; } } @media screen and (min-width: 1024px) { .is-block-desktop { display: block !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-block-desktop-only { display: block !important; } } @media screen and (min-width: 1216px) { .is-block-widescreen { display: block !important; } } .is-flex { display: flex !important; } @media screen and (max-width: 768px) { .is-flex-mobile { display: flex !important; } } @media screen and (min-width: 769px), print { .is-flex-tablet { display: flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-flex-tablet-only { display: flex !important; } } @media screen and (max-width: 1023px) { .is-flex-touch { display: flex !important; } } @media screen and (min-width: 1024px) { .is-flex-desktop { display: flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-flex-desktop-only { display: flex !important; } } @media screen and (min-width: 1216px) { .is-flex-widescreen { display: flex !important; } } .is-inline { display: inline !important; } @media screen and (max-width: 768px) { .is-inline-mobile { display: inline !important; } } @media screen and (min-width: 769px), print { .is-inline-tablet { display: inline !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-tablet-only { display: inline !important; } } @media screen and (max-width: 1023px) { .is-inline-touch { display: inline !important; } } @media screen and (min-width: 1024px) { .is-inline-desktop { display: inline !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-desktop-only { display: inline !important; } } @media screen and (min-width: 1216px) { .is-inline-widescreen { display: inline !important; } } .is-inline-block { display: inline-block !important; } @media screen and (max-width: 768px) { .is-inline-block-mobile { display: inline-block !important; } } @media screen and (min-width: 769px), print { .is-inline-block-tablet { display: inline-block !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-block-tablet-only { display: inline-block !important; } } @media screen and (max-width: 1023px) { .is-inline-block-touch { display: inline-block !important; } } @media screen and (min-width: 1024px) { .is-inline-block-desktop { display: inline-block !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-block-desktop-only { display: inline-block !important; } } @media screen and (min-width: 1216px) { .is-inline-block-widescreen { display: inline-block !important; } } .is-inline-flex { display: inline-flex !important; } @media screen and (max-width: 768px) { .is-inline-flex-mobile { display: inline-flex !important; } } @media screen and (min-width: 769px), print { .is-inline-flex-tablet { display: inline-flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-flex-tablet-only { display: inline-flex !important; } } @media screen and (max-width: 1023px) { .is-inline-flex-touch { display: inline-flex !important; } } @media screen and (min-width: 1024px) { .is-inline-flex-desktop { display: inline-flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-flex-desktop-only { display: inline-flex !important; } } @media screen and (min-width: 1216px) { .is-inline-flex-widescreen { display: inline-flex !important; } } .is-hidden { display: none !important; } .is-sr-only { border: none !important; clip: rect(0, 0, 0, 0) !important; height: 0.01em !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 0.01em !important; } @media screen and (max-width: 768px) { .is-hidden-mobile { display: none !important; } } @media screen and (min-width: 769px), print { .is-hidden-tablet { display: none !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-hidden-tablet-only { display: none !important; } } @media screen and (max-width: 1023px) { .is-hidden-touch { display: none !important; } } @media screen and (min-width: 1024px) { .is-hidden-desktop { display: none !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-hidden-desktop-only { display: none !important; } } @media screen and (min-width: 1216px) { .is-hidden-widescreen { display: none !important; } } .is-invisible { visibility: hidden !important; } @media screen and (max-width: 768px) { .is-invisible-mobile { visibility: hidden !important; } } @media screen and (min-width: 769px), print { .is-invisible-tablet { visibility: hidden !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-invisible-tablet-only { visibility: hidden !important; } } @media screen and (max-width: 1023px) { .is-invisible-touch { visibility: hidden !important; } } @media screen and (min-width: 1024px) { .is-invisible-desktop { visibility: hidden !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-invisible-desktop-only { visibility: hidden !important; } } @media screen and (min-width: 1216px) { .is-invisible-widescreen { visibility: hidden !important; } } /* Bulma Layout */ .hero { align-items: stretch; display: flex; flex-direction: column; justify-content: space-between; } .hero .navbar { background: none; } .hero .tabs ul { border-bottom: none; } .hero.is-white { background-color: var(--white); color: #0a0a0a; } .hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-white strong { color: inherit; } .hero.is-white .title { color: #0a0a0a; } .hero.is-white .subtitle { color: rgba(10, 10, 10, 0.9); } .hero.is-white .subtitle a:not(.button), .hero.is-white .subtitle strong { color: #0a0a0a; } @media screen and (max-width: 1023px) { .hero.is-white .navbar-menu { background-color: var(--white); } } .hero.is-white .navbar-item, .hero.is-white .navbar-link { color: rgba(10, 10, 10, 0.7); } .hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active, .hero.is-white .navbar-link:hover, .hero.is-white .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .hero.is-white .tabs a { color: #0a0a0a; opacity: 0.9; } .hero.is-white .tabs a:hover { opacity: 1; } .hero.is-white .tabs li.is-active a { color: var(--white) !important; opacity: 1; } .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { color: #0a0a0a; } .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .hero.is-black { background-color: #0a0a0a; color: var(--white); } .hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-black strong { color: inherit; } .hero.is-black .title { color: var(--white); } .hero.is-black .subtitle { color: var(--white); } .hero.is-black .subtitle a:not(.button), .hero.is-black .subtitle strong { color: var(--white); } @media screen and (max-width: 1023px) { .hero.is-black .navbar-menu { background-color: #0a0a0a; } } .hero.is-black .navbar-item, .hero.is-black .navbar-link { color: var(--white); } .hero.is-black a.navbar-item:hover, .hero.is-black a.navbar-item.is-active, .hero.is-black .navbar-link:hover, .hero.is-black .navbar-link.is-active { background-color: black; color: var(--white); } .hero.is-black .tabs a { color: var(--white); opacity: 0.9; } .hero.is-black .tabs a:hover { opacity: 1; } .hero.is-black .tabs li.is-active a { color: #0a0a0a !important; opacity: 1; } .hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { color: var(--white); } .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .hero.is-black.is-bold { background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } @media screen and (max-width: 768px) { .hero.is-black.is-bold .navbar-menu { background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } } .hero.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-light strong { color: inherit; } .hero.is-light .title { color: rgba(0, 0, 0, 0.7); } .hero.is-light .subtitle { color: rgba(0, 0, 0, 0.9); } .hero.is-light .subtitle a:not(.button), .hero.is-light .subtitle strong { color: rgba(0, 0, 0, 0.7); } @media screen and (max-width: 1023px) { .hero.is-light .navbar-menu { background-color: whitesmoke; } } .hero.is-light .navbar-item, .hero.is-light .navbar-link { color: rgba(0, 0, 0, 0.7); } .hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active, .hero.is-light .navbar-link:hover, .hero.is-light .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .hero.is-light .tabs a { color: rgba(0, 0, 0, 0.7); opacity: 0.9; } .hero.is-light .tabs a:hover { opacity: 1; } .hero.is-light .tabs li.is-active a { color: whitesmoke !important; opacity: 1; } .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { color: rgba(0, 0, 0, 0.7); } .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover { background-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .hero.is-light.is-bold { background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } @media screen and (max-width: 768px) { .hero.is-light.is-bold .navbar-menu { background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } } .hero.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-dark strong { color: inherit; } .hero.is-dark .title { color: var(--dark--color-invert); } .hero.is-dark .subtitle { color: var(--dark--color-invert); } .hero.is-dark .subtitle a:not(.button), .hero.is-dark .subtitle strong { color: var(--dark--color-invert); } @media screen and (max-width: 1023px) { .hero.is-dark .navbar-menu { background-color: var(--dark); } } .hero.is-dark .navbar-item, .hero.is-dark .navbar-link { color: var(--dark--color-invert); } .hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active, .hero.is-dark .navbar-link:hover, .hero.is-dark .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .hero.is-dark .tabs a { color: var(--dark--color-invert); opacity: 0.9; } .hero.is-dark .tabs a:hover { opacity: 1; } .hero.is-dark .tabs li.is-active a { color: var(--dark) !important; opacity: 1; } .hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { color: var(--dark--color-invert); } .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover { background-color: var(--dark--color-invert); border-color: var(--dark--color-invert); color: var(--dark); } .hero.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-primary strong { color: inherit; } .hero.is-primary .title { color: var(--primary--color-invert); } .hero.is-primary .subtitle { color: var(--primary--color-invert); } .hero.is-primary .subtitle a:not(.button), .hero.is-primary .subtitle strong { color: var(--primary--color-invert); } @media screen and (max-width: 1023px) { .hero.is-primary .navbar-menu { background-color: var(--primary); } } .hero.is-primary .navbar-item, .hero.is-primary .navbar-link { color: var(--primary--color-invert); } .hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, .hero.is-primary .navbar-link:hover, .hero.is-primary .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .hero.is-primary .tabs a { color: var(--primary--color-invert); opacity: 0.9; } .hero.is-primary .tabs a:hover { opacity: 1; } .hero.is-primary .tabs li.is-active a { color: var(--primary) !important; opacity: 1; } .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { color: var(--primary--color-invert); } .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { background-color: var(--primary--color-invert); border-color: var(--primary--color-invert); color: var(--primary); } .hero.is-link { background-color: var(--link); color: var(--link--color-invert); } .hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-link strong { color: inherit; } .hero.is-link .title { color: var(--link--color-invert); } .hero.is-link .subtitle { color: var(--link--color-invert); } .hero.is-link .subtitle a:not(.button), .hero.is-link .subtitle strong { color: var(--link--color-invert); } @media screen and (max-width: 1023px) { .hero.is-link .navbar-menu { background-color: var(--link); } } .hero.is-link .navbar-item, .hero.is-link .navbar-link { color: var(--link--color-invert); } .hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, .hero.is-link .navbar-link:hover, .hero.is-link .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .hero.is-link .tabs a { color: var(--link--color-invert); opacity: 0.9; } .hero.is-link .tabs a:hover { opacity: 1; } .hero.is-link .tabs li.is-active a { color: var(--link) !important; opacity: 1; } .hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { color: var(--link--color-invert); } .hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover { background-color: var(--link--color-invert); border-color: var(--link--color-invert); color: var(--link); } .hero.is-info { background-color: var(--info); color: var(--info--color-invert); } .hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-info strong { color: inherit; } .hero.is-info .title { color: var(--info--color-invert); } .hero.is-info .subtitle { color: var(--info--color-invert); } .hero.is-info .subtitle a:not(.button), .hero.is-info .subtitle strong { color: var(--info--color-invert); } @media screen and (max-width: 1023px) { .hero.is-info .navbar-menu { background-color: var(--info); } } .hero.is-info .navbar-item, .hero.is-info .navbar-link { color: var(--info--color-invert); } .hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, .hero.is-info .navbar-link:hover, .hero.is-info .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .hero.is-info .tabs a { color: var(--info--color-invert); opacity: 0.9; } .hero.is-info .tabs a:hover { opacity: 1; } .hero.is-info .tabs li.is-active a { color: var(--info) !important; opacity: 1; } .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { color: var(--info--color-invert); } .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { background-color: var(--info--color-invert); border-color: var(--info--color-invert); color: var(--info); } .hero.is-success { background-color: var(--success); color: var(--success--color-invert); } .hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-success strong { color: inherit; } .hero.is-success .title { color: var(--success--color-invert); } .hero.is-success .subtitle { color: var(--success--color-invert); } .hero.is-success .subtitle a:not(.button), .hero.is-success .subtitle strong { color: var(--success--color-invert); } @media screen and (max-width: 1023px) { .hero.is-success .navbar-menu { background-color: var(--success); } } .hero.is-success .navbar-item, .hero.is-success .navbar-link { color: var(--success--color-invert); } .hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, .hero.is-success .navbar-link:hover, .hero.is-success .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .hero.is-success .tabs a { color: var(--success--color-invert); opacity: 0.9; } .hero.is-success .tabs a:hover { opacity: 1; } .hero.is-success .tabs li.is-active a { color: var(--success) !important; opacity: 1; } .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { color: var(--success--color-invert); } .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { background-color: var(--success--color-invert); border-color: var(--success--color-invert); color: var(--success); } .hero.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-warning strong { color: inherit; } .hero.is-warning .title { color: var(--warning--color-invert); } .hero.is-warning .subtitle { color: var(--warning--color-invert); } .hero.is-warning .subtitle a:not(.button), .hero.is-warning .subtitle strong { color: var(--warning--color-invert); } @media screen and (max-width: 1023px) { .hero.is-warning .navbar-menu { background-color: var(--warning); } } .hero.is-warning .navbar-item, .hero.is-warning .navbar-link { color: var(--warning--color-invert); } .hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, .hero.is-warning .navbar-link:hover, .hero.is-warning .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .hero.is-warning .tabs a { color: var(--warning--color-invert); opacity: 0.9; } .hero.is-warning .tabs a:hover { opacity: 1; } .hero.is-warning .tabs li.is-active a { color: var(--warning) !important; opacity: 1; } .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { color: var(--warning--color-invert); } .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { background-color: var(--warning--color-invert); border-color: var(--warning--color-invert); color: var(--warning); } .hero.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-danger strong { color: inherit; } .hero.is-danger .title { color: var(--danger--color-invert); } .hero.is-danger .subtitle { color: var(--danger--color-invert); } .hero.is-danger .subtitle a:not(.button), .hero.is-danger .subtitle strong { color: var(--danger--color-invert); } @media screen and (max-width: 1023px) { .hero.is-danger .navbar-menu { background-color: var(--danger); } } .hero.is-danger .navbar-item, .hero.is-danger .navbar-link { color: var(--danger--color-invert); } .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, .hero.is-danger .navbar-link:hover, .hero.is-danger .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .hero.is-danger .tabs a { color: var(--danger--color-invert); opacity: 0.9; } .hero.is-danger .tabs a:hover { opacity: 1; } .hero.is-danger .tabs li.is-active a { color: var(--danger) !important; opacity: 1; } .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { color: var(--danger--color-invert); } .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { background-color: var(--danger--color-invert); border-color: var(--danger--color-invert); color: var(--danger); } .hero.is-small .hero-body { padding: 1.5rem; } @media screen and (min-width: 769px), print { .hero.is-medium .hero-body { padding: 9rem 4.5rem; } } @media screen and (min-width: 769px), print { .hero.is-large .hero-body { padding: 18rem 6rem; } } .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body { align-items: center; display: flex; } .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container { flex-grow: 1; flex-shrink: 1; } .hero.is-halfheight { min-height: 50vh; } .hero.is-fullheight { min-height: 100vh; } .hero-video { overflow: hidden; } .hero-video video { left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; transform: translate3d(-50%, -50%, 0); } .hero-video.is-transparent { opacity: 0.3; } @media screen and (max-width: 768px) { .hero-video { display: none; } } .hero-buttons { margin-top: 1.5rem; } @media screen and (max-width: 768px) { .hero-buttons .button { display: flex; } .hero-buttons .button:not(:last-child) { margin-bottom: 0.75rem; } } @media screen and (min-width: 769px), print { .hero-buttons { display: flex; justify-content: center; } .hero-buttons .button:not(:last-child) { margin-right: 1.5rem; } } .hero-head, .hero-foot { flex-grow: 0; flex-shrink: 0; } .hero-body { flex-grow: 1; flex-shrink: 0; padding: 3rem 1.5rem; } @media screen and (min-width: 769px), print { .hero-body { padding: 3rem 3rem; } } .section { padding: 3rem 1.5rem; } @media screen and (min-width: 1024px) { .section { padding: 3rem 3rem; } .section.is-medium { padding: 9rem 4.5rem; } .section.is-large { padding: 18rem 6rem; } } .footer { background-color: #fafafa; padding: 3rem 1.5rem 6rem; } /* Bulma Base */ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; } button, input, select, textarea { margin: 0; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } img, video { height: auto; max-width: 100%; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } td:not([align]), th:not([align]) { text-align: inherit; } html { background-color: var(--white); font-size: var(--font-size); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; text-size-adjust: 100%; } article, aside, figure, footer, header, hgroup, section { display: block; } body, button, input, optgroup, select, textarea { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; } body { color: var(--body-color); font-size: 1em; font-weight: 400; line-height: 1.5; } a { color: var(--link); cursor: pointer; text-decoration: none; } a strong { color: currentColor; } a:hover { color: #363636; } code { background-color: whitesmoke; color: #da1039; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; } hr { background-color: whitesmoke; border: none; display: block; height: 2px; margin: 1.5rem 0; } img { height: auto; max-width: 100%; } input[type=checkbox], input[type=radio] { vertical-align: baseline; } small { font-size: 0.875em; } span { font-style: inherit; font-weight: inherit; } strong { color: #363636; font-weight: 700; } fieldset { border: none; } pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; } pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; } table td, table th { vertical-align: top; } table td:not([align]), table th:not([align]) { text-align: inherit; } table th { color: #363636; } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* Bulma Elements */ .box { background-color: var(--white); border-radius: var(--radius-large); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: block; padding: 1.25rem; } a.box:hover, a.box:focus { box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px var(--link); } a.box:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px var(--link); } .button { background-color: var(--white); border-color: var(--border); border-width: 1px; color: #363636; cursor: pointer; justify-content: center; padding-bottom: calc(0.5em - 1px); padding-left: 1em; padding-right: 1em; padding-top: calc(0.5em - 1px); text-align: center; white-space: nowrap; } .button strong { color: inherit; } .button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large { height: 1.5em; width: 1.5em; } .button .icon:first-child:not(:last-child) { margin-left: calc(-0.5em - 1px); margin-right: 0.25em; } .button .icon:last-child:not(:first-child) { margin-left: 0.25em; margin-right: calc(-0.5em - 1px); } .button .icon:first-child:last-child { margin-left: calc(-0.5em - 1px); margin-right: calc(-0.5em - 1px); } .button:hover, .button.is-hovered { border-color: #b5b5b5; color: #363636; } .button:focus, .button.is-focused { border-color: #485fc7; color: #363636; } .button:focus:not(:active), .button.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--link); } .button:active, .button.is-active { border-color: #4a4a4a; color: #363636; } .button.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline; } .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused { background-color: whitesmoke; color: #363636; } .button.is-text:active, .button.is-text.is-active { background-color: #e8e8e8; color: #363636; } .button.is-text[disabled], fieldset[disabled] .button.is-text { background-color: transparent; border-color: transparent; box-shadow: none; } .button.is-ghost { background: none; border-color: transparent; color: var(--link); text-decoration: none; } .button.is-ghost:hover, .button.is-ghost.is-hovered { color: var(--link); text-decoration: underline; } .button.is-white { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white:hover, .button.is-white.is-hovered { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white:focus, .button.is-white.is-focused { border-color: transparent; color: #0a0a0a; } .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--white); } .button.is-white:active, .button.is-white.is-active { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .button.is-white[disabled], fieldset[disabled] .button.is-white { background-color: var(--white); border-color: transparent; box-shadow: none; } .button.is-white.is-inverted { background-color: #0a0a0a; color: var(--white); } .button.is-white.is-inverted:hover, .button.is-white.is-inverted.is-hovered { background-color: black; } .button.is-white.is-inverted[disabled], fieldset[disabled] .button.is-white.is-inverted { background-color: #0a0a0a; border-color: transparent; box-shadow: none; color: var(--white); } .button.is-white.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-white.is-outlined { background-color: transparent; border-color: var(--white); color: var(--white); } .button.is-white.is-outlined:hover, .button.is-white.is-outlined.is-hovered, .button.is-white.is-outlined:focus, .button.is-white.is-outlined.is-focused { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .button.is-white.is-outlined.is-loading::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-white.is-outlined.is-loading:hover::after, .button.is-white.is-outlined.is-loading.is-hovered::after, .button.is-white.is-outlined.is-loading:focus::after, .button.is-white.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-white.is-outlined[disabled], fieldset[disabled] .button.is-white.is-outlined { background-color: transparent; border-color: var(--white); box-shadow: none; color: var(--white); } .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } .button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined.is-hovered, .button.is-white.is-inverted.is-outlined:focus, .button.is-white.is-inverted.is-outlined.is-focused { background-color: #0a0a0a; color: var(--white); } .button.is-white.is-inverted.is-outlined.is-loading:hover::after, .button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-white.is-inverted.is-outlined.is-loading:focus::after, .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-white.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a; } .button.is-black { background-color: #0a0a0a; border-color: transparent; color: var(--white); } .button.is-black:hover, .button.is-black.is-hovered { background-color: #040404; border-color: transparent; color: var(--white); } .button.is-black:focus, .button.is-black.is-focused { border-color: transparent; color: var(--white); } .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .button.is-black:active, .button.is-black.is-active { background-color: black; border-color: transparent; color: var(--white); } .button.is-black[disabled], fieldset[disabled] .button.is-black { background-color: #0a0a0a; border-color: transparent; box-shadow: none; } .button.is-black.is-inverted { background-color: var(--white); color: #0a0a0a; } .button.is-black.is-inverted:hover, .button.is-black.is-inverted.is-hovered { background-color: var(--white); } .button.is-black.is-inverted[disabled], fieldset[disabled] .button.is-black.is-inverted { background-color: var(--white); border-color: transparent; box-shadow: none; color: #0a0a0a; } .button.is-black.is-loading::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } .button.is-black.is-outlined:hover, .button.is-black.is-outlined.is-hovered, .button.is-black.is-outlined:focus, .button.is-black.is-outlined.is-focused { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .button.is-black.is-outlined.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-black.is-outlined.is-loading:hover::after, .button.is-black.is-outlined.is-loading.is-hovered::after, .button.is-black.is-outlined.is-loading:focus::after, .button.is-black.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--white) var(--white) !important; } .button.is-black.is-outlined[disabled], fieldset[disabled] .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a; } .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: var(--white); color: var(--white); } .button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined.is-hovered, .button.is-black.is-inverted.is-outlined:focus, .button.is-black.is-inverted.is-outlined.is-focused { background-color: var(--white); color: #0a0a0a; } .button.is-black.is-inverted.is-outlined.is-loading:hover::after, .button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-black.is-inverted.is-outlined.is-loading:focus::after, .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } .button.is-black.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: var(--white); box-shadow: none; color: var(--white); } .button.is-light { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:hover, .button.is-light.is-hovered { background-color: #eeeeee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:focus, .button.is-light.is-focused { border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .button.is-light:active, .button.is-light.is-active { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-light[disabled], fieldset[disabled] .button.is-light { background-color: whitesmoke; border-color: transparent; box-shadow: none; } .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .button.is-light.is-inverted:hover, .button.is-light.is-inverted.is-hovered { background-color: rgba(0, 0, 0, 0.7); } .button.is-light.is-inverted[disabled], fieldset[disabled] .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); border-color: transparent; box-shadow: none; color: whitesmoke; } .button.is-light.is-loading::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-light.is-outlined { background-color: transparent; border-color: whitesmoke; color: whitesmoke; } .button.is-light.is-outlined:hover, .button.is-light.is-outlined.is-hovered, .button.is-light.is-outlined:focus, .button.is-light.is-outlined.is-focused { background-color: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .button.is-light.is-outlined.is-loading::after { border-color: transparent transparent whitesmoke whitesmoke !important; } .button.is-light.is-outlined.is-loading:hover::after, .button.is-light.is-outlined.is-loading.is-hovered::after, .button.is-light.is-outlined.is-loading:focus::after, .button.is-light.is-outlined.is-loading.is-focused::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-light.is-outlined[disabled], fieldset[disabled] .button.is-light.is-outlined { background-color: transparent; border-color: whitesmoke; box-shadow: none; color: whitesmoke; } .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7); } .button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined.is-hovered, .button.is-light.is-inverted.is-outlined:focus, .button.is-light.is-inverted.is-outlined.is-focused { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .button.is-light.is-inverted.is-outlined.is-loading:hover::after, .button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-light.is-inverted.is-outlined.is-loading:focus::after, .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent whitesmoke whitesmoke !important; } .button.is-light.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); box-shadow: none; color: rgba(0, 0, 0, 0.7); } .button.is-dark { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:hover, .button.is-dark.is-hovered { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:focus, .button.is-dark.is-focused { border-color: transparent; color: var(--dark--color-invert); } .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--dark); } .button.is-dark:active, .button.is-dark.is-active { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .button.is-dark[disabled], fieldset[disabled] .button.is-dark { background-color: var(--dark); border-color: transparent; box-shadow: none; } .button.is-dark.is-inverted { background-color: var(--dark--color-invert); color: var(--dark); } .button.is-dark.is-inverted:hover, .button.is-dark.is-inverted.is-hovered { background-color: var(--dark--color-invert); } .button.is-dark.is-inverted[disabled], fieldset[disabled] .button.is-dark.is-inverted { background-color: var(--dark--color-invert); border-color: transparent; box-shadow: none; color: var(--dark); } .button.is-dark.is-loading::after { border-color: transparent transparent var(--dark--color-invert) var(--dark--color-invert) !important; } .button.is-dark.is-outlined { background-color: transparent; border-color: var(--dark); color: var(--dark); } .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, .button.is-dark.is-outlined.is-focused { background-color: var(--dark); border-color: var(--dark); color: var(--dark--color-invert); } .button.is-dark.is-outlined.is-loading::after { border-color: transparent transparent var(--dark) var(--dark) !important; } .button.is-dark.is-outlined.is-loading:hover::after, .button.is-dark.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-outlined.is-loading:focus::after, .button.is-dark.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--dark--color-invert) var(--dark--color-invert) !important; } .button.is-dark.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-outlined { background-color: transparent; border-color: var(--dark); box-shadow: none; color: var(--dark); } .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: var(--dark--color-invert); color: var(--dark--color-invert); } .button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined.is-hovered, .button.is-dark.is-inverted.is-outlined:focus, .button.is-dark.is-inverted.is-outlined.is-focused { background-color: var(--dark--color-invert); color: var(--dark); } .button.is-dark.is-inverted.is-outlined.is-loading:hover::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-inverted.is-outlined.is-loading:focus::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--dark) var(--dark) !important; } .button.is-dark.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: var(--dark--color-invert); box-shadow: none; color: var(--dark--color-invert); } .button.is-primary { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:hover, .button.is-primary.is-hovered { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; color: var(--primary--color-invert); } .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--primary); } .button.is-primary:active, .button.is-primary.is-active { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .button.is-primary[disabled], fieldset[disabled] .button.is-primary { background-color: var(--primary); border-color: transparent; box-shadow: none; } .button.is-primary.is-inverted { background-color: var(--primary--color-invert); color: var(--primary); } .button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered { background-color: var(--primary--color-invert); } .button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted { background-color: var(--primary--color-invert); border-color: transparent; box-shadow: none; color: var(--primary); } .button.is-primary.is-loading::after { border-color: transparent transparent var(--primary--color-invert) var(--primary--color-invert) !important; } .button.is-primary.is-outlined { background-color: transparent; border-color: var(--primary); color: var(--primary); } .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused { background-color: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .button.is-primary.is-outlined.is-loading::after { border-color: transparent transparent var(--primary) var(--primary) !important; } .button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--primary--color-invert) var(--primary--color-invert) !important; } .button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined { background-color: transparent; border-color: var(--primary); box-shadow: none; color: var(--primary); } .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: var(--primary--color-invert); color: var(--primary--color-invert); } .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused { background-color: var(--primary--color-invert); color: var(--primary); } .button.is-primary.is-inverted.is-outlined.is-loading:hover::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-inverted.is-outlined.is-loading:focus::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--primary) var(--primary) !important; } .button.is-primary.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: var(--primary--color-invert); box-shadow: none; color: var(--primary--color-invert); } .button.is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered { background-color: var(--primary--light-color); border-color: transparent; color: var(--primary--dark-color); } .button.is-primary.is-light:active, .button.is-primary.is-light.is-active { background-color: var(--primary--light-color); border-color: transparent; color: var(--primary--dark-color); } .button.is-link { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link:hover, .button.is-link.is-hovered { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link:focus, .button.is-link.is-focused { border-color: transparent; color: var(--link--color-invert); } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--link); } .button.is-link:active, .button.is-link.is-active { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .button.is-link[disabled], fieldset[disabled] .button.is-link { background-color: var(--link); border-color: transparent; box-shadow: none; } .button.is-link.is-inverted { background-color: var(--link--color-invert); color: var(--link); } .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { background-color: var(--link--color-invert); } .button.is-link.is-inverted[disabled], fieldset[disabled] .button.is-link.is-inverted { background-color: var(--link--color-invert); border-color: transparent; box-shadow: none; color: var(--link); } .button.is-link.is-loading::after { border-color: transparent transparent var(--link--color-invert) var(--link--color-invert) !important; } .button.is-link.is-outlined { background-color: transparent; border-color: var(--link); color: var(--link); } .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .button.is-link.is-outlined.is-loading::after { border-color: transparent transparent var(--link) var(--link) !important; } .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--link--color-invert) var(--link--color-invert) !important; } .button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { background-color: transparent; border-color: var(--link); box-shadow: none; color: var(--link); } .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: var(--link--color-invert); color: var(--link--color-invert); } .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused { background-color: var(--link--color-invert); color: var(--link); } .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--link) var(--link) !important; } .button.is-link.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: var(--link--color-invert); box-shadow: none; color: var(--link--color-invert); } .button.is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { background-color: var(--link--light-color); border-color: transparent; color: var(--link--dark-color); } .button.is-link.is-light:active, .button.is-link.is-light.is-active { background-color: var(--link--light-color); border-color: transparent; color: var(--link--dark-color); } .button.is-info { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info:hover, .button.is-info.is-hovered { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; color: var(--info--color-invert); } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--info); } .button.is-info:active, .button.is-info.is-active { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .button.is-info[disabled], fieldset[disabled] .button.is-info { background-color: var(--info); border-color: transparent; box-shadow: none; } .button.is-info.is-inverted { background-color: var(--info--color-invert); color: var(--info); } .button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { background-color: var(--info--color-invert); } .button.is-info.is-inverted[disabled], fieldset[disabled] .button.is-info.is-inverted { background-color: var(--info--color-invert); border-color: transparent; box-shadow: none; color: var(--info); } .button.is-info.is-loading::after { border-color: transparent transparent var(--info--color-invert) var(--info--color-invert) !important; } .button.is-info.is-outlined { background-color: transparent; border-color: var(--info); color: var(--info); } .button.is-info.is-outlined:hover, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined.is-focused { background-color: var(--info); border-color: var(--info); color: var(--info--color-invert); } .button.is-info.is-outlined.is-loading::after { border-color: transparent transparent var(--info) var(--info) !important; } .button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--info--color-invert) var(--info--color-invert) !important; } .button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { background-color: transparent; border-color: var(--info); box-shadow: none; color: var(--info); } .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: var(--info--color-invert); color: var(--info--color-invert); } .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined.is-hovered, .button.is-info.is-inverted.is-outlined:focus, .button.is-info.is-inverted.is-outlined.is-focused { background-color: var(--info--color-invert); color: var(--info); } .button.is-info.is-inverted.is-outlined.is-loading:hover::after, .button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-info.is-inverted.is-outlined.is-loading:focus::after, .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--info) var(--info) !important; } .button.is-info.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: var(--info--color-invert); box-shadow: none; color: var(--info--color-invert); } .button.is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { background-color: var(--info--light-color); border-color: transparent; color: var(--info--dark-color); } .button.is-info.is-light:active, .button.is-info.is-light.is-active { background-color: var(--info--light-color); border-color: transparent; color: var(--info--dark-color); } .button.is-success { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success:hover, .button.is-success.is-hovered { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; color: var(--success--color-invert); } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--success); } .button.is-success:active, .button.is-success.is-active { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .button.is-success[disabled], fieldset[disabled] .button.is-success { background-color: var(--success); border-color: transparent; box-shadow: none; } .button.is-success.is-inverted { background-color: var(--success--color-invert); color: var(--success); } .button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { background-color: var(--success--color-invert); } .button.is-success.is-inverted[disabled], fieldset[disabled] .button.is-success.is-inverted { background-color: var(--success--color-invert); border-color: transparent; box-shadow: none; color: var(--success); } .button.is-success.is-loading::after { border-color: transparent transparent var(--success--color-invert) var(--success--color-invert) !important; } .button.is-success.is-outlined { background-color: transparent; border-color: var(--success); color: var(--success); } .button.is-success.is-outlined:hover, .button.is-success.is-outlined.is-hovered, .button.is-success.is-outlined:focus, .button.is-success.is-outlined.is-focused { background-color: var(--success); border-color: var(--success); color: var(--success--color-invert); } .button.is-success.is-outlined.is-loading::after { border-color: transparent transparent var(--success) var(--success) !important; } .button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--success--color-invert) var(--success--color-invert) !important; } .button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { background-color: transparent; border-color: var(--success); box-shadow: none; color: var(--success); } .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: var(--success--color-invert); color: var(--success--color-invert); } .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined.is-hovered, .button.is-success.is-inverted.is-outlined:focus, .button.is-success.is-inverted.is-outlined.is-focused { background-color: var(--success--color-invert); color: var(--success); } .button.is-success.is-inverted.is-outlined.is-loading:hover::after, .button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-success.is-inverted.is-outlined.is-loading:focus::after, .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--success) var(--success) !important; } .button.is-success.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: var(--success--color-invert); box-shadow: none; color: var(--success--color-invert); } .button.is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { background-color: var(--success--light-color); border-color: transparent; color: var(--success--dark-color); } .button.is-success.is-light:active, .button.is-success.is-light.is-active { background-color: var(--success--light-color); border-color: transparent; color: var(--success--dark-color); } .button.is-warning { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:hover, .button.is-warning.is-hovered { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; color: var(--warning--color-invert); } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--warning); } .button.is-warning:active, .button.is-warning.is-active { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .button.is-warning[disabled], fieldset[disabled] .button.is-warning { background-color: var(--warning); border-color: transparent; box-shadow: none; } .button.is-warning.is-inverted { background-color: var(--warning--color-invert); color: var(--warning); } .button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { background-color: var(--warning--color-invert); } .button.is-warning.is-inverted[disabled], fieldset[disabled] .button.is-warning.is-inverted { background-color: var(--warning--color-invert); border-color: transparent; box-shadow: none; color: var(--warning); } .button.is-warning.is-loading::after { border-color: transparent transparent var(--warning--color-invert) var(--warning--color-invert) !important; } .button.is-warning.is-outlined { background-color: transparent; border-color: var(--warning); color: var(--warning); } .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined.is-hovered, .button.is-warning.is-outlined:focus, .button.is-warning.is-outlined.is-focused { background-color: var(--warning); border-color: var(--warning); color: var(--warning--color-invert); } .button.is-warning.is-outlined.is-loading::after { border-color: transparent transparent var(--warning) var(--warning) !important; } .button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--warning--color-invert) var(--warning--color-invert) !important; } .button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { background-color: transparent; border-color: var(--warning); box-shadow: none; color: var(--warning); } .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: var(--warning--color-invert); color: var(--warning--color-invert); } .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined.is-hovered, .button.is-warning.is-inverted.is-outlined:focus, .button.is-warning.is-inverted.is-outlined.is-focused { background-color: var(--warning--color-invert); color: var(--warning); } .button.is-warning.is-inverted.is-outlined.is-loading:hover::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-inverted.is-outlined.is-loading:focus::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--warning) var(--warning) !important; } .button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: var(--warning--color-invert); box-shadow: none; color: var(--warning--color-invert); } .button.is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { background-color: var(--warning--light-color); border-color: transparent; color: var(--warning--dark-color); } .button.is-warning.is-light:active, .button.is-warning.is-light.is-active { background-color: var(--warning--light-color); border-color: transparent; color: var(--warning--dark-color); } .button.is-danger { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:hover, .button.is-danger.is-hovered { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; color: var(--danger--color-invert); } .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { box-shadow: 0 0 0 0.125em var(--danger); } .button.is-danger:active, .button.is-danger.is-active { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .button.is-danger[disabled], fieldset[disabled] .button.is-danger { background-color: var(--danger); border-color: transparent; box-shadow: none; } .button.is-danger.is-inverted { background-color: var(--danger--color-invert); color: var(--danger); } .button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered { background-color: var(--danger--color-invert); } .button.is-danger.is-inverted[disabled], fieldset[disabled] .button.is-danger.is-inverted { background-color: var(--danger--color-invert); border-color: transparent; box-shadow: none; color: var(--danger); } .button.is-danger.is-loading::after { border-color: transparent transparent var(--danger--color-invert) var(--danger--color-invert) !important; } .button.is-danger.is-outlined { background-color: transparent; border-color: var(--danger); color: var(--danger); } .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused { background-color: var(--danger); border-color: var(--danger); color: var(--danger--color-invert); } .button.is-danger.is-outlined.is-loading::after { border-color: transparent transparent var(--danger) var(--danger) !important; } .button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--danger--color-invert) var(--danger--color-invert) !important; } .button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined { background-color: transparent; border-color: var(--danger); box-shadow: none; color: var(--danger); } .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: var(--danger--color-invert); color: var(--danger--color-invert); } .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused { background-color: var(--danger--color-invert); color: var(--danger); } .button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent var(--danger) var(--danger) !important; } .button.is-danger.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: var(--danger--color-invert); box-shadow: none; color: var(--danger--color-invert); } .button.is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered { background-color: var(--danger--light-color); border-color: transparent; color: var(--danger--dark-color); } .button.is-danger.is-light:active, .button.is-danger.is-light.is-active { background-color: var(--danger--light-color); border-color: transparent; color: var(--danger--dark-color); } .button.is-small { font-size: 0.75rem; } .button.is-small:not(.is-rounded) { border-radius: var(--radius-small); } .button.is-normal { font-size: 1rem; } .button.is-medium { font-size: 1.25rem; } .button.is-large { font-size: 1.5rem; } .button[disabled], fieldset[disabled] .button { background-color: var(--white); border-color: var(--border); box-shadow: none; opacity: 0.5; } .button.is-fullwidth { display: flex; width: 100%; } .button.is-loading { color: transparent !important; pointer-events: none; } .button.is-loading::after { position: absolute; left: calc(50% - (1em * 0.5)); top: calc(50% - (1em * 0.5)); position: absolute !important; } .button.is-static { background-color: whitesmoke; border-color: var(--border); color: #7a7a7a; box-shadow: none; pointer-events: none; } .button.is-rounded { border-radius: var(--radius-rounded); padding-left: calc(1em + 0.25em); padding-right: calc(1em + 0.25em); } .buttons { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } .buttons .button { margin-bottom: 0.5rem; } .buttons .button:not(:last-child):not(.is-fullwidth) { margin-right: 0.5rem; } .buttons:last-child { margin-bottom: -0.5rem; } .buttons:not(:last-child) { margin-bottom: 1rem; } .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) { font-size: 0.75rem; } .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) { border-radius: var(--radius-small); } .buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) { font-size: 1.25rem; } .buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) { font-size: 1.5rem; } .buttons.has-addons .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } .buttons.has-addons .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -1px; } .buttons.has-addons .button:last-child { margin-right: 0; } .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { z-index: 2; } .buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected { z-index: 3; } .buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover { z-index: 4; } .buttons.has-addons .button.is-expanded { flex-grow: 1; flex-shrink: 1; } .buttons.is-centered { justify-content: center; } .buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } .buttons.is-right { justify-content: flex-end; } .buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } .container { flex-grow: 1; margin: 0 auto; position: relative; width: auto; } .container.is-fluid { max-width: none !important; padding-left: 32px; padding-right: 32px; width: 100%; } @media screen and (min-width: 1024px) { .container { max-width: 960px; } } @media screen and (max-width: 1215px) { .container.is-widescreen:not(.is-max-desktop) { max-width: 1152px; } } @media screen and (min-width: 1216px) { .container:not(.is-max-desktop) { max-width: 1152px; } } .content li + li { margin-top: 0.25em; } .content p:not(:last-child), .content dl:not(:last-child), .content ol:not(:last-child), .content ul:not(:last-child), .content blockquote:not(:last-child), .content pre:not(:last-child), .content table:not(:last-child) { margin-bottom: 1em; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #363636; font-weight: 600; line-height: 1.125; } .content h1 { font-size: 2em; margin-bottom: 0.5em; } .content h1:not(:first-child) { margin-top: 1em; } .content h2 { font-size: 1.75em; margin-bottom: 0.5714em; } .content h2:not(:first-child) { margin-top: 1.1428em; } .content h3 { font-size: 1.5em; margin-bottom: 0.6666em; } .content h3:not(:first-child) { margin-top: 1.3333em; } .content h4 { font-size: 1.25em; margin-bottom: 0.8em; } .content h5 { font-size: 1.125em; margin-bottom: 0.8888em; } .content h6 { font-size: 1em; margin-bottom: 1em; } .content blockquote { background-color: whitesmoke; border-left: 5px solid var(--border); padding: 1.25em 1.5em; } .content ol { list-style-position: outside; margin-left: 2em; margin-top: 1em; } .content ol:not([type]) { list-style-type: decimal; } .content ol:not([type]).is-lower-alpha { list-style-type: lower-alpha; } .content ol:not([type]).is-lower-roman { list-style-type: lower-roman; } .content ol:not([type]).is-upper-alpha { list-style-type: upper-alpha; } .content ol:not([type]).is-upper-roman { list-style-type: upper-roman; } .content ul { list-style: disc outside; margin-left: 2em; margin-top: 1em; } .content ul ul { list-style-type: circle; margin-top: 0.5em; } .content ul ul ul { list-style-type: square; } .content dd { margin-left: 2em; } .content figure { margin-left: 2em; margin-right: 2em; text-align: center; } .content figure:not(:first-child) { margin-top: 2em; } .content figure:not(:last-child) { margin-bottom: 2em; } .content figure img { display: inline-block; } .content figure figcaption { font-style: italic; } .content pre { -webkit-overflow-scrolling: touch; overflow-x: auto; padding: 1.25em 1.5em; white-space: pre; word-wrap: normal; } .content sup, .content sub { font-size: 75%; } .content table { width: 100%; } .content table td, .content table th { border: 1px solid var(--border); border-width: 0 0 1px; padding: 0.5em 0.75em; vertical-align: top; } .content table th { color: #363636; } .content table th:not([align]) { text-align: inherit; } .content table thead td, .content table thead th { border-width: 0 0 2px; color: #363636; } .content table tfoot td, .content table tfoot th { border-width: 2px 0 0; color: #363636; } .content table tbody tr:last-child td, .content table tbody tr:last-child th { border-bottom-width: 0; } .content .tabs li + li { margin-top: 0; } .content.is-small { font-size: 0.75rem; } .content.is-normal { font-size: 1rem; } .content.is-medium { font-size: 1.25rem; } .content.is-large { font-size: 1.5rem; } .icon { align-items: center; display: inline-flex; justify-content: center; height: 1.5rem; width: 1.5rem; } .icon.is-small { height: 1rem; width: 1rem; } .icon.is-medium { height: 2rem; width: 2rem; } .icon.is-large { height: 3rem; width: 3rem; } .icon-text { align-items: flex-start; color: inherit; display: inline-flex; flex-wrap: wrap; line-height: 1.5rem; vertical-align: top; } .icon-text .icon { flex-grow: 0; flex-shrink: 0; } .icon-text .icon:not(:last-child) { margin-right: 0.25em; } .icon-text .icon:not(:first-child) { margin-left: 0.25em; } div.icon-text { display: flex; } .image { display: block; position: relative; } .image img { display: block; height: auto; width: 100%; } .image img.is-rounded { border-radius: var(--radius-rounded); } .image.is-fullwidth { width: 100%; } .image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, .image.is-1by1 .has-ratio, .image.is-5by4 img, .image.is-5by4 .has-ratio, .image.is-4by3 img, .image.is-4by3 .has-ratio, .image.is-3by2 img, .image.is-3by2 .has-ratio, .image.is-5by3 img, .image.is-5by3 .has-ratio, .image.is-16by9 img, .image.is-16by9 .has-ratio, .image.is-2by1 img, .image.is-2by1 .has-ratio, .image.is-3by1 img, .image.is-3by1 .has-ratio, .image.is-4by5 img, .image.is-4by5 .has-ratio, .image.is-3by4 img, .image.is-3by4 .has-ratio, .image.is-2by3 img, .image.is-2by3 .has-ratio, .image.is-3by5 img, .image.is-3by5 .has-ratio, .image.is-9by16 img, .image.is-9by16 .has-ratio, .image.is-1by2 img, .image.is-1by2 .has-ratio, .image.is-1by3 img, .image.is-1by3 .has-ratio { height: 100%; width: 100%; } .image.is-square, .image.is-1by1 { padding-top: 100%; } .image.is-5by4 { padding-top: 80%; } .image.is-4by3 { padding-top: 75%; } .image.is-3by2 { padding-top: 66.6666%; } .image.is-5by3 { padding-top: 60%; } .image.is-16by9 { padding-top: 56.25%; } .image.is-2by1 { padding-top: 50%; } .image.is-3by1 { padding-top: 33.3333%; } .image.is-4by5 { padding-top: 125%; } .image.is-3by4 { padding-top: 133.3333%; } .image.is-2by3 { padding-top: 150%; } .image.is-3by5 { padding-top: 166.6666%; } .image.is-9by16 { padding-top: 177.7777%; } .image.is-1by2 { padding-top: 200%; } .image.is-1by3 { padding-top: 300%; } .image.is-16x16 { height: 16px; width: 16px; } .image.is-24x24 { height: 24px; width: 24px; } .image.is-32x32 { height: 32px; width: 32px; } .image.is-48x48 { height: 48px; width: 48px; } .image.is-64x64 { height: 64px; width: 64px; } .image.is-96x96 { height: 96px; width: 96px; } .image.is-128x128 { height: 128px; width: 128px; } .notification { background-color: whitesmoke; border-radius: var(--radius); position: relative; padding: 1.25rem 2.5rem 1.25rem 1.5rem; } .notification a:not(.button):not(.dropdown-item) { color: currentColor; text-decoration: underline; } .notification strong { color: currentColor; } .notification code, .notification pre { background: var(--white); } .notification pre code { background: transparent; } .notification > .delete { right: 0.5rem; position: absolute; top: 0.5rem; } .notification .title, .notification .subtitle, .notification .content { color: currentColor; } .notification.is-white { background-color: var(--white); color: #0a0a0a; } .notification.is-black { background-color: #0a0a0a; color: var(--white); } .notification.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .notification.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .notification.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .notification.is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .notification.is-link { background-color: var(--link); color: var(--link--color-invert); } .notification.is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .notification.is-info { background-color: var(--info); color: var(--info--color-invert); } .notification.is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .notification.is-success { background-color: var(--success); color: var(--success--color-invert); } .notification.is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .notification.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .notification.is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .notification.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .notification.is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .progress { -moz-appearance: none; -webkit-appearance: none; border: none; border-radius: var(--radius-rounded); display: block; height: 1rem; overflow: hidden; padding: 0; width: 100%; } .progress::-webkit-progress-bar { background-color: #ededed; } .progress::-webkit-progress-value { background-color: #4a4a4a; } .progress::-moz-progress-bar { background-color: #4a4a4a; } .progress::-ms-fill { background-color: #4a4a4a; border: none; } .progress.is-white::-webkit-progress-value { background-color: var(--white); } .progress.is-white::-moz-progress-bar { background-color: var(--white); } .progress.is-white::-ms-fill { background-color: var(--white); } .progress.is-white:indeterminate { background-image: linear-gradient(to right, var(--white) 30%, #ededed 30%); } .progress.is-black::-webkit-progress-value { background-color: #0a0a0a; } .progress.is-black::-moz-progress-bar { background-color: #0a0a0a; } .progress.is-black::-ms-fill { background-color: #0a0a0a; } .progress.is-black:indeterminate { background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%); } .progress.is-light::-webkit-progress-value { background-color: whitesmoke; } .progress.is-light::-moz-progress-bar { background-color: whitesmoke; } .progress.is-light::-ms-fill { background-color: whitesmoke; } .progress.is-light:indeterminate { background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%); } .progress.is-dark::-webkit-progress-value { background-color: var(--dark); } .progress.is-dark::-moz-progress-bar { background-color: var(--dark); } .progress.is-dark::-ms-fill { background-color: var(--dark); } .progress.is-dark:indeterminate { background-image: linear-gradient(to right, var(--dark) 30%, #ededed 30%); } .progress.is-primary::-webkit-progress-value { background-color: var(--primary); } .progress.is-primary::-moz-progress-bar { background-color: var(--primary); } .progress.is-primary::-ms-fill { background-color: var(--primary); } .progress.is-primary:indeterminate { background-image: linear-gradient(to right, var(--primary) 30%, #ededed 30%); } .progress.is-link::-webkit-progress-value { background-color: var(--link); } .progress.is-link::-moz-progress-bar { background-color: var(--link); } .progress.is-link::-ms-fill { background-color: var(--link); } .progress.is-link:indeterminate { background-image: linear-gradient(to right, var(--link) 30%, #ededed 30%); } .progress.is-info::-webkit-progress-value { background-color: var(--info); } .progress.is-info::-moz-progress-bar { background-color: var(--info); } .progress.is-info::-ms-fill { background-color: var(--info); } .progress.is-info:indeterminate { background-image: linear-gradient(to right, var(--info) 30%, #ededed 30%); } .progress.is-success::-webkit-progress-value { background-color: var(--success); } .progress.is-success::-moz-progress-bar { background-color: var(--success); } .progress.is-success::-ms-fill { background-color: var(--success); } .progress.is-success:indeterminate { background-image: linear-gradient(to right, var(--success) 30%, #ededed 30%); } .progress.is-warning::-webkit-progress-value { background-color: var(--warning); } .progress.is-warning::-moz-progress-bar { background-color: var(--warning); } .progress.is-warning::-ms-fill { background-color: var(--warning); } .progress.is-warning:indeterminate { background-image: linear-gradient(to right, var(--warning) 30%, #ededed 30%); } .progress.is-danger::-webkit-progress-value { background-color: var(--danger); } .progress.is-danger::-moz-progress-bar { background-color: var(--danger); } .progress.is-danger::-ms-fill { background-color: var(--danger); } .progress.is-danger:indeterminate { background-image: linear-gradient(to right, var(--danger) 30%, #ededed 30%); } .progress:indeterminate { animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: moveIndeterminate; animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; background-repeat: no-repeat; background-size: 150% 150%; } .progress:indeterminate::-webkit-progress-bar { background-color: transparent; } .progress:indeterminate::-moz-progress-bar { background-color: transparent; } .progress:indeterminate::-ms-fill { animation-name: none; } .progress.is-small { height: 0.75rem; } .progress.is-medium { height: 1.25rem; } .progress.is-large { height: 1.5rem; } @keyframes moveIndeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } } .table { background-color: var(--white); color: #363636; } .table td, .table th { border: 1px solid var(--border); border-width: 0 0 1px; padding: 0.5em 0.75em; vertical-align: top; } .table td.is-white, .table th.is-white { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .table td.is-black, .table th.is-black { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .table td.is-light, .table th.is-light { background-color: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .table td.is-dark, .table th.is-dark { background-color: var(--dark); border-color: var(--dark); color: var(--dark--color-invert); } .table td.is-primary, .table th.is-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .table td.is-link, .table th.is-link { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .table td.is-info, .table th.is-info { background-color: var(--info); border-color: var(--info); color: var(--info--color-invert); } .table td.is-success, .table th.is-success { background-color: var(--success); border-color: var(--success); color: var(--success--color-invert); } .table td.is-warning, .table th.is-warning { background-color: var(--warning); border-color: var(--warning); color: var(--warning--color-invert); } .table td.is-danger, .table th.is-danger { background-color: var(--danger); border-color: var(--danger); color: var(--danger--color-invert); } .table td.is-narrow, .table th.is-narrow { white-space: nowrap; width: 1%; } .table td.is-selected, .table th.is-selected { background-color: var(--primary); color: var(--primary--color-invert); } .table td.is-selected a, .table td.is-selected strong, .table th.is-selected a, .table th.is-selected strong { color: currentColor; } .table td.is-vcentered, .table th.is-vcentered { vertical-align: middle; } .table th { color: #363636; } .table th:not([align]) { text-align: inherit; } .table tr.is-selected { background-color: var(--primary); color: var(--primary--color-invert); } .table tr.is-selected a, .table tr.is-selected strong { color: currentColor; } .table tr.is-selected td, .table tr.is-selected th { border-color: var(--primary--color-invert); color: currentColor; } .table thead { background-color: transparent; } .table thead td, .table thead th { border-width: 0 0 2px; color: #363636; } .table tfoot { background-color: transparent; } .table tfoot td, .table tfoot th { border-width: 2px 0 0; color: #363636; } .table tbody { background-color: transparent; } .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom-width: 0; } .table.is-bordered td, .table.is-bordered th { border-width: 1px; } .table.is-bordered tr:last-child td, .table.is-bordered tr:last-child th { border-bottom-width: 1px; } .table.is-fullwidth { width: 100%; } .table.is-hoverable tbody tr:not(.is-selected):hover { background-color: #fafafa; } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { background-color: #fafafa; } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) { background-color: whitesmoke; } .table.is-narrow td, .table.is-narrow th { padding: 0.25em 0.5em; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: #fafafa; } .table-container { -webkit-overflow-scrolling: touch; overflow: auto; overflow-y: hidden; max-width: 100%; } .tags { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } .tags .tag { margin-bottom: 0.5rem; } .tags .tag:not(:last-child) { margin-right: 0.5rem; } .tags:last-child { margin-bottom: -0.5rem; } .tags:not(:last-child) { margin-bottom: 1rem; } .tags.are-medium .tag:not(.is-normal):not(.is-large) { font-size: 1rem; } .tags.are-large .tag:not(.is-normal):not(.is-medium) { font-size: 1.25rem; } .tags.is-centered { justify-content: center; } .tags.is-centered .tag { margin-right: 0.25rem; margin-left: 0.25rem; } .tags.is-right { justify-content: flex-end; } .tags.is-right .tag:not(:first-child) { margin-left: 0.5rem; } .tags.is-right .tag:not(:last-child) { margin-right: 0; } .tags.has-addons .tag { margin-right: 0; } .tags.has-addons .tag:not(:first-child) { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .tags.has-addons .tag:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tag:not(body) { align-items: center; background-color: whitesmoke; border-radius: var(--radius); color: #4a4a4a; display: inline-flex; font-size: 0.75rem; height: 2em; justify-content: center; line-height: 1.5; padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } .tag:not(body) .delete { margin-left: 0.25rem; margin-right: -0.375rem; } .tag:not(body).is-white { background-color: var(--white); color: #0a0a0a; } .tag:not(body).is-black { background-color: #0a0a0a; color: var(--white); } .tag:not(body).is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .tag:not(body).is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .tag:not(body).is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .tag:not(body).is-primary.is-light { background-color: var(--primary--light-color); color: var(--primary--dark-color); } .tag:not(body).is-link { background-color: var(--link); color: var(--link--color-invert); } .tag:not(body).is-link.is-light { background-color: var(--link--light-color); color: var(--link--dark-color); } .tag:not(body).is-info { background-color: var(--info); color: var(--info--color-invert); } .tag:not(body).is-info.is-light { background-color: var(--info--light-color); color: var(--info--dark-color); } .tag:not(body).is-success { background-color: var(--success); color: var(--success--color-invert); } .tag:not(body).is-success.is-light { background-color: var(--success--light-color); color: var(--success--dark-color); } .tag:not(body).is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .tag:not(body).is-warning.is-light { background-color: var(--warning--light-color); color: var(--warning--dark-color); } .tag:not(body).is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .tag:not(body).is-danger.is-light { background-color: var(--danger--light-color); color: var(--danger--dark-color); } .tag:not(body).is-normal { font-size: 0.75rem; } .tag:not(body).is-medium { font-size: 1rem; } .tag:not(body).is-large { font-size: 1.25rem; } .tag:not(body) .icon:first-child:not(:last-child) { margin-left: -0.375em; margin-right: 0.1875em; } .tag:not(body) .icon:last-child:not(:first-child) { margin-left: 0.1875em; margin-right: -0.375em; } .tag:not(body) .icon:first-child:last-child { margin-left: -0.375em; margin-right: -0.375em; } .tag:not(body).is-delete { margin-left: 1px; padding: 0; position: relative; width: 2em; } .tag:not(body).is-delete::before, .tag:not(body).is-delete::after { background-color: currentColor; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } .tag:not(body).is-delete::before { height: 1px; width: 50%; } .tag:not(body).is-delete::after { height: 50%; width: 1px; } .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { background-color: #e8e8e8; } .tag:not(body).is-delete:active { background-color: #dbdbdb; } .tag:not(body).is-rounded { border-radius: var(--radius-rounded); } a.tag:hover { text-decoration: underline; } .title, .subtitle { word-break: break-word; } .title em, .title span, .subtitle em, .subtitle span { font-weight: inherit; } .title sub, .subtitle sub { font-size: 0.75em; } .title sup, .subtitle sup { font-size: 0.75em; } .title .tag, .subtitle .tag { vertical-align: middle; } .title { color: #363636; font-size: 2rem; font-weight: 600; line-height: 1.125; } .title strong { color: inherit; font-weight: inherit; } .title:not(.is-spaced) + .subtitle { margin-top: -1.25rem; } .title.is-1 { font-size: 3rem; } .title.is-2 { font-size: 2.5rem; } .title.is-3 { font-size: 2rem; } .title.is-4 { font-size: 1.5rem; } .title.is-5 { font-size: 1.25rem; } .title.is-6 { font-size: 1rem; } .title.is-7 { font-size: 0.75rem; } .subtitle { color: #4a4a4a; font-size: 1.25rem; font-weight: 400; line-height: 1.25; } .subtitle strong { color: #363636; font-weight: 600; } .subtitle:not(.is-spaced) + .title { margin-top: -1.25rem; } .subtitle.is-1 { font-size: 3rem; } .subtitle.is-2 { font-size: 2.5rem; } .subtitle.is-3 { font-size: 2rem; } .subtitle.is-4 { font-size: 1.5rem; } .subtitle.is-5 { font-size: 1.25rem; } .subtitle.is-6 { font-size: 1rem; } .subtitle.is-7 { font-size: 0.75rem; } .heading { display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; } .number { align-items: center; background-color: whitesmoke; border-radius: var(--radius-rounded); display: inline-flex; font-size: 1.25rem; height: 2em; justify-content: center; margin-right: 1.5rem; min-width: 2.5em; padding: 0.25rem 0.5rem; text-align: center; vertical-align: top; } /* Bulma Form */ .input, .textarea, .select select { background-color: var(--white); border-color: var(--border); border-radius: var(--radius); color: #363636; } .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { color: rgba(54, 54, 54, 0.3); } .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { color: rgba(54, 54, 54, 0.3); } .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { color: rgba(54, 54, 54, 0.3); } .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { color: rgba(54, 54, 54, 0.3); } .input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered { border-color: #b5b5b5; } .input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active { border-color: var(--link); box-shadow: 0 0 0 0.125em var(--link); } [disabled].input, [disabled].textarea, .select select[disabled], fieldset[disabled] .input, fieldset[disabled] .textarea, fieldset[disabled] .select select, .select fieldset[disabled] select { background-color: whitesmoke; border-color: whitesmoke; box-shadow: none; color: #7a7a7a; } [disabled].input::-moz-placeholder, [disabled].textarea::-moz-placeholder, .select select[disabled]::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder { color: rgba(122, 122, 122, 0.3); } [disabled].input::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, .select select[disabled]::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder { color: rgba(122, 122, 122, 0.3); } [disabled].input:-moz-placeholder, [disabled].textarea:-moz-placeholder, .select select[disabled]:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder { color: rgba(122, 122, 122, 0.3); } [disabled].input:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, .select select[disabled]:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder { color: rgba(122, 122, 122, 0.3); } .input, .textarea { box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); max-width: 100%; width: 100%; } [readonly].input, [readonly].textarea { box-shadow: none; } .is-white.input, .is-white.textarea { border-color: var(--white); } .is-white.input:focus, .is-white.textarea:focus, .is-white.is-focused.input, .is-white.is-focused.textarea, .is-white.input:active, .is-white.textarea:active, .is-white.is-active.input, .is-white.is-active.textarea { box-shadow: 0 0 0 0.125em var(--white); } .is-black.input, .is-black.textarea { border-color: #0a0a0a; } .is-black.input:focus, .is-black.textarea:focus, .is-black.is-focused.input, .is-black.is-focused.textarea, .is-black.input:active, .is-black.textarea:active, .is-black.is-active.input, .is-black.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .is-light.input, .is-light.textarea { border-color: whitesmoke; } .is-light.input:focus, .is-light.textarea:focus, .is-light.is-focused.input, .is-light.is-focused.textarea, .is-light.input:active, .is-light.textarea:active, .is-light.is-active.input, .is-light.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .is-dark.input, .is-dark.textarea { border-color: var(--dark); } .is-dark.input:focus, .is-dark.textarea:focus, .is-dark.is-focused.input, .is-dark.is-focused.textarea, .is-dark.input:active, .is-dark.textarea:active, .is-dark.is-active.input, .is-dark.is-active.textarea { box-shadow: 0 0 0 0.125em var(--dark); } .is-primary.input, .is-primary.textarea { border-color: var(--primary); } .is-primary.input:focus, .is-primary.textarea:focus, .is-primary.is-focused.input, .is-primary.is-focused.textarea, .is-primary.input:active, .is-primary.textarea:active, .is-primary.is-active.input, .is-primary.is-active.textarea { box-shadow: 0 0 0 0.125em var(--primary); } .is-link.input, .is-link.textarea { border-color: var(--link); } .is-link.input:focus, .is-link.textarea:focus, .is-link.is-focused.input, .is-link.is-focused.textarea, .is-link.input:active, .is-link.textarea:active, .is-link.is-active.input, .is-link.is-active.textarea { box-shadow: 0 0 0 0.125em var(--link); } .is-info.input, .is-info.textarea { border-color: var(--info); } .is-info.input:focus, .is-info.textarea:focus, .is-info.is-focused.input, .is-info.is-focused.textarea, .is-info.input:active, .is-info.textarea:active, .is-info.is-active.input, .is-info.is-active.textarea { box-shadow: 0 0 0 0.125em var(--info); } .is-success.input, .is-success.textarea { border-color: var(--success); } .is-success.input:focus, .is-success.textarea:focus, .is-success.is-focused.input, .is-success.is-focused.textarea, .is-success.input:active, .is-success.textarea:active, .is-success.is-active.input, .is-success.is-active.textarea { box-shadow: 0 0 0 0.125em var(--success); } .is-warning.input, .is-warning.textarea { border-color: var(--warning); } .is-warning.input:focus, .is-warning.textarea:focus, .is-warning.is-focused.input, .is-warning.is-focused.textarea, .is-warning.input:active, .is-warning.textarea:active, .is-warning.is-active.input, .is-warning.is-active.textarea { box-shadow: 0 0 0 0.125em var(--warning); } .is-danger.input, .is-danger.textarea { border-color: var(--danger); } .is-danger.input:focus, .is-danger.textarea:focus, .is-danger.is-focused.input, .is-danger.is-focused.textarea, .is-danger.input:active, .is-danger.textarea:active, .is-danger.is-active.input, .is-danger.is-active.textarea { box-shadow: 0 0 0 0.125em var(--danger); } .is-small.input, .is-small.textarea { border-radius: var(--radius-small); font-size: 0.75rem; } .is-medium.input, .is-medium.textarea { font-size: 1.25rem; } .is-large.input, .is-large.textarea { font-size: 1.5rem; } .is-fullwidth.input, .is-fullwidth.textarea { display: block; width: 100%; } .is-inline.input, .is-inline.textarea { display: inline; width: auto; } .input.is-rounded { border-radius: var(--radius-rounded); padding-left: calc(calc(0.75em - 1px) + 0.375em); padding-right: calc(calc(0.75em - 1px) + 0.375em); } .input.is-static { background-color: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } .textarea { display: block; max-width: 100%; min-width: 100%; padding: calc(0.75em - 1px); resize: vertical; } .textarea:not([rows]) { max-height: 40em; min-height: 8em; } .textarea[rows] { height: initial; } .textarea.has-fixed-size { resize: none; } .checkbox, .radio { cursor: pointer; display: inline-block; line-height: 1.25; position: relative; } .checkbox input, .radio input { cursor: pointer; } .checkbox:hover, .radio:hover { color: #363636; } [disabled].checkbox, [disabled].radio, fieldset[disabled] .checkbox, fieldset[disabled] .radio, .checkbox input[disabled], .radio input[disabled] { color: #7a7a7a; cursor: not-allowed; } .radio + .radio { margin-left: 0.5em; } .select { display: inline-block; max-width: 100%; position: relative; vertical-align: top; } .select:not(.is-multiple) { height: 2.5em; } .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--link); right: 1.125em; z-index: 4; } .select.is-rounded select { border-radius: var(--radius-rounded); padding-left: 1em; } .select select { cursor: pointer; display: block; font-size: 1em; max-width: 100%; outline: none; } .select select::-ms-expand { display: none; } .select select[disabled]:hover, fieldset[disabled] .select select:hover { border-color: whitesmoke; } .select select:not([multiple]) { padding-right: 2.5em; } .select select[multiple] { height: auto; padding: 0; } .select select[multiple] option { padding: 0.5em 1em; } .select:not(.is-multiple):not(.is-loading):hover::after { border-color: #363636; } .select.is-white:not(:hover)::after { border-color: var(--white); } .select.is-white select { border-color: var(--white); } .select.is-white select:hover, .select.is-white select.is-hovered { border-color: var(--white); } .select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { box-shadow: 0 0 0 0.125em var(--white); } .select.is-black:not(:hover)::after { border-color: #0a0a0a; } .select.is-black select { border-color: #0a0a0a; } .select.is-black select:hover, .select.is-black select.is-hovered { border-color: black; } .select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .select.is-light:not(:hover)::after { border-color: whitesmoke; } .select.is-light select { border-color: whitesmoke; } .select.is-light select:hover, .select.is-light select.is-hovered { border-color: #e8e8e8; } .select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .select.is-dark:not(:hover)::after { border-color: var(--dark); } .select.is-dark select { border-color: var(--dark); } .select.is-dark select:hover, .select.is-dark select.is-hovered { border-color: var(--dark); } .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { box-shadow: 0 0 0 0.125em var(--dark); } .select.is-primary:not(:hover)::after { border-color: var(--primary); } .select.is-primary select { border-color: var(--primary); } .select.is-primary select:hover, .select.is-primary select.is-hovered { border-color: var(--primary); } .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { box-shadow: 0 0 0 0.125em var(--primary); } .select.is-link:not(:hover)::after { border-color: var(--link); } .select.is-link select { border-color: var(--link); } .select.is-link select:hover, .select.is-link select.is-hovered { border-color: var(--link); } .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { box-shadow: 0 0 0 0.125em var(--link); } .select.is-info:not(:hover)::after { border-color: var(--info); } .select.is-info select { border-color: var(--info); } .select.is-info select:hover, .select.is-info select.is-hovered { border-color: var(--info); } .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { box-shadow: 0 0 0 0.125em var(--info); } .select.is-success:not(:hover)::after { border-color: var(--success); } .select.is-success select { border-color: var(--success); } .select.is-success select:hover, .select.is-success select.is-hovered { border-color: var(--success); } .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { box-shadow: 0 0 0 0.125em var(--success); } .select.is-warning:not(:hover)::after { border-color: var(--warning); } .select.is-warning select { border-color: var(--warning); } .select.is-warning select:hover, .select.is-warning select.is-hovered { border-color: var(--warning); } .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { box-shadow: 0 0 0 0.125em var(--warning); } .select.is-danger:not(:hover)::after { border-color: var(--danger); } .select.is-danger select { border-color: var(--danger); } .select.is-danger select:hover, .select.is-danger select.is-hovered { border-color: var(--danger); } .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { box-shadow: 0 0 0 0.125em var(--danger); } .select.is-small { border-radius: var(--radius-small); font-size: 0.75rem; } .select.is-medium { font-size: 1.25rem; } .select.is-large { font-size: 1.5rem; } .select.is-disabled::after { border-color: #7a7a7a; } .select.is-fullwidth { width: 100%; } .select.is-fullwidth select { width: 100%; } .select.is-loading::after { margin-top: 0; position: absolute; right: 0.625em; top: 0.625em; transform: none; } .select.is-loading.is-small:after { font-size: 0.75rem; } .select.is-loading.is-medium:after { font-size: 1.25rem; } .select.is-loading.is-large:after { font-size: 1.5rem; } .file { align-items: stretch; display: flex; justify-content: flex-start; position: relative; } .file.is-white .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--white); color: #0a0a0a; } .file.is-white:active .file-cta, .file.is-white.is-active .file-cta { background-color: var(--white); border-color: transparent; color: #0a0a0a; } .file.is-black .file-cta { background-color: #0a0a0a; border-color: transparent; color: var(--white); } .file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta { background-color: #040404; border-color: transparent; color: var(--white); } .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); color: var(--white); } .file.is-black:active .file-cta, .file.is-black.is-active .file-cta { background-color: black; border-color: transparent; color: var(--white); } .file.is-light .file-cta { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta { background-color: #eeeeee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); color: rgba(0, 0, 0, 0.7); } .file.is-light:active .file-cta, .file.is-light.is-active .file-cta { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-dark .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--dark); color: var(--dark--color-invert); } .file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta { background-color: var(--dark); border-color: transparent; color: var(--dark--color-invert); } .file.is-primary .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--primary); color: var(--primary--color-invert); } .file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { background-color: var(--primary); border-color: transparent; color: var(--primary--color-invert); } .file.is-link .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--link); color: var(--link--color-invert); } .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { background-color: var(--link); border-color: transparent; color: var(--link--color-invert); } .file.is-info .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--info); color: var(--info--color-invert); } .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { background-color: var(--info); border-color: transparent; color: var(--info--color-invert); } .file.is-success .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--success); color: var(--success--color-invert); } .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { background-color: var(--success); border-color: transparent; color: var(--success--color-invert); } .file.is-warning .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--warning); color: var(--warning--color-invert); } .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { background-color: var(--warning); border-color: transparent; color: var(--warning--color-invert); } .file.is-danger .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em var(--danger); color: var(--danger--color-invert); } .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { background-color: var(--danger); border-color: transparent; color: var(--danger--color-invert); } .file.is-small { font-size: 0.75rem; } .file.is-normal { font-size: 1rem; } .file.is-medium { font-size: 1.25rem; } .file.is-medium .file-icon .fa { font-size: 21px; } .file.is-large { font-size: 1.5rem; } .file.is-large .file-icon .fa { font-size: 28px; } .file.has-name .file-cta { border-bottom-right-radius: 0; border-top-right-radius: 0; } .file.has-name .file-name { border-bottom-left-radius: 0; border-top-left-radius: 0; } .file.has-name.is-empty .file-cta { border-radius: var(--radius); } .file.has-name.is-empty .file-name { display: none; } .file.is-boxed .file-label { flex-direction: column; } .file.is-boxed .file-cta { flex-direction: column; height: auto; padding: 1em 3em; } .file.is-boxed .file-name { border-width: 0 1px 1px; } .file.is-boxed .file-icon { height: 1.5em; width: 1.5em; } .file.is-boxed .file-icon .fa { font-size: 21px; } .file.is-boxed.is-small .file-icon .fa { font-size: 14px; } .file.is-boxed.is-medium .file-icon .fa { font-size: 28px; } .file.is-boxed.is-large .file-icon .fa { font-size: 35px; } .file.is-boxed.has-name .file-cta { border-radius: var(--radius) var(--radius) 0 0; } .file.is-boxed.has-name .file-name { border-radius: 0 0 var(--radius) var(--radius); border-width: 0 1px 1px; } .file.is-centered { justify-content: center; } .file.is-fullwidth .file-label { width: 100%; } .file.is-fullwidth .file-name { flex-grow: 1; max-width: none; } .file.is-right { justify-content: flex-end; } .file.is-right .file-cta { border-radius: 0 var(--radius) var(--radius) 0; } .file.is-right .file-name { border-radius: var(--radius) 0 0 var(--radius); border-width: 1px 0 1px 1px; order: -1; } .file-label { align-items: stretch; display: flex; cursor: pointer; justify-content: flex-start; overflow: hidden; position: relative; } .file-label:hover .file-cta { background-color: #eeeeee; color: #363636; } .file-label:hover .file-name { border-color: var(--border); } .file-label:active .file-cta { background-color: #e8e8e8; color: #363636; } .file-label:active .file-name { border-color: var(--border); } .file-input { height: 100%; left: 0; opacity: 0; outline: none; position: absolute; top: 0; width: 100%; } .file-cta, .file-name { border-color: var(--border); border-radius: var(--radius); font-size: 1em; padding-left: 1em; padding-right: 1em; white-space: nowrap; } .file-cta { background-color: whitesmoke; color: #4a4a4a; } .file-name { border-color: var(--border); border-style: solid; border-width: 1px 1px 1px 0; display: block; max-width: 16em; overflow: hidden; text-align: inherit; text-overflow: ellipsis; } .file-icon { align-items: center; display: flex; height: 1em; justify-content: center; margin-right: 0.5em; width: 1em; } .file-icon .fa { font-size: 14px; } .label { color: #363636; display: block; font-size: 1rem; font-weight: 700; } .label:not(:last-child) { margin-bottom: 0.5em; } .label.is-small { font-size: 0.75rem; } .label.is-medium { font-size: 1.25rem; } .label.is-large { font-size: 1.5rem; } .help { display: block; font-size: 0.75rem; margin-top: 0.25rem; } .help.is-white { color: var(--white); } .help.is-black { color: #0a0a0a; } .help.is-light { color: whitesmoke; } .help.is-dark { color: var(--dark); } .help.is-primary { color: var(--primary); } .help.is-link { color: var(--link); } .help.is-info { color: var(--info); } .help.is-success { color: var(--success); } .help.is-warning { color: var(--warning); } .help.is-danger { color: var(--danger); } .field:not(:last-child) { margin-bottom: 0.75rem; } .field.has-addons { display: flex; justify-content: flex-start; } .field.has-addons .control:not(:last-child) { margin-right: -1px; } .field.has-addons .control:not(:first-child):not(:last-child) .button, .field.has-addons .control:not(:first-child):not(:last-child) .input, .field.has-addons .control:not(:first-child):not(:last-child) .select select { border-radius: 0; } .field.has-addons .control:first-child:not(:only-child) .button, .field.has-addons .control:first-child:not(:only-child) .input, .field.has-addons .control:first-child:not(:only-child) .select select { border-bottom-right-radius: 0; border-top-right-radius: 0; } .field.has-addons .control:last-child:not(:only-child) .button, .field.has-addons .control:last-child:not(:only-child) .input, .field.has-addons .control:last-child:not(:only-child) .select select { border-bottom-left-radius: 0; border-top-left-radius: 0; } .field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered, .field.has-addons .control .input:not([disabled]):hover, .field.has-addons .control .input:not([disabled]).is-hovered, .field.has-addons .control .select select:not([disabled]):hover, .field.has-addons .control .select select:not([disabled]).is-hovered { z-index: 2; } .field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active, .field.has-addons .control .input:not([disabled]):focus, .field.has-addons .control .input:not([disabled]).is-focused, .field.has-addons .control .input:not([disabled]):active, .field.has-addons .control .input:not([disabled]).is-active, .field.has-addons .control .select select:not([disabled]):focus, .field.has-addons .control .select select:not([disabled]).is-focused, .field.has-addons .control .select select:not([disabled]):active, .field.has-addons .control .select select:not([disabled]).is-active { z-index: 3; } .field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover, .field.has-addons .control .input:not([disabled]):focus:hover, .field.has-addons .control .input:not([disabled]).is-focused:hover, .field.has-addons .control .input:not([disabled]):active:hover, .field.has-addons .control .input:not([disabled]).is-active:hover, .field.has-addons .control .select select:not([disabled]):focus:hover, .field.has-addons .control .select select:not([disabled]).is-focused:hover, .field.has-addons .control .select select:not([disabled]):active:hover, .field.has-addons .control .select select:not([disabled]).is-active:hover { z-index: 4; } .field.has-addons .control.is-expanded { flex-grow: 1; flex-shrink: 1; } .field.has-addons.has-addons-centered { justify-content: center; } .field.has-addons.has-addons-right { justify-content: flex-end; } .field.has-addons.has-addons-fullwidth .control { flex-grow: 1; flex-shrink: 0; } .field.is-grouped { display: flex; justify-content: flex-start; } .field.is-grouped > .control { flex-shrink: 0; } .field.is-grouped > .control:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } .field.is-grouped > .control.is-expanded { flex-grow: 1; flex-shrink: 1; } .field.is-grouped.is-grouped-centered { justify-content: center; } .field.is-grouped.is-grouped-right { justify-content: flex-end; } .field.is-grouped.is-grouped-multiline { flex-wrap: wrap; } .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { margin-bottom: 0.75rem; } .field.is-grouped.is-grouped-multiline:last-child { margin-bottom: -0.75rem; } .field.is-grouped.is-grouped-multiline:not(:last-child) { margin-bottom: 0; } @media screen and (min-width: 769px), print { .field.is-horizontal { display: flex; } } .field-label .label { font-size: inherit; } @media screen and (max-width: 768px) { .field-label { margin-bottom: 0.5rem; } } @media screen and (min-width: 769px), print { .field-label { flex-basis: 0; flex-grow: 1; flex-shrink: 0; margin-right: 1.5rem; text-align: right; } .field-label.is-small { font-size: 0.75rem; padding-top: 0.375em; } .field-label.is-normal { padding-top: 0.375em; } .field-label.is-medium { font-size: 1.25rem; padding-top: 0.375em; } .field-label.is-large { font-size: 1.5rem; padding-top: 0.375em; } } .field-body .field .field { margin-bottom: 0; } @media screen and (min-width: 769px), print { .field-body { display: flex; flex-basis: 0; flex-grow: 5; flex-shrink: 1; } .field-body .field { margin-bottom: 0; } .field-body > .field { flex-shrink: 1; } .field-body > .field:not(.is-narrow) { flex-grow: 1; } .field-body > .field:not(:last-child) { margin-right: 0.75rem; } } .control { box-sizing: border-box; clear: both; font-size: 1rem; position: relative; text-align: inherit; } .control.has-icons-left .input:focus ~ .icon, .control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, .control.has-icons-right .select:focus ~ .icon { color: #4a4a4a; } .control.has-icons-left .input.is-small ~ .icon, .control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, .control.has-icons-right .select.is-small ~ .icon { font-size: 0.75rem; } .control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, .control.has-icons-right .select.is-medium ~ .icon { font-size: 1.25rem; } .control.has-icons-left .input.is-large ~ .icon, .control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, .control.has-icons-right .select.is-large ~ .icon { font-size: 1.5rem; } .control.has-icons-left .icon, .control.has-icons-right .icon { color: var(--border); height: 2.5em; pointer-events: none; position: absolute; top: 0; width: 2.5em; z-index: 4; } .control.has-icons-left .input, .control.has-icons-left .select select { padding-left: 2.5em; } .control.has-icons-left .icon.is-left { left: 0; } .control.has-icons-right .input, .control.has-icons-right .select select { padding-right: 2.5em; } .control.has-icons-right .icon.is-right { right: 0; } .control.is-loading::after { position: absolute !important; right: 0.625em; top: 0.625em; z-index: 4; } .control.is-loading.is-small:after { font-size: 0.75rem; } .control.is-loading.is-medium:after { font-size: 1.25rem; } .control.is-loading.is-large:after { font-size: 1.5rem; } /* Bulma Components */ .breadcrumb { font-size: 1rem; white-space: nowrap; } .breadcrumb a { align-items: center; color: var(--link); display: flex; justify-content: center; padding: 0 0.75em; } .breadcrumb a:hover { color: #363636; } .breadcrumb li { align-items: center; display: flex; } .breadcrumb li:first-child a { padding-left: 0; } .breadcrumb li.is-active a { color: #363636; cursor: default; pointer-events: none; } .breadcrumb li + li::before { color: #b5b5b5; content: "/"; } .breadcrumb ul, .breadcrumb ol { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; } .breadcrumb .icon:first-child { margin-right: 0.5em; } .breadcrumb .icon:last-child { margin-left: 0.5em; } .breadcrumb.is-centered ol, .breadcrumb.is-centered ul { justify-content: center; } .breadcrumb.is-right ol, .breadcrumb.is-right ul { justify-content: flex-end; } .breadcrumb.is-small { font-size: 0.75rem; } .breadcrumb.is-medium { font-size: 1.25rem; } .breadcrumb.is-large { font-size: 1.5rem; } .breadcrumb.has-arrow-separator li + li::before { content: "→"; } .breadcrumb.has-bullet-separator li + li::before { content: "•"; } .breadcrumb.has-dot-separator li + li::before { content: "·"; } .breadcrumb.has-succeeds-separator li + li::before { content: "≻"; } .card { background-color: var(--white); border-radius: 0.25rem; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; max-width: 100%; position: relative; } .card-header:first-child, .card-content:first-child, .card-footer:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .card-header:last-child, .card-content:last-child, .card-footer:last-child { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .card-header { background-color: transparent; align-items: stretch; box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); display: flex; } .card-header-title { align-items: center; color: #363636; display: flex; flex-grow: 1; font-weight: 700; padding: 0.75rem 1rem; } .card-header-title.is-centered { justify-content: center; } .card-header-icon { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; border: none; color: currentColor; font-family: inherit; font-size: 1em; margin: 0; padding: 0; align-items: center; cursor: pointer; display: flex; justify-content: center; padding: 0.75rem 1rem; } .card-image { display: block; position: relative; } .card-image:first-child img { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .card-image:last-child img { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .card-content { background-color: transparent; padding: 1.5rem; } .card-footer { background-color: transparent; border-top: 1px solid #ededed; align-items: stretch; display: flex; } .card-footer-item { align-items: center; display: flex; flex-basis: 0; flex-grow: 1; flex-shrink: 0; justify-content: center; padding: 0.75rem; } .card-footer-item:not(:last-child) { border-right: 1px solid #ededed; } .card .media:not(:last-child) { margin-bottom: 1.5rem; } .dropdown { display: inline-flex; position: relative; vertical-align: top; } .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { display: block; } .dropdown.is-right .dropdown-menu { left: auto; right: 0; } .dropdown.is-up .dropdown-menu { bottom: 100%; padding-bottom: 4px; padding-top: initial; top: auto; } .dropdown-menu { display: none; left: 0; min-width: 12rem; padding-top: 4px; position: absolute; top: 100%; z-index: 20; } .dropdown-content { background-color: var(--white); border-radius: var(--radius); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); padding-bottom: 0.5rem; padding-top: 0.5rem; } .dropdown-item { color: #4a4a4a; display: block; font-size: 0.875rem; line-height: 1.5; padding: 0.375rem 1rem; position: relative; } a.dropdown-item, button.dropdown-item { padding-right: 3rem; text-align: inherit; white-space: nowrap; width: 100%; } a.dropdown-item:hover, button.dropdown-item:hover { background-color: whitesmoke; color: #0a0a0a; } a.dropdown-item.is-active, button.dropdown-item.is-active { background-color: var(--link); color: var(--link--color-invert); } .dropdown-divider { background-color: #ededed; border: none; display: block; height: 1px; margin: 0.5rem 0; } .level { align-items: center; justify-content: space-between; } .level code { border-radius: var(--radius); } .level img { display: inline-block; vertical-align: top; } .level.is-mobile { display: flex; } .level.is-mobile .level-left, .level.is-mobile .level-right { display: flex; } .level.is-mobile .level-left + .level-right { margin-top: 0; } .level.is-mobile .level-item:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } .level.is-mobile .level-item:not(.is-narrow) { flex-grow: 1; } @media screen and (min-width: 769px), print { .level { display: flex; } .level > .level-item:not(.is-narrow) { flex-grow: 1; } } .level-item { align-items: center; display: flex; flex-basis: auto; flex-grow: 0; flex-shrink: 0; justify-content: center; } .level-item .title, .level-item .subtitle { margin-bottom: 0; } @media screen and (max-width: 768px) { .level-item:not(:last-child) { margin-bottom: 0.75rem; } } .level-left, .level-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } .level-left .level-item.is-flexible, .level-right .level-item.is-flexible { flex-grow: 1; } @media screen and (min-width: 769px), print { .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { margin-right: 0.75rem; } } .level-left { align-items: center; justify-content: flex-start; } @media screen and (max-width: 768px) { .level-left + .level-right { margin-top: 1.5rem; } } @media screen and (min-width: 769px), print { .level-left { display: flex; } } .level-right { align-items: center; justify-content: flex-end; } @media screen and (min-width: 769px), print { .level-right { display: flex; } } .media { align-items: flex-start; display: flex; text-align: inherit; } .media .content:not(:last-child) { margin-bottom: 0.75rem; } .media .media { border-top: 1px solid var(--border); display: flex; padding-top: 0.75rem; } .media .media .content:not(:last-child), .media .media .control:not(:last-child) { margin-bottom: 0.5rem; } .media .media .media { padding-top: 0.5rem; } .media .media .media + .media { margin-top: 0.5rem; } .media + .media { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; } .media.is-large + .media { margin-top: 1.5rem; padding-top: 1.5rem; } .media-left, .media-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } .media-left { margin-right: 1rem; } .media-right { margin-left: 1rem; } .media-content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; text-align: inherit; } @media screen and (max-width: 768px) { .media-content { overflow-x: auto; } } .menu { font-size: 1rem; } .menu.is-small { font-size: 0.75rem; } .menu.is-medium { font-size: 1.25rem; } .menu.is-large { font-size: 1.5rem; } .menu-list { line-height: 1.25; } .menu-list a { border-radius: var(--radius-small); color: #4a4a4a; display: block; padding: 0.5em 0.75em; } .menu-list a:hover { background-color: whitesmoke; color: #363636; } .menu-list a.is-active { background-color: var(--link); color: var(--link--color-invert); } .menu-list li ul { border-left: 1px solid var(--border); margin: 0.75em; padding-left: 0.75em; } .menu-label { color: #7a7a7a; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; } .menu-label:not(:first-child) { margin-top: 1em; } .menu-label:not(:last-child) { margin-bottom: 1em; } .message { background-color: whitesmoke; border-radius: var(--radius); font-size: 1rem; } .message strong { color: currentColor; } .message a:not(.button):not(.tag):not(.dropdown-item) { color: currentColor; text-decoration: underline; } .message.is-small { font-size: 0.75rem; } .message.is-medium { font-size: 1.25rem; } .message.is-large { font-size: 1.5rem; } .message.is-white { background-color: var(--white--800--lighten); } .message.is-white .message-header { background-color: var(--white); color: #0a0a0a; } .message.is-white .message-body { border-color: var(--white); } .message.is-black { background-color: #fafafa; } .message.is-black .message-header { background-color: #0a0a0a; color: var(--white); } .message.is-black .message-body { border-color: #0a0a0a; } .message.is-light { background-color: #fafafa; } .message.is-light .message-header { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .message.is-light .message-body { border-color: whitesmoke; } .message.is-dark { background-color: var(--dark--800--lighten); } .message.is-dark .message-header { background-color: var(--dark); color: var(--dark--color-invert); } .message.is-dark .message-body { border-color: var(--dark); } .message.is-primary { background-color: var(--primary--light-color); } .message.is-primary .message-header { background-color: var(--primary); color: var(--primary--color-invert); } .message.is-primary .message-body { border-color: var(--primary); color: var(--primary--dark-color); } .message.is-link { background-color: var(--link--light-color); } .message.is-link .message-header { background-color: var(--link); color: var(--link--color-invert); } .message.is-link .message-body { border-color: var(--link); color: var(--link--dark-color); } .message.is-info { background-color: var(--info--light-color); } .message.is-info .message-header { background-color: var(--info); color: var(--info--color-invert); } .message.is-info .message-body { border-color: var(--info); color: var(--info--dark-color); } .message.is-success { background-color: var(--success--light-color); } .message.is-success .message-header { background-color: var(--success); color: var(--success--color-invert); } .message.is-success .message-body { border-color: var(--success); color: var(--success--dark-color); } .message.is-warning { background-color: var(--warning--light-color); } .message.is-warning .message-header { background-color: var(--warning); color: var(--warning--color-invert); } .message.is-warning .message-body { border-color: var(--warning); color: var(--warning--dark-color); } .message.is-danger { background-color: var(--danger--light-color); } .message.is-danger .message-header { background-color: var(--danger); color: var(--danger--color-invert); } .message.is-danger .message-body { border-color: var(--danger); color: var(--danger--dark-color); } .message-header { align-items: center; background-color: #4a4a4a; border-radius: var(--radius) var(--radius) 0 0; color: #fff; display: flex; font-weight: 700; justify-content: space-between; line-height: 1.25; padding: 0.75em 1em; position: relative; } .message-header .delete { flex-grow: 0; flex-shrink: 0; margin-left: 0.75em; } .message-header + .message-body { border-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .message-body { border-color: var(--border); border-radius: var(--radius); border-style: solid; border-width: 0 0 0 4px; color: #4a4a4a; padding: 1.25em 1.5em; } .message-body code, .message-body pre { background-color: var(--white); } .message-body pre code { background-color: transparent; } .modal { align-items: center; display: none; flex-direction: column; justify-content: center; overflow: hidden; position: fixed; z-index: 40; } .modal.is-active { display: flex; } .modal-background { background-color: rgba(10, 10, 10, 0.86); } .modal-content, .modal-card { margin: 0 20px; max-height: calc(100vh - 160px); overflow: auto; position: relative; width: 100%; } @media screen and (min-width: 769px) { .modal-content, .modal-card { margin: 0 auto; max-height: calc(100vh - 40px); width: 640px; } } .modal-close { background: none; height: 40px; position: fixed; right: 20px; top: 20px; width: 40px; } .modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; -ms-overflow-y: visible; } .modal-card-head, .modal-card-foot { align-items: center; background-color: whitesmoke; display: flex; flex-shrink: 0; justify-content: flex-start; padding: 20px; position: relative; } .modal-card-head { border-bottom: 1px solid var(--border); border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large); } .modal-card-title { color: #363636; flex-grow: 1; flex-shrink: 0; font-size: 1.5rem; line-height: 1; } .modal-card-foot { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); border-top: 1px solid var(--border); } .modal-card-foot .button:not(:last-child) { margin-right: 0.5em; } .modal-card-body { -webkit-overflow-scrolling: touch; background-color: var(--white); flex-grow: 1; flex-shrink: 1; overflow: auto; padding: 20px; } .navbar { background-color: var(--white); min-height: 3.25rem; position: relative; z-index: 30; } .navbar.is-white { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-brand > .navbar-item, .navbar.is-white .navbar-brand .navbar-link { color: #0a0a0a; } .navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, .navbar.is-white .navbar-brand .navbar-link:focus, .navbar.is-white .navbar-brand .navbar-link:hover, .navbar.is-white .navbar-brand .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-brand .navbar-link::after { border-color: #0a0a0a; } .navbar.is-white .navbar-burger { color: #0a0a0a; } @media screen and (min-width: 1024px) { .navbar.is-white .navbar-start > .navbar-item, .navbar.is-white .navbar-start .navbar-link, .navbar.is-white .navbar-end > .navbar-item, .navbar.is-white .navbar-end .navbar-link { color: #0a0a0a; } .navbar.is-white .navbar-start > a.navbar-item:focus, .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, .navbar.is-white .navbar-start .navbar-link:focus, .navbar.is-white .navbar-start .navbar-link:hover, .navbar.is-white .navbar-start .navbar-link.is-active, .navbar.is-white .navbar-end > a.navbar-item:focus, .navbar.is-white .navbar-end > a.navbar-item:hover, .navbar.is-white .navbar-end > a.navbar-item.is-active, .navbar.is-white .navbar-end .navbar-link:focus, .navbar.is-white .navbar-end .navbar-link:hover, .navbar.is-white .navbar-end .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-start .navbar-link::after, .navbar.is-white .navbar-end .navbar-link::after { border-color: #0a0a0a; } .navbar.is-white .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--white); color: #0a0a0a; } .navbar.is-white .navbar-dropdown a.navbar-item.is-active { background-color: var(--white); color: #0a0a0a; } } .navbar.is-black { background-color: #0a0a0a; color: var(--white); } .navbar.is-black .navbar-brand > .navbar-item, .navbar.is-black .navbar-brand .navbar-link { color: var(--white); } .navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, .navbar.is-black .navbar-brand .navbar-link:focus, .navbar.is-black .navbar-brand .navbar-link:hover, .navbar.is-black .navbar-brand .navbar-link.is-active { background-color: black; color: var(--white); } .navbar.is-black .navbar-brand .navbar-link::after { border-color: var(--white); } .navbar.is-black .navbar-burger { color: var(--white); } @media screen and (min-width: 1024px) { .navbar.is-black .navbar-start > .navbar-item, .navbar.is-black .navbar-start .navbar-link, .navbar.is-black .navbar-end > .navbar-item, .navbar.is-black .navbar-end .navbar-link { color: var(--white); } .navbar.is-black .navbar-start > a.navbar-item:focus, .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, .navbar.is-black .navbar-start .navbar-link:focus, .navbar.is-black .navbar-start .navbar-link:hover, .navbar.is-black .navbar-start .navbar-link.is-active, .navbar.is-black .navbar-end > a.navbar-item:focus, .navbar.is-black .navbar-end > a.navbar-item:hover, .navbar.is-black .navbar-end > a.navbar-item.is-active, .navbar.is-black .navbar-end .navbar-link:focus, .navbar.is-black .navbar-end .navbar-link:hover, .navbar.is-black .navbar-end .navbar-link.is-active { background-color: black; color: var(--white); } .navbar.is-black .navbar-start .navbar-link::after, .navbar.is-black .navbar-end .navbar-link::after { border-color: var(--white); } .navbar.is-black .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link { background-color: black; color: var(--white); } .navbar.is-black .navbar-dropdown a.navbar-item.is-active { background-color: #0a0a0a; color: var(--white); } } .navbar.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand > .navbar-item, .navbar.is-light .navbar-brand .navbar-link { color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, .navbar.is-light .navbar-brand .navbar-link:focus, .navbar.is-light .navbar-brand .navbar-link:hover, .navbar.is-light .navbar-brand .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-brand .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-burger { color: rgba(0, 0, 0, 0.7); } @media screen and (min-width: 1024px) { .navbar.is-light .navbar-start > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-end .navbar-link { color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, .navbar.is-light .navbar-start .navbar-link:focus, .navbar.is-light .navbar-start .navbar-link:hover, .navbar.is-light .navbar-start .navbar-link.is-active, .navbar.is-light .navbar-end > a.navbar-item:focus, .navbar.is-light .navbar-end > a.navbar-item:hover, .navbar.is-light .navbar-end > a.navbar-item.is-active, .navbar.is-light .navbar-end .navbar-link:focus, .navbar.is-light .navbar-end .navbar-link:hover, .navbar.is-light .navbar-end .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-start .navbar-link::after, .navbar.is-light .navbar-end .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .navbar.is-light .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } } .navbar.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand > .navbar-item, .navbar.is-dark .navbar-brand .navbar-link { color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, .navbar.is-dark .navbar-brand .navbar-link:focus, .navbar.is-dark .navbar-brand .navbar-link:hover, .navbar.is-dark .navbar-brand .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-brand .navbar-link::after { border-color: var(--dark--color-invert); } .navbar.is-dark .navbar-burger { color: var(--dark--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-dark .navbar-start > .navbar-item, .navbar.is-dark .navbar-start .navbar-link, .navbar.is-dark .navbar-end > .navbar-item, .navbar.is-dark .navbar-end .navbar-link { color: var(--dark--color-invert); } .navbar.is-dark .navbar-start > a.navbar-item:focus, .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, .navbar.is-dark .navbar-start .navbar-link:focus, .navbar.is-dark .navbar-start .navbar-link:hover, .navbar.is-dark .navbar-start .navbar-link.is-active, .navbar.is-dark .navbar-end > a.navbar-item:focus, .navbar.is-dark .navbar-end > a.navbar-item:hover, .navbar.is-dark .navbar-end > a.navbar-item.is-active, .navbar.is-dark .navbar-end .navbar-link:focus, .navbar.is-dark .navbar-end .navbar-link:hover, .navbar.is-dark .navbar-end .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-start .navbar-link::after, .navbar.is-dark .navbar-end .navbar-link::after { border-color: var(--dark--color-invert); } .navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--dark); color: var(--dark--color-invert); } .navbar.is-dark .navbar-dropdown a.navbar-item.is-active { background-color: var(--dark); color: var(--dark--color-invert); } } .navbar.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand > .navbar-item, .navbar.is-primary .navbar-brand .navbar-link { color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, .navbar.is-primary .navbar-brand .navbar-link:focus, .navbar.is-primary .navbar-brand .navbar-link:hover, .navbar.is-primary .navbar-brand .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-brand .navbar-link::after { border-color: var(--primary--color-invert); } .navbar.is-primary .navbar-burger { color: var(--primary--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-primary .navbar-start > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, .navbar.is-primary .navbar-end .navbar-link { color: var(--primary--color-invert); } .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, .navbar.is-primary .navbar-start .navbar-link:focus, .navbar.is-primary .navbar-start .navbar-link:hover, .navbar.is-primary .navbar-start .navbar-link.is-active, .navbar.is-primary .navbar-end > a.navbar-item:focus, .navbar.is-primary .navbar-end > a.navbar-item:hover, .navbar.is-primary .navbar-end > a.navbar-item.is-active, .navbar.is-primary .navbar-end .navbar-link:focus, .navbar.is-primary .navbar-end .navbar-link:hover, .navbar.is-primary .navbar-end .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-start .navbar-link::after, .navbar.is-primary .navbar-end .navbar-link::after { border-color: var(--primary--color-invert); } .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--primary); color: var(--primary--color-invert); } .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { background-color: var(--primary); color: var(--primary--color-invert); } } .navbar.is-link { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-brand > .navbar-item, .navbar.is-link .navbar-brand .navbar-link { color: var(--link--color-invert); } .navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, .navbar.is-link .navbar-brand .navbar-link:focus, .navbar.is-link .navbar-brand .navbar-link:hover, .navbar.is-link .navbar-brand .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-brand .navbar-link::after { border-color: var(--link--color-invert); } .navbar.is-link .navbar-burger { color: var(--link--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-link .navbar-start > .navbar-item, .navbar.is-link .navbar-start .navbar-link, .navbar.is-link .navbar-end > .navbar-item, .navbar.is-link .navbar-end .navbar-link { color: var(--link--color-invert); } .navbar.is-link .navbar-start > a.navbar-item:focus, .navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, .navbar.is-link .navbar-start .navbar-link:focus, .navbar.is-link .navbar-start .navbar-link:hover, .navbar.is-link .navbar-start .navbar-link.is-active, .navbar.is-link .navbar-end > a.navbar-item:focus, .navbar.is-link .navbar-end > a.navbar-item:hover, .navbar.is-link .navbar-end > a.navbar-item.is-active, .navbar.is-link .navbar-end .navbar-link:focus, .navbar.is-link .navbar-end .navbar-link:hover, .navbar.is-link .navbar-end .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-start .navbar-link::after, .navbar.is-link .navbar-end .navbar-link::after { border-color: var(--link--color-invert); } .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--link); color: var(--link--color-invert); } .navbar.is-link .navbar-dropdown a.navbar-item.is-active { background-color: var(--link); color: var(--link--color-invert); } } .navbar.is-info { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-brand > .navbar-item, .navbar.is-info .navbar-brand .navbar-link { color: var(--info--color-invert); } .navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, .navbar.is-info .navbar-brand .navbar-link:focus, .navbar.is-info .navbar-brand .navbar-link:hover, .navbar.is-info .navbar-brand .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-brand .navbar-link::after { border-color: var(--info--color-invert); } .navbar.is-info .navbar-burger { color: var(--info--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-info .navbar-start > .navbar-item, .navbar.is-info .navbar-start .navbar-link, .navbar.is-info .navbar-end > .navbar-item, .navbar.is-info .navbar-end .navbar-link { color: var(--info--color-invert); } .navbar.is-info .navbar-start > a.navbar-item:focus, .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, .navbar.is-info .navbar-start .navbar-link:focus, .navbar.is-info .navbar-start .navbar-link:hover, .navbar.is-info .navbar-start .navbar-link.is-active, .navbar.is-info .navbar-end > a.navbar-item:focus, .navbar.is-info .navbar-end > a.navbar-item:hover, .navbar.is-info .navbar-end > a.navbar-item.is-active, .navbar.is-info .navbar-end .navbar-link:focus, .navbar.is-info .navbar-end .navbar-link:hover, .navbar.is-info .navbar-end .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-start .navbar-link::after, .navbar.is-info .navbar-end .navbar-link::after { border-color: var(--info--color-invert); } .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--info); color: var(--info--color-invert); } .navbar.is-info .navbar-dropdown a.navbar-item.is-active { background-color: var(--info); color: var(--info--color-invert); } } .navbar.is-success { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-brand > .navbar-item, .navbar.is-success .navbar-brand .navbar-link { color: var(--success--color-invert); } .navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, .navbar.is-success .navbar-brand .navbar-link:focus, .navbar.is-success .navbar-brand .navbar-link:hover, .navbar.is-success .navbar-brand .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-brand .navbar-link::after { border-color: var(--success--color-invert); } .navbar.is-success .navbar-burger { color: var(--success--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-success .navbar-start > .navbar-item, .navbar.is-success .navbar-start .navbar-link, .navbar.is-success .navbar-end > .navbar-item, .navbar.is-success .navbar-end .navbar-link { color: var(--success--color-invert); } .navbar.is-success .navbar-start > a.navbar-item:focus, .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, .navbar.is-success .navbar-start .navbar-link:focus, .navbar.is-success .navbar-start .navbar-link:hover, .navbar.is-success .navbar-start .navbar-link.is-active, .navbar.is-success .navbar-end > a.navbar-item:focus, .navbar.is-success .navbar-end > a.navbar-item:hover, .navbar.is-success .navbar-end > a.navbar-item.is-active, .navbar.is-success .navbar-end .navbar-link:focus, .navbar.is-success .navbar-end .navbar-link:hover, .navbar.is-success .navbar-end .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-start .navbar-link::after, .navbar.is-success .navbar-end .navbar-link::after { border-color: var(--success--color-invert); } .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--success); color: var(--success--color-invert); } .navbar.is-success .navbar-dropdown a.navbar-item.is-active { background-color: var(--success); color: var(--success--color-invert); } } .navbar.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand > .navbar-item, .navbar.is-warning .navbar-brand .navbar-link { color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, .navbar.is-warning .navbar-brand .navbar-link:focus, .navbar.is-warning .navbar-brand .navbar-link:hover, .navbar.is-warning .navbar-brand .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-brand .navbar-link::after { border-color: var(--warning--color-invert); } .navbar.is-warning .navbar-burger { color: var(--warning--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-warning .navbar-start > .navbar-item, .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, .navbar.is-warning .navbar-end .navbar-link { color: var(--warning--color-invert); } .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, .navbar.is-warning .navbar-start .navbar-link:focus, .navbar.is-warning .navbar-start .navbar-link:hover, .navbar.is-warning .navbar-start .navbar-link.is-active, .navbar.is-warning .navbar-end > a.navbar-item:focus, .navbar.is-warning .navbar-end > a.navbar-item:hover, .navbar.is-warning .navbar-end > a.navbar-item.is-active, .navbar.is-warning .navbar-end .navbar-link:focus, .navbar.is-warning .navbar-end .navbar-link:hover, .navbar.is-warning .navbar-end .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-start .navbar-link::after, .navbar.is-warning .navbar-end .navbar-link::after { border-color: var(--warning--color-invert); } .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--warning); color: var(--warning--color-invert); } .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { background-color: var(--warning); color: var(--warning--color-invert); } } .navbar.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand > .navbar-item, .navbar.is-danger .navbar-brand .navbar-link { color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, .navbar.is-danger .navbar-brand .navbar-link:focus, .navbar.is-danger .navbar-brand .navbar-link:hover, .navbar.is-danger .navbar-brand .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-brand .navbar-link::after { border-color: var(--danger--color-invert); } .navbar.is-danger .navbar-burger { color: var(--danger--color-invert); } @media screen and (min-width: 1024px) { .navbar.is-danger .navbar-start > .navbar-item, .navbar.is-danger .navbar-start .navbar-link, .navbar.is-danger .navbar-end > .navbar-item, .navbar.is-danger .navbar-end .navbar-link { color: var(--danger--color-invert); } .navbar.is-danger .navbar-start > a.navbar-item:focus, .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, .navbar.is-danger .navbar-start .navbar-link:focus, .navbar.is-danger .navbar-start .navbar-link:hover, .navbar.is-danger .navbar-start .navbar-link.is-active, .navbar.is-danger .navbar-end > a.navbar-item:focus, .navbar.is-danger .navbar-end > a.navbar-item:hover, .navbar.is-danger .navbar-end > a.navbar-item.is-active, .navbar.is-danger .navbar-end .navbar-link:focus, .navbar.is-danger .navbar-end .navbar-link:hover, .navbar.is-danger .navbar-end .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-start .navbar-link::after, .navbar.is-danger .navbar-end .navbar-link::after { border-color: var(--danger--color-invert); } .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { background-color: var(--danger); color: var(--danger--color-invert); } .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { background-color: var(--danger); color: var(--danger--color-invert); } } .navbar > .container { align-items: stretch; display: flex; min-height: 3.25rem; width: 100%; } .navbar.has-shadow { box-shadow: 0 2px 0 0 whitesmoke; } .navbar.is-fixed-bottom, .navbar.is-fixed-top { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom { bottom: 0; } .navbar.is-fixed-bottom.has-shadow { box-shadow: 0 -2px 0 0 whitesmoke; } .navbar.is-fixed-top { top: 0; } html.has-navbar-fixed-top, body.has-navbar-fixed-top { padding-top: 3.25rem; } html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { padding-bottom: 3.25rem; } .navbar-brand, .navbar-tabs { align-items: stretch; display: flex; flex-shrink: 0; min-height: 3.25rem; } .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { background-color: transparent; } .navbar-tabs { -webkit-overflow-scrolling: touch; max-width: 100vw; overflow-x: auto; overflow-y: hidden; } .navbar-burger { color: #4a4a4a; cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; margin-left: auto; } .navbar-burger span { background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color, opacity, transform; transition-timing-function: ease-out; width: 16px; } .navbar-burger span:nth-child(1) { top: calc(50% - 6px); } .navbar-burger span:nth-child(2) { top: calc(50% - 1px); } .navbar-burger span:nth-child(3) { top: calc(50% + 4px); } .navbar-burger:hover { background-color: rgba(0, 0, 0, 0.05); } .navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .navbar-burger.is-active span:nth-child(2) { opacity: 0; } .navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .navbar-menu { display: none; } .navbar-item, .navbar-link { color: #4a4a4a; display: block; line-height: 1.5; padding: 0.5rem 0.75rem; position: relative; } .navbar-item .icon:only-child, .navbar-link .icon:only-child { margin-left: -0.25rem; margin-right: -0.25rem; } a.navbar-item, .navbar-link { cursor: pointer; } a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active { background-color: #fafafa; color: var(--link); } .navbar-item { flex-grow: 0; flex-shrink: 0; } .navbar-item img { max-height: 1.75rem; } .navbar-item.has-dropdown { padding: 0; } .navbar-item.is-expanded { flex-grow: 1; flex-shrink: 1; } .navbar-item.is-tab { border-bottom: 1px solid transparent; min-height: 3.25rem; padding-bottom: calc(0.5rem - 1px); } .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { background-color: transparent; border-bottom-color: var(--link); } .navbar-item.is-tab.is-active { background-color: transparent; border-bottom-color: var(--link); border-bottom-style: solid; border-bottom-width: 3px; color: var(--link); padding-bottom: calc(0.5rem - 3px); } .navbar-content { flex-grow: 1; flex-shrink: 1; } .navbar-link:not(.is-arrowless) { padding-right: 2.5em; } .navbar-link:not(.is-arrowless)::after { border-color: var(--link); margin-top: -0.375em; right: 1.125em; } .navbar-dropdown { font-size: 0.875rem; padding-bottom: 0.5rem; padding-top: 0.5rem; } .navbar-dropdown .navbar-item { padding-left: 1.5rem; padding-right: 1.5rem; } .navbar-divider { background-color: whitesmoke; border: none; display: none; height: 2px; margin: 0.5rem 0; } @media screen and (max-width: 1023px) { .navbar > .container { display: block; } .navbar-brand .navbar-item, .navbar-tabs .navbar-item { align-items: center; display: flex; } .navbar-link::after { display: none; } .navbar-menu { background-color: var(--white); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); padding: 0.5rem 0; } .navbar-menu.is-active { display: block; } .navbar.is-fixed-bottom-touch, .navbar.is-fixed-top-touch { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom-touch { bottom: 0; } .navbar.is-fixed-bottom-touch.has-shadow { box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-touch { top: 0; } .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { -webkit-overflow-scrolling: touch; max-height: calc(100vh - 3.25rem); overflow: auto; } html.has-navbar-fixed-top-touch, body.has-navbar-fixed-top-touch { padding-top: 3.25rem; } html.has-navbar-fixed-bottom-touch, body.has-navbar-fixed-bottom-touch { padding-bottom: 3.25rem; } } @media screen and (min-width: 1024px) { .navbar, .navbar-menu, .navbar-start, .navbar-end { align-items: stretch; display: flex; } .navbar { min-height: 3.25rem; } .navbar.is-spaced { padding: 1rem 2rem; } .navbar.is-spaced .navbar-start, .navbar.is-spaced .navbar-end { align-items: center; } .navbar.is-spaced a.navbar-item, .navbar.is-spaced .navbar-link { border-radius: var(--radius); } .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent .navbar-link:focus, .navbar.is-transparent .navbar-link:hover, .navbar.is-transparent .navbar-link.is-active { background-color: transparent !important; } .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { background-color: transparent !important; } .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { background-color: whitesmoke; color: #0a0a0a; } .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: var(--link); } .navbar-burger { display: none; } .navbar-item, .navbar-link { align-items: center; display: flex; } .navbar-item.has-dropdown { align-items: stretch; } .navbar-item.has-dropdown-up .navbar-link::after { transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-item.has-dropdown-up .navbar-dropdown { border-bottom: 2px solid var(--border); border-radius: var(--radius-large) var(--radius-large) 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); top: auto; } .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { display: block; } .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { opacity: 1; pointer-events: auto; transform: translateY(0); } .navbar-menu { flex-grow: 1; flex-shrink: 0; } .navbar-start { justify-content: flex-start; margin-right: auto; } .navbar-end { justify-content: flex-end; margin-left: auto; } .navbar-dropdown { background-color: var(--white); border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); border-top: 2px solid var(--border); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; left: 0; min-width: 100%; position: absolute; top: 100%; z-index: 20; } .navbar-dropdown .navbar-item { padding: 0.375rem 1rem; white-space: nowrap; } .navbar-dropdown a.navbar-item { padding-right: 3rem; } .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { background-color: whitesmoke; color: #0a0a0a; } .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; color: var(--link); } .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { border-radius: var(--radius-large); border-top: none; box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: block; opacity: 0; pointer-events: none; top: calc(100% + (-4px)); transform: translateY(-5px); transition-duration: 86ms; transition-property: opacity, transform; } .navbar-dropdown.is-right { left: auto; right: 0; } .navbar-divider { display: block; } .navbar > .container .navbar-brand, .container > .navbar .navbar-brand { margin-left: -0.75rem; } .navbar > .container .navbar-menu, .container > .navbar .navbar-menu { margin-right: -0.75rem; } .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { left: 0; position: fixed; right: 0; z-index: 30; } .navbar.is-fixed-bottom-desktop { bottom: 0; } .navbar.is-fixed-bottom-desktop.has-shadow { box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-desktop { top: 0; } html.has-navbar-fixed-top-desktop, body.has-navbar-fixed-top-desktop { padding-top: 3.25rem; } html.has-navbar-fixed-bottom-desktop, body.has-navbar-fixed-bottom-desktop { padding-bottom: 3.25rem; } html.has-spaced-navbar-fixed-top, body.has-spaced-navbar-fixed-top { padding-top: 5.25rem; } html.has-spaced-navbar-fixed-bottom, body.has-spaced-navbar-fixed-bottom { padding-bottom: 5.25rem; } a.navbar-item.is-active, .navbar-link.is-active { color: #0a0a0a; } a.navbar-item.is-active:not(:focus):not(:hover), .navbar-link.is-active:not(:focus):not(:hover) { background-color: transparent; } .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { background-color: #fafafa; } } .hero.is-fullheight-with-navbar { min-height: calc(100vh - 3.25rem); } .pagination { font-size: 1rem; margin: -0.25rem; } .pagination.is-small { font-size: 0.75rem; } .pagination.is-medium { font-size: 1.25rem; } .pagination.is-large { font-size: 1.5rem; } .pagination.is-rounded .pagination-previous, .pagination.is-rounded .pagination-next { padding-left: 1em; padding-right: 1em; border-radius: var(--radius-rounded); } .pagination.is-rounded .pagination-link { border-radius: var(--radius-rounded); } .pagination, .pagination-list { align-items: center; display: flex; justify-content: center; text-align: center; } .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis { font-size: 1em; justify-content: center; margin: 0.25rem; padding-left: 0.5em; padding-right: 0.5em; text-align: center; } .pagination-previous, .pagination-next, .pagination-link { border-color: var(--border); color: #363636; min-width: 2.5em; } .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { border-color: #b5b5b5; color: #363636; } .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { border-color: #485fc7; } .pagination-previous:active, .pagination-next:active, .pagination-link:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); } .pagination-previous[disabled], .pagination-next[disabled], .pagination-link[disabled] { background-color: var(--border); border-color: var(--border); box-shadow: none; color: #7a7a7a; opacity: 0.5; } .pagination-previous, .pagination-next { padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } .pagination-link.is-current { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); } .pagination-ellipsis { color: #b5b5b5; pointer-events: none; } .pagination-list { flex-wrap: wrap; } .pagination-list li { list-style: none; } @media screen and (max-width: 768px) { .pagination { flex-wrap: wrap; } .pagination-previous, .pagination-next { flex-grow: 1; flex-shrink: 1; } .pagination-list li { flex-grow: 1; flex-shrink: 1; } } @media screen and (min-width: 769px), print { .pagination-list { flex-grow: 1; flex-shrink: 1; justify-content: flex-start; order: 1; } .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis { margin-bottom: 0; margin-top: 0; } .pagination-previous { order: 2; } .pagination-next { order: 3; } .pagination { justify-content: space-between; margin-bottom: 0; margin-top: 0; } .pagination.is-centered .pagination-previous { order: 1; } .pagination.is-centered .pagination-list { justify-content: center; order: 2; } .pagination.is-centered .pagination-next { order: 3; } .pagination.is-right .pagination-previous { order: 1; } .pagination.is-right .pagination-next { order: 2; } .pagination.is-right .pagination-list { justify-content: flex-end; order: 3; } } .panel { border-radius: var(--radius-large); box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); font-size: 1rem; } .panel:not(:last-child) { margin-bottom: 1.5rem; } .panel.is-white .panel-heading { background-color: var(--white); color: #0a0a0a; } .panel.is-white .panel-tabs a.is-active { border-bottom-color: var(--white); } .panel.is-white .panel-block.is-active .panel-icon { color: var(--white); } .panel.is-black .panel-heading { background-color: #0a0a0a; color: var(--white); } .panel.is-black .panel-tabs a.is-active { border-bottom-color: #0a0a0a; } .panel.is-black .panel-block.is-active .panel-icon { color: #0a0a0a; } .panel.is-light .panel-heading { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .panel.is-light .panel-tabs a.is-active { border-bottom-color: whitesmoke; } .panel.is-light .panel-block.is-active .panel-icon { color: whitesmoke; } .panel.is-dark .panel-heading { background-color: var(--dark); color: var(--dark--color-invert); } .panel.is-dark .panel-tabs a.is-active { border-bottom-color: var(--dark); } .panel.is-dark .panel-block.is-active .panel-icon { color: var(--dark); } .panel.is-primary .panel-heading { background-color: var(--primary); color: var(--primary--color-invert); } .panel.is-primary .panel-tabs a.is-active { border-bottom-color: var(--primary); } .panel.is-primary .panel-block.is-active .panel-icon { color: var(--primary); } .panel.is-link .panel-heading { background-color: var(--link); color: var(--link--color-invert); } .panel.is-link .panel-tabs a.is-active { border-bottom-color: var(--link); } .panel.is-link .panel-block.is-active .panel-icon { color: var(--link); } .panel.is-info .panel-heading { background-color: var(--info); color: var(--info--color-invert); } .panel.is-info .panel-tabs a.is-active { border-bottom-color: var(--info); } .panel.is-info .panel-block.is-active .panel-icon { color: var(--info); } .panel.is-success .panel-heading { background-color: var(--success); color: var(--success--color-invert); } .panel.is-success .panel-tabs a.is-active { border-bottom-color: var(--success); } .panel.is-success .panel-block.is-active .panel-icon { color: var(--success); } .panel.is-warning .panel-heading { background-color: var(--warning); color: var(--warning--color-invert); } .panel.is-warning .panel-tabs a.is-active { border-bottom-color: var(--warning); } .panel.is-warning .panel-block.is-active .panel-icon { color: var(--warning); } .panel.is-danger .panel-heading { background-color: var(--danger); color: var(--danger--color-invert); } .panel.is-danger .panel-tabs a.is-active { border-bottom-color: var(--danger); } .panel.is-danger .panel-block.is-active .panel-icon { color: var(--danger); } .panel-tabs:not(:last-child), .panel-block:not(:last-child) { border-bottom: 1px solid #ededed; } .panel-heading { background-color: #ededed; border-radius: var(--radius-large) var(--radius-large) 0 0; color: #363636; font-size: 1.25em; font-weight: 700; line-height: 1.25; padding: 0.75em 1em; } .panel-tabs { align-items: flex-end; display: flex; font-size: 0.875em; justify-content: center; } .panel-tabs a { border-bottom: 1px solid var(--border); margin-bottom: -1px; padding: 0.5em; } .panel-tabs a.is-active { border-bottom-color: #4a4a4a; color: #363636; } .panel-list a { color: #4a4a4a; } .panel-list a:hover { color: var(--link); } .panel-block { align-items: center; color: #363636; display: flex; justify-content: flex-start; padding: 0.5em 0.75em; } .panel-block input[type=checkbox] { margin-right: 0.75em; } .panel-block > .control { flex-grow: 1; flex-shrink: 1; width: 100%; } .panel-block.is-wrapped { flex-wrap: wrap; } .panel-block.is-active { border-left-color: var(--link); color: #363636; } .panel-block.is-active .panel-icon { color: var(--link); } .panel-block:last-child { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); } a.panel-block, label.panel-block { cursor: pointer; } a.panel-block:hover, label.panel-block:hover { background-color: whitesmoke; } .panel-icon { display: inline-block; font-size: 14px; height: 1em; line-height: 1em; text-align: center; vertical-align: top; width: 1em; color: #7a7a7a; margin-right: 0.75em; } .panel-icon .fa { font-size: inherit; line-height: inherit; } .tabs { -webkit-overflow-scrolling: touch; align-items: stretch; display: flex; font-size: 1rem; justify-content: space-between; overflow: hidden; overflow-x: auto; white-space: nowrap; } .tabs a { align-items: center; border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; color: #4a4a4a; display: flex; justify-content: center; margin-bottom: -1px; padding: 0.5em 1em; vertical-align: top; } .tabs a:hover { border-bottom-color: #363636; color: #363636; } .tabs li { display: block; } .tabs li.is-active a { border-bottom-color: var(--link); color: var(--link); } .tabs ul { align-items: center; border-bottom-color: var(--border); border-bottom-style: solid; border-bottom-width: 1px; display: flex; flex-grow: 1; flex-shrink: 0; justify-content: flex-start; } .tabs ul.is-left { padding-right: 0.75em; } .tabs ul.is-center { flex: none; justify-content: center; padding-left: 0.75em; padding-right: 0.75em; } .tabs ul.is-right { justify-content: flex-end; padding-left: 0.75em; } .tabs .icon:first-child { margin-right: 0.5em; } .tabs .icon:last-child { margin-left: 0.5em; } .tabs.is-centered ul { justify-content: center; } .tabs.is-right ul { justify-content: flex-end; } .tabs.is-boxed a { border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0; } .tabs.is-boxed a:hover { background-color: whitesmoke; border-bottom-color: var(--border); } .tabs.is-boxed li.is-active a { background-color: var(--white); border-color: var(--border); border-bottom-color: transparent !important; } .tabs.is-fullwidth li { flex-grow: 1; flex-shrink: 0; } .tabs.is-toggle a { border-color: var(--border); border-style: solid; border-width: 1px; margin-bottom: 0; position: relative; } .tabs.is-toggle a:hover { background-color: whitesmoke; border-color: #b5b5b5; z-index: 2; } .tabs.is-toggle li + li { margin-left: -1px; } .tabs.is-toggle li:first-child a { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } .tabs.is-toggle li:last-child a { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } .tabs.is-toggle li.is-active a { background-color: var(--link); border-color: var(--link); color: var(--link--color-invert); z-index: 1; } .tabs.is-toggle ul { border-bottom: none; } .tabs.is-toggle.is-toggle-rounded li:first-child a { border-bottom-left-radius: var(--radius-rounded); border-top-left-radius: var(--radius-rounded); padding-left: 1.25em; } .tabs.is-toggle.is-toggle-rounded li:last-child a { border-bottom-right-radius: var(--radius-rounded); border-top-right-radius: var(--radius-rounded); padding-right: 1.25em; } .tabs.is-small { font-size: 0.75rem; } .tabs.is-medium { font-size: 1.25rem; } .tabs.is-large { font-size: 1.5rem; } /* Bulma Grid */ .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .columns.is-mobile > .column.is-narrow { flex: none; width: unset; } .columns.is-mobile > .column.is-full { flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { flex: none; width: 25%; } .columns.is-mobile > .column.is-one-fifth { flex: none; width: 20%; } .columns.is-mobile > .column.is-two-fifths { flex: none; width: 40%; } .columns.is-mobile > .column.is-three-fifths { flex: none; width: 60%; } .columns.is-mobile > .column.is-four-fifths { flex: none; width: 80%; } .columns.is-mobile > .column.is-offset-three-quarters { margin-left: 75%; } .columns.is-mobile > .column.is-offset-two-thirds { margin-left: 66.6666%; } .columns.is-mobile > .column.is-offset-half { margin-left: 50%; } .columns.is-mobile > .column.is-offset-one-third { margin-left: 33.3333%; } .columns.is-mobile > .column.is-offset-one-quarter { margin-left: 25%; } .columns.is-mobile > .column.is-offset-one-fifth { margin-left: 20%; } .columns.is-mobile > .column.is-offset-two-fifths { margin-left: 40%; } .columns.is-mobile > .column.is-offset-three-fifths { margin-left: 60%; } .columns.is-mobile > .column.is-offset-four-fifths { margin-left: 80%; } .columns.is-mobile > .column.is-0 { flex: none; width: 0%; } .columns.is-mobile > .column.is-offset-0 { margin-left: 0%; } .columns.is-mobile > .column.is-1 { flex: none; width: 8.33333337%; } .columns.is-mobile > .column.is-offset-1 { margin-left: 8.33333337%; } .columns.is-mobile > .column.is-2 { flex: none; width: 16.66666674%; } .columns.is-mobile > .column.is-offset-2 { margin-left: 16.66666674%; } .columns.is-mobile > .column.is-3 { flex: none; width: 25%; } .columns.is-mobile > .column.is-offset-3 { margin-left: 25%; } .columns.is-mobile > .column.is-4 { flex: none; width: 33.33333337%; } .columns.is-mobile > .column.is-offset-4 { margin-left: 33.33333337%; } .columns.is-mobile > .column.is-5 { flex: none; width: 41.66666674%; } .columns.is-mobile > .column.is-offset-5 { margin-left: 41.66666674%; } .columns.is-mobile > .column.is-6 { flex: none; width: 50%; } .columns.is-mobile > .column.is-offset-6 { margin-left: 50%; } .columns.is-mobile > .column.is-7 { flex: none; width: 58.33333337%; } .columns.is-mobile > .column.is-offset-7 { margin-left: 58.33333337%; } .columns.is-mobile > .column.is-8 { flex: none; width: 66.66666674%; } .columns.is-mobile > .column.is-offset-8 { margin-left: 66.66666674%; } .columns.is-mobile > .column.is-9 { flex: none; width: 75%; } .columns.is-mobile > .column.is-offset-9 { margin-left: 75%; } .columns.is-mobile > .column.is-10 { flex: none; width: 83.33333337%; } .columns.is-mobile > .column.is-offset-10 { margin-left: 83.33333337%; } .columns.is-mobile > .column.is-11 { flex: none; width: 91.66666674%; } .columns.is-mobile > .column.is-offset-11 { margin-left: 91.66666674%; } .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } .columns.is-mobile > .column.is-offset-12 { margin-left: 100%; } @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; width: unset; } .column.is-full-mobile { flex: none; width: 100%; } .column.is-three-quarters-mobile { flex: none; width: 75%; } .column.is-two-thirds-mobile { flex: none; width: 66.6666%; } .column.is-half-mobile { flex: none; width: 50%; } .column.is-one-third-mobile { flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { flex: none; width: 25%; } .column.is-one-fifth-mobile { flex: none; width: 20%; } .column.is-two-fifths-mobile { flex: none; width: 40%; } .column.is-three-fifths-mobile { flex: none; width: 60%; } .column.is-four-fifths-mobile { flex: none; width: 80%; } .column.is-offset-three-quarters-mobile { margin-left: 75%; } .column.is-offset-two-thirds-mobile { margin-left: 66.6666%; } .column.is-offset-half-mobile { margin-left: 50%; } .column.is-offset-one-third-mobile { margin-left: 33.3333%; } .column.is-offset-one-quarter-mobile { margin-left: 25%; } .column.is-offset-one-fifth-mobile { margin-left: 20%; } .column.is-offset-two-fifths-mobile { margin-left: 40%; } .column.is-offset-three-fifths-mobile { margin-left: 60%; } .column.is-offset-four-fifths-mobile { margin-left: 80%; } .column.is-0-mobile { flex: none; width: 0%; } .column.is-offset-0-mobile { margin-left: 0%; } .column.is-1-mobile { flex: none; width: 8.33333337%; } .column.is-offset-1-mobile { margin-left: 8.33333337%; } .column.is-2-mobile { flex: none; width: 16.66666674%; } .column.is-offset-2-mobile { margin-left: 16.66666674%; } .column.is-3-mobile { flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { flex: none; width: 33.33333337%; } .column.is-offset-4-mobile { margin-left: 33.33333337%; } .column.is-5-mobile { flex: none; width: 41.66666674%; } .column.is-offset-5-mobile { margin-left: 41.66666674%; } .column.is-6-mobile { flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { flex: none; width: 58.33333337%; } .column.is-offset-7-mobile { margin-left: 58.33333337%; } .column.is-8-mobile { flex: none; width: 66.66666674%; } .column.is-offset-8-mobile { margin-left: 66.66666674%; } .column.is-9-mobile { flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { flex: none; width: 83.33333337%; } .column.is-offset-10-mobile { margin-left: 83.33333337%; } .column.is-11-mobile { flex: none; width: 91.66666674%; } .column.is-offset-11-mobile { margin-left: 91.66666674%; } .column.is-12-mobile { flex: none; width: 100%; } .column.is-offset-12-mobile { margin-left: 100%; } } @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { flex: none; width: unset; } .column.is-full, .column.is-full-tablet { flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { flex: none; width: 25%; } .column.is-one-fifth, .column.is-one-fifth-tablet { flex: none; width: 20%; } .column.is-two-fifths, .column.is-two-fifths-tablet { flex: none; width: 40%; } .column.is-three-fifths, .column.is-three-fifths-tablet { flex: none; width: 60%; } .column.is-four-fifths, .column.is-four-fifths-tablet { flex: none; width: 80%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { margin-left: 75%; } .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { margin-left: 66.6666%; } .column.is-offset-half, .column.is-offset-half-tablet { margin-left: 50%; } .column.is-offset-one-third, .column.is-offset-one-third-tablet { margin-left: 33.3333%; } .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { margin-left: 25%; } .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { margin-left: 20%; } .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { margin-left: 40%; } .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { margin-left: 60%; } .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { margin-left: 80%; } .column.is-0, .column.is-0-tablet { flex: none; width: 0%; } .column.is-offset-0, .column.is-offset-0-tablet { margin-left: 0%; } .column.is-1, .column.is-1-tablet { flex: none; width: 8.33333337%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.33333337%; } .column.is-2, .column.is-2-tablet { flex: none; width: 16.66666674%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.66666674%; } .column.is-3, .column.is-3-tablet { flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { flex: none; width: 33.33333337%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333337%; } .column.is-5, .column.is-5-tablet { flex: none; width: 41.66666674%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66666674%; } .column.is-6, .column.is-6-tablet { flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { flex: none; width: 58.33333337%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.33333337%; } .column.is-8, .column.is-8-tablet { flex: none; width: 66.66666674%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66666674%; } .column.is-9, .column.is-9-tablet { flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { flex: none; width: 83.33333337%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333337%; } .column.is-11, .column.is-11-tablet { flex: none; width: 91.66666674%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66666674%; } .column.is-12, .column.is-12-tablet { flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { margin-left: 100%; } } @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; width: unset; } .column.is-full-touch { flex: none; width: 100%; } .column.is-three-quarters-touch { flex: none; width: 75%; } .column.is-two-thirds-touch { flex: none; width: 66.6666%; } .column.is-half-touch { flex: none; width: 50%; } .column.is-one-third-touch { flex: none; width: 33.3333%; } .column.is-one-quarter-touch { flex: none; width: 25%; } .column.is-one-fifth-touch { flex: none; width: 20%; } .column.is-two-fifths-touch { flex: none; width: 40%; } .column.is-three-fifths-touch { flex: none; width: 60%; } .column.is-four-fifths-touch { flex: none; width: 80%; } .column.is-offset-three-quarters-touch { margin-left: 75%; } .column.is-offset-two-thirds-touch { margin-left: 66.6666%; } .column.is-offset-half-touch { margin-left: 50%; } .column.is-offset-one-third-touch { margin-left: 33.3333%; } .column.is-offset-one-quarter-touch { margin-left: 25%; } .column.is-offset-one-fifth-touch { margin-left: 20%; } .column.is-offset-two-fifths-touch { margin-left: 40%; } .column.is-offset-three-fifths-touch { margin-left: 60%; } .column.is-offset-four-fifths-touch { margin-left: 80%; } .column.is-0-touch { flex: none; width: 0%; } .column.is-offset-0-touch { margin-left: 0%; } .column.is-1-touch { flex: none; width: 8.33333337%; } .column.is-offset-1-touch { margin-left: 8.33333337%; } .column.is-2-touch { flex: none; width: 16.66666674%; } .column.is-offset-2-touch { margin-left: 16.66666674%; } .column.is-3-touch { flex: none; width: 25%; } .column.is-offset-3-touch { margin-left: 25%; } .column.is-4-touch { flex: none; width: 33.33333337%; } .column.is-offset-4-touch { margin-left: 33.33333337%; } .column.is-5-touch { flex: none; width: 41.66666674%; } .column.is-offset-5-touch { margin-left: 41.66666674%; } .column.is-6-touch { flex: none; width: 50%; } .column.is-offset-6-touch { margin-left: 50%; } .column.is-7-touch { flex: none; width: 58.33333337%; } .column.is-offset-7-touch { margin-left: 58.33333337%; } .column.is-8-touch { flex: none; width: 66.66666674%; } .column.is-offset-8-touch { margin-left: 66.66666674%; } .column.is-9-touch { flex: none; width: 75%; } .column.is-offset-9-touch { margin-left: 75%; } .column.is-10-touch { flex: none; width: 83.33333337%; } .column.is-offset-10-touch { margin-left: 83.33333337%; } .column.is-11-touch { flex: none; width: 91.66666674%; } .column.is-offset-11-touch { margin-left: 91.66666674%; } .column.is-12-touch { flex: none; width: 100%; } .column.is-offset-12-touch { margin-left: 100%; } } @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; width: unset; } .column.is-full-desktop { flex: none; width: 100%; } .column.is-three-quarters-desktop { flex: none; width: 75%; } .column.is-two-thirds-desktop { flex: none; width: 66.6666%; } .column.is-half-desktop { flex: none; width: 50%; } .column.is-one-third-desktop { flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { flex: none; width: 25%; } .column.is-one-fifth-desktop { flex: none; width: 20%; } .column.is-two-fifths-desktop { flex: none; width: 40%; } .column.is-three-fifths-desktop { flex: none; width: 60%; } .column.is-four-fifths-desktop { flex: none; width: 80%; } .column.is-offset-three-quarters-desktop { margin-left: 75%; } .column.is-offset-two-thirds-desktop { margin-left: 66.6666%; } .column.is-offset-half-desktop { margin-left: 50%; } .column.is-offset-one-third-desktop { margin-left: 33.3333%; } .column.is-offset-one-quarter-desktop { margin-left: 25%; } .column.is-offset-one-fifth-desktop { margin-left: 20%; } .column.is-offset-two-fifths-desktop { margin-left: 40%; } .column.is-offset-three-fifths-desktop { margin-left: 60%; } .column.is-offset-four-fifths-desktop { margin-left: 80%; } .column.is-0-desktop { flex: none; width: 0%; } .column.is-offset-0-desktop { margin-left: 0%; } .column.is-1-desktop { flex: none; width: 8.33333337%; } .column.is-offset-1-desktop { margin-left: 8.33333337%; } .column.is-2-desktop { flex: none; width: 16.66666674%; } .column.is-offset-2-desktop { margin-left: 16.66666674%; } .column.is-3-desktop { flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { flex: none; width: 33.33333337%; } .column.is-offset-4-desktop { margin-left: 33.33333337%; } .column.is-5-desktop { flex: none; width: 41.66666674%; } .column.is-offset-5-desktop { margin-left: 41.66666674%; } .column.is-6-desktop { flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { flex: none; width: 58.33333337%; } .column.is-offset-7-desktop { margin-left: 58.33333337%; } .column.is-8-desktop { flex: none; width: 66.66666674%; } .column.is-offset-8-desktop { margin-left: 66.66666674%; } .column.is-9-desktop { flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { flex: none; width: 83.33333337%; } .column.is-offset-10-desktop { margin-left: 83.33333337%; } .column.is-11-desktop { flex: none; width: 91.66666674%; } .column.is-offset-11-desktop { margin-left: 91.66666674%; } .column.is-12-desktop { flex: none; width: 100%; } .column.is-offset-12-desktop { margin-left: 100%; } } @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; width: unset; } .column.is-full-widescreen { flex: none; width: 100%; } .column.is-three-quarters-widescreen { flex: none; width: 75%; } .column.is-two-thirds-widescreen { flex: none; width: 66.6666%; } .column.is-half-widescreen { flex: none; width: 50%; } .column.is-one-third-widescreen { flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { flex: none; width: 25%; } .column.is-one-fifth-widescreen { flex: none; width: 20%; } .column.is-two-fifths-widescreen { flex: none; width: 40%; } .column.is-three-fifths-widescreen { flex: none; width: 60%; } .column.is-four-fifths-widescreen { flex: none; width: 80%; } .column.is-offset-three-quarters-widescreen { margin-left: 75%; } .column.is-offset-two-thirds-widescreen { margin-left: 66.6666%; } .column.is-offset-half-widescreen { margin-left: 50%; } .column.is-offset-one-third-widescreen { margin-left: 33.3333%; } .column.is-offset-one-quarter-widescreen { margin-left: 25%; } .column.is-offset-one-fifth-widescreen { margin-left: 20%; } .column.is-offset-two-fifths-widescreen { margin-left: 40%; } .column.is-offset-three-fifths-widescreen { margin-left: 60%; } .column.is-offset-four-fifths-widescreen { margin-left: 80%; } .column.is-0-widescreen { flex: none; width: 0%; } .column.is-offset-0-widescreen { margin-left: 0%; } .column.is-1-widescreen { flex: none; width: 8.33333337%; } .column.is-offset-1-widescreen { margin-left: 8.33333337%; } .column.is-2-widescreen { flex: none; width: 16.66666674%; } .column.is-offset-2-widescreen { margin-left: 16.66666674%; } .column.is-3-widescreen { flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { flex: none; width: 33.33333337%; } .column.is-offset-4-widescreen { margin-left: 33.33333337%; } .column.is-5-widescreen { flex: none; width: 41.66666674%; } .column.is-offset-5-widescreen { margin-left: 41.66666674%; } .column.is-6-widescreen { flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { flex: none; width: 58.33333337%; } .column.is-offset-7-widescreen { margin-left: 58.33333337%; } .column.is-8-widescreen { flex: none; width: 66.66666674%; } .column.is-offset-8-widescreen { margin-left: 66.66666674%; } .column.is-9-widescreen { flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { flex: none; width: 83.33333337%; } .column.is-offset-10-widescreen { margin-left: 83.33333337%; } .column.is-11-widescreen { flex: none; width: 91.66666674%; } .column.is-offset-11-widescreen { margin-left: 91.66666674%; } .column.is-12-widescreen { flex: none; width: 100%; } .column.is-offset-12-widescreen { margin-left: 100%; } } .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .columns:last-child { margin-bottom: -0.75rem; } .columns:not(:last-child) { margin-bottom: calc(1.5rem - 0.75rem); } .columns.is-centered { justify-content: center; } .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } .columns.is-gapless > .column { margin: 0; padding: 0 !important; } .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } .columns.is-gapless:last-child { margin-bottom: 0; } .columns.is-mobile { display: flex; } .columns.is-multiline { flex-wrap: wrap; } .columns.is-vcentered { align-items: center; } @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: flex; } } @media screen and (min-width: 1024px) { .columns.is-desktop { display: flex; } } .columns.is-variable { --columnGap: 0.75rem; margin-left: calc(-1 * var(--columnGap)); margin-right: calc(-1 * var(--columnGap)); } .columns.is-variable > .column { padding-left: var(--columnGap); padding-right: var(--columnGap); } .columns.is-variable.is-0 { --columnGap: 0rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-0-mobile { --columnGap: 0rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-0-tablet { --columnGap: 0rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-0-tablet-only { --columnGap: 0rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-0-touch { --columnGap: 0rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-0-desktop { --columnGap: 0rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-0-desktop-only { --columnGap: 0rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-0-widescreen { --columnGap: 0rem; } } .columns.is-variable.is-1 { --columnGap: 0.25rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-1-mobile { --columnGap: 0.25rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-1-tablet { --columnGap: 0.25rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-1-tablet-only { --columnGap: 0.25rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-1-touch { --columnGap: 0.25rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-1-desktop { --columnGap: 0.25rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-1-desktop-only { --columnGap: 0.25rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-1-widescreen { --columnGap: 0.25rem; } } .columns.is-variable.is-2 { --columnGap: 0.5rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-2-mobile { --columnGap: 0.5rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-2-tablet { --columnGap: 0.5rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-2-tablet-only { --columnGap: 0.5rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-2-touch { --columnGap: 0.5rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-2-desktop { --columnGap: 0.5rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-2-desktop-only { --columnGap: 0.5rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-2-widescreen { --columnGap: 0.5rem; } } .columns.is-variable.is-3 { --columnGap: 0.75rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-3-mobile { --columnGap: 0.75rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-3-tablet { --columnGap: 0.75rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-3-tablet-only { --columnGap: 0.75rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-3-touch { --columnGap: 0.75rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-3-desktop { --columnGap: 0.75rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-3-desktop-only { --columnGap: 0.75rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-3-widescreen { --columnGap: 0.75rem; } } .columns.is-variable.is-4 { --columnGap: 1rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-4-mobile { --columnGap: 1rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-4-tablet { --columnGap: 1rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-4-tablet-only { --columnGap: 1rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-4-touch { --columnGap: 1rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-4-desktop { --columnGap: 1rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-4-desktop-only { --columnGap: 1rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-4-widescreen { --columnGap: 1rem; } } .columns.is-variable.is-5 { --columnGap: 1.25rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-5-mobile { --columnGap: 1.25rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-5-tablet { --columnGap: 1.25rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-5-tablet-only { --columnGap: 1.25rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-5-touch { --columnGap: 1.25rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-5-desktop { --columnGap: 1.25rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-5-desktop-only { --columnGap: 1.25rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-5-widescreen { --columnGap: 1.25rem; } } .columns.is-variable.is-6 { --columnGap: 1.5rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-6-mobile { --columnGap: 1.5rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-6-tablet { --columnGap: 1.5rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-6-tablet-only { --columnGap: 1.5rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-6-touch { --columnGap: 1.5rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-6-desktop { --columnGap: 1.5rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-6-desktop-only { --columnGap: 1.5rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-6-widescreen { --columnGap: 1.5rem; } } .columns.is-variable.is-7 { --columnGap: 1.75rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-7-mobile { --columnGap: 1.75rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-7-tablet { --columnGap: 1.75rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-7-tablet-only { --columnGap: 1.75rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-7-touch { --columnGap: 1.75rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-7-desktop { --columnGap: 1.75rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-7-desktop-only { --columnGap: 1.75rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-7-widescreen { --columnGap: 1.75rem; } } .columns.is-variable.is-8 { --columnGap: 2rem; } @media screen and (max-width: 768px) { .columns.is-variable.is-8-mobile { --columnGap: 2rem; } } @media screen and (min-width: 769px), print { .columns.is-variable.is-8-tablet { --columnGap: 2rem; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-8-tablet-only { --columnGap: 2rem; } } @media screen and (max-width: 1023px) { .columns.is-variable.is-8-touch { --columnGap: 2rem; } } @media screen and (min-width: 1024px) { .columns.is-variable.is-8-desktop { --columnGap: 2rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-8-desktop-only { --columnGap: 2rem; } } @media screen and (min-width: 1216px) { .columns.is-variable.is-8-widescreen { --columnGap: 2rem; } } .tile { align-items: stretch; display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-height: min-content; } .tile.is-ancestor { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .tile.is-ancestor:last-child { margin-bottom: -0.75rem; } .tile.is-ancestor:not(:last-child) { margin-bottom: 0.75rem; } .tile.is-child { margin: 0 !important; } .tile.is-parent { padding: 0.75rem; } .tile.is-vertical { flex-direction: column; } .tile.is-vertical > .tile.is-child:not(:last-child) { margin-bottom: 1.5rem !important; } @media screen and (min-width: 769px), print { .tile:not(.is-child) { display: flex; } .tile.is-1 { flex: none; width: 8.33333337%; } .tile.is-2 { flex: none; width: 16.66666674%; } .tile.is-3 { flex: none; width: 25%; } .tile.is-4 { flex: none; width: 33.33333337%; } .tile.is-5 { flex: none; width: 41.66666674%; } .tile.is-6 { flex: none; width: 50%; } .tile.is-7 { flex: none; width: 58.33333337%; } .tile.is-8 { flex: none; width: 66.66666674%; } .tile.is-9 { flex: none; width: 75%; } .tile.is-10 { flex: none; width: 83.33333337%; } .tile.is-11 { flex: none; width: 91.66666674%; } .tile.is-12 { flex: none; width: 100%; } } /* Bulma Helpers */ .has-text-white { color: var(--white) !important; } a.has-text-white:hover, a.has-text-white:focus { color: var(--white) !important; } .has-background-white { background-color: var(--white) !important; } .has-text-black { color: #0a0a0a !important; } a.has-text-black:hover, a.has-text-black:focus { color: black !important; } .has-background-black { background-color: #0a0a0a !important; } .has-text-light { color: whitesmoke !important; } a.has-text-light:hover, a.has-text-light:focus { color: #dbdbdb !important; } .has-background-light { background-color: whitesmoke !important; } .has-text-dark { color: var(--dark) !important; } a.has-text-dark:hover, a.has-text-dark:focus { color: var(--dark) !important; } .has-background-dark { background-color: var(--dark) !important; } .has-text-primary { color: var(--primary) !important; } a.has-text-primary:hover, a.has-text-primary:focus { color: var(--primary) !important; } .has-background-primary { background-color: var(--primary) !important; } .has-text-primary-light { color: var(--primary--light-color) !important; } a.has-text-primary-light:hover, a.has-text-primary-light:focus { color: var(--primary--light-color) !important; } .has-background-primary-light { background-color: var(--primary--light-color) !important; } .has-text-primary-dark { color: var(--primary--dark-color) !important; } a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { color: var(--primary--dark-color) !important; } .has-background-primary-dark { background-color: var(--primary--dark-color) !important; } .has-text-link { color: var(--link) !important; } a.has-text-link:hover, a.has-text-link:focus { color: var(--link) !important; } .has-background-link { background-color: var(--link) !important; } .has-text-link-light { color: var(--link--light-color) !important; } a.has-text-link-light:hover, a.has-text-link-light:focus { color: var(--link--light-color) !important; } .has-background-link-light { background-color: var(--link--light-color) !important; } .has-text-link-dark { color: var(--link--dark-color) !important; } a.has-text-link-dark:hover, a.has-text-link-dark:focus { color: var(--link--dark-color) !important; } .has-background-link-dark { background-color: var(--link--dark-color) !important; } .has-text-info { color: var(--info) !important; } a.has-text-info:hover, a.has-text-info:focus { color: var(--info) !important; } .has-background-info { background-color: var(--info) !important; } .has-text-info-light { color: var(--info--light-color) !important; } a.has-text-info-light:hover, a.has-text-info-light:focus { color: var(--info--light-color) !important; } .has-background-info-light { background-color: var(--info--light-color) !important; } .has-text-info-dark { color: var(--info--dark-color) !important; } a.has-text-info-dark:hover, a.has-text-info-dark:focus { color: var(--info--dark-color) !important; } .has-background-info-dark { background-color: var(--info--dark-color) !important; } .has-text-success { color: var(--success) !important; } a.has-text-success:hover, a.has-text-success:focus { color: var(--success) !important; } .has-background-success { background-color: var(--success) !important; } .has-text-success-light { color: var(--success--light-color) !important; } a.has-text-success-light:hover, a.has-text-success-light:focus { color: var(--success--light-color) !important; } .has-background-success-light { background-color: var(--success--light-color) !important; } .has-text-success-dark { color: var(--success--dark-color) !important; } a.has-text-success-dark:hover, a.has-text-success-dark:focus { color: var(--success--dark-color) !important; } .has-background-success-dark { background-color: var(--success--dark-color) !important; } .has-text-warning { color: var(--warning) !important; } a.has-text-warning:hover, a.has-text-warning:focus { color: var(--warning) !important; } .has-background-warning { background-color: var(--warning) !important; } .has-text-warning-light { color: var(--warning--light-color) !important; } a.has-text-warning-light:hover, a.has-text-warning-light:focus { color: var(--warning--light-color) !important; } .has-background-warning-light { background-color: var(--warning--light-color) !important; } .has-text-warning-dark { color: var(--warning--dark-color) !important; } a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { color: var(--warning--dark-color) !important; } .has-background-warning-dark { background-color: var(--warning--dark-color) !important; } .has-text-danger { color: var(--danger) !important; } a.has-text-danger:hover, a.has-text-danger:focus { color: var(--danger) !important; } .has-background-danger { background-color: var(--danger) !important; } .has-text-danger-light { color: var(--danger--light-color) !important; } a.has-text-danger-light:hover, a.has-text-danger-light:focus { color: var(--danger--light-color) !important; } .has-background-danger-light { background-color: var(--danger--light-color) !important; } .has-text-danger-dark { color: var(--danger--dark-color) !important; } a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { color: var(--danger--dark-color) !important; } .has-background-danger-dark { background-color: var(--danger--dark-color) !important; } .has-text-black-bis { color: #121212 !important; } .has-background-black-bis { background-color: #121212 !important; } .has-text-black-ter { color: #242424 !important; } .has-background-black-ter { background-color: #242424 !important; } .has-text-grey-darker { color: #363636 !important; } .has-background-grey-darker { background-color: #363636 !important; } .has-text-grey-dark { color: #4a4a4a !important; } .has-background-grey-dark { background-color: #4a4a4a !important; } .has-text-grey { color: #7a7a7a !important; } .has-background-grey { background-color: #7a7a7a !important; } .has-text-grey-light { color: #b5b5b5 !important; } .has-background-grey-light { background-color: #b5b5b5 !important; } .has-text-grey-lighter { color: #dbdbdb !important; } .has-background-grey-lighter { background-color: #dbdbdb !important; } .has-text-white-ter { color: whitesmoke !important; } .has-background-white-ter { background-color: whitesmoke !important; } .has-text-white-bis { color: #fafafa !important; } .has-background-white-bis { background-color: #fafafa !important; } .is-flex-direction-row { flex-direction: row !important; } .is-flex-direction-row-reverse { flex-direction: row-reverse !important; } .is-flex-direction-column { flex-direction: column !important; } .is-flex-direction-column-reverse { flex-direction: column-reverse !important; } .is-flex-wrap-nowrap { flex-wrap: nowrap !important; } .is-flex-wrap-wrap { flex-wrap: wrap !important; } .is-flex-wrap-wrap-reverse { flex-wrap: wrap-reverse !important; } .is-justify-content-flex-start { justify-content: flex-start !important; } .is-justify-content-flex-end { justify-content: flex-end !important; } .is-justify-content-center { justify-content: center !important; } .is-justify-content-space-between { justify-content: space-between !important; } .is-justify-content-space-around { justify-content: space-around !important; } .is-justify-content-space-evenly { justify-content: space-evenly !important; } .is-justify-content-start { justify-content: start !important; } .is-justify-content-end { justify-content: end !important; } .is-justify-content-left { justify-content: left !important; } .is-justify-content-right { justify-content: right !important; } .is-align-content-flex-start { align-content: flex-start !important; } .is-align-content-flex-end { align-content: flex-end !important; } .is-align-content-center { align-content: center !important; } .is-align-content-space-between { align-content: space-between !important; } .is-align-content-space-around { align-content: space-around !important; } .is-align-content-space-evenly { align-content: space-evenly !important; } .is-align-content-stretch { align-content: stretch !important; } .is-align-content-start { align-content: start !important; } .is-align-content-end { align-content: end !important; } .is-align-content-baseline { align-content: baseline !important; } .is-align-items-stretch { align-items: stretch !important; } .is-align-items-flex-start { align-items: flex-start !important; } .is-align-items-flex-end { align-items: flex-end !important; } .is-align-items-center { align-items: center !important; } .is-align-items-baseline { align-items: baseline !important; } .is-align-items-start { align-items: start !important; } .is-align-items-end { align-items: end !important; } .is-align-items-self-start { align-items: self-start !important; } .is-align-items-self-end { align-items: self-end !important; } .is-align-self-auto { align-self: auto !important; } .is-align-self-flex-start { align-self: flex-start !important; } .is-align-self-flex-end { align-self: flex-end !important; } .is-align-self-center { align-self: center !important; } .is-align-self-baseline { align-self: baseline !important; } .is-align-self-stretch { align-self: stretch !important; } .is-flex-grow-0 { flex-grow: 0 !important; } .is-flex-grow-1 { flex-grow: 1 !important; } .is-flex-grow-2 { flex-grow: 2 !important; } .is-flex-grow-3 { flex-grow: 3 !important; } .is-flex-grow-4 { flex-grow: 4 !important; } .is-flex-grow-5 { flex-grow: 5 !important; } .is-flex-shrink-0 { flex-shrink: 0 !important; } .is-flex-shrink-1 { flex-shrink: 1 !important; } .is-flex-shrink-2 { flex-shrink: 2 !important; } .is-flex-shrink-3 { flex-shrink: 3 !important; } .is-flex-shrink-4 { flex-shrink: 4 !important; } .is-flex-shrink-5 { flex-shrink: 5 !important; } .is-clearfix::after { clear: both; content: " "; display: table; } .is-pulled-left { float: left !important; } .is-pulled-right { float: right !important; } .is-radiusless { border-radius: 0 !important; } .is-shadowless { box-shadow: none !important; } .is-clickable { cursor: pointer !important; pointer-events: all !important; } .is-clipped { overflow: hidden !important; } .is-relative { position: relative !important; } .is-marginless { margin: 0 !important; } .is-paddingless { padding: 0 !important; } .m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mr-1 { margin-right: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .ml-1 { margin-left: 0.25rem !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .ml-2 { margin-left: 0.5rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .m-3 { margin: 0.75rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mr-3 { margin-right: 0.75rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .ml-3 { margin-left: 0.75rem !important; } .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .m-4 { margin: 1rem !important; } .mt-4 { margin-top: 1rem !important; } .mr-4 { margin-right: 1rem !important; } .mb-4 { margin-bottom: 1rem !important; } .ml-4 { margin-left: 1rem !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-5 { margin: 1.5rem !important; } .mt-5 { margin-top: 1.5rem !important; } .mr-5 { margin-right: 1.5rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .ml-5 { margin-left: 1.5rem !important; } .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .m-6 { margin: 3rem !important; } .mt-6 { margin-top: 3rem !important; } .mr-6 { margin-right: 3rem !important; } .mb-6 { margin-bottom: 3rem !important; } .ml-6 { margin-left: 3rem !important; } .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; } .my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-auto { margin: auto !important; } .mt-auto { margin-top: auto !important; } .mr-auto { margin-right: auto !important; } .mb-auto { margin-bottom: auto !important; } .ml-auto { margin-left: auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pr-1 { padding-right: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-left: 0.25rem !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-left: 0.5rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .pt-3 { padding-top: 0.75rem !important; } .pr-3 { padding-right: 0.75rem !important; } .pb-3 { padding-bottom: 0.75rem !important; } .pl-3 { padding-left: 0.75rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .p-4 { padding: 1rem !important; } .pt-4 { padding-top: 1rem !important; } .pr-4 { padding-right: 1rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pl-4 { padding-left: 1rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-5 { padding: 1.5rem !important; } .pt-5 { padding-top: 1.5rem !important; } .pr-5 { padding-right: 1.5rem !important; } .pb-5 { padding-bottom: 1.5rem !important; } .pl-5 { padding-left: 1.5rem !important; } .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .p-6 { padding: 3rem !important; } .pt-6 { padding-top: 3rem !important; } .pr-6 { padding-right: 3rem !important; } .pb-6 { padding-bottom: 3rem !important; } .pl-6 { padding-left: 3rem !important; } .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-auto { padding: auto !important; } .pt-auto { padding-top: auto !important; } .pr-auto { padding-right: auto !important; } .pb-auto { padding-bottom: auto !important; } .pl-auto { padding-left: auto !important; } .px-auto { padding-left: auto !important; padding-right: auto !important; } .py-auto { padding-top: auto !important; padding-bottom: auto !important; } .is-size-1 { font-size: 3rem !important; } .is-size-2 { font-size: 2.5rem !important; } .is-size-3 { font-size: 2rem !important; } .is-size-4 { font-size: 1.5rem !important; } .is-size-5 { font-size: 1.25rem !important; } .is-size-6 { font-size: 1rem !important; } .is-size-7 { font-size: 0.75rem !important; } @media screen and (max-width: 768px) { .is-size-1-mobile { font-size: 3rem !important; } .is-size-2-mobile { font-size: 2.5rem !important; } .is-size-3-mobile { font-size: 2rem !important; } .is-size-4-mobile { font-size: 1.5rem !important; } .is-size-5-mobile { font-size: 1.25rem !important; } .is-size-6-mobile { font-size: 1rem !important; } .is-size-7-mobile { font-size: 0.75rem !important; } } @media screen and (min-width: 769px), print { .is-size-1-tablet { font-size: 3rem !important; } .is-size-2-tablet { font-size: 2.5rem !important; } .is-size-3-tablet { font-size: 2rem !important; } .is-size-4-tablet { font-size: 1.5rem !important; } .is-size-5-tablet { font-size: 1.25rem !important; } .is-size-6-tablet { font-size: 1rem !important; } .is-size-7-tablet { font-size: 0.75rem !important; } } @media screen and (max-width: 1023px) { .is-size-1-touch { font-size: 3rem !important; } .is-size-2-touch { font-size: 2.5rem !important; } .is-size-3-touch { font-size: 2rem !important; } .is-size-4-touch { font-size: 1.5rem !important; } .is-size-5-touch { font-size: 1.25rem !important; } .is-size-6-touch { font-size: 1rem !important; } .is-size-7-touch { font-size: 0.75rem !important; } } @media screen and (min-width: 1024px) { .is-size-1-desktop { font-size: 3rem !important; } .is-size-2-desktop { font-size: 2.5rem !important; } .is-size-3-desktop { font-size: 2rem !important; } .is-size-4-desktop { font-size: 1.5rem !important; } .is-size-5-desktop { font-size: 1.25rem !important; } .is-size-6-desktop { font-size: 1rem !important; } .is-size-7-desktop { font-size: 0.75rem !important; } } @media screen and (min-width: 1216px) { .is-size-1-widescreen { font-size: 3rem !important; } .is-size-2-widescreen { font-size: 2.5rem !important; } .is-size-3-widescreen { font-size: 2rem !important; } .is-size-4-widescreen { font-size: 1.5rem !important; } .is-size-5-widescreen { font-size: 1.25rem !important; } .is-size-6-widescreen { font-size: 1rem !important; } .is-size-7-widescreen { font-size: 0.75rem !important; } } .has-text-centered { text-align: center !important; } .has-text-justified { text-align: justify !important; } .has-text-left { text-align: left !important; } .has-text-right { text-align: right !important; } @media screen and (max-width: 768px) { .has-text-centered-mobile { text-align: center !important; } } @media screen and (min-width: 769px), print { .has-text-centered-tablet { text-align: center !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-centered-tablet-only { text-align: center !important; } } @media screen and (max-width: 1023px) { .has-text-centered-touch { text-align: center !important; } } @media screen and (min-width: 1024px) { .has-text-centered-desktop { text-align: center !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-centered-desktop-only { text-align: center !important; } } @media screen and (min-width: 1216px) { .has-text-centered-widescreen { text-align: center !important; } } @media screen and (max-width: 768px) { .has-text-justified-mobile { text-align: justify !important; } } @media screen and (min-width: 769px), print { .has-text-justified-tablet { text-align: justify !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-justified-tablet-only { text-align: justify !important; } } @media screen and (max-width: 1023px) { .has-text-justified-touch { text-align: justify !important; } } @media screen and (min-width: 1024px) { .has-text-justified-desktop { text-align: justify !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-justified-desktop-only { text-align: justify !important; } } @media screen and (min-width: 1216px) { .has-text-justified-widescreen { text-align: justify !important; } } @media screen and (max-width: 768px) { .has-text-left-mobile { text-align: left !important; } } @media screen and (min-width: 769px), print { .has-text-left-tablet { text-align: left !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-left-tablet-only { text-align: left !important; } } @media screen and (max-width: 1023px) { .has-text-left-touch { text-align: left !important; } } @media screen and (min-width: 1024px) { .has-text-left-desktop { text-align: left !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-left-desktop-only { text-align: left !important; } } @media screen and (min-width: 1216px) { .has-text-left-widescreen { text-align: left !important; } } @media screen and (max-width: 768px) { .has-text-right-mobile { text-align: right !important; } } @media screen and (min-width: 769px), print { .has-text-right-tablet { text-align: right !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-right-tablet-only { text-align: right !important; } } @media screen and (max-width: 1023px) { .has-text-right-touch { text-align: right !important; } } @media screen and (min-width: 1024px) { .has-text-right-desktop { text-align: right !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-right-desktop-only { text-align: right !important; } } @media screen and (min-width: 1216px) { .has-text-right-widescreen { text-align: right !important; } } .is-capitalized { text-transform: capitalize !important; } .is-lowercase { text-transform: lowercase !important; } .is-uppercase { text-transform: uppercase !important; } .is-italic { font-style: italic !important; } .is-underlined { text-decoration: underline !important; } .has-text-weight-light { font-weight: 300 !important; } .has-text-weight-normal { font-weight: 400 !important; } .has-text-weight-medium { font-weight: 500 !important; } .has-text-weight-semibold { font-weight: 600 !important; } .has-text-weight-bold { font-weight: 700 !important; } .is-family-primary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-secondary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-sans-serif { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } .is-family-monospace { font-family: monospace !important; } .is-family-code { font-family: monospace !important; } .is-block { display: block !important; } @media screen and (max-width: 768px) { .is-block-mobile { display: block !important; } } @media screen and (min-width: 769px), print { .is-block-tablet { display: block !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-block-tablet-only { display: block !important; } } @media screen and (max-width: 1023px) { .is-block-touch { display: block !important; } } @media screen and (min-width: 1024px) { .is-block-desktop { display: block !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-block-desktop-only { display: block !important; } } @media screen and (min-width: 1216px) { .is-block-widescreen { display: block !important; } } .is-flex { display: flex !important; } @media screen and (max-width: 768px) { .is-flex-mobile { display: flex !important; } } @media screen and (min-width: 769px), print { .is-flex-tablet { display: flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-flex-tablet-only { display: flex !important; } } @media screen and (max-width: 1023px) { .is-flex-touch { display: flex !important; } } @media screen and (min-width: 1024px) { .is-flex-desktop { display: flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-flex-desktop-only { display: flex !important; } } @media screen and (min-width: 1216px) { .is-flex-widescreen { display: flex !important; } } .is-inline { display: inline !important; } @media screen and (max-width: 768px) { .is-inline-mobile { display: inline !important; } } @media screen and (min-width: 769px), print { .is-inline-tablet { display: inline !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-tablet-only { display: inline !important; } } @media screen and (max-width: 1023px) { .is-inline-touch { display: inline !important; } } @media screen and (min-width: 1024px) { .is-inline-desktop { display: inline !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-desktop-only { display: inline !important; } } @media screen and (min-width: 1216px) { .is-inline-widescreen { display: inline !important; } } .is-inline-block { display: inline-block !important; } @media screen and (max-width: 768px) { .is-inline-block-mobile { display: inline-block !important; } } @media screen and (min-width: 769px), print { .is-inline-block-tablet { display: inline-block !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-block-tablet-only { display: inline-block !important; } } @media screen and (max-width: 1023px) { .is-inline-block-touch { display: inline-block !important; } } @media screen and (min-width: 1024px) { .is-inline-block-desktop { display: inline-block !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-block-desktop-only { display: inline-block !important; } } @media screen and (min-width: 1216px) { .is-inline-block-widescreen { display: inline-block !important; } } .is-inline-flex { display: inline-flex !important; } @media screen and (max-width: 768px) { .is-inline-flex-mobile { display: inline-flex !important; } } @media screen and (min-width: 769px), print { .is-inline-flex-tablet { display: inline-flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-flex-tablet-only { display: inline-flex !important; } } @media screen and (max-width: 1023px) { .is-inline-flex-touch { display: inline-flex !important; } } @media screen and (min-width: 1024px) { .is-inline-flex-desktop { display: inline-flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-flex-desktop-only { display: inline-flex !important; } } @media screen and (min-width: 1216px) { .is-inline-flex-widescreen { display: inline-flex !important; } } .is-hidden { display: none !important; } .is-sr-only { border: none !important; clip: rect(0, 0, 0, 0) !important; height: 0.01em !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 0.01em !important; } @media screen and (max-width: 768px) { .is-hidden-mobile { display: none !important; } } @media screen and (min-width: 769px), print { .is-hidden-tablet { display: none !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-hidden-tablet-only { display: none !important; } } @media screen and (max-width: 1023px) { .is-hidden-touch { display: none !important; } } @media screen and (min-width: 1024px) { .is-hidden-desktop { display: none !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-hidden-desktop-only { display: none !important; } } @media screen and (min-width: 1216px) { .is-hidden-widescreen { display: none !important; } } .is-invisible { visibility: hidden !important; } @media screen and (max-width: 768px) { .is-invisible-mobile { visibility: hidden !important; } } @media screen and (min-width: 769px), print { .is-invisible-tablet { visibility: hidden !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-invisible-tablet-only { visibility: hidden !important; } } @media screen and (max-width: 1023px) { .is-invisible-touch { visibility: hidden !important; } } @media screen and (min-width: 1024px) { .is-invisible-desktop { visibility: hidden !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-invisible-desktop-only { visibility: hidden !important; } } @media screen and (min-width: 1216px) { .is-invisible-widescreen { visibility: hidden !important; } } /* Bulma Layout */ .hero { align-items: stretch; display: flex; flex-direction: column; justify-content: space-between; } .hero .navbar { background: none; } .hero .tabs ul { border-bottom: none; } .hero.is-white { background-color: var(--white); color: #0a0a0a; } .hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-white strong { color: inherit; } .hero.is-white .title { color: #0a0a0a; } .hero.is-white .subtitle { color: rgba(10, 10, 10, 0.9); } .hero.is-white .subtitle a:not(.button), .hero.is-white .subtitle strong { color: #0a0a0a; } @media screen and (max-width: 1023px) { .hero.is-white .navbar-menu { background-color: var(--white); } } .hero.is-white .navbar-item, .hero.is-white .navbar-link { color: rgba(10, 10, 10, 0.7); } .hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active, .hero.is-white .navbar-link:hover, .hero.is-white .navbar-link.is-active { background-color: var(--white); color: #0a0a0a; } .hero.is-white .tabs a { color: #0a0a0a; opacity: 0.9; } .hero.is-white .tabs a:hover { opacity: 1; } .hero.is-white .tabs li.is-active a { color: var(--white) !important; opacity: 1; } .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { color: #0a0a0a; } .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white); } .hero.is-black { background-color: #0a0a0a; color: var(--white); } .hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-black strong { color: inherit; } .hero.is-black .title { color: var(--white); } .hero.is-black .subtitle { color: var(--white); } .hero.is-black .subtitle a:not(.button), .hero.is-black .subtitle strong { color: var(--white); } @media screen and (max-width: 1023px) { .hero.is-black .navbar-menu { background-color: #0a0a0a; } } .hero.is-black .navbar-item, .hero.is-black .navbar-link { color: var(--white); } .hero.is-black a.navbar-item:hover, .hero.is-black a.navbar-item.is-active, .hero.is-black .navbar-link:hover, .hero.is-black .navbar-link.is-active { background-color: black; color: var(--white); } .hero.is-black .tabs a { color: var(--white); opacity: 0.9; } .hero.is-black .tabs a:hover { opacity: 1; } .hero.is-black .tabs li.is-active a { color: #0a0a0a !important; opacity: 1; } .hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { color: var(--white); } .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover { background-color: var(--white); border-color: var(--white); color: #0a0a0a; } .hero.is-black.is-bold { background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } @media screen and (max-width: 768px) { .hero.is-black.is-bold .navbar-menu { background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } } .hero.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-light strong { color: inherit; } .hero.is-light .title { color: rgba(0, 0, 0, 0.7); } .hero.is-light .subtitle { color: rgba(0, 0, 0, 0.9); } .hero.is-light .subtitle a:not(.button), .hero.is-light .subtitle strong { color: rgba(0, 0, 0, 0.7); } @media screen and (max-width: 1023px) { .hero.is-light .navbar-menu { background-color: whitesmoke; } } .hero.is-light .navbar-item, .hero.is-light .navbar-link { color: rgba(0, 0, 0, 0.7); } .hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active, .hero.is-light .navbar-link:hover, .hero.is-light .navbar-link.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } .hero.is-light .tabs a { color: rgba(0, 0, 0, 0.7); opacity: 0.9; } .hero.is-light .tabs a:hover { opacity: 1; } .hero.is-light .tabs li.is-active a { color: whitesmoke !important; opacity: 1; } .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { color: rgba(0, 0, 0, 0.7); } .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover { background-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } .hero.is-light.is-bold { background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } @media screen and (max-width: 768px) { .hero.is-light.is-bold .navbar-menu { background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } } .hero.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-dark strong { color: inherit; } .hero.is-dark .title { color: var(--dark--color-invert); } .hero.is-dark .subtitle { color: var(--dark--color-invert); } .hero.is-dark .subtitle a:not(.button), .hero.is-dark .subtitle strong { color: var(--dark--color-invert); } @media screen and (max-width: 1023px) { .hero.is-dark .navbar-menu { background-color: var(--dark); } } .hero.is-dark .navbar-item, .hero.is-dark .navbar-link { color: var(--dark--color-invert); } .hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active, .hero.is-dark .navbar-link:hover, .hero.is-dark .navbar-link.is-active { background-color: var(--dark); color: var(--dark--color-invert); } .hero.is-dark .tabs a { color: var(--dark--color-invert); opacity: 0.9; } .hero.is-dark .tabs a:hover { opacity: 1; } .hero.is-dark .tabs li.is-active a { color: var(--dark) !important; opacity: 1; } .hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { color: var(--dark--color-invert); } .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover { background-color: var(--dark--color-invert); border-color: var(--dark--color-invert); color: var(--dark); } .hero.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-primary strong { color: inherit; } .hero.is-primary .title { color: var(--primary--color-invert); } .hero.is-primary .subtitle { color: var(--primary--color-invert); } .hero.is-primary .subtitle a:not(.button), .hero.is-primary .subtitle strong { color: var(--primary--color-invert); } @media screen and (max-width: 1023px) { .hero.is-primary .navbar-menu { background-color: var(--primary); } } .hero.is-primary .navbar-item, .hero.is-primary .navbar-link { color: var(--primary--color-invert); } .hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, .hero.is-primary .navbar-link:hover, .hero.is-primary .navbar-link.is-active { background-color: var(--primary); color: var(--primary--color-invert); } .hero.is-primary .tabs a { color: var(--primary--color-invert); opacity: 0.9; } .hero.is-primary .tabs a:hover { opacity: 1; } .hero.is-primary .tabs li.is-active a { color: var(--primary) !important; opacity: 1; } .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { color: var(--primary--color-invert); } .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { background-color: var(--primary--color-invert); border-color: var(--primary--color-invert); color: var(--primary); } .hero.is-link { background-color: var(--link); color: var(--link--color-invert); } .hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-link strong { color: inherit; } .hero.is-link .title { color: var(--link--color-invert); } .hero.is-link .subtitle { color: var(--link--color-invert); } .hero.is-link .subtitle a:not(.button), .hero.is-link .subtitle strong { color: var(--link--color-invert); } @media screen and (max-width: 1023px) { .hero.is-link .navbar-menu { background-color: var(--link); } } .hero.is-link .navbar-item, .hero.is-link .navbar-link { color: var(--link--color-invert); } .hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, .hero.is-link .navbar-link:hover, .hero.is-link .navbar-link.is-active { background-color: var(--link); color: var(--link--color-invert); } .hero.is-link .tabs a { color: var(--link--color-invert); opacity: 0.9; } .hero.is-link .tabs a:hover { opacity: 1; } .hero.is-link .tabs li.is-active a { color: var(--link) !important; opacity: 1; } .hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { color: var(--link--color-invert); } .hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover { background-color: var(--link--color-invert); border-color: var(--link--color-invert); color: var(--link); } .hero.is-info { background-color: var(--info); color: var(--info--color-invert); } .hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-info strong { color: inherit; } .hero.is-info .title { color: var(--info--color-invert); } .hero.is-info .subtitle { color: var(--info--color-invert); } .hero.is-info .subtitle a:not(.button), .hero.is-info .subtitle strong { color: var(--info--color-invert); } @media screen and (max-width: 1023px) { .hero.is-info .navbar-menu { background-color: var(--info); } } .hero.is-info .navbar-item, .hero.is-info .navbar-link { color: var(--info--color-invert); } .hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, .hero.is-info .navbar-link:hover, .hero.is-info .navbar-link.is-active { background-color: var(--info); color: var(--info--color-invert); } .hero.is-info .tabs a { color: var(--info--color-invert); opacity: 0.9; } .hero.is-info .tabs a:hover { opacity: 1; } .hero.is-info .tabs li.is-active a { color: var(--info) !important; opacity: 1; } .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { color: var(--info--color-invert); } .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { background-color: var(--info--color-invert); border-color: var(--info--color-invert); color: var(--info); } .hero.is-success { background-color: var(--success); color: var(--success--color-invert); } .hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-success strong { color: inherit; } .hero.is-success .title { color: var(--success--color-invert); } .hero.is-success .subtitle { color: var(--success--color-invert); } .hero.is-success .subtitle a:not(.button), .hero.is-success .subtitle strong { color: var(--success--color-invert); } @media screen and (max-width: 1023px) { .hero.is-success .navbar-menu { background-color: var(--success); } } .hero.is-success .navbar-item, .hero.is-success .navbar-link { color: var(--success--color-invert); } .hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, .hero.is-success .navbar-link:hover, .hero.is-success .navbar-link.is-active { background-color: var(--success); color: var(--success--color-invert); } .hero.is-success .tabs a { color: var(--success--color-invert); opacity: 0.9; } .hero.is-success .tabs a:hover { opacity: 1; } .hero.is-success .tabs li.is-active a { color: var(--success) !important; opacity: 1; } .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { color: var(--success--color-invert); } .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { background-color: var(--success--color-invert); border-color: var(--success--color-invert); color: var(--success); } .hero.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-warning strong { color: inherit; } .hero.is-warning .title { color: var(--warning--color-invert); } .hero.is-warning .subtitle { color: var(--warning--color-invert); } .hero.is-warning .subtitle a:not(.button), .hero.is-warning .subtitle strong { color: var(--warning--color-invert); } @media screen and (max-width: 1023px) { .hero.is-warning .navbar-menu { background-color: var(--warning); } } .hero.is-warning .navbar-item, .hero.is-warning .navbar-link { color: var(--warning--color-invert); } .hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, .hero.is-warning .navbar-link:hover, .hero.is-warning .navbar-link.is-active { background-color: var(--warning); color: var(--warning--color-invert); } .hero.is-warning .tabs a { color: var(--warning--color-invert); opacity: 0.9; } .hero.is-warning .tabs a:hover { opacity: 1; } .hero.is-warning .tabs li.is-active a { color: var(--warning) !important; opacity: 1; } .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { color: var(--warning--color-invert); } .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { background-color: var(--warning--color-invert); border-color: var(--warning--color-invert); color: var(--warning); } .hero.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-danger strong { color: inherit; } .hero.is-danger .title { color: var(--danger--color-invert); } .hero.is-danger .subtitle { color: var(--danger--color-invert); } .hero.is-danger .subtitle a:not(.button), .hero.is-danger .subtitle strong { color: var(--danger--color-invert); } @media screen and (max-width: 1023px) { .hero.is-danger .navbar-menu { background-color: var(--danger); } } .hero.is-danger .navbar-item, .hero.is-danger .navbar-link { color: var(--danger--color-invert); } .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, .hero.is-danger .navbar-link:hover, .hero.is-danger .navbar-link.is-active { background-color: var(--danger); color: var(--danger--color-invert); } .hero.is-danger .tabs a { color: var(--danger--color-invert); opacity: 0.9; } .hero.is-danger .tabs a:hover { opacity: 1; } .hero.is-danger .tabs li.is-active a { color: var(--danger) !important; opacity: 1; } .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { color: var(--danger--color-invert); } .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { background-color: var(--danger--color-invert); border-color: var(--danger--color-invert); color: var(--danger); } .hero.is-small .hero-body { padding: 1.5rem; } @media screen and (min-width: 769px), print { .hero.is-medium .hero-body { padding: 9rem 4.5rem; } } @media screen and (min-width: 769px), print { .hero.is-large .hero-body { padding: 18rem 6rem; } } .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body { align-items: center; display: flex; } .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container { flex-grow: 1; flex-shrink: 1; } .hero.is-halfheight { min-height: 50vh; } .hero.is-fullheight { min-height: 100vh; } .hero-video { overflow: hidden; } .hero-video video { left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; transform: translate3d(-50%, -50%, 0); } .hero-video.is-transparent { opacity: 0.3; } @media screen and (max-width: 768px) { .hero-video { display: none; } } .hero-buttons { margin-top: 1.5rem; } @media screen and (max-width: 768px) { .hero-buttons .button { display: flex; } .hero-buttons .button:not(:last-child) { margin-bottom: 0.75rem; } } @media screen and (min-width: 769px), print { .hero-buttons { display: flex; justify-content: center; } .hero-buttons .button:not(:last-child) { margin-right: 1.5rem; } } .hero-head, .hero-foot { flex-grow: 0; flex-shrink: 0; } .hero-body { flex-grow: 1; flex-shrink: 0; padding: 3rem 1.5rem; } @media screen and (min-width: 769px), print { .hero-body { padding: 3rem 3rem; } } .section { padding: 3rem 1.5rem; } @media screen and (min-width: 1024px) { .section { padding: 3rem 3rem; } .section.is-medium { padding: 9rem 4.5rem; } .section.is-large { padding: 18rem 6rem; } } .footer { background-color: #fafafa; padding: 3rem 1.5rem 6rem; } .is-divider, .is-divider-vertical { display: block; position: relative; border-top: 0.1rem solid #dbdbdb; height: 0.1rem; margin: 2rem 0; text-align: center; } .is-divider[data-content]::after, .is-divider-vertical[data-content]::after { background: var(--white); color: #b5b5b5; content: attr(data-content); display: inline-block; font-size: 0.75rem; padding: 0.4rem 0.8rem; -webkit-transform: translateY(-1.1rem); -ms-transform: translateY(-1.1rem); transform: translateY(-1.1rem); text-align: center; } @media screen and (min-width: 769px), print { .is-divider-vertical { display: block; flex: none; width: auto; height: auto; padding: 2rem; margin: 0; position: relative; border-top: none; min-height: 2rem; } .is-divider-vertical::before { border-left: 0.1rem solid #dbdbdb; bottom: 1rem; content: ""; display: block; left: 50%; position: absolute; top: 1rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .is-divider-vertical[data-content]::after { position: absolute; left: 50%; top: 50%; padding: 0.1rem; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } } .datepicker-legacy { display: none; } .datepicker-legacy.is-active { display: flex; } .datepicker-legacy.is-active .calendar { z-index: 40; min-width: 20rem; max-width: 20rem; position: relative; margin: 0 auto; max-height: calc(100vh - 40px); } .datepicker-legacy.is-active .calendar-nav { flex-direction: column; } .datepicker-legacy .calendar-legacy { background: var(--white); border: none; border-radius: var(--radius-small); display: block; min-width: 20rem; text-align: center; max-width: 20rem; } .datepicker-legacy .calendar-legacy.is-active { display: initial; } .datepicker-legacy .calendar-legacy .calendar-nav { background: var(--primary); color: var(--white); border-top-left-radius: var(--radius-small); border-top-right-radius: var(--radius-small); display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; padding: 0.5em; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-month, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-day, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-year { width: 100%; display: flex; justify-content: space-between; align-items: center; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-month, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-day, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-year { flex: 1; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-month { font-size: 1.5rem; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-day { font-size: 2.5rem; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-month, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-month, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-year, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-year { flex-basis: auto; flex-grow: 0; flex-shrink: 0; text-decoration: none; color: var(--white); } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-month:hover, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-month:hover, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-year:hover, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-year:hover { background-color: transparent; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-month:hover svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-month:hover svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-year:hover svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-year:hover svg { stroke-width: 1em; } .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-month svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-month svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-previous-year svg, .datepicker-legacy .calendar-legacy .calendar-nav .calendar-nav-next-year svg { stroke: currentColor; width: 11.25px; height: 18px; } .datepicker-legacy .calendar-legacy .calendar-header, .datepicker-legacy .calendar-legacy .calendar-body { display: flex; flex-wrap: wrap; justify-content: center; } .datepicker-legacy .calendar-legacy .calendar-header .calendar-date, .datepicker-legacy .calendar-legacy .calendar-body .calendar-date { flex: 0 0 14.28%; max-width: 14.28%; } .datepicker-legacy .calendar-legacy .calendar-header { padding: 1em 1em 0 1em; background: transparent; color: #fff; font-size: 0.75rem; } .datepicker-legacy .calendar-legacy .calendar-header .calendar-date { color: #b5b5b5; } .datepicker-legacy .calendar-legacy .calendar-body { padding: 0 1em 1em 1em; color: #7a7a7a; } .datepicker-legacy .calendar-legacy .calendar-date { border: 0; padding: 0.4rem 0; } .datepicker-legacy .calendar-legacy .calendar-date .date-item { appearance: none; background: transparent; border: 0.1rem solid transparent; border-radius: 100%; color: #4a4a4a; cursor: pointer; height: 2.2rem; line-height: 1.4rem; outline: none; padding: 0.3rem; position: relative; text-align: center; text-decoration: none; transition: all 0.2s ease; vertical-align: middle; white-space: nowrap; width: 2.2rem; } .datepicker-legacy .calendar-legacy .calendar-date .date-item.is-today { background: transparent; border-color: var(--primary); color: var(--primary); } .datepicker-legacy .calendar-legacy .calendar-date .date-item:focus { background: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); text-decoration: none; } .datepicker-legacy .calendar-legacy .calendar-date .date-item:hover { background: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); text-decoration: none; } .datepicker-legacy .calendar-legacy .calendar-date .date-item.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .datepicker-legacy .calendar-legacy .calendar-date.is-disabled .date-item, .datepicker-legacy .calendar-legacy .calendar-date.is-disabled .calendar-event, .datepicker-legacy .calendar-legacy .calendar-date[disabled] .date-item, .datepicker-legacy .calendar-legacy .calendar-date[disabled] .calendar-event { cursor: default; opacity: 0.25; pointer-events: none; } .datepicker-legacy .calendar-legacy .calendar-range { position: relative; } .datepicker-legacy .calendar-legacy .calendar-range::before { background: var(--primary-light-50); content: ""; height: 2.2rem; left: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .datepicker-legacy .calendar-legacy .calendar-range.calendar-range-start::before { left: 50%; } .datepicker-legacy .calendar-legacy .calendar-range.calendar-range-end::before { right: 50%; } .datepicker-legacy .calendar-legacy .calendar-range .date-item { color: var(--primary); } .datepicker-legacy .calendar-legacy.is-large { max-width: 100%; } .datepicker-legacy .calendar-legacy.is-large .calendar-body .calendar-date { border-bottom: none; border-right: none; display: flex; flex-direction: column; height: 11rem; padding: 0; } .datepicker-legacy .calendar-legacy.is-large .calendar-body .calendar-date:nth-child(7n) { border-right: 0; } .datepicker-legacy .calendar-legacy.is-large .calendar-body .calendar-date false { border-bottom: 0; } .datepicker-legacy .calendar-legacy.is-large .date-item { align-self: flex-end; height: 2.2rem; margin-right: 0.5rem; margin-top: 0.5rem; } .datepicker-legacy .calendar-legacy.is-large .calendar-range::before { top: 1.9rem; } .datepicker-legacy .calendar-legacy.is-large .calendar-range.calendar-range-start::before { left: auto; width: 1.9rem; } .datepicker-legacy .calendar-legacy.is-large .calendar-range.calendar-range-end::before { right: 1.9rem; } .datepicker-legacy .calendar-legacy.is-large .calendar-events { flex-grow: 1; line-height: 1; overflow-y: auto; padding: 0.5rem; } .datepicker-legacy .calendar-legacy.is-large .calendar-event { background-color: #7a7a7a; border-radius: var(--radius-small); color: var(--white); display: block; font-size: 1rem; margin: 0.2rem auto; overflow: hidden; padding: 0.3rem 0.4rem; text-align: left; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-white { background-color: var(--white); color: #0a0a0a; } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-black { background-color: #0a0a0a; color: var(--white); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-link { background-color: var(--link); color: var(--link--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-info { background-color: var(--info); color: var(--info--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-success { background-color: var(--success); color: var(--success--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .datepicker-legacy .calendar-legacy.is-large .calendar-event.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .calendar-legacy { background: var(--white); border: none; border-radius: var(--radius-small); display: block; min-width: 20rem; text-align: center; max-width: 20rem; } .calendar-legacy.is-active { display: initial; } .calendar-legacy .calendar-nav { background: var(--primary); color: var(--white); border-top-left-radius: var(--radius-small); border-top-right-radius: var(--radius-small); display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; padding: 0.5em; } .calendar-legacy .calendar-nav .calendar-nav-month, .calendar-legacy .calendar-nav .calendar-nav-day, .calendar-legacy .calendar-nav .calendar-nav-year { width: 100%; display: flex; justify-content: space-between; align-items: center; } .calendar-legacy .calendar-nav .calendar-month, .calendar-legacy .calendar-nav .calendar-day, .calendar-legacy .calendar-nav .calendar-year { flex: 1; } .calendar-legacy .calendar-nav .calendar-month { font-size: 1.5rem; } .calendar-legacy .calendar-nav .calendar-day { font-size: 2.5rem; } .calendar-legacy .calendar-nav .calendar-nav-previous-month, .calendar-legacy .calendar-nav .calendar-nav-next-month, .calendar-legacy .calendar-nav .calendar-nav-previous-year, .calendar-legacy .calendar-nav .calendar-nav-next-year { flex-basis: auto; flex-grow: 0; flex-shrink: 0; text-decoration: none; color: var(--white); } .calendar-legacy .calendar-nav .calendar-nav-previous-month:hover, .calendar-legacy .calendar-nav .calendar-nav-next-month:hover, .calendar-legacy .calendar-nav .calendar-nav-previous-year:hover, .calendar-legacy .calendar-nav .calendar-nav-next-year:hover { background-color: transparent; } .calendar-legacy .calendar-nav .calendar-nav-previous-month:hover svg, .calendar-legacy .calendar-nav .calendar-nav-next-month:hover svg, .calendar-legacy .calendar-nav .calendar-nav-previous-year:hover svg, .calendar-legacy .calendar-nav .calendar-nav-next-year:hover svg { stroke-width: 1em; } .calendar-legacy .calendar-nav .calendar-nav-previous-month svg, .calendar-legacy .calendar-nav .calendar-nav-next-month svg, .calendar-legacy .calendar-nav .calendar-nav-previous-year svg, .calendar-legacy .calendar-nav .calendar-nav-next-year svg { stroke: currentColor; width: 11.25px; height: 18px; } .calendar-legacy .calendar-header, .calendar-legacy .calendar-body { display: flex; flex-wrap: wrap; justify-content: center; } .calendar-legacy .calendar-header .calendar-date, .calendar-legacy .calendar-body .calendar-date { flex: 0 0 14.28%; max-width: 14.28%; } .calendar-legacy .calendar-header { padding: 1em 1em 0 1em; background: transparent; color: #fff; font-size: 0.75rem; } .calendar-legacy .calendar-header .calendar-date { color: #b5b5b5; } .calendar-legacy .calendar-body { padding: 0 1em 1em 1em; color: #7a7a7a; } .calendar-legacy .calendar-date { border: 0; padding: 0.4rem 0; } .calendar-legacy .calendar-date .date-item { appearance: none; background: transparent; border: 0.1rem solid transparent; border-radius: 100%; color: #4a4a4a; cursor: pointer; height: 2.2rem; line-height: 1.4rem; outline: none; padding: 0.3rem; position: relative; text-align: center; text-decoration: none; transition: all 0.2s ease; vertical-align: middle; white-space: nowrap; width: 2.2rem; } .calendar-legacy .calendar-date .date-item.is-today { background: transparent; border-color: var(--primary); color: var(--primary); } .calendar-legacy .calendar-date .date-item:focus { background: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); text-decoration: none; } .calendar-legacy .calendar-date .date-item:hover { background: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); text-decoration: none; } .calendar-legacy .calendar-date .date-item.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .calendar-legacy .calendar-date.is-disabled .date-item, .calendar-legacy .calendar-date.is-disabled .calendar-event, .calendar-legacy .calendar-date[disabled] .date-item, .calendar-legacy .calendar-date[disabled] .calendar-event { cursor: default; opacity: 0.25; pointer-events: none; } .calendar-legacy .calendar-range { position: relative; } .calendar-legacy .calendar-range::before { background: var(--primary-light-50); content: ""; height: 2.2rem; left: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .calendar-legacy .calendar-range.calendar-range-start::before { left: 50%; } .calendar-legacy .calendar-range.calendar-range-end::before { right: 50%; } .calendar-legacy .calendar-range .date-item { color: var(--primary); } .calendar-legacy.is-large { max-width: 100%; } .calendar-legacy.is-large .calendar-body .calendar-date { border-bottom: none; border-right: none; display: flex; flex-direction: column; height: 11rem; padding: 0; } .calendar-legacy.is-large .calendar-body .calendar-date:nth-child(7n) { border-right: 0; } .calendar-legacy.is-large .calendar-body .calendar-date false { border-bottom: 0; } .calendar-legacy.is-large .date-item { align-self: flex-end; height: 2.2rem; margin-right: 0.5rem; margin-top: 0.5rem; } .calendar-legacy.is-large .calendar-range::before { top: 1.9rem; } .calendar-legacy.is-large .calendar-range.calendar-range-start::before { left: auto; width: 1.9rem; } .calendar-legacy.is-large .calendar-range.calendar-range-end::before { right: 1.9rem; } .calendar-legacy.is-large .calendar-events { flex-grow: 1; line-height: 1; overflow-y: auto; padding: 0.5rem; } .calendar-legacy.is-large .calendar-event { background-color: #7a7a7a; border-radius: var(--radius-small); color: var(--white); display: block; font-size: 1rem; margin: 0.2rem auto; overflow: hidden; padding: 0.3rem 0.4rem; text-align: left; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; } .calendar-legacy.is-large .calendar-event.is-white { background-color: var(--white); color: #0a0a0a; } .calendar-legacy.is-large .calendar-event.is-black { background-color: #0a0a0a; color: var(--white); } .calendar-legacy.is-large .calendar-event.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .calendar-legacy.is-large .calendar-event.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .calendar-legacy.is-large .calendar-event.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .calendar-legacy.is-large .calendar-event.is-link { background-color: var(--link); color: var(--link--color-invert); } .calendar-legacy.is-large .calendar-event.is-info { background-color: var(--info); color: var(--info--color-invert); } .calendar-legacy.is-large .calendar-event.is-success { background-color: var(--success); color: var(--success--color-invert); } .calendar-legacy.is-large .calendar-event.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .calendar-legacy.is-large .calendar-event.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } @keyframes decrement-prev { from { opacity: 1; transform: translateY(0); } } @keyframes decrement-next { from { opacity: 0; transform: translateY(-50px); } } @keyframes increment-prev { from { opacity: 1; transform: translateY(0); } } @keyframes increment-next { from { opacity: 0; transform: translateY(50px); } } .datetimepicker { transition: width 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; display: none; background: var(--white); border-radius: var(--radius-small); max-width: 320px; z-index: 1; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); } .datetimepicker.is-active { display: block; } .datetimepicker .datetimepicker-header { display: flex; flex-direction: column; flex: 1; text-align: left; position: relative; padding: 0.5rem 1rem; font-size: 1rem; box-shadow: 0 0.2rem 0.2rem -0.2rem rgba(10, 10, 10, 0.1); } .datetimepicker .datetimepicker-header.is-date-only { flex-direction: row; } .datetimepicker .datetimepicker-header.is-date-only .datetimepicker-selection-end .datetimepicker-selection-wrapper { justify-content: flex-end !important; } .datetimepicker .datetimepicker-header .datetimepicker-selection-details { flex: 1; } .datetimepicker .datetimepicker-header .datetimepicker-selection-from, .datetimepicker .datetimepicker-header .datetimepicker-selection-to { font-size: 0.65rem; color: #b5b5b5; text-transform: uppercase; padding: 0; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start, .datetimepicker .datetimepicker-header .datetimepicker-selection-end { padding: 0; display: flex; flex: 1; flex-direction: row; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-wrapper, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-wrapper { flex-direction: row; display: flex; min-height: 2.5rem; flex: 1 1 2rem; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day { flex: 0; text-transform: capitalize; font-size: 2rem; line-height: 2.5rem; margin-right: 0.5rem; color: var(--primary); font-weight: 100; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-date, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-date { font-size: 0.85rem; line-height: 0.85rem; justify-content: center; display: flex; flex-direction: column; font-weight: 300; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-month, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-month { color: #4a4a4a; text-transform: capitalize; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-weekday, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-weekday { font-size: 0.75em; color: #b6b4b6; text-transform: capitalize; text-align: left; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-hour, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-hour { font-size: 1.5rem; font-weight: 100; flex: 1; justify-content: center; align-items: center; text-align: center; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start, .datetimepicker .datetimepicker-header .datetimepicker-selection-end { align-items: center; } .datetimepicker .datetimepicker-header .datetimepicker-selection-start.is-centered .datetimepicker-selection-wrapper, .datetimepicker .datetimepicker-header .datetimepicker-selection-end.is-centered .datetimepicker-selection-wrapper { justify-content: center; align-items: center; } .datetimepicker .datetimepicker-header .datetimepicker-selection-time { flex: 1; display: flex; } .datetimepicker .datetimepicker-header .datetimepicker-selection-time .datetimepicker-selection-time-icon { display: flex; justify-content: center; align-items: center; padding: 0 1rem; color: #b5b5b5; } .datetimepicker .datepicker-nav { background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0.5em; flex-direction: row; } .datetimepicker .datepicker-nav .datepicker-nav-month-year { flex-direction: row; display: flex; } .datetimepicker .datepicker-nav .datepicker-nav-month, .datetimepicker .datepicker-nav .datepicker-nav-year { text-decoration: none; font-size: 1rem; color: #fff; } .datetimepicker .datepicker-nav .datepicker-nav-month:hover, .datetimepicker .datepicker-nav .datepicker-nav-year:hover { cursor: pointer; } .datetimepicker .datepicker-nav .datepicker-nav-month { text-transform: capitalize; } .datetimepicker .datepicker-nav .datepicker-nav-year { font-weight: 700; } .datetimepicker .datepicker-nav .datepicker-nav-previous, .datetimepicker .datepicker-nav .datepicker-nav-next { flex-basis: auto; flex-grow: 0; flex-shrink: 0; text-decoration: none; color: var(--white); } .datetimepicker .datepicker-nav .datepicker-nav-previous:hover, .datetimepicker .datepicker-nav .datepicker-nav-next:hover { background-color: transparent; } .datetimepicker .datepicker-nav .datepicker-nav-previous:hover svg, .datetimepicker .datepicker-nav .datepicker-nav-next:hover svg { stroke-width: 1em; } .datetimepicker .datepicker-nav .datepicker-nav-previous svg, .datetimepicker .datepicker-nav .datepicker-nav-next svg { stroke: currentColor; width: 11.25px; height: 0.75rem; } .datetimepicker .datepicker-body { overflow: hidden; } .datetimepicker .datepicker-body .datepicker-dates { display: none; } .datetimepicker .datepicker-body .datepicker-dates.is-active { display: flex; flex-direction: column; } .datetimepicker .datepicker-body .datepicker-months, .datetimepicker .datepicker-body .datepicker-years { display: none; } .datetimepicker .datepicker-body .datepicker-months.is-active, .datetimepicker .datepicker-body .datepicker-years.is-active { display: flex; flex-direction: row; } .datetimepicker .datepicker-body .datepicker-weekdays { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 0.3rem 0; background: transparent; color: #fff; font-size: 0.75rem; } .datetimepicker .datepicker-body .datepicker-weekdays .datepicker-date { background: transparent !important; color: #b5b5b5; padding: 0.3rem; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding: 0; color: #7a7a7a; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date { background: #f5f5f5; display: flex; justify-content: center; flex: 14.28571%; margin: 0.1rem 0; align-items: center; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item { margin: 0 auto; appearance: none; background: transparent; border: none; border-radius: 25091983px; color: #4a4a4a; cursor: pointer; height: 2.2rem; outline: none; padding: 0; position: relative; text-align: center; text-decoration: none; transition: all 0.2s ease; vertical-align: middle; white-space: nowrap; width: 2.2rem; animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { background: transparent; border: 0.1rem dotted var(--primary); color: var(--primary); } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:focus { background: var(--white); border-color: var(--white); color: #fff; text-decoration: none; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--primary); border-color: var(--primary); border-radius: 25091983px; color: #fff; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { background: var(--white); border: 0.1rem solid var(--primary); color: #fff; text-decoration: none; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-current-month { background: transparent; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled] { background-color: whitesmoke; background-image: url(data:image/gif;base64,R0lGODlhBQAFAOMAAP/14////93uHt3uHt3uHt3uHv///////////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAAALAAAAAAFAAUAAAQL0ACAzpG0YnonNxEAOw==) !important; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled .calendar-event, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled] .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled] .calendar-event { cursor: default; opacity: 0.25; pointer-events: none; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { position: relative; background: var(--primary); z-index: 1; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border: 0.1rem solid var(--primary); color: var(--primary); box-shadow: 0 0.2rem 0.2rem rgba(10, 10, 10, 0.1); } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start { border-top-left-radius: 25091983px; border-bottom-left-radius: 25091983px; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end { border-top-right-radius: 25091983px; border-bottom-right-radius: 25091983px; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--primary); color: #fff; } .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker .datepicker-body .datepicker-months, .datetimepicker .datepicker-body .datepicker-years { display: none; flex-direction: row; flex-wrap: wrap; padding: 0.5rem; max-height: 17rem; overflow-y: auto; } .datetimepicker .datepicker-body .datepicker-months.is-active, .datetimepicker .datepicker-body .datepicker-years.is-active { display: flex; } .datetimepicker .datepicker-body .datepicker-months .datepicker-month, .datetimepicker .datepicker-body .datepicker-months .datepicker-year, .datetimepicker .datepicker-body .datepicker-years .datepicker-month, .datetimepicker .datepicker-body .datepicker-years .datepicker-year { padding: 0.5rem; margin: 0.5rem; font-size: 0.75rem; text-align: center; flex: 1 25%; text-transform: capitalize; border-radius: 25091983px; border: 0.1rem solid transparent; } .datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .datetimepicker .datepicker-body .datepicker-months .datepicker-month:hover, .datetimepicker .datepicker-body .datepicker-months .datepicker-year:hover, .datetimepicker .datepicker-body .datepicker-years .datepicker-month:hover, .datetimepicker .datepicker-body .datepicker-years .datepicker-year:hover { cursor: pointer; background: var(--white); border: 0.1rem solid var(--primary); color: #fff; } .datetimepicker .datetimepicker-footer { display: flex; flex: 1; justify-content: space-evenly; margin: 0; } .datetimepicker .datetimepicker-footer > * { text-decoration: none !important; } .datetimepicker.is-datetimepicker-default .datetimepicker-container { display: flex; flex-direction: column; } .datetimepicker.is-datetimepicker-default .datetimepicker-container::after, .datetimepicker.is-datetimepicker-default .datetimepicker-container::before { bottom: 100%; left: 15%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .datetimepicker.is-datetimepicker-default .datetimepicker-container::after { border-color: rgba(255, 255, 255, 0); border-bottom-color: var(--white); border-width: 0.75rem; margin-left: -0.75rem; } .datetimepicker.is-datetimepicker-default .datetimepicker-container::before { border-color: rgba(74, 74, 74, 0); border-bottom-color: #4a4a4a; border-width: 0.75rem; margin-left: -0.75rem; } .datetimepicker.is-datetimepicker-default .datetimepicker-container.has-header-bottom { flex-direction: column-reverse; } .datetimepicker.is-large { max-width: 100%; } .datetimepicker.is-large .datepicker-body .datepicker-date { border-bottom: 0.1rem solid whitesmoke; border-right: 0.1rem solid whitesmoke; display: flex; flex-direction: column; height: 11rem; padding: 0; } .datetimepicker.is-large .datepicker-body .datepicker-date:nth-child(7n) { border-right: 0; } .datetimepicker.is-large .datepicker-body .datepicker-date false { border-bottom: 0; } .datetimepicker.is-large .date-item { align-self: flex-end; height: 2.2rem; margin-right: 0.5rem; margin-top: 0.5rem; } .datetimepicker.is-large .datepicker-range::before, .datetimepicker.is-large .datepicker-range::before { top: 1.9rem; } .datetimepicker.is-large .datepicker-range.datepicker-range-start::before { left: auto; width: 1.9rem; } .datetimepicker.is-large .datepicker-range.datepicker-range-end::before { right: 1.9rem; } .datetimepicker.is-large .datepicker-events { flex-grow: 1; line-height: 1; overflow-y: auto; padding: 0.5rem; } .datetimepicker.is-large .datepicker-event { background-color: #7a7a7a; border-radius: var(--radius-small); color: var(--white); display: block; font-size: 1rem; margin: 0.2rem auto; overflow: hidden; padding: 0.3rem 0.4rem; text-align: left; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; } .datetimepicker.is-large .datepicker-event.is-white { background-color: var(--white); color: #0a0a0a; } .datetimepicker.is-large .datepicker-event.is-black { background-color: #0a0a0a; color: var(--white); } .datetimepicker.is-large .datepicker-event.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-large .datepicker-event.is-dark { background-color: var(--dark); color: var(--dark--color-invert); } .datetimepicker.is-large .datepicker-event.is-primary { background-color: var(--primary); color: var(--primary--color-invert); } .datetimepicker.is-large .datepicker-event.is-link { background-color: var(--link); color: var(--link--color-invert); } .datetimepicker.is-large .datepicker-event.is-info { background-color: var(--info); color: var(--info--color-invert); } .datetimepicker.is-large .datepicker-event.is-success { background-color: var(--success); color: var(--success--color-invert); } .datetimepicker.is-large .datepicker-event.is-warning { background-color: var(--warning); color: var(--warning--color-invert); } .datetimepicker.is-large .datepicker-event.is-danger { background-color: var(--danger); color: var(--danger--color-invert); } .datetimepicker .timepicker { display: flex; flex-direction: row; justify-content: center; margin: auto; } .datetimepicker .timepicker .timepicker-start, .datetimepicker .timepicker .timepicker-end { display: flex; flex-direction: row; flex: 1 50%; justify-content: center; position: relative; } .datetimepicker .timepicker .timepicker-start .timepicker-hours, .datetimepicker .timepicker .timepicker-start .timepicker-minutes, .datetimepicker .timepicker .timepicker-end .timepicker-hours, .datetimepicker .timepicker .timepicker-end .timepicker-minutes { display: flex; flex-direction: column; align-items: center; } .datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input, .datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input, .datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input, .datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input { position: relative; color: var(--primary); text-align: center; overflow: hidden; font-size: 2rem; font-weight: 400; } .datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input.is-input .timepicker-input-number, .datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input.is-input .timepicker-input-number, .datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input.is-input .timepicker-input-number, .datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input.is-input .timepicker-input-number { visibility: hidden; opacity: 0; transition: opacity 100ms ease-in; } .datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input.is-input input, .datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input.is-input input, .datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input.is-input input, .datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input.is-input input { visibility: visible; opacity: 1; transition: opacity 100ms ease-in; } .datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input input, .datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input input, .datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input input, .datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input input { width: 4rem; margin: 0; padding: 0; position: relative; z-index: 2; box-shadow: none; outline: none; border: none; opacity: 0; transition: opacity 100ms ease-in; } .datetimepicker .timepicker .timepicker-start .timepicker-input-number, .datetimepicker .timepicker .timepicker-end .timepicker-input-number { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; visibility: visible; opacity: 1; transition: opacity 1000ms ease-in; font-weight: 300; } .datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-increment-hide, .datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-increment-hide { opacity: 0; transform: translateY(-50px); animation: increment-prev 100ms ease-in; } .datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-increment-visible, .datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-increment-visible { opacity: 1; transform: translateY(0); animation: increment-next 100ms ease-out; } .datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-decrement-hide, .datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-decrement-hide { opacity: 0; transform: translateY(50px); animation: decrement-prev 100ms ease-in; } .datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-decrement-visible, .datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-decrement-visible { opacity: 1; transform: translateY(0); animation: decrement-next 100ms ease-out; } .datetimepicker .timepicker .timepicker-end { margin-left: 1rem; padding-left: 1rem; } .datetimepicker .timepicker .timepicker-end::before, .datetimepicker .timepicker .timepicker-end::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 50%; width: 0.1rem; background-color: whitesmoke; } .datetimepicker .timepicker .timepicker-previous, .datetimepicker .timepicker .timepicker-next { font-size: 1rem; line-height: 1rem; display: block; color: #adbcda; text-align: center; margin: 1rem 0 0; padding: 0.5rem; width: 100%; user-select: none; } .datetimepicker .timepicker .timepicker-previous:hover, .datetimepicker .timepicker .timepicker-next:hover { cursor: pointer; background-color: whitesmoke; } .datetimepicker .timepicker .timepicker-previous { margin: 0 0 1rem; } .datetimepicker .timepicker .timepicker-time-divider { display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: var(--primary); } .datetimepicker .timepicker.is-white .timepicker-input, .datetimepicker .timepicker.is-white .timepicker-input-number, .datetimepicker .timepicker.is-white .timepicker-time-divider { color: var(--white) !important; } .datetimepicker .timepicker.is-black .timepicker-input, .datetimepicker .timepicker.is-black .timepicker-input-number, .datetimepicker .timepicker.is-black .timepicker-time-divider { color: #0a0a0a !important; } .datetimepicker .timepicker.is-light .timepicker-input, .datetimepicker .timepicker.is-light .timepicker-input-number, .datetimepicker .timepicker.is-light .timepicker-time-divider { color: whitesmoke !important; } .datetimepicker .timepicker.is-dark .timepicker-input, .datetimepicker .timepicker.is-dark .timepicker-input-number, .datetimepicker .timepicker.is-dark .timepicker-time-divider { color: var(--dark) !important; } .datetimepicker .timepicker.is-primary .timepicker-input, .datetimepicker .timepicker.is-primary .timepicker-input-number, .datetimepicker .timepicker.is-primary .timepicker-time-divider { color: var(--primary) !important; } .datetimepicker .timepicker.is-link .timepicker-input, .datetimepicker .timepicker.is-link .timepicker-input-number, .datetimepicker .timepicker.is-link .timepicker-time-divider { color: var(--link) !important; } .datetimepicker .timepicker.is-info .timepicker-input, .datetimepicker .timepicker.is-info .timepicker-input-number, .datetimepicker .timepicker.is-info .timepicker-time-divider { color: var(--info) !important; } .datetimepicker .timepicker.is-success .timepicker-input, .datetimepicker .timepicker.is-success .timepicker-input-number, .datetimepicker .timepicker.is-success .timepicker-time-divider { color: var(--success) !important; } .datetimepicker .timepicker.is-warning .timepicker-input, .datetimepicker .timepicker.is-warning .timepicker-input-number, .datetimepicker .timepicker.is-warning .timepicker-time-divider { color: var(--warning) !important; } .datetimepicker .timepicker.is-danger .timepicker-input, .datetimepicker .timepicker.is-danger .timepicker-input-number, .datetimepicker .timepicker.is-danger .timepicker-time-divider { color: var(--danger) !important; } .datetimepicker .timepicker.is-black-bis .timepicker-input, .datetimepicker .timepicker.is-black-bis .timepicker-input-number, .datetimepicker .timepicker.is-black-bis .timepicker-time-divider { color: #121212 !important; } .datetimepicker .timepicker.is-black-ter .timepicker-input, .datetimepicker .timepicker.is-black-ter .timepicker-input-number, .datetimepicker .timepicker.is-black-ter .timepicker-time-divider { color: #242424 !important; } .datetimepicker .timepicker.is-grey-darker .timepicker-input, .datetimepicker .timepicker.is-grey-darker .timepicker-input-number, .datetimepicker .timepicker.is-grey-darker .timepicker-time-divider { color: #363636 !important; } .datetimepicker .timepicker.is-grey-dark .timepicker-input, .datetimepicker .timepicker.is-grey-dark .timepicker-input-number, .datetimepicker .timepicker.is-grey-dark .timepicker-time-divider { color: #4a4a4a !important; } .datetimepicker .timepicker.is-grey .timepicker-input, .datetimepicker .timepicker.is-grey .timepicker-input-number, .datetimepicker .timepicker.is-grey .timepicker-time-divider { color: #7a7a7a !important; } .datetimepicker .timepicker.is-grey-light .timepicker-input, .datetimepicker .timepicker.is-grey-light .timepicker-input-number, .datetimepicker .timepicker.is-grey-light .timepicker-time-divider { color: #b5b5b5 !important; } .datetimepicker .timepicker.is-grey-lighter .timepicker-input, .datetimepicker .timepicker.is-grey-lighter .timepicker-input-number, .datetimepicker .timepicker.is-grey-lighter .timepicker-time-divider { color: #dbdbdb !important; } .datetimepicker .timepicker.is-white-ter .timepicker-input, .datetimepicker .timepicker.is-white-ter .timepicker-input-number, .datetimepicker .timepicker.is-white-ter .timepicker-time-divider { color: whitesmoke !important; } .datetimepicker .timepicker.is-white-bis .timepicker-input, .datetimepicker .timepicker.is-white-bis .timepicker-input-number, .datetimepicker .timepicker.is-white-bis .timepicker-time-divider { color: #fafafa !important; } .datetimepicker.is-white .datetimepicker-header .datetimepicker-selection-day { color: var(--white); } .datetimepicker.is-white .datepicker-nav { background: var(--white); color: #0a0a0a; } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--white); border-color: var(--white); } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--white); color: var(--white); } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--white); } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--white); } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--white); } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--white); color: #0a0a0a; } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #0a0a0a !important; color: #0a0a0a !important; } .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #0a0a0a; border-color: var(--white); color: var(--white); } .datetimepicker.is-black .datetimepicker-header .datetimepicker-selection-day { color: #0a0a0a; } .datetimepicker.is-black .datepicker-nav { background: #0a0a0a; color: var(--white); } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #0a0a0a; border-color: #0a0a0a; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #0a0a0a; color: #0a0a0a; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #0a0a0a; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #0a0a0a; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #0a0a0a; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #0a0a0a; color: var(--white); } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--white) !important; color: var(--white) !important; } .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--white); border-color: #0a0a0a; color: #0a0a0a; } .datetimepicker.is-light .datetimepicker-header .datetimepicker-selection-day { color: whitesmoke; } .datetimepicker.is-light .datepicker-nav { background: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: whitesmoke; border-color: whitesmoke; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: whitesmoke; color: whitesmoke; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: whitesmoke; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: whitesmoke; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: whitesmoke; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: rgba(0, 0, 0, 0.7) !important; color: rgba(0, 0, 0, 0.7) !important; } .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: rgba(0, 0, 0, 0.7); border-color: whitesmoke; color: whitesmoke; } .datetimepicker.is-dark .datetimepicker-header .datetimepicker-selection-day { color: var(--dark); } .datetimepicker.is-dark .datepicker-nav { background: var(--dark); color: var(--dark--color-invert); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--dark); border-color: var(--dark); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--dark); color: var(--dark); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--dark); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--dark); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--dark); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--dark); color: var(--dark--color-invert); } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--dark--color-invert) !important; color: var(--dark--color-invert) !important; } .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--dark--color-invert); border-color: var(--dark); color: var(--dark); } .datetimepicker.is-primary .datetimepicker-header .datetimepicker-selection-day { color: var(--primary); } .datetimepicker.is-primary .datepicker-nav { background: var(--primary); color: var(--primary--color-invert); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--primary); border-color: var(--primary); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--primary); color: var(--primary); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--primary); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--primary); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--primary); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--primary); color: var(--primary--color-invert); } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--primary--color-invert) !important; color: var(--primary--color-invert) !important; } .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--primary--color-invert); border-color: var(--primary); color: var(--primary); } .datetimepicker.is-link .datetimepicker-header .datetimepicker-selection-day { color: var(--link); } .datetimepicker.is-link .datepicker-nav { background: var(--link); color: var(--link--color-invert); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--link); border-color: var(--link); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--link); color: var(--link); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--link); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--link); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--link); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--link); color: var(--link--color-invert); } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--link--color-invert) !important; color: var(--link--color-invert) !important; } .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--link--color-invert); border-color: var(--link); color: var(--link); } .datetimepicker.is-info .datetimepicker-header .datetimepicker-selection-day { color: var(--info); } .datetimepicker.is-info .datepicker-nav { background: var(--info); color: var(--info--color-invert); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--info); border-color: var(--info); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--info); color: var(--info); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--info); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--info); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--info); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--info); color: var(--info--color-invert); } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--info--color-invert) !important; color: var(--info--color-invert) !important; } .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--info--color-invert); border-color: var(--info); color: var(--info); } .datetimepicker.is-success .datetimepicker-header .datetimepicker-selection-day { color: var(--success); } .datetimepicker.is-success .datepicker-nav { background: var(--success); color: var(--success--color-invert); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--success); border-color: var(--success); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--success); color: var(--success); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--success); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--success); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--success); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--success); color: var(--success--color-invert); } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--success--color-invert) !important; color: var(--success--color-invert) !important; } .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--success--color-invert); border-color: var(--success); color: var(--success); } .datetimepicker.is-warning .datetimepicker-header .datetimepicker-selection-day { color: var(--warning); } .datetimepicker.is-warning .datepicker-nav { background: var(--warning); color: var(--warning--color-invert); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--warning); border-color: var(--warning); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--warning); color: var(--warning); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--warning); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--warning); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--warning); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--warning); color: var(--warning--color-invert); } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--warning--color-invert) !important; color: var(--warning--color-invert) !important; } .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--warning--color-invert); border-color: var(--warning); color: var(--warning); } .datetimepicker.is-danger .datetimepicker-header .datetimepicker-selection-day { color: var(--danger); } .datetimepicker.is-danger .datepicker-nav { background: var(--danger); color: var(--danger--color-invert); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: var(--danger); border-color: var(--danger); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: var(--danger); color: var(--danger); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: var(--danger); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: var(--danger); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: var(--danger); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: var(--danger); color: var(--danger--color-invert); } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: var(--danger--color-invert) !important; color: var(--danger--color-invert) !important; } .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: var(--danger--color-invert); border-color: var(--danger); color: var(--danger); } .datetimepicker.is-black-bis .datetimepicker-header .datetimepicker-selection-day { color: #121212; } .datetimepicker.is-black-bis .datepicker-nav { background: #121212; color: #fff; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #121212; border-color: #121212; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #121212; color: #121212; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #121212; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #121212; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #121212; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #121212; color: #fff; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #121212; color: #121212; } .datetimepicker.is-black-ter .datetimepicker-header .datetimepicker-selection-day { color: #242424; } .datetimepicker.is-black-ter .datepicker-nav { background: #242424; color: #fff; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #242424; border-color: #242424; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #242424; color: #242424; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #242424; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #242424; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #242424; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #242424; color: #fff; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #242424; color: #242424; } .datetimepicker.is-grey-darker .datetimepicker-header .datetimepicker-selection-day { color: #363636; } .datetimepicker.is-grey-darker .datepicker-nav { background: #363636; color: #fff; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #363636; border-color: #363636; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #363636; color: #363636; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #363636; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #363636; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #363636; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #363636; color: #fff; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #363636; color: #363636; } .datetimepicker.is-grey-dark .datetimepicker-header .datetimepicker-selection-day { color: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-nav { background: #4a4a4a; color: #fff; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #4a4a4a; border-color: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #4a4a4a; color: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #4a4a4a; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #4a4a4a; color: #fff; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #4a4a4a; color: #4a4a4a; } .datetimepicker.is-grey .datetimepicker-header .datetimepicker-selection-day { color: #7a7a7a; } .datetimepicker.is-grey .datepicker-nav { background: #7a7a7a; color: #fff; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #7a7a7a; border-color: #7a7a7a; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #7a7a7a; color: #7a7a7a; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #7a7a7a; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #7a7a7a; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #7a7a7a; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #7a7a7a; color: #fff; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #7a7a7a; color: #7a7a7a; } .datetimepicker.is-grey-light .datetimepicker-header .datetimepicker-selection-day { color: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-nav { background: #b5b5b5; color: #fff; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #b5b5b5; border-color: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #b5b5b5; color: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #b5b5b5; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #b5b5b5; color: #fff; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: #fff !important; color: #fff !important; } .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: #fff; border-color: #b5b5b5; color: #b5b5b5; } .datetimepicker.is-grey-lighter .datetimepicker-header .datetimepicker-selection-day { color: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-nav { background: #dbdbdb; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #dbdbdb; border-color: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #dbdbdb; color: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #dbdbdb; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #dbdbdb; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: rgba(0, 0, 0, 0.7) !important; color: rgba(0, 0, 0, 0.7) !important; } .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: rgba(0, 0, 0, 0.7); border-color: #dbdbdb; color: #dbdbdb; } .datetimepicker.is-white-ter .datetimepicker-header .datetimepicker-selection-day { color: whitesmoke; } .datetimepicker.is-white-ter .datepicker-nav { background: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: whitesmoke; border-color: whitesmoke; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: whitesmoke; color: whitesmoke; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: whitesmoke; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: whitesmoke; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: whitesmoke; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: rgba(0, 0, 0, 0.7) !important; color: rgba(0, 0, 0, 0.7) !important; } .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: rgba(0, 0, 0, 0.7); border-color: whitesmoke; color: whitesmoke; } .datetimepicker.is-white-bis .datetimepicker-header .datetimepicker-selection-day { color: #fafafa; } .datetimepicker.is-white-bis .datepicker-nav { background: #fafafa; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active { background: #fafafa; border-color: #fafafa; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today { border-color: #fafafa; color: #fafafa; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover { border-color: #fafafa; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range { background: #fafafa; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before { background: #fafafa; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item { background-color: #fafafa; color: rgba(0, 0, 0, 0.7); } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today { border-color: rgba(0, 0, 0, 0.7) !important; color: rgba(0, 0, 0, 0.7) !important; } .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item { background: rgba(0, 0, 0, 0.7); border-color: #fafafa; color: #fafafa; } .datetimepicker-dummy { position: relative; display: flex; width: 100%; height: 2.5rem; } .datetimepicker-dummy::before, .datetimepicker-dummy::before { content: ""; mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjAgNjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9ImN1cnJlbnRjb2xvciIgZD0iTTU3LDRoLTdWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIMTlWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIM0MyLjQ0Nyw0LDIsNC40NDcsMiw1djExdjQzYzAsMC41NTMsMC40NDcsMSwxLDFoNTRjMC41NTMsMCwxLTAuNDQ3LDEtMVYxNlY1QzU4LDQuNDQ3LDU3LjU1Myw0LDU3LDR6IE00MywyaDV2M3YzaC01VjVWMnogTTEyLDJoNXYzdjNoLTVWNVYyeiBNNCw2aDZ2M2MwLDAuNTUzLDAuNDQ3LDEsMSwxaDdjMC41NTMsMCwxLTAuNDQ3LDEtMVY2aDIydjNjMCwwLjU1MywwLjQ0NywxLDEsMWg3YzAuNTUzLDAsMS0wLjQ0NywxLTFWNmg2djlINFY2ek00LDU4VjE3aDUydjQxSDR6Ii8+PHBhdGggZmlsbD0iY3VycmVudGNvbG9yIiBkPSJNMzgsMjNoLTdoLTJoLTdoLTJoLTl2OXYydjd2MnY5aDloMmg3aDJoN2gyaDl2LTl2LTJ2LTd2LTJ2LTloLTlIMzh6TTMxLDI1aDd2N2gtN1YyNXpNMzgsNDFoLTd2LTdoN1Y0MXpNMjIsMzRoN3Y3aC03VjM0ek0yMiwyNWg3djdoLTdWMjV6TTEzLDI1aDd2N2gtN1YyNXpNMTMsMzRoN3Y3aC03VjM0ek0yMCw1MGgtN3YtN2g3VjUwek0yOSw1MGgtN3YtN2g3VjUweiBNMzgsNTBoLTd2LTdoN1Y1MHogTTQ3LDUwaC03di03aDdWNTB6IE00Nyw0MWgtN3YtN2g3VjQxek00NywyNXY3aC03di03SDQ3eiIvPjwvZz48L3N2Zz4=); position: absolute; top: 0.65rem; left: 0.75rem; width: 1.25rem; height: 1.25rem; background-color: var(--primary); } .datetimepicker-dummy .datetimepicker-clear-button { background: transparent; border: 0; color: var(--primary); cursor: pointer; font-weight: 400; outline: 0; transform: rotate(45deg); font-size: 1.5rem; height: 1.75rem; margin: 0.4rem 0.2rem 0 0; padding: 0; position: absolute; right: 0; top: 0; width: 1.75rem; } .datetimepicker-dummy .datetimepicker-dummy-wrapper { border: 1px solid #b5b5b5; cursor: pointer; display: flex; flex: 1 100%; flex-wrap: nowrap; height: 100%; max-width: 100%; } .datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input { color: #4a4a4a; font-size: 1rem; text-align: left; text-indent: 1rem; flex: 1; height: 100%; max-width: 50%; } .datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input:first-child { text-indent: 2.5rem; } .datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input.is-datetimepicker-range { background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgOCAxOCI+CiAgICA8cGF0aCBmaWxsPSIjOTU5OUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0uMTE5LjcxOGw3LjE1OCA3LjQwNy0uMDMzLS41NTEtNi43MzcgOC44ODlhLjQyNS40MjUgMCAwIDAgLjA4LjU5My40Mi40MiAwIDAgMCAuNTktLjA4bDYuNzM3LTguODg5YS40MjUuNDI1IDAgMCAwLS4wMzMtLjU1MUwuNzIzLjEyOEEuNDIuNDIgMCAwIDAgLjEyOC4xMmEuNDI1LjQyNSAwIDAgMC0uMDA5LjU5OHoiLz4KPC9zdmc+Cg==) no-repeat 100%/8px; } .datetimepicker-dummy .datetimepicker-dummy-wrapper input { background: transparent; outline: none; word-spacing: 0.5rem; border: 0; } .datetimepicker-dummy.is-white::before, .datetimepicker-dummy.is-white::before { background-color: var(--white); } .datetimepicker-dummy.is-white .datetimepicker-clear-button { color: var(--white); } .datetimepicker-dummy.is-black::before, .datetimepicker-dummy.is-black::before { background-color: #0a0a0a; } .datetimepicker-dummy.is-black .datetimepicker-clear-button { color: #0a0a0a; } .datetimepicker-dummy.is-light::before, .datetimepicker-dummy.is-light::before { background-color: whitesmoke; } .datetimepicker-dummy.is-light .datetimepicker-clear-button { color: whitesmoke; } .datetimepicker-dummy.is-dark::before, .datetimepicker-dummy.is-dark::before { background-color: var(--dark); } .datetimepicker-dummy.is-dark .datetimepicker-clear-button { color: var(--dark); } .datetimepicker-dummy.is-primary::before, .datetimepicker-dummy.is-primary::before { background-color: var(--primary); } .datetimepicker-dummy.is-primary .datetimepicker-clear-button { color: var(--primary); } .datetimepicker-dummy.is-link::before, .datetimepicker-dummy.is-link::before { background-color: var(--link); } .datetimepicker-dummy.is-link .datetimepicker-clear-button { color: var(--link); } .datetimepicker-dummy.is-info::before, .datetimepicker-dummy.is-info::before { background-color: var(--info); } .datetimepicker-dummy.is-info .datetimepicker-clear-button { color: var(--info); } .datetimepicker-dummy.is-success::before, .datetimepicker-dummy.is-success::before { background-color: var(--success); } .datetimepicker-dummy.is-success .datetimepicker-clear-button { color: var(--success); } .datetimepicker-dummy.is-warning::before, .datetimepicker-dummy.is-warning::before { background-color: var(--warning); } .datetimepicker-dummy.is-warning .datetimepicker-clear-button { color: var(--warning); } .datetimepicker-dummy.is-danger::before, .datetimepicker-dummy.is-danger::before { background-color: var(--danger); } .datetimepicker-dummy.is-danger .datetimepicker-clear-button { color: var(--danger); } .datetimepicker-dummy.is-black-bis::before, .datetimepicker-dummy.is-black-bis::before { background-color: #121212; } .datetimepicker-dummy.is-black-bis .datetimepicker-clear-button { color: #121212; } .datetimepicker-dummy.is-black-ter::before, .datetimepicker-dummy.is-black-ter::before { background-color: #242424; } .datetimepicker-dummy.is-black-ter .datetimepicker-clear-button { color: #242424; } .datetimepicker-dummy.is-grey-darker::before, .datetimepicker-dummy.is-grey-darker::before { background-color: #363636; } .datetimepicker-dummy.is-grey-darker .datetimepicker-clear-button { color: #363636; } .datetimepicker-dummy.is-grey-dark::before, .datetimepicker-dummy.is-grey-dark::before { background-color: #4a4a4a; } .datetimepicker-dummy.is-grey-dark .datetimepicker-clear-button { color: #4a4a4a; } .datetimepicker-dummy.is-grey::before, .datetimepicker-dummy.is-grey::before { background-color: #7a7a7a; } .datetimepicker-dummy.is-grey .datetimepicker-clear-button { color: #7a7a7a; } .datetimepicker-dummy.is-grey-light::before, .datetimepicker-dummy.is-grey-light::before { background-color: #b5b5b5; } .datetimepicker-dummy.is-grey-light .datetimepicker-clear-button { color: #b5b5b5; } .datetimepicker-dummy.is-grey-lighter::before, .datetimepicker-dummy.is-grey-lighter::before { background-color: #dbdbdb; } .datetimepicker-dummy.is-grey-lighter .datetimepicker-clear-button { color: #dbdbdb; } .datetimepicker-dummy.is-white-ter::before, .datetimepicker-dummy.is-white-ter::before { background-color: whitesmoke; } .datetimepicker-dummy.is-white-ter .datetimepicker-clear-button { color: whitesmoke; } .datetimepicker-dummy.is-white-bis::before, .datetimepicker-dummy.is-white-bis::before { background-color: #fafafa; } .datetimepicker-dummy.is-white-bis .datetimepicker-clear-button { color: #fafafa; } .modal .datetimepicker { display: block; max-height: 95vh; width: 22rem; max-width: 95vw; overflow-y: auto; } .steps:not(:last-child) { margin-bottom: 1.5rem; } .steps .steps-segment { position: relative; } .steps .steps-segment:not(:last-child)::after { content: " "; display: block; position: absolute; } @media screen and (max-width: 768px) { .steps:not(.is-horizontal) .steps-segment { display: block; } .steps:not(.is-horizontal) .steps-segment:not(:last-child) { min-height: 4em; } .steps:not(.is-horizontal).is-short .steps-segment { flex-grow: 0; } .steps:not(.is-horizontal).is-short.is-centered { justify-content: center; } .steps:not(.is-horizontal).is-short.is-bottom { justify-content: flex-end; } .steps:not(.is-horizontal):not(.is-short) { height: 100%; display: flex; flex-direction: column; } .steps:not(.is-horizontal):not(.is-short) .steps-segment:not(:last-child) { flex-grow: 1; } } .steps.is-vertical .steps-segment { display: block; } .steps.is-vertical .steps-segment:not(:last-child) { min-height: 4em; } .steps.is-vertical.is-short .steps-segment { flex-grow: 0; } .steps.is-vertical.is-short.is-centered { justify-content: center; } .steps.is-vertical.is-short.is-bottom { justify-content: flex-end; } .steps.is-vertical:not(.is-short) { height: 100%; display: flex; flex-direction: column; } .steps.is-vertical:not(.is-short) .steps-segment:not(:last-child) { flex-grow: 1; } @media screen and (min-width: 769px), print { .steps:not(.is-vertical) { display: flex; } .steps:not(.is-vertical) .steps-segment:not(:last-child) { flex-basis: 1rem; flex-grow: 1; flex-shrink: 1; } .steps:not(.is-vertical).is-narrow .steps-segment { flex-grow: 0; } .steps:not(.is-vertical).is-narrow .steps-segment:not(:last-child) { min-width: 10em; } .steps:not(.is-vertical).is-narrow.is-centered { justify-content: center; } .steps:not(.is-vertical).is-narrow.is-right { justify-content: flex-end; } .steps:not(.is-vertical).has-content-centered { text-align: center; } .steps:not(.is-vertical).is-balanced .steps-segment:last-child, .steps:not(.is-vertical).has-content-centered .steps-segment:last-child { flex-basis: 1rem; flex-grow: 1; flex-shrink: 1; } .steps:not(.is-vertical).is-narrow.has-content-centered .steps-segment:last-child { flex-grow: 0; min-width: 10em; } .steps:not(.is-vertical) .steps-content.is-divider-content { text-align: center; } } .steps.is-horizontal { display: flex; } .steps.is-horizontal .steps-segment:not(:last-child) { flex-basis: 1rem; flex-grow: 1; flex-shrink: 1; } .steps.is-horizontal.is-narrow .steps-segment { flex-grow: 0; } .steps.is-horizontal.is-narrow .steps-segment:not(:last-child) { min-width: 10em; } .steps.is-horizontal.is-narrow.is-centered { justify-content: center; } .steps.is-horizontal.is-narrow.is-right { justify-content: flex-end; } .steps.is-horizontal.has-content-centered { text-align: center; } .steps.is-horizontal.is-balanced .steps-segment:last-child, .steps.is-horizontal.has-content-centered .steps-segment:last-child { flex-basis: 1rem; flex-grow: 1; flex-shrink: 1; } .steps.is-horizontal.is-narrow.has-content-centered .steps-segment:last-child { flex-grow: 0; min-width: 10em; } .steps.is-horizontal .steps-content.is-divider-content { text-align: center; } .steps .steps-marker { align-items: center; display: flex; border-radius: 50%; font-weight: 700; justify-content: center; position: relative; z-index: 5; } .steps { font-size: 1rem; } .steps .steps-marker { height: 2rem; width: 2rem; overflow: hidden; } @media screen and (max-width: 768px) { .steps:not(.is-horizontal) { display: flex; flex-direction: column; } .steps:not(.is-horizontal) .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1rem - (0.2em) ); top: 1.76rem; width: 0.4em; } .steps:not(.is-horizontal) .steps-content { margin-left: calc(1rem + 0.5em); margin-top: -2rem; padding-left: 1em; padding-bottom: 1em; } .steps:not(.is-horizontal) .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps:not(.is-horizontal).has-content-centered .steps-content { padding-top: calc(1rem - 0.5em); } .steps:not(.is-horizontal):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps:not(.is-horizontal):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 2.3rem; bottom: 0.3rem; } } .steps.is-vertical { display: flex; flex-direction: column; } .steps.is-vertical .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1rem - (0.2em) ); top: 1.76rem; width: 0.4em; } .steps.is-vertical .steps-content { margin-left: calc(1rem + 0.5em); margin-top: -2rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-vertical .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-vertical.has-content-centered .steps-content { padding-top: calc(1rem - 0.5em); } .steps.is-vertical:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-vertical:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 2.3rem; bottom: 0.3rem; } @media screen and (min-width: 769px), print { .steps:not(.is-vertical) .steps-segment:not(:last-child)::after { height: 0.4em; left: 1.76rem; right: -0.24rem; top: calc( 1rem - (0.2em) ); } .steps:not(.is-vertical).has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1rem - (0.2em) ); top: auto; } .steps:not(.is-vertical) .extra-data { left: calc(50% + 1.3rem); right: calc(-50% + 1.3rem); bottom: 100%; position: absolute; } .steps:not(.is-vertical) .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps:not(.is-vertical) .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps:not(.is-vertical) .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps:not(.is-vertical).has-content-above .extra-data { top: 100%; bottom: auto; } .steps:not(.is-vertical) .steps-content { margin-left: 1rem; } .steps:not(.is-vertical) .steps-content:not(:last-child) { margin-right: -1rem; } .steps:not(.is-vertical) .steps-content.is-divider-content { margin-right: -1rem; padding-left: 2em; padding-right: 2em; } .steps:not(.is-vertical).has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps:not(.is-vertical).has-content-centered .steps-marker { position: absolute; left: calc(50% - 1rem); } .steps:not(.is-vertical).has-content-centered .steps-content { margin-top: 2rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps:not(.is-vertical).has-content-above.has-content-centered .steps-content { margin-bottom: 2rem; padding-bottom: 0.2em; } .steps:not(.is-vertical):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps:not(.is-vertical):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 2.3rem; right: 0.3rem; } .steps:not(.is-vertical):not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps:not(.is-vertical):not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.3rem ); right: calc( -50% + 1.3rem ); } } .steps.is-horizontal .steps-segment:not(:last-child)::after { height: 0.4em; left: 1.76rem; right: -0.24rem; top: calc( 1rem - (0.2em) ); } .steps.is-horizontal.has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1rem - (0.2em) ); top: auto; } .steps.is-horizontal .extra-data { left: calc(50% + 1.3rem); right: calc(-50% + 1.3rem); bottom: 100%; position: absolute; } .steps.is-horizontal .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps.is-horizontal .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps.is-horizontal .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1rem - (0.2em) ); } .steps.is-horizontal.has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-horizontal .steps-content { margin-left: 1rem; } .steps.is-horizontal .steps-content:not(:last-child) { margin-right: -1rem; } .steps.is-horizontal .steps-content.is-divider-content { margin-right: -1rem; padding-left: 2em; padding-right: 2em; } .steps.is-horizontal.has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-horizontal.has-content-centered .steps-marker { position: absolute; left: calc(50% - 1rem); } .steps.is-horizontal.has-content-centered .steps-content { margin-top: 2rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-horizontal.has-content-above.has-content-centered .steps-content { margin-bottom: 2rem; padding-bottom: 0.2em; } .steps.is-horizontal:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-horizontal:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 2.3rem; right: 0.3rem; } .steps.is-horizontal:not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-horizontal:not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.3rem ); right: calc( -50% + 1.3rem ); } .steps.is-small { font-size: 0.75rem; } .steps.is-small .steps-marker { height: 1.5rem; width: 1.5rem; overflow: hidden; } @media screen and (max-width: 768px) { .steps.is-small:not(.is-horizontal) { display: flex; flex-direction: column; } .steps.is-small:not(.is-horizontal) .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 0.75rem - (0.2em) ); top: 1.26rem; width: 0.4em; } .steps.is-small:not(.is-horizontal) .steps-content { margin-left: calc(0.75rem + 0.5em); margin-top: -1.5rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-small:not(.is-horizontal) .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-small:not(.is-horizontal).has-content-centered .steps-content { padding-top: calc(0.75rem - 0.5em); } .steps.is-small:not(.is-horizontal):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-small:not(.is-horizontal):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 1.8rem; bottom: 0.3rem; } } .steps.is-small.is-vertical { display: flex; flex-direction: column; } .steps.is-small.is-vertical .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 0.75rem - (0.2em) ); top: 1.26rem; width: 0.4em; } .steps.is-small.is-vertical .steps-content { margin-left: calc(0.75rem + 0.5em); margin-top: -1.5rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-small.is-vertical .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-small.is-vertical.has-content-centered .steps-content { padding-top: calc(0.75rem - 0.5em); } .steps.is-small.is-vertical:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-small.is-vertical:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 1.8rem; bottom: 0.3rem; } @media screen and (min-width: 769px), print { .steps.is-small:not(.is-vertical) .steps-segment:not(:last-child)::after { height: 0.4em; left: 1.26rem; right: -0.24rem; top: calc( 0.75rem - (0.2em) ); } .steps.is-small:not(.is-vertical).has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 0.75rem - (0.2em) ); top: auto; } .steps.is-small:not(.is-vertical) .extra-data { left: calc(50% + 1.05rem); right: calc(-50% + 1.05rem); bottom: 100%; position: absolute; } .steps.is-small:not(.is-vertical) .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small:not(.is-vertical) .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small:not(.is-vertical) .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small:not(.is-vertical).has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-small:not(.is-vertical) .steps-content { margin-left: 0.75rem; } .steps.is-small:not(.is-vertical) .steps-content:not(:last-child) { margin-right: -0.75rem; } .steps.is-small:not(.is-vertical) .steps-content.is-divider-content { margin-right: -0.75rem; padding-left: 2em; padding-right: 2em; } .steps.is-small:not(.is-vertical).has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-small:not(.is-vertical).has-content-centered .steps-marker { position: absolute; left: calc(50% - 0.75rem); } .steps.is-small:not(.is-vertical).has-content-centered .steps-content { margin-top: 1.5rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-small:not(.is-vertical).has-content-above.has-content-centered .steps-content { margin-bottom: 1.5rem; padding-bottom: 0.2em; } .steps.is-small:not(.is-vertical):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-small:not(.is-vertical):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 1.8rem; right: 0.3rem; } .steps.is-small:not(.is-vertical):not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-small:not(.is-vertical):not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.05rem ); right: calc( -50% + 1.05rem ); } } .steps.is-small.is-horizontal .steps-segment:not(:last-child)::after { height: 0.4em; left: 1.26rem; right: -0.24rem; top: calc( 0.75rem - (0.2em) ); } .steps.is-small.is-horizontal.has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 0.75rem - (0.2em) ); top: auto; } .steps.is-small.is-horizontal .extra-data { left: calc(50% + 1.05rem); right: calc(-50% + 1.05rem); bottom: 100%; position: absolute; } .steps.is-small.is-horizontal .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small.is-horizontal .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small.is-horizontal .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 0.75rem - (0.2em) ); } .steps.is-small.is-horizontal.has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-small.is-horizontal .steps-content { margin-left: 0.75rem; } .steps.is-small.is-horizontal .steps-content:not(:last-child) { margin-right: -0.75rem; } .steps.is-small.is-horizontal .steps-content.is-divider-content { margin-right: -0.75rem; padding-left: 2em; padding-right: 2em; } .steps.is-small.is-horizontal.has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-small.is-horizontal.has-content-centered .steps-marker { position: absolute; left: calc(50% - 0.75rem); } .steps.is-small.is-horizontal.has-content-centered .steps-content { margin-top: 1.5rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-small.is-horizontal.has-content-above.has-content-centered .steps-content { margin-bottom: 1.5rem; padding-bottom: 0.2em; } .steps.is-small.is-horizontal:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-small.is-horizontal:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 1.8rem; right: 0.3rem; } .steps.is-small.is-horizontal:not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-small.is-horizontal:not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.05rem ); right: calc( -50% + 1.05rem ); } .steps.is-medium { font-size: 1.25rem; } .steps.is-medium .steps-marker { height: 2.5rem; width: 2.5rem; overflow: hidden; } @media screen and (max-width: 768px) { .steps.is-medium:not(.is-horizontal) { display: flex; flex-direction: column; } .steps.is-medium:not(.is-horizontal) .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1.25rem - (0.2em) ); top: 2.26rem; width: 0.4em; } .steps.is-medium:not(.is-horizontal) .steps-content { margin-left: calc(1.25rem + 0.5em); margin-top: -2.5rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-medium:not(.is-horizontal) .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-medium:not(.is-horizontal).has-content-centered .steps-content { padding-top: calc(1.25rem - 0.5em); } .steps.is-medium:not(.is-horizontal):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium:not(.is-horizontal):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 2.8rem; bottom: 0.3rem; } } .steps.is-medium.is-vertical { display: flex; flex-direction: column; } .steps.is-medium.is-vertical .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1.25rem - (0.2em) ); top: 2.26rem; width: 0.4em; } .steps.is-medium.is-vertical .steps-content { margin-left: calc(1.25rem + 0.5em); margin-top: -2.5rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-medium.is-vertical .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-medium.is-vertical.has-content-centered .steps-content { padding-top: calc(1.25rem - 0.5em); } .steps.is-medium.is-vertical:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium.is-vertical:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 2.8rem; bottom: 0.3rem; } @media screen and (min-width: 769px), print { .steps.is-medium:not(.is-vertical) .steps-segment:not(:last-child)::after { height: 0.4em; left: 2.26rem; right: -0.24rem; top: calc( 1.25rem - (0.2em) ); } .steps.is-medium:not(.is-vertical).has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1.25rem - (0.2em) ); top: auto; } .steps.is-medium:not(.is-vertical) .extra-data { left: calc(50% + 1.55rem); right: calc(-50% + 1.55rem); bottom: 100%; position: absolute; } .steps.is-medium:not(.is-vertical) .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium:not(.is-vertical) .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium:not(.is-vertical) .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium:not(.is-vertical).has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-medium:not(.is-vertical) .steps-content { margin-left: 1.25rem; } .steps.is-medium:not(.is-vertical) .steps-content:not(:last-child) { margin-right: -1.25rem; } .steps.is-medium:not(.is-vertical) .steps-content.is-divider-content { margin-right: -1.25rem; padding-left: 2em; padding-right: 2em; } .steps.is-medium:not(.is-vertical).has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-medium:not(.is-vertical).has-content-centered .steps-marker { position: absolute; left: calc(50% - 1.25rem); } .steps.is-medium:not(.is-vertical).has-content-centered .steps-content { margin-top: 2.5rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-medium:not(.is-vertical).has-content-above.has-content-centered .steps-content { margin-bottom: 2.5rem; padding-bottom: 0.2em; } .steps.is-medium:not(.is-vertical):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium:not(.is-vertical):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 2.8rem; right: 0.3rem; } .steps.is-medium:not(.is-vertical):not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium:not(.is-vertical):not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.55rem ); right: calc( -50% + 1.55rem ); } } .steps.is-medium.is-horizontal .steps-segment:not(:last-child)::after { height: 0.4em; left: 2.26rem; right: -0.24rem; top: calc( 1.25rem - (0.2em) ); } .steps.is-medium.is-horizontal.has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1.25rem - (0.2em) ); top: auto; } .steps.is-medium.is-horizontal .extra-data { left: calc(50% + 1.55rem); right: calc(-50% + 1.55rem); bottom: 100%; position: absolute; } .steps.is-medium.is-horizontal .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium.is-horizontal .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium.is-horizontal .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.25rem - (0.2em) ); } .steps.is-medium.is-horizontal.has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-medium.is-horizontal .steps-content { margin-left: 1.25rem; } .steps.is-medium.is-horizontal .steps-content:not(:last-child) { margin-right: -1.25rem; } .steps.is-medium.is-horizontal .steps-content.is-divider-content { margin-right: -1.25rem; padding-left: 2em; padding-right: 2em; } .steps.is-medium.is-horizontal.has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-medium.is-horizontal.has-content-centered .steps-marker { position: absolute; left: calc(50% - 1.25rem); } .steps.is-medium.is-horizontal.has-content-centered .steps-content { margin-top: 2.5rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-medium.is-horizontal.has-content-above.has-content-centered .steps-content { margin-bottom: 2.5rem; padding-bottom: 0.2em; } .steps.is-medium.is-horizontal:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium.is-horizontal:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 2.8rem; right: 0.3rem; } .steps.is-medium.is-horizontal:not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-medium.is-horizontal:not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.55rem ); right: calc( -50% + 1.55rem ); } .steps.is-large { font-size: 1.5rem; } .steps.is-large .steps-marker { height: 3rem; width: 3rem; overflow: hidden; } @media screen and (max-width: 768px) { .steps.is-large:not(.is-horizontal) { display: flex; flex-direction: column; } .steps.is-large:not(.is-horizontal) .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1.5rem - (0.2em) ); top: 2.76rem; width: 0.4em; } .steps.is-large:not(.is-horizontal) .steps-content { margin-left: calc(1.5rem + 0.5em); margin-top: -3rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-large:not(.is-horizontal) .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-large:not(.is-horizontal).has-content-centered .steps-content { padding-top: calc(1.5rem - 0.5em); } .steps.is-large:not(.is-horizontal):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-large:not(.is-horizontal):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 3.3rem; bottom: 0.3rem; } } .steps.is-large.is-vertical { display: flex; flex-direction: column; } .steps.is-large.is-vertical .steps-segment:not(:last-child)::after { bottom: -0.24rem; left: calc( 1.5rem - (0.2em) ); top: 2.76rem; width: 0.4em; } .steps.is-large.is-vertical .steps-content { margin-left: calc(1.5rem + 0.5em); margin-top: -3rem; padding-left: 1em; padding-bottom: 1em; } .steps.is-large.is-vertical .steps-content.is-divider-content { margin-top: 0; padding-bottom: 0; } .steps.is-large.is-vertical.has-content-centered .steps-content { padding-top: calc(1.5rem - 0.5em); } .steps.is-large.is-vertical:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-large.is-vertical:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { top: 3.3rem; bottom: 0.3rem; } @media screen and (min-width: 769px), print { .steps.is-large:not(.is-vertical) .steps-segment:not(:last-child)::after { height: 0.4em; left: 2.76rem; right: -0.24rem; top: calc( 1.5rem - (0.2em) ); } .steps.is-large:not(.is-vertical).has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1.5rem - (0.2em) ); top: auto; } .steps.is-large:not(.is-vertical) .extra-data { left: calc(50% + 1.8rem); right: calc(-50% + 1.8rem); bottom: 100%; position: absolute; } .steps.is-large:not(.is-vertical) .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large:not(.is-vertical) .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large:not(.is-vertical) .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large:not(.is-vertical).has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-large:not(.is-vertical) .steps-content { margin-left: 1.5rem; } .steps.is-large:not(.is-vertical) .steps-content:not(:last-child) { margin-right: -1.5rem; } .steps.is-large:not(.is-vertical) .steps-content.is-divider-content { margin-right: -1.5rem; padding-left: 2em; padding-right: 2em; } .steps.is-large:not(.is-vertical).has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-large:not(.is-vertical).has-content-centered .steps-marker { position: absolute; left: calc(50% - 1.5rem); } .steps.is-large:not(.is-vertical).has-content-centered .steps-content { margin-top: 3rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-large:not(.is-vertical).has-content-above.has-content-centered .steps-content { margin-bottom: 3rem; padding-bottom: 0.2em; } .steps.is-large:not(.is-vertical):not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-large:not(.is-vertical):not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 3.3rem; right: 0.3rem; } .steps.is-large:not(.is-vertical):not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-large:not(.is-vertical):not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.8rem ); right: calc( -50% + 1.8rem ); } } .steps.is-large.is-horizontal .steps-segment:not(:last-child)::after { height: 0.4em; left: 2.76rem; right: -0.24rem; top: calc( 1.5rem - (0.2em) ); } .steps.is-large.is-horizontal.has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 1.5rem - (0.2em) ); top: auto; } .steps.is-large.is-horizontal .extra-data { left: calc(50% + 1.8rem); right: calc(-50% + 1.8rem); bottom: 100%; position: absolute; } .steps.is-large.is-horizontal .extra-data.has-overflow-right { overflow: visible; right: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large.is-horizontal .extra-data.has-overflow-left { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large.is-horizontal .extra-data.has-overflow-centered { overflow: visible; left: auto; white-space: nowrap; min-width: calc( 100% - 1.5rem - (0.2em) ); } .steps.is-large.is-horizontal.has-content-above .extra-data { top: 100%; bottom: auto; } .steps.is-large.is-horizontal .steps-content { margin-left: 1.5rem; } .steps.is-large.is-horizontal .steps-content:not(:last-child) { margin-right: -1.5rem; } .steps.is-large.is-horizontal .steps-content.is-divider-content { margin-right: -1.5rem; padding-left: 2em; padding-right: 2em; } .steps.is-large.is-horizontal.has-content-centered .steps-segment:not(:last-child)::after { left: 50%; right: -50%; } .steps.is-large.is-horizontal.has-content-centered .steps-marker { position: absolute; left: calc(50% - 1.5rem); } .steps.is-large.is-horizontal.has-content-centered .steps-content { margin-top: 3rem; margin-left: 0.5em; margin-right: 0.5em; padding-top: 0.2em; } .steps.is-large.is-horizontal.has-content-above.has-content-centered .steps-content { margin-bottom: 3rem; padding-bottom: 0.2em; } .steps.is-large.is-horizontal:not(.is-thin).has-gaps .steps-segment:not(:last-child)::after, .steps.is-large.is-horizontal:not(.is-thin) .steps-segment.has-gaps:not(:last-child)::after { left: 3.3rem; right: 0.3rem; } .steps.is-large.is-horizontal:not(.is-thin).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-large.is-horizontal:not(.is-thin).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 1.8rem ); right: calc( -50% + 1.8rem ); } .steps-segment::after { background-color: var(--primary); } .steps-segment.is-active::after { background-color: #dbdbdb; } .steps-segment.is-active ~ .steps-segment::after { background-color: #dbdbdb; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow) { background-color: var(--primary); color: #fff; } .steps:not(.is-hollow) .steps-segment.is-active .steps-marker:not(.is-hollow) { background-color: var(--primary); color: #fff; } .steps:not(.is-hollow) .steps-segment.is-active ~ .steps-segment .steps-marker:not(.is-hollow) { background-color: #dbdbdb; color: rgba(0, 0, 0, 0.7); } .steps.is-hollow .steps-marker, .steps-marker.is-hollow { border: 0.3em solid var(--primary); } .steps.is-hollow .is-active .steps-marker, .steps .is-active .steps-marker.is-hollow { border-color: var(--primary); } .steps.is-hollow .steps-segment.is-active ~ .steps-segment .steps-marker, .steps-segment.is-active ~ .steps-segment .steps-marker.is-hollow { border-color: #dbdbdb; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-white { background-color: var(--white) !important; color: #0a0a0a !important; } .steps.is-hollow .steps-marker.is-white, .steps .steps-marker.is-hollow.is-white { border-color: var(--white) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-black { background-color: #0a0a0a !important; color: var(--white) !important; } .steps.is-hollow .steps-marker.is-black, .steps .steps-marker.is-hollow.is-black { border-color: #0a0a0a !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-light { background-color: whitesmoke !important; color: rgba(0, 0, 0, 0.7) !important; } .steps.is-hollow .steps-marker.is-light, .steps .steps-marker.is-hollow.is-light { border-color: whitesmoke !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-dark { background-color: var(--dark) !important; color: var(--dark--color-invert) !important; } .steps.is-hollow .steps-marker.is-dark, .steps .steps-marker.is-hollow.is-dark { border-color: var(--dark) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-primary { background-color: var(--primary) !important; color: var(--primary--color-invert) !important; } .steps.is-hollow .steps-marker.is-primary, .steps .steps-marker.is-hollow.is-primary { border-color: var(--primary) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-link { background-color: var(--link) !important; color: var(--link--color-invert) !important; } .steps.is-hollow .steps-marker.is-link, .steps .steps-marker.is-hollow.is-link { border-color: var(--link) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-info { background-color: var(--info) !important; color: var(--info--color-invert) !important; } .steps.is-hollow .steps-marker.is-info, .steps .steps-marker.is-hollow.is-info { border-color: var(--info) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-success { background-color: var(--success) !important; color: var(--success--color-invert) !important; } .steps.is-hollow .steps-marker.is-success, .steps .steps-marker.is-hollow.is-success { border-color: var(--success) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-warning { background-color: var(--warning) !important; color: var(--warning--color-invert) !important; } .steps.is-hollow .steps-marker.is-warning, .steps .steps-marker.is-hollow.is-warning { border-color: var(--warning) !important; } .steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-danger { background-color: var(--danger) !important; color: var(--danger--color-invert) !important; } .steps.is-hollow .steps-marker.is-danger, .steps .steps-marker.is-hollow.is-danger { border-color: var(--danger) !important; } @media screen and (max-width: 768px) { .steps:not(.is-horizontal).is-dashed .steps-segment::after, .steps:not(.is-horizontal) .steps-segment.is-dashed::after { background: repeating-linear-gradient(0deg, var(--primary), var(--primary) 5px, transparent 5px, transparent 10px); } .steps:not(.is-horizontal).is-dashed .steps-segment.is-active::after, .steps:not(.is-horizontal).is-dashed .steps-segment.is-active ~ .steps-segment::after, .steps:not(.is-horizontal) .steps-segment.is-active.is-dashed::after, .steps:not(.is-horizontal) .steps-segment.is-active ~ .steps-segment.is-dashed::after { background: repeating-linear-gradient(0deg, #dbdbdb, #dbdbdb 5px, transparent 5px, transparent 10px); } } .steps.is-vertical.is-dashed .steps-segment::after, .steps.is-vertical .steps-segment.is-dashed::after { background: repeating-linear-gradient(0deg, var(--primary), var(--primary) 5px, transparent 5px, transparent 10px); } .steps.is-vertical.is-dashed .steps-segment.is-active::after, .steps.is-vertical.is-dashed .steps-segment.is-active ~ .steps-segment::after, .steps.is-vertical .steps-segment.is-active.is-dashed::after, .steps.is-vertical .steps-segment.is-active ~ .steps-segment.is-dashed::after { background: repeating-linear-gradient(0deg, #dbdbdb, #dbdbdb 5px, transparent 5px, transparent 10px); } @media screen and (min-width: 769px), print { .steps:not(.is-vertical).is-dashed .steps-segment::after, .steps:not(.is-vertical) .steps-segment.is-dashed::after { background: repeating-linear-gradient(90deg, var(--primary), var(--primary) 10px, transparent 10px, transparent 20px); } .steps:not(.is-vertical).is-dashed .steps-segment.is-active::after, .steps:not(.is-vertical).is-dashed .steps-segment.is-active ~ .steps-segment::after, .steps:not(.is-vertical) .steps-segment.is-active.is-dashed::after, .steps:not(.is-vertical) .steps-segment.is-active ~ .steps-segment.is-dashed::after { background: repeating-linear-gradient(90deg, #dbdbdb, #dbdbdb 10px, transparent 10px, transparent 20px); } } .steps.is-horizontal.is-dashed .steps-segment::after, .steps.is-horizontal .steps-segment.is-dashed::after { background: repeating-linear-gradient(90deg, var(--primary), var(--primary) 10px, transparent 10px, transparent 20px); } .steps.is-horizontal.is-dashed .steps-segment.is-active::after, .steps.is-horizontal.is-dashed .steps-segment.is-active ~ .steps-segment::after, .steps.is-horizontal .steps-segment.is-active.is-dashed::after, .steps.is-horizontal .steps-segment.is-active ~ .steps-segment.is-dashed::after { background: repeating-linear-gradient(90deg, #dbdbdb, #dbdbdb 10px, transparent 10px, transparent 20px); } .steps.is-thin .steps-marker { width: 0.8em; height: 0.8em; } .steps.is-thin.is-hollow .steps-marker, .steps.is-thin .steps-marker.is-hollow { border-width: 1px; height: calc(0.8em + 1px); width: calc(0.8em + 1px); } @media screen and (max-width: 768px) { .steps.is-thin:not(.is-horizontal) .steps-segment:not(:last-child)::after { bottom: 0; left: calc( 0.4em - 0.5px ); top: 0.8em; width: 1px; } .steps.is-thin:not(.is-horizontal) .steps-content { margin-top: -1.2em; margin-left: 0.8em; } .steps.is-thin:not(.is-horizontal).has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin:not(.is-horizontal) .steps-segment.has-gaps:not(:last-child)::after { bottom: 0.4em; top: 1.2em; } .steps.is-thin:not(.is-horizontal).has-content-centered .steps-content { padding-top: 1.6em; } } .steps.is-thin.is-vertical .steps-segment:not(:last-child)::after { bottom: 0; left: calc( 0.4em - 0.5px ); top: 0.8em; width: 1px; } .steps.is-thin.is-vertical .steps-content { margin-top: -1.2em; margin-left: 0.8em; } .steps.is-thin.is-vertical.has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin.is-vertical .steps-segment.has-gaps:not(:last-child)::after { bottom: 0.4em; top: 1.2em; } .steps.is-thin.is-vertical.has-content-centered .steps-content { padding-top: 1.6em; } @media screen and (min-width: 769px), print { .steps.is-thin:not(.is-vertical) .steps-segment:not(:last-child)::after { left: 0.8em; right: 0; top: calc( 0.4em - 0.5px ); height: 1px; } .steps.is-thin:not(.is-vertical).has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 0.4em - 0.5px ); top: auto; } .steps.is-thin:not(.is-vertical) .steps-content { margin-top: 0.8em; } .steps.is-thin:not(.is-vertical).has-content-centered .steps-segment:not(:last-child)::after { left: calc(50% + 0.4em); right: calc(-50% + 0.4em); } .steps.is-thin:not(.is-vertical).has-content-centered .steps-marker { position: absolute; left: calc(50% - 0.4em); } .steps.is-thin:not(.is-vertical).has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin:not(.is-vertical) .steps-segment.has-gaps:not(:last-child)::after { left: 1.2em; right: 0.4em; } .steps.is-thin:not(.is-vertical).has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin:not(.is-vertical).has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 0.8em ); right: calc( -50% + 0.8em ); } } .steps.is-thin.is-horizontal .steps-segment:not(:last-child)::after { left: 0.8em; right: 0; top: calc( 0.4em - 0.5px ); height: 1px; } .steps.is-thin.is-horizontal.has-content-above .steps-segment:not(:last-child)::after { bottom: calc( 0.4em - 0.5px ); top: auto; } .steps.is-thin.is-horizontal .steps-content { margin-top: 0.8em; } .steps.is-thin.is-horizontal.has-content-centered .steps-segment:not(:last-child)::after { left: calc(50% + 0.4em); right: calc(-50% + 0.4em); } .steps.is-thin.is-horizontal.has-content-centered .steps-marker { position: absolute; left: calc(50% - 0.4em); } .steps.is-thin.is-horizontal.has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin.is-horizontal .steps-segment.has-gaps:not(:last-child)::after { left: 1.2em; right: 0.4em; } .steps.is-thin.is-horizontal.has-content-centered.has-gaps .steps-segment:not(:last-child)::after, .steps.is-thin.is-horizontal.has-content-centered .steps-segment.has-gaps:not(:last-child)::after { left: calc( 50% + 0.8em ); right: calc( -50% + 0.8em ); } .steps:not(.is-vertical).has-content-above .steps-segment { display: flex; flex-direction: column-reverse; } .steps:not(.is-vertical).has-content-above .steps-segment .steps-content { margin-top: 0; padding-top: 0; display: flex; flex-direction: column-reverse; } .tagsinput { height: auto !important; } .tagsinput .control { margin-bottom: 0.1em !important; margin-top: 0.1em !important; } .tagsinput input { border: none; margin-bottom: 0.1em !important; margin-top: 0.1em !important; } .tagsinput .tag.is-active { background-color: var(--primary); color: #fff; } /*! _typography.scss | Vuero | Css ninja 2020-2021 */ /* 1. Titles 2. Titles Dark mode 3. Typography Helpers */ /* ========================================================================== 1. Titles ========================================================================== */ .title { font-family: var(--font-alt); color: var(--dark-text); } .title.is-narrow { margin-bottom: 0; } .title.is-thin { font-weight: 300; } .title.is-heavy { font-weight: 600; } .title.is-bold { font-weight: 700; } .title.is-bolder { font-weight: 800; } .subtitle { font-family: var(--font); color: var(--dark-text); } .subtitle.is-narrow { margin-bottom: 0; } .subtitle.is-thin { font-weight: 300; } .subtitle.is-heavy { font-weight: 600; } .subtitle.is-bold { font-weight: 700; } .subtitle.is-bolder { font-weight: 800; } p { font-family: var(--font); font-weight: 300; color: var(--light-text); } p.white-text { color: var(--white); } div { color: var(--dark-text); } var { font-style: normal; } .font-size-base { font-size: 1rem; } .has-dark-text { color: var(--dark-text); } code { white-space: pre; color: var(--primary); background: transparent; font-family: var(--font-monospace); } /* ========================================================================== 2. Titles Dark mode ========================================================================== */ .is-dark .title, .is-dark .dark-inverted { color: var(--dark-dark-text) !important; } .is-dark .subtitle { color: var(--light-text); } .is-dark a.dark-inverted { color: var(--primary) !important; } .is-dark a.dark-inverted-hover:hover { color: var(--primary) !important; } .is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4, .is-dark h5, .is-dark h6 { color: var(--dark-dark-text); } .is-dark code { color: var(--primary); } .is-dark strong { color: var(--white); } .content .title { font-family: var(--font-alt); } /* ========================================================================== 3. Typography Helpers ========================================================================== */ .is-font { font-family: var(--font); } .is-font-alt { font-family: var(--font-alt) !important; } .is-weight-300 { font-weight: 300 !important; } .is-weight-400 { font-weight: 400 !important; } .is-weight-500 { font-weight: 500 !important; } .is-weight-600 { font-weight: 600 !important; } .is-weight-700 { font-weight: 700 !important; } .is-weight-500 { font-weight: 500 !important; } .is-weight-900 { font-weight: 900 !important; } .rem-70 { font-size: 0.7rem; } .rem-75 { font-size: 0.75rem; } .rem-80 { font-size: 0.8rem; } .rem-85 { font-size: 0.85rem; } .rem-90 { font-size: 0.9rem; } .rem-95 { font-size: 0.95rem; } .rem-100 { font-size: 1rem; } .rem-110 { font-size: 1.1rem; } .rem-120 { font-size: 1.2rem; } .rem-130 { font-size: 1.3rem; } .rem-140 { font-size: 1.4rem; } .rem-150 { font-size: 1.5rem; } .rem-160 { font-size: 1.6rem; } .rem-170 { font-size: 1.7rem; } .rem-180 { font-size: 1.8rem; } .rem-190 { font-size: 1.9rem; } .rem-200 { font-size: 2rem; } .is-capitalize { text-transform: capitalize; } /*! _animations.scss | Vuero | Css ninja 2020-2021 */ /* 1. Base Class 2. pulsate 3. Infinite rotate 4. Fade In Up 5. Fade In Down 6. Fade In Left 7. Scale in 8. Scale out 9. Scale In Circle 10. Gelatine 11. Wave 12. Levitate 13. Glowing 14. Translate Left */ /* ========================================================================== 1. Base Class ========================================================================== */ .animated { -webkit-animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-duration: 0.5s; animation-fill-mode: both; } /* ========================================================================== 2. Pulsate ========================================================================== */ @keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2, 1.2); opacity: 0; } } .pulsate { animation: pulsate 1.5s ease-out; animation-iteration-count: infinite; opacity: 0; } /* ========================================================================== 3. Infinite rotate ========================================================================== */ @keyframes rotating { from { -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotating { from { -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } /* ========================================================================== 4. Fade In Up ========================================================================== */ @-webkit-keyframes fadeInUp { from { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fadeInUp { from { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .preFadeInUp { opacity: 0; } .fadeInUp { opacity: 0; -webkit-animation-name: fadeinup; animation-name: fadeInUp; } /* ========================================================================== 5. Fade In Down ========================================================================== */ @-webkit-keyframes fadeInDown { from { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fadeInDown { from { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .preFadeInDown { opacity: 0; } .fadeInDown { opacity: 0; -webkit-animation-name: fadeindown; animation-name: fadeInDown; } /* ========================================================================== 6. Fade In Left ========================================================================== */ @-webkit-keyframes fadeInLeft { from { -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fadeInLeft { from { -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .preFadeInLeft { opacity: 0; } .fadeInLeft { opacity: 0; -webkit-animation-name: fadeinleft; animation-name: fadeInLeft; } /* ========================================================================== 7. Scale in ========================================================================== */ @-webkit-keyframes scaleIn { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } } .scaleIn { -webkit-animation: scalein 0.5s; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation: scaleIn 0.5s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .scaleInTooltip { -webkit-animation: scalein 0.3s; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation: scaleIn 0.3s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } /* ========================================================================== 8. Scale out ========================================================================== */ @-webkit-keyframes scaleOut { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes scaleOut { from { transform: scale(1); } to { transform: scale(0); } } .scaleOut { -webkit-animation: scaleout 0.5s; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation: scaleOut 0.5s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .scaleOutTooltip { -webkit-animation: scaleout 0.3s; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation: scaleOut 0.3s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } /* ========================================================================== 9. Scale in circle (used for modal popup) ========================================================================== */ @-webkit-keyframes scaleInCircle { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(7); transform: scale(7); } } @keyframes scaleInCircle { from { transform: scale(0); } to { transform: scale(7); } } .scaleInCircle { -webkit-animation: scaleincircle 0.6s; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation: scaleInCircle 0.6s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } /* ========================================================================== 10. Gelatine ========================================================================== */ @-webkit-keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @keyframes gelatine { from, to { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } } .gelatine { -webkit-animation: gelatine 0.6s; -webkit-animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation: gelatine 0.6s; animation-duration: 0.6s; animation-fill-mode: both; } /* ========================================================================== 11. Wave ========================================================================== */ @keyframes wave { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(4.5); opacity: 0; } } /* ========================================================================== 12. Levitate ========================================================================== */ @-webkit-keyframes levitate { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes levitate { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .levitate { -webkit-animation-name: levitate; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-name: levitate; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } /* ========================================================================== 13. Glowing ========================================================================== */ @keyframes glowing { 0% { box-shadow: 0 0 -10px #fafafa; } 40% { box-shadow: 0 0 20px #fafafa; } 60% { box-shadow: 0 0 20px #fafafa; } 100% { box-shadow: 0 0 -10px #fafafa; } } /* ========================================================================== 14. Translate Left ========================================================================== */ @-webkit-keyframes translateLeft { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes translateLeft { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .translateLeft { -webkit-animation-name: translateleft; -webkit-animation-duration: 0.3s; -webkit-transition: all 500ms cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-name: translateLeft; animation-duration: 0.3s; transition: all 500ms cubic-bezier(0.755, 0.05, 0.855, 0.06); } /* ========================================================================== 1. fade-fast ========================================================================== */ .fade-fast-enter-active, .fade-fast-leave-active { transition: opacity 0.2s ease; } .fade-fast-enter-from, .fade-fast-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fade-fast-enter-active, .fade-fast-leave-active { transition: none; } } /* ========================================================================== 2. fade-slow ========================================================================== */ .fade-slow-enter-active, .fade-slow-leave-active { transition: opacity 0.5s ease; } .fade-slow-enter-from, .fade-slow-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fade-slow-enter-active, .fade-slow-leave-active { transition: none; } } /* ========================================================================== 3. translate-page-y ========================================================================== */ .translate-page-y-enter-active, .translate-page-y-leave-active { transform: translateY(0); transition: transform 0.25s ease-out, opacity 0.25s ease-out; } .translate-page-y-enter-from { transform: translateY(10px); opacity: 0; } .translate-page-y-leave-to { transform: translateY(-300px); opacity: 0; } @media (prefers-reduced-motion: reduce) { .translate-page-y-enter-active, .translate-page-y-leave-active { transition: none; } } /* ========================================================================== 4. translate-page-x ========================================================================== */ .translate-page-x-enter-active { animation: translate-page-x-in 0.2s cubic-bezier(0.25, 1, 0.5, 1); } .translate-page-x-leave-active { animation: translate-page-x-out 0.2s cubic-bezier(0.25, 1, 0.5, 1); } @keyframes translate-page-x-in { 0% { transform: translateX(-200px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes translate-page-x-out { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(500px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .translate-page-x-enter-active, .translate-page-x-leave-active { transition: none; } } /* ========================================================================== 5. list ========================================================================== */ .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 0.4s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); } @media (prefers-reduced-motion: reduce) { .list-enter-active, .list-leave-active { transition: none; } } /* ========================================================================== 6. list-complete ========================================================================== */ .list-complete-item { transition: all 0.8s ease; display: inline-block; margin-right: 10px; } .list-complete-enter-from, .list-complete-leave-to { opacity: 0; transform: translateY(30px); } .list-complete-leave-active { position: absolute; } @media (prefers-reduced-motion: reduce) { .list-complete-enter-active, .list-complete-leave-active { transition: none; } } /* ========================================================================== 7. slide-x ========================================================================== */ .slide-x-enter-active { transition: transform 0.3s ease-out; } .slide-x-leave-active { transition: transform 0.2s ease-in; } .slide-x-enter-from { transform: translateX(-100%); } .slide-x-enter-to { transform: translateX(0); } .slide-x-leave-from { transform: translateX(0); } .slide-x-leave-to { transform: translateX(-100%); } @media (prefers-reduced-motion: reduce) { .slide-x-enter-active, .slide-x-leave-active { transition: none; transform: translateX(0); } } /* ========================================================================== 7. from-bottom ========================================================================== */ .from-bottom-enter-active, .from-bottom-leave-active { opacity: 1; transform: translateY(0); transition: opacity 0.2s ease, transform 0.3s ease; } .from-bottom-enter-from, .from-bottom-leave-to { transform: translateY(100%); opacity: 0; } @media (prefers-reduced-motion: reduce) { .from-bottom-enter-active, .from-bottom-leave-active { transition: none; } } /*! _helpers.scss | Vuero | Css ninja 2020-2021 */ /* 1. Spacing helpers 2. Color helpers 3. Shadow helpers 4. Dark helpers 5. Radius helpers */ /* ========================================================================== 1. Spacing helpers ========================================================================== */ .m-t-5 { margin-top: 5px !important; } .p-t-5 { padding-top: 5px !important; } .m-b-5 { margin-bottom: 5px !important; } .p-b-5 { padding-bottom: 5px !important; } .m-l-5 { margin-left: 5px !important; } .p-l-5 { padding-left: 5px !important; } .m-r-5 { margin-right: 5px !important; } .p-r-5 { padding-right: 5px !important; } .m-t-10 { margin-top: 10px !important; } .p-t-10 { padding-top: 10px !important; } .m-b-10 { margin-bottom: 10px !important; } .p-b-10 { padding-bottom: 10px !important; } .m-l-10 { margin-left: 10px !important; } .p-l-10 { padding-left: 10px !important; } .m-r-10 { margin-right: 10px !important; } .p-r-10 { padding-right: 10px !important; } .m-t-15 { margin-top: 15px !important; } .p-t-15 { padding-top: 15px !important; } .m-b-15 { margin-bottom: 15px !important; } .p-b-15 { padding-bottom: 15px !important; } .m-l-15 { margin-left: 15px !important; } .p-l-15 { padding-left: 15px !important; } .m-r-15 { margin-right: 15px !important; } .p-r-15 { padding-right: 15px !important; } .m-t-20 { margin-top: 20px !important; } .p-t-20 { padding-top: 20px !important; } .m-b-20 { margin-bottom: 20px !important; } .p-b-20 { padding-bottom: 20px !important; } .m-l-20 { margin-left: 20px !important; } .p-l-20 { padding-left: 20px !important; } .m-r-20 { margin-right: 20px !important; } .p-r-20 { padding-right: 20px !important; } .m-t-25 { margin-top: 25px !important; } .p-t-25 { padding-top: 25px !important; } .m-b-25 { margin-bottom: 25px !important; } .p-b-25 { padding-bottom: 25px !important; } .m-l-25 { margin-left: 25px !important; } .p-l-25 { padding-left: 25px !important; } .m-r-25 { margin-right: 25px !important; } .p-r-25 { padding-right: 25px !important; } .m-t-30 { margin-top: 30px !important; } .p-t-30 { padding-top: 30px !important; } .m-b-30 { margin-bottom: 30px !important; } .p-b-30 { padding-bottom: 30px !important; } .m-l-30 { margin-left: 30px !important; } .p-l-30 { padding-left: 30px !important; } .m-r-30 { margin-right: 30px !important; } .p-r-30 { padding-right: 30px !important; } .m-t-35 { margin-top: 35px !important; } .p-t-35 { padding-top: 35px !important; } .m-b-35 { margin-bottom: 35px !important; } .p-b-35 { padding-bottom: 35px !important; } .m-l-35 { margin-left: 35px !important; } .p-l-35 { padding-left: 35px !important; } .m-r-35 { margin-right: 35px !important; } .p-r-35 { padding-right: 35px !important; } .m-t-40 { margin-top: 40px !important; } .p-t-40 { padding-top: 40px !important; } .m-b-40 { margin-bottom: 40px !important; } .p-b-40 { padding-bottom: 40px !important; } .m-l-40 { margin-left: 40px !important; } .p-l-40 { padding-left: 40px !important; } .m-r-40 { margin-right: 40px !important; } .p-r-40 { padding-right: 40px !important; } .m-t-45 { margin-top: 45px !important; } .p-t-45 { padding-top: 45px !important; } .m-b-45 { margin-bottom: 45px !important; } .p-b-45 { padding-bottom: 45px !important; } .m-l-45 { margin-left: 45px !important; } .p-l-45 { padding-left: 45px !important; } .m-r-45 { margin-right: 45px !important; } .p-r-45 { padding-right: 45px !important; } .m-t-50 { margin-top: 50px !important; } .p-t-50 { padding-top: 50px !important; } .m-b-50 { margin-bottom: 50px !important; } .p-b-50 { padding-bottom: 50px !important; } .m-l-50 { margin-left: 50px !important; } .p-l-50 { padding-left: 50px !important; } .m-r-50 { margin-right: 50px !important; } .p-r-50 { padding-right: 50px !important; } .m-t-60 { margin-top: 60px !important; } .p-t-60 { padding-top: 60px !important; } .m-b-60 { margin-bottom: 60px !important; } .p-b-60 { padding-bottom: 60px !important; } .m-l-60 { margin-left: 60px !important; } .p-l-60 { padding-left: 60px !important; } .m-r-60 { margin-right: 60px !important; } .p-r-60 { padding-right: 60px !important; } .m-t-70 { margin-top: 70px !important; } .p-t-70 { padding-top: 70px !important; } .m-b-70 { margin-bottom: 70px !important; } .p-b-70 { padding-bottom: 70px !important; } .m-l-70 { margin-left: 70px !important; } .p-l-70 { padding-left: 70px !important; } .m-r-70 { margin-right: 70px !important; } .p-r-70 { padding-right: 70px !important; } .m-t-80 { margin-top: 80px !important; } .p-t-80 { padding-top: 80px !important; } .m-b-80 { margin-bottom: 80px !important; } .p-b-80 { padding-bottom: 80px !important; } .m-l-80 { margin-left: 80px !important; } .p-l-80 { padding-left: 80px !important; } .m-r-80 { margin-right: 80px !important; } .p-r-80 { padding-right: 80px !important; } .m-t-90 { margin-top: 90px !important; } .p-t-90 { padding-top: 90px !important; } .m-b-90 { margin-bottom: 90px !important; } .p-b-90 { padding-bottom: 90px !important; } .m-l-90 { margin-left: 90px !important; } .p-l-90 { padding-left: 90px !important; } .m-r-90 { margin-right: 90px !important; } .p-r-90 { padding-right: 90px !important; } .m-t-100 { margin-top: 100px !important; } .p-t-100 { padding-top: 100px !important; } .m-b-100 { margin-bottom: 100px !important; } .p-b-100 { padding-bottom: 100px !important; } .m-l-100 { margin-left: 100px !important; } .p-l-100 { padding-left: 100px !important; } .m-r-100 { margin-right: 100px !important; } .p-r-100 { padding-right: 100px !important; } .no-padding-all { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .no-margin-all { margin: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } .has-fullheight { height: 100%; } .has-fullwidth { width: 100%; } .no-scroll { overflow: hidden !important; } .has-help-cursor { cursor: help; } /* ========================================================================== 2. Color helpers ========================================================================== */ .has-text-secondary { color: var(--secondary) !important; } .has-background-secondary { background-color: var(--secondary) !important; } .has-light-shadow { box-shadow: var(--light-box-shadow); } .has-light-shadow.has-light-border { border: 1px solid var(--fade-grey-dark-3); } /* ========================================================================== 4. Dark helpers ========================================================================== */ .is-dark .is-dark-card-bordered, .is-dark .is-dark-bordered-12 { border-color: var(--dark-sidebar-light-12) !important; } .is-dark .is-dark-primary { color: var(--primary) !important; } .is-dark .is-dark-primary-hover:hover { color: var(--primary) !important; } .is-dark .is-dark-bg-1 { background: var(--dark-sidebar-light-1) !important; } .is-dark .is-dark-bg-2 { background: var(--dark-sidebar-light-2) !important; } .is-dark .is-dark-bg-3 { background: var(--dark-sidebar-light-3) !important; } .is-dark .is-dark-bg-4 { background: var(--dark-sidebar-light-4) !important; } .is-dark .is-dark-bg-5 { background: var(--dark-sidebar-light-5) !important; } .is-dark .is-dark-bg-6 { background: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 4. Radius helpers ========================================================================== */ .radius-5 { border-radius: 0.5rem; } .radius-75 { border-radius: 0.75rem; } .radius-full { border-radius: var(--radius-rounded); } /* ========================================================================== 5. Size helpers ========================================================================== */ .max-w-540 { max-width: 540px; } .has-cursor-pointer { cursor: pointer; } /*! _layout.scss | Vuero | Css ninja 2020-2021 */ /* 1. App Layout 2. View Wrapper 3. Page Content 4. Page Title / Toolbar 5. Minimal Wrapper 6. Circular Menu 7. Circular Menu Dark mode 8. Media Queries */ /* ========================================================================== 1. App layout ========================================================================== */ body { background: var(--body-color); background: var(--background-grey); } body.opened { background: var(--white); } body.is-fixed { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } body.is-curved { background: #f2f2f2; } .app-overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: black; opacity: 0; z-index: -1; transition: opacity 0.3s; } .app-overlay.is-active { opacity: 0.8; z-index: 9999; } .overlay-highlight { position: relative; z-index: 99999 !important; } /* ========================================================================== 2. View Wrapper ========================================================================== */ .view-wrapper.has-top-nav { margin-left: 0 !important; width: 100% !important; padding-top: 1px; } .view-wrapper.has-top-nav .is-stuck { position: fixed; top: 78px; left: 0; margin-left: 0; border-left: 0 !important; width: 100%; z-index: 14; } .view-wrapper.has-top-nav .is-stuck.stuck-header { padding-right: 20px !important; } .view-wrapper.has-top-nav .is-stuck.stuck-header .form-head-inner, .view-wrapper.has-top-nav .is-stuck.stuck-header .form-header-inner { max-width: 1240px; margin: 0 auto; } .view-wrapper.has-top-nav .page-title { display: none; } .view-wrapper.has-top-nav .has-navbar-spacing { margin-top: -20px; } .view-wrapper.has-top-nav .is-navbar-md { margin-top: 90px; } .view-wrapper.has-top-nav .is-navbar-lg { margin-top: 110px; } .view-wrapper.has-top-nav .is-navbar-xl { margin-top: 130px; } .view-wrapper { position: relative; height: 100%; min-height: 100vh; width: calc(100% - 80px); padding: 0 0 60px 0; margin-left: 80px; background: var(--background-grey); transition: all 0.3s; } .view-wrapper.is-pushed-full { margin-left: 320px; width: calc(100% - 320px); } .view-wrapper.is-pushed-full .is-stuck { margin-left: 320px; width: calc(100% - 320px); } .view-wrapper.is-pushed-messages { margin-left: 160px !important; width: calc(100% - 160px) !important; } .view-wrapper .is-stuck { position: fixed; top: 0; left: 0; margin-left: 80px; width: calc(100% - 80px); z-index: 14; } /* ========================================================================== 3. Page Content ========================================================================== */ .page-content-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } .page-content-wrapper .page-content { padding: 0 40px; } .page-content-wrapper .page-content.is-relative { position: relative; } .page-content-wrapper .page-content.kanban-content { padding: 0 20px; } .page-content-wrapper .page-content.chat-content { padding: 0 40px; } .page-content-wrapper .page-content.card-content { padding: 0 20px; } .page-content-wrapper .page-content.waterfall-content { overflow: hidden; } .page-content-wrapper .page-content.projects-content { padding: 0 40px; } /* ========================================================================== 4. Page Title / Toolbar ========================================================================== */ .is-navbar .page-title { display: none; margin-bottom: 0; } .page-title { position: relative; height: 60px; margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: center; z-index: 10; } .page-title .title-wrap { margin-left: 1rem; } .page-title .title-wrap h1 { text-align: left; margin-bottom: 0; } .page-title .title-wrap p { line-height: 1; color: var(--light-text); font-size: 1.1rem; } .toolbar { position: relative; display: flex; align-items: center; z-index: 1; } .toolbar .control { min-width: 280px; margin-right: 1rem; } .toolbar .dark-mode { transform: scale(0.55); } .toolbar .toolbar-notifications { margin: 0 4px; } .toolbar .toolbar-notifications .dropdown:hover .is-trigger { background: var(--white); border-color: var(--fade-grey); border-radius: var(--radius-rounded); box-shadow: var(--light-box-shadow); } .toolbar .toolbar-notifications .dropdown .is-trigger { position: relative; height: 34px; width: 34px; } .toolbar .toolbar-notifications .dropdown .is-trigger .new-indicator { position: absolute; top: 1px; right: 1px; display: block; width: 8px; height: 8px; border-radius: var(--radius-rounded); background: var(--danger); } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content { top: 2.5rem; line-height: 1.5; color: var(--dark-text); width: 20rem; background: var(--white); border-radius: 5px; box-shadow: var(--light-box-shadow); padding-top: 0; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 0.01rem solid var(--light-grey); margin-bottom: 0; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .heading .heading-left h6 { font-size: 0.8rem; font-weight: 500; color: var(--light-text); line-height: 1.6; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .heading .heading-right .notification-link { margin: 0.4rem 0; color: var(--primary); font-weight: 500; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list { list-style-type: none; padding: 0.5rem 1rem; margin: 0; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item { display: flex; padding: 0.65rem 0; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item .img-left img { display: inline-block; vertical-align: middle; height: 2.25rem; width: 2.25rem; margin: 0 0.5rem 0 0; border-radius: var(--radius-rounded); max-width: 100%; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item .user-content { text-align: left; font-family: var(--font); } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item .user-content .user-info { color: var(--dark-text); font-size: 0.95rem; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item .user-content .user-info span { font-weight: 500; } .toolbar .toolbar-notifications .dropdown .dropdown-menu .dropdown-content .notification-list .notification-item .user-content .time { margin: 0; font-size: 0.85rem; color: var(--light-text); } .toolbar .toolbar-link { display: flex; justify-content: center; align-items: center; height: 34px; width: 34px; border-radius: var(--radius-rounded); margin: 0 4px; transition: all 0.3s; } .toolbar .toolbar-link:hover { background: var(--white); border-color: var(--fade-grey); box-shadow: var(--light-box-shadow); } .toolbar .toolbar-link svg { height: 18px; width: 18px; stroke-width: 1.6px; color: var(--light-text); transition: stroke 0.3s; } .toolbar .toolbar-link img { display: block; height: 24px; width: 24px; min-width: 24px; border-radius: var(--radius-rounded); } /* ========================================================================== 5. Minimal Wrapper ========================================================================== */ .minimal-wrapper { position: relative; width: 100%; min-height: 100vh; background: var(--lighter-grey); transition: all 0.3s; } .minimal-wrapper.light { background: var(--white); } .minimal-wrapper.lighter { background: var(--smoke-white); } .minimal-wrapper.darker { background: var(--background-grey); } .minimal-wrapper .minimal-wrap { min-height: calc(100vh - 60px); } /* ========================================================================== 6. Circular Menu ========================================================================== */ .circular-menu { position: fixed; top: 0.6em; right: 1em; z-index: 70; transform: translateY(-80px); pointer-events: none; transition: transform 0.3s; } .circular-menu.is-active { pointer-events: all; transform: translateY(0); } .circular-menu.active::after { transform: scale3d(5.5, 5.5, 1); transition-timing-function: cubic-bezier(0.68, 1.55, 0.265, 1); } .circular-menu.active .floating-btn { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); } .circular-menu.active .floating-btn i:first-child { display: none; } .circular-menu.active .floating-btn i:nth-child(2) { display: block; } .circular-menu.active .menu-item { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .circular-menu.active .menu-item:nth-child(1) { transform: translate3d(-7em, -0.5em, 0); } .circular-menu.active .menu-item:nth-child(2) { transform: translate3d(-6.25em, 3.25em, 0); } .circular-menu.active .menu-item:nth-child(3) { transform: translate3d(-3.45em, 6.25em, 0); } .circular-menu.active .menu-item:nth-child(4) { transform: translate3d(0.5em, 7em, 0); } .circular-menu::after { display: block; content: " "; width: 3.5em; height: 3.5em; border-radius: var(--radius-rounded); position: absolute; top: 0; right: 0; z-index: -2; background-color: var(--primary-dark-5); box-shadow: var(--primary-box-shadow); transition: all 0.3s ease; } .circular-menu .floating-btn { width: 3.5em; height: 3.5em; border-radius: var(--radius-rounded); background-color: var(--primary-light-3); box-shadow: var(--primary-box-shadow); color: var(--smoke-white); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: 0; } .circular-menu .floating-btn i { font-size: 0.9rem; transition: transform 0.2s; } .circular-menu .floating-btn i:first-child { display: block; } .circular-menu .floating-btn i:nth-child(2) { display: none; } .circular-menu .items-wrapper { padding: 0; margin: 0; } .circular-menu .menu-item { position: absolute; top: 0.2em; right: 0.2em; z-index: -1; display: block; text-decoration: none; color: white; font-size: 1em; width: 3em; height: 3em; border-radius: var(--radius-rounded); text-align: center; line-height: 3; background-color: rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, background-color 0.2s ease; } .circular-menu .menu-item:hover { background-color: rgba(0, 0, 0, 0.3); } .circular-menu .menu-item.is-flex { display: flex; align-items: center; justify-content: center; } .circular-menu .menu-item.is-flex .dark-mode { transform: scale(0.5); } .circular-menu .menu-item.is-flex > img { display: block; height: 24px; width: 24px; min-width: 24px; border-radius: var(--radius-rounded); } .circular-menu .menu-item.is-flex svg { height: 18px; width: 18px; color: var(--smoke-white); stroke-width: 1.6px; } /* ========================================================================== 7. Circular Menu Dark Mode ========================================================================== */ .is-dark .circular-menu::after { background: var(--dark-sidebar-dark-2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3) !important; } .is-dark .circular-menu.active .floating-btn { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3) !important; } .is-dark .circular-menu .floating-btn { background: var(--dark-sidebar-light-2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3) !important; } /* ========================================================================== 8. Media Queries ========================================================================== */ @media (max-width: 767px) { .view-wrapper.has-top-nav .is-navbar-md, .view-wrapper.has-top-nav .is-navbar-lg, .view-wrapper.has-top-nav .is-navbar-xl { margin-top: 0; } .view-wrapper.has-top-nav .page-title { display: flex !important; } .page-title .toolbar .control { display: none; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .view-wrapper.has-top-nav .is-navbar-md, .view-wrapper.has-top-nav .is-navbar-lg, .view-wrapper.has-top-nav .is-navbar-xl { margin-top: 0; } .view-wrapper.has-top-nav .page-title { display: flex !important; } .page-content-wrapper .page-content { padding: 0; } .page-title .title-wrap { margin-left: 0; } } /*! _utilities.scss | Vuero | Css ninja 2020-2021 */ /* 1. Titles 2. Divider 3. Helpers 4. Hamburger 5. Tooltips 6. Alertify js 7. Alertify js Dark mode 8. Divider alt 9. Text tips 10. Text tips Dark mode 11. Hopscotch 12. Demo toggler 13. Background images 14. Dark mode images 15. Demo spacer 16. Simplebar 17. Back to top button */ /* ========================================================================== 1. Titles ========================================================================== */ .title.light-mb, .subtitle.light-mb { margin-bottom: 10px; } .title.no-mb, .subtitle.no-mb { margin-bottom: 0; } .title.has-margin-top, .subtitle.has-margin-top { margin-top: 20px; } .title.has-margin-top-lg, .subtitle.has-margin-top-lg { margin-top: 50px; } .title.is-purple, .subtitle.is-purple { color: var(--primary); } .title.is-light, .subtitle.is-light { color: var(--white); } var { font-style: inherit; } .has-text-centered { text-align: center; } /* ========================================================================== 2. Divider ========================================================================== */ .divider-container { max-width: 640px; margin: 0 auto; } .divider-container .divider { text-align: center; margin: 1.5em auto 1em auto; width: 100%; position: relative; } .divider-container .divider span { display: inline-block; margin-top: 1px; font-size: 1rem; text-transform: none; color: var(--primary-grey); } .divider-container .divider span::before, .divider-container .divider span::after { width: 36%; display: block; position: absolute; left: 0; top: 0.9em; height: 1px; content: " "; border-top: 1px solid var(--primary-grey); } .divider-container .divider span::after { right: 0; left: auto; } @media (max-width: 768px) { .divider span::before, .divider span::after { width: 22% !important; } } /* ========================================================================== 3. Helpers ========================================================================== */ .is-flex-wrapped { flex-wrap: wrap !important; } .is-hidden { display: none !important; } .is-vhidden { visibility: hidden !important; } .no-click { pointer-events: none !important; } .is-disabled { pointer-events: none; opacity: 0.4; cursor: default !important; } .ml-auto { margin-left: auto !important; } .no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } .no-mb { margin-bottom: 0 !important; } .mb-20 { margin-bottom: 20px; } .is-green { color: var(--success); } .is-purple { color: var(--primary); } .has-slimscroll { overflow-y: auto; overflow-x: hidden; } .has-slimscroll::-webkit-scrollbar { width: 6px !important; } .has-slimscroll::-webkit-scrollbar-thumb { border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; } .has-slimscroll-sm::-webkit-scrollbar { width: 3px !important; } .has-slimscroll-sm::-webkit-scrollbar-thumb { border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; } .dark-text { color: var(--dark-text); } .light-text { color: var(--light-text); } .success-text { color: var(--success); } .info-text { color: var(--info); } .warning-text { color: var(--warning); } .danger-text { color: var(--danger); } .inverted-text { color: var(--smoke-white); } /* ========================================================================== 4. Hamburger ========================================================================== */ .menu-toggle { font-size: 20px; color: #666; text-align: center; background: transparent; display: block; width: 26px; height: 26px; cursor: pointer; padding: 0; transition: opacity 0.4s; opacity: 1; position: relative; } .menu-toggle.has-chevron .icon-box-toggle.active .icon-line-top { width: 13px !important; top: 17px !important; } .menu-toggle.has-chevron .icon-box-toggle.active .icon-line-bottom { width: 13px !important; top: 9px !important; } .menu-toggle .icon-box-toggle { background: transparent; position: relative; display: block; width: 30px; height: 30px; } .menu-toggle .icon-box-toggle.active > span.rotate { -webkit-transform: rotate(90deg); -moz-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); -o-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); } .menu-toggle .icon-box-toggle.active > span > i.icon-line-center { visibility: hidden; width: 1px; height: 3px; left: 70%; } .menu-toggle .icon-box-toggle.active > span > i.icon-line-bottom { margin: -2px 0 0 -10px; left: 50%; top: 12px; -webkit-transform: rotate(135deg); -moz-transform: translate(0, 0) rotate(135deg); -ms-transform: translate(0, 0) rotate(135deg); -o-transform: translate(0, 0) rotate(135deg); transform: translate(0, 0) rotate(135deg); } .menu-toggle .icon-box-toggle.active > span > i.icon-line-top { margin: -2px 0 0 -10px; left: 50%; top: 12px; -webkit-transform: rotate(45deg); -moz-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -o-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); } .menu-toggle .icon-line-center { position: absolute; width: 12px; height: 2px; background: var(--primary); margin: -1px 0 0 -10px; left: 50%; top: 12px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .menu-toggle .icon-line-top { position: absolute; width: 20px; height: 2px; background: var(--primary); margin: -3px 0 0 -10px; left: 50%; top: 6px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .menu-toggle .icon-line-bottom { position: absolute; width: 20px; height: 2px; background: var(--primary); margin: 2px 0 0 -10px; left: 50%; top: 17px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } /* ========================================================================== 5. Tooltips ========================================================================== */ /* ========================================================================== 6. Alertify js ========================================================================== */ .alertify .ajs-dialog { top: 50%; transform: translateY(-50%); margin: auto; border-radius: 8px !important; } .ajs-dimmer { background-color: var(--dark-sidebar) !important; } .ajs-header { font-weight: 600 !important; font-family: var(--font-alt) !important; border-radius: 8px 8px 0 0 !important; } .ajs-footer { border-radius: 0 0 6px 6px !important; border: none !important; background: transparent !important; } .ajs-content { padding: 16px 0 !important; font-family: var(--font) !important; } .ajs-content b { font-weight: 500 !important; color: var(--primary) !important; } .ajs-buttons { padding: 6px 10px; } .ajs-close { outline: none !important; } .ajs-ok { padding: 8px 22px 8px 22px; height: 33px; min-width: 82px !important; line-height: 0; text-transform: capitalize !important; font-weight: 500 !important; font-size: 0.75rem; background: var(--primary) !important; color: var(--white) !important; border: 1px solid var(--primary); border-radius: var(--radius-large); transition: all 0.3s; cursor: pointer; outline: none !important; } .ajs-ok:hover { box-shadow: var(--primary-box-shadow); } .ajs-cancel { padding: 8px 22px 8px 22px; height: 33px; min-width: 82px !important; line-height: 0; text-transform: capitalize !important; font-weight: 500 !important; font-size: 0.75rem; background: var(--white) !important; color: var(--primary) !important; border: 1px solid var(--primary) !important; border-radius: var(--radius-large); transition: all 0.3s; cursor: pointer; outline: none !important; } /* ========================================================================== 7. Alertify js Dark mode ========================================================================== */ .is-dark .ajs-dialog { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-2) !important; } .is-dark .ajs-header { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-6) !important; color: var(--primary-grey) !important; } .is-dark .ajs-content { color: var(--dark-dark-text) !important; } .is-dark .ajs-content span { color: var(--dark-dark-text) !important; } .is-dark .ajs-content span b { color: var(--primary) !important; } .is-dark .ajs-footer { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-6) !important; } .is-dark .ajs-footer .ajs-ok { background: var(--primary) !important; } .is-dark .ajs-footer .ajs-cancel { background: var(--dark-sidebar-light-2) !important; border-color: var(--dark-sidebar-light-2) !important; color: var(--muted-grey) !important; } /* ========================================================================== 8. Divider alt ========================================================================== */ .divider { display: flex; color: var(--muted-grey); outline: none !important; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; } .divider::before, .divider::after { content: ""; flex: 1; } .divider.line { align-items: center; margin: 1em -1em; } .divider.line::before, .divider.line::after { height: 1px; margin: 0 1em; } .divider.one-line::before, .divider.one-line::after { background: var(--fade-grey-dark-5); } /* ========================================================================== 9. Text tips ========================================================================== */ .has-text-tip, .has-small-text-tip { position: relative; cursor: pointer; } .text-tooltip { position: absolute; top: 100%; left: 0; width: 100%; z-index: 999; } .text-tooltip .tooltip-content { position: relative; width: 100%; height: 100%; padding: 10px 16px; background: var(--white); color: var(--dark-text); border: 1px solid var(--primary-grey); box-shadow: var(--light-box-shadow); border-radius: var(--radius-large); font-size: 0.9rem; } /* ========================================================================== 10. Text tips Dark mode ========================================================================== */ .is-dark .text-tooltip .tooltip-content { background: var(--dark-sidebar); border-color: var(--dark-sidebar); color: var(--primary-grey); } /* ========================================================================== 11. Hopscotch ========================================================================== */ .app-wrapper.is-pushed-bottom { transform: translateY(50px); } .hopscotch-bubble .hopscotch-bubble-container .hopscotch-bubble-number { padding: 0; background: var(--primary); border-radius: var(--radius-rounded); box-shadow: var(--primary-box-shadow); font-size: 0.8rem; } .hopscotch-bubble .hopscotch-bubble-container .hopscotcv-actions .hopscotch-nav-button { background: var(--white); text-shadow: none; color: var(--primary); border-color: var(--primary); font-weight: 500; height: 32px; min-width: 80px; border-radius: 100px; transition: all 0.3s; } .hopscotch-bubble .hopscotch-bubble-container .hopscotcv-actions .hopscotch-nav-button:hover { background: var(--primary); color: var(--smoke-white); } /* ========================================================================== 12. Demo toggler ========================================================================== */ .demo-wrapper { position: fixed; bottom: -50px; right: -50px; height: 140px; width: 140px; background: transparent; border-radius: var(--radius-rounded); transform: scale(0.4); transition: all 0.3s; } .demo-wrapper:hover { background: var(--white); transform: scale(1); } .demo-wrapper:hover .form-switch { opacity: 1 !important; pointer-events: all !important; } .demo-wrapper .inner { position: relative; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .demo-wrapper .inner .form-switch { position: relative; top: -10px; left: -10px; display: block; transition: all 0.3s; opacity: 0; pointer-events: none; } /* ========================================================================== 13. Background images ========================================================================== */ .has-background-image { background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; background-color: rgba(0, 0, 0, 0.1); } .has-background-image.is-top { background-position: top !important; } .has-background-image.is-bottom { background-position: bottom !important; } /* ========================================================================== 14. Dark mode images ========================================================================== */ .light-image { display: inline-block !important; } .dark-image { display: none !important; } .light-image-block { display: block !important; } .dark-image-block { display: none !important; } .is-dark .light-image { display: none !important; } .is-dark .dark-image { display: inline-block !important; } .is-dark .light-image-block { display: none !important; } .is-dark .dark-image-block { display: block !important; } /* ========================================================================== 15. Demo Spacer ========================================================================== */ .demo-spacer { width: 100%; height: 2px; padding: 80px 0; } /* ========================================================================== 16. Simplebar ========================================================================== */ .simplebar-scrollbar::before { background: rgba(0, 0, 0, 0.2) !important; } /* ========================================================================== 17. Back to top button ========================================================================== */ #backtotop { position: fixed; right: 0; opacity: 0; visibility: hidden; bottom: 25px; margin: 0 25px 0 0; z-index: 9999; transform: scale(0.7); transition: all 0.5s; } #backtotop.visible { opacity: 1; visibility: visible; transform: scale(1); } #backtotop.visible a:hover { outline: none; opacity: 0.9; background: var(--primary); color: var(--white); } #backtotop a { justify-content: center; align-items: center; text-decoration: none; border: 0 none; display: block; width: 46px; height: 46px; background-color: var(--medium-grey); opacity: 1; transition: all 0.3s; border-radius: var(--radius-rounded); text-align: center; font-size: 20px; outline: none; color: var(--dark-text); } #backtotop a i { position: relative; top: 6px; } /*! _buttons.scss | Vuero | Css ninja 2020-2021 */ /* 1. H Action 2. H Action Dark mode 3. H Button 4. H Button Dark mode */ /* ========================================================================== 1. V Action ========================================================================== */ .button { font-family: var(--font); transition: all 0.3s; } .button.v-action { padding: 8px 16px; font-weight: 500; font-size: 0.9rem; line-height: 0; border-radius: 3px; background: var(--white); color: var(--dark-text); border: 1px solid var(--placeholder); transition: all 0.3s; cursor: pointer; box-shadow: none !important; } .button.v-action.is-rounded { border-radius: 500px; } .button.v-action.is-hoverable:hover { border-color: var(--primary); background: var(--primary); color: var(--white); box-shadow: var(--primary-box-shadow); } .button.v-action.is-grey { background: var(--fade-grey-light-2); border-color: var(--fade-grey-light-2); color: var(--muted-grey); } .button.v-action.is-active { background: var(--primary); border-color: var(--primary); color: var(--smoke-white); box-shadow: var(--primary-box-shadow); } /* ========================================================================== 2. V Action Dark Mode ========================================================================== */ .is-dark .button.v-action { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .button.v-action:hover { background: var(--primary); border-color: var(--primary); color: var(--smoke-white); } .is-dark .button.v-action.is-hoverable:hover { border-color: var(--primary) !important; background: var(--primary) !important; box-shadow: var(--primary-box-shadow) !important; } /* ========================================================================== 3. V Button ========================================================================== */ .button.is-circle { border-radius: var(--radius-rounded); } .button.v-button { padding: 8px 22px 8px 22px; height: 38px; line-height: 1.1; font-size: 0.95rem; font-family: var(--font); transition: all 0.3s; } .button.v-button:not([disabled]) { cursor: pointer; } .button.v-button:active, .button.v-button:focus { box-shadow: none !important; outline: none !important; border-color: var(--fade-grey-dark-2); } .button.v-button.is-bold { font-weight: 500; } .button.v-button.is-primary.is-raised:hover { opacity: 0.9; box-shadow: var(--primary-box-shadow); } .button.v-button.is-primary.is-elevated { box-shadow: var(--primary-box-shadow); } .button.v-button.is-success.is-raised:hover { opacity: 0.9; box-shadow: var(--success-box-shadow); } .button.v-button.is-success.is-elevated { box-shadow: var(--success-box-shadow); } .button.v-button.is-info.is-raised:hover { opacity: 0.9; box-shadow: var(--info-box-shadow); } .button.v-button.is-info.is-elevated { box-shadow: var(--info-box-shadow); } .button.v-button.is-warning.is-raised:hover { opacity: 0.9; box-shadow: var(--warning-box-shadow); } .button.v-button.is-warning.is-elevated { box-shadow: var(--warning-box-shadow); } .button.v-button.is-danger.is-raised:hover { opacity: 0.9; box-shadow: var(--danger-box-shadow); } .button.v-button.is-danger.is-elevated { box-shadow: var(--danger-box-shadow); } .button.v-button.is-lower { text-transform: none !important; font-size: 0.9rem; } .button.v-button.is-big { height: 40px; } .button.v-button.is-huge { height: 50px; width: 220px; } .button.simple-action { height: 32px; padding: 0 24px; line-height: 0; border-radius: 100px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s; } .button.simple-action.is-purple { background: var(--primary); border-color: var(--primary); color: var(--smoke-white); } .button.simple-action.is-purple:hover { opacity: 0.95; box-shadow: var(--primary-box-shadow); color: var(--smoke-white) !important; } .button.simple-action.has-icon svg { height: 16px; width: 16px; } .button.simple-action:hover { border-color: var(--primary); color: var(--primary); } .button.simple-action svg { height: 18px; width: 18px; } .button .icon svg { height: 14px; width: 14px; } /* ========================================================================== 4. V Button Dark mode ========================================================================== */ .is-dark .v-button:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger):not(.is-light):not(.is-white) { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .v-button:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger):not(.is-light):not(.is-white):hover { border-color: var(--dark-sidebar-light-18); } .is-dark .v-button.is-primary { border-color: var(--primary); background: var(--primary); } .is-dark .v-button.is-primary.is-raised:hover { box-shadow: var(--primary-box-shadow) !important; } .is-dark .v-button.is-primary.is-elevated { box-shadow: var(--primary-box-shadow) !important; } .is-dark .v-button.is-primary.is-outlined { background: transparent; border-color: var(--primary) !important; color: var(--primary); } .is-dark .v-button.is-primary.is-outlined:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } .is-dark .v-button.is-primary.is-light { background: var(--primary-light-25) !important; color: var(--primary-dark-15); } .is-dark .v-button.is-white { background: var(--dark-sidebar-light-6) !important; border-color: var(--muted-grey) !important; color: var(--muted-grey) !important; } .is-dark .v-button.is-dark-outlined { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .v-button.is-dark-outlined:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .is-dark .button:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger):not(.is-light):not(.is-white) { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .button:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger):not(.is-light):not(.is-white):hover { border-color: var(--dark-sidebar-light-18); } .is-dark .button.is-primary { border-color: var(--primary); background: var(--primary); } .is-dark .button.is-white { background: var(--dark-sidebar-light-6) !important; border-color: var(--muted-grey) !important; color: var(--muted-grey) !important; } .is-dark .button.is-dark-outlined { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .button.is-dark-outlined:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .is-dark .button.v-action.is-active { background: var(--primary) !important; border-color: var(--primary) !important; box-shadow: var(--primary-box-shadow) !important; color: var(--smoke-white) !important; } /*! _blocks.scss | Vuero | Css ninja 2020-2021 */ /* 1. Media Flex 2. Media Flex Center 3. Flex Blocks Dark mode 4. Media Flex responsive modifiers */ /* ========================================================================== 1. Media Flex ========================================================================== */ .media-flex { display: flex; margin-bottom: 1rem; width: 100%; } .media-flex:last-child, .media-flex.no-margin { margin-bottom: 0; } .media-flex .flex-meta { margin-left: 12px; line-height: 1.3; } .media-flex .flex-meta.is-lighter span:first-child, .media-flex .flex-meta.is-lighter > a:first-child { font-weight: 400; } .media-flex .flex-meta.is-light span:first-child, .media-flex .flex-meta.is-light > a:first-child { font-weight: 500; } .media-flex .flex-meta span, .media-flex .flex-meta > a { display: block; } .media-flex .flex-meta span:first-child, .media-flex .flex-meta > a:first-child { font-family: var(--font-alt); color: var(--dark-text); font-weight: 600; } .media-flex .flex-meta span:nth-child(2), .media-flex .flex-meta > a:nth-child(2) { font-family: var(--font); color: var(--light-text); font-size: 0.9rem; } .media-flex .flex-meta a:hover { color: var(--primary); } .media-flex .flex-end { margin-left: auto; display: flex; justify-content: flex-end; } .media-flex .flex-end .end-action { margin-left: 1rem; } /* ========================================================================== 2. Media Flex Center ========================================================================== */ .media-flex-center { display: flex; align-items: center; margin-bottom: 1rem; width: 100%; } .media-flex-center:last-child, .media-flex-center.no-margin { margin-bottom: 0; } .media-flex-center .flex-meta { margin-left: 12px; line-height: 1.4; } .media-flex-center .flex-meta.is-lighter span:first-child, .media-flex-center .flex-meta.is-lighter > a:first-child { font-weight: 400; } .media-flex-center .flex-meta.is-light span:first-child, .media-flex-center .flex-meta.is-light > a:first-child { font-weight: 500; } .media-flex-center .flex-meta span, .media-flex-center .flex-meta > a { display: block; } .media-flex-center .flex-meta span:first-child, .media-flex-center .flex-meta > a:first-child { font-family: var(--font-alt); font-size: 0.95rem; color: var(--dark-text); font-weight: 600; } .media-flex-center .flex-meta span:nth-child(2), .media-flex-center .flex-meta > a:nth-child(2) { font-family: var(--font); color: var(--light-text); font-size: 0.9rem; } .media-flex-center .flex-meta a:hover { color: var(--primary); } .media-flex-center .flex-end { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; } .media-flex-center .flex-end .end-action { margin-left: 1rem; } /* ========================================================================== 3. Flex Blocks Dark mode ========================================================================== */ .is-dark .media-flex-center .flex-meta span:first-child, .is-dark .media-flex-center .flex-meta a:first-child, .is-dark .media-flex .flex-meta span:first-child, .is-dark .media-flex .flex-meta a:first-child { color: var(--dark-dark-text) !important; } .is-dark .media-flex-center .flex-meta a:hover, .is-dark .media-flex .flex-meta a:hover { color: var(--primary); } /* ========================================================================== 4. Media Flex responsive modifiers ========================================================================== */ @media only screen and (max-width: 767px) { .media-flex.is-responsive-mobile, .media-flex-center.is-responsive-mobile { flex-direction: column; text-align: center; } .media-flex.is-responsive-mobile .v-avatar, .media-flex.is-responsive-mobile .v-icon, .media-flex-center.is-responsive-mobile .v-avatar, .media-flex-center.is-responsive-mobile .v-icon { margin: 0 auto; } .media-flex.is-responsive-mobile .flex-meta, .media-flex-center.is-responsive-mobile .flex-meta { margin: 10px auto 0 auto; } .media-flex.is-responsive-mobile .flex-end, .media-flex-center.is-responsive-mobile .flex-end { margin: 10px auto; } .media-flex.is-responsive-mobile .flex-end .end-action, .media-flex-center.is-responsive-mobile .flex-end .end-action { margin-left: 0; } .media-flex.is-responsive-mobile .flex-end .button, .media-flex-center.is-responsive-mobile .flex-end .button { min-width: 140px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .media-flex.is-responsive-tablet-p, .media-flex-center.is-responsive-tablet-p { flex-direction: column; text-align: center; } .media-flex.is-responsive-tablet-p .v-avatar, .media-flex.is-responsive-tablet-p .v-icon, .media-flex-center.is-responsive-tablet-p .v-avatar, .media-flex-center.is-responsive-tablet-p .v-icon { margin: 0 auto; } .media-flex.is-responsive-tablet-p .flex-meta, .media-flex-center.is-responsive-tablet-p .flex-meta { margin: 10px auto 0 auto; } .media-flex.is-responsive-tablet-p .flex-end, .media-flex-center.is-responsive-tablet-p .flex-end { margin: 10px auto; } .media-flex.is-responsive-tablet-p .flex-end .end-action, .media-flex-center.is-responsive-tablet-p .flex-end .end-action { margin-left: 0; } .media-flex.is-responsive-tablet-p .flex-end .button, .media-flex-center.is-responsive-tablet-p .flex-end .button { min-width: 140px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .media-flex.is-responsive-tablet-l, .media-flex-center.is-responsive-tablet-l { flex-direction: column; text-align: center; } .media-flex.is-responsive-tablet-l .v-avatar, .media-flex.is-responsive-tablet-l .v-icon, .media-flex-center.is-responsive-tablet-l .v-avatar, .media-flex-center.is-responsive-tablet-l .v-icon { margin: 0 auto; } .media-flex.is-responsive-tablet-l .flex-meta, .media-flex-center.is-responsive-tablet-l .flex-meta { margin: 10px auto 0 auto; } .media-flex.is-responsive-tablet-l .flex-end, .media-flex-center.is-responsive-tablet-l .flex-end { margin: 10px auto; } .media-flex.is-responsive-tablet-l .flex-end .end-action, .media-flex-center.is-responsive-tablet-l .flex-end .end-action { margin-left: 0; } .media-flex.is-responsive-tablet-l .flex-end .button, .media-flex-center.is-responsive-tablet-l .flex-end .button { min-width: 140px; } } /*! _cards.scss | Vuero | Css ninja 2020-2021 */ /* 1. Simple Cards 2. Simple Cards Dark mode */ /* ========================================================================== 1. Simple Cards ========================================================================== */ .r-card { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 10px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .r-card.has-margin-bottom { margin-bottom: 1.5rem; } .r-card.is-flat { box-shadow: none; } .r-card.is-raised { box-shadow: var(--light-box-shadow); } .r-card.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .r-card.is-primary .title, .r-card.is-primary .subtitle, .r-card.is-primary h1, .r-card.is-primary h2, .r-card.is-primary h3, .r-card.is-primary h4, .r-card.is-primary p { color: var(--smoke-white) !important; } .r-card.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .r-card.is-secondary .title, .r-card.is-secondary .subtitle, .r-card.is-secondary h1, .r-card.is-secondary h2, .r-card.is-secondary h3, .r-card.is-secondary h4, .r-card.is-secondary p { color: var(--smoke-white) !important; } .r-card.is-info { background: var(--info) !important; border-color: var(--info) !important; } .r-card.is-info .title, .r-card.is-info .subtitle, .r-card.is-info h1, .r-card.is-info h2, .r-card.is-info h3, .r-card.is-info h4, .r-card.is-info p { color: var(--smoke-white) !important; } .r-card.is-success { background: var(--success) !important; border-color: var(--success) !important; } .r-card.is-success .title, .r-card.is-success .subtitle, .r-card.is-success h1, .r-card.is-success h2, .r-card.is-success h3, .r-card.is-success h4, .r-card.is-success p { color: var(--smoke-white) !important; } .r-card.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .r-card.is-warning .title, .r-card.is-warning .subtitle, .r-card.is-warning h1, .r-card.is-warning h2, .r-card.is-warning h3, .r-card.is-warning h4, .r-card.is-warning p { color: var(--smoke-white) !important; } .r-card.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .r-card.is-danger .title, .r-card.is-danger .subtitle, .r-card.is-danger h1, .r-card.is-danger h2, .r-card.is-danger h3, .r-card.is-danger h4, .r-card.is-danger p { color: var(--smoke-white) !important; } .r-card .card-head { display: flex; align-items: center; justify-content: space-between; } .r-card .card-head .left, .r-card .card-head .right { display: flex; align-items: center; } .r-card .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .r-card .card-head .right { justify-content: flex-end; } .r-card .card-inner { padding-top: 1.75rem; } .s-card { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .s-card.has-margin-bottom { margin-bottom: 1.5rem; } .s-card.is-flat { box-shadow: none; } .s-card.is-raised { box-shadow: var(--light-box-shadow); } .s-card.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .s-card.is-primary .title, .s-card.is-primary .subtitle, .s-card.is-primary h1, .s-card.is-primary h2, .s-card.is-primary h3, .s-card.is-primary h4, .s-card.is-primary p { color: var(--smoke-white) !important; } .s-card.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .s-card.is-secondary .title, .s-card.is-secondary .subtitle, .s-card.is-secondary h1, .s-card.is-secondary h2, .s-card.is-secondary h3, .s-card.is-secondary h4, .s-card.is-secondary p { color: var(--smoke-white) !important; } .s-card.is-info { background: var(--info) !important; border-color: var(--info) !important; } .s-card.is-info .title, .s-card.is-info .subtitle, .s-card.is-info h1, .s-card.is-info h2, .s-card.is-info h3, .s-card.is-info h4, .s-card.is-info p { color: var(--smoke-white) !important; } .s-card.is-success { background: var(--success) !important; border-color: var(--success) !important; } .s-card.is-success .title, .s-card.is-success .subtitle, .s-card.is-success h1, .s-card.is-success h2, .s-card.is-success h3, .s-card.is-success h4, .s-card.is-success p { color: var(--smoke-white) !important; } .s-card.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .s-card.is-warning .title, .s-card.is-warning .subtitle, .s-card.is-warning h1, .s-card.is-warning h2, .s-card.is-warning h3, .s-card.is-warning h4, .s-card.is-warning p { color: var(--smoke-white) !important; } .s-card.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .s-card.is-danger .title, .s-card.is-danger .subtitle, .s-card.is-danger h1, .s-card.is-danger h2, .s-card.is-danger h3, .s-card.is-danger h4, .s-card.is-danger p { color: var(--smoke-white) !important; } .s-card .card-head { display: flex; align-items: center; justify-content: space-between; } .s-card .card-head .left, .s-card .card-head .right { display: flex; align-items: center; } .s-card .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .s-card .card-head .right { justify-content: flex-end; } .s-card .card-inner { padding-top: 1.75rem; } .l-card { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .l-card.has-margin-bottom { margin-bottom: 1.5rem; } .l-card.is-flat { box-shadow: none; } .l-card.is-raised { box-shadow: var(--light-box-shadow); } .l-card.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .l-card.is-primary .title, .l-card.is-primary .subtitle, .l-card.is-primary h1, .l-card.is-primary h2, .l-card.is-primary h3, .l-card.is-primary h4, .l-card.is-primary p { color: var(--smoke-white) !important; } .l-card.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .l-card.is-secondary .title, .l-card.is-secondary .subtitle, .l-card.is-secondary h1, .l-card.is-secondary h2, .l-card.is-secondary h3, .l-card.is-secondary h4, .l-card.is-secondary p { color: var(--smoke-white) !important; } .l-card.is-info { background: var(--info) !important; border-color: var(--info) !important; } .l-card.is-info .title, .l-card.is-info .subtitle, .l-card.is-info h1, .l-card.is-info h2, .l-card.is-info h3, .l-card.is-info h4, .l-card.is-info p { color: var(--smoke-white) !important; } .l-card.is-success { background: var(--success) !important; border-color: var(--success) !important; } .l-card.is-success .title, .l-card.is-success .subtitle, .l-card.is-success h1, .l-card.is-success h2, .l-card.is-success h3, .l-card.is-success h4, .l-card.is-success p { color: var(--smoke-white) !important; } .l-card.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .l-card.is-warning .title, .l-card.is-warning .subtitle, .l-card.is-warning h1, .l-card.is-warning h2, .l-card.is-warning h3, .l-card.is-warning h4, .l-card.is-warning p { color: var(--smoke-white) !important; } .l-card.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .l-card.is-danger .title, .l-card.is-danger .subtitle, .l-card.is-danger h1, .l-card.is-danger h2, .l-card.is-danger h3, .l-card.is-danger h4, .l-card.is-danger p { color: var(--smoke-white) !important; } .l-card .card-head { display: flex; align-items: center; justify-content: space-between; } .l-card .card-head .left, .l-card .card-head .right { display: flex; align-items: center; } .l-card .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .l-card .card-head .right { justify-content: flex-end; } .l-card .card-inner { padding-top: 1.75rem; } /* ========================================================================== 2. Simple Cards Dark mode ========================================================================== */ .is-dark .r-card, .is-dark .s-card, .is-dark .l-card { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .r-card .v-avatar img, .is-dark .s-card .v-avatar img, .is-dark .l-card .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .r-card .avatar-stack .v-avatar, .is-dark .s-card .avatar-stack .v-avatar, .is-dark .l-card .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .r-card .avatar-stack .v-avatar .avatar.is-more .inner, .is-dark .s-card .avatar-stack .v-avatar .avatar.is-more .inner, .is-dark .l-card .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 3. Advanced Cards ========================================================================== */ .l-card-advanced { border-radius: 16px; } .r-card-advanced { border-radius: 10px; } .s-card-advanced { border-radius: var(--radius-large); } .r-card-advanced, .s-card-advanced, .l-card-advanced { flex: 1; display: inline-block; width: 100%; background-color: var(--white); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .r-card-advanced .card-head, .r-card-advanced .card-foot, .s-card-advanced .card-head, .s-card-advanced .card-foot, .l-card-advanced .card-head, .l-card-advanced .card-foot { padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; } .r-card-advanced .card-head .left, .r-card-advanced .card-foot .left, .s-card-advanced .card-head .left, .s-card-advanced .card-foot .left, .l-card-advanced .card-head .left, .l-card-advanced .card-foot .left { display: flex; align-items: center; } .r-card-advanced .card-head .right, .r-card-advanced .card-foot .right, .s-card-advanced .card-head .right, .s-card-advanced .card-foot .right, .l-card-advanced .card-head .right, .l-card-advanced .card-foot .right { display: flex; align-items: center; justify-content: flex-end; } .r-card-advanced .card-head, .s-card-advanced .card-head, .l-card-advanced .card-head { border-bottom: 1px solid var(--fade-grey-dark-3); } .r-card-advanced .card-foot, .s-card-advanced .card-foot, .l-card-advanced .card-foot { border-top: 1px solid var(--fade-grey-dark-3); } .r-card-advanced .card-body, .s-card-advanced .card-body, .l-card-advanced .card-body { padding: 20px; } /* ========================================================================== 4. Advanced Cards Dark mode ========================================================================== */ .is-dark .r-card-advanced, .is-dark .s-card-advanced, .is-dark .l-card-advanced { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .r-card-advanced .card-head, .is-dark .r-card-advanced .card-foot, .is-dark .s-card-advanced .card-head, .is-dark .s-card-advanced .card-foot, .is-dark .l-card-advanced .card-head, .is-dark .l-card-advanced .card-foot { border-color: var(--dark-sidebar-light-12); } .is-dark .r-card-advanced .v-avatar img, .is-dark .s-card-advanced .v-avatar img, .is-dark .l-card-advanced .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .r-card-advanced .avatar-stack .v-avatar, .is-dark .s-card-advanced .avatar-stack .v-avatar, .is-dark .l-card-advanced .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .r-card-advanced .avatar-stack .v-avatar .avatar.is-more .inner, .is-dark .s-card-advanced .avatar-stack .v-avatar .avatar.is-more .inner, .is-dark .l-card-advanced .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 5. Bulma Cards ========================================================================== */ .card.v-card { box-shadow: none; border-radius: var(--radius); border: 1px solid var(--fade-grey-dark-3); } .card.v-card .card-header { box-shadow: none; } .card.v-card .card-header .card-header-title { font-family: var(--font-alt); font-weight: 600; } .card.v-card .card-image img { object-fit: cover; } .card.v-card .card-footer a { font-family: var(--font); color: var(--light-text); } /* ========================================================================== 6. Bulma Cards Dark mode ========================================================================== */ .is-dark .card.v-card { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .card.v-card .card-header .card-header-title { color: var(--dark-dark-text); } .is-dark .card.v-card .card-footer { border-color: var(--dark-sidebar-light-12); } .is-dark .card.v-card .card-footer a { border-color: var(--dark-sidebar-light-12); } .is-dark .card.v-card .v-avatar .badge { border-color: var(--dark-sidebar-light-6); } /*! _content.scss | Vuero | Css ninja 2020-2021 */ /* 1. Content 2. Content Dark mode */ /* ========================================================================== 1. Content ========================================================================== */ .content ol, .content ul { color: var(--dark-text); font-family: var(--font); } .content ol.is-light, .content ul.is-light { color: var(--light-text); } .content blockquote { color: var(--light-text); } .content blockquote.is-primary { border-color: var(--primary); } .content blockquote.is-success { border-color: var(--success); } .content blockquote.is-info { border-color: var(--info); } .content blockquote.is-warning { border-color: var(--warning); } .content blockquote.is-danger { border-color: var(--danger); } .content table th { color: var(--dark-text); font-family: var(--font-alt); } .content table td { color: var(--light-text); } /* ========================================================================== 2. Content Dark mode ========================================================================== */ .is-dark .content ol:not(.is-light), .is-dark .content ul:not(.is-light) { color: var(--dark-dark-text); } .is-dark .content blockquote { background: var(--dark-sidebar-light-10); } .is-dark .content blockquote:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger) { border-color: var(--dark-sidebar-light-2); } .is-dark .content blockquote.is-primary { border-color: var(--primary); } .is-dark .content table th { color: var(--dark-dark-text); border-color: var(--dark-sidebar-light-14); } .is-dark .content table td { border-color: var(--dark-sidebar-light-14); } .is-dark .is-divider, .is-dark .is-divider-vertical { border-color: var(--dark-sidebar-light-14); } .is-dark .is-divider::before, .is-dark .is-divider-vertical::before { border-color: var(--dark-sidebar-light-14); } .is-dark .is-divider::after, .is-dark .is-divider-vertical::after { background: var(--dark-sidebar-light-6); } /*! _forms-page.scss | Vuero | Css ninja 2020-2021 */ /* 1. labels 2. Inputs and textareas 3. Radios 4. Fieldset | Field | Control 5. Fieldset | Field | Control Dark mode 6. Custom select 7. Autocomplete 8. Autocomplete Dark mode 9. Switch 10. Range input 11. File inputs 12. File inputs Dark mode 13. Filepond 14. Filepond Dark mode 15. Choices 16. Choices Dark mode */ /* ========================================================================== 1. Labels ========================================================================== */ .form-label { display: block; margin-bottom: 4px; font-size: 0.9rem; font-weight: 500; color: var(--dark-text); } .form-label.is-smaller { font-size: 0.8rem; font-weight: 400; } .form-label.is-narrow { margin-bottom: 0; } .sub-label { font-size: 0.8rem; color: var(--muted-grey); } label[for] { cursor: pointer; } /* ========================================================================== 2. Inputs and textareas ========================================================================== */ .input, .input:focus, .textarea, .textarea:focus { box-shadow: none; } .input { height: 38px; transition: all 0.3s; } .input:focus { border-color: var(--fade-grey-dark-4); box-shadow: var(--light-box-shadow); } .input:focus.is-primary-focus { border-color: var(--primary) !important; } .input:focus.is-success-focus { border-color: var(--success) !important; } .input:focus.is-info-focus { border-color: var(--info) !important; } .input:focus.is-warning-focus { border-color: var(--warning) !important; } .input:focus.is-danger-focus { border-color: var(--danger) !important; } .textarea { transition: all 0.3s; } .textarea:focus { border-color: var(--fade-grey-dark-4); box-shadow: var(--light-box-shadow); } .textarea:focus.is-primary-focus { border-color: var(--primary) !important; } .textarea:focus.is-success-focus { border-color: var(--success) !important; } .textarea:focus.is-info-focus { border-color: var(--info) !important; } .textarea:focus.is-warning-focus { border-color: var(--warning) !important; } .textarea:focus.is-danger-focus { border-color: var(--danger) !important; } /* ========================================================================== 3. Inputs and textareas dark-mode ========================================================================== */ .is-dark .input, .is-dark .textarea { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); color: var(--dark-dark-text); } .is-dark .input:hover, .is-dark .textarea:hover { border-color: var(--dark-sidebar-light-12); } .is-dark .input:focus, .is-dark .textarea:focus { border-color: var(--dark-sidebar-light-8); } .is-dark .input:focus + .form-icon svg, .is-dark .textarea:focus + .form-icon svg { color: var(--primary) !important; } .is-dark .input::-webkit-input-placeholder, .is-dark .textarea::-webkit-input-placeholder { color: var(--primary-grey-dark-30) !important; } .is-dark .input::-moz-placeholder, .is-dark .textarea::-moz-placeholder { color: var(--primary-grey-dark-30) !important; } .is-dark .input:-ms-input-placeholder, .is-dark .textarea:-ms-input-placeholder { color: var(--primary-grey-dark-30) !important; } .is-dark .input:-moz-placeholder, .is-dark .textarea:-moz-placeholder { color: var(--primary-grey-dark-30) !important; } .is-dark .input.is-primary-focus:focus, .is-dark .textarea.is-primary-focus:focus { border-color: var(--primary) !important; } /* ========================================================================== 3. Radios ========================================================================== */ .radio-list { padding: 6px 4px; } .radio-list li label { position: relative; display: block; } .radio-list li label input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer; } .radio-list li label input:checked + .k-radio .radio-knob { border-color: var(--primary); } .radio-list li label input:checked + .k-radio .radio-knob .knob-inner { transform: scale(1); } .radio-list li label input:checked + .k-radio .label-text { color: var(--dark-text); } .radio-list li label span { display: block; } .radio-list li label .k-radio { display: flex; align-items: center; padding: 8px 0; } .radio-list li label .k-radio .radio-knob { height: 20px; width: 20px; border: 1px solid var(--primary-grey); border-radius: var(--radius-rounded); display: flex; justify-content: center; align-items: center; } .radio-list li label .k-radio .radio-knob .knob-inner { height: 8px; width: 8px; border-radius: var(--radius-rounded); background: var(--primary); transition: all 0.3s; transform: scale(0); } .radio-list li label .k-radio .label-text { margin-left: 10px; color: var(--muted-grey); font-size: 0.9rem; font-weight: 500; line-height: 0; transition: color 0.3s; } /* ========================================================================== 4. Fieldset | Field | Controls ========================================================================== */ .form-fieldset { padding: 20px 0; max-width: 480px; margin: 0 auto; } .form-fieldset .fieldset-heading { margin-bottom: 20px; } .form-fieldset .fieldset-heading h4 { font-family: var(--font-alt); font-weight: 600; } .form-fieldset .fieldset-heading p { font-size: 0.9rem; } .form-fieldset .columns .column { padding-top: 0.5rem; padding-bottom: 0.5rem; } .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--muted-grey-light-14); border-width: 1.4px; } .select { width: 100%; } .select.is-loading::after { right: 0.75em; top: 0.75em; } .select + .icon svg { height: 18px; width: 18px; } .select + .icon .lnil, .select + .icon .lnir { font-size: 16px; } select { width: 100%; font-family: var(--font); } select:focus { box-shadow: none !important; border-color: var(--fade-grey-dark-6) !important; } .field.is-horizontal .field-label .label { font-family: var(--font); font-size: 0.9rem; color: var(--light-text) !important; font-weight: 400; } .field.has-addons .control .button, .field.is-grouped .control .button { height: 38px; } .field.has-addons .control .select, .field.is-grouped .control .select { height: 38px; } .field.has-addons .control .select.currency-select select, .field.is-grouped .control .select.currency-select select { font-family: var(--font); font-weight: 600; } .field.has-addons .control .select select, .field.is-grouped .control .select select { height: 38px; } .field.has-textarea-addon .textarea { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; border-color: var(--fade-grey-dark-2) !important; box-shadow: var(--light-box-shadow); } .field.has-textarea-addon .is-textarea-addon { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 8px; background: var(--white); border-radius: 0 0 4px 4px; border: 1px solid var(--fade-grey-dark-2); border-top: none; box-shadow: var(--light-box-shadow); } .field > label { font-family: var(--font); font-size: 0.9rem; color: var(--light-text) !important; } .control.is-loading::after { right: 0.75em; top: 0.75em; } .control.is-loading .select::after { display: none; } .control.has-icon { position: relative; } .control.has-icon .form-icon { position: absolute; top: 0; left: 0; height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; } .control.has-icon .form-icon svg { height: 18px; width: 18px; color: var(--placeholder); transition: all 0.3s; } .control.has-icon .form-icon .fas, .control.has-icon .form-icon .far, .control.has-icon .form-icon .fal, .control.has-icon .form-icon .fab { color: var(--placeholder); transition: all 0.3s; } .control.has-icon .form-icon .lnil, .control.has-icon .form-icon .lnir { font-size: 1.2rem; color: var(--placeholder); transition: all 0.3s; } .control.has-icon .input { height: 38px; padding-left: 38px; transition: all 0.3s; } .control.has-icon .input:focus + .form-icon svg { color: var(--primary); } .control.has-icon .input:focus + .form-icon .fas, .control.has-icon .input:focus + .form-icon .far, .control.has-icon .input:focus + .form-icon .fal, .control.has-icon .input:focus + .form-icon .fab { color: var(--primary); } .control.has-icon .input:focus + .form-icon .lnil, .control.has-icon .input:focus + .form-icon .lnir { color: var(--primary); } .control.has-validation.has-success input { border-color: var(--success) !important; box-shadow: var(--light-box-shadow); transition: all 0.3s; } .control.has-validation.has-success .validation-icon.is-success, .control.has-validation.has-success .form-icon { opacity: 1 !important; } .control.has-validation.has-success .validation-icon.is-success svg, .control.has-validation.has-success .validation-icon.is-success .form-icon svg, .control.has-validation.has-success .form-icon svg, .control.has-validation.has-success .form-icon .form-icon svg { color: var(--success) !important; } .control.has-validation.has-error input { border-color: var(--danger) !important; box-shadow: var(--light-box-shadow); } .control.has-validation.has-error .validation-icon.is-error, .control.has-validation.has-error .form-icon { opacity: 1 !important; } .control.has-validation.has-error .validation-icon.is-error svg, .control.has-validation.has-error .validation-icon.is-error .form-icon svg, .control.has-validation.has-error .form-icon svg, .control.has-validation.has-error .form-icon .form-icon svg { color: var(--danger) !important; } .control.has-validation.has-error .help-text span.info { display: none; } .control.has-validation.has-error .help-text span.error { display: block; } .control.has-validation .input { padding-right: 40px; } .control.has-validation .validation-icon { position: absolute; top: 0; right: 0; height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.3s; } .control.has-validation .validation-icon svg { height: 18px; width: 18px; color: var(--placeholder); transition: all 0.3s; } .control .help-text { display: block; color: var(--muted-grey); margin-top: 10px; font-size: 0.8rem; } .control .help-text span.info { display: block; } .control .help-text span.error { display: none; color: var(--danger); } .control .search-results { position: absolute; top: 64px; left: 0; width: 100%; max-height: 285px; overflow-y: auto; background: var(--white); opacity: 0; border: 1px solid var(--fade-grey-dark-3); border-radius: var(--radius); pointer-events: none; transform: translateY(5px); box-shadow: var(--light-box-shadow); z-index: 10; transition: all 0.3s; } .control .search-results.is-active { opacity: 1; pointer-events: all; transform: translateY(0); } .control .search-results .placeholder-wrap { min-height: 240px; display: flex; align-items: center; justify-content: center; padding: 0 20px; } .control .search-results .placeholder-wrap .placeholder-content img { display: block; margin: 0 auto; max-width: 100px; } .control .search-results .placeholder-wrap .placeholder-content h3 { font-family: var(--font); font-weight: 600; color: var(--dark-text); padding: 0; } .control .search-results .placeholder-wrap .placeholder-content p { color: var(--light-text); font-size: 0.95rem; max-width: 420px; margin: 0 auto; } .control .search-results .search-result { display: flex; align-items: center; padding: 12px; transition: all 0.3s; } .control .search-results .search-result:last-child { border-bottom: none; } .control .search-results .search-result:hover { background: var(--fade-grey-light-4); } .control .search-results .search-result .v-avatar .article { border-radius: var(--radius-small); } .control .search-results .search-result .meta { margin-left: 12px; } .control .search-results .search-result .meta span { display: block; line-height: 1.3; } .control .search-results .search-result .meta span:first-child { font-family: var(--font); font-weight: 500; font-size: 0.9rem; color: var(--dark-text); } .control .search-results .search-result .meta span:nth-child(2) { font-size: 0.85rem; color: var(--light-text); } /* ========================================================================== 5. Fieldset | Field | Controls Dark mode ========================================================================== */ .is-dark .form-fieldset .fieldset-heading h4 { color: var(--dark-dark-text); } .is-dark .field.has-textarea-addon .textarea { border-color: var(--dark-sidebar-light-4) !important; } .is-dark .field.has-textarea-addon .is-textarea-addon { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } .is-dark .control.has-icon .input:focus ~ .form-icon svg { color: var(--primary); } .is-dark .control.has-icon .input:focus ~ .form-icon .fas, .is-dark .control.has-icon .input:focus ~ .form-icon .fal, .is-dark .control.has-icon .input:focus ~ .form-icon .far, .is-dark .control.has-icon .input:focus ~ .form-icon .fab, .is-dark .control.has-icon .input:focus ~ .form-icon .lnir, .is-dark .control.has-icon .input:focus ~ .form-icon .lnil { color: var(--primary); } .is-dark .control.has-icon .form-icon svg { color: var(--light-text-dark-5); } .is-dark .control.has-icon .form-icon .fas, .is-dark .control.has-icon .form-icon .fal, .is-dark .control.has-icon .form-icon .far, .is-dark .control.has-icon .form-icon .fab, .is-dark .control.has-icon .form-icon .lnir, .is-dark .control.has-icon .form-icon .lnil { color: var(--light-text-dark-5); } .is-dark .select:not(.is-multiple):not(.is-loading):hover::after { border-color: var(--dark-dark-text) !important; } .is-dark .select select { background-color: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12) !important; color: var(--dark-dark-text); } .is-dark .search-results { background: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-4) !important; } .is-dark .search-results .search-result:hover { background: var(--dark-sidebar-light-2); } .is-dark .search-results .search-result .meta span:first-child { color: var(--dark-dark-text); } /* ========================================================================== 6. Custom select ========================================================================== */ .custom-select-wrapper { position: relative; margin-bottom: 10px; } .custom-select-wrapper.is-opened .custom-select { border-color: var(--placeholder); } .custom-select-wrapper.is-opened .select-drop { opacity: 1; transform: translateY(0); pointer-events: all; } .custom-select-wrapper.is-opened .select-caret { transform: rotate(180deg); } .custom-select-wrapper.is-opened .select-caret svg { color: var(--primary); } .custom-select-wrapper .custom-select { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--fade-grey); border-radius: var(--radius-large); padding: 14px 16px; cursor: pointer; transition: all 0.3s; } .custom-select-wrapper .custom-select:hover { border-color: var(--placeholder); } .custom-select-wrapper .custom-select .selected-option .option-content { display: flex; justify-content: flex-start; align-items: center; } .custom-select-wrapper .custom-select .selected-option .option-content .image { margin-right: 15px; } .custom-select-wrapper .custom-select .selected-option .option-content .image img { height: 38px; width: 38px; border-radius: var(--radius-rounded); } .custom-select-wrapper .custom-select .selected-option .option-content .option-text span { display: block; } .custom-select-wrapper .custom-select .selected-option .option-content .option-text span:first-child { font-size: 1rem; font-weight: 500; color: var(--primary); } .custom-select-wrapper .custom-select .selected-option .option-content .option-text span:nth-child(2) { font-size: 0.85rem; color: var(--muted-grey); } .custom-select-wrapper .custom-select .select-caret { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; transform: rotate(0); transition: all 0.3s; } .custom-select-wrapper .custom-select .select-caret svg { width: 20px; height: 20px; color: var(--muted-grey); } .custom-select-wrapper .select-drop { position: absolute; top: 100%; left: 0; width: 100%; background: var(--white); border: 1px solid var(--fade-grey); border-radius: var(--radius-large); margin-top: 10px; padding: 5px 0; box-shadow: 0 5px 43px rgba(0, 0, 0, 0.18) !important; z-index: 5; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s; } .custom-select-wrapper .select-drop .inner { position: relative; } .custom-select-wrapper .select-drop .inner .option-wrapper { cursor: pointer; border-bottom: 1px solid var(--fade-grey); } .custom-select-wrapper .select-drop .inner .option-wrapper:last-child { border-bottom: 0; } .custom-select-wrapper .select-drop .inner .option-wrapper:hover { background: #fafafa; } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content { padding: 10px; display: flex; justify-content: flex-start; align-items: center; } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content .image { margin-right: 15px; } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content .image img { height: 32px; width: 32px; border-radius: var(--radius-rounded); } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content .option-text span { display: block; } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content .option-text span:first-child { font-size: 0.9rem; font-weight: 500; color: var(--dark-text); } .custom-select-wrapper .select-drop .inner .option-wrapper .option-content .option-text span:nth-child(2) { font-size: 0.75rem; color: var(--muted-grey); } /* ========================================================================== 7. Autocomplete ========================================================================== */ .h-autocomplete .control { position: relative; } .h-autocomplete .control .easy-autocomplete { width: 100% !important; } .h-autocomplete .control .easy-autocomplete input { box-shadow: none; color: var(--muted-grey); transition: all 0.3s; } .h-autocomplete .control .easy-autocomplete .template-wrapper { display: flex !important; justify-content: flex-start; align-items: center; } .h-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper { position: relative; width: 40px !important; height: 40px !important; } .h-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .autocpl-avatar { width: 40px !important; height: 40px !important; border-radius: var(--radius-rounded) !important; } .h-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .avatar-badge { position: absolute; bottom: 0; right: -5px; width: 18px; height: 18px; border: 2px solid var(--white); border-radius: var(--radius-rounded); } .h-autocomplete .control .easy-autocomplete .template-wrapper .entry-text { margin-left: 15px; } .h-autocomplete .control .easy-autocomplete .template-wrapper .entry-text span { font-size: 0.8rem; color: var(--title-grey); } .h-autocomplete li { height: auto !important; padding-top: 8px; padding-bottom: 8px; border-left: none !important; border-right: none !important; } .h-autocomplete .easy-autocomplete-container { top: 120% !important; border: none !important; } .h-autocomplete .easy-autocomplete-container ul { border-radius: var(--radius) !important; box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06) !important; } .is-autocomplete .control .easy-autocomplete { width: 100% !important; } .is-autocomplete .control .easy-autocomplete input { box-shadow: none; } .is-autocomplete .control .easy-autocomplete input:focus { box-shadow: var(--light-box-shadow); } .is-autocomplete .control .easy-autocomplete input:focus + .icon { color: var(--primary); } .is-autocomplete .control .easy-autocomplete .template-wrapper { display: flex !important; align-items: center; } .is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper { position: relative; margin-right: 10px; } .is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .autocpl-avatar { width: 32px !important; height: 32px !important; border-radius: var(--radius-rounded) !important; } .is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .avatar-badge { position: absolute; bottom: 0; right: -2px; width: 16px; height: 16px; border: 1px solid var(--white); border-radius: var(--radius-rounded); } .is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text { color: var(--dark-text); line-height: 1.3; } .is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text span { font-family: var(--font); display: block; } .is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text span:first-child { font-family: var(--font-alt); font-size: 0.9rem; font-weight: 500; color: var(--dark-text); } .is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text span:nth-child(2) { font-size: 0.9rem; color: var(--light-text); } .is-autocomplete li { height: auto !important; padding-top: 8px; padding-bottom: 8px; border-left: none !important; border-right: none !important; } .is-autocomplete .easy-autocomplete-container { top: 120% !important; border: none !important; } .is-autocomplete .easy-autocomplete-container ul { border-radius: var(--radius) !important; box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06) !important; } /* ========================================================================== 8. Autocomplete Dark mode ========================================================================== */ .is-dark .is-autocomplete .easy-autocomplete-container > ul { background: var(--dark-sidebar); border-color: var(--dark-sidebar-light-8); } .is-dark .is-autocomplete .easy-autocomplete-container > ul li { border-color: var(--dark-sidebar-light-8); } .is-dark .is-autocomplete .easy-autocomplete-container > ul li.selected { background-color: var(--dark-sidebar-light-3); } .is-dark .is-autocomplete .easy-autocomplete-container > ul li .eac-item .template-wrapper .entry-text { color: var(--dark-text); } .is-dark .is-autocomplete .easy-autocomplete-container > ul li .eac-item .template-wrapper .entry-text span:first-child { color: var(--dark-dark-text); } /* ========================================================================== 9. Switch ========================================================================== */ .form-switch { position: relative; display: inline-block; cursor: pointer; -webkit-tap-highlight-color: transparent; } .form-switch.is-primary input:checked + i { background-color: var(--primary); } .form-switch.is-success input:checked + i { background-color: var(--success); } .form-switch.is-info input:checked + i { background-color: var(--info); } .form-switch.is-warning input:checked + i { background-color: var(--warning); } .form-switch.is-danger input:checked + i { background-color: var(--danger); } .form-switch i { position: relative; display: inline-block; width: 46px; height: 26px; background-color: #e6e6e6; border-radius: 23px; vertical-align: text-bottom; transition: all 0.3s linear; } .form-switch i::before { content: ""; position: absolute; left: 0; width: 42px; height: 22px; background-color: var(--white); border-radius: 11px; transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1); transition: all 0.25s linear; } .form-switch i::after { content: ""; position: absolute; left: 0; width: 22px; height: 22px; background-color: var(--white); border-radius: 11px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24); transform: translate3d(2px, 2px, 0); transition: all 0.2s ease-in-out; } .form-switch:active i::after { width: 28px; transform: translate3d(2px, 2px, 0); } .form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); } .form-switch input { position: absolute; opacity: 0; pointer-events: none; } .form-switch input:checked + i { background-color: var(--light-text); } .form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); } .form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); } .form-switch small { color: var(--muted-grey); position: relative; top: -4px; } .switch-block { padding: 10px 0; display: flex; align-items: center; } .switch-block .text { margin-left: 6px; } .switch-block .text span { display: block; position: relative; top: -2px; color: var(--light-text); } /* ========================================================================== 14. Switch Dark mode ========================================================================== */ .is-dark .form-switch.is-primary input:checked + i { background-color: var(--primary) !important; } .is-dark .form-switch.is-primary input:checked + i::after { background: var(--white) !important; } .is-dark .form-switch.is-success input:checked + i { background-color: var(--success) !important; } .is-dark .form-switch.is-success input:checked + i::after { background: var(--white) !important; } .is-dark .form-switch.is-info input:checked + i { background-color: var(--info) !important; } .is-dark .form-switch.is-info input:checked + i::after { background: var(--white) !important; } .is-dark .form-switch.is-warning input:checked + i { background-color: var(--warning) !important; } .is-dark .form-switch.is-warning input:checked + i::after { background: var(--white) !important; } .is-dark .form-switch.is-danger input:checked + i { background-color: var(--danger) !important; } .is-dark .form-switch.is-danger input:checked + i::after { background: var(--white) !important; } .is-dark .form-switch i { background: var(--dark-sidebar) !important; } .is-dark .form-switch i::before { background: var(--dark-sidebar) !important; } .is-dark .form-switch i::after { background: var(--dark-sidebar-light-22) !important; } .is-dark .form-switch input:checked + i::after { background: var(--dark-sidebar-light-55) !important; } /* ========================================================================== 14. Thin Switch ========================================================================== */ .thin-switch { display: block; margin-left: 8px; } .thin-switch.is-primary .input:checked ~ .slider { background: var(--primary-light-20); } .thin-switch.is-primary .input:checked ~ .slider::after { background: var(--primary); border-color: var(--primary); } .thin-switch.is-success .input:checked ~ .slider { background: var(--success-light-20); } .thin-switch.is-success .input:checked ~ .slider::after { background: var(--success); border-color: var(--success); } .thin-switch.is-info .input:checked ~ .slider { background: var(--info-light-20); } .thin-switch.is-info .input:checked ~ .slider::after { background: var(--info); border-color: var(--info); } .thin-switch.is-warning .input:checked ~ .slider { background: var(--warning-light-20); } .thin-switch.is-warning .input:checked ~ .slider::after { background: var(--warning); border-color: var(--warning); } .thin-switch.is-danger .input:checked ~ .slider { background: var(--danger-light-20); } .thin-switch.is-danger .input:checked ~ .slider::after { background: var(--danger); border-color: var(--danger); } .thin-switch .slider { position: relative; display: inline-block; height: 8px; width: 32px; border-radius: 8px; cursor: pointer; background: #c5c5c5; transition: all 0.2s ease; } .thin-switch .slider::after { background: var(--light-grey); position: absolute; left: -8px; top: -8.5px; display: block; width: 24px; height: 24px; border-radius: var(--radius-rounded); border: 1px solid transparent; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); content: ""; transition: all 0.2s ease; } .thin-switch label { margin-right: 7px; } .thin-switch .input { display: none; } .thin-switch .input ~ .label { margin-left: 8px; } .thin-switch .input:checked ~ .slider::after { left: 16px; } .thin-switch .input:checked ~ .slider::after { background: var(--white); border: 1px solid var(--fade-grey); } .thin-switch-block { padding: 10px 0; display: flex; align-items: center; } .thin-switch-block .text { margin-left: 16px; } .thin-switch-block .text span { display: block; position: relative; color: var(--light-text); } /* ========================================================================== 14. Thin Switch Dark mode ========================================================================== */ .is-dark .thin-switch.is-primary .input:checked ~ .slider { background: var(--primary-light-20); } .is-dark .thin-switch.is-primary .input:checked ~ .slider::after { background: var(--primary); border-color: var(--primary); } .is-dark .thin-switch.is-success .input:checked ~ .slider::after { background: var(--success); border-color: var(--success); } .is-dark .thin-switch.is-info .input:checked ~ .slider::after { background: var(--info); border-color: var(--info); } .is-dark .thin-switch.is-warning .input:checked ~ .slider::after { background: var(--warning); border-color: var(--warning); } .is-dark .thin-switch.is-danger .input:checked ~ .slider::after { background: var(--danger); border-color: var(--danger); } .is-dark .thin-switch .slider { background: var(--dark-sidebar); } .is-dark .thin-switch .slider::after { background: var(--dark-sidebar-light-22); } .is-dark .thin-switch .input:checked ~ .slider::after { background: var(--dark-sidebar-light-55); border: var(--dark-sidebar-light-55); } /* ========================================================================== 10. Range input ========================================================================== */ .range-slider { position: relative; width: 100%; margin: 0 4px; } .range-slider .slider-output { position: relative; display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; } .range-slider .slider-output small { font-size: 0.8rem; color: var(--muted-grey); } .range-slider .input-range { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: var(--primary-grey); outline: none; } .range-slider .input-range:focus::-webkit-slider-thumb { transform: scale(1.15); } .range-slider .input-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: var(--radius-rounded); background: var(--primary); cursor: pointer; -webkit-transition: transform 0.3s; transition: transform 0.3s; transform: scale(1); } .range-slider .input-range::-webkit-slider-thumb:hover { background: var(--primary); } .range-slider .input-range:active::-moz-range-thumb { background: var(--primary); } .range-slider .input-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: var(--radius-rounded); background: var(--primary); cursor: pointer; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .range-slider .range-value { display: block !important; position: relative; color: var(--primary); font-size: 14px; font-weight: 500; padding: 0 10px; } .range-slider ::-moz-range-track { background: var(--primary-grey); border: 0; } .range-slider input::-moz-focus-inner { border: 0; } /* ========================================================================== 11. File inputs ========================================================================== */ .file.is-default:hover .file-cta { box-shadow: var(--light-box-shadow) !important; } .file.is-default .file-cta { background: var(--white); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } /* ========================================================================== 12. File inputs Dark mode ========================================================================== */ .is-dark .file:not(.is-primary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger) .file-cta { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .file .file-name { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } /* ========================================================================== 13. Filepond ========================================================================== */ .filepond-uploader.is-two-grid .filepond--item { width: calc(50% - 0.5em); } .filepond-uploader.is-three-grid .filepond--item { width: calc(33.3% - 0.5em); } .filepond-uploader .filepond--root { border: 2px dashed var(--fade-grey-dark-4); border-radius: var(--radius); min-height: 70px; cursor: pointer; transition: all 0.3s; } .filepond-profile-wrap, .filepond-square-wrap { display: inline-block; height: 100px; width: 100px; max-height: 100px; max-width: 100px; } .filepond-profile-wrap.is-tiny, .filepond-square-wrap.is-tiny { height: 68px; width: 68px; max-height: 68px; max-width: 68px; } .filepond-profile-wrap.is-tiny .lnil, .filepond-square-wrap.is-tiny .lnil { font-size: 1.8rem; } .filepond-profile-wrap.is-small, .filepond-square-wrap.is-small { height: 80px; width: 80px; max-height: 80px; max-width: 80px; } .filepond-profile-wrap.is-small .lnil, .filepond-square-wrap.is-small .lnil { font-size: 2rem; } .filepond-profile-wrap:hover .lnil, .filepond-square-wrap:hover .lnil { color: var(--primary); } .filepond-profile-wrap:hover .filepond--root, .filepond-square-wrap:hover .filepond--root { border-color: dashed var(--fade-grey-dark-6); } .filepond-profile-wrap .lnil, .filepond-square-wrap .lnil { pointer-events: none; font-size: 2.4rem; color: var(--light-text); transition: color 0.3s; } .filepond-profile-wrap .filepond--root, .filepond-square-wrap .filepond--root { border: 2px dashed var(--fade-grey-dark-4); cursor: pointer; transition: all 0.3s; } .filepond-square-wrap .filepond--root { border-radius: var(--radius); } /* ========================================================================== 14. Filepond Dark mode ========================================================================== */ .is-dark .filepond-uploader:hover .lnil, .is-dark .filepond-profile-wrap:hover .lnil, .is-dark .filepond-square-wrap:hover .lnil { color: var(--primary); } .is-dark .filepond-uploader .filepond--root, .is-dark .filepond-profile-wrap .filepond--root, .is-dark .filepond-square-wrap .filepond--root { border-color: var(--dark-sidebar-light-12); } .is-dark .filepond-uploader .filepond--drop-label, .is-dark .filepond-profile-wrap .filepond--drop-label, .is-dark .filepond-square-wrap .filepond--drop-label { background: var(--dark-sidebar-light-2); } .is-dark .filepond-uploader .filepond--drop-label label, .is-dark .filepond-profile-wrap .filepond--drop-label label, .is-dark .filepond-square-wrap .filepond--drop-label label { color: var(--dark-dark-text); } /* ========================================================================== 15. Choices ========================================================================== */ .choices.is-focused .choices__inner { border-color: var(--fade-grey-dark-3); box-shadow: var(--light-box-shadow); } .choices .choices__inner { border-radius: var(--radius-large); transition: all 0.3s; } .choices .choices__inner .choices__list .choices__item { position: relative !important; background-color: var(--fade-grey-dark-2); border-color: var(--fade-grey-dark-2); color: var(--dark-text); font-family: var(--font); padding: 4px 10px 5px 10px; } .choices .choices__inner .choices__list .choices__item::before { content: ""; position: absolute; top: 4.5px; right: 14px; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--light-text); } .choices .choices__inner .choices__list .choices__item button { border: none; background-image: none; margin: 0 -4px 0 4px; } .choices .choices__list--dropdown { margin-top: 6px; border-color: var(--fade-grey-dark-3); box-shadow: var(--light-box-shadow); } .choices .choices__list--dropdown .choices__item--choice { color: var(--light-text); } /* ========================================================================== 16. Choices Dark mode ========================================================================== */ .is-dark .choices.is-focused .choices__inner { border-color: var(--dark-sidebar-light-8); } .is-dark .choices .choices__inner { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } .is-dark .choices .choices__inner input { background-color: var(--dark-sidebar-light-2); color: var(--dark-dark-text); } .is-dark .choices .choices__inner .choices__list .choices__item { background-color: var(--dark-sidebar-light-8); border-color: var(--dark-sidebar-light-8); color: var(--dark-dark-text); } .is-dark .choices .choices__list--dropdown { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } .is-dark .choices .choices__list--dropdown .choices__item.is-highlighted { background-color: var(--dark-sidebar-dark-2); } /*! _forms-combos.scss | Vuero | Css ninja 2020-2021 */ /* 1. H Select 2. H Select Dark mode 3. Combo Box 4. Combo Box Dark mode */ /* ========================================================================== 1. H Select ========================================================================== */ .h-select { width: 100%; z-index: 3; } .h-select.is-dropup .select-drop { top: -180px; } .h-select.is-active .select-drop { opacity: 1; transform: translateY(0); pointer-events: all; } .h-select.is-active .select-icon { transform: rotate(180deg); } .h-select.has-media .select-drop { min-height: 180px; max-height: 180px; } .h-select.has-media .option-meta img { max-height: 36px !important; border-radius: var(--radius-rounded); } .h-select.is-rounded .select-box { border-radius: 500px; padding-left: 16px; } .h-select.is-rounded .select-icon { right: 4px; } .h-select .select-box { position: relative; display: flex; align-items: center; padding: 0 40px 0 10px; height: 38px; width: 100%; border: 1px solid var(--primary-grey); border-radius: var(--radius); color: var(--primary-grey-dark-20); background: var(--white); cursor: pointer; transition: all 0.3s; } .h-select .select-box:hover { border-color: var(--fade-grey); } .h-select .select-box span { font-family: var(--font); font-size: 0.9rem; position: relative; top: 0; } .h-select .select-icon { position: absolute; top: 0; right: 0; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; transition: all 0.3s; transform: rotate(0); } .h-select .select-icon svg { height: 20px; width: 20px; color: var(--placeholder-dark-8) !important; transition: all 0.3s; } .h-select .select-drop { position: absolute; top: 40px; left: 0; width: 100%; max-height: 180px; overflow-y: auto; background: var(--white); border: 1px solid var(--fade-grey); border-radius: var(--radius); z-index: 5; transition: all 0.3s; opacity: 0; transform: translateY(10px); pointer-events: none; } .h-select .select-drop .drop-inner { position: relative; height: 100%; width: 100%; background: var(--white); } .h-select .select-drop .drop-inner .option-row { position: relative; display: flex; background: var(--white); } .h-select .select-drop .drop-inner .option-row:hover { background: var(--fade-grey-light-3); } .h-select .select-drop .drop-inner .option-row input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer; } .h-select .select-drop .drop-inner .option-row input:checked + .option-meta { background: var(--fade-grey-light-4); } .h-select .select-drop .drop-inner .option-row input:checked + .option-meta span { color: var(--dark-text); } .h-select .select-drop .drop-inner .option-row input:checked + .option-meta svg.is-purple { color: var(--primary); } .h-select .select-drop .drop-inner .option-row .option-meta { padding: 12px; width: 100%; display: flex; align-items: center; } .h-select .select-drop .drop-inner .option-row .option-meta img { display: block; max-height: 20px; } .h-select .select-drop .drop-inner .option-row .option-meta svg { height: 20px; width: 20px; color: var(--placeholder); } .h-select .select-drop .drop-inner .option-row .option-meta svg.is-small { height: 14px; width: 14px; } .h-select .select-drop .drop-inner .option-row .option-meta span { display: block; font-weight: 500; color: var(--muted-grey); font-size: 0.9rem; margin-left: 8px; } /* ========================================================================== 2. H Select Dark mode ========================================================================== */ .is-dark .h-select .select-box { background: var(--dark-sidebar-light-1) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .h-select .select-drop { border-color: var(--dark-sidebar-light-4) !important; background: var(--dark-sidebar-light-1) !important; } .is-dark .h-select .select-drop .drop-inner { background: var(--dark-sidebar-light-1) !important; } .is-dark .h-select .select-drop .option-row { background: var(--dark-sidebar-light-1) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .h-select .select-drop .option-row:hover { background: var(--dark-sidebar-light-3) !important; } .is-dark .h-select .select-drop .option-row input:checked + .option-meta { background: var(--dark-sidebar-light-4) !important; } .is-dark .h-select .select-drop .option-row input:checked + .option-meta span { color: var(--primary-grey) !important; } /* ========================================================================== 3. Combo Box ========================================================================== */ .is-combo .combo-label { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } .is-combo .combo-box, .is-combo .image-combo-box, .is-combo .stacked-combo-box, .is-combo .user-combo-box { position: relative; background: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius); height: 38px; cursor: pointer; transition: all 0.3s; } .is-combo .combo-box.has-rounded-images .combo-item img, .is-combo .combo-box.has-rounded-images .item-icon img, .is-combo .image-combo-box.has-rounded-images .combo-item img, .is-combo .image-combo-box.has-rounded-images .item-icon img, .is-combo .stacked-combo-box.has-rounded-images .combo-item img, .is-combo .stacked-combo-box.has-rounded-images .item-icon img, .is-combo .user-combo-box.has-rounded-images .combo-item img, .is-combo .user-combo-box.has-rounded-images .item-icon img { border-radius: var(--radius-rounded) !important; } .is-combo .combo-box.is-rounded, .is-combo .image-combo-box.is-rounded, .is-combo .stacked-combo-box.is-rounded, .is-combo .user-combo-box.is-rounded { border-radius: 500px; } .is-combo .combo-box .box-inner, .is-combo .image-combo-box .box-inner, .is-combo .stacked-combo-box .box-inner, .is-combo .user-combo-box .box-inner { position: relative; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .is-combo .combo-box .box-inner .combo-item, .is-combo .image-combo-box .box-inner .combo-item, .is-combo .stacked-combo-box .box-inner .combo-item, .is-combo .user-combo-box .box-inner .combo-item { display: flex; align-items: center; height: 38px; padding-left: 8px; } .is-combo .combo-box .box-inner .combo-item i, .is-combo .image-combo-box .box-inner .combo-item i, .is-combo .stacked-combo-box .box-inner .combo-item i, .is-combo .user-combo-box .box-inner .combo-item i { color: var(--light-text); font-size: 20px; margin: 0 8px; } .is-combo .combo-box .box-inner .combo-item .fa, .is-combo .image-combo-box .box-inner .combo-item .fa, .is-combo .stacked-combo-box .box-inner .combo-item .fa, .is-combo .user-combo-box .box-inner .combo-item .fa { font-size: 14px; } .is-combo .combo-box .box-inner .combo-item .fa.is-green, .is-combo .image-combo-box .box-inner .combo-item .fa.is-green, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-green, .is-combo .user-combo-box .box-inner .combo-item .fa.is-green { color: var(--success); } .is-combo .combo-box .box-inner .combo-item .fa.is-blue, .is-combo .image-combo-box .box-inner .combo-item .fa.is-blue, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-blue, .is-combo .user-combo-box .box-inner .combo-item .fa.is-blue { color: var(--info); } .is-combo .combo-box .box-inner .combo-item .fa.is-orange, .is-combo .image-combo-box .box-inner .combo-item .fa.is-orange, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-orange, .is-combo .user-combo-box .box-inner .combo-item .fa.is-orange { color: var(--warning); } .is-combo .combo-box .box-inner .combo-item .fa.is-red, .is-combo .image-combo-box .box-inner .combo-item .fa.is-red, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-red, .is-combo .user-combo-box .box-inner .combo-item .fa.is-red { color: var(--danger); } .is-combo .combo-box .box-inner .combo-item img, .is-combo .image-combo-box .box-inner .combo-item img, .is-combo .stacked-combo-box .box-inner .combo-item img, .is-combo .user-combo-box .box-inner .combo-item img { display: block; height: 22px; width: 22px; border-radius: var(--radius-large); object-fit: contain; margin-right: 8px; } .is-combo .combo-box .box-inner .combo-item img.is-stacked, .is-combo .image-combo-box .box-inner .combo-item img.is-stacked, .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked, .is-combo .user-combo-box .box-inner .combo-item img.is-stacked { height: 26px; width: 26px; border: 2px solid var(--white); margin-right: 0 !important; } .is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1) { margin-left: -9px; } .is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2) { margin-left: -9px; } .is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3) { margin-left: -9px; } .is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4) { margin-left: -9px; } .is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5) { margin-left: -9px; } .is-combo .combo-box .box-inner .combo-item .avatar-container, .is-combo .image-combo-box .box-inner .combo-item .avatar-container, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container, .is-combo .user-combo-box .box-inner .combo-item .avatar-container { position: relative; display: block; height: 26px; width: 26px; } .is-combo .combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .image-combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .user-combo-box .box-inner .combo-item .avatar-container .avatar { display: block; height: 26px; width: 26px; border-radius: var(--radius-rounded); } .is-combo .combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .image-combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .user-combo-box .box-inner .combo-item .avatar-container .badge { position: absolute; bottom: 0; right: -6px; height: 16px; width: 16px; border-radius: var(--radius-rounded); border: 2px solid var(--white); margin: 0; } .is-combo .combo-box .box-inner .combo-item span, .is-combo .image-combo-box .box-inner .combo-item span, .is-combo .stacked-combo-box .box-inner .combo-item span, .is-combo .user-combo-box .box-inner .combo-item span { display: block; color: var(--dark-text); font-size: 0.9rem; font-weight: 500; } .is-combo .combo-box .box-inner .combo-item span.is-pushed, .is-combo .image-combo-box .box-inner .combo-item span.is-pushed, .is-combo .stacked-combo-box .box-inner .combo-item span.is-pushed, .is-combo .user-combo-box .box-inner .combo-item span.is-pushed { margin-left: 18px; } .is-combo .combo-box .box-chevron, .is-combo .image-combo-box .box-chevron, .is-combo .stacked-combo-box .box-chevron, .is-combo .user-combo-box .box-chevron { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; } .is-combo .combo-box .box-chevron svg, .is-combo .image-combo-box .box-chevron svg, .is-combo .stacked-combo-box .box-chevron svg, .is-combo .user-combo-box .box-chevron svg { height: 18px; width: 18px; color: var(--placeholder-dark-8) !important; transform: rotate(0); transition: all 0.3s; } .is-combo .combo-box .box-dropdown, .is-combo .image-combo-box .box-dropdown, .is-combo .stacked-combo-box .box-dropdown, .is-combo .user-combo-box .box-dropdown { position: absolute; top: 32px; left: 0; width: 100%; z-index: 50; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s; } .is-combo .combo-box .box-dropdown.is-dropup, .is-combo .image-combo-box .box-dropdown.is-dropup, .is-combo .stacked-combo-box .box-dropdown.is-dropup, .is-combo .user-combo-box .box-dropdown.is-dropup { top: -165px; height: 148px; } .is-combo .combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .image-combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .stacked-combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .user-combo-box .box-dropdown.is-dropup .dropdown-inner { overflow-y: auto; } .is-combo .combo-box .box-dropdown .dropdown-inner, .is-combo .image-combo-box .box-dropdown .dropdown-inner, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner, .is-combo .user-combo-box .box-dropdown .dropdown-inner { position: relative; width: 100%; height: 100%; background: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius); margin-top: 10px; max-height: 190px; overflow-y: auto; } .is-combo .combo-box .box-dropdown .dropdown-inner ul, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul { padding: 10px 0; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li { padding: 6px 8px; display: flex; justify-content: flex-start; align-items: center; width: 100%; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li:hover { background: var(--fade-grey-light-2); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i { color: var(--primary); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img { opacity: 1; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active span { color: var(--dark-text); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark { opacity: 1; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon { position: relative; display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; margin-right: 8px; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon i { color: var(--muted-grey); font-size: 20px; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa { font-size: 16px; position: relative; top: 5px; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green { color: var(--success); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue { color: var(--info); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange { color: var(--warning); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red { color: var(--danger); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon img { display: block; height: 22px; width: 22px; border-radius: var(--radius-large); object-fit: contain; transition: opacity 0.3s; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img { opacity: 0.4; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar { display: block; height: 24px; width: 24px; border-radius: var(--radius-rounded); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge { position: absolute; bottom: 0; right: 0; height: 12px; width: 12px; border-radius: var(--radius-rounded); border: 2px solid var(--white); } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .checkmark { display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; margin-right: 8px; margin-left: auto; opacity: 0; transition: all 0.3s; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg { color: var(--primary); stroke-width: 3px; height: 14px; width: 14px; } .is-combo .combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li span { display: block; color: var(--muted-grey); font-size: 0.9rem; font-weight: 500; } .is-combo .combo-box.is-active, .is-combo .image-combo-box.is-active, .is-combo .stacked-combo-box.is-active, .is-combo .user-combo-box.is-active { box-shadow: var(--light-box-shadow); } .is-combo .combo-box.is-active .box-chevron svg, .is-combo .image-combo-box.is-active .box-chevron svg, .is-combo .stacked-combo-box.is-active .box-chevron svg, .is-combo .user-combo-box.is-active .box-chevron svg { transform: rotate(180deg); } .is-combo .combo-box.is-active .box-dropdown, .is-combo .image-combo-box.is-active .box-dropdown, .is-combo .stacked-combo-box.is-active .box-dropdown, .is-combo .user-combo-box.is-active .box-dropdown { opacity: 1; transform: translateY(0); pointer-events: all; } .is-combo .help-text { font-size: 0.75rem; color: var(--muted-grey); } .is-combo .big-combo-box { position: relative; background: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius); height: 58px; margin-top: 4px; cursor: pointer; transition: all 0.3s; } .is-combo .big-combo-box .box-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; } .is-combo .big-combo-box .box-inner .combo-item { display: flex; align-items: center; height: 58px; padding-left: 8px; } .is-combo .big-combo-box .box-inner .combo-item i { color: var(--primary); font-size: 1.6rem; } .is-combo .big-combo-box .box-inner .combo-item .combo-text { margin-left: 16px; } .is-combo .big-combo-box .box-inner .combo-item .combo-text span { display: block; } .is-combo .big-combo-box .box-inner .combo-item .combo-text span:first-child { color: var(--dark-text); font-size: 0.9rem; font-weight: 500; } .is-combo .big-combo-box .box-inner .combo-item .combo-text span:nth-child(2) { color: var(--muted-grey); font-size: 0.8rem; max-width: 330px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-combo .big-combo-box .box-chevron { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; height: 58px; width: 58px; } .is-combo .big-combo-box .box-chevron svg { height: 18px; width: 18px; color: var(--dark-text); transform: rotate(0); transition: all 0.3s; } .is-combo .big-combo-box .box-dropdown { position: absolute; top: 54px; left: 0; width: 100%; z-index: 50; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s; } .is-combo .big-combo-box .box-dropdown .dropdown-inner { position: relative; width: 100%; height: 100%; background: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius); margin-top: 10px; max-height: 190px; overflow-y: auto; overflow-x: hidden; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul { padding: 10px 0; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li { padding: 6px 8px; display: flex; justify-content: flex-start; align-items: center; width: 100%; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-icon { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; min-height: 30px; min-width: 30px; margin-right: 16px; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-icon i { color: var(--muted-grey); font-size: 1.6rem; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span { display: block; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span:first-child { color: var(--dark-text); font-size: 0.9rem; font-weight: 500; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span:nth-child(2) { color: var(--muted-grey); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li:hover { background: var(--fade-grey-light-2); } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i { color: var(--primary); } .is-combo .big-combo-box .box-dropdown .dropdown-inner ul li.is-active span { color: var(--dark-text); } .is-combo .big-combo-box.is-active { border-color: var(--primary); } .is-combo .big-combo-box.is-active .box-chevron svg { transform: rotate(180deg); } .is-combo .big-combo-box.is-active .box-dropdown { opacity: 1; transform: translateY(0); pointer-events: all; } /* ========================================================================== 4. Combo Box Dark mode ========================================================================== */ .is-dark .is-combo .combo-box, .is-dark .is-combo .image-combo-box, .is-dark .is-combo .stacked-combo-box, .is-dark .is-combo .user-combo-box { background: var(--dark-sidebar-light-1) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item i, .is-dark .is-combo .image-combo-box .box-inner .combo-item i, .is-dark .is-combo .stacked-combo-box .box-inner .combo-item i, .is-dark .is-combo .user-combo-box .box-inner .combo-item i { color: var(--primary) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item img, .is-dark .is-combo .image-combo-box .box-inner .combo-item img, .is-dark .is-combo .stacked-combo-box .box-inner .combo-item img, .is-dark .is-combo .user-combo-box .box-inner .combo-item img { border-color: var(--dark-sidebar-dark-2) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item .selected-item, .is-dark .is-combo .image-combo-box .box-inner .combo-item .selected-item, .is-dark .is-combo .stacked-combo-box .box-inner .combo-item .selected-item, .is-dark .is-combo .user-combo-box .box-inner .combo-item .selected-item { color: var(--primary-grey) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item .combo-text span:first-child, .is-dark .is-combo .image-combo-box .box-inner .combo-item .combo-text span:first-child, .is-dark .is-combo .stacked-combo-box .box-inner .combo-item .combo-text span:first-child, .is-dark .is-combo .user-combo-box .box-inner .combo-item .combo-text span:first-child { color: var(--primary-grey-dark-8) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item .combo-text span:nth-child(2), .is-dark .is-combo .image-combo-box .box-inner .combo-item .combo-text span:nth-child(2), .is-dark .is-combo .stacked-combo-box .box-inner .combo-item .combo-text span:nth-child(2), .is-dark .is-combo .user-combo-box .box-inner .combo-item .combo-text span:nth-child(2) { color: var(--primary-grey-dark-35) !important; } .is-dark .is-combo .combo-box .box-inner .combo-item .combo-text span.is-pushed, .is-dark .is-combo .image-combo-box .box-inner .combo-item .combo-text span.is-pushed, .is-dark .is-combo .stacked-combo-box .box-inner .combo-item .combo-text span.is-pushed, .is-dark .is-combo .user-combo-box .box-inner .combo-item .combo-text span.is-pushed { color: var(--primary-grey) !important; } .is-dark .is-combo .combo-box .box-chevron svg, .is-dark .is-combo .image-combo-box .box-chevron svg, .is-dark .is-combo .stacked-combo-box .box-chevron svg, .is-dark .is-combo .user-combo-box .box-chevron svg { color: var(--primary-grey-light-5) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner { background: var(--dark-sidebar-dark-4) !important; border-color: var(--dark-sidebar-dark-4); } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li img, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li img, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li img, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li img { border-color: var(--dark-sidebar-dark-2) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li:hover, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li:hover, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li:hover, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li:hover { background: var(--dark-sidebar-light-2) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li.is-active .item-icon i, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li.is-active .item-icon i, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li.is-active .item-icon i, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li.is-active .item-icon i { color: var(--primary) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li.is-active .checkmark svg, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li.is-active .checkmark svg, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li.is-active .checkmark svg, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li.is-active .checkmark svg { color: var(--primary) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li .item-name span:first-child, .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li .item-name span:first-child, .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li .item-name span:first-child, .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li .item-name span:first-child { color: var(--primary-grey-dark-8) !important; } .is-dark .is-combo .combo-box .box-dropdown .dropdown-inner li .item-name span:nth-child(2), .is-dark .is-combo .image-combo-box .box-dropdown .dropdown-inner li .item-name span:nth-child(2), .is-dark .is-combo .stacked-combo-box .box-dropdown .dropdown-inner li .item-name span:nth-child(2), .is-dark .is-combo .user-combo-box .box-dropdown .dropdown-inner li .item-name span:nth-child(2) { color: var(--primary-grey-dark-35) !important; } /*! _checkboxes.scss | Vuero | Css ninja 2020-2021 */ /* 1. Animated Checkbox 2. Animated Checkbox Dark mode 3. Checkbox List 4. Regular Checkbox / Radio 5. Regular Checkbox / Radio Dark mode */ /* ========================================================================== 1. Animated Checkbox ========================================================================== */ /* $curve: cubic-bezier(0.65, 0, 0.45, 1); .animated-checkbox { position: relative; height: 32px; width: 32px; &.is-purple { .checkmark-circle { color: var(--purple) !important; } .checkmark { box-shadow: inset 0 0 0 var(--purple) !important; } .checkmark-check { color: var(--purple) !important; } } &.is-info { .checkmark-circle { color: var(--info) !important; } .checkmark { box-shadow: inset 0 0 0 var(--info) !important; } .checkmark-check { color: var(--info) !important; } } &.is-success { .checkmark-circle { color: var(--success) !important; } .checkmark { box-shadow: inset 0 0 0 var(--success) !important; } .checkmark-check { color: var(--success) !important; } } &.is-warning { .checkmark-circle { color: var(--warning) !important; } .checkmark { box-shadow: inset 0 0 0 var(--warning) !important; } .checkmark-check { color: var(--warning) !important; } } &.is-danger { .checkmark-circle { color: var(--red) !important; } .checkmark { box-shadow: inset 0 0 0 var(--red) !important; } .checkmark-check { color: var(--red) !important; } } input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer; z-index: 1; } .checkmark-wrap { position: relative; height: 32px; width: 32px; .shadow-circle { position: absolute; top: 0; left: 0; height: 32px; width: 32px; border-radius: var(--radius-rounded); border: 1px solid var(--placeholder); z-index: 0; opacity: 1; transition: all 0.2s; &.is-opaque { opacity: 0; } } .checkmark-circle { height: 32px; width: 32px; stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; fill: none; color: var(--primary); } //Checkmark .checkmark { width: 32px; height: 32px; border-radius: var(--radius-rounded); display: block; stroke-width: 2; color: var(--placeholder); stroke-miterlimit: 10; margin: 0 auto; box-shadow: inset 0 0 0 var(--primary); } //Check symbol .checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; color: var(--primary); } } &.is-checked { .checkmark-circle { animation: stroke 0.6s $curve both; } .checkmark-check { animation: stroke 0.3s $curve 0.8s both; } } &.is-unchecked { .checkmark-circle { animation: reverseCircle 0.6s $curve 0.2s both; } .checkmark-check { animation: reverseCheck 0.3s $curve 0.1s both; } } //Keyframes @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes reverseCircle { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 166; } } @keyframes reverseCheck { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 48; } } } */ /* ========================================================================== 2. Animated Checkbox Dark Mode ========================================================================== */ /* .is-dark { .animated-checkbox { .checkmark-wrap { .checkmark-circle, .checkmark-check { color: var(--primary); } .shadow-circle { border-color: var(--dark-sidebar-light-20); } } } } } */ /* ========================================================================== 3. Checkbox list ========================================================================== */ .checkboxes-list .list-item { display: flex; align-items: center; margin-bottom: 1rem; padding: 0; border: none; } .checkboxes-list .list-item .animated-checkbox .checkmark-wrap { position: relative; } .checkboxes-list .list-item .item-meta { margin-left: 1rem; } .checkboxes-list .list-item .item-meta span { display: block; line-height: 1.4; } .checkboxes-list .list-item .item-meta span:first-child { font-family: var(--font-alt); font-size: 0.95rem; font-weight: 600; color: var(--dark-text); } .checkboxes-list .list-item .item-meta span:nth-child(2) { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } /* ========================================================================== 4. Regular Checkbox / Radio ========================================================================== */ .radio, .checkbox { position: relative; font-family: var(--font); cursor: pointer; padding: 1em; } .radio::selection, .checkbox::selection { background: transparent; } .radio input + span, .checkbox input + span { position: relative; top: -1px; background: var(--white); content: ""; display: inline-block; margin: 0 0.5em 0 0; padding: 0; vertical-align: middle; width: 1.4em; height: 1.4em; border: 1px solid var(--fade-grey-dark-8); transform: translate3d(0, 0, 0); backface-visibility: hidden; } .radio input + span::after, .checkbox input + span::after { content: ""; display: block; transform: scale(0); transition: transform 0.2s; } .radio input:disabled + span, .checkbox input:disabled + span { background: whitesmoke; } @media screen and (min-width: 768px) { .radio:hover input + span, .checkbox:hover input + span { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } } .radio input:active + span, .checkbox input:active + span { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .radio input:checked + span::after, .checkbox input:checked + span::after { transform: translate(-50%, -50%) scale(1) !important; } .radio input, .checkbox input { position: absolute; cursor: pointer; opacity: 0; transition: all 0.3s; } .checkbox { color: var(--light-text); } .checkbox:hover { color: var(--light-text); } .checkbox.is-paddingless { padding: 0 !important; } .checkbox.is-circle input + span { border-radius: var(--radius-rounded); } .checkbox.is-solid input + span { background: var(--fade-grey-light-3); } .checkbox.is-solid.is-primary input + span { border-color: var(--primary); background: var(--primary); } .checkbox.is-solid.is-primary input + span::after { color: var(--white); } .checkbox.is-solid.is-success input + span { border-color: var(--success); background: var(--success); } .checkbox.is-solid.is-success input + span::after { color: var(--white); } .checkbox.is-solid.is-info input + span { border-color: var(--info); background: var(--info); } .checkbox.is-solid.is-info input + span::after { color: var(--white); } .checkbox.is-solid.is-warning input + span { border-color: var(--warning); background: var(--warning); } .checkbox.is-solid.is-warning input + span::after { color: var(--white); } .checkbox.is-solid.is-danger input + span { border-color: var(--danger); background: var(--danger); } .checkbox.is-solid.is-danger input + span::after { color: var(--white); } .checkbox.is-outlined.is-primary input:checked + span { border-color: var(--primary); } .checkbox.is-outlined.is-primary input + span::after { color: var(--primary); } .checkbox.is-outlined.is-success input:checked + span { border-color: var(--success); } .checkbox.is-outlined.is-success input + span::after { color: var(--success); } .checkbox.is-outlined.is-info input:checked + span { border-color: var(--info); } .checkbox.is-outlined.is-info input + span::after { color: var(--info); } .checkbox.is-outlined.is-warning input:checked + span { border-color: var(--warning); } .checkbox.is-outlined.is-warning input + span::after { color: var(--warning); } .checkbox.is-outlined.is-danger input:checked + span { border-color: var(--danger); } .checkbox.is-outlined.is-danger input + span::after { color: var(--danger); } .checkbox input + span { border-radius: var(--radius-small); transition: all 0.3s; } .checkbox input + span::after { background-size: contain; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) scale(0); content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.7rem; } .radio { color: var(--light-text); } .radio + .radio { margin-left: 0 !important; } .radio:hover { color: var(--light-text); } .radio.is-paddingless { padding: 0 !important; } .radio.is-square input + span { border-radius: var(--radius); } .radio.is-solid input + span { background: var(--fade-grey-light-3); } .radio.is-solid.is-primary input + span { border-color: var(--primary); background: var(--primary); } .radio.is-solid.is-primary input + span::after { color: var(--white); } .radio.is-solid.is-success input + span { border-color: var(--success); background: var(--success); } .radio.is-solid.is-success input + span::after { color: var(--white); } .radio.is-solid.is-info input + span { border-color: var(--info); background: var(--info); } .radio.is-solid.is-info input + span::after { color: var(--white); } .radio.is-solid.is-warning input + span { border-color: var(--warning); background: var(--warning); } .radio.is-solid.is-warning input + span::after { color: var(--white); } .radio.is-solid.is-danger input + span { border-color: var(--danger); background: var(--danger); } .radio.is-solid.is-danger input + span::after { color: var(--white); } .radio.is-outlined.is-primary input:checked + span { border-color: var(--primary); } .radio.is-outlined.is-primary input + span::after { color: var(--primary); } .radio.is-outlined.is-success input:checked + span { border-color: var(--success); } .radio.is-outlined.is-success input + span::after { color: var(--success); } .radio.is-outlined.is-info input:checked + span { border-color: var(--info); } .radio.is-outlined.is-info input + span::after { color: var(--info); } .radio.is-outlined.is-warning input:checked + span { border-color: var(--warning); } .radio.is-outlined.is-warning input + span::after { color: var(--warning); } .radio.is-outlined.is-danger input:checked + span { border-color: var(--danger); } .radio.is-outlined.is-danger input + span::after { color: var(--danger); } .radio input + span { border-radius: 100%; } .radio input + span::after { background-size: contain; position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) scale(0); content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.6rem; } /* ========================================================================== 5. Regular Checkbox / Radio Dark mode ========================================================================== */ .is-dark .checkbox input + span, .is-dark .radio input + span { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } .is-dark .checkbox input + span::after, .is-dark .radio input + span::after { color: var(--dark-dark-text); } .is-dark .checkbox input + span, .is-dark .radio input + span { border-color: var(--dark-sidebar-light-16); } .is-dark .checkbox input:disabled + span, .is-dark .radio input:disabled + span { background-color: var(--dark-sidebar-light-16); } .is-dark .checkbox.is-solid.is-primary input + span, .is-dark .radio.is-solid.is-primary input + span { background-color: var(--primary) !important; border-color: var(--primary) !important; } .is-dark .checkbox.is-outlined.is-primary input:checked + span, .is-dark .radio.is-outlined.is-primary input:checked + span { border-color: var(--primary) !important; } .is-dark .checkbox.is-outlined.is-primary input:checked + span::after, .is-dark .radio.is-outlined.is-primary input:checked + span::after { color: var(--primary) !important; } /* ========================================================================== 6. H Toggle ========================================================================== */ .h-toggle { margin: 0 auto; width: 76px; display: block; position: relative; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .h-toggle input { position: absolute; opacity: 0; cursor: pointer; } .h-toggle input:checked ~ .toggler { background: var(--placeholder-light-10); border-color: var(--placeholder-light-10); } .h-toggle input:checked ~ .toggler .active, .h-toggle input:checked ~ .toggler .inactive { transform: translateX(80%) rotate(360deg); } .h-toggle input:checked ~ .toggler .active { opacity: 1; } .h-toggle input:checked ~ .toggler .inactive { opacity: 0; } .h-toggle .toggler { position: relative; display: block; height: 16px; width: 50px; border: 1.6px solid var(--placeholder); border-radius: 100px; transition: all 0.3s; } .h-toggle .toggler .active, .h-toggle .toggler .inactive { position: absolute; top: -14px; left: -10px; height: 40px; width: 40px; border-radius: var(--radius-rounded); background: var(--white); border: 1.6px solid transparent; box-shadow: var(--light-box-shadow); display: flex; justify-content: center; align-items: center; transform: translateX(0) rotate(0); transition: all 0.3s ease; } .h-toggle .toggler .active i, .h-toggle .toggler .inactive i { color: var(--white); font-size: 18px; } .h-toggle .toggler .active svg, .h-toggle .toggler .inactive svg { height: 16px; width: 16px; } .h-toggle .toggler .inactive { background: var(--white); border-color: var(--success); color: var(--success); opacity: 1; z-index: 1; } .h-toggle .toggler .active { background: var(--white); border-color: var(--light-text); color: var(--light-text); opacity: 0; z-index: 0; } /* ========================================================================== 7. H Toggle Dark mode ========================================================================== */ .is-dark .h-toggle input:checked ~ .toggler { background: var(--dark-sidebar-light-2); } .is-dark .h-toggle .toggler { border-color: var(--dark-sidebar-light-25) !important; } .is-dark .h-toggle .toggler .active, .is-dark .h-toggle .toggler .inactive { background: var(--dark-sidebar-light-2); } /*! _forms-slider.scss | Vuero | Css ninja 2020-2021 */ /* 1. NoUI Slider 2. NoUI Slider Dark mode */ /* ========================================================================== 1. NoUI Slider ========================================================================== */ /* .noUi-horizontal, .noUi-vertical { border: none; box-shadow: none; &.is-info { .noUi-connect { background: var(--info); } .noUi-tooltip { background: var(--info); color: var(--smoke-white); &::after { background: var(--info); } } } &.is-success { .noUi-connect { background: var(--success); } .noUi-tooltip { background: var(--success); color: var(--smoke-white); &::after { background: var(--success); } } } &.is-warning { .noUi-connect { background: var(--warning); } .noUi-tooltip { background: var(--warning); color: var(--smoke-white); &::after { background: var(--warning); } } } &.is-danger { .noUi-connect { background: var(--danger); } .noUi-tooltip { background: var(--danger); color: var(--smoke-white); &::after { background: var(--danger); } } } .noUi-connects { background: var(--widget-grey-dark-2); border: none !important; } .noUi-connect { background-color: var(--primary); } .noUi-handle { outline: none !important; box-shadow: var(--light-box-shadow); } } .noUi-horizontal { &.is-small { height: 10px; &.is-rounded { .noUi-handle { border-radius: var(--radius-rounded); } } .noUi-handle { width: 22px; height: 22px; top: -6px; &::before { height: 10px; top: 5px; left: 8px; } &::after { height: 10px; top: 5px; left: 11px; } } } &.is-tiny { height: 6px; &.is-rounded { .noUi-handle { border-radius: var(--radius-rounded); } } .noUi-handle { width: 18px; height: 18px; top: -6px; &::before { height: 10px; top: 3px; left: 6px; } &::after { height: 10px; top: 3px; left: 9px; } } } .noUi-handle { width: 28px; height: 28px; &::before { left: 11px; } &::after { left: 16px; } } .noUi-tooltip { background: var(--primary); color: var(--smoke-white); &::after { background: var(--primary); } } } .noUi-vertical { height: 180px; &.is-small { width: 10px; &.is-rounded { .noUi-handle { border-radius: var(--radius-rounded); } } .noUi-handle { width: 22px; height: 22px; top: -6px; &::before { width: 10px !important; top: 7px !important; left: 6px !important; } &::after { width: 10px !important; top: 11px !important; left: 6px !important; } } } &.is-tiny { width: 6px; &.is-rounded { .noUi-handle { border-radius: var(--radius-rounded); } } .noUi-handle { width: 18px; height: 18px; top: -6px; &::before { width: 8px !important; top: 6px !important; left: 4px !important; } &::after { width: 8px !important; top: 9px !important; left: 4px !important; } } } .noUi-handle { width: 28px; height: 28px; &::before { left: 7px; top: 10px; } &::after { left: 7px; top: 15px; } } } .noUi-horizontal, .noUi-vertical { &.has-fixed-tooltip { .noUi-tooltip { opacity: 1 !important; pointer-events: all !important; transform: translate(-50%, 0) scale(1) !important; } } .noUi-tooltip { width: 50px; height: 50px; line-height: 50px; font-family: var(--font); font-size: 0.9rem; opacity: 0; pointer-events: none; transform: translate(-50%, 10%) scale(0.8); border-radius: var(--radius-rounded); background: var(--primary); position: absolute; left: 50%; top: -70px; transition: all 0.3s; padding: 0; &::after { content: ''; position: absolute; top: -1px; left: -1px; width: 50px; height: 50px; border-radius: var(--radius-rounded) 50% 50% 0; transform: rotate(-45deg); background: var(--primary); z-index: -1; } } .noUi-active .noUi-tooltip { opacity: 1; pointer-events: all; transform: translate(-50%, 0) scale(1); } } */ /* ========================================================================== 2. NoUI Slider Dark mode ========================================================================== */ /* .is-dark { .noUi-horizontal, .noUi-vertical { &.is-info { .noUi-connect { background: var(--info); } .noUi-tooltip { background: var(--info); &::after { background: var(--info); } } } &.is-success { .noUi-connect { background: var(--success); } .noUi-tooltip { background: var(--success); &::after { background: var(--success); } } } &.is-warning { .noUi-connect { background: var(--warning); } .noUi-tooltip { background: var(--warning); &::after { background: var(--warning); } } } &.is-danger { .noUi-connect { background: var(--danger); } .noUi-tooltip { background: var(--danger); &::after { background: var(--danger); } } } .noUi-connects { background: var(--dark-sidebar-light-2); } .noUi-connect { background-color: var(--primary); } .noUi-handle { background: var(--dark-sidebar); border-color: var(--dark-sidebar-light-12); &::before, &::after { background: var(--dark-sidebar-light-20); } } .noUi-tooltip { background: var(--primary); &::after { background: var(--primary); } } } } */ /* ========================================================================== 1. Vue Slider ========================================================================== */ .slider-target .slider-base .slider-connects .slider-connect { background: var(--primary); } .slider-target .slider-base .slider-tooltip { font-size: 0.9rem; border: 1px solid var(--primary); background: var(--primary); } .is-slider-info .slider-target .slider-base .slider-connects .slider-connect { background: var(--info); } .is-slider-info .slider-target .slider-base .slider-tooltip { border: 1px solid var(--info); background: var(--info); } .is-slider-success .slider-target .slider-base .slider-connects .slider-connect { background: var(--success); } .is-slider-success .slider-target .slider-base .slider-tooltip { border: 1px solid var(--success); background: var(--success); } .is-slider-warning .slider-target .slider-base .slider-connects .slider-connect { background: var(--warning); } .is-slider-warning .slider-target .slider-base .slider-tooltip { border: 1px solid var(--warning); background: var(--warning); } .is-slider-danger .slider-target .slider-base .slider-connects .slider-connect { background: var(--danger); } .is-slider-danger .slider-target .slider-base .slider-tooltip { border: 1px solid var(--danger); background: var(--danger); } .has-rounded-tooltip .slider-target .slider-base .slider-handle .slider-tooltip { border-radius: 100px; width: 28px; height: 28px; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; line-height: 3; } .has-curved-tooltip .slider-target .slider-base .slider-handle .slider-tooltip { border-radius: 0.75rem; min-width: 28px; padding-left: 0.75rem; padding-right: 0.75rem; height: 28px; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; line-height: 3; } .has-squared-tooltip .slider-target .slider-base .slider-handle .slider-tooltip { border-radius: 0.5rem; min-width: 28px; padding-left: 0.75rem; padding-right: 0.75rem; height: 28px; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; line-height: 3; } .is-dark .slider-target .slider-base { background: var(--dark-sidebar-light-2); } /*! _forms-multiselect.scss | Vuero | Css ninja 2020-2021 */ /* 0. Multiselect base styles 1. Rounded Select 2. Curved Select 3. Image / Icon select 4. Image tags select */ /* ========================================================================== 0. Multiselect base styles ========================================================================== */ .multiselect { font-family: var(--font); min-width: 190px; } .multiselect.is-active { box-shadow: none; } .multiselect .multiselect-dropdown { overflow: hidden; } .multiselect .multiselect-clear { height: 32px; width: 32px; } .multiselect .multiselect-clear::after, .multiselect .multiselect-clear::before { top: 10px; } .multiselect .multiselect-clear .multiselect-clear-icon { margin-top: 0.6rem; } .multiselect .multiselect-input { background: var(--white); min-height: 38px; } .multiselect .multiselect-single-label { font-family: var(--font); font-size: 0.9rem; } .multiselect .multiselect-single-label .select-label-text { font-family: var(--font); font-size: 0.9rem; color: var(--dark-text); } .multiselect .multiselect-placeholder, .multiselect .multiselect-multiple-label { font-size: 0.9rem; color: var(--light-text); padding-left: 1rem; } .multiselect .multiselect-tags .multiselect-tag { font-family: var(--font); font-size: 0.9rem; font-weight: 400; padding: 1px 0 1px 8px; background: var(--widget-grey-dark-4); color: var(--dark-text); } .multiselect .multiselect-tags .multiselect-tag i { padding-right: 4px; } .multiselect .multiselect-tags .multiselect-tag i::before { color: var(--light-text); } .multiselect .multiselect-tags .multiselect-tag i:hover { background: transparent; } .multiselect .multiselect-tags .multiselect-tag i:hover::before { color: var(--dark-text); } .multiselect .multiselect-search { font-family: var(--font); font-size: 0.9rem; color: var(--dark-text); } .multiselect .multiselect-options { overflow-x: hidden; padding: 1rem 0.75rem; } .multiselect .multiselect-options::-webkit-scrollbar { width: 6px !important; } .multiselect .multiselect-options::-webkit-scrollbar-thumb { border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; } .multiselect .multiselect-options .multiselect-option { position: relative; border-radius: 0.5rem; transition: background-color 0.3s; } .multiselect .multiselect-options .multiselect-option.is-pointed { background: var(--widget-grey-dark-1); } .multiselect .multiselect-options .multiselect-option.is-selected { background: transparent !important; color: var(--dark-text); } .multiselect .multiselect-options .multiselect-option.is-selected::after { position: absolute; top: 12px; right: 15px; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.9rem; color: var(--light-text); } .multiselect .multiselect-options .multiselect-option > span { font-size: 0.9rem; } .multiselect .multiselect-options > span { width: 100%; } .multiselect .multiselect-options .multiselect-no-options, .multiselect .multiselect-options .multiselect-no-results { width: 100%; font-family: var(--font); font-size: 0.95rem; color: var(--light-text); } .is-dark .is-image-tags:not(.is-stacked) .multiselect .multiselect-tag i:hover::before { color: var(--white) !important; } .is-dark .is-image-tags .multiselect .multiselect-tag img { border-color: var(--dark-sidebar-light-2) !important; } .is-dark .multiselect { background-color: var(--dark-sidebar-light-2); border: 1px solid var(--dark-sidebar-light-10); color: var(--dark-dark-text); } .is-dark .multiselect .multiselect-clear { background-color: var(--dark-sidebar-light-2); } .is-dark .multiselect .multiselect-single-label { color: var(--dark-dark-text); } .is-dark .multiselect .multiselect-tags-search, .is-dark .multiselect .multiselect-search { background: transparent; color: var(--light-text); } .is-dark .multiselect .multiselect-single-label .select-label-text { color: var(--white); } .is-dark .multiselect .multiselect-tags .multiselect-tag { background-color: var(--dark-sidebar-light-10); color: var(--white); } .is-dark .multiselect .multiselect-tags .multiselect-tag i::before:hover { color: var(--white) !important; } .is-dark .multiselect .multiselect-dropdown { background-color: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-10); } .is-dark .multiselect .multiselect-dropdown .multiselect-option { color: var(--light-text); } .is-dark .multiselect .multiselect-dropdown .multiselect-option.is-pointed { background: var(--dark-sidebar-light-6); } .is-dark .multiselect .multiselect-dropdown .multiselect-option.is-selected { color: var(--white); } .is-dark .multiselect .multiselect-dropdown .multiselect-option.is-disabled { background: var(--dark-sidebar-light-2); cursor: not-allowed; } /* ========================================================================== 1. Rounded Select ========================================================================== */ .is-rounded-select .multiselect { border-radius: 500px; } .is-rounded-select .multiselect .multiselect-clear { border-radius: 500px; } .is-rounded-select .multiselect .multiselect-input, .is-rounded-select .multiselect .multiselect-search { border-radius: 500px; } .is-rounded-select .multiselect .multiselect-input::before, .is-rounded-select .multiselect .multiselect-search::before { right: 20px; } .is-rounded-select .multiselect .multiselect-input .multiselect-tags .multiselect-tag, .is-rounded-select .multiselect .multiselect-search .multiselect-tags .multiselect-tag { border-radius: 15rem; } .is-rounded-select .multiselect .multiselect-options { border-radius: 0.75rem; margin-top: 0.25rem; } /* ========================================================================== 2. Curved Select ========================================================================== */ .is-curved-select .multiselect { border-radius: 0.5rem; } .is-curved-select .multiselect .multiselect-clear { border-radius: 0.5rem; } .is-curved-select .multiselect .multiselect-input, .is-curved-select .multiselect .multiselect-search { border-radius: 0.5rem; } .is-curved-select .multiselect .multiselect-input .multiselect-tags .multiselect-tag, .is-curved-select .multiselect .multiselect-search .multiselect-tags .multiselect-tag { border-radius: 0.35rem; } .is-curved-select .multiselect .multiselect-options { border-radius: 0.75rem; margin-top: 0.25rem; } /* ========================================================================== 3. Image / Icon select ========================================================================== */ .is-image-select, .is-icon-select { --ms-px: 0.3rem; } .is-image-select.has-curved-images .multiselect .select-option-icon, .is-image-select.has-curved-images .multiselect .select-option-icon-wrap, .is-image-select.has-curved-images .multiselect .select-label-icon, .is-image-select.has-curved-images .multiselect .select-label-icon-wrap, .is-icon-select.has-curved-images .multiselect .select-option-icon, .is-icon-select.has-curved-images .multiselect .select-option-icon-wrap, .is-icon-select.has-curved-images .multiselect .select-label-icon, .is-icon-select.has-curved-images .multiselect .select-label-icon-wrap { border-radius: 0.35rem; } .is-image-select.has-rounded-images .multiselect .select-option-icon, .is-image-select.has-rounded-images .multiselect .select-option-icon-wrap, .is-image-select.has-rounded-images .multiselect .select-label-icon, .is-image-select.has-rounded-images .multiselect .select-label-icon-wrap, .is-icon-select.has-rounded-images .multiselect .select-option-icon, .is-icon-select.has-rounded-images .multiselect .select-option-icon-wrap, .is-icon-select.has-rounded-images .multiselect .select-label-icon, .is-icon-select.has-rounded-images .multiselect .select-label-icon-wrap { border-radius: var(--radius-rounded); } .is-image-select .multiselect .multiselect-input .multiselect-single-label, .is-icon-select .multiselect .multiselect-input .multiselect-single-label { padding-left: 6px; } .is-image-select .multiselect .select-option-icon, .is-icon-select .multiselect .select-option-icon { margin: 0 6px 0 0; height: 22px; min-width: 22px; border-radius: 0.15rem; } .is-image-select .multiselect .select-option-icon-wrap, .is-icon-select .multiselect .select-option-icon-wrap { margin: 0 6px 0 0; height: 22px; min-width: 22px; border-radius: 0.15rem; font-size: 1rem; color: var(--light-text); } .is-image-select .multiselect .select-option-text, .is-icon-select .multiselect .select-option-text { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } .is-image-select .multiselect .select-label-text, .is-icon-select .multiselect .select-label-text { font-family: var(--font); font-size: 0.9rem; color: var(--dark-text); } .is-image-select .multiselect .select-label-icon, .is-icon-select .multiselect .select-label-icon { margin: 0 6px 0 0; height: 26px; min-width: 26px; border-radius: 0.15rem; } .is-image-select .multiselect .select-label-icon-wrap, .is-icon-select .multiselect .select-label-icon-wrap { margin: 0 6px 0 0; height: 26px; min-width: 26px; display: flex; align-items: center; justify-content: center; border-radius: 0.15rem; font-size: 1.1rem; color: var(--light-text); } .is-image-select .multiselect .select-option-label, .is-icon-select .multiselect .select-option-label { font-family: var(--font); } .is-image-select .multiselect .select-option-icon.is-curved, .is-image-select .multiselect .select-label-icon.is-curved, .is-icon-select .multiselect .select-option-icon.is-curved, .is-icon-select .multiselect .select-label-icon.is-curved { border-radius: 0.35rem; } .is-image-select .multiselect .select-option-icon.is-rounded, .is-image-select .multiselect .select-label-icon.is-rounded, .is-icon-select .multiselect .select-option-icon.is-rounded, .is-icon-select .multiselect .select-label-icon.is-rounded { border-radius: var(--radius-rounded); } /* ========================================================================== 4. Image tags select ========================================================================== */ .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-user, .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-image, .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-icon { border-radius: var(--radius); } .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-user img, .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-image img, .is-image-tags:not(.is-curved-select):not(.is-rounded-select) .multiselect .multiselect-tag.is-icon img { border-radius: 0.25rem; } .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-user, .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-image, .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-icon { border-radius: 0.45rem; } .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-user img, .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-image img, .is-image-tags.is-curved-select .multiselect .multiselect-tag.is-icon img { border-radius: 0.5rem; } .is-image-tags.is-rounded-select .multiselect .multiselect-input { border-radius: 0.5rem !important; } .is-image-tags.is-stacked.is-rounded-select .multiselect .multiselect-tags > span:not(:first-child) { margin-left: -12px !important; } .is-image-tags.is-stacked .multiselect .multiselect-tag { padding: 0 !important; background: none !important; margin-left: 0 !important; margin-right: 0 !important; } .is-image-tags.is-stacked .multiselect .multiselect-tag:hover i::before { opacity: 1; pointer-events: all; } .is-image-tags.is-stacked .multiselect .multiselect-tag img { border: 2px solid var(--white); margin: 0 !important; } .is-image-tags.is-stacked .multiselect .multiselect-tag i::before { position: absolute; top: -2px; right: 0; background: var(--white); height: 14px; width: 14px; min-width: 14px !important; padding: 0; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .is-image-tags .multiselect .multiselect-tags { padding-left: 4px; } .is-image-tags .multiselect .multiselect-tag { position: relative; } .is-image-tags .multiselect .multiselect-tag.is-user, .is-image-tags .multiselect .multiselect-tag.is-image, .is-image-tags .multiselect .multiselect-tag.is-icon { padding: 5px 8px; border-radius: 22px; margin: 3px 3px 8px; } .is-image-tags .multiselect .multiselect-tag.is-user img, .is-image-tags .multiselect .multiselect-tag.is-image img, .is-image-tags .multiselect .multiselect-tag.is-icon img { min-width: 26px; border-radius: var(--radius-rounded); height: 26px; margin-right: 8px; margin-top: 2px; margin-bottom: 2px; } .is-image-tags .multiselect .multiselect-tag.is-user i::before, .is-image-tags .multiselect .multiselect-tag.is-image i::before, .is-image-tags .multiselect .multiselect-tag.is-icon i::before { color: var(--light-text); border-radius: var(--radius-rounded); margin-left: 0.5rem; padding: 0; display: flex; justify-content: center; align-items: center; min-width: 22px; transition: color 0.3s background-color 0.3s; } /* ========================================================================== 5. Autocomplete select ========================================================================== */ .is-autocomplete-select .multiselect .multiselect-single-label, .is-autocomplete-select .multiselect .multiselect-placeholder { padding-left: 40px !important; } .is-autocomplete-select .multiselect .multiselect-search { padding-left: 40px !important; } /* ========================================================================== 6. Minimal select ========================================================================== */ .is-minimal-select .multiselect .multiselect-input { border: none; background: none; } /*! _icons.scss | Vuero | Css ninja 2020-2021 */ /* 1. Icons 2. Icons Dark Mode */ /* ========================================================================== 1. Icons ========================================================================== */ .icons { display: flex; align-items: flex-end; flex-wrap: wrap; } .icons .v-icon { margin: 0 6px; } .icon-boxes { display: flex; align-items: flex-end; flex-wrap: wrap; } .icon-boxes .v-icon { margin: 0 0.25rem 0.5rem 0; } .v-icon { position: relative; display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; min-width: 40px; border-radius: 8px; background: var(--fade-grey); transition: all 0.3s; } .v-icon.is-small { height: 32px; width: 32px; min-width: 32px; } .v-icon.is-small .fas, .v-icon.is-small .fab, .v-icon.is-small .far, .v-icon.is-small .fal { font-size: 1rem; } .v-icon.is-small .lnil, .v-icon.is-small .lnir, .v-icon.is-small .fas, .v-icon.is-small .fab { font-size: 1.2rem; } .v-icon.is-small svg { height: 16px; width: 16px; stroke-width: 1.4px; } .v-icon.is-medium { height: 50px; width: 50px; min-width: 50px; } .v-icon.is-medium.is-bordered { border-width: 1.6px; } .v-icon.is-medium .fas, .v-icon.is-medium .fab, .v-icon.is-medium .far, .v-icon.is-medium .fal { font-size: 1.5rem; } .v-icon.is-medium .lnil, .v-icon.is-medium .lnir, .v-icon.is-medium .fas, .v-icon.is-medium .fab { font-size: 1.7rem; } .v-icon.is-medium svg { height: 25px; width: 25px; stroke-width: 1.4px; } .v-icon.is-large { height: 68px; width: 68px; min-width: 68px; } .v-icon.is-large.is-bordered { border-width: 2px; } .v-icon.is-large .fas, .v-icon.is-large .fab, .v-icon.is-large .far, .v-icon.is-large .fal { font-size: 2rem; } .v-icon.is-large .lnil, .v-icon.is-large .lnir, .v-icon.is-large .fas, .v-icon.is-large .fab { font-size: 2.2rem; } .v-icon.is-large svg { height: 34px; width: 34px; stroke-width: 2px; } .v-icon.is-big { height: 80px; width: 80px; min-width: 80px; } .v-icon.is-big.is-bordered { border-width: 2px; } .v-icon.is-big .fas, .v-icon.is-big .fab, .v-icon.is-big .far, .v-icon.is-big .fal { font-size: 2.4rem; } .v-icon.is-big .lnil, .v-icon.is-big .lnir, .v-icon.is-big .fas, .v-icon.is-big .fab { font-size: 2.6rem; } .v-icon.is-big svg { height: 40px; width: 40px; stroke-width: 3px; } .v-icon.is-xl { height: 100px; width: 100px; min-width: 100px; } .v-icon.is-xl.is-bordered { border-width: 2px; } .v-icon.is-xl .fas, .v-icon.is-xl .fab, .v-icon.is-xl .far, .v-icon.is-xl .fal { font-size: 3rem; } .v-icon.is-xl .lnil, .v-icon.is-xl .lnir, .v-icon.is-xl .fas, .v-icon.is-xl .fab { font-size: 3.4rem; } .v-icon.is-xl svg { height: 50px; width: 50px; stroke-width: 3px; } .v-icon.is-rounded { border-radius: var(--radius-rounded); } .v-icon.is-primary { background: var(--primary-light-42); } .v-icon.is-primary.is-bordered { border-color: var(--primary); } .v-icon.is-primary i { color: var(--primary); } .v-icon.is-primary svg { color: var(--primary); } .v-icon.is-secondary { background: var(--secondary-light-42); } .v-icon.is-secondary.is-bordered { border-color: var(--secondary); } .v-icon.is-secondary i { color: var(--secondary); } .v-icon.is-secondary svg { color: var(--secondary); } .v-icon.is-accent { background: var(--primary-light-36); } .v-icon.is-accent.is-bordered { border-color: var(--primary); } .v-icon.is-accent i { color: var(--primary); } .v-icon.is-accent svg { color: var(--primary); } .v-icon.is-success { background: var(--success-light-45); } .v-icon.is-success.is-bordered { border-color: var(--success); } .v-icon.is-success i { color: var(--success); } .v-icon.is-success svg { color: var(--success); } .v-icon.is-info { background: var(--info-light-45); } .v-icon.is-info.is-bordered { border-color: var(--info); } .v-icon.is-info i { color: var(--info); } .v-icon.is-info svg { color: var(--info); } .v-icon.is-warning { background: var(--warning-light-32); } .v-icon.is-warning.is-bordered { border-color: var(--warning); } .v-icon.is-warning i { color: var(--warning); } .v-icon.is-warning svg { color: var(--warning); } .v-icon.is-danger { background: var(--danger-light-36); } .v-icon.is-danger.is-bordered { border-color: var(--danger); } .v-icon.is-danger i { color: var(--danger); } .v-icon.is-danger svg { color: var(--danger); } .v-icon.is-purple { background: var(--purple-light-36); } .v-icon.is-purple.is-bordered { border-color: var(--purple); } .v-icon.is-purple i { color: var(--purple); } .v-icon.is-purple svg { color: var(--purple); } .v-icon.is-blue { background: var(--blue-light-34); } .v-icon.is-blue.is-bordered { border-color: var(--blue); } .v-icon.is-blue i { color: var(--blue); } .v-icon.is-blue svg { color: var(--blue); } .v-icon.is-yellow { background: var(--yellow-light-22); } .v-icon.is-yellow.is-bordered { border-color: var(--yellow); } .v-icon.is-yellow i { color: var(--yellow); } .v-icon.is-yellow svg { color: var(--yellow); } .v-icon.is-orange { background: var(--orange-light-20); } .v-icon.is-orange.is-bordered { border-color: var(--orange); } .v-icon.is-orange i { color: var(--orange); } .v-icon.is-orange svg { color: var(--orange); } .v-icon.is-green { background: var(--green-light-23); } .v-icon.is-green.is-bordered { border-color: var(--green); } .v-icon.is-green i { color: var(--green); } .v-icon.is-green svg { color: var(--green); } .v-icon.is-red { background: var(--red-light-38); } .v-icon.is-red.is-bordered { border-color: var(--red); } .v-icon.is-red i { color: var(--red); } .v-icon.is-red svg { color: var(--red); } .v-icon.is-bordered { border: 1px solid var(--muted-grey); } .v-icon .fas, .v-icon .fab, .v-icon .far, .v-icon .fal { font-size: 1.2rem; color: var(--muted-grey); transition: color 0.3s; } .v-icon .lnil, .v-icon .lnir, .v-icon .fas, .v-icon .fab { font-size: 1.4rem; color: var(--muted-grey); transition: color 0.3s; } .v-icon svg { height: 20px; width: 20px; stroke-width: 1.4px; } /* ========================================================================== 2. Icons Dark Mode ========================================================================== */ .is-dark .v-icon.is-primary { background: var(--primary); } .is-dark .v-icon.is-primary.is-bordered { border-color: var(--primary); } .is-dark .v-icon.is-primary .lnil, .is-dark .v-icon.is-primary .lnir, .is-dark .v-icon.is-primary .fas, .is-dark .v-icon.is-primary .fab { color: var(--white); } .is-dark .v-icon.is-primary svg { color: var(--smoke-white); } .is-dark .v-icon.is-accent { background: var(--primary); } .is-dark .v-icon.is-accent.is-bordered { border-color: var(--primary); } .is-dark .v-icon.is-accent .lnil, .is-dark .v-icon.is-accent .lnir, .is-dark .v-icon.is-accent .fas, .is-dark .v-icon.is-accent .fab { color: var(--white); } .is-dark .v-icon.is-accent svg { color: var(--smoke-white); } .is-dark .v-icon.is-success { background: var(--success); } .is-dark .v-icon.is-success.is-bordered { border-color: var(--success); } .is-dark .v-icon.is-success .lnil, .is-dark .v-icon.is-success .lnir, .is-dark .v-icon.is-success .fas, .is-dark .v-icon.is-success .fab { color: var(--white); } .is-dark .v-icon.is-success svg { color: var(--smoke-white); } .is-dark .v-icon.is-info { background: var(--info); } .is-dark .v-icon.is-info.is-bordered { border-color: var(--info); } .is-dark .v-icon.is-info .lnil, .is-dark .v-icon.is-info .lnir, .is-dark .v-icon.is-info .fas, .is-dark .v-icon.is-info .fab { color: var(--white); } .is-dark .v-icon.is-info svg { color: var(--smoke-white); } .is-dark .v-icon.is-warning { background: var(--warning); } .is-dark .v-icon.is-warning.is-bordered { border-color: var(--warning); } .is-dark .v-icon.is-warning .lnil, .is-dark .v-icon.is-warning .lnir, .is-dark .v-icon.is-warning .fas, .is-dark .v-icon.is-warning .fab { color: var(--white); } .is-dark .v-icon.is-warning svg { color: var(--smoke-white); } .is-dark .v-icon.is-danger { background: var(--danger); } .is-dark .v-icon.is-danger.is-bordered { border-color: var(--danger); } .is-dark .v-icon.is-danger .lnil, .is-dark .v-icon.is-danger .lnir, .is-dark .v-icon.is-danger .fas, .is-dark .v-icon.is-danger .fab { color: var(--white); } .is-dark .v-icon.is-danger svg { color: var(--smoke-white); } .is-dark .v-icon.is-purple { background: var(--purple); } .is-dark .v-icon.is-purple.is-bordered { border-color: var(--purple); } .is-dark .v-icon.is-purple .lnil, .is-dark .v-icon.is-purple .lnir, .is-dark .v-icon.is-purple .fas, .is-dark .v-icon.is-purple .fab { color: var(--white); } .is-dark .v-icon.is-purple svg { color: var(--smoke-white); } .is-dark .v-icon.is-blue { background: var(--blue); } .is-dark .v-icon.is-blue.is-bordered { border-color: var(--blue); } .is-dark .v-icon.is-blue .lnil, .is-dark .v-icon.is-blue .lnir, .is-dark .v-icon.is-blue .fas, .is-dark .v-icon.is-blue .fab { color: var(--white); } .is-dark .v-icon.is-blue svg { color: var(--smoke-white); } .is-dark .v-icon.is-yellow { background: var(--yellow); } .is-dark .v-icon.is-yellow.is-bordered { border-color: var(--yellow); } .is-dark .v-icon.is-yellow .lnil, .is-dark .v-icon.is-yellow .lnir, .is-dark .v-icon.is-yellow .fas, .is-dark .v-icon.is-yellow .fab { color: var(--white); } .is-dark .v-icon.is-yellow svg { color: var(--smoke-white); } .is-dark .v-icon.is-orange { background: var(--orange); } .is-dark .v-icon.is-orange.is-bordered { border-color: var(--orange); } .is-dark .v-icon.is-orange .lnil, .is-dark .v-icon.is-orange .lnir, .is-dark .v-icon.is-orange .fas, .is-dark .v-icon.is-orange .fab { color: var(--white); } .is-dark .v-icon.is-orange svg { color: var(--smoke-white); } .is-dark .v-icon.is-green { background: var(--green); } .is-dark .v-icon.is-green.is-bordered { border-color: var(--green); } .is-dark .v-icon.is-green .lnil, .is-dark .v-icon.is-green .lnir, .is-dark .v-icon.is-green .fas, .is-dark .v-icon.is-green .fab { color: var(--white); } .is-dark .v-icon.is-green svg { color: var(--smoke-white); } .is-dark .v-icon.is-red { background: var(--red); } .is-dark .v-icon.is-red.is-bordered { border-color: var(--red); } .is-dark .v-icon.is-red .lnil, .is-dark .v-icon.is-red .lnir, .is-dark .v-icon.is-red .fas, .is-dark .v-icon.is-red .fab { color: var(--white); } .is-dark .v-icon.is-red svg { color: var(--smoke-white); } /*! _links.scss | Vuero | Css ninja 2020-2021 */ /* 1. Action Link 2. Action Link Dark Mode */ /* ========================================================================== 1. Action Link ========================================================================== */ .action-link { position: relative; display: inline-block; font-weight: 500; color: var(--primary); transition: opacity 0.3s; } .action-link::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; border-bottom: 1.6px dotted var(--primary); } .action-link:hover { color: var(--primary); opacity: 0.6; } /* ========================================================================== 2. Action Link Dark Mode ========================================================================== */ .is-dark .action-link { color: var(--primary); } .is-dark .action-link::after { border-bottom-color: var(--primary); } /*! _lists.scss | Vuero | Css ninja 2020-2021 */ /* 1. User List 2. User List Dark mode */ /* ========================================================================== 1. User List ========================================================================== */ .user-list li { display: flex; justify-content: flex-start; align-items: center; padding: 6px 0; } .user-list .user-list-avatar img { width: 40px; height: 40px; border-radius: 100px; } .user-list .user-list-info { margin: 0 10px; } .user-list .user-list-info .name { font-family: var(--font-alt); font-size: 0.95rem; font-weight: 600; color: var(--dark-text); } .user-list .user-list-info .position { font-family: var(--font); font-size: 12px; color: var(--light-text); } .user-list .user-list-status { height: 10px; width: 10px; border-radius: 100px; background: var(--fade-grey); margin-left: auto; margin-right: 1rem; } .user-list .user-list-status.is-offline { background: var(--fade-grey); } .user-list .user-list-status.is-online { background: var(--success); } .user-list .user-list-status.is-busy { background: var(--warning); } .user-list .user-list-icons { display: flex; justify-content: flex-end; margin-left: auto; } .user-list .user-list-icons a { display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; border-radius: var(--radius-rounded); color: var(--light-text-light-15); font-size: 0.9rem; transition: all 0.3s; } .user-list .user-list-icons a:hover { color: var(--light-text); background: var(--fade-grey-light-3); } /* ========================================================================== 2. User List Dark mode ========================================================================== */ .is-dark .user-list .user-list-icons a:hover { background: var(--dark-sidebar-light-10); } /*! _tags.scss | Vuero | Css ninja 2020-2021 */ /* 1. Tags 2. Tags Dark mode */ /* ========================================================================== 1. Tags ========================================================================== */ .tag:not(body) { display: inline-block; line-height: 2.3; height: 2.4em; } .tag:not(body).is-rounded { padding-left: 1em; padding-right: 1em; } .tag:not(body).is-curved { padding-left: 0.85em; padding-right: 0.85em; line-height: 2.5; height: 2.6em; border-radius: 8px; } .tag:not(body).is-elevated { box-shadow: var(--light-box-shadow); } .tag:not(body).is-solid { background: var(--white); border: 1px solid var(--fade-grey-dark-3); color: var(--light-text); } .tag:not(body).is-primary.is-elevated { box-shadow: var(--primary-box-shadow); } .tag:not(body).is-primary.is-outlined { background: none !important; color: var(--primary); border: 1px solid var(--primary); } .tag:not(body).is-success.is-elevated { box-shadow: var(--success-box-shadow); } .tag:not(body).is-success.is-outlined { background: none !important; color: var(--success); border: 1px solid var(--success); } .tag:not(body).is-info.is-elevated { box-shadow: var(--info-box-shadow); } .tag:not(body).is-info.is-outlined { background: none !important; color: var(--info); border: 1px solid var(--info); } .tag:not(body).is-warning.is-elevated { box-shadow: var(--warning-box-shadow); } .tag:not(body).is-warning.is-outlined { background: none !important; color: var(--warning); border: 1px solid var(--warning); } .tag:not(body).is-danger.is-elevated { box-shadow: var(--danger-box-shadow); } .tag:not(body).is-danger.is-outlined { background: none !important; color: var(--danger); border: 1px solid var(--danger); } .tag:not(body).is-secondary { background: var(--secondary); color: var(--white); } .tag:not(body).is-secondary.is-elevated { box-shadow: var(--secondary-box-shadow); } .tag:not(body).is-secondary.is-outlined { background: none !important; color: var(--secondary); border: 1px solid var(--secondary); } .tag:not(body).is-green { background: var(--green); color: var(--white); } .tag:not(body).is-green.is-elevated { box-shadow: var(--green-box-shadow); } .tag:not(body).is-green.is-outlined { background: none !important; color: var(--green); border: 1px solid var(--green); } .tag:not(body).is-blue { background: var(--blue); color: var(--white); } .tag:not(body).is-blue.is-elevated { box-shadow: var(--blue-box-shadow); } .tag:not(body).is-blue.is-outlined { background: none !important; color: var(--blue); border: 1px solid var(--blue); } .tag:not(body).is-green { background: var(--green); color: var(--white); } .tag:not(body).is-green.is-elevated { box-shadow: var(--green-box-shadow); } .tag:not(body).is-green.is-outlined { background: none !important; color: var(--green); border: 1px solid var(--green); } .tag:not(body).is-purple { background: var(--purple); color: var(--white); } .tag:not(body).is-purple.is-elevated { box-shadow: var(--purple-box-shadow); } .tag:not(body).is-purple.is-outlined { background: none !important; color: var(--purple); border: 1px solid var(--purple); } .tag:not(body).is-orange { background: var(--orange); color: var(--white); } .tag:not(body).is-orange.is-elevated { box-shadow: var(--orange-box-shadow); } .tag:not(body).is-orange.is-outlined { background: none !important; color: var(--orange); border: 1px solid var(--orange); } /* ========================================================================== 2. Tags Dark mode ========================================================================== */ .is-dark .tag:not(.is-primary):not(.is-secondary):not(.is-success):not(.is-info):not(.is-warning):not(.is-danger):not(.is-orange):not(.is-green):not(.is-blue):not(.is-purple) { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-10); color: var(--dark-dark-text); } .is-dark .tag.is-primary { background: var(--primary); } .is-dark .tag.is-primary.is-outlined { border-color: var(--primary); color: var(--primary); } .is-dark .tag.is-primary.is-light { background: var(--primary-light-22); color: var(--primary); } #nprogress .bar { background: var(--primary); z-index: 100000; } #nprogress .spinner { display: none; } /*! _accordion.scss | Vuero | Css ninja 2020-2021 */ /* 1. Accordion 2. Accordion Dark mode 3. Collapse 4. Collapse Dark mode 5. Image Accordion */ /* ========================================================================== 1. Accordion ========================================================================== */ .single-accordion { background: var(--white); margin: 0 auto; box-shadow: var(--light-box-shadow); border-radius: var(--radius-large); overflow: hidden; } .single-accordion .accordion-item.is-active .accordion-header::before { background-color: var(--primary); } .single-accordion .accordion-item.is-active .accordion-content { display: block; } .single-accordion .accordion-header { border-bottom: 1px solid #dde0e7; color: var(--dark-text); cursor: pointer; font-weight: 600; font-size: 0.95rem; font-family: var(--font-alt); padding: 1.5rem; display: block; } .single-accordion .accordion-header:hover { background: #f6f7f9; } .single-accordion .accordion-header::before { content: ""; vertical-align: middle; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: var(--radius-rounded); background-color: #b1b5be; margin-right: 0.75rem; } .single-accordion .accordion-content { display: none; border-bottom: 1px solid #dde0e7; background: #f6f7f9; padding: 1.5rem; color: var(--light-text); font-family: var(--font); } /* ========================================================================== 2. Accordion Dark mode ========================================================================== */ .is-dark .single-accordion { background: var(--dark-sidebar-light-4); border-color: var(--dark-sidebar-light-12); } .is-dark .single-accordion .accordion-header { color: var(--dark-dark-text); border-color: var(--dark-sidebar-light-12); } .is-dark .single-accordion .accordion-header:hover { background: var(--dark-sidebar-light-6); } .is-dark .single-accordion .accordion-header::before { background: var(--dark-sidebar); } .is-dark .single-accordion .accordion-header.is-active::before { background-color: var(--primary); } .is-dark .single-accordion .accordion-content { background: var(--dark-sidebar); border-color: var(--dark-sidebar-light-8); } /* ========================================================================== 3. Collapse ========================================================================== */ .collapse { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 0; margin-bottom: 1.5rem; } .collapse.has-margin-bottom { margin-bottom: 1.5rem; } .collapse.is-flat { box-shadow: none; } .collapse.is-raised { box-shadow: var(--light-box-shadow); } .collapse.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .collapse.is-primary .title, .collapse.is-primary .subtitle, .collapse.is-primary h1, .collapse.is-primary h2, .collapse.is-primary h3, .collapse.is-primary h4, .collapse.is-primary p { color: var(--smoke-white) !important; } .collapse.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .collapse.is-secondary .title, .collapse.is-secondary .subtitle, .collapse.is-secondary h1, .collapse.is-secondary h2, .collapse.is-secondary h3, .collapse.is-secondary h4, .collapse.is-secondary p { color: var(--smoke-white) !important; } .collapse.is-info { background: var(--info) !important; border-color: var(--info) !important; } .collapse.is-info .title, .collapse.is-info .subtitle, .collapse.is-info h1, .collapse.is-info h2, .collapse.is-info h3, .collapse.is-info h4, .collapse.is-info p { color: var(--smoke-white) !important; } .collapse.is-success { background: var(--success) !important; border-color: var(--success) !important; } .collapse.is-success .title, .collapse.is-success .subtitle, .collapse.is-success h1, .collapse.is-success h2, .collapse.is-success h3, .collapse.is-success h4, .collapse.is-success p { color: var(--smoke-white) !important; } .collapse.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .collapse.is-warning .title, .collapse.is-warning .subtitle, .collapse.is-warning h1, .collapse.is-warning h2, .collapse.is-warning h3, .collapse.is-warning h4, .collapse.is-warning p { color: var(--smoke-white) !important; } .collapse.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .collapse.is-danger .title, .collapse.is-danger .subtitle, .collapse.is-danger h1, .collapse.is-danger h2, .collapse.is-danger h3, .collapse.is-danger h4, .collapse.is-danger p { color: var(--smoke-white) !important; } .collapse .card-head { display: flex; align-items: center; justify-content: space-between; } .collapse .card-head .left, .collapse .card-head .right { display: flex; align-items: center; } .collapse .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .collapse .card-head .right { justify-content: flex-end; } .collapse .card-inner { padding-top: 1.75rem; } .collapse.has-plus[open] .collapse-header .collapse-icon { transform: rotate(45deg); } .collapse.has-plus[open] .collapse-content { display: block; } .collapse.has-chevron[open] .collapse-header .collapse-icon { transform: rotate(180deg); } .collapse.has-chevron[open] .collapse-content { display: block; } .collapse[open] .collapse-icon { border-color: var(--fade-grey-dark-3) !important; box-shadow: var(--light-box-shadow); } .collapse .collapse-header { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 20px; cursor: pointer; } .collapse .collapse-header h3 { font-family: var(--font-alt); font-size: 0.9rem; font-weight: 600; color: var(--dark-text); } .collapse .collapse-header .collapse-icon { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; background: var(--white); border-radius: var(--radius-rounded); border: 1px solid transparent; transition: all 0.3s; } .collapse .collapse-header .collapse-icon > span { display: block; height: 16px; width: 16px; } .collapse .collapse-header .collapse-icon svg { height: 16px; width: 16px; color: var(--light-text); } .collapse .collapse-content { display: none; padding: 0 20px 20px 20px; color: var(--light-text); font-family: var(--font); } .collapse .collapse-content p:not(:last-child) { margin-bottom: 12px; } /* ========================================================================== 4. Collapse Dark mode ========================================================================== */ .is-dark .collapse { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .collapse .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .collapse .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .collapse .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .collapse[open] .collapse-header .collapse-icon { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4) !important; } .is-dark .collapse .collapse-header h3 { color: var(--dark-dark-text); } .is-dark .collapse .collapse-header .collapse-icon { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-6); } /* ========================================================================== 5. Image Accordion ========================================================================== */ .image-accordion { width: 100%; height: 250px; overflow: hidden; margin: 50px auto; } .image-accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .image-accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .image-accordion ul li div { display: block; overflow: hidden; width: 100%; } .image-accordion ul li div a { display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: var(--white); text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .image-accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); -webkit-transition: all 400ms ease; transform: translateX(-20px); transition: all 400ms ease; } .image-accordion ul li div a h2 { font-family: var(--font-alt); font-weight: 300; text-overflow: clip; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 0; top: 160px; } .image-accordion ul li div a p { top: 160px; font-size: 13.5px; color: var(--white); } .image-accordion ul:hover li, .image-accordion ul:focus-within li { width: 8%; } .image-accordion ul li:focus { outline: none; } .image-accordion ul:hover li:hover, .image-accordion ul li:focus, .image-accordion ul:focus-within li:focus { width: 60%; } .image-accordion ul:hover li:hover a, .image-accordion ul li:focus a, .image-accordion ul:focus-within li:focus a { background: rgba(0, 0, 0, 0.4); } .image-accordion ul:hover li:hover a *, .image-accordion ul li:focus a *, .image-accordion ul:focus-within li:focus a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .image-accordion ul:hover li { width: 8% !important; } .image-accordion ul:hover li a * { opacity: 0 !important; } .image-accordion ul:hover li:hover { width: 60% !important; } .image-accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } .image-accordion ul:hover li:hover a * { opacity: 1 !important; -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 600px) { .image-accordion { height: auto; } .image-accordion ul li, .image-accordion ul li:hover, .image-accordion ul:hover li, .image-accordion ul:hover li:hover { position: relative; display: table; table-layout: fixed; width: 100% !important; -webkit-transition: none; transition: none; } } /*! _breadcrumbs.scss | Vuero | Css Ninja 2020-2021 */ /* 1. Breadcrumbs 2. Breadcrumbs Dark mode */ /* ========================================================================== 1. Breadcrumbs ========================================================================== */ .breadcrumb.is-narrow { margin-bottom: 10px; } .breadcrumb ul li:first-child .breadcrumb-item { padding-left: 0; } .breadcrumb ul li .breadcrumb-item { font-family: var(--font); color: var(--light-text); padding: 0 0.75em; } .breadcrumb ul li .breadcrumb-item .icon.is-solo svg { top: 2px; } .breadcrumb ul li .breadcrumb-item .icon svg { position: relative; top: 0; height: 16px; min-width: 16px; } .breadcrumb ul li a.breadcrumb-item:hover { color: var(--primary); } /* ========================================================================== 2. Breadcrumbs Dark mode ========================================================================== */ .is-dark .breadcrumb ul li a.breadcrumb-item:hover { color: var(--primary); } /*! _datepicker.scss | Vuero | Css ninja 2020-2021 */ /* 0. V-Calendar 1. V-Calendar Dark mode */ /* ========================================================================== 0. V-Calendar ========================================================================== */ /* This probably should not be here */ .vc-day-popover-row-content { color: var(--white); } /* Need to see, if it can be put at its proper place */ .vc-pane-container .vc-pane-layout { font-family: var(--font); } .vc-pane-container .vc-pane-layout .vc-pane { padding: 1rem; } .vc-pane-container .vc-pane-layout .vc-header .vc-title { font-size: 1rem; font-weight: 500; } .vc-pane-container .vc-pane-layout .vc-weeks { margin-top: 0.75rem; } .vc-pane-container .vc-pane-layout .vc-weeks .vc-weekday { font-weight: 400; font-size: 0.9rem; } .vc-pane-container .vc-day-content { font-size: 0.9rem !important; font-weight: 500; } .vc-pane-container .vc-arrows-container { top: 1.3rem; padding: 8px 24px; } .vc-pane-container .vc-arrows-container .vc-arrow { border-radius: var(--radius-rounded); display: flex; justify-content: center; align-items: center; } .vc-pane-container .vc-arrows-container .vc-arrow svg { position: relative; top: -1px; height: 20px; width: 20px; } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container { padding: 0.75rem; } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header { margin-bottom: 0.75rem; } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-title:active, .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-title:focus, .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-arrow:active, .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-arrow:focus { outline: none !important; border-color: transparent !important; } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-arrow { position: relative; top: 0.25rem; border-radius: var(--radius-rounded); width: 24px; height: 24px; min-width: 24px; display: flex; justify-content: center; align-items: center; color: var(--white); } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-arrow svg { position: relative; top: -1px; height: 20px; width: 20px; stroke: var(--white); } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-items .vc-nav-item { color: var(--white); font-family: var(--font); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; padding-top: 0.5rem; padding-bottom: 0.5rem; } .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-items .vc-nav-item.is-active { background: var(--primary) !important; } .vc-time-content .vc-time-date > span { font-size: 0.9rem; } .vc-time-content .vc-am-pm > button { font-family: var(--font); font-size: 0.85rem; } .vc-time-picker .vc-date-time .vc-date > span { font-family: var(--font); font-size: 0.9rem; } /* ========================================================================== 1. V-Calendar Dark mode ========================================================================== */ .is-dark .vc-popover-content-wrapper .vc-popover-caret { border-color: var(--dark-sidebar) !important; } .is-dark .vc-container { background: var(--dark-sidebar) !important; border: 1px solid var(--dark-sidebar-light-8) !important; } .is-dark .vc-pane-container .vc-pane-layout .vc-header .vc-title { color: var(--dark-dark-text) !important; } .is-dark .vc-pane-container .vc-day-content { color: var(--dark-dark-text); } .is-dark .vc-pane-container .vc-day-content:hover { background: var(--dark-sidebar-light-4) !important; } .is-dark .vc-pane-container .vc-arrows-container .vc-arrow:hover { background: var(--dark-sidebar-light-4) !important; } .is-dark .vc-popover-content-wrapper .vc-nav-popover-container { background: var(--dark-sidebar-dark-4) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-title:hover, .is-dark .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-header .vc-nav-arrow:hover { background: var(--dark-sidebar-light-2) !important; } .is-dark .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-items .vc-nav-item { color: var(--white); } .is-dark .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-items .vc-nav-item:not(.is-active):hover { background: var(--dark-sidebar-light-2) !important; } .is-dark .vc-popover-content-wrapper .vc-nav-popover-container .vc-nav-container .vc-nav-items .vc-nav-item.is-active { background: var(--primary) !important; } .is-dark .vc-time-picker.vc-bordered { border-color: var(--dark-sidebar-light-12) !important; } .is-dark .vc-time-picker .vc-date-time .vc-date .vc-time-weekday { color: var(--light-text) !important; } .is-dark .vc-time-picker .vc-time-content .vc-time-date .vc-time-weekday { color: var(--light-text) !important; } .is-dark .vc-time-picker .vc-time-content .vc-select select { background: var(--dark-sidebar-dark-4) !important; border-color: var(--dark-sidebar-dark-4) !important; color: var(--dark-dark-text) !important; } .is-dark .vc-time-picker .vc-time-content .vc-am-pm { background: var(--dark-sidebar-dark-4) !important; } .is-dark .vc-time-picker .vc-time-content .vc-am-pm > button { color: var(--white) !important; } /*! _dropdowns.scss | Vuero | Css ninja 2020-2021 */ /* 1. Dropdown class 2. Dropdown Dark mode */ /* ========================================================================== 1. Dropdown class ========================================================================== */ .dropdown.is-dots:hover .is-trigger, .dropdown.is-dots.is-active .is-trigger { background: var(--fade-grey-light-2); } .dropdown.is-dots:hover .is-trigger svg, .dropdown.is-dots.is-active .is-trigger svg { color: var(--light-text-dark-4); } .dropdown.is-dots .is-trigger { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; border-radius: var(--radius-rounded); cursor: pointer; transition: all 0.3s; } .dropdown.is-dots .is-trigger svg { height: 20px; width: 20px; color: var(--light-text); stroke-width: 1.6px; transition: stroke 0.3s; } .dropdown.is-dots .dropdown-menu { margin-top: 6px; padding-bottom: 0; text-align: left; } .dropdown.is-modern.is-active .caret { transform: rotate(180deg); } .dropdown.is-modern .is-trigger { padding-right: 0.75em; } .dropdown.is-modern .is-trigger .caret { height: 22px; width: 22px; display: flex; justify-content: center; align-items: center; transition: all 0.3s; margin-left: 6px; } .dropdown.is-modern .is-trigger .caret svg { height: 16px; width: 16px; color: var(--light-text); } .dropdown.is-modern .dropdown-menu { margin-top: 6px; } .dropdown.is-spaced .dropdown-menu { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.05); border-color: var(--fade-grey); padding-top: 0; min-width: 260px; } .dropdown.is-spaced .dropdown-menu.has-margin { margin-top: 10px; } .dropdown.is-spaced .dropdown-menu .dropdown-content { border: 1px solid var(--fade-grey); box-shadow: none; } .dropdown.is-spaced .dropdown-item { padding: 0.5rem 1rem; font-size: 0.95rem; color: var(--light-text); transition: all 0.3s; } .dropdown.is-spaced .dropdown-item:not(.is-button):hover, .dropdown.is-spaced .dropdown-item:not(.is-button).is-active { background: var(--fade-grey-light-3); color: var(--dark-text); } .dropdown.is-spaced .dropdown-item.no-hover:hover { background: var(--white); } .dropdown.is-spaced .dropdown-item.is-media { display: flex; align-items: center; } .dropdown.is-spaced .dropdown-item.is-media:hover .icon svg, .dropdown.is-spaced .dropdown-item.is-media.is-active .icon svg { color: var(--primary); } .dropdown.is-spaced .dropdown-item.is-media:hover .icon .lnir, .dropdown.is-spaced .dropdown-item.is-media:hover .icon .lnil, .dropdown.is-spaced .dropdown-item.is-media.is-active .icon .lnir, .dropdown.is-spaced .dropdown-item.is-media.is-active .icon .lnil { color: var(--primary); } .dropdown.is-spaced .dropdown-item.is-media .icon { display: flex; justify-content: center; align-items: center; height: 28px; width: 28px; } .dropdown.is-spaced .dropdown-item.is-media .icon svg { height: 18px; width: 18px; transition: stroke 0.3s; } .dropdown.is-spaced .dropdown-item.is-media .icon .lnir, .dropdown.is-spaced .dropdown-item.is-media .icon .lnil { font-size: 16px; transition: color 0.3s; } .dropdown.is-spaced .dropdown-item.is-media .item-img { display: block; height: 32px; width: 32px; border-radius: var(--radius-large); } .dropdown.is-spaced .dropdown-item.is-media .item-img.is-rounded { border-radius: var(--radius-rounded); } .dropdown.is-spaced .dropdown-item.is-media .meta { margin-left: 10px; } .dropdown.is-spaced .dropdown-item.is-media .meta span { display: block; line-height: 1.3; } .dropdown.is-spaced .dropdown-item.is-media .meta span:first-child { font-family: var(--font-alt); font-size: 0.9rem; font-weight: 600; color: var(--dark-text); } .dropdown.is-spaced .dropdown-item.is-media .meta span:nth-child(2) { font-family: var(--font); color: var(--light-text); font-size: 0.9rem; } .dropdown .is-trigger.button { font-family: var(--font); } .dropdown .is-trigger.button:focus { outline: none; border-color: var(--fade-grey-dark-4); box-shadow: var(--light-box-shadow); } .dropdown .is-trigger.button .base-caret { display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; } .dropdown .dropdown-menu .dropdown-item { color: var(--light-text); font-family: var(--font); } .dropdown .dropdown-menu .dropdown-item:hover { color: var(--dark-text); } .dropdown .dropdown-menu .dropdown-item.is-active { background: var(--fade-grey-light-3); } .dropdown .dropdown-menu .dropdown-item.has-child { position: relative; display: flex; justify-content: space-between; align-items: center; padding-right: 1rem; } .dropdown .dropdown-menu .dropdown-item.has-child svg { height: 16px; width: 16px; color: var(--muted-grey); } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown { position: absolute; right: -282px; top: 0; width: 280px; transition: all 0.3s; opacity: 0; transform: translateY(10px); pointer-events: none; } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner { position: relative; height: 100%; width: 100%; background: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius-large); padding: 8px 0; } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner .column-setting { padding: 0 6px; display: flex; align-items: center; margin-bottom: 10px; } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner .column-setting label { transform: scale(0.7); } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner .column-setting .text span { display: block; font-size: 0.8rem; } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner .column-setting .text span:first-child { color: var(--dark-text); font-weight: 500; } .dropdown .dropdown-menu .dropdown-item.has-child .child-dropdown .inner .column-setting .text span:nth-child(2) { color: var(--muted-grey); } .dropdown .dropdown-menu .dropdown-item.has-child:hover .child-dropdown { opacity: 1; transform: translateY(0); pointer-events: all; } /* ========================================================================== 2. Dropdown Dark mode ========================================================================== */ .is-dark .toolbar-link:hover { background: var(--dark-sidebar-light-2) !important; } .is-dark .toolbar-link svg { color: var(--dark-dark-text); } .is-dark .dropdown.is-spaced:hover .is-trigger, .is-dark .dropdown.is-spaced.is-active .is-trigger, .is-dark .dropdown.is-dots:hover .is-trigger, .is-dark .dropdown.is-dots.is-active .is-trigger { background: var(--dark-sidebar-light-2) !important; } .is-dark .dropdown.is-spaced:hover .is-trigger svg, .is-dark .dropdown.is-spaced.is-active .is-trigger svg, .is-dark .dropdown.is-dots:hover .is-trigger svg, .is-dark .dropdown.is-dots.is-active .is-trigger svg { color: var(--dark-dark-text); } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-8) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .heading, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .heading { border-color: var(--dark-sidebar-light-8) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .heading:hover, .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .heading *:hover, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .heading:hover, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .heading *:hover { background: var(--dark-sidebar) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .heading .heading-right .notification-link, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .heading .heading-right .notification-link { color: var(--primary) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .notification-list li .notification-item:hover, .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .notification-list li .notification-item *:hover, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .notification-list li .notification-item:hover, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .notification-list li .notification-item *:hover { background: var(--dark-sidebar) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .notification-list li .notification-item .user-content .user-info, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .notification-list li .notification-item .user-content .user-info { color: var(--dark-dark-text) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media:hover .icon svg, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media:hover .icon svg { color: var(--primary) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media:hover .icon .lnir, .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media:hover .icon .lnil, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media:hover .icon .lnir, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media:hover .icon .lnil { color: var(--primary); } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media.is-active .icon svg, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media.is-active .icon svg { color: var(--white) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media.is-active .icon .lnir, .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media.is-active .icon .lnil, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media.is-active .icon .lnir, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media.is-active .icon .lnil { color: var(--white); } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media.is-active .meta span, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media.is-active .meta span { color: var(--white) !important; } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media .icon svg, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media .icon svg { color: var(--light-text); } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media .icon .lnir, .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media .icon .lnil, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media .icon .lnir, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media .icon .lnil { color: var(--light-text); } .is-dark .dropdown.is-spaced .dropdown-menu .dropdown-content .is-media .meta span:first-child, .is-dark .dropdown.is-dots .dropdown-menu .dropdown-content .is-media .meta span:first-child { color: var(--dark-dark-text); } .is-dark .dropdown .dropdown-menu .dropdown-content { background: var(--dark-sidebar); border-color: var(--dark-sidebar-light-8) !important; } .is-dark .dropdown .dropdown-menu .dropdown-content .dropdown-item { color: var(--light-text); } .is-dark .dropdown .dropdown-menu .dropdown-content .dropdown-item.is-active { background: var(--dark-sidebar-light-2) !important; } .is-dark .dropdown .dropdown-menu .dropdown-content .dropdown-divider { background: var(--dark-sidebar-light-5); } .is-dark .dropdown .dropdown-menu .dropdown-content a:hover { background: var(--dark-sidebar-light-5) !important; } .is-dark .child-dropdown .inner { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .child-dropdown .inner:hover { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-4) !important; } .is-dark .child-dropdown .inner ul li .text span:first-child { color: var(--dark-dark-text) !important; } /*! _editors.scss | Vuero | Css Ninja 2020-2021 */ /* 1. Summernote Editor 2. Summernote Dark mode 3. Sun Editor Dark mode */ /* ========================================================================== 1. Summernote Editor ========================================================================== */ .note-modal .note-modal-content .note-modal-header h4 { font-family: var(--font); font-size: 1.2rem !important; font-weight: 500; color: var(--dark-text); } .note-modal .note-modal-content .note-modal-header .close { outline: none !important; } .note-modal .note-modal-content .note-modal-body { padding: 30px; } .note-modal .note-modal-content .note-modal-body .form-group label { font-family: var(--font); font-size: 1rem; font-weight: 400; color: var(--light-text); } .note-modal .note-modal-content .note-modal-footer { padding: 0 16px; height: 70px; background: var(--widget-grey-dark-2); display: flex; align-items: center; justify-content: flex-end; } .note-modal .note-modal-content .note-modal-footer .btn-primary { height: 40px; background: var(--primary); padding-bottom: 8px; opacity: 1; min-width: 130px; border-radius: var(--radius-large); } /* ========================================================================== 2. Summernote Dark mode ========================================================================== */ .is-dark .note-editor .note-toolbar { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12); } .is-dark .note-editor .note-toolbar .note-btn-group .note-btn { background: var(--dark-sidebar-light-4); border-color: var(--dark-sidebar-light-12); } .is-dark .note-editor .note-toolbar .note-btn-group .note-btn i, .is-dark .note-editor .note-toolbar .note-btn-group .note-btn .note-icon-caret { color: var(--dark-dark-text); } .is-dark .note-editor .note-toolbar .note-btn-group .note-dropdown-menu { background: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-8); } .is-dark .note-editor .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item { color: var(--light-text); } .is-dark .note-editor .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item:hover { background: var(--dark-sidebar-light-1); } .is-dark .note-editor .note-toolbar .note-btn-group .note-dropdown-menu .note-dimension-display { color: var(--dark-dark-text); } .is-dark .note-editor .note-editable .table tbody td { border-color: var(--dark-sidebar-light-12) !important; } .is-dark .note-editor .note-popover { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12); } .is-dark .note-editor .note-popover.bottom .note-popover-arrow::after { border-bottom-color: var(--dark-sidebar-light-2); } .is-dark .note-editor .note-popover .note-btn-group .note-btn { background: var(--dark-sidebar-light-4); border-color: var(--dark-sidebar-light-12); } .is-dark .note-editor .note-popover .note-btn-group .note-btn i, .is-dark .note-editor .note-popover .note-btn-group .note-btn .note-icon-caret { color: var(--dark-dark-text); } .note-modal .note-modal-content { border: none; } .note-modal .note-modal-content .note-modal-header { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12); } .note-modal .note-modal-content .note-modal-header h4 { color: var(--dark-dark-text); } .note-modal .note-modal-content .note-modal-header .close { color: var(--dark-dark-text) !important; } .note-modal .note-modal-content .note-modal-header .close .note-icon-close { color: var(--dark-dark-text) !important; } .note-modal .note-modal-content .note-modal-body { background: var(--dark-sidebar-light-4); } .note-modal .note-modal-content .note-modal-body .form-group input { background: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-8); color: var(--light-text); height: 38px; border-radius: var(--radius); } .note-modal .note-modal-content .note-modal-footer { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12); } .note-modal .note-modal-content .note-modal-footer .btn-primary { background: var(--primary); border-color: var(--primary); } /* ========================================================================== 3. Sun Editor Dark mode ========================================================================== */ .is-dark .sun-editor { width: 100%; border-color: var(--dark-sidebar-light-12) !important; background: var(--dark-sidebar-dark-2); } .is-dark .sun-editor .se-container .se-toolbar { background: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-12); outline: none; } .is-dark .sun-editor .se-container .se-toolbar.se-toolbar-balloon { box-shadow: var(--light-box-shadow) !important; } .is-dark .sun-editor .se-container .se-toolbar.se-toolbar-balloon .se-arrow.se-arrow-down::after { border-top-color: var(--dark-sidebar-dark-2); } .is-dark .sun-editor .se-container .se-toolbar .se-btn-tray .se-btn-module { background: var(--dark-sidebar-light-4); border-color: var(--dark-sidebar-light-12); } .is-dark .sun-editor .se-container .se-toolbar .se-btn-tray .se-btn-module .se-menu-list li button { color: var(--dark-dark-text); } .is-dark .sun-editor .se-container .se-toolbar .se-btn-tray .se-btn-module .se-menu-list li button:hover { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12); } .is-dark .sun-editor .se-container .se-wrapper { background: var(--dark-sidebar-dark-10); } .is-dark .sun-editor .se-container .se-wrapper .se-wrapper-inner { background: var(--dark-sidebar-dark-10); color: var(--dark-dark-text); } .is-dark .sun-editor .se-container .se-resizing-bar { background: var(--dark-sidebar-dark-2); border-color: var(--dark-sidebar-light-12); } /*! _modals.scss | Vuero | Css ninja 2020-2021 */ /* 1. Base Class 2. H Modal 3. H Modal Dark mode 4. Media queries */ /* ========================================================================== 1. Base Class ========================================================================== */ .modal { transition: all 0.5s; } .modal.is-big .modal-content { width: 100%; max-width: 840px; } .modal.is-big .modal-content .modal-card { width: 100%; } .modal.is-large .modal-content { width: 100%; max-width: 720px; } .modal.is-large .modal-content .modal-card { width: 100%; } .modal.is-medium .modal-content { width: 100%; max-width: 640px; } .modal.is-medium .modal-content .modal-card { width: 100%; } .modal.is-small .modal-content { width: 100%; max-width: 420px; } .modal.is-small .modal-content .modal-card { width: 100%; } .modal .modal-content { transition: all 0.4s; } /* ========================================================================== 2. H Modal ========================================================================== */ .v-modal.is-active { z-index: 200 !important; } .v-modal.is-active .v-modal-close { cursor: pointer; } .v-modal .v-modal-card { width: 100%; background: var(--white); border: 1px solid var(--fade-grey); border-radius: 8px; padding: 40px; } .v-modal .modal-background { background-color: hsla(var(--dark-sidebar-h), var(--dark-sidebar-s), var(--dark-sidebar-l), 0.8); } .v-modal .modal-content { transform: scale(1) !important; opacity: 1 !important; max-width: 540px; overflow-x: hidden; animation: fadeInDown 0.5s; margin: 0; padding: 0 10px; } .v-modal .modal-content .modal-card { max-width: 100%; margin: 0 auto; } .v-modal .modal-content .modal-card.is-rounded { border-radius: 12px; } .v-modal .modal-content .modal-card .modal-card-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--white); border-bottom-color: var(--fade-grey-dark-3); } .v-modal .modal-content .modal-card .modal-card-head.no-border { border-bottom-color: transparent; } .v-modal .modal-content .modal-card .modal-card-head h3 { font-family: var(--font-alt); color: var(--dark-text); font-weight: 600; font-size: 1rem; } .v-modal .modal-content .modal-card .modal-card-head .v-modal-close { display: flex; justify-content: center; align-items: center; background: none; border-color: transparent; width: 22px; height: 22px; padding: 0; outline: none !important; } .v-modal .modal-content .modal-card .modal-card-head .v-modal-close:hover svg { color: var(--primary); } .v-modal .modal-content .modal-card .modal-card-head .v-modal-close svg { width: 22px; height: 22px; color: var(--muted-grey); } .v-modal .modal-content .modal-card .modal-card-body .modal-form { padding: 10px 0 20px 0; } .v-modal .modal-content .modal-card .modal-card-body.has-tabs { padding: 0; overflow-x: hidden; } .v-modal .modal-content .modal-card .modal-card-body.has-tabs .tabs { overflow-x: auto; } .v-modal .modal-content .modal-card .modal-card-body.has-tabs .tabs::-webkit-scrollbar { height: 5px !important; } .v-modal .modal-content .modal-card .modal-card-body.has-tabs .tabs::-webkit-scrollbar-thumb { border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; } .v-modal .modal-content .modal-card .modal-card-body.has-tabs .tabs a { padding: 0.75em 1em; } .v-modal .modal-content .modal-card .modal-card-foot { background-color: var(--white); padding: 15px 20px; border-top: 1px solid var(--fade-grey-dark-3); } .v-modal .modal-content .modal-card .modal-card-foot.no-border { border-top-color: transparent; } .v-modal .modal-content .modal-card .modal-card-foot.is-start { justify-content: flex-start !important; } .v-modal .modal-content .modal-card .modal-card-foot.is-centered { justify-content: center !important; } .v-modal .modal-content .modal-card .modal-card-foot.is-end { justify-content: flex-end !important; } .v-modal .modal-content .modal-card .modal-card-foot .v-button { min-width: 110px; } /* ========================================================================== 3. H Modal Dark mode ========================================================================== */ .is-dark .v-modal .modal-background { background: rgba(101, 101, 104, 0.8) !important; } .is-dark .v-modal .modal-content .modal-card .modal-card-head { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-12); } .is-dark .v-modal .modal-content .modal-card .modal-card-head h3 { color: var(--dark-dark-text); } .is-dark .v-modal .modal-content .modal-card .modal-card-head .v-modal-close:hover svg { color: var(--primary); } .is-dark .v-modal .modal-content .modal-card .modal-card-body { background: var(--dark-sidebar-light-6) !important; } .is-dark .v-modal .modal-content .modal-card .modal-card-foot { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-12); } /* ========================================================================== 4. Media queries ========================================================================== */ @media screen and (min-width: 769px) { .modal.modal-lg .modal-card, .modal.modal-lg .modal-content { width: 800px !important; } .modal.modal-sm .modal-card, .modal.modal-sm .modal-content { width: 400px !important; } } /*! _message.scss | Vuero | Css ninja 2020-2021 */ /* 1. Message 2. Message Dark mode */ /* ========================================================================== 1. Message ========================================================================== */ .message { position: relative; border: 1px solid var(--fade-grey-dark-3); box-shadow: var(--light-box-shadow); padding-right: 20px; } .message.is-primary { border-color: var(--primary-light-24); } .message.is-primary .delete::before, .message.is-primary .delete::after { background-color: var(--primary); } .message.is-info { border-color: var(--info-light-24); } .message.is-info .delete::before, .message.is-info .delete::after { background-color: var(--info); } .message.is-success { border-color: var(--success-light-24); } .message.is-success .delete::before, .message.is-success .delete::after { background-color: var(--success); } .message.is-warning { border-color: var(--warning-light-24); } .message.is-warning .delete::before, .message.is-warning .delete::after { background-color: var(--warning); } .message.is-danger { border-color: var(--danger-light-24); } .message.is-danger .delete::before, .message.is-danger .delete::after { background-color: var(--danger); } .message .delete { position: absolute; background-color: transparent; top: 6px; right: 6px; } .message .delete::before { height: 1px; background-color: var(--light-text); } .message .delete::after { width: 1px; background-color: var(--light-text); } .message .message-body { border: none; font-family: var(--font); } /* ========================================================================== 2. Message Dark mode ========================================================================== */ .is-dark .message:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) { background-color: var(--dark-sidebar); border-color: var(--dark-sidebar-light-3); } .is-dark .message:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) .message-body { color: var(--light-text); } .is-dark .message.is-primary { background: var(--primary); border-color: var(--primary); } .is-dark .message.is-primary .message-body { color: var(--white); } .is-dark .message.is-primary .delete::before, .is-dark .message.is-primary .delete::after { background-color: var(--white); } .is-dark .message.is-success { background: var(--success); border-color: var(--success); } .is-dark .message.is-success .message-body { color: var(--white); } .is-dark .message.is-success .delete::before, .is-dark .message.is-success .delete::after { background-color: var(--white); } .is-dark .message.is-info { background: var(--info); border-color: var(--info); } .is-dark .message.is-info .message-body { color: var(--white); } .is-dark .message.is-info .delete::before, .is-dark .message.is-info .delete::after { background-color: var(--white); } .is-dark .message.is-warning { background: var(--warning); border-color: var(--warning); } .is-dark .message.is-warning .message-body { color: var(--white); } .is-dark .message.is-warning .delete::before, .is-dark .message.is-warning .delete::after { background-color: var(--white); } .is-dark .message.is-danger { background: var(--danger); border-color: var(--danger); } .is-dark .message.is-danger .message-body { color: var(--white); } .is-dark .message.is-danger .delete::before, .is-dark .message.is-danger .delete::after { background-color: var(--white); } /*! _media.scss | Vuero | Css ninja 2020-2021 */ /* 1. Light Gallery (Lightbox plugin) */ /* ========================================================================== 1. Light Gallery (Lightbox plugin) ========================================================================== */ .light-gallery-wrap { display: flex; flex-wrap: wrap; } .light-gallery-wrap > a { position: relative; display: block; margin: 8px; max-width: calc(33.3% - 16px); overflow: hidden; } .light-gallery-wrap > a:hover .video-overlay { background: hsla(var(--dark-sidebar-h), var(--dark-sidebar-s), var(--dark-sidebar-l), 0.7); } .light-gallery-wrap > a .video-overlay { position: absolute; height: 100%; width: 100%; background: hsla(var(--dark-sidebar-h), var(--dark-sidebar-s), var(--dark-sidebar-l), 0.95); background-size: cover; border-radius: 18px; transition: all 0.3s; z-index: 1; } .light-gallery-wrap > a .video-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .light-gallery-wrap > a .video-button .button-inner { position: relative; display: flex; justify-content: center; align-items: center; background: var(--primary); color: var(--smoke-white); height: 58px; width: 58px; border-radius: var(--radius-rounded); z-index: 1; } .light-gallery-wrap > a .video-button::after { content: ""; position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); height: 24px; width: 24px; border-radius: var(--radius-rounded); background: var(--primary); animation: wave 1.6s infinite; animation-duration: 2s; transform-origin: center center; z-index: 0; } .light-gallery-wrap > a img { display: block; border-radius: 18px; width: 100%; object-fit: cover; height: 250px; } @media only screen and (max-width: 767px) { .light-gallery-wrap a { max-width: calc(100% - 16px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .light-gallery-wrap a { max-width: calc(50% - 16px); } .light-gallery-wrap a img { height: 230px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .light-gallery-wrap a img { height: 200px; } } /*! _charts.scss | Vuero | Css Ninja 2020-2021 */ /* 1. Apex Charts */ /* ========================================================================== 1. Apex Charts ========================================================================== */ .apexcharts-title-text { font-family: var(--font-alt) !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--dark-text); } .apexcharts-legend .apexcharts-legend-text { font-family: var(--font) !important; } .apexcharts-xaxis .apexcharts-xaxis-texts-g .apexcharts-text, .apexcharts-xaxis .apexcharts-yaxis-texts-g .apexcharts-text, .apexcharts-yaxis .apexcharts-xaxis-texts-g .apexcharts-text, .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-text { font-family: var(--font) !important; } .apexcharts-datalabels-group .apexcharts-text { font-family: var(--font) !important; font-weight: 600; } .is-dark .apexcharts-ycrosshairs { stroke: var(--dark-sidebar-light-12) !important; } .is-dark .apexcharts-title-text { fill: var(--dark-dark-text) !important; } .is-dark .apexcharts-subtitle-text { fill: var(--primary); } .is-dark .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-text, .is-dark .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label { fill: var(--dark-dark-text); } .is-dark .apexcharts-svg .apexcharts-inner .apexcharts-xaxis .apexcharts-xaxis-texts-g .apexcharts-text, .is-dark .apexcharts-svg .apexcharts-inner .apexcharts-xaxis .apexcharts-xaxis-texts-g .apexcharts-xaxis-label, .is-dark .apexcharts-svg .apexcharts-graphical .apexcharts-xaxis .apexcharts-xaxis-texts-g .apexcharts-text, .is-dark .apexcharts-svg .apexcharts-graphical .apexcharts-xaxis .apexcharts-xaxis-texts-g .apexcharts-xaxis-label { fill: var(--dark-dark-text); } .is-dark .apexcharts-svg .apexcharts-inner .apexcharts-xaxis line, .is-dark .apexcharts-svg .apexcharts-graphical .apexcharts-xaxis line { color: var(--dark-sidebar-light-12) !important; stroke: var(--dark-sidebar-light-12) !important; } .is-dark .apexcharts-svg .apexcharts-inner .apexcharts-grid .apexcharts-gridlines-horizontal .apexcharts-gridline, .is-dark .apexcharts-svg .apexcharts-graphical .apexcharts-grid .apexcharts-gridlines-horizontal .apexcharts-gridline { color: var(--dark-sidebar-light-12); stroke: var(--dark-sidebar-light-12); } .is-dark .apexcharts-gridlines-vertical .apexcharts-gridline { color: var(--dark-sidebar-light-12); stroke: var(--dark-sidebar-light-12); } .is-dark .apexcharts-series-markers .apexcharts-marker, .is-dark .apexcharts-series-bubble .apexcharts-marker { color: var(--dark-sidebar-light-2); stroke: var(--dark-sidebar-light-2); } .is-dark .apexcharts-pie-area, .is-dark .apexcharts-pie-slice-0 { color: var(--dark-sidebar-light-12); stroke: var(--dark-sidebar-light-12); } .is-dark .apexcharts-datalabels-group .apexcharts-text, .is-dark .apexcharts-datalabels-group .apexcharts-datalabel-value { fill: var(--dark-dark-text); } .is-dark .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text { color: var(--dark-dark-text) !important; } .is-dark .apexcharts-yaxis line, .is-dark .apexcharts-xaxis-inversed line { color: var(--dark-sidebar-light-12); stroke: var(--dark-sidebar-light-12); } .is-dark .apexcharts-radialbar-track .apexcharts-radialbar-area, .is-dark .apexcharts-track .apexcharts-radialbar-area { color: var(--dark-sidebar-light-2); stroke: var(--dark-sidebar-light-2); } .is-dark .apexcharts-radar-series > polygon, .is-dark .apexcharts-radar-series > line, .is-dark .apexcharts-plot-series > polygon, .is-dark .apexcharts-plot-series > line { fill: none !important; color: var(--dark-sidebar-light-12); stroke: var(--dark-sidebar-light-12); } .is-dark .apexcharts-text, .is-dark .apexcharts-yaxis-title-text { fill: var(--dark-dark-text); font-family: var(--font); font-weight: 400; } .is-dark .apexcharts-data-labels text { fill: #fafafa; font-family: var(--font); font-weight: 400; } .is-dark .apexcharts-bar-area { color: var(--dark-sidebar-light-12); } .is-dark .apexcharts-slices .apexcharts-pie-label { fill: #fafafa !important; } .is-dark .apexcharts-tooltip { box-shadow: 2px 2px 6px -4px var(--dark-sidebar) !important; } .is-dark .apexcharts-tooltip.apexcharts-theme-light { border: 1px solid var(--dark-sidebar-light-12); background: var(--dark-sidebar-light-2); color: var(--dark-dark-text) !important; } .is-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--dark-sidebar-light-2); border-bottom: 1px solid var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-value, .is-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-z-value, .is-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group, .is-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-marker { color: var(--dark-dark-text) !important; } .is-dark .apexcharts-tooltip * { font-family: var(--font); color: inherit; } .is-dark .apexcharts-tooltip .apexcharts-yaxistooltip-text { color: var(--dark-dark-text) !important; } .is-dark .apexcharts-xaxistooltip { border: 1px solid var(--dark-sidebar-light-12); background: var(--dark-sidebar-light-2); color: var(--dark-dark-text) !important; } .is-dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--dark-sidebar-light-2); } .is-dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::before { border-bottom-color: var(--dark-sidebar-light-12); } .is-dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::after { border-top-color: var(--dark-sidebar-light-2); } .is-dark .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::before { border-top-color: var(--dark-sidebar-light-12); } .is-dark .apexcharts-xaxistooltip * { font-family: var(--font); color: inherit; } /* ========================================================================== 2. Billboard js ========================================================================== */ .bb-title { font-family: var(--font-alt) !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--dark-text); } .bb-axis line, .bb-axis .domain { color: var(--fade-grey-dark-4); stroke: var(--fade-grey-dark-4); } .tick text tspan { fill: var(--light-text-dark-5); } .is-dark .bb-title { fill: var(--dark-dark-text) !important; } .is-dark .bb-axis line, .is-dark .bb-axis .domain { color: var(--dark-sidebar-light-20) !important; stroke: var(--dark-sidebar-light-20) !important; } .is-dark .bb-legend .bb-legend-background rect { fill: var(--dark-sidebar-dark-2) !important; color: var(--dark-sidebar-light-12) !important; stroke: var(--dark-sidebar-light-12) !important; } .is-dark .bb-legend .bb-legend-item text { fill: var(--dark-dark-text); } .is-dark .bb-chart-arc path { color: var(--dark-sidebar-light-12) !important; stroke: var(--dark-sidebar-light-12) !important; } .is-dark .bb-chart-arc .bb-gauge-value { fill: var(--light-text) !important; } .is-dark .bb-chart-arcs .bb-chart-arcs-background { color: var(--dark-sidebar-light-10) !important; fill: var(--dark-sidebar-dark-2) !important; stroke: var(--dark-sidebar-dark-2) !important; } .is-dark .bb-chart-arcs-title, .is-dark .bb-gauge-value, .is-dark .bb-axis text { fill: var(--dark-dark-text); } .is-dark .bb-tooltip { border: 1px solid var(--dark-sidebar-light-10) !important; } .is-dark .bb-tooltip th { border-color: var(--dark-sidebar-light-10) !important; background-color: var(--dark-sidebar-dark-2) !important; color: #fffdfd !important; font-family: var(--font) !important; font-weight: 400 !important; } .is-dark .bb-tooltip th span { font-family: var(--font) !important; font-weight: 400 !important; color: #fffdfd !important; } .is-dark .bb-tooltip tr { border-color: var(--dark-sidebar-light-10) !important; } .is-dark .bb-tooltip td { background-color: var(--dark-sidebar-dark-2) !important; border-color: var(--dark-sidebar-light-10) !important; color: var(--light-text) !important; } .is-dark .bb-tooltip td > span, .is-dark .bb-tooltip td > svg { border-color: var(--dark-sidebar-light-10) !important; fill: var(--white) !important; color: var(--white) !important; } .is-dark .bb-tooltip .bb-tooltip-title { color: #fffdfd !important; } .is-dark .bb-tooltip .bb-tooltip-detail .bb-tooltip-name, .is-dark .bb-tooltip .bb-tooltip-detail .bb-tooltip-value { color: #fffdfd !important; } .is-dark .bb-tooltip .bb-tooltip-detail .bb-tooltip-name span, .is-dark .bb-tooltip .bb-tooltip-detail .bb-tooltip-value span { color: #fffdfd !important; } /*! _loader.scss | Vuero | Css Ninja 2020-2021 */ /* 1. Infinite Srcoll Loader 2. H Loader */ /* ========================================================================== 1. Infinite Srcoll Loader ========================================================================== */ .infinite-scroll-loader { width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .infinite-scroll-loader.is-active { pointer-events: all; opacity: 1; } .infinite-scroll-loader .infinite-scroll-loader-inner { height: 180px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .infinite-scroll-loader .infinite-scroll-loader-inner .loader { height: 5rem; width: 5rem; } .infinite-scroll-loader .infinite-scroll-loader-inner .loader-end span { font-family: var(--font); color: var(--light-text); } /* ========================================================================== 2. H Loader ========================================================================== */ .has-loader { position: relative; } .has-loader.has-loader-active { overflow: hidden; } .has-loader .v-loader-wrapper { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background: var(--white); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 5; } .has-loader .v-loader-wrapper.is-active { opacity: 1; pointer-events: all; } .has-loader .v-loader-wrapper.is-active.is-translucent { opacity: 0.65; } .has-loader .v-loader-wrapper.is-grey { background: var(--background-grey); } .has-loader .v-loader-wrapper .loader { height: 3rem; width: 3rem; } .has-loader .v-loader-wrapper .loader.is-small { height: 2rem; width: 2rem; } .has-loader .v-loader-wrapper .loader.is-large { height: 5rem; width: 5rem; } .has-loader .v-loader-wrapper .loader.is-xl { height: 7rem; width: 7rem; } .is-dark .has-loader .v-loader-wrapper { background: var(--dark-sidebar-light-6); } .is-dark .has-loader .v-loader-wrapper.is-grey { background: var(--dark-sidebar-light-10); } @keyframes spinAroundLoader { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { animation: spinAroundLoader 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: var(--radius-rounded); border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; position: relative; width: 1em; } /*! _toggles.scss | Vuero | Css ninja 2020-2021 */ /* 1. Sliding Switch 2. Special Checkbox */ /* ========================================================================== 1. Sliding Switch ========================================================================== */ .sliding-toggle { width: 86px; display: block; position: relative; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sliding-toggle input { position: absolute; opacity: 0; cursor: pointer; } .sliding-toggle input:checked ~ .toggler { border-color: var(--primary); } .sliding-toggle input:checked ~ .toggler .dark, .sliding-toggle input:checked ~ .toggler .light { transform: translateX(100%) rotate(360deg); } .sliding-toggle input:checked ~ .toggler .dark { opacity: 1 !important; } .sliding-toggle input:checked ~ .toggler .light { opacity: 0 !important; } .sliding-toggle .toggler { position: relative; display: block; height: 31px; width: 53px; border: 2px solid var(--primary); border-radius: 100px; transition: all 0.3s; } .sliding-toggle .toggler .dark, .sliding-toggle .toggler .light { position: absolute; top: 2px; left: 2px; height: 22px; width: 22px; border-radius: var(--radius-rounded); background: black; display: flex; justify-content: center; align-items: center; transform: translateX(0) rotate(0); transition: all 0.3s ease; } .sliding-toggle .toggler .dark svg, .sliding-toggle .toggler .light svg { color: var(--white) !important; height: 14px !important; width: 14px !important; opacity: 1 !important; } .sliding-toggle .toggler .light { background: var(--primary); border-color: var(--primary); opacity: 1; z-index: 1; } .sliding-toggle .toggler .dark { background: var(--primary); border-color: var(--primary); opacity: 0; z-index: 0; } .sliding-toggle .toggler .dark svg { color: var(--white) !important; } /* ===================================================== 2. Special Checkbox ===================================================== */ .special-checkbox { position: relative; } .special-checkbox label { background-color: var(--white); border: 1px solid var(--primary-grey); border-radius: var(--radius-rounded); cursor: pointer; height: 28px; left: 0; position: absolute; top: 0; width: 28px; } .special-checkbox label::after { border: 2px solid var(--white); border-top: none; border-right: none; content: ""; height: 6px; left: 7px; opacity: 0; position: absolute; top: 8px; transform: rotate(-45deg); width: 12px; } .special-checkbox input[type=checkbox] { visibility: hidden; } .special-checkbox input[type=checkbox]:checked + label { background-color: var(--primary); border-color: var(--primary); } .special-checkbox input[type=checkbox]:checked + label::after { opacity: 1; } .special-checkbox.is-small label { height: 20px; width: 20px; } .special-checkbox.is-small label::after { left: 4px; top: 5px; width: 11px; height: 6px; transform: rotate(-45deg) scale(0.8); } .special-checkbox.is-small span { position: relative; top: -2px; padding: 0 10px; cursor: default; } /*! _video-player.scss | Vuero | Css ninja 2020-2021 */ /* 1. Plyr Player */ /* ========================================================================== 1. Plyr Player ========================================================================== */ .video-player-container-wrapper { max-width: 840px; margin: 0 auto; } .video-player-container { margin: 0 auto; overflow: hidden; } .video-player-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-player-container.is-square { position: relative; height: 440px; width: 480px; } .video-player-container.is-square .plyr { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; } .video-player-container.is-4by3 { position: relative; padding-top: 75%; width: 100%; } .video-player-container.is-4by3 .plyr { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; } .video-player-container.is-16by9 { position: relative; padding-top: 56.25%; width: 100%; } .video-player-container.is-16by9 .plyr { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; } .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid { background: var(--white) !important; border: 1px solid var(--primary); color: var(--primary) !important; } .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid:hover svg { fill: var(--white) !important; stroke: var(--white) !important; } .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid svg { fill: none; stroke: var(--primary); stroke-width: 1.6px; } .video-player-container video { background-color: transparent !important; } .plyr__video-wrapper { height: 100%; } .plyr--full-ui.plyr--video .plyr__control--overlaid { background: var(--primary) !important; box-shadow: var(--primary-box-shadow); } .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true], .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before { background: var(--primary); } .plyr--full-ui input[type=range] { color: var(--primary); } .plyr__controls { transition: all 0.3s; } .plyr--paused .plyr__controls, .plyr--stopped .plyr__controls { opacity: 0; pointer-events: none; } @media only screen and (max-width: 767px) { .video-player-container.is-square { height: 303px; width: 330px; } } /*! _placeholders.scss | Vuero | Css ninja 2020-2021 */ /* 1. Section Placeholder 2. Page Placeholder */ /* ========================================================================== 1 Section Placeholder ========================================================================== */ .section-placeholder { width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; } .section-placeholder .placeholder-content { text-align: center; } .section-placeholder .placeholder-content > img { display: block; max-width: 280px; margin: 0 auto 10px auto; } .section-placeholder .placeholder-content .v-avatar { margin: 0 auto 10px auto; } .section-placeholder .placeholder-content h3 { font-family: var(--font-alt); font-size: 1.1rem; font-weight: 600; color: var(--dark-text); } .section-placeholder .placeholder-content p { font-family: var(--font); font-size: 1rem; color: var(--light-text); max-width: 280px; margin: 0 auto 12px auto; } .section-placeholder .placeholder-content .button { min-width: 140px; } /* ========================================================================== 2. Page placeholder ========================================================================== */ .page-placeholder { min-height: 400px; width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 20px; } .page-placeholder.is-wider .placeholder-content > p { font-size: 1rem; max-width: 420px; } .page-placeholder .placeholder-content { text-align: center; } .page-placeholder .placeholder-content img { display: block; max-width: 340px; margin: 0 auto 12px auto; } .page-placeholder .placeholder-content img.is-larger { max-width: 440px; } .page-placeholder .placeholder-content h3 { font-size: 1.3rem; font-weight: 600; font-family: var(--font-alt); color: var(--dark-text); } .page-placeholder .placeholder-content p { font-size: 1.1rem; max-width: 440px; margin: 0 auto 12px auto; color: var(--light-text); } .page-placeholder .placeholder-content p.is-larger { max-width: 620px; } .page-placeholder .placeholder-content .btn { margin-bottom: 8px; } .is-dark .page-placeholder .placeholder-content h3 { color: var(--dark-dark-text); } @media (max-width: 767px) { .page-placeholder .placeholder-content img { max-width: 280px; } } /*! _placeload.scss | Huro | Css ninja 2020-2021 */ /* 1. Placeload base styles 2. Placeload dark styles 3. Placeload compositions */ /* ========================================================================== 1. Placeload base styles ========================================================================== */ .content-shape-group { width: 100%; max-width: 100%; } .content-shape-group .content-shape:not(:last-child) { margin-bottom: 0.5rem; } .content-shape { height: 10px; width: 100%; max-width: 100%; border-radius: 0.25rem; } .loads { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeload; animation-name: placeload; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: var(--placeload-nuance-from); background: -webkit-gradient(linear, left top, right top, color-stop(8%, var(--placeload-nuance-from)), color-stop(18%, var(--placeload-nuance-to)), color-stop(33%, var(--placeload-nuance-from))); background: -webkit-linear-gradient(left, var(--placeload-nuance-from) 8%, var(--placeload-nuance-to) 18%, var(--placeload-nuance-from) 33%); background: linear-gradient(to right, var(--placeload-nuance-from) 8%, var(--placeload-nuance-to) 18%, var(--placeload-nuance-from) 33%); -webkit-background-size: 800px 104px; background-size: 1200px 104px; position: relative; } @keyframes placeload { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } /* ========================================================================== 2. Placeload dark styles ========================================================================== */ .is-dark .loads { background: var(--placeload-dark-nuance-from); background: -webkit-gradient(linear, left top, right top, color-stop(8%, var(--placeload-dark-nuance-from)), color-stop(18%, var(--placeload-dark-nuance-to)), color-stop(33%, var(--placeload-dark-nuance-from))); background: -webkit-linear-gradient(left, var(--placeload-dark-nuance-from) 8%, var(--placeload-dark-nuance-to) 18%, var(--placeload-dark-nuance-from) 33%); background: linear-gradient(to right, var(--placeload-dark-nuance-from) 8%, var(--placeload-dark-nuance-to) 18%, var(--placeload-dark-nuance-from) 33%); -webkit-background-size: 800px 104px; background-size: 1200px 104px; } /* ========================================================================== 3. Placeload compositions ========================================================================== */ .content-shape-group.is-grow-1, .content-shape.is-grow-1 { flex-grow: 1; } .content-shape-group.is-grow-2, .content-shape.is-grow-2 { flex-grow: 2; } .content-shape-group.is-grow-3, .content-shape.is-grow-3 { flex-grow: 3; } .content-shape-group.is-grow-4, .content-shape.is-grow-4 { flex-grow: 4; } .content-shape-group.mw-30, .content-shape.mw-30 { max-width: 30%; } .content-shape-group.mw-60, .content-shape.mw-60 { max-width: 60%; } .content-shape-group.mw-80, .content-shape.mw-80 { max-width: 80%; } .content-shape-group.is-centered, .content-shape.is-centered { margin-left: auto; margin-right: auto; } .placeload-avatar { display: block; width: 40px; min-width: 40px; height: 40px; } .placeload-avatar.is-small { width: 32px; min-width: 32px; height: 32px; } .placeload-avatar.is-medium { width: 50px; min-width: 50px; height: 50px; } .placeload-avatar.is-large { width: 68px; min-width: 68px; height: 68px; } .placeload-avatar.is-big { width: 80px; min-width: 80px; height: 80px; } .placeload-avatar.is-xl { width: 100px; min-width: 100px; height: 100px; } .placeload-avatar.is-centered { margin-left: auto; margin-right: auto; } .placeload-avatar.is-rounded-xs { border-radius: 0.25rem; } .placeload-avatar.is-rounded-sm { border-radius: 0.5rem; } .placeload-avatar.is-rounded-md { border-radius: 0.75rem; } .placeload-avatar.is-rounded-lg { border-radius: 1rem; } .placeload-avatar.is-rounded-xl { border-radius: 1.25rem; } .placeload-avatar.is-rounded-full { border-radius: 50%; } .placeload-wrap.is-flex { display: flex; align-items: center; } @media only screen and (max-width: 767px) { .placeload-wrap.is-flex { flex-direction: column; padding: 1rem 0; } .placeload-wrap.is-flex .content-shape-group { margin-top: 0.5rem; max-width: 70%; margin-left: auto; margin-right: auto; } .placeload-wrap.is-flex .content-shape-group .content-shape { margin-left: auto; margin-right: auto; } .placeload-wrap.is-flex > .content-shape { margin-top: 0.5rem; max-width: 70%; margin-left: auto; margin-right: auto; } } /*! _popovers.scss | Vuero | Css ninja 2020-2021 */ /* 1. Web UI Popover 2. Web UI Popover Dark mode 3. User profile popovers 4. User profile popovers Dark mode 5. Simple popover */ /* ========================================================================== 1. Web UI Popover ========================================================================== */ .tippy-box[data-theme~=light] { border-radius: 0.5rem; border: 1px solid var(--border); box-shadow: var(--light-box-shadow); } .v-popover { box-shadow: rgba(0, 0, 0, 0.04) 0 3px 10px 4px !important; background: var(--white) !important; color: var(--dark-text) !important; margin-top: -20px !important; border: 1px solid var(--fade-grey); } .v-popover.top > .webui-arrow { border-top-color: var(--white) !important; } .v-popover.bottom-right > .webui-arrow { border-right-color: transparent !important; border-bottom-color: transparent !important; } .v-popover.top-right > .webui-arrow { border-right-color: transparent !important; } .v-popover.top-right > .webui-arrow::after { border-top-color: var(--white) !important; } .v-popover.top-left > .webui-arrow { border-top-color: var(--white) !important; } .v-popover.left > .webui-arrow { border-left-color: transparent !important; } .v-popover .webui-arrow { border-top-color: transparent !important; border-right-color: transparent !important; } .v-popover .webui-arrow::after { border-top-color: transparent !important; } .v-popover .v-popover-title { background-color: var(--white) !important; border-bottom: none !important; font-weight: 500; } .v-popover-content { font-size: 0.75rem !important; } .v-popover-content.is-text { max-width: 200px; padding: 8px 5px 4px 5px; font-size: 0.9rem !important; } .v-popover-content .popover-head { display: flex; align-items: center; margin-bottom: 10px; } .v-popover-content .popover-head .v-avatar, .v-popover-content .popover-head .v-icon { margin-right: 10px; } .v-popover-content .popover-head h4 { font-family: var(--font-alt); font-weight: 600; font-size: 0.9rem; color: var(--dark); margin-bottom: 0; } .v-popover-content .popover-body { padding: 0; } .v-popover-content .popover-body p { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } .v-popover-content .popover-body p:last-child { margin-bottom: 8px; } .v-popover-content .popover-flex-block { display: flex; justify-content: flex-start; align-items: center; padding: 5px 0; } .v-popover-content .popover-flex-block .staff-avatar { height: 38px; width: 38px; border-radius: var(--radius-rounded); } .v-popover-content .popover-flex-block .content-block { margin-left: 10px; } .v-popover-content .popover-flex-block .content-block label, .v-popover-content .popover-flex-block .content-block span { display: block; } .v-popover-content .popover-flex-block .content-block label { color: var(--dark-text-light-35); text-transform: uppercase; font-size: 70%; } .v-popover-content .popover-flex-block .fa.fa-star, .v-popover-content .popover-flex-block .fa.fa-star-half { color: #ffd700; } .v-popover-content .popover-flex-block .icon-block { height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; } .v-popover-content .popover-flex-block .icon-block svg { height: 18px; width: 18px; color: var(--dark-text); stroke-width: 1.3px; } .v-popover-content .popover-flex-block .icon-block svg.is-medium { height: 26px; width: 26px; } /* ========================================================================== 2. Web UI Popover Dark mode ========================================================================== */ .is-dark .v-popover { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-6); } .is-dark .v-popover.top .webui-arrow { border-top-color: var(--dark-sidebar) !important; } .is-dark .v-popover.right .webui-arrow { border-top-color: transparent !important; border-right-color: var(--dark-sidebar) !important; } .is-dark .v-popover.right .webui-arrow::after { border-right-color: var(--dark-sidebar) !important; } .is-dark .v-popover.left .webui-arrow::after { border-left-color: var(--dark-sidebar) !important; } .is-dark .v-popover.bottom .webui-arrow::after { border-bottom-color: var(--dark-sidebar) !important; } .is-dark .v-popover.bottom-right .webui-arrow::after, .is-dark .v-popover.bottom-left .webui-arrow::after { border-bottom-color: var(--dark-sidebar) !important; } .is-dark .v-popover.top-right .webui-arrow::after { border-top-color: var(--dark-sidebar) !important; } .is-dark .v-popover.top-left .webui-arrow { border-top-color: var(--dark-sidebar) !important; } .is-dark .v-popover .v-popover-inner { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar) !important; } .is-dark .v-popover .title { color: var(--primary-grey-dark-5) !important; } .is-dark .v-popover .country img, .is-dark .v-popover .primary-skill img { border-color: var(--dark-sidebar) !important; } .is-dark .v-popover .notification-content a { color: var(--primary) !important; } .is-dark .v-popover .notification-content span { color: var(--primary-grey-dark-10) !important; } .is-dark .v-popover .media + .media { border-top-color: var(--dark-sidebar-light-10) !important; } .is-dark .v-popover .loader-overlay { background: rgba(42, 42, 44, 0.95) !important; } /* ========================================================================== 3. User profile popovers ========================================================================== */ .v-popover-profile .profile-popover-block, .v-popover-profile .skill-popover-block { max-width: 260px; text-align: left; } .v-popover-profile .profile-popover-block .profile-popover-wrapper, .v-popover-profile .profile-popover-block .skill-popover-wrapper, .v-popover-profile .skill-popover-block .profile-popover-wrapper, .v-popover-profile .skill-popover-block .skill-popover-wrapper { display: flex; justify-content: flex-start; align-items: stretch; padding: 11px 6px; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-avatar, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-avatar, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-avatar, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-avatar, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar { position: relative; width: 44px; height: 44px; min-width: 44px; z-index: 0; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-avatar img, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar img, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-avatar img, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar img, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-avatar img, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar img, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-avatar img, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar img { display: block; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-avatar .avatar, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar .avatar, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-avatar .avatar, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar .avatar, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-avatar .avatar, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar .avatar, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-avatar .avatar, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar .avatar { width: 44px; height: 44px; border-radius: var(--radius-rounded); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-avatar .badge, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar .badge, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-avatar .badge, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar .badge, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-avatar .badge, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar .badge, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-avatar .badge, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar .badge { position: absolute; right: -2px; bottom: 0; width: 20px; height: 20px; border: 1.6px solid var(--white); border-radius: var(--radius-rounded); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar { background: var(--fade-grey-light-3); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-rounded); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-primary, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-primary, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-primary, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-primary { background: var(--primary-light-42); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-primary span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-primary span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-primary span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-primary span { color: var(--primary); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-accent, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-accent, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-accent, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-accent { background: var(--primary-light-36); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-accent span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-accent span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-accent span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-accent span { color: var(--primary); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-success, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-success, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-success, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-success { background: var(--success-light-45); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-success span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-success span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-success span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-success span { color: var(--success); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-info, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-info, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-info, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-info { background: var(--info-light-45); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-info span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-info span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-info span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-info span { color: var(--info); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-warning, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-warning, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-warning, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-warning { background: var(--warning-light-32); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-warning span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-warning span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-warning span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-warning span { color: var(--warning); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-danger, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-danger, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-danger, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-danger { background: var(--danger-light-36); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-danger span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-danger span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-danger span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-danger span { color: var(--danger); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-purple, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-purple, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-purple, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-purple { background: var(--purple-light-36); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-purple span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-purple span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-purple span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-purple span { color: var(--purple); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-orange, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-orange, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-orange, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-orange { background: var(--orange-light-18); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-orange span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-orange span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-orange span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-orange span { color: var(--orange); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-blue, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-blue, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-blue, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-blue { background: var(--blue-light-32); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-blue span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-blue span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-blue span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-blue span { color: var(--blue); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-red, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-red, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-red, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-red { background: var(--red-light-38); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-red span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-red span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-red span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-red span { color: var(--red); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-green, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-green, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-green, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-green { background: var(--green-light-22); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-green span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-green span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-green span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-green span { color: var(--green); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-yellow, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-yellow, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-yellow, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-yellow { background: var(--yellow-light-22); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-yellow span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-yellow span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar.is-h-yellow span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar.is-h-yellow span { color: var(--yellow-dark-8); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-fake-avatar span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-fake-avatar span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-fake-avatar span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-fake-avatar span { font-size: 1.1rem; font-family: var(--font); text-transform: uppercase; font-weight: 500; color: var(--dark-text); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta { margin-left: 16px; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span { display: block; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-meta, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.user-meta, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-meta, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.user-meta, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-meta, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.user-meta, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-meta { display: flex; justify-content: space-between; align-items: center; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta .username, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta .skill-name, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .username, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .skill-name, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.user-meta .username, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.user-meta .skill-name, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .username, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .skill-name, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.user-meta .username, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.user-meta .skill-name, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .username, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .skill-name, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.user-meta .username, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.user-meta .skill-name, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .username, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .skill-name { display: block; font-family: var(--font-alt); line-height: 1.2; font-size: 0.9rem; font-weight: 600; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta .location, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .location, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.user-meta .location, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .location, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.user-meta .location, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-meta .location, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.user-meta .location, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-meta .location { font-size: 0.75rem; color: var(--light-text); } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.job-title, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-type, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.job-title, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-type, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.job-title, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-type, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.job-title, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-type { font-size: 0.8rem; color: var(--primary); font-weight: 500; } .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.bio, .v-popover-profile .profile-popover-block .profile-popover-wrapper .popover-meta span.skill-description, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.bio, .v-popover-profile .profile-popover-block .skill-popover-wrapper .popover-meta span.skill-description, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.bio, .v-popover-profile .skill-popover-block .profile-popover-wrapper .popover-meta span.skill-description, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.bio, .v-popover-profile .skill-popover-block .skill-popover-wrapper .popover-meta span.skill-description { font-size: 0.8rem; color: var(--light-text); } .v-popover-profile .profile-popover-block .popover-actions, .v-popover-profile .skill-popover-block .popover-actions { position: relative; display: flex; justify-content: flex-end; align-items: center; padding: 8px 12px 12px 12px; } .v-popover-profile .profile-popover-block .popover-actions .button, .v-popover-profile .skill-popover-block .popover-actions .button { height: 26px; } .v-popover-profile .profile-popover-block .popover-actions .popover-icon, .v-popover-profile .skill-popover-block .popover-actions .popover-icon { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; max-width: 30px; margin: 0 2px; border-radius: var(--radius-rounded); transition: all 0.3s; cursor: pointer; pointer-events: all !important; } .v-popover-profile .profile-popover-block .popover-actions .popover-icon:hover, .v-popover-profile .skill-popover-block .popover-actions .popover-icon:hover { background: var(--fade-grey-light-3); } .v-popover-profile .profile-popover-block .popover-actions .popover-icon:hover svg, .v-popover-profile .skill-popover-block .popover-actions .popover-icon:hover svg { color: var(--light-text); } .v-popover-profile .profile-popover-block .popover-actions .popover-icon svg, .v-popover-profile .skill-popover-block .popover-actions .popover-icon svg { width: 16px; height: 16px; color: var(--light-text); } .v-popover-profile .profile-popover-block .loader-overlay, .v-popover-profile .skill-popover-block .loader-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; margin: 0 auto; display: flex; border-radius: 8px; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.95); opacity: 0; transition: all 0.3s; z-index: 0; pointer-events: none; } .v-popover-profile .profile-popover-block .loader-overlay.is-active, .v-popover-profile .skill-popover-block .loader-overlay.is-active { opacity: 1; z-index: 1; pointer-events: all; } .v-popover-profile .profile-popover-block .loader-overlay .loader.is-loading, .v-popover-profile .skill-popover-block .loader-overlay .loader.is-loading { height: 24px; width: 24px; min-height: 24px; min-width: 24px; } /* ========================================================================== 4. User profile popovers Dark mode ========================================================================== */ .is-dark .tippy-box { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-6); } .is-dark .tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow::before { border-top-color: var(--dark-sidebar) !important; } .is-dark .tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow::before { border-bottom-color: var(--dark-sidebar) !important; } .is-dark .tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow::before { border-left-color: var(--dark-sidebar) !important; } .is-dark .tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow::before { border-right-color: var(--dark-sidebar) !important; } .is-dark .tippy-profile { background: var(--dark-sidebar) !important; border-color: var(--dark-sidebar-light-6); } .is-dark .v-popover-profile { background: var(--dark-sidebar) !important; } .is-dark .v-popover-profile .profile-popover-block .badge { border-color: var(--dark-sidebar) !important; } .is-dark .v-popover-profile .profile-popover-block .user-meta .username, .is-dark .v-popover-profile .profile-popover-block .user-meta .skill-name, .is-dark .v-popover-profile .profile-popover-block .skill-meta .username, .is-dark .v-popover-profile .profile-popover-block .skill-meta .skill-name { color: var(--primary-grey-dark-5); } .is-dark .v-popover-profile .profile-popover-block .job-title, .is-dark .v-popover-profile .profile-popover-block .skill-type { color: var(--primary) !important; } .is-dark .v-popover-profile .profile-popover-block .popover-actions .popover-icon:hover { background: var(--dark-sidebar-light-6) !important; } .is-dark .v-popover-profile .profile-popover-block .popover-actions .popover-icon:hover svg { color: var(--primary); } /*! _progress.scss | Vuero | Css ninja 2020-2021 */ /* 1. Progress Bar */ /* ========================================================================== 1. Progress Bar ========================================================================== */ .progress { margin-bottom: 0; } .progress::-webkit-progress-value { border-radius: 50px; } .progress::-moz-progress-bar { border-radius: 50px; } .progress::-ms-fill { border-radius: 50px; } .progress.is-smaller { height: 0.5rem !important; } .progress.is-tiny { height: 0.35rem !important; } /* ========================================================================== 2. Progress Bar Dark mode ========================================================================== */ .is-dark .progress { background-color: var(--dark-sidebar); } .is-dark .progress::-webkit-progress-bar { background-color: var(--dark-sidebar); } .is-dark .progress.is-primary::-webkit-progress-value { background: var(--primary); } .is-dark .progress.is-primary::-moz-progress-bar { background: var(--primary); } .is-dark .progress.is-primary::-ms-fill { background: var(--primary); } .is-dark .progress:indeterminate.is-primary { background-color: var(--primary); background-image: linear-gradient(to right, var(--dark-sidebar) 30%, var(--primary) 30%); } .is-dark .progress:indeterminate.is-primary::-webkit-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-primary::-moz-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-success { background-color: var(--success); background-image: linear-gradient(to right, var(--dark-sidebar) 30%, var(--success) 30%); } .is-dark .progress:indeterminate.is-success::-webkit-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-success::-moz-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-info { background-color: var(--info); background-image: linear-gradient(to right, var(--dark-sidebar) 30%, var(--info) 30%); } .is-dark .progress:indeterminate.is-info::-webkit-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-info::-moz-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-warning { background-color: var(--warning); background-image: linear-gradient(to right, var(--dark-sidebar) 30%, var(--warning) 30%); } .is-dark .progress:indeterminate.is-warning::-webkit-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-warning::-moz-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-danger { background-color: var(--danger); background-image: linear-gradient(to right, var(--dark-sidebar) 30%, var(--danger) 30%); } .is-dark .progress:indeterminate.is-danger::-webkit-progress-bar { background: transparent; } .is-dark .progress:indeterminate.is-danger::-moz-progress-bar { background: transparent; } /*! _theme-switch.scss | Vuero | Css ninja 2020-2021 */ /* 1. Theme Switch */ /* ========================================================================== 1. Theme Switch ========================================================================== */ .dark-mode { cursor: pointer; transform: translate3d(0, 0, 0); } .dark-mode input { display: none; } .dark-mode input + span { display: block; border-radius: var(--radius-rounded); width: 36px; height: 36px; position: relative; box-shadow: inset 16px -16px 0 0 #ffd22e; transform: scale(1) rotate(-2deg); transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s; } .dark-mode input + span::before { content: ""; width: inherit; height: inherit; border-radius: inherit; position: absolute; left: 0; top: 0; backface-visibility: hidden; transition: background-color 0.3s ease; } .dark-mode input + span::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-rounded); margin: -4px 0 0 -4px; position: absolute; top: 50%; left: 50%; box-shadow: 0 -23px 0 #ffb62e, 0 23px 0 #ffb62e, 23px 0 0 #ffb62e, -23px 0 0 #ffb62e, 15px 15px 0 #ffb62e, -15px 15px 0 #ffb62e, 15px -15px 0 #ffb62e, -15px -15px 0 #ffb62e; transform: scale(0); transition: all 0.3s ease; } .dark-mode input:checked + span { box-shadow: inset 32px -32px 0 0 #ffd22e; transform: scale(0.5) rotate(0deg); transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s; } .dark-mode input:checked + span::before { background: #ffb62e; backface-visibility: hidden; transition: background-color 0.3s ease 0.1s; } .dark-mode input:checked + span::after { transform: scale(1.5); transition: transform 0.5s ease 0.15s; } /*! _avatar.scss | Vuero | Css ninja 2020-2021 */ /* 1. Avatar 2. Avatar Dark Mode */ /* ========================================================================== 1. Avatar ========================================================================== */ .v-avatar { position: relative; display: inline-block; vertical-align: bottom; } .v-avatar.has-dot::after { content: ""; position: absolute; top: 1px; right: 1px; height: 12px; width: 12px; border-radius: var(--radius-rounded); background: var(--success); border: 1.8px solid var(--white); } .v-avatar.has-dot.has-dot-squared::after { top: -3px; right: -3px; } .v-avatar.has-dot.dot-primary::after { background: var(--primary); } .v-avatar.has-dot.dot-info::after { background: var(--info); } .v-avatar.has-dot.dot-warning::after { background: var(--warning); } .v-avatar.has-dot.dot-danger::after { background: var(--danger); } .v-avatar.has-dot.dot-grey::after { background: var(--light-text); } .v-avatar .avatar { width: 40px; min-width: 40px; height: 40px; object-fit: cover; } .v-avatar .avatar.is-squared { border-radius: 10px !important; } .v-avatar .avatar.is-fake { display: flex; justify-content: center; align-items: center; background: var(--fade-grey); border-radius: var(--radius-rounded); } .v-avatar .avatar.is-fake.is-primary { background: var(--primary-light-42); } .v-avatar .avatar.is-fake.is-primary span { color: var(--primary); } .v-avatar .avatar.is-fake.is-accent { background: var(--primary-light-36); } .v-avatar .avatar.is-fake.is-accent span { color: var(--primary); } .v-avatar .avatar.is-fake.is-success { background: var(--success-light-45); } .v-avatar .avatar.is-fake.is-success span { color: var(--success); } .v-avatar .avatar.is-fake.is-info { background: var(--info-light-45); } .v-avatar .avatar.is-fake.is-info span { color: var(--info); } .v-avatar .avatar.is-fake.is-warning { background: var(--warning-light-32); } .v-avatar .avatar.is-fake.is-warning span { color: var(--warning); } .v-avatar .avatar.is-fake.is-danger { background: var(--danger-light-36); } .v-avatar .avatar.is-fake.is-danger span { color: var(--danger); } .v-avatar .avatar.is-fake.is-h-purple { background: var(--purple-light-36); } .v-avatar .avatar.is-fake.is-h-purple span { color: var(--purple); } .v-avatar .avatar.is-fake.is-h-orange { background: var(--orange-light-18); } .v-avatar .avatar.is-fake.is-h-orange span { color: var(--orange); } .v-avatar .avatar.is-fake.is-h-blue { background: var(--blue-light-32); } .v-avatar .avatar.is-fake.is-h-blue span { color: var(--blue); } .v-avatar .avatar.is-fake.is-h-red { background: var(--red-light-38); } .v-avatar .avatar.is-fake.is-h-red span { color: var(--red); } .v-avatar .avatar.is-fake.is-h-green { background: var(--green-light-22); } .v-avatar .avatar.is-fake.is-h-green span { color: var(--green); } .v-avatar .avatar.is-fake.is-h-yellow { background: var(--yellow-light-22); } .v-avatar .avatar.is-fake.is-h-yellow span { color: var(--yellow-dark-8); } .v-avatar .avatar.is-fake span { position: relative; display: block; font-size: 1rem; font-weight: 500; text-transform: uppercase; color: var(--muted-grey); } .v-avatar .avatar.is-more { display: flex; justify-content: center; align-items: center; border-radius: var(--radius-rounded); } .v-avatar .avatar.is-more .inner { width: 40px; min-width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: var(--radius-rounded); background: var(--fade-grey-light-2); border: 1px solid var(--fade-grey); } .v-avatar .avatar.is-more .inner span { line-height: 1; position: relative; left: -3px; display: block; font-size: 0.9rem; font-weight: 500; color: var(--light-text); } .v-avatar .badge { position: absolute; bottom: 0; right: 0; height: 16px; width: 16px; border: 1px solid var(--white); } .v-avatar img { display: block; border-radius: var(--radius-rounded); } .v-avatar.is-small { max-width: 32px; min-width: 32px; max-height: 32px; } .v-avatar.is-small.has-dot::after { content: ""; top: 0; right: 0; height: 8px; width: 8px; border-width: 1.4px; } .v-avatar.is-small.has-dot.has-dot-squared::after { top: -2px; right: -2px; } .v-avatar.is-small .avatar { width: 32px; min-width: 32px; height: 32px; } .v-avatar.is-small .avatar.is-squared { border-radius: 8px !important; } .v-avatar.is-small .avatar.is-fake, .v-avatar.is-small .avatar.is-more { width: 32px; min-width: 32px; height: 32px; } .v-avatar.is-small .avatar.is-fake .inner, .v-avatar.is-small .avatar.is-more .inner { width: 30px; min-width: 30px; height: 30px; } .v-avatar.is-small .avatar.is-fake span, .v-avatar.is-small .avatar.is-more span { font-size: 0.85rem; } .v-avatar.is-small .badge { border-width: 1px; width: 12px; height: 12px; } .v-avatar.is-medium { max-width: 50px; min-width: 50px; } .v-avatar.is-medium.has-dot::after { content: ""; top: 1px; right: 1px; height: 12px; width: 12px; border-width: 2px; } .v-avatar.is-medium.has-dot.has-dot-squared::after { top: -3px; right: -3px; } .v-avatar.is-medium .avatar { width: 50px; min-width: 50px; height: 50px; } .v-avatar.is-medium .avatar.is-squared { border-radius: 12px !important; } .v-avatar.is-medium .avatar.is-fake, .v-avatar.is-medium .avatar.is-more { width: 50px; min-width: 50px; height: 50px; } .v-avatar.is-medium .avatar.is-fake .inner, .v-avatar.is-medium .avatar.is-more .inner { width: 50px; min-width: 50px; height: 50px; } .v-avatar.is-medium .avatar.is-fake span, .v-avatar.is-medium .avatar.is-more span { font-size: 1.2rem; } .v-avatar.is-medium .badge { border-width: 2px; height: 20px; width: 20px; } .v-avatar.is-large { max-width: 68px; min-width: 68px; } .v-avatar.is-large.has-dot::after { content: ""; top: 4px; right: 4px; height: 14px; width: 14px; border-width: 2.6px; } .v-avatar.is-large.has-dot.has-dot-squared::after { top: -4px; right: -1px; } .v-avatar.is-large .avatar { width: 68px; min-width: 68px; height: 68px; } .v-avatar.is-large .avatar.is-squared { border-radius: 16px !important; } .v-avatar.is-large .avatar.is-fake { width: 68px; min-width: 68px; height: 68px; } .v-avatar.is-large .avatar.is-fake span { font-size: 1.4rem; } .v-avatar.is-large .badge { border-width: 2px; height: 24px; width: 24px; } .v-avatar.is-big { max-width: 80px; min-width: 80px; } .v-avatar.is-big.has-dot::after { content: ""; top: 4px; right: 4px; height: 16px; width: 16px; border-width: 2.8px; } .v-avatar.is-big.has-dot.has-dot-squared::after { top: -4px; right: -1px; } .v-avatar.is-big .avatar { width: 80px; min-width: 80px; height: 80px; } .v-avatar.is-big .avatar.is-squared { border-radius: 18px !important; } .v-avatar.is-big .avatar.is-fake { width: 80px; min-width: 80px; height: 80px; } .v-avatar.is-big .avatar.is-fake span { font-size: 1.4rem; } .v-avatar.is-big .badge { border-width: 2.4px; height: 28px; width: 28px; } .v-avatar.is-xl { max-width: 100px; min-width: 100px; } .v-avatar.is-xl.has-dot::after { content: ""; top: 6px; right: 5px; height: 18px; width: 18px; border-width: 2.8px; } .v-avatar.is-xl.has-dot.has-dot-squared::after { top: -3px; right: -3px; } .v-avatar.is-xl .avatar { width: 100px; min-width: 100px; height: 100px; } .v-avatar.is-xl .avatar.is-squared { border-radius: 22px !important; } .v-avatar.is-xl .avatar.is-fake { width: 100px; min-width: 100px; height: 100px; } .v-avatar.is-xl .avatar.is-fake span { font-size: 1.6rem; } .v-avatar.is-xl .badge { border-width: 3px; height: 34px; width: 34px; } .avatar-stack { display: flex; } .avatar-stack .v-avatar { border-radius: var(--radius-rounded); } .avatar-stack .v-avatar.is-small { border-radius: var(--radius-rounded); } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(1) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(2) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(3) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(4) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(5) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(6) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(7) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(8) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(9) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(10) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(11) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(12) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(13) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(14) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(15) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(16) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(17) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(18) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(19) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(20) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(21) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(22) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(23) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(24) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(25) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(26) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(27) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(28) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(29) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(30) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(31) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(32) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(33) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(34) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(35) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(36) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(37) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(38) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(39) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(40) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(41) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(42) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(43) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(44) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(45) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(46) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(47) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(48) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(49) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(50) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(51) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(52) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(53) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(54) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(55) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(56) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(57) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(58) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(59) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(60) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(61) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(62) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(63) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(64) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(65) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(66) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(67) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(68) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(69) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(70) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(71) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(72) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(73) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(74) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(75) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(76) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(77) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(78) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(79) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(80) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(81) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(82) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(83) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(84) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(85) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(86) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(87) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(88) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(89) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(90) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(91) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(92) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(93) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(94) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(95) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(96) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(97) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(98) { margin-left: -12px; } .avatar-stack .v-avatar.is-small:not(:first-child):nth-child(99) { margin-left: -12px; } .avatar-stack .v-avatar.is-small img, .avatar-stack .v-avatar.is-small .is-fake, .avatar-stack .v-avatar.is-small .is-more .inner { border: 2px solid var(--white); } .avatar-stack .v-avatar.is-medium { border-radius: var(--radius-rounded); } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(1) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(2) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(3) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(4) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(5) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(6) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(7) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(8) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(9) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(10) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(11) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(12) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(13) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(14) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(15) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(16) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(17) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(18) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(19) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(20) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(21) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(22) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(23) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(24) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(25) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(26) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(27) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(28) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(29) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(30) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(31) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(32) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(33) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(34) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(35) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(36) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(37) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(38) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(39) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(40) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(41) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(42) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(43) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(44) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(45) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(46) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(47) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(48) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(49) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(50) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(51) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(52) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(53) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(54) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(55) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(56) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(57) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(58) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(59) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(60) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(61) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(62) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(63) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(64) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(65) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(66) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(67) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(68) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(69) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(70) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(71) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(72) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(73) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(74) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(75) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(76) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(77) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(78) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(79) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(80) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(81) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(82) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(83) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(84) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(85) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(86) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(87) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(88) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(89) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(90) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(91) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(92) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(93) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(94) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(95) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(96) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(97) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(98) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium:not(:first-child):nth-child(99) { margin-left: -16px; } .avatar-stack .v-avatar.is-medium img, .avatar-stack .v-avatar.is-medium .is-fake, .avatar-stack .v-avatar.is-medium .is-more .inner { border: 4px solid var(--white); } .avatar-stack .v-avatar:not(:first-child):nth-child(1) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(2) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(3) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(4) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(5) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(6) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(7) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(8) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(9) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(10) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(11) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(12) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(13) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(14) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(15) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(16) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(17) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(18) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(19) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(20) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(21) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(22) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(23) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(24) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(25) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(26) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(27) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(28) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(29) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(30) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(31) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(32) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(33) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(34) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(35) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(36) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(37) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(38) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(39) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(40) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(41) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(42) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(43) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(44) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(45) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(46) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(47) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(48) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(49) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(50) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(51) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(52) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(53) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(54) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(55) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(56) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(57) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(58) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(59) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(60) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(61) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(62) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(63) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(64) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(65) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(66) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(67) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(68) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(69) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(70) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(71) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(72) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(73) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(74) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(75) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(76) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(77) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(78) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(79) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(80) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(81) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(82) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(83) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(84) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(85) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(86) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(87) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(88) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(89) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(90) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(91) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(92) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(93) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(94) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(95) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(96) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(97) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(98) { margin-left: -14px; } .avatar-stack .v-avatar:not(:first-child):nth-child(99) { margin-left: -14px; } .avatar-stack .v-avatar img, .avatar-stack .v-avatar .is-fake, .avatar-stack .v-avatar .is-more .inner { border: 2px solid var(--white); } /* ========================================================================== 2. Avatar Dark Mode ========================================================================== */ .is-dark .v-avatar .avatar { border-color: var(--dark-sidebar-light-6); } .is-dark .v-avatar .avatar.is-fake.is-primary { background: var(--primary); } .is-dark .v-avatar .avatar.is-fake.is-primary span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-accent { background: var(--primary); } .is-dark .v-avatar .avatar.is-fake.is-accent span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-success { background: var(--success); } .is-dark .v-avatar .avatar.is-fake.is-success span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-info { background: var(--info); } .is-dark .v-avatar .avatar.is-fake.is-info span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-warning { background: var(--warning); } .is-dark .v-avatar .avatar.is-fake.is-warning span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-danger { background: var(--danger); } .is-dark .v-avatar .avatar.is-fake.is-danger span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-purple { background: var(--purple); } .is-dark .v-avatar .avatar.is-fake.is-h-purple span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-orange { background: var(--orange); } .is-dark .v-avatar .avatar.is-fake.is-h-orange span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-blue { background: var(--blue); } .is-dark .v-avatar .avatar.is-fake.is-h-blue span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-red { background: var(--red); } .is-dark .v-avatar .avatar.is-fake.is-h-red span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-green { background: var(--green); } .is-dark .v-avatar .avatar.is-fake.is-h-green span { color: var(--white); } .is-dark .v-avatar .avatar.is-fake.is-h-yellow { background: var(--yellow); } .is-dark .v-avatar .avatar.is-fake.is-h-yellow span { color: var(--white); } .is-dark .v-avatar .avatar.is-more .inner { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-dark-2); } .is-dark .v-avatar .avatar.is-fake { border-color: var(--dark-sidebar-light-6); } /*! _snacks.scss | Vuero | Css ninja 2020-2021 */ /* 1. Snacks 2. Snacks Dark mode */ /* ========================================================================== 1. Snacks ========================================================================== */ .snacks { display: flex; flex-wrap: wrap; } .snacks .snack { margin: 0 8px 16px 8px; } .snack { display: inline-block; background: var(--fade-grey-light-2); height: 38px; width: auto; border-radius: 500px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .snack:hover { box-shadow: var(--light-box-shadow); } .snack.is-white { background: var(--white); } .snack.is-small { height: 30px; } .snack.is-small .snack-media { height: 32px; width: 32px; margin-right: 4px; } .snack.is-small .snack-media.is-icon { height: 30px; width: 30px; } .snack.is-small .snack-media.is-icon svg { height: 15px; width: 15px; } .snack.is-small .snack-media.is-icon .fas, .snack.is-small .snack-media.is-icon .far, .snack.is-small .snack-media.is-icon .fad, .snack.is-small .snack-media.is-icon .fal, .snack.is-small .snack-media.is-icon .fab { font-size: 13px; } .snack.is-small .snack-media.is-icon .lnil, .snack.is-small .snack-media.is-icon .lnir { font-size: 16px; } .snack.is-small .snack-media img { height: 30px; width: 30px; } .snack.is-small .snack-text { font-size: 0.9rem; top: -12px; } .snack.is-small .snack-action { top: -9px; margin: 0 10px 0 6px; } .snack .snack-media { position: relative; top: -1px; height: 40px; width: 40px; display: inline-block; margin-right: 6px; } .snack .snack-media.is-icon { position: relative; left: -1px; height: 38px; width: 38px; background: var(--white); border: 1px solid var(--fade-grey-dark-3); border-radius: var(--radius-rounded); } .snack .snack-media.is-icon.is-solid .fas, .snack .snack-media.is-icon.is-solid .far, .snack .snack-media.is-icon.is-solid .fad, .snack .snack-media.is-icon.is-solid .fal, .snack .snack-media.is-icon.is-solid .fab, .snack .snack-media.is-icon.is-solid .lnil, .snack .snack-media.is-icon.is-solid .lnir { color: var(--white) !important; } .snack .snack-media.is-icon.is-primary { border-color: var(--primary); } .snack .snack-media.is-icon.is-primary.is-solid { background: var(--primary); } .snack .snack-media.is-icon.is-primary.is-solid svg { color: var(--white); } .snack .snack-media.is-icon.is-primary svg { color: var(--primary); } .snack .snack-media.is-icon.is-primary .fas, .snack .snack-media.is-icon.is-primary .far, .snack .snack-media.is-icon.is-primary .fad, .snack .snack-media.is-icon.is-primary .fal, .snack .snack-media.is-icon.is-primary .fab, .snack .snack-media.is-icon.is-primary .lnil, .snack .snack-media.is-icon.is-primary .lnir { color: var(--primary); } .snack .snack-media.is-icon.is-success { border-color: var(--success); } .snack .snack-media.is-icon.is-success.is-solid { background: var(--success); } .snack .snack-media.is-icon.is-success.is-solid svg { color: var(--white); } .snack .snack-media.is-icon.is-success svg { color: var(--success); } .snack .snack-media.is-icon.is-success .fas, .snack .snack-media.is-icon.is-success .far, .snack .snack-media.is-icon.is-success .fad, .snack .snack-media.is-icon.is-success .fal, .snack .snack-media.is-icon.is-success .fab, .snack .snack-media.is-icon.is-success .lnil, .snack .snack-media.is-icon.is-success .lnir { color: var(--success); } .snack .snack-media.is-icon.is-info { border-color: var(--info); } .snack .snack-media.is-icon.is-info.is-solid { background: var(--info); } .snack .snack-media.is-icon.is-info.is-solid svg { color: var(--white); } .snack .snack-media.is-icon.is-info svg { color: var(--info); } .snack .snack-media.is-icon.is-info .fas, .snack .snack-media.is-icon.is-info .far, .snack .snack-media.is-icon.is-info .fad, .snack .snack-media.is-icon.is-info .fal, .snack .snack-media.is-icon.is-info .fab, .snack .snack-media.is-icon.is-info .lnil, .snack .snack-media.is-icon.is-info .lnir { color: var(--info); } .snack .snack-media.is-icon.is-warning { border-color: var(--warning); } .snack .snack-media.is-icon.is-warning.is-solid { background: var(--warning); } .snack .snack-media.is-icon.is-warning.is-solid svg { color: var(--white); } .snack .snack-media.is-icon.is-warning svg { color: var(--warning); } .snack .snack-media.is-icon.is-warning .fas, .snack .snack-media.is-icon.is-warning .far, .snack .snack-media.is-icon.is-warning .fad, .snack .snack-media.is-icon.is-warning .fal, .snack .snack-media.is-icon.is-warning .fab, .snack .snack-media.is-icon.is-warning .lnil, .snack .snack-media.is-icon.is-warning .lnir { color: var(--warning); } .snack .snack-media.is-icon.is-danger { border-color: var(--danger); } .snack .snack-media.is-icon.is-danger.is-solid { background: var(--danger); } .snack .snack-media.is-icon.is-danger.is-solid svg { color: var(--white); } .snack .snack-media.is-icon.is-danger svg { color: var(--danger); } .snack .snack-media.is-icon.is-danger .fas, .snack .snack-media.is-icon.is-danger .far, .snack .snack-media.is-icon.is-danger .fad, .snack .snack-media.is-icon.is-danger .fal, .snack .snack-media.is-icon.is-danger .fab, .snack .snack-media.is-icon.is-danger .lnil, .snack .snack-media.is-icon.is-danger .lnir { color: var(--danger); } .snack .snack-media.is-icon .snack-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .snack .snack-media.is-icon svg { height: 18px; width: 18px; stroke-width: 1.6px; color: var(--light-text); vertical-align: 0 !important; transform: rotate(0) translate(-50%, -50%) !important; } .snack .snack-media.is-icon .fas, .snack .snack-media.is-icon .far, .snack .snack-media.is-icon .fad, .snack .snack-media.is-icon .fal, .snack .snack-media.is-icon .fab { font-size: 15px; color: var(--light-text); } .snack .snack-media.is-icon .lnil, .snack .snack-media.is-icon .lnir { font-size: 18px; color: var(--light-text); } .snack .snack-media img { display: inline-block; height: 38px; width: 38px; border-radius: var(--radius-rounded); } .snack .snack-text { display: inline-block; position: relative; top: -15px; color: var(--dark-text); } .snack .snack-action { position: relative; top: -14px; display: inline-block; margin: 0 16px 0 10px; cursor: pointer; } .snack .snack-action svg { height: 14px; width: 14px; color: var(--light-text); } /* ========================================================================== 2. Snacks Dark mode ========================================================================== */ .is-dark .snack { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); } .is-dark .snack .snack-media.is-icon:not(.is-solid) { background: var(--dark-sidebar-light-4); } .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) { border-color: var(--primary); } .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) svg { color: var(--primary); } .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .fas, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .far, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .fad, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .fab, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .fal, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .lnil, .is-dark .snack .snack-media.is-icon.is-primary:not(.is-solid) .lnir { color: var(--primary); } .is-dark .snack .snack-media.is-icon.is-primary.is-solid { background: var(--primary); border-color: var(--primary); } .is-dark .snack .snack-text { color: var(--dark-dark-text); } .switch-segment { display: flex; align-items: center; justify-content: flex-end; } .switch-segment .is-label { font-family: var(--font); font-size: 0.9rem; } .switch-segment .is-label:first-child { color: var(--dark-text); } .switch-segment .is-label:nth-child(3) { color: var(--light-text); } .switch-segment .form-switch { transform: scale(0.7); margin: 0 0.25rem; } .is-dark .switch-segment .is-label:first-child { color: var(--dark-dark-text); } /*! _tabs.scss | Vuero | Css ninja 2020-2021 */ /* 1. Tabs 2. Tabs Dark mode 3. Tab Content 4. Sliding tabs 2X 5. Sliding tabs 3X 6. Sliding tabs Dark mode */ /* ========================================================================== 1. Tabs ========================================================================== */ .tabs { margin-bottom: 20px; } .tabs.is-toggle li:first-child a { border-right: none; } .tabs.is-toggle li:last-child a { border-left: none; } .tabs.is-toggle li.is-active a { background: var(--primary); border-color: var(--primary); } .tabs.is-toggle li.is-active a:hover { color: var(--white); } .tabs.is-toggle li a { transition: all 0.3s; } .tabs.is-toggle li a:hover { border-color: #dbdbdb; } .tabs li.is-active a { border-bottom-color: var(--primary); color: var(--primary); } .tabs li.is-active a:hover { border-bottom-color: var(--primary); color: var(--primary); } .tabs li a { font-family: var(--font); border-bottom-width: 2px; color: var(--placeholder); border-bottom-color: transparent; } .tabs li a:hover { color: var(--light-text); border-bottom-color: transparent; } .tabs li a svg { height: 16px; width: 16px; margin-right: 6px; } .tabs li a .fas, .tabs li a .fal, .tabs li a .far, .tabs li a .fad, .tabs li a .fab { margin-right: 6px; } .tabs li a .lnil, .tabs li a .lnir { font-size: 20px; margin-right: 6px; } .tabs li a small { margin-left: 5px; } /* ========================================================================== 2. Tabs Dark mode ========================================================================== */ .is-dark .tabs.is-boxed li.is-active a, .is-dark .tabs.is-boxed li.is-active a:hover { background: var(--dark-sidebar-light-1) !important; } .is-dark .tabs.is-boxed li a { border-color: var(--dark-sidebar-light-16) !important; } .is-dark .tabs.is-boxed li a:hover { background: var(--dark-sidebar-light-4) !important; } .is-dark .tabs.is-toggle li.is-active a, .is-dark .tabs.is-toggle li.is-active a:hover { background: var(--primary) !important; border-color: var(--primary); color: var(--white); } .is-dark .tabs.is-toggle li a { border-color: var(--dark-sidebar-light-16) !important; } .is-dark .tabs.is-toggle li a:hover { background: var(--dark-sidebar-light-4) !important; } .is-dark .tabs ul { border-bottom-color: var(--dark-sidebar-light-16); } .is-dark .tabs li.is-active a { border-bottom-color: var(--primary); color: var(--primary); } /* ========================================================================== 3. Tab Content ========================================================================== */ .tab-content { display: none; animation-name: fadeInLeft; animation-duration: 0.5s; } .tab-content.is-active { display: block; } .tab-content.is-active.is-spaced { margin-top: 10px !important; } .tab-content.is-spaced { margin-top: 40px; } .tab-content.is-spaced-lg { margin-top: 40px !important; } /* ========================================================================== 4. Sliding tabs 2X ========================================================================== */ .tabs-wrapper.is-slider.is-inverted .tabs, .tabs-wrapper-alt.is-slider.is-inverted .tabs { background: var(--white); } .tabs-wrapper.is-slider.is-squared .tabs, .tabs-wrapper.is-slider.is-squared .tab-naver, .tabs-wrapper-alt.is-slider.is-squared .tabs, .tabs-wrapper-alt.is-slider.is-squared .tab-naver { border-radius: 8px; } .tabs-wrapper.is-slider .tabs, .tabs-wrapper-alt.is-slider .tabs { position: relative; background: var(--fade-grey-light-2); border: 1px solid var(--fade-grey); max-width: 185px; height: 35px; border-bottom: none; border-radius: 500px; } .tabs-wrapper.is-slider .tabs ul, .tabs-wrapper-alt.is-slider .tabs ul { border-bottom: none; } .tabs-wrapper.is-slider .tabs ul.is-profile li a, .tabs-wrapper-alt.is-slider .tabs ul.is-profile li a { color: var(--smoke-white) !important; } .tabs-wrapper.is-slider .tabs ul.is-profile li.is-active a, .tabs-wrapper-alt.is-slider .tabs ul.is-profile li.is-active a { color: var(--dark-text) !important; } .tabs-wrapper.is-slider .tabs li, .tabs-wrapper-alt.is-slider .tabs li { width: 50%; } .tabs-wrapper.is-slider .tabs li a, .tabs-wrapper-alt.is-slider .tabs li a { color: var(--light-text); font-family: var(--font); height: 40px; border-bottom: none; position: relative; z-index: 5; } .tabs-wrapper.is-slider .tabs li a span, .tabs-wrapper-alt.is-slider .tabs li a span { position: relative; top: -1px; display: block; } .tabs-wrapper.is-slider .tabs li.is-active a, .tabs-wrapper-alt.is-slider .tabs li.is-active a { color: var(--white); font-weight: 400; } .tabs-wrapper.is-slider .tabs li:first-child.is-active ~ .tab-naver, .tabs-wrapper-alt.is-slider .tabs li:first-child.is-active ~ .tab-naver { margin-left: 0; } .tabs-wrapper.is-slider .tabs li:nth-child(2).is-active ~ .tab-naver, .tabs-wrapper-alt.is-slider .tabs li:nth-child(2).is-active ~ .tab-naver { margin-left: 50% !important; } .tabs-wrapper.is-slider .tab-naver, .tabs-wrapper-alt.is-slider .tab-naver { left: 0; background: var(--primary); position: absolute; top: 0.5px; display: block; height: 32px; transition: all 0.3s; z-index: 4; border-radius: 50px; } .tabs-wrapper.is-slider .tab-naver.is-profile, .tabs-wrapper-alt.is-slider .tab-naver.is-profile { background: var(--smoke-white) !important; } .tabs-wrapper.is-slider .tab-naver.is-active, .tabs-wrapper-alt.is-slider .tab-naver.is-active { margin-left: 50%; } /* ========================================================================== 5. Sliding tabs 3X ========================================================================== */ .tabs-wrapper.is-triple-slider.is-inverted .tabs, .tabs-wrapper-alt.is-triple-slider.is-inverted .tabs { background: var(--white); } .tabs-wrapper.is-triple-slider.is-squared .tabs, .tabs-wrapper.is-triple-slider.is-squared .tab-naver, .tabs-wrapper-alt.is-triple-slider.is-squared .tabs, .tabs-wrapper-alt.is-triple-slider.is-squared .tab-naver { border-radius: 8px; } .tabs-wrapper.is-triple-slider .tabs, .tabs-wrapper-alt.is-triple-slider .tabs { position: relative; background: var(--fade-grey-light-2); border: 1px solid var(--fade-grey); max-width: 280px; height: 35px; border-bottom: none; border-radius: 500px; } .tabs-wrapper.is-triple-slider .tabs ul, .tabs-wrapper-alt.is-triple-slider .tabs ul { border-bottom: none; } .tabs-wrapper.is-triple-slider .tabs ul.is-profile li a, .tabs-wrapper-alt.is-triple-slider .tabs ul.is-profile li a { color: var(--smoke-white) !important; } .tabs-wrapper.is-triple-slider .tabs ul.is-profile li.is-active a, .tabs-wrapper-alt.is-triple-slider .tabs ul.is-profile li.is-active a { color: var(--dark-text) !important; } .tabs-wrapper.is-triple-slider .tabs li, .tabs-wrapper-alt.is-triple-slider .tabs li { width: 33.3%; } .tabs-wrapper.is-triple-slider .tabs li a, .tabs-wrapper-alt.is-triple-slider .tabs li a { color: var(--light-text); font-family: var(--font); font-weight: 400; height: 40px; border-bottom: none; position: relative; z-index: 5; } .tabs-wrapper.is-triple-slider .tabs li a span, .tabs-wrapper-alt.is-triple-slider .tabs li a span { position: relative; top: -1px; display: block; } .tabs-wrapper.is-triple-slider .tabs li.is-active a, .tabs-wrapper-alt.is-triple-slider .tabs li.is-active a { color: var(--white); font-weight: 400; } .tabs-wrapper.is-triple-slider .tabs li:first-child.is-active ~ .tab-naver, .tabs-wrapper-alt.is-triple-slider .tabs li:first-child.is-active ~ .tab-naver { margin-left: 0; } .tabs-wrapper.is-triple-slider .tabs li:nth-child(2).is-active ~ .tab-naver, .tabs-wrapper-alt.is-triple-slider .tabs li:nth-child(2).is-active ~ .tab-naver { margin-left: 33% !important; } .tabs-wrapper.is-triple-slider .tabs li:nth-child(3).is-active ~ .tab-naver, .tabs-wrapper-alt.is-triple-slider .tabs li:nth-child(3).is-active ~ .tab-naver { margin-left: 66.6%; } .tabs-wrapper.is-triple-slider .tab-naver, .tabs-wrapper-alt.is-triple-slider .tab-naver { position: absolute; top: 0.5px; left: 0; display: block; width: 33.3% !important; background: var(--primary); height: 32px; transition: all 0.3s; z-index: 4; border-radius: 50px; } .tabs-wrapper.is-triple-slider .tab-naver.is-profile, .tabs-wrapper-alt.is-triple-slider .tab-naver.is-profile { background: var(--smoke-white) !important; } .tabs-wrapper.is-triple-slider .tab-naver.is-active, .tabs-wrapper-alt.is-triple-slider .tab-naver.is-active { margin-left: 48%; } /* ========================================================================== 6. Sliding tabs Dark mode ========================================================================== */ .is-dark .tabs-wrapper.is-slider.is-inverted .tabs, .is-dark .tabs-wrapper.is-triple-slider.is-inverted .tabs { border: 1px solid var(--dark-sidebar-light-16) !important; background: var(--dark-sidebar-light-2) !important; } .is-dark .tabs-wrapper.is-slider .tabs, .is-dark .tabs-wrapper.is-triple-slider .tabs { border: 1px solid var(--dark-sidebar-light-16) !important; background: var(--dark-sidebar-light-2) !important; } .is-dark .tabs-wrapper.is-slider .tabs .tab-naver, .is-dark .tabs-wrapper.is-triple-slider .tabs .tab-naver { background: var(--primary) !important; } .is-dark .tabs-wrapper.is-slider .tabs ul, .is-dark .tabs-wrapper.is-triple-slider .tabs ul { border: none; } .is-dark .tabs-wrapper.is-slider .tabs li.is-active a, .is-dark .tabs-wrapper.is-triple-slider .tabs li.is-active a { color: var(--white); } /* ========================================================================== 4. Vertical tabs ========================================================================== */ @media only screen and (max-width: 767px) { .vertical-tabs-wrapper .tabs ul li.is-active a { color: var(--primary); border-bottom-color: var(--primary); } .vertical-tabs-wrapper .tabs ul li a { color: var(--light-text); } .vertical-tabs-wrapper .content-wrap .tab-content { padding-top: 12px; display: none; animation: fadeInLeft 0.5s; } .vertical-tabs-wrapper .content-wrap .tab-content.is-active { display: block; } } @media only screen and (min-width: 768px) { .vertical-tabs-wrapper { display: flex; } .vertical-tabs-wrapper .tabs { min-width: 25%; max-width: 25%; margin-right: 30px; } .vertical-tabs-wrapper .tabs ul { display: block; text-align: left; border-bottom-color: transparent !important; } .vertical-tabs-wrapper .tabs ul li { display: block; } .vertical-tabs-wrapper .tabs ul li.is-active a { color: var(--primary); border-right-color: var(--primary); } .vertical-tabs-wrapper .tabs ul li a { display: block; border-bottom-color: transparent !important; border-right: 2px solid #dbdbdb; color: var(--light-text); } .vertical-tabs-wrapper .content-wrap { flex-grow: 2; } .vertical-tabs-wrapper .content-wrap .tab-content { display: none; animation: fadeInLeft 0.5s; } .vertical-tabs-wrapper .content-wrap .tab-content.is-active { display: block; } } /*! _table.scss | Vuero | Css ninja 2020-2021 */ /* 1. Flex Table 2. Flex Table Dark mode 3. Table Pagination 4. Table Pagination Dark mode 5. Flex Table Advanced wrapper 6. Flex Table Advanced wrapper Dark mode 7. Bulma Table 8. Bulma Table Dark mode 9. Media Queries */ /* ========================================================================== 1. Flex Table ========================================================================== */ .flex-table.is-compact .flex-table-item { margin-bottom: 0; border-radius: 0; } .flex-table.is-compact .flex-table-item:not(:last-child) { border-bottom: none; } .flex-table.is-compact .flex-table-item:nth-child(2) { border-radius: 8px 8px 0 0; } .flex-table.is-compact .flex-table-item:last-child { margin-bottom: 6px; border-radius: 0 0 8px 8px; } .flex-table .flex-table-header { display: flex; align-items: center; padding: 0 10px; } .flex-table .flex-table-header span { flex: 1 1 0; display: flex; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--muted-grey); text-transform: uppercase; padding: 0 10px 10px 10px; } .flex-table .flex-table-header span.is-checkbox { display: flex; justify-content: center; align-items: center; width: 30px; max-width: 30px; } .flex-table .flex-table-header span.is-checkbox .checkbox { padding: 0; } .flex-table .flex-table-header span.is-checkbox .checkbox > span { height: 22px; } .flex-table .flex-table-header span.cell-center { justify-content: center; } .flex-table .flex-table-header span.cell-end { justify-content: flex-end; } .flex-table .flex-table-header span.is-grow { flex-grow: 2; } .flex-table .flex-table-header span.is-grow-lg { flex-grow: 3; } .flex-table .flex-table-item { display: flex; align-items: stretch; width: 100%; min-height: 60px; background: var(--white); border-radius: 8px; border: 1px solid var(--fade-grey-dark-3); padding: 8px; margin-bottom: 6px; } .flex-table .flex-table-item.is-row { border: none; background: transparent; } .flex-table .flex-table-item .flex-table-cell { flex: 1 1 0; display: flex; align-items: center; padding: 0 10px; font-family: var(--font); } .flex-table .flex-table-item .flex-table-cell.is-grow { flex-grow: 2; } .flex-table .flex-table-item .flex-table-cell.cell-center { justify-content: center; } .flex-table .flex-table-item .flex-table-cell.cell-end { justify-content: flex-end; } .flex-table .flex-table-item .flex-table-cell.cell-end .button.has-dot .dot { position: relative; top: 1px; font-size: 4px; margin: 0 6px; } .flex-table .flex-table-item .flex-table-cell.cell-end .action-link { font-size: 0.9rem; } .flex-table .flex-table-item .flex-table-cell.is-bold > span { font-family: var(--font-alt); font-size: 0.9rem; font-weight: 600; } .flex-table .flex-table-item .flex-table-cell.is-checkbox { display: flex; justify-content: center; align-items: center; width: 30px; max-width: 30px; } .flex-table .flex-table-item .flex-table-cell.is-checkbox .checkbox { padding: 0; margin-left: 4px; } .flex-table .flex-table-item .flex-table-cell.is-user.is-grow, .flex-table .flex-table-item .flex-table-cell.is-media.is-grow { flex-grow: 2; } .flex-table .flex-table-item .flex-table-cell.is-user.is-grow-lg, .flex-table .flex-table-item .flex-table-cell.is-media.is-grow-lg { flex-grow: 3; } .flex-table .flex-table-item .flex-table-cell.is-user > div span:not(.avatar), .flex-table .flex-table-item .flex-table-cell.is-media > div span:not(.avatar) { display: block; margin-left: 10px; } .flex-table .flex-table-item .flex-table-cell.is-user > div, .flex-table .flex-table-item .flex-table-cell.is-media > div { line-height: 1.2; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-name, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-name { font-family: var(--font-alt); font-size: 0.9rem; font-weight: 600; color: var(--dark-text); } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta { color: var(--light-text); } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta svg, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta svg { position: relative; top: 2px; height: 14px; width: 14px; stroke-width: 1.6px; margin-right: 4px; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta span, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta span { display: inline-block; margin-left: 0; font-size: 0.9rem; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media { margin-left: 10px; margin-top: 4px; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media .v-avatar, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media .v-avatar { width: 26px !important; min-width: 26px !important; height: 26px !important; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media .v-avatar .avatar, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media .v-avatar .avatar { width: 26px !important; min-width: 26px !important; height: 26px !important; } .flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .separator, .flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .separator { padding: 0 8px; } .flex-table .flex-table-item .flex-table-cell.is-user .v-avatar .avatar.is-fake span, .flex-table .flex-table-item .flex-table-cell.is-media .v-avatar .avatar.is-fake span { margin: 0; } .flex-table .flex-table-item .flex-table-cell.is-user .media, .flex-table .flex-table-item .flex-table-cell.is-media .media { display: block; width: 100%; max-width: 130px; min-height: 95px; object-fit: cover; border-radius: 8px; } .flex-table .flex-table-item .flex-table-cell.is-user .cell-image, .flex-table .flex-table-item .flex-table-cell.is-media .cell-image { display: block; width: 100%; max-width: 80px; } .flex-table .flex-table-item .flex-table-cell.is-user .cell-image.is-mini, .flex-table .flex-table-item .flex-table-cell.is-media .cell-image.is-mini { max-width: 40px; } .flex-table .flex-table-item .flex-table-cell .cell-icon { margin-right: 4px; color: var(--light-text); } .flex-table .flex-table-item .flex-table-cell .tag { margin-bottom: 0 !important; line-height: 1.8; height: 1.8em; } .flex-table .flex-table-item .flex-table-cell .flex-media { display: flex; align-items: center; } .flex-table .flex-table-item .flex-table-cell .flex-media .meta { margin-left: 6px; line-height: 1.3; } .flex-table .flex-table-item .flex-table-cell .flex-media .meta span { display: block !important; font-size: 0.8rem; color: var(--light-text); font-family: var(--font); } .flex-table .flex-table-item .flex-table-cell .dot-levels { display: flex; align-items: center; } .flex-table .flex-table-item .flex-table-cell .dot-levels .dot { font-size: 8px; color: var(--light-text-light-6); margin: 0 6px; } .flex-table .flex-table-item .flex-table-cell .dot-levels .dot.active { color: var(--primary); } /* ========================================================================== 2. Flex Table Dark mode ========================================================================== */ .is-dark .flex-table .flex-table-item { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .flex-table .flex-table-item .flex-table-cell.is-user .v-avatar .badge, .is-dark .flex-table .flex-table-item .flex-table-cell.is-media .v-avatar .badge { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .flex-table .flex-table-item .flex-table-cell.cell-end .button.dark-outlined:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .is-dark .flex-table .flex-table-item .flex-table-cell .dark-text { color: var(--dark-dark-text) !important; } .is-dark .flex-table .flex-table-item .flex-table-cell .avatar-stack .v-avatar .avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .flex-table .flex-table-item .flex-table-cell .avatar-stack .v-avatar .is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .flex-table .flex-table-item .flex-table-cell .dot-levels .dot.active { color: var(--primary); } /* ========================================================================== 3. Table Pagination ========================================================================== */ .flex-pagination { padding: 12px 0; } .flex-pagination .pagination-next, .flex-pagination .pagination-previous { background: var(--white); min-width: 85px; } .flex-pagination .pagination-next.has-chevron, .flex-pagination .pagination-previous.has-chevron { min-width: 55px; } .flex-pagination .pagination-next.has-chevron svg, .flex-pagination .pagination-previous.has-chevron svg { height: 16px; width: 16px; stroke-width: 3px; color: var(--primary); } .flex-pagination .pagination-list li .pagination-link { background: var(--white); font-family: var(--font); font-size: 0.9em; } .flex-pagination .pagination-list li .pagination-link.is-current { background: var(--primary); border-color: var(--primary); box-shadow: var(--primary-box-shadow); } /* ========================================================================== 4. Table Pagination Dark mode ========================================================================== */ .is-dark .flex-pagination .pagination-next, .is-dark .flex-pagination .pagination-previous { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); color: var(--dark-dark-text); } .is-dark .flex-pagination .pagination-next svg, .is-dark .flex-pagination .pagination-previous svg { color: var(--primary); } .is-dark .flex-pagination .pagination-list li .pagination-link { background: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-4); color: var(--dark-dark-text); } .is-dark .flex-pagination .pagination-list li .pagination-link.is-current { background: var(--primary); color: var(--smoke-white); border-color: var(--primary); box-shadow: var(--primary-box-shadow); } /* ========================================================================== 5. Flex Table advanced wrapper ========================================================================== */ .flex-table-wrapper { background: var(--white); border: 1px solid var(--fade-grey-dark-3); border-radius: 8px; padding: 20px; } .flex-table-wrapper .flex-table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .flex-table-wrapper .flex-table .flex-table-item { margin-bottom: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; } .flex-table-wrapper .flex-table .flex-table-item:last-child { margin-bottom: 6px; border-bottom: none; } /* ========================================================================== 6. Flex Table advanced wrapper Dark mode ========================================================================== */ .is-dark .flex-table-wrapper { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } /* ========================================================================== 7. Bulma Table ========================================================================== */ .demo-table { margin-bottom: 3rem; } .table.is-striped tr:not(.is-selected):nth-child(even) { background: var(--widget-grey-light-1) !important; } .table.is-hoverable tbody tr:not(.is-selected):hover { background: var(--widget-grey-light-1); } .table tbody th { font-family: var(--font); color: var(--dark-text); } .table tbody th.is-media { width: 40px; } .table tbody th.is-end > div { display: flex; justify-content: flex-end; } .table tbody td { font-family: var(--font); vertical-align: middle; color: var(--light-text); } .table tbody td.is-media { width: 40px; } .table tbody td.is-end > div { display: flex; justify-content: flex-end; } .table th { font-family: var(--font-alt); } .table td { font-family: var(--font); vertical-align: middle; } /* ========================================================================== 8. Bulma Table Dark mode ========================================================================== */ .is-dark .table { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .table.is-hoverable tbody tr:not(.is-selected):hover { background: var(--dark-sidebar-light-9); } .is-dark .table.is-striped tr:not(.is-selected):nth-child(even) { background: var(--dark-sidebar-light-9) !important; } .is-dark .table tbody th, .is-dark .table tbody td { border-color: var(--dark-sidebar-light-12); } .is-dark .table tbody th { color: var(--dark-dark-text); } .is-dark .table tbody td:first-child { color: var(--dark-dark-text); } .is-dark .table th, .is-dark .table td { border-color: var(--dark-sidebar-light-12); } .is-dark .table th { color: var(--dark-dark-text); } .is-dark .table td { color: var(--dark-dark-text); } /* ========================================================================== 9. Media Queries ========================================================================== */ @media (max-width: 767px) { .flex-table-wrapper .flex-table-toolbar { margin-bottom: 10px; } .flex-table-wrapper .flex-table-toolbar .left { flex-grow: 2; } .flex-table-wrapper .flex-table-toolbar .right { display: none; } .flex-table-wrapper .flex-table .flex-table-header .is-checkbox { display: none; } .flex-table-wrapper .flex-table .flex-table-item { padding-left: 0; padding-right: 0; } .flex-table-wrapper .flex-table .flex-table-item .is-checkbox { display: none; } .flex-table .flex-table-header { display: none; } .flex-table .flex-table-cell { position: relative; margin-bottom: 12px; } .flex-table .flex-table-cell::before { content: attr(data-th); font-size: 0.9rem; text-transform: uppercase; font-weight: 500; color: var(--muted-grey); } .flex-table .flex-table-cell.no-label-mobile::before { display: none !important; } .flex-table .flex-table-cell.cell-end { justify-content: flex-start !important; } .flex-table .flex-table-cell.cell-end .btn-group { margin-left: auto; } .flex-table .flex-table-cell.is-user span { font-size: 1.2rem; } .flex-table .flex-table-cell > span, .flex-table .flex-table-cell > .is-pushed-mobile { margin-left: auto; } .flex-table .flex-table-cell > span.no-push, .flex-table .flex-table-cell > .is-pushed-mobile.no-push { margin-left: 0 !important; } .flex-table .flex-table-cell .v-avatar { margin-left: auto; } .flex-table .flex-table-item { flex-direction: column; justify-content: center; width: 100% !important; padding: 20px; margin-bottom: 16px; } .flex-table .flex-table-item:last-child { margin-bottom: 0; } .flex-table .flex-table-item > div { border: none !important; } .pagination-next.has-chevron, .pagination-previous.has-chevron { min-width: 55px; max-width: 55px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .flex-table .flex-table-cell.is-user img { min-width: 50px; } .pagination-next.has-chevron, .pagination-previous.has-chevron { min-width: 55px; max-width: 55px; } .pagination-next { margin-right: auto; } } /*! _datatable.scss | Vuero | Css ninja 2020-2021 */ /* 1. Datatable Toolbar 2. Datatable Toolbar Dark mode 3. Datatable pagination 4. Datatable pagination Dark mode 5. Datatable sorting 6. Ajax Loading bar 3. Simple Datatables 4. Simple Datatables Dark mode */ /* ========================================================================== 1. Datatable Toolbar ========================================================================== */ .is-navbar .datatable-toolbar { padding-top: 30px; } .datatable-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .datatable-toolbar.is-reversed { flex-direction: row-reverse; } .datatable-toolbar .field { margin-bottom: 0; } .datatable-toolbar .field .control .button { color: var(--light-text); } .datatable-toolbar .field .control .button:hover { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .datatable-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .datatable-toolbar .buttons .v-button { margin-bottom: 0; } /* ========================================================================== 2. Datatable Toolbar Dark mode ========================================================================== */ .is-dark .datatable-toolbar .field .control .button { background: var(--dark-sidebar) !important; color: var(--light-text); } .is-dark .datatable-toolbar .field .control .button:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--smoke-white) !important; } /* ========================================================================== 3. Simple Datatables ========================================================================== */ .dataTable-wrapper .dataTable-top { margin-bottom: 1.5rem; padding-left: 0; padding-right: 0; } .dataTable-wrapper .dataTable-top .dataTable-dropdown label { display: block; position: relative; font-family: var(--font); font-weight: 400; font-size: 0.9rem; color: var(--light-text); } .dataTable-wrapper .dataTable-top .dataTable-dropdown label::after { position: absolute; top: 1px; right: 4px; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.9rem; color: var(--light-text); height: 36px; width: 36px; border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; background: var(--white); } .dataTable-wrapper .dataTable-top .dataTable-dropdown select { font-size: 1rem; background: var(--white); border: 1px solid var(--border); color: var(--dark-text); border-radius: 0.5rem; height: 38px; outline: none; transition: box-shadow 0.3s; } .dataTable-wrapper .dataTable-top .dataTable-dropdown select:focus { box-shadow: var(--light-box-shadow); } .dataTable-wrapper .dataTable-top .dataTable-search { position: relative; } .dataTable-wrapper .dataTable-top .dataTable-search::after { position: absolute; top: 1px; right: 4px; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.9rem; color: var(--light-text); height: 36px; width: 36px; border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; background: var(--white); } .dataTable-wrapper .dataTable-top .dataTable-search input { font-family: var(--font); font-size: 1rem; background: var(--white); border: 1px solid var(--border); color: var(--dark-text); border-radius: 0.5rem; height: 38px; outline: none; transition: box-shadow 0.3s; } .dataTable-wrapper .dataTable-top .dataTable-search input::placeholder { color: var(--placeholder); } .dataTable-wrapper .dataTable-top .dataTable-search input:focus { box-shadow: var(--light-box-shadow); } .dataTable-wrapper .dataTable-container { background: var(--white); border: none !important; overflow-x: auto; } .dataTable-wrapper .dataTable-container::-webkit-scrollbar { height: 8px !important; } .dataTable-wrapper .dataTable-container::-webkit-scrollbar-thumb { border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; } .dataTable-wrapper .dataTable-container .dataTable-table { border: 1px solid var(--fade-grey); border-collapse: collapse; border-radius: 0.75rem; } .dataTable-wrapper .dataTable-container .dataTable-table th { padding: 16px 20px; font-family: var(--font-alt); font-size: 0.8rem; color: var(--dark-text); text-transform: uppercase; border: 1px solid var(--fade-grey); font-weight: 600; } .dataTable-wrapper .dataTable-container .dataTable-table th:last-child { text-align: right; } .dataTable-wrapper .dataTable-container .dataTable-table td { font-family: var(--font); vertical-align: middle; padding: 12px 20px; border-bottom: 1px solid var(--fade-grey); } .dataTable-wrapper .dataTable-container .dataTable-table td:last-child { text-align: right; } .dataTable-wrapper .dataTable-container .dataTable-table td.dataTables-empty { opacity: 0; } .dataTable-wrapper .dataTable-container .dataTable-table .light-text { color: var(--light-text); } .dataTable-wrapper .dataTable-container .dataTable-table .flex-media { display: flex; align-items: center; } .dataTable-wrapper .dataTable-container .dataTable-table .flex-media .meta { margin-left: 10px; line-height: 1.3; } .dataTable-wrapper .dataTable-container .dataTable-table .flex-media .meta span { display: block; font-size: 0.8rem; color: var(--light-text); font-family: var(--font); } .dataTable-wrapper .dataTable-container .dataTable-table .flex-media .meta span:first-child { font-family: var(--font-alt); color: var(--dark-text); } .dataTable-wrapper .dataTable-container .dataTable-table .row-action { display: flex; justify-content: flex-end; } .dataTable-wrapper .dataTable-container .dataTable-table .checkbox { padding: 0; } .dataTable-wrapper .dataTable-container .dataTable-table .product-photo { width: 80px; height: 80px; object-fit: contain; } .dataTable-wrapper .dataTable-container .dataTable-table .file-icon { width: 46px; height: 46px; object-fit: contain; } .dataTable-wrapper .dataTable-container .dataTable-table .drinks-icon { display: block; max-width: 48px; border-radius: var(--radius-rounded); border: 1px solid var(--fade-grey); } .dataTable-wrapper .dataTable-container .dataTable-table .negative-icon svg, .dataTable-wrapper .dataTable-container .dataTable-table .positive-icon svg { height: 16px; width: 16px; } .dataTable-wrapper .dataTable-container .dataTable-table .positive-icon .iconify { color: var(--success); } .dataTable-wrapper .dataTable-container .dataTable-table .positive-icon .iconify * { stroke-width: 4px; } .dataTable-wrapper .dataTable-container .dataTable-table .negative-icon.is-danger .iconify { color: var(--danger) !important; } .dataTable-wrapper .dataTable-container .dataTable-table .negative-icon .iconify { color: var(--light-text); } .dataTable-wrapper .dataTable-container .dataTable-table .negative-icon .iconify * { stroke-width: 4px; } .dataTable-wrapper .dataTable-container .dataTable-table .price { color: var(--dark-text); font-weight: 500; } .dataTable-wrapper .dataTable-container .dataTable-table .price::before { content: "$"; } .dataTable-wrapper .dataTable-container .dataTable-table .price.price-free { color: var(--light-text); } .dataTable-wrapper .dataTable-container .dataTable-table .status { display: flex; align-items: center; } .dataTable-wrapper .dataTable-container .dataTable-table .status.is-available i { color: var(--success); } .dataTable-wrapper .dataTable-container .dataTable-table .status.is-busy i { color: var(--danger); } .dataTable-wrapper .dataTable-container .dataTable-table .status.is-offline i { color: var(--light-text); } .dataTable-wrapper .dataTable-container .dataTable-table .status i { margin-right: 8px; font-size: 8px; } .dataTable-wrapper .dataTable-container .dataTable-table .status span { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } .dataTable-wrapper .dataTable-bottom .dataTable-info { font-family: var(--font); font-size: 0.9rem; color: var(--light-text); } .dataTable-wrapper .dataTable-bottom .dataTable-pagination li:not(.active) a:hover { background: var(--white); } .dataTable-wrapper .dataTable-bottom .dataTable-pagination li.active a { background: var(--primary); box-shadow: var(--primary-box-shadow); color: var(--primary--color-invert); } .dataTable-wrapper .dataTable-bottom .dataTable-pagination li a { display: flex; justify-content: center; align-items: center; font-family: var(--font); color: var(--light-text); border-radius: var(--radius-rounded); min-width: 34px; min-height: 34px; padding: 0; } /* ========================================================================== 4. Simple Datatables Dark mode ========================================================================== */ .is-dark .dataTable-wrapper .dataTable-top .dataTable-dropdown label::after { background: var(--dark-sidebar-light-6) !important; } .is-dark .dataTable-wrapper .dataTable-top .dataTable-dropdown select { border-color: var(--dark-sidebar-light-12); background: var(--dark-sidebar-light-6); color: var(--white); } .is-dark .dataTable-wrapper .dataTable-top .dataTable-search::after { background: var(--dark-sidebar-light-6) !important; } .is-dark .dataTable-wrapper .dataTable-top .dataTable-search input { border-color: var(--dark-sidebar-light-12); background: var(--dark-sidebar-light-6); color: var(--white); } .is-dark .dataTable-wrapper .dataTable-container { border-color: var(--dark-sidebar-light-12); background: var(--dark-sidebar-light-6); } .is-dark .dataTable-wrapper .dataTable-container .dataTable-table { border-color: var(--dark-sidebar-light-12); } .is-dark .dataTable-wrapper .dataTable-container .dataTable-table th, .is-dark .dataTable-wrapper .dataTable-container .dataTable-table td { border-color: var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .dataTable-wrapper .dataTable-container .dataTable-table th .dataTable-sorter::before { border-top-color: var(--dark-dark-text); } .is-dark .dataTable-wrapper .dataTable-container .dataTable-table th .dataTable-sorter::after { border-bottom-color: var(--dark-dark-text); } .is-dark .dataTable-wrapper .dataTable-container .dataTable-table .drinks-icon { border-color: var(--dark-sidebar-light-12); } /*! _toasts.scss | Vuero | Css ninja 2020-2021 */ /* 1. Notyf Toasts 2. Special Checkbox */ /* ========================================================================== 1. Notyf Toasts ========================================================================== */ .notyf .notyf__toast .notyf__wrapper .notyf__icon .fas, .notyf .notyf__toast .notyf__wrapper .notyf__icon .fal, .notyf .notyf__toast .notyf__wrapper .notyf__icon .far, .notyf .notyf__toast .notyf__wrapper .notyf__icon .fad, .notyf .notyf__toast .notyf__wrapper .notyf__icon .fab { color: var(--white) !important; font-size: 1.6rem !important; } .notyf .notyf__toast .notyf__wrapper .notyf__message { font-family: var(--font); color: var(--white) !important; } /*! _list-view.scss | Vuero | Css ninja 2020-2021 */ /* 1. List View Toolbar 2. List Flex Toolbar 3. Card grid Toolbar 4. Tile grid Toolbar 5. User grid Toolbar */ /* ========================================================================== 1. List View Toolbar ========================================================================== */ .list-view-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .list-view-toolbar.is-reversed { flex-direction: row-reverse; } .list-view-toolbar.is-reversed .control { margin-right: 0; margin-left: auto; } .list-view-toolbar.is-reversed .tabs-inner { margin-right: 10px; margin-left: 0; } .list-view-toolbar .field { margin-bottom: 0; } .list-view-toolbar .control { margin-right: 10px; } .list-view-toolbar .list-info span { font-family: var(--font); color: var(--light-text); } .list-view-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .list-view-toolbar .buttons .v-button { margin-bottom: 0; } .list-view-toolbar .tabs-inner { margin-left: auto; } .list-view-toolbar .tabs-inner .tabs { margin-bottom: 0; min-width: 170px; } @media only screen and (max-width: 767px) { .list-view-toolbar .list-info { display: none; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .list-view-toolbar { padding: 0 10px; } } /* ========================================================================== 2. List Flex Toolbar ========================================================================== */ .list-flex-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .list-flex-toolbar.is-reversed { flex-direction: row-reverse; } .list-flex-toolbar.is-reversed .control { margin-right: 0; margin-left: auto; } .list-flex-toolbar.is-reversed .tabs-inner { margin-right: 10px; margin-left: 0; } .list-flex-toolbar .field { margin-bottom: 0; } .list-flex-toolbar .control { margin-right: 10px; } .list-flex-toolbar .list-info span { font-family: var(--font); color: var(--light-text); } .list-flex-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .list-flex-toolbar .buttons .v-button { margin-bottom: 0; } .list-flex-toolbar .tabs-inner { margin-left: auto; } .list-flex-toolbar .tabs-inner .tabs { margin-bottom: 0; min-width: 170px; } /* ========================================================================== 3. Card grid Toolbar ========================================================================== */ .card-grid-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .card-grid-toolbar.is-reversed { flex-direction: row-reverse; } .card-grid-toolbar.is-reversed .control { margin-right: 0; margin-left: auto; } .card-grid-toolbar.is-reversed .tabs-inner { margin-right: 10px; margin-left: 0; } .card-grid-toolbar .field { margin-bottom: 0; } .card-grid-toolbar .control { margin-right: 10px; } .card-grid-toolbar .list-info span { font-family: var(--font); color: var(--light-text); } .card-grid-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .card-grid-toolbar .buttons .field { min-width: 180px; } .card-grid-toolbar .buttons .field, .card-grid-toolbar .buttons .v-button { margin-bottom: 0; } .card-grid-toolbar .buttons .field .h-select, .card-grid-toolbar .buttons .v-button .h-select { min-width: 190px; } .card-grid-toolbar .tabs-inner { margin-left: auto; } .card-grid-toolbar .tabs-inner .tabs { margin-bottom: 0; min-width: 170px; } /* ========================================================================== 4. Tile grid Toolbar ========================================================================== */ .tile-grid-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .tile-grid-toolbar.is-reversed { flex-direction: row-reverse; } .tile-grid-toolbar.is-reversed .control { margin-right: 0; margin-left: auto; } .tile-grid-toolbar.is-reversed .tabs-inner { margin-right: 10px; margin-left: 0; } .tile-grid-toolbar .field { margin-bottom: 0; } .tile-grid-toolbar .control { margin-right: 10px; } .tile-grid-toolbar .list-info span { font-family: var(--font); color: var(--light-text); } .tile-grid-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .tile-grid-toolbar .buttons .field { min-width: 180px; } .tile-grid-toolbar .buttons .field, .tile-grid-toolbar .buttons .v-button { margin-bottom: 0; } .tile-grid-toolbar .buttons .field .h-select, .tile-grid-toolbar .buttons .v-button .h-select { min-width: 190px; } .tile-grid-toolbar .tabs-inner { margin-left: auto; } .tile-grid-toolbar .tabs-inner .tabs { margin-bottom: 0; min-width: 170px; } /* ========================================================================== 5. User grid Toolbar ========================================================================== */ .user-grid-toolbar { display: flex; align-items: center; margin-bottom: 20px; } .user-grid-toolbar.is-reversed { flex-direction: row-reverse; } .user-grid-toolbar.is-reversed .control { margin-right: 0; margin-left: auto; } .user-grid-toolbar.is-reversed .tabs-inner { margin-right: 10px; margin-left: 0; } .user-grid-toolbar .field { margin-bottom: 0; } .user-grid-toolbar .control { margin-right: 10px; } .user-grid-toolbar .list-info span { font-family: var(--font); color: var(--light-text); } .user-grid-toolbar .buttons { margin-left: auto; margin-bottom: 0; } .user-grid-toolbar .buttons .field { min-width: 180px; } .user-grid-toolbar .buttons .field, .user-grid-toolbar .buttons .v-button { margin-bottom: 0; } .user-grid-toolbar .buttons .field .h-select, .user-grid-toolbar .buttons .v-button .h-select { min-width: 190px; } .user-grid-toolbar .tabs-inner { margin-left: auto; } .user-grid-toolbar .tabs-inner .tabs { margin-bottom: 0; min-width: 170px; } /*! _tooltips.scss | Vuero | Css ninja 2020-2021 */ /* 1. CSS Tooltips 2. CSS Tooltips Dark mode */ /* ========================================================================== 1. CSS Tooltips ========================================================================== */ [class*=hint--] { position: relative; display: inline-block; cursor: pointer; } [class*=hint--]::before, [class*=hint--]::after { position: absolute; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms; } [class*=hint--]:hover::before, [class*=hint--]:hover::after { visibility: visible; opacity: 1; } [class*=hint--]:hover::before, [class*=hint--]:hover::after { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } [class*=hint--]::before { content: ""; position: absolute; background: transparent; border: 6px solid transparent; z-index: 1000001; } [class*=hint--]::after { background: #383838; color: white; padding: 8px 10px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 12px; white-space: nowrap; } [class*=hint--][aria-label]::after { content: attr(aria-label); } [class*=hint--][data-hint]::after { content: attr(data-hint); } [aria-label=""]::before, [aria-label=""]::after, [data-hint=""]::before, [data-hint=""]::after { display: none !important; } .hint--top-left::before { border-top-color: #383838; } .hint--top-right::before { border-top-color: #383838; } .hint--top::before { border-top-color: #383838; } .hint--bottom-left::before { border-bottom-color: #383838; } .hint--bottom-right::before { border-bottom-color: #383838; } .hint--bottom::before { border-bottom-color: #383838; } .hint--left::before { border-left-color: #383838; } .hint--right::before { border-right-color: #383838; } .hint--top::before { margin-bottom: -11px; } .hint--top::before, .hint--top::after { bottom: 100%; left: 50%; } .hint--top::before { left: calc(50% - 6px); } .hint--top::after { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .hint--top:hover::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--top:hover::after { -webkit-transform: translateX(-50%) translateY(-8px); -moz-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); } .hint--bottom::before { margin-top: -11px; } .hint--bottom::before, .hint--bottom::after { top: 100%; left: 50%; } .hint--bottom::before { left: calc(50% - 6px); } .hint--bottom::after { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .hint--bottom:hover::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--bottom:hover::after { -webkit-transform: translateX(-50%) translateY(8px); -moz-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); } .hint--right::before { margin-left: -11px; margin-bottom: -6px; } .hint--right::after { margin-bottom: -14px; } .hint--right::before, .hint--right::after { left: 100%; bottom: 50%; } .hint--right:hover::before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } .hint--right:hover::after { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } .hint--left::before { margin-right: -11px; margin-bottom: -6px; } .hint--left::after { margin-bottom: -14px; } .hint--left::before, .hint--left::after { right: 100%; bottom: 50%; } .hint--left:hover::before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } .hint--left:hover::after { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } .hint--top-left::before { margin-bottom: -11px; } .hint--top-left::before, .hint--top-left::after { bottom: 100%; left: 50%; } .hint--top-left::before { left: calc(50% - 6px); } .hint--top-left::after { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .hint--top-left::after { margin-left: 12px; } .hint--top-left:hover::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--top-left:hover::after { -webkit-transform: translateX(-100%) translateY(-8px); -moz-transform: translateX(-100%) translateY(-8px); transform: translateX(-100%) translateY(-8px); } .hint--top-right::before { margin-bottom: -11px; } .hint--top-right::before, .hint--top-right::after { bottom: 100%; left: 50%; } .hint--top-right::before { left: calc(50% - 6px); } .hint--top-right::after { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } .hint--top-right::after { margin-left: -12px; } .hint--top-right:hover::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--top-right:hover::after { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--bottom-left::before { margin-top: -11px; } .hint--bottom-left::before, .hint--bottom-left::after { top: 100%; left: 50%; } .hint--bottom-left::before { left: calc(50% - 6px); } .hint--bottom-left::after { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .hint--bottom-left::after { margin-left: 12px; } .hint--bottom-left:hover::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--bottom-left:hover::after { -webkit-transform: translateX(-100%) translateY(8px); -moz-transform: translateX(-100%) translateY(8px); transform: translateX(-100%) translateY(8px); } .hint--bottom-right::before { margin-top: -11px; } .hint--bottom-right::before, .hint--bottom-right::after { top: 100%; left: 50%; } .hint--bottom-right::before { left: calc(50% - 6px); } .hint--bottom-right::after { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } .hint--bottom-right::after { margin-left: -12px; } .hint--bottom-right:hover::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--bottom-right:hover::after { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--small::after, .hint--medium::after, .hint--large::after { white-space: normal; line-height: 1.4em; word-wrap: break-word; } .hint--small::after { width: 80px; } .hint--medium::after { width: 150px; } .hint--large::after { width: 300px; } [class*=hint--] { /** * tooltip body */ } [class*=hint--]::after { box-shadow: var(--light-box-shadow); } .hint--primary::after { background-color: var(--primary); } .hint--primary.hint--top-left::before { border-top-color: var(--primary); } .hint--primary.hint--top-right::before { border-top-color: var(--primary); } .hint--primary.hint--top::before { border-top-color: var(--primary); } .hint--primary.hint--bottom-left::before { border-bottom-color: var(--primary); } .hint--primary.hint--bottom-right::before { border-bottom-color: var(--primary); } .hint--primary.hint--bottom::before { border-bottom-color: var(--primary); } .hint--primary.hint--left::before { border-left-color: var(--primary); } .hint--primary.hint--right::before { border-right-color: var(--primary); } .hint--error::after { background-color: var(--danger); } .hint--error.hint--top-left::before { border-top-color: var(--danger); } .hint--error.hint--top-right::before { border-top-color: var(--danger); } .hint--error.hint--top::before { border-top-color: var(--danger); } .hint--error.hint--bottom-left::before { border-bottom-color: var(--danger); } .hint--error.hint--bottom-right::before { border-bottom-color: var(--danger); } .hint--error.hint--bottom::before { border-bottom-color: var(--danger); } .hint--error.hint--left::before { border-left-color: var(--danger); } .hint--error.hint--right::before { border-right-color: var(--danger); } .hint--warning::after { background-color: var(--warning); } .hint--warning.hint--top-left::before { border-top-color: var(--warning); } .hint--warning.hint--top-right::before { border-top-color: var(--warning); } .hint--warning.hint--top::before { border-top-color: var(--warning); } .hint--warning.hint--bottom-left::before { border-bottom-color: var(--warning); } .hint--warning.hint--bottom-right::before { border-bottom-color: var(--warning); } .hint--warning.hint--bottom::before { border-bottom-color: var(--warning); } .hint--warning.hint--left::before { border-left-color: var(--warning); } .hint--warning.hint--right::before { border-right-color: var(--warning); } .hint--info::after { background-color: var(--info); } .hint--info.hint--top-left::before { border-top-color: var(--info); } .hint--info.hint--top-right::before { border-top-color: var(--info); } .hint--info.hint--top::before { border-top-color: var(--info); } .hint--info.hint--bottom-left::before { border-bottom-color: var(--info); } .hint--info.hint--bottom-right::before { border-bottom-color: var(--info); } .hint--info.hint--bottom::before { border-bottom-color: var(--info); } .hint--info.hint--left::before { border-left-color: var(--info); } .hint--info.hint--right::before { border-right-color: var(--info); } .hint--success::after { background-color: var(--success); } .hint--success.hint--top-left::before { border-top-color: var(--success); } .hint--success.hint--top-right::before { border-top-color: var(--success); } .hint--success.hint--top::before { border-top-color: var(--success); } .hint--success.hint--bottom-left::before { border-bottom-color: var(--success); } .hint--success.hint--bottom-right::before { border-bottom-color: var(--success); } .hint--success.hint--bottom::before { border-bottom-color: var(--success); } .hint--success.hint--left::before { border-left-color: var(--success); } .hint--success.hint--right::before { border-right-color: var(--success); } .hint--light::after { background-color: var(--white); color: var(--dark-text) !important; box-shadow: 0 5px 15px 0 rgba(39, 26, 54, 0.15); } .hint--light.hint--top-left::before { border-top-color: var(--white); } .hint--light.hint--top-right::before { border-top-color: var(--white); } .hint--light.hint--top::before { border-top-color: var(--white); } .hint--light.hint--bottom-left::before { border-bottom-color: var(--white); } .hint--light.hint--bottom-right::before { border-bottom-color: var(--white); } .hint--light.hint--bottom::before { border-bottom-color: var(--white); } .hint--light.hint--left::before { border-left-color: var(--white); } .hint--light.hint--right::before { border-right-color: var(--white); } .hint--bubble::after { border-radius: 100px !important; font-size: 0.6rem !important; text-transform: uppercase !important; } .hint--bubble.hint--top-left::before { display: none; } .hint--bubble.hint--top-right::before { display: none; } .hint--bubble.hint--top::before { display: none; } .hint--bubble.hint--bottom-left::before { display: none; } .hint--bubble.hint--bottom-right::before { display: none; } .hint--bubble.hint--bottom::before { display: none; } .hint--bubble.hint--left::before { display: none; } .hint--bubble.hint--right::before { display: none; } .hint--always::after, .hint--always::before { opacity: 1; visibility: visible; } .hint--always.hint--top::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--always.hint--top::after { -webkit-transform: translateX(-50%) translateY(-8px); -moz-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); } .hint--always.hint--top-left::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--always.hint--top-left::after { -webkit-transform: translateX(-100%) translateY(-8px); -moz-transform: translateX(-100%) translateY(-8px); transform: translateX(-100%) translateY(-8px); } .hint--always.hint--top-right::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--always.hint--top-right::after { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } .hint--always.hint--bottom::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--always.hint--bottom::after { -webkit-transform: translateX(-50%) translateY(8px); -moz-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); } .hint--always.hint--bottom-left::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--always.hint--bottom-left::after { -webkit-transform: translateX(-100%) translateY(8px); -moz-transform: translateX(-100%) translateY(8px); transform: translateX(-100%) translateY(8px); } .hint--always.hint--bottom-right::before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--always.hint--bottom-right::after { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } .hint--always.hint--left::before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } .hint--always.hint--left::after { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } .hint--always.hint--right::before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } .hint--always.hint--right::after { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } .hint--rounded::after { border-radius: var(--radius); } .hint--no-animate::before, .hint--no-animate::after { -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; transition-duration: 0ms; } .hint--bounce::before, .hint--bounce::after { -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } .hint--no-shadow::before, .hint--no-shadow::after { text-shadow: initial; box-shadow: initial; } /* ========================================================================== 2. CSS Tooltips Dark mode ========================================================================== */ .is-dark .hint--top-left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--top-left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-top-color: var(--dark-sidebar-dark-4); } .is-dark .hint--top-right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--top-right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-top-color: var(--dark-sidebar-dark-4); } .is-dark .hint--top:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--top:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-top-color: var(--dark-sidebar-dark-4); } .is-dark .hint--bottom-left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--bottom-left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-bottom-color: var(--dark-sidebar-dark-4); } .is-dark .hint--bottom-right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--bottom-right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-bottom-color: var(--dark-sidebar-dark-4); } .is-dark .hint--bottom:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--bottom:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-bottom-color: var(--dark-sidebar-dark-4); } .is-dark .hint--left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--left:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-left-color: var(--dark-sidebar-dark-4); } .is-dark .hint--right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::after { background: var(--dark-sidebar-dark-4) !important; } .is-dark .hint--right:not(.hint--light):not(.hint--info):not(.hint--success):not(.hint--warning):not(.hint--error):not(.hint--bubble):not(.hint--primary)::before { border-right-color: var(--dark-sidebar-dark-4); } .is-dark .hint--primary::after { background-color: var(--primary); } .is-dark .hint--primary.hint--top-left::before { border-top-color: var(--primary); } .is-dark .hint--primary.hint--top-right::before { border-top-color: var(--primary); } .is-dark .hint--primary.hint--top::before { border-top-color: var(--primary); } .is-dark .hint--primary.hint--bottom-left::before { border-bottom-color: var(--primary); } .is-dark .hint--primary.hint--bottom-right::before { border-bottom-color: var(--primary); } .is-dark .hint--primary.hint--bottom::before { border-bottom-color: var(--primary); } .is-dark .hint--primary.hint--left::before { border-left-color: var(--primary); } .is-dark .hint--primary.hint--right::before { border-right-color: var(--primary); } /*! _circle-chart.scss | Vuero | Css Ninja 2020-2021 */ /* 1. Circle Chart 2. Circle Chart Dark mode */ /* ========================================================================== 1. Circle Chart ========================================================================== */ .circle-chart-wrapper.is-success .circle-chart__circle { color: var(--success) !important; stroke: var(--success) !important; } .circle-chart-wrapper.is-info .circle-chart__circle { color: var(--info) !important; stroke: var(--info) !important; } .circle-chart-wrapper.is-warning .circle-chart__circle { color: var(--warning) !important; stroke: var(--warning) !important; } .circle-chart-wrapper.is-danger .circle-chart__circle { color: var(--danger) !important; stroke: var(--danger) !important; } .circle-chart__circle { animation: circle-chart-fill 2.4s reverse; transform: rotate(90deg); transform-origin: center; color: var(--primary); stroke: var(--primary); animation-timing-function: cubic-bezier(0.78, 0.59, 0.19, 0.33); } .circle-chart__circle_2 { animation: circle-chart-fill_3 4s reverse; } .circle-chart__background { color: #efefef; stroke: #efefef; } @keyframes circle-chart-fill { 50% { stroke-dasharray: 0 0; } 100% { stroke-dasharray: 0 100; } } @keyframes circle-chart-fill_2 { from { opacity: 1; } to { stroke-dasharray: 0 100; opacity: 0; } } @keyframes circle-chart-fill_3 { 0% { opacity: 1; } 50% { opacity: 1; stroke-dasharray: 0 100; } 100% { stroke-dasharray: 0 100; opacity: 0; } } /* ========================================================================== 2. Circle Chart Dark mode ========================================================================== */ .is-dark .circle-chart-wrapper:not(.is-success):not(.is-info):not(.is-warning):not(.is-danger) .circle-chart__circle { color: var(--primary) !important; stroke: var(--primary) !important; } .is-dark .circle-chart__background { color: var(--dark-sidebar-dark-2); stroke: var(--dark-sidebar-dark-2); } .ck-editor { /* Overrides the border radius setting in the theme. */ --ck-border-radius: var(--radius-large); /* Overrides the default font size in the theme. */ --ck-font-size-base: 14px; /* Helper variables to avoid duplication in the colors. */ --ck-custom-background: hsl(270, 1%, 29%); --ck-custom-foreground: hsl(255, 3%, 18%); --ck-custom-border: hsl(300, 1%, 22%); --ck-custom-white: hsl(0, 0%, 100%); --ck-color-base-active: var(--primary); --ck-color-base-active-focus: var(--primary-dark-10); --ck-color-base-focus: var(--primary-dark-10); --ck-color-focus-border: var(--primary); --ck-focus-ring: 1px solid var(--ck-color-focus-border); /* -- Overrides generic colors. ------------------------------------------------------------- */ --ck-color-base-foreground: var(--ck-custom-background); --ck-color-text: hsl(0, 0%, 98%); --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2); --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Overrides the default .ck-button class colors. ---------------------------------------- */ --ck-color-button-default-background: var(--ck-custom-background); --ck-color-button-default-hover-background: hsl(270, 1%, 22%); --ck-color-button-default-active-background: hsl(270, 2%, 20%); --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-on-background: var(--ck-custom-foreground); --ck-color-button-on-hover-background: hsl(255, 4%, 16%); --ck-color-button-on-active-background: hsl(255, 4%, 14%); --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); --ck-color-button-on-disabled-background: var(--ck-custom-foreground); --ck-color-button-action-background: hsl(168, 76%, 42%); --ck-color-button-action-hover-background: hsl(168, 76%, 38%); --ck-color-button-action-active-background: hsl(168, 76%, 36%); --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); --ck-color-button-action-text: var(--ck-custom-white); --ck-color-button-save: hsl(120, 100%, 46%); --ck-color-button-cancel: hsl(15, 100%, 56%); /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */ --ck-color-dropdown-panel-background: var(--ck-custom-background); --ck-color-dropdown-panel-border: var(--ck-custom-foreground); /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */ --ck-color-split-button-hover-background: var( --ck-color-button-default-hover-background ); --ck-color-split-button-hover-border: var(--ck-custom-foreground); /* -- Overrides the default .ck-input class colors. ----------------------------------------- */ --ck-color-input-background: var(--ck-custom-background); --ck-color-input-border: hsl(257, 3%, 43%); --ck-color-input-text: hsl(0, 0%, 98%); --ck-color-input-disabled-background: hsl(255, 4%, 21%); --ck-color-input-disabled-border: hsl(250, 3%, 38%); --ck-color-input-disabled-text: hsl(0, 0%, 78%); /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */ --ck-color-labeled-field-label-background: var(--ck-custom-background); /* -- Overrides the default .ck-list class colors. ------------------------------------------ */ --ck-color-list-background: var(--ck-custom-background); --ck-color-list-button-hover-background: var(--ck-color-base-foreground); --ck-color-list-button-on-background: var(--ck-color-base-active); --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus); --ck-color-list-button-on-text: var(--ck-color-base-background); /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */ --ck-color-panel-background: var(--ck-custom-background); --ck-color-panel-border: var(--ck-custom-border); /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */ --ck-color-toolbar-background: var(--ck-custom-background); --ck-color-toolbar-border: var(--ck-custom-border); /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */ --ck-color-tooltip-background: hsl(252, 7%, 14%); --ck-color-tooltip-text: hsl(0, 0%, 93%); /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */ --ck-color-image-caption-background: hsl(0, 0%, 97%); --ck-color-image-caption-text: hsl(0, 0%, 20%); /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */ --ck-color-widget-blurred-border: hsl(0, 0%, 87%); --ck-color-widget-hover-border: hsl(43, 100%, 68%); --ck-color-widget-editable-focus-background: var(--ck-custom-white); /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */ --ck-color-link-default: hsl(190, 100%, 75%); } .ck-editor { font-family: var(--font); } .ck-editor .ck-labeled-field-view__input-wrapper { box-shadow: none !important; } .ck-editor .ck-labeled-field-view__input-wrapper .ck-input { box-shadow: none !important; } .ck-editor .ck-insert-table-dropdown-grid-box.ck-on { background: var(--primary) !important; border-color: var(--primary) !important; } .ck-editor .ck-editor__main .ck-content { padding: 0 2rem; } .is-dark .ck-editor .ck-editor__main .ck-editor__editable { border-color: var(--dark-sidebar-light-12) !important; } .is-dark .ck-editor .ck-editor__main .ck-content { background: var(--dark-sidebar-light-6) !important; border-color: var(--dark-sidebar-light-12); } .is-dark .ck-editor figcaption.ck-editor__nested-editable { background: var(--dark-sidebar); color: var(--light-text); } .vacp-color-picker { --vacp-focus-color: hsla( var(--primary-h), var(--primary-s), var(--primary-l), 0.6 ) !important; --range-slider-focus: hsla( var(--primary-grey-h), var(--primary-grey-s), var(--primary-grey-l), 0.6 ) !important; display: flex !important; flex-direction: column; max-width: 100% !important; } .vacp-color-picker.hide-alpha .vacp-range-input-label--alpha, .vacp-color-picker.hide-alpha [id*=rgb-a], .vacp-color-picker.hide-alpha [id*=hwb-a], .vacp-color-picker.hide-alpha [id*=hsl-a] { display: none !important; } .vacp-color-picker.hide-copy .vacp-copy-button { display: none !important; } .vacp-color-picker :focus { outline: none !important; } .vacp-color-picker .vacp-format-switch-button { border-radius: var(--radius); } .vacp-color-picker .vacp-color-inputs { align-items: flex-end; } .vacp-color-picker .vacp-color-input { border-radius: var(--radius); border-color: #ccc !important; } .vacp-color-picker .vacp-color-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--vacp-focus-color); } .vacp-color-picker .vacp-color-space-thumb { box-shadow: 0 0 0 2px #0002; } .vacp-color-picker .vacp-range-input { border-color: #ccc !important; border-radius: var(--radius); outline: none !important; } .vacp-color-picker .vacp-range-input:focus::-moz-range-track { border: 1px solid var(--primary-grey); outline: none; box-shadow: 0 0 0 2px var(--range-slider-focus); } .vacp-color-picker .vacp-range-input:focus::-webkit-slider-runnable-track { border: 1px solid var(--primary-grey); outline: none; box-shadow: 0 0 0 2px var(--range-slider-focus); } .vacp-color-picker .vacp-range-input:focus::-ms-track { border: 1px solid var(--primary-grey); outline: none; box-shadow: 0 0 0 2px var(--range-slider-focus); } .vacp-color-picker .vacp-range-input::-moz-range-thumb { box-sizing: border-box; width: var(--vacp-slider-thumb-size); height: var(--vacp-slider-thumb-size); border: 3px solid #fff; border-radius: 50%; background-color: transparent; box-shadow: 0 0 0 2px #0002; transform: rotate(0); } .vacp-color-picker .vacp-range-input::-webkit-slider-thumb { width: var(--vacp-slider-thumb-size); height: var(--vacp-slider-thumb-size); margin-top: calc( (var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size)) / 2 ); border: 3px solid #fff; border-radius: 50%; background-color: transparent; box-shadow: 0 0 0 2px #0002; transform: rotate(0); } .vacp-color-picker .vacp-range-input::-ms-thumb { width: var(--vacp-slider-thumb-size); height: var(--vacp-slider-thumb-size); margin-top: 0; border: 3px solid #fff; border-radius: 50%; background-color: transparent; box-shadow: 0 0 0 2px #0002; transform: rotate(0); } .is-dark .vacp-color-picker { --range-slider-focus: hsla( var(--primary-grey-h), var(--primary-grey-s), var(--primary-grey-l) + 10, 1 ) !important; background: var(--dark-sidebar-light-6); } .is-dark .vacp-color-picker .vacp-color-input { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12) !important; color: var(--dark-dark-text); } .is-dark .vacp-color-picker .vacp-format-switch-button { background-color: var(--dark-sidebar-light-2); border-color: var(--dark-sidebar-light-12) !important; color: var(--dark-dark-text); } .is-dark .vacp-color-picker .vacp-format-switch-button:hover { background-color: var(--dark-sidebar) !important; } .is-dark .vacp-color-picker .vacp-range-input--alpha { --vacp-tiled-background-image: linear-gradient( 45deg, var(--dark-sidebar-light-8) 25%, transparent 25%, transparent 75%, var(--dark-sidebar-light-8) 75%, var(--dark-sidebar-light-8) ), linear-gradient( 45deg, var(--dark-sidebar-light-8) 25%, transparent 25%, transparent 75%, var(--dark-sidebar-light-8) 75%, var(--dark-sidebar-light-8) ); background-color: var(--dark-sidebar); background-image: var(--vacp-tiled-background-image); } .is-dark .vacp-color-picker .vacp-range-input { border-color: #ccc !important; border-radius: var(--radius); outline: none !important; } .is-dark .vacp-color-picker .vacp-range-input:focus::-moz-range-track { border: 1px solid var(--range-slider-focus); } .is-dark .vacp-color-picker .vacp-range-input:focus::-webkit-slider-runnable-track { border: 1px solid var(--range-slider-focus); } .is-dark .vacp-color-picker .vacp-range-input:focus::-ms-track { border: 1px solid var(--range-slider-focus); } .card-container { width: 100%; height: 170px; padding: 20px 0; perspective: 1000px; } .card-container.preload * { transition: none !important; } .card-container .creditcard { width: 100%; max-width: 260px; transform-style: preserve-3d; transition: transform 0.6s; margin: 0 auto; cursor: pointer; } .card-container .creditcard.flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .card-container .creditcard .front, .card-container .creditcard .back { position: absolute; width: 100%; max-width: 260px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; color: #47525d; } .card-container .creditcard .back { transform: rotateY(180deg); } .card-container .creditcard svg#cardfront, .card-container .creditcard svg#cardback { width: 100%; box-shadow: var(--light-box-shadow); border-radius: 18px; } .card-container .creditcard #cardfront .st2 { fill: var(--white); } .card-container .creditcard #cardfront .st3 { font-family: "Source Code Pro", monospace; font-weight: 600; } .card-container .creditcard #cardfront .st4 { font-size: 54.7817px; } .card-container .creditcard #cardfront .st5 { font-family: "Source Code Pro", monospace; font-weight: 400; } .card-container .creditcard #cardfront .st6 { font-size: 33.1112px; } .card-container .creditcard #cardfront .st7 { opacity: 0.6; fill: var(--white); } .card-container .creditcard #cardfront .st8 { font-size: 24px; } .card-container .creditcard #cardfront .st9 { font-size: 36.5498px; } .card-container .creditcard #cardfront .st10 { font-family: "Source Code Pro", monospace; font-weight: 300; } .card-container .creditcard #cardfront .st11 { font-size: 16.1716px; } .card-container .creditcard #cardfront .st12 { fill: #4c4c4c; } .card-container .creditcard #cardback .st0 { fill: none; color: #0f0f0f; stroke-miterlimit: 10; } .card-container .creditcard #cardback .st2 { fill: #111; } .card-container .creditcard #cardback .st3 { fill: #f2f2f2; } .card-container .creditcard #cardback .st4 { fill: #d8d2db; } .card-container .creditcard #cardback .st5 { fill: #c4c4c4; } .card-container .creditcard #cardback .st6 { font-family: "Source Code Pro", monospace; font-weight: 400; } .card-container .creditcard #cardback .st7 { font-size: 27px; } .card-container .creditcard #cardback .st8 { opacity: 0.6; } .card-container .creditcard #cardback .st9 { fill: var(--white); } .card-container .creditcard #cardback .st10 { font-size: 24px; } .card-container .creditcard #cardback .st11 { fill: #eaeaea; } .card-container .creditcard #cardback .st12 { font-family: "Rock Salt", cursive; } .card-container .creditcard #cardback .st13 { font-size: 37.769px; } .card-container .creditcard #svgname { text-transform: uppercase; } .card-container .creditcard #ccsingle { position: absolute; right: 15px; top: 20px; } .card-container .creditcard #ccsingle svg { width: 100px; max-height: 60px; } .card-container .creditcard .lightcolor, .card-container .creditcard .darkcolor { transition: fill 0.5s; } .card-container .creditcard .lightblue { fill: #03a9f4; } .card-container .creditcard .lightbluedark { fill: #0288d1; } .card-container .creditcard .red { fill: #ef5350; } .card-container .creditcard .reddark { fill: #d32f2f; } .card-container .creditcard .purple { fill: #ab47bc; } .card-container .creditcard .purpledark { fill: #7b1fa2; } .card-container .creditcard .cyan { fill: #26c6da; } .card-container .creditcard .cyandark { fill: #0097a7; } .card-container .creditcard .green { fill: #66bb6a; } .card-container .creditcard .greendark { fill: #388e3c; } .card-container .creditcard .lime { fill: #d4e157; } .card-container .creditcard .limedark { fill: #afb42b; } .card-container .creditcard .yellow { fill: #ffeb3b; } .card-container .creditcard .yellowdark { fill: #f9a825; } .card-container .creditcard .orange { fill: #ff9800; } .card-container .creditcard .orangedark { fill: #ef6c00; } .card-container .creditcard .grey { fill: #bdbdbd; } .card-container .creditcard .greydark { fill: #616161; } /*! _layout-selector.scss | Vuero | Css ninja 2020-2021 */ /* 1. Layout Selector 2. Layout Selector Dark mode */ /* ========================================================================== 1. Layout Selector ========================================================================== */ .layout-selector { min-height: 340px; max-height: 340px; overflow-y: auto; } .layout-selector .layout-item { position: relative; display: block; text-align: center; cursor: pointer; } .layout-selector .layout-item:hover img { filter: grayscale(0); opacity: 1; } .layout-selector .layout-item.is-active { pointer-events: none; } .layout-selector .layout-item.is-active img { filter: grayscale(0); opacity: 1; } .layout-selector .layout-item.is-active .indicator { opacity: 1; } .layout-selector .layout-item .indicator { position: absolute; top: 0; right: 36px; background: var(--primary); border: 4px solid var(--white); display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: var(--radius-rounded); opacity: 0; transition: opacity 0.3s; pointer-events: none; color: var(--white); } .layout-selector .layout-item .indicator svg, .layout-selector .layout-item .indicator .iconify { color: var(--white); height: 13px; width: 13px; } .layout-selector .layout-item .indicator svg *, .layout-selector .layout-item .indicator .iconify * { stroke-width: 3px; } .layout-selector .layout-item img { max-width: 150px; margin: 0 auto; filter: grayscale(1); opacity: 0.6; transition: all 0.3s; } .layout-selector .layout-item h3 { font-family: var(--font-alt); font-weight: 600; font-size: 0.9rem; color: var(--dark-text); } .layout-selector .layout-item p { font-size: 0.9rem; } /* ========================================================================== 1. Layout Selector Dark Mode ========================================================================== */ .is-dark .layout-selector .layout-item.is-active .indicator { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .layout-selector .layout-item h3 { color: var(--dark-dark-text); } /*! _widgets.scss | Vuero | Css ninja 2020-2021 */ /* ========================================================================== Widget Styles ========================================================================== */ /* 1. Widget Toolbar 2. Gauge Widget 3. Icon Toolbar Widget 4. Text Widget 5. Tags Widget 6. Calendar Widget 7. Image Widget 8. List Widget 9. Picker Widget 10. Stat Widget 11. Search Widget 12. Icon List Widget 13. Video Widget 14. Inbox Widget */ /* ========================================================================== 1. Widget Toolbar ========================================================================== */ .widget { margin-bottom: 20px; } .widget-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .widget-toolbar .left { display: flex; align-items: center; } .widget-toolbar .center { display: flex; justify-content: center; align-items: center; } .widget-toolbar .right { display: flex; align-items: center; justify-content: flex-end; } .widget-toolbar .right .tag { font-family: var(--font); } .widget-toolbar .right .right-icon { position: relative; display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; min-width: 32px; border-radius: var(--radius-rounded); color: var(--light-text-light-12); transition: all 0.3s; } .widget-toolbar .right .right-icon.has-indicator::after { content: ""; position: absolute; top: 3px; right: 4px; height: 10px; width: 10px; border-radius: var(--radius-rounded); background: var(--secondary); border: 1.8px solid var(--white); } .widget-toolbar .right .right-icon svg { height: 18px; width: 18px; transition: stroke 0.3s; } .widget-toolbar h3 { font-family: var(--font-alt); font-size: 0.9rem; color: var(--dark-text); font-weight: 600; } .widget-toolbar h3.is-bigger { font-size: 1rem; } .widget-toolbar .action-icon { position: relative; display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; min-width: 32px; border-radius: var(--radius-rounded); color: var(--light-text-light-12); transition: all 0.3s; } .widget-toolbar .action-icon svg { height: 18px; width: 18px; transition: stroke 0.3s; } .is-dark .widget-toolbar h3 { color: var(--dark-dark-text); } .is-dark .widget-toolbar .right .right-icon.has-indicator::after { border-color: var(--dark-sidebar-light-6); } /* ========================================================================== 2. Gauge Widget ========================================================================== */ .gauge-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; text-align: center; } .gauge-widget.has-margin-bottom { margin-bottom: 1.5rem; } .gauge-widget.is-flat { box-shadow: none; } .gauge-widget.is-raised { box-shadow: var(--light-box-shadow); } .gauge-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .gauge-widget.is-primary .title, .gauge-widget.is-primary .subtitle, .gauge-widget.is-primary h1, .gauge-widget.is-primary h2, .gauge-widget.is-primary h3, .gauge-widget.is-primary h4, .gauge-widget.is-primary p { color: var(--smoke-white) !important; } .gauge-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .gauge-widget.is-secondary .title, .gauge-widget.is-secondary .subtitle, .gauge-widget.is-secondary h1, .gauge-widget.is-secondary h2, .gauge-widget.is-secondary h3, .gauge-widget.is-secondary h4, .gauge-widget.is-secondary p { color: var(--smoke-white) !important; } .gauge-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .gauge-widget.is-info .title, .gauge-widget.is-info .subtitle, .gauge-widget.is-info h1, .gauge-widget.is-info h2, .gauge-widget.is-info h3, .gauge-widget.is-info h4, .gauge-widget.is-info p { color: var(--smoke-white) !important; } .gauge-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .gauge-widget.is-success .title, .gauge-widget.is-success .subtitle, .gauge-widget.is-success h1, .gauge-widget.is-success h2, .gauge-widget.is-success h3, .gauge-widget.is-success h4, .gauge-widget.is-success p { color: var(--smoke-white) !important; } .gauge-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .gauge-widget.is-warning .title, .gauge-widget.is-warning .subtitle, .gauge-widget.is-warning h1, .gauge-widget.is-warning h2, .gauge-widget.is-warning h3, .gauge-widget.is-warning h4, .gauge-widget.is-warning p { color: var(--smoke-white) !important; } .gauge-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .gauge-widget.is-danger .title, .gauge-widget.is-danger .subtitle, .gauge-widget.is-danger h1, .gauge-widget.is-danger h2, .gauge-widget.is-danger h3, .gauge-widget.is-danger h4, .gauge-widget.is-danger p { color: var(--smoke-white) !important; } .gauge-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .gauge-widget .card-head .left, .gauge-widget .card-head .right { display: flex; align-items: center; } .gauge-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .gauge-widget .card-head .right { justify-content: flex-end; } .gauge-widget .card-inner { padding-top: 1.75rem; } .gauge-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .gauge-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .gauge-widget.is-straight.is-flat { box-shadow: none; } .gauge-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .gauge-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .gauge-widget.is-straight.is-primary .title, .gauge-widget.is-straight.is-primary .subtitle, .gauge-widget.is-straight.is-primary h1, .gauge-widget.is-straight.is-primary h2, .gauge-widget.is-straight.is-primary h3, .gauge-widget.is-straight.is-primary h4, .gauge-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .gauge-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .gauge-widget.is-straight.is-secondary .title, .gauge-widget.is-straight.is-secondary .subtitle, .gauge-widget.is-straight.is-secondary h1, .gauge-widget.is-straight.is-secondary h2, .gauge-widget.is-straight.is-secondary h3, .gauge-widget.is-straight.is-secondary h4, .gauge-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .gauge-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .gauge-widget.is-straight.is-info .title, .gauge-widget.is-straight.is-info .subtitle, .gauge-widget.is-straight.is-info h1, .gauge-widget.is-straight.is-info h2, .gauge-widget.is-straight.is-info h3, .gauge-widget.is-straight.is-info h4, .gauge-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .gauge-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .gauge-widget.is-straight.is-success .title, .gauge-widget.is-straight.is-success .subtitle, .gauge-widget.is-straight.is-success h1, .gauge-widget.is-straight.is-success h2, .gauge-widget.is-straight.is-success h3, .gauge-widget.is-straight.is-success h4, .gauge-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .gauge-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .gauge-widget.is-straight.is-warning .title, .gauge-widget.is-straight.is-warning .subtitle, .gauge-widget.is-straight.is-warning h1, .gauge-widget.is-straight.is-warning h2, .gauge-widget.is-straight.is-warning h3, .gauge-widget.is-straight.is-warning h4, .gauge-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .gauge-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .gauge-widget.is-straight.is-danger .title, .gauge-widget.is-straight.is-danger .subtitle, .gauge-widget.is-straight.is-danger h1, .gauge-widget.is-straight.is-danger h2, .gauge-widget.is-straight.is-danger h3, .gauge-widget.is-straight.is-danger h4, .gauge-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .gauge-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .gauge-widget.is-straight .card-head .left, .gauge-widget.is-straight .card-head .right { display: flex; align-items: center; } .gauge-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .gauge-widget.is-straight .card-head .right { justify-content: flex-end; } .gauge-widget.is-straight .card-inner { padding-top: 1.75rem; } .gauge-widget .gauge-wrap { padding: 30px 0; } .is-dark .gauge-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .gauge-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .gauge-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .gauge-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 3. Icon Toolbar Widget ========================================================================== */ .icon-toolbar-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 16px; } .icon-toolbar-widget.has-margin-bottom { margin-bottom: 1.5rem; } .icon-toolbar-widget.is-flat { box-shadow: none; } .icon-toolbar-widget.is-raised { box-shadow: var(--light-box-shadow); } .icon-toolbar-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .icon-toolbar-widget.is-primary .title, .icon-toolbar-widget.is-primary .subtitle, .icon-toolbar-widget.is-primary h1, .icon-toolbar-widget.is-primary h2, .icon-toolbar-widget.is-primary h3, .icon-toolbar-widget.is-primary h4, .icon-toolbar-widget.is-primary p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .icon-toolbar-widget.is-secondary .title, .icon-toolbar-widget.is-secondary .subtitle, .icon-toolbar-widget.is-secondary h1, .icon-toolbar-widget.is-secondary h2, .icon-toolbar-widget.is-secondary h3, .icon-toolbar-widget.is-secondary h4, .icon-toolbar-widget.is-secondary p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .icon-toolbar-widget.is-info .title, .icon-toolbar-widget.is-info .subtitle, .icon-toolbar-widget.is-info h1, .icon-toolbar-widget.is-info h2, .icon-toolbar-widget.is-info h3, .icon-toolbar-widget.is-info h4, .icon-toolbar-widget.is-info p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .icon-toolbar-widget.is-success .title, .icon-toolbar-widget.is-success .subtitle, .icon-toolbar-widget.is-success h1, .icon-toolbar-widget.is-success h2, .icon-toolbar-widget.is-success h3, .icon-toolbar-widget.is-success h4, .icon-toolbar-widget.is-success p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .icon-toolbar-widget.is-warning .title, .icon-toolbar-widget.is-warning .subtitle, .icon-toolbar-widget.is-warning h1, .icon-toolbar-widget.is-warning h2, .icon-toolbar-widget.is-warning h3, .icon-toolbar-widget.is-warning h4, .icon-toolbar-widget.is-warning p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .icon-toolbar-widget.is-danger .title, .icon-toolbar-widget.is-danger .subtitle, .icon-toolbar-widget.is-danger h1, .icon-toolbar-widget.is-danger h2, .icon-toolbar-widget.is-danger h3, .icon-toolbar-widget.is-danger h4, .icon-toolbar-widget.is-danger p { color: var(--smoke-white) !important; } .icon-toolbar-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .icon-toolbar-widget .card-head .left, .icon-toolbar-widget .card-head .right { display: flex; align-items: center; } .icon-toolbar-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .icon-toolbar-widget .card-head .right { justify-content: flex-end; } .icon-toolbar-widget .card-inner { padding-top: 1.75rem; } .icon-toolbar-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .icon-toolbar-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .icon-toolbar-widget.is-straight.is-flat { box-shadow: none; } .icon-toolbar-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .icon-toolbar-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .icon-toolbar-widget.is-straight.is-primary .title, .icon-toolbar-widget.is-straight.is-primary .subtitle, .icon-toolbar-widget.is-straight.is-primary h1, .icon-toolbar-widget.is-straight.is-primary h2, .icon-toolbar-widget.is-straight.is-primary h3, .icon-toolbar-widget.is-straight.is-primary h4, .icon-toolbar-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .icon-toolbar-widget.is-straight.is-secondary .title, .icon-toolbar-widget.is-straight.is-secondary .subtitle, .icon-toolbar-widget.is-straight.is-secondary h1, .icon-toolbar-widget.is-straight.is-secondary h2, .icon-toolbar-widget.is-straight.is-secondary h3, .icon-toolbar-widget.is-straight.is-secondary h4, .icon-toolbar-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .icon-toolbar-widget.is-straight.is-info .title, .icon-toolbar-widget.is-straight.is-info .subtitle, .icon-toolbar-widget.is-straight.is-info h1, .icon-toolbar-widget.is-straight.is-info h2, .icon-toolbar-widget.is-straight.is-info h3, .icon-toolbar-widget.is-straight.is-info h4, .icon-toolbar-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .icon-toolbar-widget.is-straight.is-success .title, .icon-toolbar-widget.is-straight.is-success .subtitle, .icon-toolbar-widget.is-straight.is-success h1, .icon-toolbar-widget.is-straight.is-success h2, .icon-toolbar-widget.is-straight.is-success h3, .icon-toolbar-widget.is-straight.is-success h4, .icon-toolbar-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .icon-toolbar-widget.is-straight.is-warning .title, .icon-toolbar-widget.is-straight.is-warning .subtitle, .icon-toolbar-widget.is-straight.is-warning h1, .icon-toolbar-widget.is-straight.is-warning h2, .icon-toolbar-widget.is-straight.is-warning h3, .icon-toolbar-widget.is-straight.is-warning h4, .icon-toolbar-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .icon-toolbar-widget.is-straight.is-danger .title, .icon-toolbar-widget.is-straight.is-danger .subtitle, .icon-toolbar-widget.is-straight.is-danger h1, .icon-toolbar-widget.is-straight.is-danger h2, .icon-toolbar-widget.is-straight.is-danger h3, .icon-toolbar-widget.is-straight.is-danger h4, .icon-toolbar-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .icon-toolbar-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .icon-toolbar-widget.is-straight .card-head .left, .icon-toolbar-widget.is-straight .card-head .right { display: flex; align-items: center; } .icon-toolbar-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .icon-toolbar-widget.is-straight .card-head .right { justify-content: flex-end; } .icon-toolbar-widget.is-straight .card-inner { padding-top: 1.75rem; } .icon-toolbar-widget .icon-toolbar { display: flex; } .icon-toolbar-widget .icon-toolbar .toolbar-icon { display: flex; justify-content: center; align-items: center; flex: 1 1 0; } .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon { display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; min-width: 32px; border-radius: var(--radius-rounded); color: var(--light-text-light-12); transition: all 0.3s; } .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon:hover:not(.is-active) { background: var(--fade-grey-light-3); color: var(--light-text); } .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon.is-active { color: var(--primary); } .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon svg { height: 18px; width: 18px; transition: stroke 0.3s; } .is-dark .icon-toolbar-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .icon-toolbar-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-toolbar-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-toolbar-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon { color: var(--light-text-dark-12); } .is-dark .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon:hover:not(.is-active) { background: var(--dark-sidebar-light-3); } .is-dark .icon-toolbar-widget .icon-toolbar .toolbar-icon .inner-icon.is-active { color: var(--primary); } /* ========================================================================== 4. Text Widget ========================================================================== */ .text-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .text-widget.has-margin-bottom { margin-bottom: 1.5rem; } .text-widget.is-flat { box-shadow: none; } .text-widget.is-raised { box-shadow: var(--light-box-shadow); } .text-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .text-widget.is-primary .title, .text-widget.is-primary .subtitle, .text-widget.is-primary h1, .text-widget.is-primary h2, .text-widget.is-primary h3, .text-widget.is-primary h4, .text-widget.is-primary p { color: var(--smoke-white) !important; } .text-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .text-widget.is-secondary .title, .text-widget.is-secondary .subtitle, .text-widget.is-secondary h1, .text-widget.is-secondary h2, .text-widget.is-secondary h3, .text-widget.is-secondary h4, .text-widget.is-secondary p { color: var(--smoke-white) !important; } .text-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .text-widget.is-info .title, .text-widget.is-info .subtitle, .text-widget.is-info h1, .text-widget.is-info h2, .text-widget.is-info h3, .text-widget.is-info h4, .text-widget.is-info p { color: var(--smoke-white) !important; } .text-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .text-widget.is-success .title, .text-widget.is-success .subtitle, .text-widget.is-success h1, .text-widget.is-success h2, .text-widget.is-success h3, .text-widget.is-success h4, .text-widget.is-success p { color: var(--smoke-white) !important; } .text-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .text-widget.is-warning .title, .text-widget.is-warning .subtitle, .text-widget.is-warning h1, .text-widget.is-warning h2, .text-widget.is-warning h3, .text-widget.is-warning h4, .text-widget.is-warning p { color: var(--smoke-white) !important; } .text-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .text-widget.is-danger .title, .text-widget.is-danger .subtitle, .text-widget.is-danger h1, .text-widget.is-danger h2, .text-widget.is-danger h3, .text-widget.is-danger h4, .text-widget.is-danger p { color: var(--smoke-white) !important; } .text-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .text-widget .card-head .left, .text-widget .card-head .right { display: flex; align-items: center; } .text-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .text-widget .card-head .right { justify-content: flex-end; } .text-widget .card-inner { padding-top: 1.75rem; } .text-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .text-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .text-widget.is-straight.is-flat { box-shadow: none; } .text-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .text-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .text-widget.is-straight.is-primary .title, .text-widget.is-straight.is-primary .subtitle, .text-widget.is-straight.is-primary h1, .text-widget.is-straight.is-primary h2, .text-widget.is-straight.is-primary h3, .text-widget.is-straight.is-primary h4, .text-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .text-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .text-widget.is-straight.is-secondary .title, .text-widget.is-straight.is-secondary .subtitle, .text-widget.is-straight.is-secondary h1, .text-widget.is-straight.is-secondary h2, .text-widget.is-straight.is-secondary h3, .text-widget.is-straight.is-secondary h4, .text-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .text-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .text-widget.is-straight.is-info .title, .text-widget.is-straight.is-info .subtitle, .text-widget.is-straight.is-info h1, .text-widget.is-straight.is-info h2, .text-widget.is-straight.is-info h3, .text-widget.is-straight.is-info h4, .text-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .text-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .text-widget.is-straight.is-success .title, .text-widget.is-straight.is-success .subtitle, .text-widget.is-straight.is-success h1, .text-widget.is-straight.is-success h2, .text-widget.is-straight.is-success h3, .text-widget.is-straight.is-success h4, .text-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .text-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .text-widget.is-straight.is-warning .title, .text-widget.is-straight.is-warning .subtitle, .text-widget.is-straight.is-warning h1, .text-widget.is-straight.is-warning h2, .text-widget.is-straight.is-warning h3, .text-widget.is-straight.is-warning h4, .text-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .text-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .text-widget.is-straight.is-danger .title, .text-widget.is-straight.is-danger .subtitle, .text-widget.is-straight.is-danger h1, .text-widget.is-straight.is-danger h2, .text-widget.is-straight.is-danger h3, .text-widget.is-straight.is-danger h4, .text-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .text-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .text-widget.is-straight .card-head .left, .text-widget.is-straight .card-head .right { display: flex; align-items: center; } .text-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .text-widget.is-straight .card-head .right { justify-content: flex-end; } .text-widget.is-straight .card-inner { padding-top: 1.75rem; } .text-widget .widget-content p { font-size: 0.9rem; } .text-widget .widget-content p span { color: var(--dark-text); font-weight: 500; } .text-widget .widget-content .hashtags { padding-top: 8px; font-family: var(--font); } .text-widget .widget-content .hashtags a { color: var(--primary); margin: 0 2px; } .is-dark .text-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .text-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .text-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .text-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .text-widget .widget-content p span { color: var(--dark-dark-text); } .is-dark .text-widget .hashtags a { color: var(--primary); } /* ========================================================================== 5. Tags Widget ========================================================================== */ .tags-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .tags-widget.has-margin-bottom { margin-bottom: 1.5rem; } .tags-widget.is-flat { box-shadow: none; } .tags-widget.is-raised { box-shadow: var(--light-box-shadow); } .tags-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .tags-widget.is-primary .title, .tags-widget.is-primary .subtitle, .tags-widget.is-primary h1, .tags-widget.is-primary h2, .tags-widget.is-primary h3, .tags-widget.is-primary h4, .tags-widget.is-primary p { color: var(--smoke-white) !important; } .tags-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .tags-widget.is-secondary .title, .tags-widget.is-secondary .subtitle, .tags-widget.is-secondary h1, .tags-widget.is-secondary h2, .tags-widget.is-secondary h3, .tags-widget.is-secondary h4, .tags-widget.is-secondary p { color: var(--smoke-white) !important; } .tags-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .tags-widget.is-info .title, .tags-widget.is-info .subtitle, .tags-widget.is-info h1, .tags-widget.is-info h2, .tags-widget.is-info h3, .tags-widget.is-info h4, .tags-widget.is-info p { color: var(--smoke-white) !important; } .tags-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .tags-widget.is-success .title, .tags-widget.is-success .subtitle, .tags-widget.is-success h1, .tags-widget.is-success h2, .tags-widget.is-success h3, .tags-widget.is-success h4, .tags-widget.is-success p { color: var(--smoke-white) !important; } .tags-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .tags-widget.is-warning .title, .tags-widget.is-warning .subtitle, .tags-widget.is-warning h1, .tags-widget.is-warning h2, .tags-widget.is-warning h3, .tags-widget.is-warning h4, .tags-widget.is-warning p { color: var(--smoke-white) !important; } .tags-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .tags-widget.is-danger .title, .tags-widget.is-danger .subtitle, .tags-widget.is-danger h1, .tags-widget.is-danger h2, .tags-widget.is-danger h3, .tags-widget.is-danger h4, .tags-widget.is-danger p { color: var(--smoke-white) !important; } .tags-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .tags-widget .card-head .left, .tags-widget .card-head .right { display: flex; align-items: center; } .tags-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .tags-widget .card-head .right { justify-content: flex-end; } .tags-widget .card-inner { padding-top: 1.75rem; } .tags-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .tags-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .tags-widget.is-straight.is-flat { box-shadow: none; } .tags-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .tags-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .tags-widget.is-straight.is-primary .title, .tags-widget.is-straight.is-primary .subtitle, .tags-widget.is-straight.is-primary h1, .tags-widget.is-straight.is-primary h2, .tags-widget.is-straight.is-primary h3, .tags-widget.is-straight.is-primary h4, .tags-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .tags-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .tags-widget.is-straight.is-secondary .title, .tags-widget.is-straight.is-secondary .subtitle, .tags-widget.is-straight.is-secondary h1, .tags-widget.is-straight.is-secondary h2, .tags-widget.is-straight.is-secondary h3, .tags-widget.is-straight.is-secondary h4, .tags-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .tags-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .tags-widget.is-straight.is-info .title, .tags-widget.is-straight.is-info .subtitle, .tags-widget.is-straight.is-info h1, .tags-widget.is-straight.is-info h2, .tags-widget.is-straight.is-info h3, .tags-widget.is-straight.is-info h4, .tags-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .tags-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .tags-widget.is-straight.is-success .title, .tags-widget.is-straight.is-success .subtitle, .tags-widget.is-straight.is-success h1, .tags-widget.is-straight.is-success h2, .tags-widget.is-straight.is-success h3, .tags-widget.is-straight.is-success h4, .tags-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .tags-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .tags-widget.is-straight.is-warning .title, .tags-widget.is-straight.is-warning .subtitle, .tags-widget.is-straight.is-warning h1, .tags-widget.is-straight.is-warning h2, .tags-widget.is-straight.is-warning h3, .tags-widget.is-straight.is-warning h4, .tags-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .tags-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .tags-widget.is-straight.is-danger .title, .tags-widget.is-straight.is-danger .subtitle, .tags-widget.is-straight.is-danger h1, .tags-widget.is-straight.is-danger h2, .tags-widget.is-straight.is-danger h3, .tags-widget.is-straight.is-danger h4, .tags-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .tags-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .tags-widget.is-straight .card-head .left, .tags-widget.is-straight .card-head .right { display: flex; align-items: center; } .tags-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .tags-widget.is-straight .card-head .right { justify-content: flex-end; } .tags-widget.is-straight .card-inner { padding-top: 1.75rem; } .is-dark .tags-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .tags-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .tags-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .tags-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 6. Calendar Widget ========================================================================== */ .calendar-widget .calendar-widget-inner { display: flex; flex-wrap: wrap; margin-top: -6px; margin-left: -6px; margin-right: -6px; } .calendar-widget .calendar-widget-inner .calendar-square { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; flex: 1; margin: 6px; width: calc(50% - 6px); } .calendar-widget .calendar-widget-inner .calendar-square.has-margin-bottom { margin-bottom: 1.5rem; } .calendar-widget .calendar-widget-inner .calendar-square.is-flat { box-shadow: none; } .calendar-widget .calendar-widget-inner .calendar-square.is-raised { box-shadow: var(--light-box-shadow); } .calendar-widget .calendar-widget-inner .calendar-square.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .calendar-widget .calendar-widget-inner .calendar-square.is-primary .title, .calendar-widget .calendar-widget-inner .calendar-square.is-primary .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-primary h1, .calendar-widget .calendar-widget-inner .calendar-square.is-primary h2, .calendar-widget .calendar-widget-inner .calendar-square.is-primary h3, .calendar-widget .calendar-widget-inner .calendar-square.is-primary h4, .calendar-widget .calendar-widget-inner .calendar-square.is-primary p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-secondary .title, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary h1, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary h2, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary h3, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary h4, .calendar-widget .calendar-widget-inner .calendar-square.is-secondary p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-info { background: var(--info) !important; border-color: var(--info) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-info .title, .calendar-widget .calendar-widget-inner .calendar-square.is-info .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-info h1, .calendar-widget .calendar-widget-inner .calendar-square.is-info h2, .calendar-widget .calendar-widget-inner .calendar-square.is-info h3, .calendar-widget .calendar-widget-inner .calendar-square.is-info h4, .calendar-widget .calendar-widget-inner .calendar-square.is-info p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-success { background: var(--success) !important; border-color: var(--success) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-success .title, .calendar-widget .calendar-widget-inner .calendar-square.is-success .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-success h1, .calendar-widget .calendar-widget-inner .calendar-square.is-success h2, .calendar-widget .calendar-widget-inner .calendar-square.is-success h3, .calendar-widget .calendar-widget-inner .calendar-square.is-success h4, .calendar-widget .calendar-widget-inner .calendar-square.is-success p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-warning .title, .calendar-widget .calendar-widget-inner .calendar-square.is-warning .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-warning h1, .calendar-widget .calendar-widget-inner .calendar-square.is-warning h2, .calendar-widget .calendar-widget-inner .calendar-square.is-warning h3, .calendar-widget .calendar-widget-inner .calendar-square.is-warning h4, .calendar-widget .calendar-widget-inner .calendar-square.is-warning p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .calendar-widget .calendar-widget-inner .calendar-square.is-danger .title, .calendar-widget .calendar-widget-inner .calendar-square.is-danger .subtitle, .calendar-widget .calendar-widget-inner .calendar-square.is-danger h1, .calendar-widget .calendar-widget-inner .calendar-square.is-danger h2, .calendar-widget .calendar-widget-inner .calendar-square.is-danger h3, .calendar-widget .calendar-widget-inner .calendar-square.is-danger h4, .calendar-widget .calendar-widget-inner .calendar-square.is-danger p { color: var(--smoke-white) !important; } .calendar-widget .calendar-widget-inner .calendar-square .card-head { display: flex; align-items: center; justify-content: space-between; } .calendar-widget .calendar-widget-inner .calendar-square .card-head .left, .calendar-widget .calendar-widget-inner .calendar-square .card-head .right { display: flex; align-items: center; } .calendar-widget .calendar-widget-inner .calendar-square .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .calendar-widget .calendar-widget-inner .calendar-square .card-head .right { justify-content: flex-end; } .calendar-widget .calendar-widget-inner .calendar-square .card-inner { padding-top: 1.75rem; } .calendar-widget .calendar-widget-inner .calendar-square .date { text-align: center; } .calendar-widget .calendar-widget-inner .calendar-square .date span { display: block; font-family: var(--font); } .calendar-widget .calendar-widget-inner .calendar-square .date span:first-child { font-weight: 700; color: var(--dark-text); font-size: 1.6rem; } .calendar-widget .calendar-widget-inner .calendar-square .date span:nth-child(2) { font-size: 0.75rem; text-transform: uppercase; color: var(--light-text); } .is-dark .calendar-widget .calendar-widget-inner .calendar-square { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .calendar-widget .calendar-widget-inner .calendar-square .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .calendar-widget .calendar-widget-inner .calendar-square .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .calendar-widget .calendar-widget-inner .calendar-square .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .calendar-widget .calendar-widget-inner .calendar-square .date span:first-child { color: var(--dark-dark-text); } /* ========================================================================== 7. Image Widget ========================================================================== */ .image-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; position: relative; padding: 10px; height: 310px; } .image-widget.has-margin-bottom { margin-bottom: 1.5rem; } .image-widget.is-flat { box-shadow: none; } .image-widget.is-raised { box-shadow: var(--light-box-shadow); } .image-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .image-widget.is-primary .title, .image-widget.is-primary .subtitle, .image-widget.is-primary h1, .image-widget.is-primary h2, .image-widget.is-primary h3, .image-widget.is-primary h4, .image-widget.is-primary p { color: var(--smoke-white) !important; } .image-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .image-widget.is-secondary .title, .image-widget.is-secondary .subtitle, .image-widget.is-secondary h1, .image-widget.is-secondary h2, .image-widget.is-secondary h3, .image-widget.is-secondary h4, .image-widget.is-secondary p { color: var(--smoke-white) !important; } .image-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .image-widget.is-info .title, .image-widget.is-info .subtitle, .image-widget.is-info h1, .image-widget.is-info h2, .image-widget.is-info h3, .image-widget.is-info h4, .image-widget.is-info p { color: var(--smoke-white) !important; } .image-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .image-widget.is-success .title, .image-widget.is-success .subtitle, .image-widget.is-success h1, .image-widget.is-success h2, .image-widget.is-success h3, .image-widget.is-success h4, .image-widget.is-success p { color: var(--smoke-white) !important; } .image-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .image-widget.is-warning .title, .image-widget.is-warning .subtitle, .image-widget.is-warning h1, .image-widget.is-warning h2, .image-widget.is-warning h3, .image-widget.is-warning h4, .image-widget.is-warning p { color: var(--smoke-white) !important; } .image-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .image-widget.is-danger .title, .image-widget.is-danger .subtitle, .image-widget.is-danger h1, .image-widget.is-danger h2, .image-widget.is-danger h3, .image-widget.is-danger h4, .image-widget.is-danger p { color: var(--smoke-white) !important; } .image-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .image-widget .card-head .left, .image-widget .card-head .right { display: flex; align-items: center; } .image-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .image-widget .card-head .right { justify-content: flex-end; } .image-widget .card-inner { padding-top: 1.75rem; } .image-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .image-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .image-widget.is-straight.is-flat { box-shadow: none; } .image-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .image-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .image-widget.is-straight.is-primary .title, .image-widget.is-straight.is-primary .subtitle, .image-widget.is-straight.is-primary h1, .image-widget.is-straight.is-primary h2, .image-widget.is-straight.is-primary h3, .image-widget.is-straight.is-primary h4, .image-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .image-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .image-widget.is-straight.is-secondary .title, .image-widget.is-straight.is-secondary .subtitle, .image-widget.is-straight.is-secondary h1, .image-widget.is-straight.is-secondary h2, .image-widget.is-straight.is-secondary h3, .image-widget.is-straight.is-secondary h4, .image-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .image-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .image-widget.is-straight.is-info .title, .image-widget.is-straight.is-info .subtitle, .image-widget.is-straight.is-info h1, .image-widget.is-straight.is-info h2, .image-widget.is-straight.is-info h3, .image-widget.is-straight.is-info h4, .image-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .image-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .image-widget.is-straight.is-success .title, .image-widget.is-straight.is-success .subtitle, .image-widget.is-straight.is-success h1, .image-widget.is-straight.is-success h2, .image-widget.is-straight.is-success h3, .image-widget.is-straight.is-success h4, .image-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .image-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .image-widget.is-straight.is-warning .title, .image-widget.is-straight.is-warning .subtitle, .image-widget.is-straight.is-warning h1, .image-widget.is-straight.is-warning h2, .image-widget.is-straight.is-warning h3, .image-widget.is-straight.is-warning h4, .image-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .image-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .image-widget.is-straight.is-danger .title, .image-widget.is-straight.is-danger .subtitle, .image-widget.is-straight.is-danger h1, .image-widget.is-straight.is-danger h2, .image-widget.is-straight.is-danger h3, .image-widget.is-straight.is-danger h4, .image-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .image-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .image-widget.is-straight .card-head .left, .image-widget.is-straight .card-head .right { display: flex; align-items: center; } .image-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .image-widget.is-straight .card-head .right { justify-content: flex-end; } .image-widget.is-straight .card-inner { padding-top: 1.75rem; } .image-widget > img { display: block; height: 100%; object-fit: cover; border-radius: 14px; } .image-widget .progress-wrap { position: absolute; bottom: 30px; left: 0; right: 0; padding: 0 30px; } .image-widget .progress-wrap .progress { background-color: #000; background-image: linear-gradient(to right, var(--primary) 30%, #000 30%); height: 0.15rem !important; } .is-dark .image-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .image-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .image-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .image-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .image-widget .progress-wrap .progress { background-image: linear-gradient(to right, var(--primary) 30%, #000 30%) !important; } /* ========================================================================== 8. List Widget ========================================================================== */ .list-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .list-widget.has-margin-bottom { margin-bottom: 1.5rem; } .list-widget.is-flat { box-shadow: none; } .list-widget.is-raised { box-shadow: var(--light-box-shadow); } .list-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .list-widget.is-primary .title, .list-widget.is-primary .subtitle, .list-widget.is-primary h1, .list-widget.is-primary h2, .list-widget.is-primary h3, .list-widget.is-primary h4, .list-widget.is-primary p { color: var(--smoke-white) !important; } .list-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .list-widget.is-secondary .title, .list-widget.is-secondary .subtitle, .list-widget.is-secondary h1, .list-widget.is-secondary h2, .list-widget.is-secondary h3, .list-widget.is-secondary h4, .list-widget.is-secondary p { color: var(--smoke-white) !important; } .list-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .list-widget.is-info .title, .list-widget.is-info .subtitle, .list-widget.is-info h1, .list-widget.is-info h2, .list-widget.is-info h3, .list-widget.is-info h4, .list-widget.is-info p { color: var(--smoke-white) !important; } .list-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .list-widget.is-success .title, .list-widget.is-success .subtitle, .list-widget.is-success h1, .list-widget.is-success h2, .list-widget.is-success h3, .list-widget.is-success h4, .list-widget.is-success p { color: var(--smoke-white) !important; } .list-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .list-widget.is-warning .title, .list-widget.is-warning .subtitle, .list-widget.is-warning h1, .list-widget.is-warning h2, .list-widget.is-warning h3, .list-widget.is-warning h4, .list-widget.is-warning p { color: var(--smoke-white) !important; } .list-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .list-widget.is-danger .title, .list-widget.is-danger .subtitle, .list-widget.is-danger h1, .list-widget.is-danger h2, .list-widget.is-danger h3, .list-widget.is-danger h4, .list-widget.is-danger p { color: var(--smoke-white) !important; } .list-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .list-widget .card-head .left, .list-widget .card-head .right { display: flex; align-items: center; } .list-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .list-widget .card-head .right { justify-content: flex-end; } .list-widget .card-inner { padding-top: 1.75rem; } .list-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .list-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .list-widget.is-straight.is-flat { box-shadow: none; } .list-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .list-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .list-widget.is-straight.is-primary .title, .list-widget.is-straight.is-primary .subtitle, .list-widget.is-straight.is-primary h1, .list-widget.is-straight.is-primary h2, .list-widget.is-straight.is-primary h3, .list-widget.is-straight.is-primary h4, .list-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .list-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .list-widget.is-straight.is-secondary .title, .list-widget.is-straight.is-secondary .subtitle, .list-widget.is-straight.is-secondary h1, .list-widget.is-straight.is-secondary h2, .list-widget.is-straight.is-secondary h3, .list-widget.is-straight.is-secondary h4, .list-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .list-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .list-widget.is-straight.is-info .title, .list-widget.is-straight.is-info .subtitle, .list-widget.is-straight.is-info h1, .list-widget.is-straight.is-info h2, .list-widget.is-straight.is-info h3, .list-widget.is-straight.is-info h4, .list-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .list-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .list-widget.is-straight.is-success .title, .list-widget.is-straight.is-success .subtitle, .list-widget.is-straight.is-success h1, .list-widget.is-straight.is-success h2, .list-widget.is-straight.is-success h3, .list-widget.is-straight.is-success h4, .list-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .list-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .list-widget.is-straight.is-warning .title, .list-widget.is-straight.is-warning .subtitle, .list-widget.is-straight.is-warning h1, .list-widget.is-straight.is-warning h2, .list-widget.is-straight.is-warning h3, .list-widget.is-straight.is-warning h4, .list-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .list-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .list-widget.is-straight.is-danger .title, .list-widget.is-straight.is-danger .subtitle, .list-widget.is-straight.is-danger h1, .list-widget.is-straight.is-danger h2, .list-widget.is-straight.is-danger h3, .list-widget.is-straight.is-danger h4, .list-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .list-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .list-widget.is-straight .card-head .left, .list-widget.is-straight .card-head .right { display: flex; align-items: center; } .list-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .list-widget.is-straight .card-head .right { justify-content: flex-end; } .list-widget.is-straight .card-inner { padding-top: 1.75rem; } .list-widget ul li:not(:last-child) { margin-bottom: 12px; } .list-widget ul li a { font-family: var(--font); display: flex; justify-content: space-between; color: var(--light-text); } .list-widget ul li a:hover { color: var(--primary); } .is-dark .list-widget ul li a:hover { color: var(--primary); } /* ========================================================================== 9. Picker Widget ========================================================================== */ .picker-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .picker-widget.has-margin-bottom { margin-bottom: 1.5rem; } .picker-widget.is-flat { box-shadow: none; } .picker-widget.is-raised { box-shadow: var(--light-box-shadow); } .picker-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .picker-widget.is-primary .title, .picker-widget.is-primary .subtitle, .picker-widget.is-primary h1, .picker-widget.is-primary h2, .picker-widget.is-primary h3, .picker-widget.is-primary h4, .picker-widget.is-primary p { color: var(--smoke-white) !important; } .picker-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .picker-widget.is-secondary .title, .picker-widget.is-secondary .subtitle, .picker-widget.is-secondary h1, .picker-widget.is-secondary h2, .picker-widget.is-secondary h3, .picker-widget.is-secondary h4, .picker-widget.is-secondary p { color: var(--smoke-white) !important; } .picker-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .picker-widget.is-info .title, .picker-widget.is-info .subtitle, .picker-widget.is-info h1, .picker-widget.is-info h2, .picker-widget.is-info h3, .picker-widget.is-info h4, .picker-widget.is-info p { color: var(--smoke-white) !important; } .picker-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .picker-widget.is-success .title, .picker-widget.is-success .subtitle, .picker-widget.is-success h1, .picker-widget.is-success h2, .picker-widget.is-success h3, .picker-widget.is-success h4, .picker-widget.is-success p { color: var(--smoke-white) !important; } .picker-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .picker-widget.is-warning .title, .picker-widget.is-warning .subtitle, .picker-widget.is-warning h1, .picker-widget.is-warning h2, .picker-widget.is-warning h3, .picker-widget.is-warning h4, .picker-widget.is-warning p { color: var(--smoke-white) !important; } .picker-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .picker-widget.is-danger .title, .picker-widget.is-danger .subtitle, .picker-widget.is-danger h1, .picker-widget.is-danger h2, .picker-widget.is-danger h3, .picker-widget.is-danger h4, .picker-widget.is-danger p { color: var(--smoke-white) !important; } .picker-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .picker-widget .card-head .left, .picker-widget .card-head .right { display: flex; align-items: center; } .picker-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .picker-widget .card-head .right { justify-content: flex-end; } .picker-widget .card-inner { padding-top: 1.75rem; } .picker-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .picker-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .picker-widget.is-straight.is-flat { box-shadow: none; } .picker-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .picker-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .picker-widget.is-straight.is-primary .title, .picker-widget.is-straight.is-primary .subtitle, .picker-widget.is-straight.is-primary h1, .picker-widget.is-straight.is-primary h2, .picker-widget.is-straight.is-primary h3, .picker-widget.is-straight.is-primary h4, .picker-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .picker-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .picker-widget.is-straight.is-secondary .title, .picker-widget.is-straight.is-secondary .subtitle, .picker-widget.is-straight.is-secondary h1, .picker-widget.is-straight.is-secondary h2, .picker-widget.is-straight.is-secondary h3, .picker-widget.is-straight.is-secondary h4, .picker-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .picker-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .picker-widget.is-straight.is-info .title, .picker-widget.is-straight.is-info .subtitle, .picker-widget.is-straight.is-info h1, .picker-widget.is-straight.is-info h2, .picker-widget.is-straight.is-info h3, .picker-widget.is-straight.is-info h4, .picker-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .picker-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .picker-widget.is-straight.is-success .title, .picker-widget.is-straight.is-success .subtitle, .picker-widget.is-straight.is-success h1, .picker-widget.is-straight.is-success h2, .picker-widget.is-straight.is-success h3, .picker-widget.is-straight.is-success h4, .picker-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .picker-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .picker-widget.is-straight.is-warning .title, .picker-widget.is-straight.is-warning .subtitle, .picker-widget.is-straight.is-warning h1, .picker-widget.is-straight.is-warning h2, .picker-widget.is-straight.is-warning h3, .picker-widget.is-straight.is-warning h4, .picker-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .picker-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .picker-widget.is-straight.is-danger .title, .picker-widget.is-straight.is-danger .subtitle, .picker-widget.is-straight.is-danger h1, .picker-widget.is-straight.is-danger h2, .picker-widget.is-straight.is-danger h3, .picker-widget.is-straight.is-danger h4, .picker-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .picker-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .picker-widget.is-straight .card-head .left, .picker-widget.is-straight .card-head .right { display: flex; align-items: center; } .picker-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .picker-widget.is-straight .card-head .right { justify-content: flex-end; } .picker-widget.is-straight .card-inner { padding-top: 1.75rem; } .picker-widget .calendar { color: var(--dark-text); font-size: 12px; font-family: var(--font); width: 100%; margin-bottom: 5px; } .picker-widget .calendar thead, .picker-widget .calendar tbody { width: 100%; } .picker-widget .calendar thead, .picker-widget .calendar th { color: var(--primary); font-weight: 600; font-size: 10px; text-transform: uppercase; text-align: center; } .picker-widget .calendar td { padding: 0.5em 0; text-align: center; cursor: pointer; border-radius: 8px; } .picker-widget .calendar tbody td:hover { background: var(--fade-grey-light-3); color: var(--primary); } .picker-widget .current-day { color: var(--primary); font-weight: 600; } .picker-widget .prev-month, .picker-widget .next-month { color: #cacaca; } .is-dark .picker-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .picker-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .picker-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .picker-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .picker-widget .calendar { color: var(--dark-dark-text); } .is-dark .picker-widget .calendar thead, .is-dark .picker-widget .calendar th { color: var(--primary); } .is-dark .picker-widget .calendar td:hover { background: var(--dark-sidebar-light-3); color: var(--primary); } .is-dark .picker-widget .current-day { color: var(--primary); } /* ========================================================================== 10. Stat Widget ========================================================================== */ .stats-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 20px 0 0 0; } .stats-widget.has-margin-bottom { margin-bottom: 1.5rem; } .stats-widget.is-flat { box-shadow: none; } .stats-widget.is-raised { box-shadow: var(--light-box-shadow); } .stats-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .stats-widget.is-primary .title, .stats-widget.is-primary .subtitle, .stats-widget.is-primary h1, .stats-widget.is-primary h2, .stats-widget.is-primary h3, .stats-widget.is-primary h4, .stats-widget.is-primary p { color: var(--smoke-white) !important; } .stats-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .stats-widget.is-secondary .title, .stats-widget.is-secondary .subtitle, .stats-widget.is-secondary h1, .stats-widget.is-secondary h2, .stats-widget.is-secondary h3, .stats-widget.is-secondary h4, .stats-widget.is-secondary p { color: var(--smoke-white) !important; } .stats-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .stats-widget.is-info .title, .stats-widget.is-info .subtitle, .stats-widget.is-info h1, .stats-widget.is-info h2, .stats-widget.is-info h3, .stats-widget.is-info h4, .stats-widget.is-info p { color: var(--smoke-white) !important; } .stats-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .stats-widget.is-success .title, .stats-widget.is-success .subtitle, .stats-widget.is-success h1, .stats-widget.is-success h2, .stats-widget.is-success h3, .stats-widget.is-success h4, .stats-widget.is-success p { color: var(--smoke-white) !important; } .stats-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .stats-widget.is-warning .title, .stats-widget.is-warning .subtitle, .stats-widget.is-warning h1, .stats-widget.is-warning h2, .stats-widget.is-warning h3, .stats-widget.is-warning h4, .stats-widget.is-warning p { color: var(--smoke-white) !important; } .stats-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .stats-widget.is-danger .title, .stats-widget.is-danger .subtitle, .stats-widget.is-danger h1, .stats-widget.is-danger h2, .stats-widget.is-danger h3, .stats-widget.is-danger h4, .stats-widget.is-danger p { color: var(--smoke-white) !important; } .stats-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .stats-widget .card-head .left, .stats-widget .card-head .right { display: flex; align-items: center; } .stats-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .stats-widget .card-head .right { justify-content: flex-end; } .stats-widget .card-inner { padding-top: 1.75rem; } .stats-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .stats-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .stats-widget.is-straight.is-flat { box-shadow: none; } .stats-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .stats-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .stats-widget.is-straight.is-primary .title, .stats-widget.is-straight.is-primary .subtitle, .stats-widget.is-straight.is-primary h1, .stats-widget.is-straight.is-primary h2, .stats-widget.is-straight.is-primary h3, .stats-widget.is-straight.is-primary h4, .stats-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .stats-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .stats-widget.is-straight.is-secondary .title, .stats-widget.is-straight.is-secondary .subtitle, .stats-widget.is-straight.is-secondary h1, .stats-widget.is-straight.is-secondary h2, .stats-widget.is-straight.is-secondary h3, .stats-widget.is-straight.is-secondary h4, .stats-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .stats-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .stats-widget.is-straight.is-info .title, .stats-widget.is-straight.is-info .subtitle, .stats-widget.is-straight.is-info h1, .stats-widget.is-straight.is-info h2, .stats-widget.is-straight.is-info h3, .stats-widget.is-straight.is-info h4, .stats-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .stats-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .stats-widget.is-straight.is-success .title, .stats-widget.is-straight.is-success .subtitle, .stats-widget.is-straight.is-success h1, .stats-widget.is-straight.is-success h2, .stats-widget.is-straight.is-success h3, .stats-widget.is-straight.is-success h4, .stats-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .stats-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .stats-widget.is-straight.is-warning .title, .stats-widget.is-straight.is-warning .subtitle, .stats-widget.is-straight.is-warning h1, .stats-widget.is-straight.is-warning h2, .stats-widget.is-straight.is-warning h3, .stats-widget.is-straight.is-warning h4, .stats-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .stats-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .stats-widget.is-straight.is-danger .title, .stats-widget.is-straight.is-danger .subtitle, .stats-widget.is-straight.is-danger h1, .stats-widget.is-straight.is-danger h2, .stats-widget.is-straight.is-danger h3, .stats-widget.is-straight.is-danger h4, .stats-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .stats-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .stats-widget.is-straight .card-head .left, .stats-widget.is-straight .card-head .right { display: flex; align-items: center; } .stats-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .stats-widget.is-straight .card-head .right { justify-content: flex-end; } .stats-widget.is-straight .card-inner { padding-top: 1.75rem; } .stats-widget .widget-toolbar { padding: 0 20px; } .stats-widget .stat-number span { display: block; font-family: var(--font); } .stats-widget .stat-number span:first-child { font-size: 2rem; font-weight: 700; color: var(--dark-text); } .stats-widget .stat-number span:first-child svg { color: var(--success); } .stats-widget .stat-number span:nth-child(2) { font-size: 0.75rem; font-family: var(--font-alt); text-transform: uppercase; color: var(--light-text); } .stats-widget .stat-chart { position: relative; bottom: -30px; } .is-dark .stats-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .stats-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .stats-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .stats-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .stats-widget .stat-number span:first-child { color: var(--dark-dark-text); } /* ========================================================================== 11. Search Widget ========================================================================== */ .search-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .search-widget.has-margin-bottom { margin-bottom: 1.5rem; } .search-widget.is-flat { box-shadow: none; } .search-widget.is-raised { box-shadow: var(--light-box-shadow); } .search-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .search-widget.is-primary .title, .search-widget.is-primary .subtitle, .search-widget.is-primary h1, .search-widget.is-primary h2, .search-widget.is-primary h3, .search-widget.is-primary h4, .search-widget.is-primary p { color: var(--smoke-white) !important; } .search-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .search-widget.is-secondary .title, .search-widget.is-secondary .subtitle, .search-widget.is-secondary h1, .search-widget.is-secondary h2, .search-widget.is-secondary h3, .search-widget.is-secondary h4, .search-widget.is-secondary p { color: var(--smoke-white) !important; } .search-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .search-widget.is-info .title, .search-widget.is-info .subtitle, .search-widget.is-info h1, .search-widget.is-info h2, .search-widget.is-info h3, .search-widget.is-info h4, .search-widget.is-info p { color: var(--smoke-white) !important; } .search-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .search-widget.is-success .title, .search-widget.is-success .subtitle, .search-widget.is-success h1, .search-widget.is-success h2, .search-widget.is-success h3, .search-widget.is-success h4, .search-widget.is-success p { color: var(--smoke-white) !important; } .search-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .search-widget.is-warning .title, .search-widget.is-warning .subtitle, .search-widget.is-warning h1, .search-widget.is-warning h2, .search-widget.is-warning h3, .search-widget.is-warning h4, .search-widget.is-warning p { color: var(--smoke-white) !important; } .search-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .search-widget.is-danger .title, .search-widget.is-danger .subtitle, .search-widget.is-danger h1, .search-widget.is-danger h2, .search-widget.is-danger h3, .search-widget.is-danger h4, .search-widget.is-danger p { color: var(--smoke-white) !important; } .search-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .search-widget .card-head .left, .search-widget .card-head .right { display: flex; align-items: center; } .search-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .search-widget .card-head .right { justify-content: flex-end; } .search-widget .card-inner { padding-top: 1.75rem; } .search-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .search-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .search-widget.is-straight.is-flat { box-shadow: none; } .search-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .search-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .search-widget.is-straight.is-primary .title, .search-widget.is-straight.is-primary .subtitle, .search-widget.is-straight.is-primary h1, .search-widget.is-straight.is-primary h2, .search-widget.is-straight.is-primary h3, .search-widget.is-straight.is-primary h4, .search-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .search-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .search-widget.is-straight.is-secondary .title, .search-widget.is-straight.is-secondary .subtitle, .search-widget.is-straight.is-secondary h1, .search-widget.is-straight.is-secondary h2, .search-widget.is-straight.is-secondary h3, .search-widget.is-straight.is-secondary h4, .search-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .search-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .search-widget.is-straight.is-info .title, .search-widget.is-straight.is-info .subtitle, .search-widget.is-straight.is-info h1, .search-widget.is-straight.is-info h2, .search-widget.is-straight.is-info h3, .search-widget.is-straight.is-info h4, .search-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .search-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .search-widget.is-straight.is-success .title, .search-widget.is-straight.is-success .subtitle, .search-widget.is-straight.is-success h1, .search-widget.is-straight.is-success h2, .search-widget.is-straight.is-success h3, .search-widget.is-straight.is-success h4, .search-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .search-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .search-widget.is-straight.is-warning .title, .search-widget.is-straight.is-warning .subtitle, .search-widget.is-straight.is-warning h1, .search-widget.is-straight.is-warning h2, .search-widget.is-straight.is-warning h3, .search-widget.is-straight.is-warning h4, .search-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .search-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .search-widget.is-straight.is-danger .title, .search-widget.is-straight.is-danger .subtitle, .search-widget.is-straight.is-danger h1, .search-widget.is-straight.is-danger h2, .search-widget.is-straight.is-danger h3, .search-widget.is-straight.is-danger h4, .search-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .search-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .search-widget.is-straight .card-head .left, .search-widget.is-straight .card-head .right { display: flex; align-items: center; } .search-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .search-widget.is-straight .card-head .right { justify-content: flex-end; } .search-widget.is-straight .card-inner { padding-top: 1.75rem; } .search-widget .field .control { position: relative; } .search-widget .field .control .input { height: 42px; border-radius: 8px; background: var(--widget-grey); border-color: var(--widget-grey); } .search-widget .field .control .input:focus { border-color: var(--fade-grey-dark-3); background: var(--white); } .search-widget .field .control .searcv-button { position: absolute; top: 0; right: 0; height: 42px; width: 42px; border-radius: 8px; background: var(--primary); display: flex; justify-content: center; align-items: center; border: none; outline: none; color: var(--white); cursor: pointer; } .search-widget .field .control .searcv-button svg { height: 18px; width: 18px; } .search-widget .field .topics { display: flex; justify-content: space-between; text-align: center; padding-top: 12px; } .search-widget .field .topics a { font-family: var(--font); color: var(--light-text); font-size: 0.95rem; } .search-widget .field .topics a:hover { color: var(--primary); } .is-dark .search-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .search-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .search-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .search-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .search-widget .field .control .input { background: var(--dark-sidebar-light-3); border-color: var(--dark-sidebar-light-12); } .is-dark .search-widget .field .control .searcv-button { background: var(--primary); } .is-dark .search-widget .field .topics a:hover { color: var(--primary); } /* ========================================================================== 12. Icon List Widget ========================================================================== */ .icon-list-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .icon-list-widget.has-margin-bottom { margin-bottom: 1.5rem; } .icon-list-widget.is-flat { box-shadow: none; } .icon-list-widget.is-raised { box-shadow: var(--light-box-shadow); } .icon-list-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .icon-list-widget.is-primary .title, .icon-list-widget.is-primary .subtitle, .icon-list-widget.is-primary h1, .icon-list-widget.is-primary h2, .icon-list-widget.is-primary h3, .icon-list-widget.is-primary h4, .icon-list-widget.is-primary p { color: var(--smoke-white) !important; } .icon-list-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .icon-list-widget.is-secondary .title, .icon-list-widget.is-secondary .subtitle, .icon-list-widget.is-secondary h1, .icon-list-widget.is-secondary h2, .icon-list-widget.is-secondary h3, .icon-list-widget.is-secondary h4, .icon-list-widget.is-secondary p { color: var(--smoke-white) !important; } .icon-list-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .icon-list-widget.is-info .title, .icon-list-widget.is-info .subtitle, .icon-list-widget.is-info h1, .icon-list-widget.is-info h2, .icon-list-widget.is-info h3, .icon-list-widget.is-info h4, .icon-list-widget.is-info p { color: var(--smoke-white) !important; } .icon-list-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .icon-list-widget.is-success .title, .icon-list-widget.is-success .subtitle, .icon-list-widget.is-success h1, .icon-list-widget.is-success h2, .icon-list-widget.is-success h3, .icon-list-widget.is-success h4, .icon-list-widget.is-success p { color: var(--smoke-white) !important; } .icon-list-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .icon-list-widget.is-warning .title, .icon-list-widget.is-warning .subtitle, .icon-list-widget.is-warning h1, .icon-list-widget.is-warning h2, .icon-list-widget.is-warning h3, .icon-list-widget.is-warning h4, .icon-list-widget.is-warning p { color: var(--smoke-white) !important; } .icon-list-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .icon-list-widget.is-danger .title, .icon-list-widget.is-danger .subtitle, .icon-list-widget.is-danger h1, .icon-list-widget.is-danger h2, .icon-list-widget.is-danger h3, .icon-list-widget.is-danger h4, .icon-list-widget.is-danger p { color: var(--smoke-white) !important; } .icon-list-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .icon-list-widget .card-head .left, .icon-list-widget .card-head .right { display: flex; align-items: center; } .icon-list-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .icon-list-widget .card-head .right { justify-content: flex-end; } .icon-list-widget .card-inner { padding-top: 1.75rem; } .icon-list-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .icon-list-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .icon-list-widget.is-straight.is-flat { box-shadow: none; } .icon-list-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .icon-list-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .icon-list-widget.is-straight.is-primary .title, .icon-list-widget.is-straight.is-primary .subtitle, .icon-list-widget.is-straight.is-primary h1, .icon-list-widget.is-straight.is-primary h2, .icon-list-widget.is-straight.is-primary h3, .icon-list-widget.is-straight.is-primary h4, .icon-list-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .icon-list-widget.is-straight.is-secondary .title, .icon-list-widget.is-straight.is-secondary .subtitle, .icon-list-widget.is-straight.is-secondary h1, .icon-list-widget.is-straight.is-secondary h2, .icon-list-widget.is-straight.is-secondary h3, .icon-list-widget.is-straight.is-secondary h4, .icon-list-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .icon-list-widget.is-straight.is-info .title, .icon-list-widget.is-straight.is-info .subtitle, .icon-list-widget.is-straight.is-info h1, .icon-list-widget.is-straight.is-info h2, .icon-list-widget.is-straight.is-info h3, .icon-list-widget.is-straight.is-info h4, .icon-list-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .icon-list-widget.is-straight.is-success .title, .icon-list-widget.is-straight.is-success .subtitle, .icon-list-widget.is-straight.is-success h1, .icon-list-widget.is-straight.is-success h2, .icon-list-widget.is-straight.is-success h3, .icon-list-widget.is-straight.is-success h4, .icon-list-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .icon-list-widget.is-straight.is-warning .title, .icon-list-widget.is-straight.is-warning .subtitle, .icon-list-widget.is-straight.is-warning h1, .icon-list-widget.is-straight.is-warning h2, .icon-list-widget.is-straight.is-warning h3, .icon-list-widget.is-straight.is-warning h4, .icon-list-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .icon-list-widget.is-straight.is-danger .title, .icon-list-widget.is-straight.is-danger .subtitle, .icon-list-widget.is-straight.is-danger h1, .icon-list-widget.is-straight.is-danger h2, .icon-list-widget.is-straight.is-danger h3, .icon-list-widget.is-straight.is-danger h4, .icon-list-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .icon-list-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .icon-list-widget.is-straight .card-head .left, .icon-list-widget.is-straight .card-head .right { display: flex; align-items: center; } .icon-list-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .icon-list-widget.is-straight .card-head .right { justify-content: flex-end; } .icon-list-widget.is-straight .card-inner { padding-top: 1.75rem; } .icon-list-widget .icon-list .icon-list-item { display: flex; align-items: center; cursor: pointer; } .icon-list-widget .icon-list .icon-list-item:not(:last-child) { margin-bottom: 20px; } .icon-list-widget .icon-list .icon-list-item:hover .icon-wrap { background: var(--primary); color: var(--white); box-shadow: var(--primary-box-shadow); } .icon-list-widget .icon-list .icon-list-item:hover .item-meta span { color: var(--dark-text); } .icon-list-widget .icon-list .icon-list-item .icon-wrap { display: flex; justify-content: center; align-items: center; height: 42px; width: 42px; border: none; border-radius: 10px; background: var(--widget-grey-dark-2); color: var(--light-text-dark-6); transition: all 0.3s; } .icon-list-widget .icon-list .icon-list-item .icon-wrap svg { transition: stroke 0.3s; } .icon-list-widget .icon-list .icon-list-item .icon-wrap img, .icon-list-widget .icon-list .icon-list-item .icon-wrap svg { height: 18px; width: 18px; } .icon-list-widget .icon-list .icon-list-item .icon-wrap.is-placeholder { background: var(--fade-grey-light-2); border: 1px solid var(--fade-grey-dark-3); color: var(--light-text); } .icon-list-widget .icon-list .icon-list-item .icon-wrap.is-placeholder i { font-size: 1.4rem; } .icon-list-widget .icon-list .icon-list-item .item-meta { margin-left: 12px; } .icon-list-widget .icon-list .icon-list-item .item-meta span { font-family: var(--font); color: var(--light-text); } .is-dark .icon-list-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .icon-list-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-list-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-list-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .icon-list-widget .icon-list .icon-list-item:hover .icon-wrap { background: var(--primary) !important; box-shadow: var(--primary-box-shadow); color: var(--smoke-white); } .is-dark .icon-list-widget .icon-list .icon-list-item:hover .item-meta span { color: var(--primary) !important; } .is-dark .icon-list-widget .icon-list .icon-list-item .icon-wrap { background: var(--dark-sidebar-light-3); color: var(--light-text-light-2); } /* ========================================================================== 13. Video Widget ========================================================================== */ .video-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 10px; } .video-widget.has-margin-bottom { margin-bottom: 1.5rem; } .video-widget.is-flat { box-shadow: none; } .video-widget.is-raised { box-shadow: var(--light-box-shadow); } .video-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .video-widget.is-primary .title, .video-widget.is-primary .subtitle, .video-widget.is-primary h1, .video-widget.is-primary h2, .video-widget.is-primary h3, .video-widget.is-primary h4, .video-widget.is-primary p { color: var(--smoke-white) !important; } .video-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .video-widget.is-secondary .title, .video-widget.is-secondary .subtitle, .video-widget.is-secondary h1, .video-widget.is-secondary h2, .video-widget.is-secondary h3, .video-widget.is-secondary h4, .video-widget.is-secondary p { color: var(--smoke-white) !important; } .video-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .video-widget.is-info .title, .video-widget.is-info .subtitle, .video-widget.is-info h1, .video-widget.is-info h2, .video-widget.is-info h3, .video-widget.is-info h4, .video-widget.is-info p { color: var(--smoke-white) !important; } .video-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .video-widget.is-success .title, .video-widget.is-success .subtitle, .video-widget.is-success h1, .video-widget.is-success h2, .video-widget.is-success h3, .video-widget.is-success h4, .video-widget.is-success p { color: var(--smoke-white) !important; } .video-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .video-widget.is-warning .title, .video-widget.is-warning .subtitle, .video-widget.is-warning h1, .video-widget.is-warning h2, .video-widget.is-warning h3, .video-widget.is-warning h4, .video-widget.is-warning p { color: var(--smoke-white) !important; } .video-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .video-widget.is-danger .title, .video-widget.is-danger .subtitle, .video-widget.is-danger h1, .video-widget.is-danger h2, .video-widget.is-danger h3, .video-widget.is-danger h4, .video-widget.is-danger p { color: var(--smoke-white) !important; } .video-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .video-widget .card-head .left, .video-widget .card-head .right { display: flex; align-items: center; } .video-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .video-widget .card-head .right { justify-content: flex-end; } .video-widget .card-inner { padding-top: 1.75rem; } .video-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .video-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .video-widget.is-straight.is-flat { box-shadow: none; } .video-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .video-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .video-widget.is-straight.is-primary .title, .video-widget.is-straight.is-primary .subtitle, .video-widget.is-straight.is-primary h1, .video-widget.is-straight.is-primary h2, .video-widget.is-straight.is-primary h3, .video-widget.is-straight.is-primary h4, .video-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .video-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .video-widget.is-straight.is-secondary .title, .video-widget.is-straight.is-secondary .subtitle, .video-widget.is-straight.is-secondary h1, .video-widget.is-straight.is-secondary h2, .video-widget.is-straight.is-secondary h3, .video-widget.is-straight.is-secondary h4, .video-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .video-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .video-widget.is-straight.is-info .title, .video-widget.is-straight.is-info .subtitle, .video-widget.is-straight.is-info h1, .video-widget.is-straight.is-info h2, .video-widget.is-straight.is-info h3, .video-widget.is-straight.is-info h4, .video-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .video-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .video-widget.is-straight.is-success .title, .video-widget.is-straight.is-success .subtitle, .video-widget.is-straight.is-success h1, .video-widget.is-straight.is-success h2, .video-widget.is-straight.is-success h3, .video-widget.is-straight.is-success h4, .video-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .video-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .video-widget.is-straight.is-warning .title, .video-widget.is-straight.is-warning .subtitle, .video-widget.is-straight.is-warning h1, .video-widget.is-straight.is-warning h2, .video-widget.is-straight.is-warning h3, .video-widget.is-straight.is-warning h4, .video-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .video-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .video-widget.is-straight.is-danger .title, .video-widget.is-straight.is-danger .subtitle, .video-widget.is-straight.is-danger h1, .video-widget.is-straight.is-danger h2, .video-widget.is-straight.is-danger h3, .video-widget.is-straight.is-danger h4, .video-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .video-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .video-widget.is-straight .card-head .left, .video-widget.is-straight .card-head .right { display: flex; align-items: center; } .video-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .video-widget.is-straight .card-head .right { justify-content: flex-end; } .video-widget.is-straight .card-inner { padding-top: 1.75rem; } .video-widget .widget-content { display: flex; } .video-widget .widget-content > img { height: 100px; width: 100px; border-radius: 10px; object-fit: cover; } .video-widget .widget-content .widget-meta { margin-left: 10px; display: flex; flex-direction: column; font-family: var(--font); } .video-widget .widget-content .widget-meta > svg { height: 20px; width: 20px; stroke-width: 1.6px; color: var(--primary); margin-bottom: 6px; } .video-widget .widget-content .widget-meta h4 { font-weight: 600; font-family: var(--font-alt); font-size: 0.9rem; line-height: 1.3; color: var(--dark-text); } .video-widget .widget-content .widget-meta .views { display: flex; align-items: center; margin-top: auto; color: var(--light-text); } .video-widget .widget-content .widget-meta .views svg { height: 14px; width: 14px; stroke-width: 1.4px; margin-right: 6px; } .video-widget .widget-content .widget-meta .views span { font-size: 0.85rem; } .is-dark .video-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .video-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .video-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .video-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .video-widget .widget-meta > svg { color: var(--primary); } .is-dark .video-widget .widget-meta h4 { color: var(--dark-dark-text); } /* ========================================================================== 14. Inbox Widget ========================================================================== */ .inbox-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .inbox-widget.has-margin-bottom { margin-bottom: 1.5rem; } .inbox-widget.is-flat { box-shadow: none; } .inbox-widget.is-raised { box-shadow: var(--light-box-shadow); } .inbox-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .inbox-widget.is-primary .title, .inbox-widget.is-primary .subtitle, .inbox-widget.is-primary h1, .inbox-widget.is-primary h2, .inbox-widget.is-primary h3, .inbox-widget.is-primary h4, .inbox-widget.is-primary p { color: var(--smoke-white) !important; } .inbox-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .inbox-widget.is-secondary .title, .inbox-widget.is-secondary .subtitle, .inbox-widget.is-secondary h1, .inbox-widget.is-secondary h2, .inbox-widget.is-secondary h3, .inbox-widget.is-secondary h4, .inbox-widget.is-secondary p { color: var(--smoke-white) !important; } .inbox-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .inbox-widget.is-info .title, .inbox-widget.is-info .subtitle, .inbox-widget.is-info h1, .inbox-widget.is-info h2, .inbox-widget.is-info h3, .inbox-widget.is-info h4, .inbox-widget.is-info p { color: var(--smoke-white) !important; } .inbox-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .inbox-widget.is-success .title, .inbox-widget.is-success .subtitle, .inbox-widget.is-success h1, .inbox-widget.is-success h2, .inbox-widget.is-success h3, .inbox-widget.is-success h4, .inbox-widget.is-success p { color: var(--smoke-white) !important; } .inbox-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .inbox-widget.is-warning .title, .inbox-widget.is-warning .subtitle, .inbox-widget.is-warning h1, .inbox-widget.is-warning h2, .inbox-widget.is-warning h3, .inbox-widget.is-warning h4, .inbox-widget.is-warning p { color: var(--smoke-white) !important; } .inbox-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .inbox-widget.is-danger .title, .inbox-widget.is-danger .subtitle, .inbox-widget.is-danger h1, .inbox-widget.is-danger h2, .inbox-widget.is-danger h3, .inbox-widget.is-danger h4, .inbox-widget.is-danger p { color: var(--smoke-white) !important; } .inbox-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .inbox-widget .card-head .left, .inbox-widget .card-head .right { display: flex; align-items: center; } .inbox-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .inbox-widget .card-head .right { justify-content: flex-end; } .inbox-widget .card-inner { padding-top: 1.75rem; } .inbox-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .inbox-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .inbox-widget.is-straight.is-flat { box-shadow: none; } .inbox-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .inbox-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .inbox-widget.is-straight.is-primary .title, .inbox-widget.is-straight.is-primary .subtitle, .inbox-widget.is-straight.is-primary h1, .inbox-widget.is-straight.is-primary h2, .inbox-widget.is-straight.is-primary h3, .inbox-widget.is-straight.is-primary h4, .inbox-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .inbox-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .inbox-widget.is-straight.is-secondary .title, .inbox-widget.is-straight.is-secondary .subtitle, .inbox-widget.is-straight.is-secondary h1, .inbox-widget.is-straight.is-secondary h2, .inbox-widget.is-straight.is-secondary h3, .inbox-widget.is-straight.is-secondary h4, .inbox-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .inbox-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .inbox-widget.is-straight.is-info .title, .inbox-widget.is-straight.is-info .subtitle, .inbox-widget.is-straight.is-info h1, .inbox-widget.is-straight.is-info h2, .inbox-widget.is-straight.is-info h3, .inbox-widget.is-straight.is-info h4, .inbox-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .inbox-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .inbox-widget.is-straight.is-success .title, .inbox-widget.is-straight.is-success .subtitle, .inbox-widget.is-straight.is-success h1, .inbox-widget.is-straight.is-success h2, .inbox-widget.is-straight.is-success h3, .inbox-widget.is-straight.is-success h4, .inbox-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .inbox-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .inbox-widget.is-straight.is-warning .title, .inbox-widget.is-straight.is-warning .subtitle, .inbox-widget.is-straight.is-warning h1, .inbox-widget.is-straight.is-warning h2, .inbox-widget.is-straight.is-warning h3, .inbox-widget.is-straight.is-warning h4, .inbox-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .inbox-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .inbox-widget.is-straight.is-danger .title, .inbox-widget.is-straight.is-danger .subtitle, .inbox-widget.is-straight.is-danger h1, .inbox-widget.is-straight.is-danger h2, .inbox-widget.is-straight.is-danger h3, .inbox-widget.is-straight.is-danger h4, .inbox-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .inbox-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .inbox-widget.is-straight .card-head .left, .inbox-widget.is-straight .card-head .right { display: flex; align-items: center; } .inbox-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .inbox-widget.is-straight .card-head .right { justify-content: flex-end; } .inbox-widget.is-straight .card-inner { padding-top: 1.75rem; } .inbox-widget .sender-block h4 { font-family: var(--font); font-weight: 500; color-interpolation-filters: var(--dark-text); font-size: 0.95rem; } .inbox-widget .sender-block .sender-block-inner { display: flex; align-items: center; padding: 16px 0; } .inbox-widget .sender-block .sender-block-inner .meta { margin-left: 10px; line-height: 1.2; } .inbox-widget .sender-block .sender-block-inner .meta span { font-family: var(--font-alt); font-weight: 600; font-size: 0.8rem; } .inbox-widget .sender-block .exerpt { padding: 10px; border-radius: 10px; border: 1px solid var(--fade-grey-dark-3); font-family: var(--font); } .inbox-widget .sender-block .exerpt h5 { display: flex; align-items: center; font-size: 0.8rem; font-family: var(--font-alt); font-weight: 600; color: var(--primary); margin-bottom: 6px; } .inbox-widget .sender-block .exerpt h5 i { font-size: 6px; margin-right: 6px; } .inbox-widget .sender-block .exerpt p { font-size: 0.9rem; color: var(--dark-text); margin-bottom: 6px; } .inbox-widget .sender-block .exerpt small { color: var(--light-text); } .is-dark .inbox-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .inbox-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .inbox-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .inbox-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .inbox-widget .sender-block .sender-block-inner .meta span { color: var(--dark-dark-text); } .is-dark .inbox-widget .exerpt { background: var(--dark-sidebar-light-4); border-color: var(--dark-sidebar-light-12); } .is-dark .inbox-widget .exerpt h5 { color: var(--primary); } .is-dark .inbox-widget .exerpt p { color: var(--dark-dark-text); } /* ========================================================================== 15. Illustration Widget ========================================================================== */ .illustration-widget.illustration-widget-v1 { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 40px 30px; text-align: center; font-family: var(--font); } .illustration-widget.illustration-widget-v1.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v1.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v1.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v1.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v1.is-primary .title, .illustration-widget.illustration-widget-v1.is-primary .subtitle, .illustration-widget.illustration-widget-v1.is-primary h1, .illustration-widget.illustration-widget-v1.is-primary h2, .illustration-widget.illustration-widget-v1.is-primary h3, .illustration-widget.illustration-widget-v1.is-primary h4, .illustration-widget.illustration-widget-v1.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v1.is-secondary .title, .illustration-widget.illustration-widget-v1.is-secondary .subtitle, .illustration-widget.illustration-widget-v1.is-secondary h1, .illustration-widget.illustration-widget-v1.is-secondary h2, .illustration-widget.illustration-widget-v1.is-secondary h3, .illustration-widget.illustration-widget-v1.is-secondary h4, .illustration-widget.illustration-widget-v1.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v1.is-info .title, .illustration-widget.illustration-widget-v1.is-info .subtitle, .illustration-widget.illustration-widget-v1.is-info h1, .illustration-widget.illustration-widget-v1.is-info h2, .illustration-widget.illustration-widget-v1.is-info h3, .illustration-widget.illustration-widget-v1.is-info h4, .illustration-widget.illustration-widget-v1.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v1.is-success .title, .illustration-widget.illustration-widget-v1.is-success .subtitle, .illustration-widget.illustration-widget-v1.is-success h1, .illustration-widget.illustration-widget-v1.is-success h2, .illustration-widget.illustration-widget-v1.is-success h3, .illustration-widget.illustration-widget-v1.is-success h4, .illustration-widget.illustration-widget-v1.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v1.is-warning .title, .illustration-widget.illustration-widget-v1.is-warning .subtitle, .illustration-widget.illustration-widget-v1.is-warning h1, .illustration-widget.illustration-widget-v1.is-warning h2, .illustration-widget.illustration-widget-v1.is-warning h3, .illustration-widget.illustration-widget-v1.is-warning h4, .illustration-widget.illustration-widget-v1.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v1.is-danger .title, .illustration-widget.illustration-widget-v1.is-danger .subtitle, .illustration-widget.illustration-widget-v1.is-danger h1, .illustration-widget.illustration-widget-v1.is-danger h2, .illustration-widget.illustration-widget-v1.is-danger h3, .illustration-widget.illustration-widget-v1.is-danger h4, .illustration-widget.illustration-widget-v1.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1 .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v1 .card-head .left, .illustration-widget.illustration-widget-v1 .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v1 .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v1 .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v1 .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v1.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .illustration-widget.illustration-widget-v1.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v1.is-straight.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v1.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v1.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v1.is-straight.is-primary .title, .illustration-widget.illustration-widget-v1.is-straight.is-primary .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-primary h1, .illustration-widget.illustration-widget-v1.is-straight.is-primary h2, .illustration-widget.illustration-widget-v1.is-straight.is-primary h3, .illustration-widget.illustration-widget-v1.is-straight.is-primary h4, .illustration-widget.illustration-widget-v1.is-straight.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-secondary .title, .illustration-widget.illustration-widget-v1.is-straight.is-secondary .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-secondary h1, .illustration-widget.illustration-widget-v1.is-straight.is-secondary h2, .illustration-widget.illustration-widget-v1.is-straight.is-secondary h3, .illustration-widget.illustration-widget-v1.is-straight.is-secondary h4, .illustration-widget.illustration-widget-v1.is-straight.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-info .title, .illustration-widget.illustration-widget-v1.is-straight.is-info .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-info h1, .illustration-widget.illustration-widget-v1.is-straight.is-info h2, .illustration-widget.illustration-widget-v1.is-straight.is-info h3, .illustration-widget.illustration-widget-v1.is-straight.is-info h4, .illustration-widget.illustration-widget-v1.is-straight.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-success .title, .illustration-widget.illustration-widget-v1.is-straight.is-success .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-success h1, .illustration-widget.illustration-widget-v1.is-straight.is-success h2, .illustration-widget.illustration-widget-v1.is-straight.is-success h3, .illustration-widget.illustration-widget-v1.is-straight.is-success h4, .illustration-widget.illustration-widget-v1.is-straight.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-warning .title, .illustration-widget.illustration-widget-v1.is-straight.is-warning .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-warning h1, .illustration-widget.illustration-widget-v1.is-straight.is-warning h2, .illustration-widget.illustration-widget-v1.is-straight.is-warning h3, .illustration-widget.illustration-widget-v1.is-straight.is-warning h4, .illustration-widget.illustration-widget-v1.is-straight.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v1.is-straight.is-danger .title, .illustration-widget.illustration-widget-v1.is-straight.is-danger .subtitle, .illustration-widget.illustration-widget-v1.is-straight.is-danger h1, .illustration-widget.illustration-widget-v1.is-straight.is-danger h2, .illustration-widget.illustration-widget-v1.is-straight.is-danger h3, .illustration-widget.illustration-widget-v1.is-straight.is-danger h4, .illustration-widget.illustration-widget-v1.is-straight.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v1.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v1.is-straight .card-head .left, .illustration-widget.illustration-widget-v1.is-straight .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v1.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v1.is-straight .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v1.is-straight .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v1 .img-container { position: relative; margin: 0 auto 12px auto; max-width: 180px; } .illustration-widget.illustration-widget-v1 .img-container .main { display: block; } .illustration-widget.illustration-widget-v1 .img-container .badge { position: absolute; } .illustration-widget.illustration-widget-v1 .img-container .badge.badge-1 { height: 70px; width: 70px; top: 0; right: 0; } .illustration-widget.illustration-widget-v1 .img-container .badge.badge-2 { height: 50px; width: 50px; top: 0; left: 0; } .illustration-widget.illustration-widget-v1 h3 { font-weight: 600; font-size: 0.95rem; font-family: var(--font-alt); color: var(--dark-text); margin-bottom: 4px; } .illustration-widget.illustration-widget-v1 p { font-size: 0.9rem; } .illustration-widget.illustration-widget-v2 { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 16px; } .illustration-widget.illustration-widget-v2.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v2.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v2.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v2.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v2.is-primary .title, .illustration-widget.illustration-widget-v2.is-primary .subtitle, .illustration-widget.illustration-widget-v2.is-primary h1, .illustration-widget.illustration-widget-v2.is-primary h2, .illustration-widget.illustration-widget-v2.is-primary h3, .illustration-widget.illustration-widget-v2.is-primary h4, .illustration-widget.illustration-widget-v2.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v2.is-secondary .title, .illustration-widget.illustration-widget-v2.is-secondary .subtitle, .illustration-widget.illustration-widget-v2.is-secondary h1, .illustration-widget.illustration-widget-v2.is-secondary h2, .illustration-widget.illustration-widget-v2.is-secondary h3, .illustration-widget.illustration-widget-v2.is-secondary h4, .illustration-widget.illustration-widget-v2.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v2.is-info .title, .illustration-widget.illustration-widget-v2.is-info .subtitle, .illustration-widget.illustration-widget-v2.is-info h1, .illustration-widget.illustration-widget-v2.is-info h2, .illustration-widget.illustration-widget-v2.is-info h3, .illustration-widget.illustration-widget-v2.is-info h4, .illustration-widget.illustration-widget-v2.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v2.is-success .title, .illustration-widget.illustration-widget-v2.is-success .subtitle, .illustration-widget.illustration-widget-v2.is-success h1, .illustration-widget.illustration-widget-v2.is-success h2, .illustration-widget.illustration-widget-v2.is-success h3, .illustration-widget.illustration-widget-v2.is-success h4, .illustration-widget.illustration-widget-v2.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v2.is-warning .title, .illustration-widget.illustration-widget-v2.is-warning .subtitle, .illustration-widget.illustration-widget-v2.is-warning h1, .illustration-widget.illustration-widget-v2.is-warning h2, .illustration-widget.illustration-widget-v2.is-warning h3, .illustration-widget.illustration-widget-v2.is-warning h4, .illustration-widget.illustration-widget-v2.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v2.is-danger .title, .illustration-widget.illustration-widget-v2.is-danger .subtitle, .illustration-widget.illustration-widget-v2.is-danger h1, .illustration-widget.illustration-widget-v2.is-danger h2, .illustration-widget.illustration-widget-v2.is-danger h3, .illustration-widget.illustration-widget-v2.is-danger h4, .illustration-widget.illustration-widget-v2.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2 .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v2 .card-head .left, .illustration-widget.illustration-widget-v2 .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v2 .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v2 .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v2 .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v2.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .illustration-widget.illustration-widget-v2.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v2.is-straight.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v2.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v2.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v2.is-straight.is-primary .title, .illustration-widget.illustration-widget-v2.is-straight.is-primary .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-primary h1, .illustration-widget.illustration-widget-v2.is-straight.is-primary h2, .illustration-widget.illustration-widget-v2.is-straight.is-primary h3, .illustration-widget.illustration-widget-v2.is-straight.is-primary h4, .illustration-widget.illustration-widget-v2.is-straight.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-secondary .title, .illustration-widget.illustration-widget-v2.is-straight.is-secondary .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-secondary h1, .illustration-widget.illustration-widget-v2.is-straight.is-secondary h2, .illustration-widget.illustration-widget-v2.is-straight.is-secondary h3, .illustration-widget.illustration-widget-v2.is-straight.is-secondary h4, .illustration-widget.illustration-widget-v2.is-straight.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-info .title, .illustration-widget.illustration-widget-v2.is-straight.is-info .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-info h1, .illustration-widget.illustration-widget-v2.is-straight.is-info h2, .illustration-widget.illustration-widget-v2.is-straight.is-info h3, .illustration-widget.illustration-widget-v2.is-straight.is-info h4, .illustration-widget.illustration-widget-v2.is-straight.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-success .title, .illustration-widget.illustration-widget-v2.is-straight.is-success .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-success h1, .illustration-widget.illustration-widget-v2.is-straight.is-success h2, .illustration-widget.illustration-widget-v2.is-straight.is-success h3, .illustration-widget.illustration-widget-v2.is-straight.is-success h4, .illustration-widget.illustration-widget-v2.is-straight.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-warning .title, .illustration-widget.illustration-widget-v2.is-straight.is-warning .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-warning h1, .illustration-widget.illustration-widget-v2.is-straight.is-warning h2, .illustration-widget.illustration-widget-v2.is-straight.is-warning h3, .illustration-widget.illustration-widget-v2.is-straight.is-warning h4, .illustration-widget.illustration-widget-v2.is-straight.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v2.is-straight.is-danger .title, .illustration-widget.illustration-widget-v2.is-straight.is-danger .subtitle, .illustration-widget.illustration-widget-v2.is-straight.is-danger h1, .illustration-widget.illustration-widget-v2.is-straight.is-danger h2, .illustration-widget.illustration-widget-v2.is-straight.is-danger h3, .illustration-widget.illustration-widget-v2.is-straight.is-danger h4, .illustration-widget.illustration-widget-v2.is-straight.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v2.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v2.is-straight .card-head .left, .illustration-widget.illustration-widget-v2.is-straight .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v2.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v2.is-straight .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v2.is-straight .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v2 img { border-radius: 14px; margin-bottom: 4px; } .illustration-widget.illustration-widget-v2 h3 { font-weight: 600; font-size: 0.95rem; font-family: var(--font-alt); color: var(--dark-text); } .illustration-widget.illustration-widget-v2 p { font-size: 0.9rem; } .illustration-widget.illustration-widget-v3 { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 24px; } .illustration-widget.illustration-widget-v3.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v3.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v3.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v3.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v3.is-primary .title, .illustration-widget.illustration-widget-v3.is-primary .subtitle, .illustration-widget.illustration-widget-v3.is-primary h1, .illustration-widget.illustration-widget-v3.is-primary h2, .illustration-widget.illustration-widget-v3.is-primary h3, .illustration-widget.illustration-widget-v3.is-primary h4, .illustration-widget.illustration-widget-v3.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v3.is-secondary .title, .illustration-widget.illustration-widget-v3.is-secondary .subtitle, .illustration-widget.illustration-widget-v3.is-secondary h1, .illustration-widget.illustration-widget-v3.is-secondary h2, .illustration-widget.illustration-widget-v3.is-secondary h3, .illustration-widget.illustration-widget-v3.is-secondary h4, .illustration-widget.illustration-widget-v3.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v3.is-info .title, .illustration-widget.illustration-widget-v3.is-info .subtitle, .illustration-widget.illustration-widget-v3.is-info h1, .illustration-widget.illustration-widget-v3.is-info h2, .illustration-widget.illustration-widget-v3.is-info h3, .illustration-widget.illustration-widget-v3.is-info h4, .illustration-widget.illustration-widget-v3.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v3.is-success .title, .illustration-widget.illustration-widget-v3.is-success .subtitle, .illustration-widget.illustration-widget-v3.is-success h1, .illustration-widget.illustration-widget-v3.is-success h2, .illustration-widget.illustration-widget-v3.is-success h3, .illustration-widget.illustration-widget-v3.is-success h4, .illustration-widget.illustration-widget-v3.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v3.is-warning .title, .illustration-widget.illustration-widget-v3.is-warning .subtitle, .illustration-widget.illustration-widget-v3.is-warning h1, .illustration-widget.illustration-widget-v3.is-warning h2, .illustration-widget.illustration-widget-v3.is-warning h3, .illustration-widget.illustration-widget-v3.is-warning h4, .illustration-widget.illustration-widget-v3.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v3.is-danger .title, .illustration-widget.illustration-widget-v3.is-danger .subtitle, .illustration-widget.illustration-widget-v3.is-danger h1, .illustration-widget.illustration-widget-v3.is-danger h2, .illustration-widget.illustration-widget-v3.is-danger h3, .illustration-widget.illustration-widget-v3.is-danger h4, .illustration-widget.illustration-widget-v3.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3 .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v3 .card-head .left, .illustration-widget.illustration-widget-v3 .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v3 .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v3 .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v3 .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v3.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .illustration-widget.illustration-widget-v3.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .illustration-widget.illustration-widget-v3.is-straight.is-flat { box-shadow: none; } .illustration-widget.illustration-widget-v3.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .illustration-widget.illustration-widget-v3.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .illustration-widget.illustration-widget-v3.is-straight.is-primary .title, .illustration-widget.illustration-widget-v3.is-straight.is-primary .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-primary h1, .illustration-widget.illustration-widget-v3.is-straight.is-primary h2, .illustration-widget.illustration-widget-v3.is-straight.is-primary h3, .illustration-widget.illustration-widget-v3.is-straight.is-primary h4, .illustration-widget.illustration-widget-v3.is-straight.is-primary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-secondary .title, .illustration-widget.illustration-widget-v3.is-straight.is-secondary .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-secondary h1, .illustration-widget.illustration-widget-v3.is-straight.is-secondary h2, .illustration-widget.illustration-widget-v3.is-straight.is-secondary h3, .illustration-widget.illustration-widget-v3.is-straight.is-secondary h4, .illustration-widget.illustration-widget-v3.is-straight.is-secondary p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-info .title, .illustration-widget.illustration-widget-v3.is-straight.is-info .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-info h1, .illustration-widget.illustration-widget-v3.is-straight.is-info h2, .illustration-widget.illustration-widget-v3.is-straight.is-info h3, .illustration-widget.illustration-widget-v3.is-straight.is-info h4, .illustration-widget.illustration-widget-v3.is-straight.is-info p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-success .title, .illustration-widget.illustration-widget-v3.is-straight.is-success .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-success h1, .illustration-widget.illustration-widget-v3.is-straight.is-success h2, .illustration-widget.illustration-widget-v3.is-straight.is-success h3, .illustration-widget.illustration-widget-v3.is-straight.is-success h4, .illustration-widget.illustration-widget-v3.is-straight.is-success p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-warning .title, .illustration-widget.illustration-widget-v3.is-straight.is-warning .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-warning h1, .illustration-widget.illustration-widget-v3.is-straight.is-warning h2, .illustration-widget.illustration-widget-v3.is-straight.is-warning h3, .illustration-widget.illustration-widget-v3.is-straight.is-warning h4, .illustration-widget.illustration-widget-v3.is-straight.is-warning p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .illustration-widget.illustration-widget-v3.is-straight.is-danger .title, .illustration-widget.illustration-widget-v3.is-straight.is-danger .subtitle, .illustration-widget.illustration-widget-v3.is-straight.is-danger h1, .illustration-widget.illustration-widget-v3.is-straight.is-danger h2, .illustration-widget.illustration-widget-v3.is-straight.is-danger h3, .illustration-widget.illustration-widget-v3.is-straight.is-danger h4, .illustration-widget.illustration-widget-v3.is-straight.is-danger p { color: var(--smoke-white) !important; } .illustration-widget.illustration-widget-v3.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .illustration-widget.illustration-widget-v3.is-straight .card-head .left, .illustration-widget.illustration-widget-v3.is-straight .card-head .right { display: flex; align-items: center; } .illustration-widget.illustration-widget-v3.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .illustration-widget.illustration-widget-v3.is-straight .card-head .right { justify-content: flex-end; } .illustration-widget.illustration-widget-v3.is-straight .card-inner { padding-top: 1.75rem; } .illustration-widget.illustration-widget-v3 img { border-radius: 18px; margin-bottom: 4px; } .illustration-widget.illustration-widget-v3 h3 { font-weight: 600; font-size: 0.95rem; font-family: var(--font-alt); color: var(--dark-text); } .illustration-widget.illustration-widget-v3 p { font-size: 0.9rem; } .is-dark .illustration-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .illustration-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .illustration-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .illustration-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .illustration-widget.illustration-widget-v1 h3, .is-dark .illustration-widget.illustration-widget-v2 h3, .is-dark .illustration-widget.illustration-widget-v3 h3 { color: var(--dark-dark-text); } /* ========================================================================== 16. Creative List Widget ========================================================================== */ .creative-list-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .creative-list-widget.has-margin-bottom { margin-bottom: 1.5rem; } .creative-list-widget.is-flat { box-shadow: none; } .creative-list-widget.is-raised { box-shadow: var(--light-box-shadow); } .creative-list-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .creative-list-widget.is-primary .title, .creative-list-widget.is-primary .subtitle, .creative-list-widget.is-primary h1, .creative-list-widget.is-primary h2, .creative-list-widget.is-primary h3, .creative-list-widget.is-primary h4, .creative-list-widget.is-primary p { color: var(--smoke-white) !important; } .creative-list-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .creative-list-widget.is-secondary .title, .creative-list-widget.is-secondary .subtitle, .creative-list-widget.is-secondary h1, .creative-list-widget.is-secondary h2, .creative-list-widget.is-secondary h3, .creative-list-widget.is-secondary h4, .creative-list-widget.is-secondary p { color: var(--smoke-white) !important; } .creative-list-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .creative-list-widget.is-info .title, .creative-list-widget.is-info .subtitle, .creative-list-widget.is-info h1, .creative-list-widget.is-info h2, .creative-list-widget.is-info h3, .creative-list-widget.is-info h4, .creative-list-widget.is-info p { color: var(--smoke-white) !important; } .creative-list-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .creative-list-widget.is-success .title, .creative-list-widget.is-success .subtitle, .creative-list-widget.is-success h1, .creative-list-widget.is-success h2, .creative-list-widget.is-success h3, .creative-list-widget.is-success h4, .creative-list-widget.is-success p { color: var(--smoke-white) !important; } .creative-list-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .creative-list-widget.is-warning .title, .creative-list-widget.is-warning .subtitle, .creative-list-widget.is-warning h1, .creative-list-widget.is-warning h2, .creative-list-widget.is-warning h3, .creative-list-widget.is-warning h4, .creative-list-widget.is-warning p { color: var(--smoke-white) !important; } .creative-list-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .creative-list-widget.is-danger .title, .creative-list-widget.is-danger .subtitle, .creative-list-widget.is-danger h1, .creative-list-widget.is-danger h2, .creative-list-widget.is-danger h3, .creative-list-widget.is-danger h4, .creative-list-widget.is-danger p { color: var(--smoke-white) !important; } .creative-list-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .creative-list-widget .card-head .left, .creative-list-widget .card-head .right { display: flex; align-items: center; } .creative-list-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .creative-list-widget .card-head .right { justify-content: flex-end; } .creative-list-widget .card-inner { padding-top: 1.75rem; } .creative-list-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .creative-list-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .creative-list-widget.is-straight.is-flat { box-shadow: none; } .creative-list-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .creative-list-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .creative-list-widget.is-straight.is-primary .title, .creative-list-widget.is-straight.is-primary .subtitle, .creative-list-widget.is-straight.is-primary h1, .creative-list-widget.is-straight.is-primary h2, .creative-list-widget.is-straight.is-primary h3, .creative-list-widget.is-straight.is-primary h4, .creative-list-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .creative-list-widget.is-straight.is-secondary .title, .creative-list-widget.is-straight.is-secondary .subtitle, .creative-list-widget.is-straight.is-secondary h1, .creative-list-widget.is-straight.is-secondary h2, .creative-list-widget.is-straight.is-secondary h3, .creative-list-widget.is-straight.is-secondary h4, .creative-list-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .creative-list-widget.is-straight.is-info .title, .creative-list-widget.is-straight.is-info .subtitle, .creative-list-widget.is-straight.is-info h1, .creative-list-widget.is-straight.is-info h2, .creative-list-widget.is-straight.is-info h3, .creative-list-widget.is-straight.is-info h4, .creative-list-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .creative-list-widget.is-straight.is-success .title, .creative-list-widget.is-straight.is-success .subtitle, .creative-list-widget.is-straight.is-success h1, .creative-list-widget.is-straight.is-success h2, .creative-list-widget.is-straight.is-success h3, .creative-list-widget.is-straight.is-success h4, .creative-list-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .creative-list-widget.is-straight.is-warning .title, .creative-list-widget.is-straight.is-warning .subtitle, .creative-list-widget.is-straight.is-warning h1, .creative-list-widget.is-straight.is-warning h2, .creative-list-widget.is-straight.is-warning h3, .creative-list-widget.is-straight.is-warning h4, .creative-list-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .creative-list-widget.is-straight.is-danger .title, .creative-list-widget.is-straight.is-danger .subtitle, .creative-list-widget.is-straight.is-danger h1, .creative-list-widget.is-straight.is-danger h2, .creative-list-widget.is-straight.is-danger h3, .creative-list-widget.is-straight.is-danger h4, .creative-list-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .creative-list-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .creative-list-widget.is-straight .card-head .left, .creative-list-widget.is-straight .card-head .right { display: flex; align-items: center; } .creative-list-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .creative-list-widget.is-straight .card-head .right { justify-content: flex-end; } .creative-list-widget.is-straight .card-inner { padding-top: 1.75rem; } .creative-list-widget .creative-list .creative-list-item { display: flex; align-items: center; padding: 10px; border-radius: 10px; background: var(--fade-grey-light-3); margin-bottom: 8px; } .creative-list-widget .creative-list .creative-list-item.is-orange { background: var(--orange-light-20); } .creative-list-widget .creative-list .creative-list-item.is-purple { background: var(--purple-light-38); } .creative-list-widget .creative-list .creative-list-item.is-green { background: var(--success-light-48); } .creative-list-widget .creative-list .creative-list-item .meta { font-family: var(--font); font-size: 0.95rem; color: var(--dark-text); font-weight: 500; margin-left: 10px; } .is-dark .creative-list-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .creative-list-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .creative-list-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .creative-list-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .creative-list-widget .creative-list .creative-list-item { background: var(--dark-sidebar-light-2); border: 1px solid var(--dark-sidebar-light-12); } .is-dark .creative-list-widget .creative-list .creative-list-item .meta { color: var(--smoke-white); } /* ========================================================================== 17. Social Buttons Widget ========================================================================== */ .social-buttons-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 16px; } .social-buttons-widget.has-margin-bottom { margin-bottom: 1.5rem; } .social-buttons-widget.is-flat { box-shadow: none; } .social-buttons-widget.is-raised { box-shadow: var(--light-box-shadow); } .social-buttons-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .social-buttons-widget.is-primary .title, .social-buttons-widget.is-primary .subtitle, .social-buttons-widget.is-primary h1, .social-buttons-widget.is-primary h2, .social-buttons-widget.is-primary h3, .social-buttons-widget.is-primary h4, .social-buttons-widget.is-primary p { color: var(--smoke-white) !important; } .social-buttons-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .social-buttons-widget.is-secondary .title, .social-buttons-widget.is-secondary .subtitle, .social-buttons-widget.is-secondary h1, .social-buttons-widget.is-secondary h2, .social-buttons-widget.is-secondary h3, .social-buttons-widget.is-secondary h4, .social-buttons-widget.is-secondary p { color: var(--smoke-white) !important; } .social-buttons-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .social-buttons-widget.is-info .title, .social-buttons-widget.is-info .subtitle, .social-buttons-widget.is-info h1, .social-buttons-widget.is-info h2, .social-buttons-widget.is-info h3, .social-buttons-widget.is-info h4, .social-buttons-widget.is-info p { color: var(--smoke-white) !important; } .social-buttons-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .social-buttons-widget.is-success .title, .social-buttons-widget.is-success .subtitle, .social-buttons-widget.is-success h1, .social-buttons-widget.is-success h2, .social-buttons-widget.is-success h3, .social-buttons-widget.is-success h4, .social-buttons-widget.is-success p { color: var(--smoke-white) !important; } .social-buttons-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .social-buttons-widget.is-warning .title, .social-buttons-widget.is-warning .subtitle, .social-buttons-widget.is-warning h1, .social-buttons-widget.is-warning h2, .social-buttons-widget.is-warning h3, .social-buttons-widget.is-warning h4, .social-buttons-widget.is-warning p { color: var(--smoke-white) !important; } .social-buttons-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .social-buttons-widget.is-danger .title, .social-buttons-widget.is-danger .subtitle, .social-buttons-widget.is-danger h1, .social-buttons-widget.is-danger h2, .social-buttons-widget.is-danger h3, .social-buttons-widget.is-danger h4, .social-buttons-widget.is-danger p { color: var(--smoke-white) !important; } .social-buttons-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .social-buttons-widget .card-head .left, .social-buttons-widget .card-head .right { display: flex; align-items: center; } .social-buttons-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .social-buttons-widget .card-head .right { justify-content: flex-end; } .social-buttons-widget .card-inner { padding-top: 1.75rem; } .social-buttons-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .social-buttons-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .social-buttons-widget.is-straight.is-flat { box-shadow: none; } .social-buttons-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .social-buttons-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .social-buttons-widget.is-straight.is-primary .title, .social-buttons-widget.is-straight.is-primary .subtitle, .social-buttons-widget.is-straight.is-primary h1, .social-buttons-widget.is-straight.is-primary h2, .social-buttons-widget.is-straight.is-primary h3, .social-buttons-widget.is-straight.is-primary h4, .social-buttons-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .social-buttons-widget.is-straight.is-secondary .title, .social-buttons-widget.is-straight.is-secondary .subtitle, .social-buttons-widget.is-straight.is-secondary h1, .social-buttons-widget.is-straight.is-secondary h2, .social-buttons-widget.is-straight.is-secondary h3, .social-buttons-widget.is-straight.is-secondary h4, .social-buttons-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .social-buttons-widget.is-straight.is-info .title, .social-buttons-widget.is-straight.is-info .subtitle, .social-buttons-widget.is-straight.is-info h1, .social-buttons-widget.is-straight.is-info h2, .social-buttons-widget.is-straight.is-info h3, .social-buttons-widget.is-straight.is-info h4, .social-buttons-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .social-buttons-widget.is-straight.is-success .title, .social-buttons-widget.is-straight.is-success .subtitle, .social-buttons-widget.is-straight.is-success h1, .social-buttons-widget.is-straight.is-success h2, .social-buttons-widget.is-straight.is-success h3, .social-buttons-widget.is-straight.is-success h4, .social-buttons-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .social-buttons-widget.is-straight.is-warning .title, .social-buttons-widget.is-straight.is-warning .subtitle, .social-buttons-widget.is-straight.is-warning h1, .social-buttons-widget.is-straight.is-warning h2, .social-buttons-widget.is-straight.is-warning h3, .social-buttons-widget.is-straight.is-warning h4, .social-buttons-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .social-buttons-widget.is-straight.is-danger .title, .social-buttons-widget.is-straight.is-danger .subtitle, .social-buttons-widget.is-straight.is-danger h1, .social-buttons-widget.is-straight.is-danger h2, .social-buttons-widget.is-straight.is-danger h3, .social-buttons-widget.is-straight.is-danger h4, .social-buttons-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .social-buttons-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .social-buttons-widget.is-straight .card-head .left, .social-buttons-widget.is-straight .card-head .right { display: flex; align-items: center; } .social-buttons-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .social-buttons-widget.is-straight .card-head .right { justify-content: flex-end; } .social-buttons-widget.is-straight .card-inner { padding-top: 1.75rem; } .social-buttons-widget .social-buttons { display: flex; } .social-buttons-widget .social-buttons .social-button { display: flex; justify-content: center; align-items: center; flex: 1 1 0; } .social-buttons-widget .social-buttons .social-button .inner-button { display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; min-width: 32px; border-radius: 8px; color: var(--light-text-light-12); transition: all 0.3s; } .social-buttons-widget .social-buttons .social-button .inner-button:hover:not(.is-active) { background: var(--fade-grey-light-3); color: var(--light-text); } .social-buttons-widget .social-buttons .social-button .inner-button.is-rounded { border-radius: var(--radius-rounded); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-facebook { background: var(--facebook); color: var(--smoke-white); box-shadow: var(--facebook-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-linkedin { background: var(--linkedin); color: var(--smoke-white); box-shadow: var(--facebook-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-twitter { background: var(--twitter); color: var(--smoke-white); box-shadow: var(--twitter-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-instagram { background: var(--instagram); color: var(--smoke-white); box-shadow: var(--angular-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-github { background: var(--github); color: var(--smoke-white); box-shadow: var(--github-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-invision { background: var(--invision); color: var(--smoke-white); box-shadow: var(--invision-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-atlassian { background: var(--linkedin); color: var(--smoke-white); box-shadow: var(--linkedin-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button.is-active.is-bootstrap { background: var(--purple); color: var(--smoke-white); box-shadow: var(--purple-box-shadow); } .social-buttons-widget .social-buttons .social-button .inner-button svg { height: 18px; width: 18px; transition: stroke 0.3s; } .is-dark .social-buttons-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .social-buttons-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .social-buttons-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .social-buttons-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .social-buttons-widget .social-buttons .social-button .inner-button:hover:not(.is-active) { background: var(--dark-sidebar-light-2); color: var(--light-text); } /* ========================================================================== 18. Call Widget ========================================================================== */ .call-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 40px 30px; text-align: center; font-family: var(--font); } .call-widget.has-margin-bottom { margin-bottom: 1.5rem; } .call-widget.is-flat { box-shadow: none; } .call-widget.is-raised { box-shadow: var(--light-box-shadow); } .call-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .call-widget.is-primary .title, .call-widget.is-primary .subtitle, .call-widget.is-primary h1, .call-widget.is-primary h2, .call-widget.is-primary h3, .call-widget.is-primary h4, .call-widget.is-primary p { color: var(--smoke-white) !important; } .call-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .call-widget.is-secondary .title, .call-widget.is-secondary .subtitle, .call-widget.is-secondary h1, .call-widget.is-secondary h2, .call-widget.is-secondary h3, .call-widget.is-secondary h4, .call-widget.is-secondary p { color: var(--smoke-white) !important; } .call-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .call-widget.is-info .title, .call-widget.is-info .subtitle, .call-widget.is-info h1, .call-widget.is-info h2, .call-widget.is-info h3, .call-widget.is-info h4, .call-widget.is-info p { color: var(--smoke-white) !important; } .call-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .call-widget.is-success .title, .call-widget.is-success .subtitle, .call-widget.is-success h1, .call-widget.is-success h2, .call-widget.is-success h3, .call-widget.is-success h4, .call-widget.is-success p { color: var(--smoke-white) !important; } .call-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .call-widget.is-warning .title, .call-widget.is-warning .subtitle, .call-widget.is-warning h1, .call-widget.is-warning h2, .call-widget.is-warning h3, .call-widget.is-warning h4, .call-widget.is-warning p { color: var(--smoke-white) !important; } .call-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .call-widget.is-danger .title, .call-widget.is-danger .subtitle, .call-widget.is-danger h1, .call-widget.is-danger h2, .call-widget.is-danger h3, .call-widget.is-danger h4, .call-widget.is-danger p { color: var(--smoke-white) !important; } .call-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .call-widget .card-head .left, .call-widget .card-head .right { display: flex; align-items: center; } .call-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .call-widget .card-head .right { justify-content: flex-end; } .call-widget .card-inner { padding-top: 1.75rem; } .call-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .call-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .call-widget.is-straight.is-flat { box-shadow: none; } .call-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .call-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .call-widget.is-straight.is-primary .title, .call-widget.is-straight.is-primary .subtitle, .call-widget.is-straight.is-primary h1, .call-widget.is-straight.is-primary h2, .call-widget.is-straight.is-primary h3, .call-widget.is-straight.is-primary h4, .call-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .call-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .call-widget.is-straight.is-secondary .title, .call-widget.is-straight.is-secondary .subtitle, .call-widget.is-straight.is-secondary h1, .call-widget.is-straight.is-secondary h2, .call-widget.is-straight.is-secondary h3, .call-widget.is-straight.is-secondary h4, .call-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .call-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .call-widget.is-straight.is-info .title, .call-widget.is-straight.is-info .subtitle, .call-widget.is-straight.is-info h1, .call-widget.is-straight.is-info h2, .call-widget.is-straight.is-info h3, .call-widget.is-straight.is-info h4, .call-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .call-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .call-widget.is-straight.is-success .title, .call-widget.is-straight.is-success .subtitle, .call-widget.is-straight.is-success h1, .call-widget.is-straight.is-success h2, .call-widget.is-straight.is-success h3, .call-widget.is-straight.is-success h4, .call-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .call-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .call-widget.is-straight.is-warning .title, .call-widget.is-straight.is-warning .subtitle, .call-widget.is-straight.is-warning h1, .call-widget.is-straight.is-warning h2, .call-widget.is-straight.is-warning h3, .call-widget.is-straight.is-warning h4, .call-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .call-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .call-widget.is-straight.is-danger .title, .call-widget.is-straight.is-danger .subtitle, .call-widget.is-straight.is-danger h1, .call-widget.is-straight.is-danger h2, .call-widget.is-straight.is-danger h3, .call-widget.is-straight.is-danger h4, .call-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .call-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .call-widget.is-straight .card-head .left, .call-widget.is-straight .card-head .right { display: flex; align-items: center; } .call-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .call-widget.is-straight .card-head .right { justify-content: flex-end; } .call-widget.is-straight .card-inner { padding-top: 1.75rem; } .call-widget .img-container { position: relative; margin: 0 auto 12px auto; max-width: 180px; max-height: 180px; } .call-widget .img-container .main { display: block; } .call-widget .img-container .badge { position: absolute; height: 60px; width: 60px; bottom: 0; right: 2px; border-radius: var(--radius-rounded); border: 6px solid var(--white); } .call-widget h3 { font-weight: 600; font-family: var(--font-alt); font-size: 1rem; color: var(--dark-text); margin-bottom: 4px; } .call-widget p { font-size: 0.9rem; } .call-widget .actions { display: flex; justify-content: center; padding-top: 12px; } .call-widget .actions .action { display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; min-width: 36px; border-radius: var(--radius-rounded); color: var(--light-text-light-12); margin: 0 6px; border: 1px solid var(--fade-grey-dark-3); box-shadow: var(--light-box-shadow); transition: all 0.3s; } .call-widget .actions .action:hover { background: var(--primary); border-color: var(--primary); color: var(--smoke-white); box-shadow: var(--primary-box-shadow); } .call-widget .actions .action svg { height: 16px; width: 16px; transition: stroke 0.3s; } .is-dark .call-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .call-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .call-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .call-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .call-widget h3 { color: var(--dark-dark-text); } .is-dark .call-widget .img-container .badge { border-color: var(--dark-sidebar-light-6); } .is-dark .call-widget .actions .action { background: var(--dark-sidebar-light-2); border: 1px solid var(--dark-sidebar-light-12); color: var(--dark-dark-text); } .is-dark .call-widget .actions .action:hover { border-color: var(--primary); color: var(--primary); } /* ========================================================================== 16. Avatar List Widget ========================================================================== */ .avatar-list-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 14px; } .avatar-list-widget.has-margin-bottom { margin-bottom: 1.5rem; } .avatar-list-widget.is-flat { box-shadow: none; } .avatar-list-widget.is-raised { box-shadow: var(--light-box-shadow); } .avatar-list-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .avatar-list-widget.is-primary .title, .avatar-list-widget.is-primary .subtitle, .avatar-list-widget.is-primary h1, .avatar-list-widget.is-primary h2, .avatar-list-widget.is-primary h3, .avatar-list-widget.is-primary h4, .avatar-list-widget.is-primary p { color: var(--smoke-white) !important; } .avatar-list-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .avatar-list-widget.is-secondary .title, .avatar-list-widget.is-secondary .subtitle, .avatar-list-widget.is-secondary h1, .avatar-list-widget.is-secondary h2, .avatar-list-widget.is-secondary h3, .avatar-list-widget.is-secondary h4, .avatar-list-widget.is-secondary p { color: var(--smoke-white) !important; } .avatar-list-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .avatar-list-widget.is-info .title, .avatar-list-widget.is-info .subtitle, .avatar-list-widget.is-info h1, .avatar-list-widget.is-info h2, .avatar-list-widget.is-info h3, .avatar-list-widget.is-info h4, .avatar-list-widget.is-info p { color: var(--smoke-white) !important; } .avatar-list-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .avatar-list-widget.is-success .title, .avatar-list-widget.is-success .subtitle, .avatar-list-widget.is-success h1, .avatar-list-widget.is-success h2, .avatar-list-widget.is-success h3, .avatar-list-widget.is-success h4, .avatar-list-widget.is-success p { color: var(--smoke-white) !important; } .avatar-list-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .avatar-list-widget.is-warning .title, .avatar-list-widget.is-warning .subtitle, .avatar-list-widget.is-warning h1, .avatar-list-widget.is-warning h2, .avatar-list-widget.is-warning h3, .avatar-list-widget.is-warning h4, .avatar-list-widget.is-warning p { color: var(--smoke-white) !important; } .avatar-list-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .avatar-list-widget.is-danger .title, .avatar-list-widget.is-danger .subtitle, .avatar-list-widget.is-danger h1, .avatar-list-widget.is-danger h2, .avatar-list-widget.is-danger h3, .avatar-list-widget.is-danger h4, .avatar-list-widget.is-danger p { color: var(--smoke-white) !important; } .avatar-list-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .avatar-list-widget .card-head .left, .avatar-list-widget .card-head .right { display: flex; align-items: center; } .avatar-list-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .avatar-list-widget .card-head .right { justify-content: flex-end; } .avatar-list-widget .card-inner { padding-top: 1.75rem; } .avatar-list-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .avatar-list-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .avatar-list-widget.is-straight.is-flat { box-shadow: none; } .avatar-list-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .avatar-list-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .avatar-list-widget.is-straight.is-primary .title, .avatar-list-widget.is-straight.is-primary .subtitle, .avatar-list-widget.is-straight.is-primary h1, .avatar-list-widget.is-straight.is-primary h2, .avatar-list-widget.is-straight.is-primary h3, .avatar-list-widget.is-straight.is-primary h4, .avatar-list-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .avatar-list-widget.is-straight.is-secondary .title, .avatar-list-widget.is-straight.is-secondary .subtitle, .avatar-list-widget.is-straight.is-secondary h1, .avatar-list-widget.is-straight.is-secondary h2, .avatar-list-widget.is-straight.is-secondary h3, .avatar-list-widget.is-straight.is-secondary h4, .avatar-list-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .avatar-list-widget.is-straight.is-info .title, .avatar-list-widget.is-straight.is-info .subtitle, .avatar-list-widget.is-straight.is-info h1, .avatar-list-widget.is-straight.is-info h2, .avatar-list-widget.is-straight.is-info h3, .avatar-list-widget.is-straight.is-info h4, .avatar-list-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .avatar-list-widget.is-straight.is-success .title, .avatar-list-widget.is-straight.is-success .subtitle, .avatar-list-widget.is-straight.is-success h1, .avatar-list-widget.is-straight.is-success h2, .avatar-list-widget.is-straight.is-success h3, .avatar-list-widget.is-straight.is-success h4, .avatar-list-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .avatar-list-widget.is-straight.is-warning .title, .avatar-list-widget.is-straight.is-warning .subtitle, .avatar-list-widget.is-straight.is-warning h1, .avatar-list-widget.is-straight.is-warning h2, .avatar-list-widget.is-straight.is-warning h3, .avatar-list-widget.is-straight.is-warning h4, .avatar-list-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .avatar-list-widget.is-straight.is-danger .title, .avatar-list-widget.is-straight.is-danger .subtitle, .avatar-list-widget.is-straight.is-danger h1, .avatar-list-widget.is-straight.is-danger h2, .avatar-list-widget.is-straight.is-danger h3, .avatar-list-widget.is-straight.is-danger h4, .avatar-list-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .avatar-list-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .avatar-list-widget.is-straight .card-head .left, .avatar-list-widget.is-straight .card-head .right { display: flex; align-items: center; } .avatar-list-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .avatar-list-widget.is-straight .card-head .right { justify-content: flex-end; } .avatar-list-widget.is-straight .card-inner { padding-top: 1.75rem; } .avatar-list-widget .field .control { position: relative; } .avatar-list-widget .field .control .input { height: 42px; border-radius: 8px; background: var(--widget-grey); border-color: var(--widget-grey); } .avatar-list-widget .field .control .input:focus { border-color: var(--fade-grey-dark-3); background: var(--white); } .avatar-list-widget .field .control .searcv-button { position: absolute; top: 0; right: 0; height: 42px; width: 42px; border-radius: 8px; background: var(--primary); display: flex; justify-content: center; align-items: center; border: none; outline: none; color: var(--white); cursor: pointer; } .avatar-list-widget .field .control .searcv-button svg { height: 18px; width: 18px; } .avatar-list-widget .avatar-list .avatar-list-item { display: flex; align-items: center; padding: 10px; border-radius: 10px; margin-bottom: 8px; transition: all 0.3s; } .avatar-list-widget .avatar-list .avatar-list-item:hover { background: var(--fade-grey-light-3); } .avatar-list-widget .avatar-list .avatar-list-item .meta { font-family: var(--font-alt); font-size: 0.95rem; color: var(--dark-text); font-weight: 600; margin-left: 10px; } .is-dark .avatar-list-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .avatar-list-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .avatar-list-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .avatar-list-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .avatar-list-widget .field .control .input { background: var(--dark-sidebar-light-3); border-color: var(--dark-sidebar-light-12); } .is-dark .avatar-list-widget .field .control .searcv-button { background: var(--primary); } .is-dark .avatar-list-widget .field .topics a:hover { color: var(--primary); } .is-dark .avatar-list-widget .avatar-list .avatar-list-item:hover { background: var(--dark-sidebar-light-8); } .is-dark .avatar-list-widget .avatar-list .avatar-list-item .meta { color: var(--dark-dark-text); } /* ========================================================================== 17. Contact Widget ========================================================================== */ .contact-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .contact-widget.has-margin-bottom { margin-bottom: 1.5rem; } .contact-widget.is-flat { box-shadow: none; } .contact-widget.is-raised { box-shadow: var(--light-box-shadow); } .contact-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .contact-widget.is-primary .title, .contact-widget.is-primary .subtitle, .contact-widget.is-primary h1, .contact-widget.is-primary h2, .contact-widget.is-primary h3, .contact-widget.is-primary h4, .contact-widget.is-primary p { color: var(--smoke-white) !important; } .contact-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .contact-widget.is-secondary .title, .contact-widget.is-secondary .subtitle, .contact-widget.is-secondary h1, .contact-widget.is-secondary h2, .contact-widget.is-secondary h3, .contact-widget.is-secondary h4, .contact-widget.is-secondary p { color: var(--smoke-white) !important; } .contact-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .contact-widget.is-info .title, .contact-widget.is-info .subtitle, .contact-widget.is-info h1, .contact-widget.is-info h2, .contact-widget.is-info h3, .contact-widget.is-info h4, .contact-widget.is-info p { color: var(--smoke-white) !important; } .contact-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .contact-widget.is-success .title, .contact-widget.is-success .subtitle, .contact-widget.is-success h1, .contact-widget.is-success h2, .contact-widget.is-success h3, .contact-widget.is-success h4, .contact-widget.is-success p { color: var(--smoke-white) !important; } .contact-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .contact-widget.is-warning .title, .contact-widget.is-warning .subtitle, .contact-widget.is-warning h1, .contact-widget.is-warning h2, .contact-widget.is-warning h3, .contact-widget.is-warning h4, .contact-widget.is-warning p { color: var(--smoke-white) !important; } .contact-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .contact-widget.is-danger .title, .contact-widget.is-danger .subtitle, .contact-widget.is-danger h1, .contact-widget.is-danger h2, .contact-widget.is-danger h3, .contact-widget.is-danger h4, .contact-widget.is-danger p { color: var(--smoke-white) !important; } .contact-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .contact-widget .card-head .left, .contact-widget .card-head .right { display: flex; align-items: center; } .contact-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .contact-widget .card-head .right { justify-content: flex-end; } .contact-widget .card-inner { padding-top: 1.75rem; } .contact-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .contact-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .contact-widget.is-straight.is-flat { box-shadow: none; } .contact-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .contact-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .contact-widget.is-straight.is-primary .title, .contact-widget.is-straight.is-primary .subtitle, .contact-widget.is-straight.is-primary h1, .contact-widget.is-straight.is-primary h2, .contact-widget.is-straight.is-primary h3, .contact-widget.is-straight.is-primary h4, .contact-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .contact-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .contact-widget.is-straight.is-secondary .title, .contact-widget.is-straight.is-secondary .subtitle, .contact-widget.is-straight.is-secondary h1, .contact-widget.is-straight.is-secondary h2, .contact-widget.is-straight.is-secondary h3, .contact-widget.is-straight.is-secondary h4, .contact-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .contact-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .contact-widget.is-straight.is-info .title, .contact-widget.is-straight.is-info .subtitle, .contact-widget.is-straight.is-info h1, .contact-widget.is-straight.is-info h2, .contact-widget.is-straight.is-info h3, .contact-widget.is-straight.is-info h4, .contact-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .contact-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .contact-widget.is-straight.is-success .title, .contact-widget.is-straight.is-success .subtitle, .contact-widget.is-straight.is-success h1, .contact-widget.is-straight.is-success h2, .contact-widget.is-straight.is-success h3, .contact-widget.is-straight.is-success h4, .contact-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .contact-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .contact-widget.is-straight.is-warning .title, .contact-widget.is-straight.is-warning .subtitle, .contact-widget.is-straight.is-warning h1, .contact-widget.is-straight.is-warning h2, .contact-widget.is-straight.is-warning h3, .contact-widget.is-straight.is-warning h4, .contact-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .contact-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .contact-widget.is-straight.is-danger .title, .contact-widget.is-straight.is-danger .subtitle, .contact-widget.is-straight.is-danger h1, .contact-widget.is-straight.is-danger h2, .contact-widget.is-straight.is-danger h3, .contact-widget.is-straight.is-danger h4, .contact-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .contact-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .contact-widget.is-straight .card-head .left, .contact-widget.is-straight .card-head .right { display: flex; align-items: center; } .contact-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .contact-widget.is-straight .card-head .right { justify-content: flex-end; } .contact-widget.is-straight .card-inner { padding-top: 1.75rem; } .contact-widget.is-reversed .widget-content { flex-direction: row-reverse; } .contact-widget .widget-content { display: flex; border-bottom: 1px solid var(--fade-grey-dark-3); margin-bottom: 16px; padding-bottom: 16px; } .contact-widget .widget-content .left { text-align: center; width: 40%; } .contact-widget .widget-content .left .v-avatar { display: block; margin: 0 auto; } .contact-widget .widget-content .left .v-avatar .avatar { margin: 0; } .contact-widget .widget-content .right { width: 60%; font-family: var(--font); } .contact-widget .widget-content .right > h3 { font-family: var(--font-alt); color: var(--dark-text); font-weight: 600; margin-bottom: 4px; } .contact-widget .widget-content .right .company { font-size: 0.9rem; line-height: 1.2; margin-bottom: 4px; } .contact-widget .widget-content .right .company span { color: var(--primary); } .contact-widget .widget-content .right .contact-info { font-size: 0.85rem; } .contact-widget .widget-content .right .contact-info > span { display: flex; align-items: center; } .contact-widget .widget-content .right .contact-info > span svg { height: 14px; width: 14px; margin-right: 4px; stroke-width: 1.4px; color: var(--light-text); } .contact-widget .email { text-align: center; font-size: 0.9rem; } .is-dark .contact-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .contact-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .contact-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .contact-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .contact-widget .widget-content { border-color: var(--dark-sidebar-light-12); } .is-dark .contact-widget .widget-content .right h3 { color: var(--dark-dark-text); } .is-dark .contact-widget .widget-content .right .company span:first-child { color: var(--primary); } .is-dark .contact-widget .widget-content .right .contact-info span span { color: var(--dark-dark-text); } /* ========================================================================== 18. Followers Widget ========================================================================== */ .followers-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .followers-widget.has-margin-bottom { margin-bottom: 1.5rem; } .followers-widget.is-flat { box-shadow: none; } .followers-widget.is-raised { box-shadow: var(--light-box-shadow); } .followers-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .followers-widget.is-primary .title, .followers-widget.is-primary .subtitle, .followers-widget.is-primary h1, .followers-widget.is-primary h2, .followers-widget.is-primary h3, .followers-widget.is-primary h4, .followers-widget.is-primary p { color: var(--smoke-white) !important; } .followers-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .followers-widget.is-secondary .title, .followers-widget.is-secondary .subtitle, .followers-widget.is-secondary h1, .followers-widget.is-secondary h2, .followers-widget.is-secondary h3, .followers-widget.is-secondary h4, .followers-widget.is-secondary p { color: var(--smoke-white) !important; } .followers-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .followers-widget.is-info .title, .followers-widget.is-info .subtitle, .followers-widget.is-info h1, .followers-widget.is-info h2, .followers-widget.is-info h3, .followers-widget.is-info h4, .followers-widget.is-info p { color: var(--smoke-white) !important; } .followers-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .followers-widget.is-success .title, .followers-widget.is-success .subtitle, .followers-widget.is-success h1, .followers-widget.is-success h2, .followers-widget.is-success h3, .followers-widget.is-success h4, .followers-widget.is-success p { color: var(--smoke-white) !important; } .followers-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .followers-widget.is-warning .title, .followers-widget.is-warning .subtitle, .followers-widget.is-warning h1, .followers-widget.is-warning h2, .followers-widget.is-warning h3, .followers-widget.is-warning h4, .followers-widget.is-warning p { color: var(--smoke-white) !important; } .followers-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .followers-widget.is-danger .title, .followers-widget.is-danger .subtitle, .followers-widget.is-danger h1, .followers-widget.is-danger h2, .followers-widget.is-danger h3, .followers-widget.is-danger h4, .followers-widget.is-danger p { color: var(--smoke-white) !important; } .followers-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .followers-widget .card-head .left, .followers-widget .card-head .right { display: flex; align-items: center; } .followers-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .followers-widget .card-head .right { justify-content: flex-end; } .followers-widget .card-inner { padding-top: 1.75rem; } .followers-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .followers-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .followers-widget.is-straight.is-flat { box-shadow: none; } .followers-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .followers-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .followers-widget.is-straight.is-primary .title, .followers-widget.is-straight.is-primary .subtitle, .followers-widget.is-straight.is-primary h1, .followers-widget.is-straight.is-primary h2, .followers-widget.is-straight.is-primary h3, .followers-widget.is-straight.is-primary h4, .followers-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .followers-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .followers-widget.is-straight.is-secondary .title, .followers-widget.is-straight.is-secondary .subtitle, .followers-widget.is-straight.is-secondary h1, .followers-widget.is-straight.is-secondary h2, .followers-widget.is-straight.is-secondary h3, .followers-widget.is-straight.is-secondary h4, .followers-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .followers-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .followers-widget.is-straight.is-info .title, .followers-widget.is-straight.is-info .subtitle, .followers-widget.is-straight.is-info h1, .followers-widget.is-straight.is-info h2, .followers-widget.is-straight.is-info h3, .followers-widget.is-straight.is-info h4, .followers-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .followers-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .followers-widget.is-straight.is-success .title, .followers-widget.is-straight.is-success .subtitle, .followers-widget.is-straight.is-success h1, .followers-widget.is-straight.is-success h2, .followers-widget.is-straight.is-success h3, .followers-widget.is-straight.is-success h4, .followers-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .followers-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .followers-widget.is-straight.is-warning .title, .followers-widget.is-straight.is-warning .subtitle, .followers-widget.is-straight.is-warning h1, .followers-widget.is-straight.is-warning h2, .followers-widget.is-straight.is-warning h3, .followers-widget.is-straight.is-warning h4, .followers-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .followers-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .followers-widget.is-straight.is-danger .title, .followers-widget.is-straight.is-danger .subtitle, .followers-widget.is-straight.is-danger h1, .followers-widget.is-straight.is-danger h2, .followers-widget.is-straight.is-danger h3, .followers-widget.is-straight.is-danger h4, .followers-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .followers-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .followers-widget.is-straight .card-head .left, .followers-widget.is-straight .card-head .right { display: flex; align-items: center; } .followers-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .followers-widget.is-straight .card-head .right { justify-content: flex-end; } .followers-widget.is-straight .card-inner { padding-top: 1.75rem; } .followers-widget .channels { display: flex; margin-left: -8px; margin-right: -8px; width: 100%; } .followers-widget .channels .channel { width: calc(33.3% - 16px); text-align: center; margin: 0 8px; } .followers-widget .channels .channel .channel-icon { display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; border-radius: 10px; background: var(--widget-grey); margin: 0 auto 4px auto; } .followers-widget .channels .channel .channel-icon i { font-size: 14px; color: var(--light-text); } .followers-widget .channels .channel .channel-stats span { font-family: var(--font); display: block; } .followers-widget .channels .channel .channel-stats span:first-child { font-weight: 500; color: var(--light-text); } .is-dark .followers-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .followers-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .followers-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .followers-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .followers-widget .channels .channel .channel-icon { background: var(--dark-sidebar-light-2); border: 1px solid var(--dark-sidebar-light-12); } /* ========================================================================== 18. Cart Widget ========================================================================== */ .cart-widget { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .cart-widget.has-margin-bottom { margin-bottom: 1.5rem; } .cart-widget.is-flat { box-shadow: none; } .cart-widget.is-raised { box-shadow: var(--light-box-shadow); } .cart-widget.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .cart-widget.is-primary .title, .cart-widget.is-primary .subtitle, .cart-widget.is-primary h1, .cart-widget.is-primary h2, .cart-widget.is-primary h3, .cart-widget.is-primary h4, .cart-widget.is-primary p { color: var(--smoke-white) !important; } .cart-widget.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .cart-widget.is-secondary .title, .cart-widget.is-secondary .subtitle, .cart-widget.is-secondary h1, .cart-widget.is-secondary h2, .cart-widget.is-secondary h3, .cart-widget.is-secondary h4, .cart-widget.is-secondary p { color: var(--smoke-white) !important; } .cart-widget.is-info { background: var(--info) !important; border-color: var(--info) !important; } .cart-widget.is-info .title, .cart-widget.is-info .subtitle, .cart-widget.is-info h1, .cart-widget.is-info h2, .cart-widget.is-info h3, .cart-widget.is-info h4, .cart-widget.is-info p { color: var(--smoke-white) !important; } .cart-widget.is-success { background: var(--success) !important; border-color: var(--success) !important; } .cart-widget.is-success .title, .cart-widget.is-success .subtitle, .cart-widget.is-success h1, .cart-widget.is-success h2, .cart-widget.is-success h3, .cart-widget.is-success h4, .cart-widget.is-success p { color: var(--smoke-white) !important; } .cart-widget.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .cart-widget.is-warning .title, .cart-widget.is-warning .subtitle, .cart-widget.is-warning h1, .cart-widget.is-warning h2, .cart-widget.is-warning h3, .cart-widget.is-warning h4, .cart-widget.is-warning p { color: var(--smoke-white) !important; } .cart-widget.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .cart-widget.is-danger .title, .cart-widget.is-danger .subtitle, .cart-widget.is-danger h1, .cart-widget.is-danger h2, .cart-widget.is-danger h3, .cart-widget.is-danger h4, .cart-widget.is-danger p { color: var(--smoke-white) !important; } .cart-widget .card-head { display: flex; align-items: center; justify-content: space-between; } .cart-widget .card-head .left, .cart-widget .card-head .right { display: flex; align-items: center; } .cart-widget .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .cart-widget .card-head .right { justify-content: flex-end; } .cart-widget .card-inner { padding-top: 1.75rem; } .cart-widget.is-straight { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; } .cart-widget.is-straight.has-margin-bottom { margin-bottom: 1.5rem; } .cart-widget.is-straight.is-flat { box-shadow: none; } .cart-widget.is-straight.is-raised { box-shadow: var(--light-box-shadow); } .cart-widget.is-straight.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .cart-widget.is-straight.is-primary .title, .cart-widget.is-straight.is-primary .subtitle, .cart-widget.is-straight.is-primary h1, .cart-widget.is-straight.is-primary h2, .cart-widget.is-straight.is-primary h3, .cart-widget.is-straight.is-primary h4, .cart-widget.is-straight.is-primary p { color: var(--smoke-white) !important; } .cart-widget.is-straight.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .cart-widget.is-straight.is-secondary .title, .cart-widget.is-straight.is-secondary .subtitle, .cart-widget.is-straight.is-secondary h1, .cart-widget.is-straight.is-secondary h2, .cart-widget.is-straight.is-secondary h3, .cart-widget.is-straight.is-secondary h4, .cart-widget.is-straight.is-secondary p { color: var(--smoke-white) !important; } .cart-widget.is-straight.is-info { background: var(--info) !important; border-color: var(--info) !important; } .cart-widget.is-straight.is-info .title, .cart-widget.is-straight.is-info .subtitle, .cart-widget.is-straight.is-info h1, .cart-widget.is-straight.is-info h2, .cart-widget.is-straight.is-info h3, .cart-widget.is-straight.is-info h4, .cart-widget.is-straight.is-info p { color: var(--smoke-white) !important; } .cart-widget.is-straight.is-success { background: var(--success) !important; border-color: var(--success) !important; } .cart-widget.is-straight.is-success .title, .cart-widget.is-straight.is-success .subtitle, .cart-widget.is-straight.is-success h1, .cart-widget.is-straight.is-success h2, .cart-widget.is-straight.is-success h3, .cart-widget.is-straight.is-success h4, .cart-widget.is-straight.is-success p { color: var(--smoke-white) !important; } .cart-widget.is-straight.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .cart-widget.is-straight.is-warning .title, .cart-widget.is-straight.is-warning .subtitle, .cart-widget.is-straight.is-warning h1, .cart-widget.is-straight.is-warning h2, .cart-widget.is-straight.is-warning h3, .cart-widget.is-straight.is-warning h4, .cart-widget.is-straight.is-warning p { color: var(--smoke-white) !important; } .cart-widget.is-straight.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .cart-widget.is-straight.is-danger .title, .cart-widget.is-straight.is-danger .subtitle, .cart-widget.is-straight.is-danger h1, .cart-widget.is-straight.is-danger h2, .cart-widget.is-straight.is-danger h3, .cart-widget.is-straight.is-danger h4, .cart-widget.is-straight.is-danger p { color: var(--smoke-white) !important; } .cart-widget.is-straight .card-head { display: flex; align-items: center; justify-content: space-between; } .cart-widget.is-straight .card-head .left, .cart-widget.is-straight .card-head .right { display: flex; align-items: center; } .cart-widget.is-straight .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .cart-widget.is-straight .card-head .right { justify-content: flex-end; } .cart-widget.is-straight .card-inner { padding-top: 1.75rem; } .cart-widget .cart-items .cart-item { display: flex; margin: 8px 0; } .cart-widget .cart-items .cart-item .meta { margin-left: 12px; display: flex; flex-direction: column; } .cart-widget .cart-items .cart-item .meta span { display: block; font-family: var(--font); } .cart-widget .cart-items .cart-item .meta span:first-child { font-size: 0.9rem; color: var(--light-text); } .cart-widget .cart-items .cart-item .meta span:nth-child(2) { color: var(--dark-text); margin-top: auto; font-weight: 600; font-size: 1.2rem; } .cart-widget .cart-button { padding-top: 16px; } .cart-widget .cart-button .button { min-height: 50px; border-radius: 10px; } .is-dark .cart-widget { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .cart-widget .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .cart-widget .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .cart-widget .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .cart-widget .cart-items .cart-item .meta span:nth-child(2) { color: var(--primary); } /*! _responsive.scss | Vuero | Css ninja 2020-2021 */ /* ========================================================================== Responsive styles ========================================================================== */ /* 1. Tablet Landscape 2. Tablet portrait 3. Mobile Only 4. Custom 5. Responsive Helpers */ /* ========================================================================== 1. Tablet Landscape ========================================================================== */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { .pageloader, .infraloader { width: calc(100% - 60px) !important; left: 60px !important; } .navbar-brand { align-items: center; } .main-sidebar { width: 60px !important; } .main-sidebar.has-labels .sidebar-inner .icon-menu li a::after, .main-sidebar.has-labels .sidebar-inner .bottom-menu li a::after { left: -30px; } .main-sidebar.is-float { width: 56px !important; margin-left: 4px; } .main-sidebar.is-float:not(.is-bordered) .sidebar-brand { width: 56px !important; } .main-sidebar.is-float:not(.is-bordered) .sidebar-inner .icon-menu li, .main-sidebar.is-float:not(.is-bordered) .sidebar-inner .bottom-menu li { width: 56px !important; } .main-sidebar.is-float.is-bordered { width: 60px !important; } .main-sidebar.is-float.is-bordered .sidebar-brand { width: 60px !important; } .main-sidebar.is-float.is-bordered .sidebar-inner .icon-menu li, .main-sidebar.is-float.is-bordered .sidebar-inner .bottom-menu li { width: 60px !important; } .main-sidebar.is-float .sidebar-inner .bottom-menu { padding-bottom: 0 !important; bottom: -3px !important; } .main-sidebar .sidebar-brand { width: 60px !important; } .main-sidebar .sidebar-inner li { width: 60px !important; } .main-sidebar .sidebar-inner .icon-menu { max-height: calc(100vh - 60px - 64px) !important; } .main-sidebar .sidebar-inner .profile-dropdown .dropdown-trigger img { height: 42px !important; width: 42px !important; } .mobile-main-sidebar, .mobile-overlay, .mobile-subsidebar { display: none !important; } .sidebar-panel { box-shadow: var(--light-box-shadow); } .sidebar-panel .panel-close { display: block !important; } .sidebar-panel, .sidebar-search { left: 60px !important; } .is-navbar .view-wrapper .is-stuck { margin-left: 0 !important; width: 100% !important; } .view-wrapper { width: calc(100% - 60px) !important; margin-left: 60px !important; } .view-wrapper.is-pushed-messages { margin-left: 140px !important; width: calc(100% - 140px) !important; } .page-title.is-project-details .vuero-hamburger { margin-left: -4px !important; } .page-title.is-pulled-lg .vuero-hamburger { margin-left: 0 !important; } .page-content { padding: 0 30px !important; } .is-stuck { margin-left: 60px !important; width: calc(100% - 60px) !important; } } /* ========================================================================== 2. Tablet portrait ========================================================================== */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .infraloader, .pageloader { width: 100% !important; left: 0 !important; } .navbar-navbar, .circular-menu, .navbar-navbar-clean { display: none; } .navbar-brand { align-items: center; justify-content: space-between; height: 60px; } .navbar-brand .brand-start { width: 90px; } .navbar-brand .brand-start .navbar-burger { height: 60px; width: 60px; } .navbar-brand .is-brand { padding: 0 !important; } .navbar-brand .brand-end { display: flex; align-items: center; width: 90px; margin-right: 20px; } .navbar-brand .is-notification.is-active .navbar-link, .navbar-brand .is-notification:hover .navbar-link { background: transparent !important; } .navbar-brand .is-notification.is-active .navbar-dropdown, .navbar-brand .is-notification:hover .navbar-dropdown { display: block !important; } .navbar-brand .is-notification .navbar-dropdown { display: none; position: absolute; top: 100%; z-index: 3; background: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); } .toolbar .toolbar-notifications { display: none; } .vuero-hamburger:not(.is-visible) { display: none !important; } .main-sidebar, .sidebar { display: none; } .sidebar-panel { display: none !important; left: 0 !important; z-index: 100 !important; box-shadow: var(--light-box-shadow); } .sidebar-panel .panel-close { display: flex !important; } .view-wrapper { width: 100% !important; margin-left: 0 !important; margin-top: 60px !important; padding-left: 40px; padding-right: 40px; } .view-wrapper.is-explore { padding-left: 0 !important; padding-right: 0 !important; } .page-title { margin-top: 0; padding-top: 20px; } .page-title.is-project-details .vuero-hamburger { margin-left: 7px !important; } .is-navbar .view-wrapper { padding-top: 70px !important; margin-top: 0 !important; } .is-navbar .page-title { display: flex !important; margin-top: 0; } .page-content { padding: 0 10px; } .page-content.is-explore { padding: 0 !important; } .is-stuck { top: 60px !important; margin-left: 0 !important; width: 100% !important; padding-right: 20px !important; } .widget-demo-columns { display: flex; } .widget-demo-columns.half-columns > .column { width: 50% !important; max-width: 50% !important; min-width: 50%; } .widget-demo-columns > .column { width: 33.3%; max-width: 33.3%; } } /* ========================================================================== 3. Mobile Only ========================================================================== */ @media (max-width: 767px) { .infraloader, .pageloader { width: 100% !important; left: 0 !important; } .navbar-navbar, .circular-menu, .navbar-navbar-clean { display: none; } .navbar-brand { align-items: center; justify-content: space-between; height: 60px; } .navbar-brand .brand-start { width: 90px; } .navbar-brand .brand-start .navbar-burger { height: 60px; width: 60px; } .navbar-brand .is-brand { padding: 0 !important; } .navbar-brand .brand-end { display: flex; align-items: center; width: 90px; margin-right: 20px; } .navbar-brand .is-notification.is-active .navbar-link, .navbar-brand .is-notification:hover .navbar-link { background: transparent !important; } .navbar-brand .is-notification.is-active .navbar-dropdown, .navbar-brand .is-notification:hover .navbar-dropdown { display: block !important; } .navbar-brand .is-notification .navbar-dropdown { display: none; position: absolute; top: 100%; z-index: 3; background: var(--white); border-radius: var(--radius-large); border: 1px solid var(--fade-grey); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); } .toolbar .toolbar-notifications { display: none; } .vuero-hamburger:not(.is-visible) { display: none !important; } .sidebar-panel { display: none !important; left: 0 !important; z-index: 100 !important; border-right: 1px solid var(--fade-grey) !important; box-shadow: var(--light-box-shadow); } .sidebar-panel .subpanel-header { height: 60px !important; background: #fafafa; } .sidebar-panel .subpanel-header svg { color: var(--muted-grey); } .main-sidebar, .sidebar { display: none; } .view-wrapper { width: 100% !important; margin-left: 0 !important; margin-top: 60px !important; } .page-title { margin-top: 0; padding-top: 20px; } .page-title.is-project-details .vuero-hamburger { margin-left: -4px !important; } .page-title .title-wrap { margin-left: 0; } .is-navbar .view-wrapper { padding-top: 0 !important; } .is-navbar .page-title { display: flex !important; margin-top: 0; } .page-content { padding: 0 10px 0 10px !important; } .page-content.projects-content { padding: 0 16px; } .is-stuck { top: 59px !important; margin-left: 0 !important; width: 100% !important; padding-right: 20px !important; } } /* ========================================================================== 4. Custom ========================================================================== */ @media only screen and (min-device-width: 1025px) and (orientation: landscape) { .panel-close { display: none !important; } .mobile-main-sidebar, .mobile-overlay, .mobile-subsidebar { display: none !important; } } /* ========================================================================== 5. Responsive Helpers ========================================================================== */ @media only screen and (max-width: 767px) { .h-hidden-mobile { display: none !important; } .h-only-mobile { display: block !important; } .h-only-mobile-flex { display: flex !important; } .is-half-mobile-p { display: flex !important; } .is-half-mobile-p .column { width: 50%; min-width: 50%; max-width: 50%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .h-hidden-tablet-p { display: none !important; } .is-flex-tablet-p { display: flex !important; } .is-flex-tablet-p.is-half-tablet-p .column { width: 50%; min-width: 50%; } .h-only-tablet-p { display: block !important; } .h-only-tablet-p-flex { display: flex !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .h-hidden-tablet-l { display: none !important; } .is-flex-tablet-l { display: flex !important; } .h-only-tablet-l { display: block !important; } } @media only screen and (min-width: 768px) and (orientation: landscape) { .h-only-mobile { display: block !important; } .h-only-mobile-flex { display: none !important; } .h-only-tablet-p { display: none !important; } .h-only-tablet-p-flex { display: none !important; } } @media only screen and (min-width: 1025px) { .h-hidden-desktop { display: none !important; } } @media only screen and (max-width: 1023px) { .toc-column { display: none !important; } .doc-column { width: 100% !important; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .mobile-navbar .navbar-item.is-notification .navbar-dropdown { width: 280px !important; position: absolute !important; left: initial !important; } } @media only screen and (max-device-width: 1024px) and (orientation: portrait) { .mobile-navbar .navbar-item.is-notification { display: flex !important; } .mobile-navbar { display: flex !important; } .mobile-navbar > .container { margin: 0; max-width: 100%; } .mobile-navbar .navbar-brand { align-items: center; justify-content: space-between; height: 60px; width: 100%; margin-left: 0 !important; } .mobile-navbar .navbar-brand .navbar-burger { display: flex !important; } } /*! _dark.scss | Vuero | Css ninja 2020-2021 */ /* 1. Layout Dark mode */ /* ========================================================================== 1. Layout Dark mode ========================================================================== */ .is-dark { background: var(--dark-sidebar-light-10); } .is-dark.is-chat-side-collapsed { background: var(--dark-sidebar-light-5) !important; } .is-dark.opened { background: var(--dark-sidebar-light-5); } .is-dark .pageloader { background: var(--dark-sidebar-light-10); } .is-dark .infraloader { background: var(--dark-sidebar-light-15) !important; } .is-dark .page-title h1 { color: var(--primary-grey-light-3); } .is-dark .menu-toggle i { background: var(--primary); color: var(--primary--color-invert); } .is-dark .view-wrapper, .is-dark .minimal-wrapper { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-10); } .is-dark .zoom-overlay { background: var(--dark-sidebar-light-10); border-color: var(--dark-sidebar-light-10); } /* ========================================================================== extra style tweaks and custom overrides ========================================================================== */ /* ========================================================================== 1. Better scrollbar ========================================================================== */ html, .dropdown-menu, div { scroll-behavior: smooth; } html::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar, div::-webkit-scrollbar { width: 5px; } html::-webkit-scrollbar-track, .dropdown-menu::-webkit-scrollbar-track, div::-webkit-scrollbar-track { background: #b3b1b1; border-radius: 5px; } html::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb { background: #888888; border-radius: 5px; } html::-webkit-scrollbar-thumb:hover, .dropdown-menu::-webkit-scrollbar-thumb:hover, div::-webkit-scrollbar-thumb:hover { background: #646464; border-radius: 5px; } html::-webkit-scrollbar-thumb:active, .dropdown-menu::-webkit-scrollbar-thumb:active, div::-webkit-scrollbar-thumb:active { background: #444444; border-radius: 5px; } /* ========================================================================== 2. Minor tweaks ========================================================================== */ p.help.text-danger { color: var(--danger) !important; } .tags.has-addons .tag.is-delete { cursor: pointer !important; } .is-dark .button.is-primary.is-outlined.is-loading::after { border-bottom-color: white !important; border-left-color: white !important; } a { color: var(--dark-text); font-weight: 500; } .multiselect .multiselect-tags .multiselect-tag { background-color: var(--primary); color: var(--primary--color-invert); } /* ========================================================================== 3. Additional classes ========================================================================== */ .has-border-color-primary { border-color: var(--primary) !important; }export default "\n"/* ========================================================================== 15. footer ========================================================================== */ .vuero-footer[data-v-a602f346] { padding-bottom: 0 !important; padding-top: 4rem !important; background: var(--body-color); } .vuero-footer .footer-head[data-v-a602f346] { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--fade-grey-dark-4); } .vuero-footer .footer-head .head-text h3[data-v-a602f346] { font-family: var(--font); font-size: 1.8rem; color: var(--dark-text); } .vuero-footer .footer-head .head-text p[data-v-a602f346] { font-size: 1.1rem; color: var(--light-text); } .vuero-footer .footer-head .head-action .buttons .button.action-button[data-v-a602f346] { height: 36px; min-width: 140px; } .vuero-footer .footer-head .head-action .buttons .button.chat-button[data-v-a602f346] { background: transparent; border: none; outline: none; box-shadow: none; color: var(--primary); font-weight: 500; } .vuero-footer .footer-body[data-v-a602f346] { padding-top: 3rem; } .vuero-footer .footer-body .footer-column[data-v-a602f346] { padding-top: 20px; } .vuero-footer .footer-body .footer-column .column-header[data-v-a602f346] { font-family: var(--font-alt); text-transform: uppercase; color: var(--dark-text); font-size: 1rem; font-weight: 700; margin: 10px 0; } .vuero-footer .footer-body .footer-column .column-item[data-v-a602f346] { padding-bottom: 10px; } .vuero-footer .footer-body .footer-column .column-item a[data-v-a602f346] { font-family: var(--font); color: var(--light-text); } .vuero-footer .footer-body .footer-column .column-item a[data-v-a602f346]:hover { color: var(--primary); } .vuero-footer .footer-body .social-links[data-v-a602f346] { display: flex; justify-content: flex-start; align-items: center; } .vuero-footer .footer-body .social-links a[data-v-a602f346] { color: var(--light-text); margin: 0 5px; } .vuero-footer .footer-body .social-links a[data-v-a602f346]:hover { color: var(--primary); } .vuero-footer .footer-body .footer-description[data-v-a602f346] { color: var(--light-text); } .vuero-footer .footer-body .moto[data-v-a602f346] { color: var(--light-text); } .vuero-footer .footer-body .small-footer-logo[data-v-a602f346] { height: 36px; } .vuero-footer .footer-copyright[data-v-a602f346] { font-family: var(--font); color: var(--light-text); padding: 4rem 0 2rem 0; } .vuero-footer .footer-copyright a[data-v-a602f346] { color: var(--light-text); } .vuero-footer .footer-copyright a[data-v-a602f346]:hover { color: var(--primary); } /* ========================================================================== 16. Footer Dark mode ========================================================================== */ .is-dark .vuero-footer[data-v-a602f346] { background: var(--landing-xxx-light-8); } .is-dark .vuero-footer .footer-head[data-v-a602f346] { border-color: var(--landing-xxx-light-18); } .is-dark .vuero-footer .footer-head .head-text h3[data-v-a602f346] { color: var(--dark-dark-text); } .is-dark .vuero-footer .footer-head .head-text p[data-v-a602f346] { font-size: 1.1rem; color: var(--light-text); } .is-dark .vuero-footer .footer-head .head-action .buttons .button.action-button[data-v-a602f346] { background: var(--primary); border-color: var(--primary); } .is-dark .vuero-footer .footer-head .head-action .buttons .button.chat-button[data-v-a602f346] { color: var(--primary); background: none !important; } .is-dark .vuero-footer .footer-body .footer-column .column-header[data-v-a602f346] { color: var(--dark-dark-text); } .is-dark .vuero-footer .footer-body .footer-column .column-item a[data-v-a602f346]:hover { color: var(--primary); } .is-dark .vuero-footer .footer-body .social-links a[data-v-a602f346]:hover { color: var(--primary); } .is-dark .vuero-footer .footer-copyright a[data-v-a602f346]:hover { color: var(--primary); }@charset "UTF-8"; /*! _landing.scss | vuero | Css ninja 2020-2021 */ /* 1. Landing page defaults 2. Navigation 3. Navigation Dark mode 4. Hero 5. Hero Dark mode 6. Stacks 7. Boxed Features 8. Boxed Features Dark mode 9. Sections 10. Sections Dark mode 11. CTA block 12. CTA block Dark mode 13. Demos 14. Demos Dark mode 15. Footer 16. Footer Dark mode 17. Night Switch 18. CTA Section 19. CTA Section Dark mode 20. Media Queries */ /* ========================================================================== 1. Defaults ========================================================================== */ .landing-page-wrapper { overflow-x: hidden; } .landing-page-wrapper .container { max-width: 1140px; } .landing-page-wrapper .light-image-l { display: inline-block !important; } .landing-page-wrapper .dark-image-l { display: none !important; } .landing-page-wrapper .light-image-block-l { display: block !important; } .landing-page-wrapper .dark-image-block-l { display: none !important; } .is-dark .landing-page-wrapper { background: var(--landing-xxx); } .is-dark .landing-page-wrapper .light-image-l { display: none !important; } .is-dark .landing-page-wrapper .dark-image-l { display: inline-block !important; } .is-dark .landing-page-wrapper .light-image-block-l { display: none !important; } .is-dark .landing-page-wrapper .dark-image-block-l { display: block !important; } .is-dark .landing-page-wrapper #backtotop.visible a { background: var(--primary) !important; color: var(--smoke-white) !important; } /* ========================================================================== 2. Navigation ========================================================================== */ .landing-page-wrapper .hero .navbar { top: 15px; height: 65px; max-width: 1140px; margin: 0 auto; background-color: var(--white); box-shadow: var(--light-box-shadow); border: 1px solid var(--fade-grey); border-radius: 500px; font-family: var(--font); z-index: 99; transition: all 0.3s; } .landing-page-wrapper .hero .navbar.is-docked:not(.is-solid) { top: 0; border-color: transparent; height: 110px; box-shadow: none; background: transparent; } .landing-page-wrapper .hero .navbar.is-docked:not(.is-solid) .navbar-brand .brand-icon { height: 64px; width: 64px; background: var(--white); border-color: var(--fade-grey-dark-3); } .landing-page-wrapper .hero .navbar.is-docked:not(.is-solid) .navbar-menu .navbar-item.is-theme-toggle { opacity: 0; pointer-events: none; transition: all 0.3s; } .landing-page-wrapper .hero .navbar.is-docked.is-solid { height: 65px !important; } .landing-page-wrapper .hero .navbar.is-solid { background: var(--white) !important; border-radius: 10px 10px 0 0; } .landing-page-wrapper .hero .navbar .navbar-brand img { position: relative; display: block; width: 100%; max-width: 34px; max-height: 34px; margin-left: 10px; } .landing-page-wrapper .hero .navbar .navbar-brand .brand-icon { height: 50px; width: 50px; border-radius: var(--radius-rounded); display: flex; justify-content: center; align-items: center; border: 1px solid transparent; transition: all 0.3s; } .landing-page-wrapper .hero .navbar .navbar-brand .brand-icon img { position: relative; top: -2px; margin-left: 0; } .landing-page-wrapper .hero .navbar .navbar-burger span { height: 2px; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item.is-theme-toggle { opacity: 1; pointer-events: all; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link { position: relative; font-family: var(--font-alt); font-size: 0.9rem; color: var(--light-text); text-transform: capitalize; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link::before { content: ""; position: absolute; top: -4px; left: 2px; width: 50%; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; height: 3px; border-radius: 50px; background: var(--primary); -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link:hover, .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link.is-active { color: var(--dark-text); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link:hover::before, .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link.is-active::before { -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .nav-link.active::before { background: var(--primary); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle { width: 54px; display: block; position: relative; cursor: pointer; font-size: 22px; user-select: none; transform: scale(0.9); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input { position: absolute; opacity: 0; cursor: pointer; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input:checked ~ .toggler { border-color: var(--primary); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input:checked ~ .toggler .dark, .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input:checked ~ .toggler .light { transform: translateX(100%) rotate(360deg); } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input:checked ~ .toggler .dark { opacity: 1 !important; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle input:checked ~ .toggler .light { opacity: 0 !important; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler { position: relative; display: block; height: 31px; width: 53px; border: 2px solid var(--primary); border-radius: 100px; transition: all 0.3s; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .dark, .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .light { position: absolute; top: 2px; left: 2px; height: 22px; width: 22px; border-radius: var(--radius-rounded); background: black; display: flex; justify-content: center; align-items: center; transform: translateX(0) rotate(0); transition: all 0.3s ease; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .dark svg, .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .light svg { color: var(--white) !important; height: 14px !important; width: 14px !important; opacity: 1 !important; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .light { background: var(--primary); border-color: var(--primary); opacity: 1; z-index: 1; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .dark { background: var(--primary); border-color: var(--primary); opacity: 0; z-index: 0; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .theme-toggle .toggler .dark svg { color: var(--white) !important; } .landing-page-wrapper .hero .navbar .navbar-menu .navbar-item .button { height: 44px; min-width: 110px; } /* ========================================================================== 3. Navigation Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .navbar:not(.is-docked) { background: var(--landing-xxx-light-8); border-color: var(--landing-xxx-light-14); } .is-dark .landing-page-wrapper .navbar.is-docked .navbar-brand .brand-icon { background: var(--landing-yyy-light-8) !important; border-color: var(--landing-yyy-light-18) !important; } .is-dark .landing-page-wrapper .navbar.is-solid { background: var(--landing-xxx-light-8) !important; border-color: var(--landing-xxx-light-14) !important; } .is-dark .landing-page-wrapper .navbar.is-solid .navbar-brand .brand-icon { border-color: transparent; background-color: transparent; } .is-dark .landing-page-wrapper .navbar.is-solid .navbar-menu.is-active { background: var(--landing-xxx-light-12); border-color: var(--landing-xxx-light-14); } .is-dark .landing-page-wrapper .navbar .navbar-burger span { background: var(--smoke-white); } .is-dark .landing-page-wrapper .navbar .navbar-item .nav-link:hover, .is-dark .landing-page-wrapper .navbar .navbar-item .nav-link.is-active { color: var(--white) !important; } .is-dark .landing-page-wrapper .navbar .navbar-item .nav-link::before { background: var(--primary); } .is-dark .landing-page-wrapper .navbar .navbar-item .button.is-primary { background: var(--primary); border-color: var(--primary); } .is-dark .landing-page-wrapper .navbar .navbar-item .button.is-primary.is-raised:hover { box-shadow: var(--primary-box-shadow); } /* ========================================================================== 4. Hero ========================================================================== */ @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .landing-page-wrapper #demo-canvas { position: absolute; bottom: 20%; width: 100%; height: 100%; z-index: 0; } .landing-page-wrapper .hero.rounded-hero { position: relative; z-index: 10; } .landing-page-wrapper .hero.rounded-hero.is-active .absolute-header { transform: translateY(0); } .landing-page-wrapper .hero.rounded-hero.is-active .absolute-header .header-inner .states { opacity: 1; transform: translateY(-50%) scale(1); } .landing-page-wrapper .hero.rounded-hero.is-active .hero-body .hero-mockup { transform: translateY(0); pointer-events: all; } .landing-page-wrapper .hero.rounded-hero .hero-body { position: relative; z-index: 1; } .landing-page-wrapper .hero.rounded-hero .hero-body .switch-wrapper { margin: 80px auto 0 auto; } .landing-page-wrapper .hero.rounded-hero .hero-body .title { color: var(--dark-text); } .landing-page-wrapper .hero.rounded-hero .hero-body .title span { color: var(--primary); } .landing-page-wrapper .hero.rounded-hero .hero-body .subtitle { color: var(--light-text); margin-bottom: 2rem; } .landing-page-wrapper .hero.rounded-hero .hero-body .tag { position: relative; top: -2px; left: 2px; line-height: 2; font-weight: 500; max-height: 20px; } .landing-page-wrapper .hero.rounded-hero .hero-body .hero-mockup { display: block; max-width: 740px; margin: 0 auto; transform: translateY(10px); border-radius: 12px; box-shadow: var(--light-box-shadow); pointer-events: none; transition: all 0.4s; transition-delay: 0.3s; } .landing-page-wrapper .hero.rounded-hero .hero-body .buttons { display: flex; justify-content: center; } .landing-page-wrapper .is-hero-title { z-index: 2; } .landing-page-wrapper .is-hero-title h1, .landing-page-wrapper .is-hero-title h2 { color: var(--white); } .landing-page-wrapper .absolute-header { position: absolute; top: 0; left: 0; width: 100%; height: 580px; background: var(--widget-grey-dark-4); transform: translateY(-100%); transition: all 0.3s; } .landing-page-wrapper .absolute-header .header-inner { position: relative; height: 100%; width: 100%; } .landing-page-wrapper .absolute-header .header-inner .cut-circle { display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; } /* ========================================================================== 5. Hero Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .hero .absolute-header { background-color: var(--landing-yyy); } .is-dark .landing-page-wrapper .hero .hero-body .title { color: var(--smoke-white); } .is-dark .landing-page-wrapper .hero .hero-body .title span { color: var(--primary); } .is-dark .landing-page-wrapper .hero .hero-body .tag { background: var(--primary) !important; } /* ========================================================================== 6. Stacks ========================================================================== */ .stacks { display: flex; justify-content: center; align-items: center; max-width: 540px; margin: 0 auto; padding: 20px 0 20px 0; } .stacks .stack { height: 54px; width: 54px; min-width: 54px; border-radius: var(--radius-rounded); background: var(--white); border: 1px solid var(--fade-grey); box-shadow: var(--light-box-shadow); display: flex; align-items: center; justify-content: center; margin: 0 6px; } .stacks .stack img { display: block; height: 40px; width: 40px; border-radius: var(--radius-rounded); } /* ========================================================================== 7. Boxed Features ========================================================================== */ .boxed-features.is-flat .flex-card { border: none !important; background: none !important; } .boxed-features.is-flat .flex-card .flex-cell { border: none !important; } .boxed-features .flex-card { flex: 1; display: inline-block; width: 100%; padding: 20px; background-color: var(--white); border-radius: 16px; border: 1px solid var(--fade-grey-dark-3); transition: all 0.3s; padding: 30px; display: flex; flex-wrap: wrap; } .boxed-features .flex-card.has-margin-bottom { margin-bottom: 1.5rem; } .boxed-features .flex-card.is-flat { box-shadow: none; } .boxed-features .flex-card.is-raised { box-shadow: var(--light-box-shadow); } .boxed-features .flex-card.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary--color-invert); } .boxed-features .flex-card.is-primary .title, .boxed-features .flex-card.is-primary .subtitle, .boxed-features .flex-card.is-primary h1, .boxed-features .flex-card.is-primary h2, .boxed-features .flex-card.is-primary h3, .boxed-features .flex-card.is-primary h4, .boxed-features .flex-card.is-primary p { color: var(--smoke-white) !important; } .boxed-features .flex-card.is-secondary { background: var(--secondary) !important; border-color: var(--secondary) !important; } .boxed-features .flex-card.is-secondary .title, .boxed-features .flex-card.is-secondary .subtitle, .boxed-features .flex-card.is-secondary h1, .boxed-features .flex-card.is-secondary h2, .boxed-features .flex-card.is-secondary h3, .boxed-features .flex-card.is-secondary h4, .boxed-features .flex-card.is-secondary p { color: var(--smoke-white) !important; } .boxed-features .flex-card.is-info { background: var(--info) !important; border-color: var(--info) !important; } .boxed-features .flex-card.is-info .title, .boxed-features .flex-card.is-info .subtitle, .boxed-features .flex-card.is-info h1, .boxed-features .flex-card.is-info h2, .boxed-features .flex-card.is-info h3, .boxed-features .flex-card.is-info h4, .boxed-features .flex-card.is-info p { color: var(--smoke-white) !important; } .boxed-features .flex-card.is-success { background: var(--success) !important; border-color: var(--success) !important; } .boxed-features .flex-card.is-success .title, .boxed-features .flex-card.is-success .subtitle, .boxed-features .flex-card.is-success h1, .boxed-features .flex-card.is-success h2, .boxed-features .flex-card.is-success h3, .boxed-features .flex-card.is-success h4, .boxed-features .flex-card.is-success p { color: var(--smoke-white) !important; } .boxed-features .flex-card.is-warning { background: var(--warning) !important; border-color: var(--warning) !important; } .boxed-features .flex-card.is-warning .title, .boxed-features .flex-card.is-warning .subtitle, .boxed-features .flex-card.is-warning h1, .boxed-features .flex-card.is-warning h2, .boxed-features .flex-card.is-warning h3, .boxed-features .flex-card.is-warning h4, .boxed-features .flex-card.is-warning p { color: var(--smoke-white) !important; } .boxed-features .flex-card.is-danger { background: var(--danger) !important; border-color: var(--danger) !important; } .boxed-features .flex-card.is-danger .title, .boxed-features .flex-card.is-danger .subtitle, .boxed-features .flex-card.is-danger h1, .boxed-features .flex-card.is-danger h2, .boxed-features .flex-card.is-danger h3, .boxed-features .flex-card.is-danger h4, .boxed-features .flex-card.is-danger p { color: var(--smoke-white) !important; } .boxed-features .flex-card .card-head { display: flex; align-items: center; justify-content: space-between; } .boxed-features .flex-card .card-head .left, .boxed-features .flex-card .card-head .right { display: flex; align-items: center; } .boxed-features .flex-card .card-head .left .title { font-size: 1.2rem; font-weight: 500; } .boxed-features .flex-card .card-head .right { justify-content: flex-end; } .boxed-features .flex-card .card-inner { padding-top: 1.75rem; } .boxed-features .flex-card .flex-cell { width: 25%; border-right: 1px solid var(--fade-grey-dark-3); text-align: center; padding: 24px 16px; } .boxed-features .flex-card .flex-cell.is-bordered { border-bottom: 1px solid var(--fade-grey-dark-3); } .boxed-features .flex-card .flex-cell.no-border-edge { border-right: none; } .boxed-features .flex-card .flex-cell i { font-size: 2.2rem; color: var(--primary); margin-bottom: 6px; } .boxed-features .flex-card .flex-cell img { display: block; width: 100%; max-width: 64px; margin: 0 auto 6px auto; } .boxed-features .flex-card .flex-cell h3 { font-family: var(--font-alt); font-weight: 600; font-size: 0.95rem; color: var(--dark-text); } .boxed-features .flex-card .flex-cell p { font-size: 0.95rem; color: var(--light-text); max-width: 200px; margin: 0 auto; } .is-dark .boxed-features .flex-card { background: var(--dark-sidebar-light-6); border-color: var(--dark-sidebar-light-12); } .is-dark .boxed-features .flex-card .v-avatar img { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .boxed-features .flex-card .avatar-stack .v-avatar { border-color: var(--dark-sidebar-light-6) !important; } .is-dark .boxed-features .flex-card .avatar-stack .v-avatar .avatar.is-more .inner { border-color: var(--dark-sidebar-light-6) !important; } /* ========================================================================== 8. Boxed Features Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .stacks .stack { background: var(--landing-yyy-light-8); border-color: var(--landing-yyy-light-18); } .is-dark .landing-page-wrapper .boxed-features .flex-card { background: var(--landing-yyy-dark-6); border-color: var(--landing-yyy-light-2); } .is-dark .landing-page-wrapper .boxed-features .flex-card .flex-cell { border-color: var(--landing-yyy-light-4); } .is-dark .landing-page-wrapper .boxed-features .flex-card .flex-cell i { color: var(--primary); } .is-dark .landing-page-wrapper .boxed-features .flex-card .flex-cell h3 { color: var(--dark-dark-text); } /* ========================================================================== 9. Sections ========================================================================== */ .section { position: relative; } .section.section-focus { background: var(--widget-grey-dark-1); } .section .section-title { padding: 40px 0; } .section .section-title h2 { font-family: var(--font-alt); margin-bottom: 6px; font-weight: 300; } .section .section-title h4 { font-family: var(--font); color: var(--light-text); font-size: 1.4rem; font-weight: 300; } .section .section-feature-description { font-size: 1.2rem; } .section .side-feature h2 { font-family: var(--font); font-weight: 300; } /* ========================================================================== 10. Sections Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .section.section-focus { background: var(--landing-xxx-light-2); } .is-dark .landing-page-wrapper .section .section-title h2 { color: var(--dark-dark-text); } .is-dark .landing-page-wrapper .section .side-feature h2, .is-dark .landing-page-wrapper .section .side-feature h3 { color: var(--dark-dark-text); } /* ========================================================================== 11. CTA block ========================================================================== */ .cta-block { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-around; border-bottom: 1px solid var(--fade-grey-dark-4); margin: 40px 0; } .cta-block.no-border { padding-bottom: 2rem; border-bottom: none; } .cta-block.is-box { padding: 3rem 2rem; background: var(--white); border-radius: 8px; box-shadow: var(--light-box-shadow); border: 1px solid var(--fade-grey); justify-content: space-between; } .cta-block .head-text h3 { font-family: var(--font-alt); font-size: 1.8rem; color: var(--dark-text); } .cta-block .head-text p { font-family: var(--font); font-size: 1.1rem; color: var(--light-text); } .cta-block .head-action .buttons .button.action-button { height: 36px; min-width: 140px; } .cta-block .head-action .buttons .button.chat-button { background: transparent; border: none; outline: none; box-shadow: none; color: var(--primary); font-weight: 500; } /* ========================================================================== 12. CTA block Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .cta-block { border-color: var(--landing-yyy-light-4); } .is-dark .landing-page-wrapper .cta-block .head-text h3 { color: var(--dark-dark-text); } .is-dark .landing-page-wrapper .cta-block .head-action .buttons .button.action-button { background: var(--primary); border-color: var(--primary); } .is-dark .landing-page-wrapper .cta-block .head-action .buttons .button.chat-button { color: var(--primary); background: none !important; } /* ========================================================================== 13. Demos ========================================================================== */ .vuero-demos .demo-section { margin-bottom: 100px; } .vuero-demos .demo-section .demo-section-title { display: flex; align-items: center; margin-bottom: 30px; } .vuero-demos .demo-section .demo-section-title img { display: block; width: 100%; max-width: 100px; } .vuero-demos .demo-section .demo-section-title .title-meta { margin-left: 12px; line-height: 1.2; } .vuero-demos .demo-section .demo-section-title .title-meta h3 { font-family: var(--font-alt); font-weight: 500; font-size: 1.3rem; color: var(--dark-text); } .vuero-demos .demo-section .demo-section-title .title-meta p { font-family: var(--font); font-size: 1.1rem; color: var(--light-text); } .vuero-demo-wrapper { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--fade-grey-dark-5); min-height: 205px; } .vuero-demo-wrapper:hover .circle-overlay { transform: scale(35); } .vuero-demo-wrapper:hover .demo-title { opacity: 1; transform: translateY(0); transition-delay: 0 !important; } .vuero-demo-wrapper:hover .demo-link { color: var(--white); opacity: 1; transform: translateY(0); transition-delay: 0 !important; } .vuero-demo-wrapper::after { position: absolute !important; top: 40%; left: 42%; height: 3.5rem; width: 3.5rem; transform: translate(-50%, -50%); z-index: 4; } .vuero-demo-wrapper.loaded::after { display: none !important; } .vuero-demo-wrapper img { border-radius: 10px; max-width: 100%; width: 100%; } .vuero-demo-wrapper .new-tag { position: absolute; bottom: 10px; right: 10px; background: red; color: var(--white); font-family: var(--font); padding: 6px 16px; border-radius: 8px; text-transform: uppercase; font-size: 0.8rem; z-index: 3; } .vuero-demo-wrapper .circle-overlay { position: absolute; top: -60px; left: -60px; width: 60px; height: 60px; border-radius: var(--radius-rounded); background: var(--primary); transform: scale(1); transition: all 0.5s; z-index: 1; } .vuero-demo-wrapper .demo-info { position: absolute; margin: 0 auto; top: 26%; left: 0; right: 0; z-index: 2; color: var(--white); display: flex; justify-content: center; align-items: center; } .vuero-demo-wrapper .demo-title { color: var(--white); font-family: var(--font); font-size: 1.5rem; font-weight: 600; opacity: 0; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--primary-light-20); transform: translateY(20px); transition: all 0.3s; transition-delay: 0.1s; } .vuero-demo-wrapper .demo-title span { display: block; } .vuero-demo-wrapper .demo-title span:first-child { text-transform: uppercase; font-size: 0.75rem; } .vuero-demo-wrapper .demo-title span:nth-child(2) { font-weight: 300; } .vuero-demo-wrapper .demo-link { opacity: 0; transform: translateY(20px); transition: all 0.3s; transition-delay: 0.2s; } .vuero-demo-wrapper .demo-link a { font-family: var(--font); color: var(--white); font-size: 1rem; margin-left: 8px; } .vuero-demo-wrapper .demo-link a i { position: relative; top: 1px; opacity: 0; transform: translateX(0); transition: all 0.3s ease-out; } .vuero-demo-wrapper .demo-link a:hover i { opacity: 1; transform: translateX(5px); } .component-features .media-flex .left-icon { margin-right: 10px; } .component-features .media-flex .left-icon i { color: var(--primary); font-size: 2.6rem; } .component-features .media-flex .flex-meta h4 { font-family: var(--font-alt); font-size: 1.2rem; font-weight: 500; margin-bottom: 4px; } .component-features .media-flex .flex-meta p { font-family: var(--font); line-height: 1.4; } .component-box { display: block; text-align: center; background: var(--white); border: 1px solid var(--fade-grey-dark-3); padding: 20px; border-radius: 8px; margin-bottom: 0; transition: all 0.3s; cursor: pointer; } .component-box:hover { transform: translateY(-5px); box-shadow: var(--light-box-shadow); border-color: var(--primary); } .component-box:hover .component img { filter: grayscale(0); opacity: 1; } .component-box:hover .component-title { color: var(--dark-text); } .component-box .component img { display: block; filter: grayscale(1); opacity: 0.6; max-height: 80px; transition: all 0.3s; } .component-box .component-title { font-family: var(--font-alt); font-size: 1rem; padding-top: 6px; color: var(--light-text); transition: color 0.3s; } /* ========================================================================== 14. Demos Dark mode ========================================================================== */ .is-dark .landing-page-wrapper .vuero-demos .demo-section .demo-section-title .title-meta h3 { color: var(--dark-dark-text); } .is-dark .landing-page-wrapper .vuero-demos .vuero-demo-wrapper { border-color: var(--dark-sidebar-light-12); } .is-dark .landing-page-wrapper .vuero-demos .vuero-demo-wrapper .circle-overlay { background: var(--primary); } .is-dark .landing-page-wrapper .vuero-demos .vuero-demo-wrapper .demo-title { border-color: var(--primary-light-10); } .is-dark .landing-page-wrapper .component-features .media-flex .left-icon i { color: var(--primary); } .is-dark .landing-page-wrapper .component-features .media-flex .flex-meta h4 { color: var(--dark-dark-text); } .is-dark .landing-page-wrapper .button.is-huge { background: var(--primary); border-color: var(--primary); } .is-dark .landing-page-wrapper .vertical-tabs-wrapper .tabs ul li.is-active a { color: var(--primary); border-color: var(--primary); } .is-dark .landing-page-wrapper .vertical-tabs-wrapper .tabs ul li a { border-color: var(--landing-xxx-light-18); } .is-dark .landing-page-wrapper .component-box { background: var(--landing-yyy-dark-6); border-color: var(--landing-yyy-light-2); } .is-dark .landing-page-wrapper .component-box:hover { border-color: var(--primary); } .is-dark .landing-page-wrapper .component-box:hover .component-title { color: var(--primary); } /* ========================================================================== 17. Night Switch ========================================================================== */ .switch-wrapper { position: relative; width: 130px; } .switch-wrapper .night-toggle { display: block; text-align: center; user-select: none; transform: scale(0.6); } .switch-wrapper .night-toggle--checkbox { display: none; } .switch-wrapper .night-toggle--btn { display: block; margin: 0 auto; font-size: 1.4em; transition: all 350ms ease-in; } .switch-wrapper .night-toggle--btn:hover { cursor: pointer; } .switch-wrapper .night-toggle--btn, .switch-wrapper .night-toggle--btn::before, .switch-wrapper .night-toggle--btn::after, .switch-wrapper .night-toggle--checkbox, .switch-wrapper .night-toggle--checkbox::before, .switch-wrapper .night-toggle--checkbox::after, .switch-wrapper .night-toggle--feature, .switch-wrapper .night-toggle--feature::before, .switch-wrapper .night-toggle--feature::after { transition: all 250ms ease-in; } .switch-wrapper .night-toggle--btn::before, .switch-wrapper .night-toggle--btn::after, .switch-wrapper .night-toggle--checkbox::before, .switch-wrapper .night-toggle--checkbox::after, .switch-wrapper .night-toggle--feature::before, .switch-wrapper .night-toggle--feature::after { content: ""; display: block; } .switch-wrapper .night-toggle--daynight .night-toggle--btn, .switch-wrapper .night-toggle--like .night-toggle--btn { position: relative; height: 70px; width: 125px; border-radius: 70px; } .switch-wrapper .night-toggle--daynight .night-toggle--btn::before, .switch-wrapper .night-toggle--like .night-toggle--btn::before { position: absolute; top: 2px; left: 4px; width: 56px; height: 56px; border-radius: var(--radius-rounded); } .switch-wrapper .night-toggle--daynight .night-toggle--btn { border: 5px solid #1c1c1c; background-color: #3c4145; } .switch-wrapper .night-toggle--daynight .night-toggle--btn::before { background-color: var(--white); border: 5px solid #e3e3c7; } .switch-wrapper .night-toggle--daynight .night-toggle--btn::after { position: absolute; top: 62%; left: 39px; z-index: 10; width: 11.2px; height: 11.2px; opacity: 0; background-color: var(--white); border-radius: var(--radius-rounded); box-shadow: var(--white) 0 0, var(--white) 3px 0, var(--white) 6px 0, var(--white) 9px 0, var(--white) 11px 0, var(--white) 14px 0, var(--white) 16px 0, var(--white) 21px -1px 0 1px, var(--white) 16px -7px 0 -2px, var(--white) 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px; transition: opacity 100ms ease-in; } @keyframes starry_star { 50% { background-color: rgba(255, 255, 255, 0.1); box-shadow: var(--white) 30px -3px 0 0, var(--white) 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, var(--white) 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, var(--white) 5px 38px 0 1px; } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 100; transform: scale(1.1); } 55% { transform: scale(1.1); } 75% { transform: scale(0.9); } 100% { opacity: 100; transform: scale(1); } } .switch-wrapper .night-toggle--daynight .night-toggle--feature { display: block; position: absolute; top: 9px; left: 52.5%; z-index: 20; width: 4px; height: 4px; border-radius: var(--radius-rounded); background-color: var(--white); box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, var(--white) 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, var(--white) 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px; animation: starry_star 5s ease-in-out infinite; } .switch-wrapper .night-toggle--daynight .night-toggle--feature::before { position: absolute; top: -2px; left: -25px; width: 18px; height: 18px; background-color: var(--white); border-radius: var(--radius-rounded); border: 5px solid #e3e3c7; box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px; transform-origin: -6px 130%; } .switch-wrapper .night-toggle--daynight .night-toggle--checkbox:checked + .night-toggle--btn { background-color: #cdcdfa; border: 5px solid #babbf8; } .switch-wrapper .night-toggle--daynight .night-toggle--checkbox:checked + .night-toggle--btn::before { left: 55px; background-color: #ffdf6d; border: 5px solid #e1c348; } .switch-wrapper .night-toggle--daynight .night-toggle--checkbox:checked + .night-toggle--btn::after { opacity: 100; animation-name: bounceIn; animation-duration: 0.6s; animation-delay: 0.1s; animation-fill-mode: backwards; animation-timing-function: ease-in-out; } .switch-wrapper .night-toggle--daynight .night-toggle--checkbox:checked + .night-toggle--btn > .night-toggle--feature { opacity: 0; box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, var(--white) 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, var(--white) 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px; animation: none; } .switch-wrapper .night-toggle--daynight .night-toggle--checkbox:checked + .night-toggle--btn > .night-toggle--feature::before { left: 25px; transform: rotate(70deg); } /* ========================================================================== 18. CTA Section ========================================================================== */ .cta-wrapper .cta-title { text-align: center; } .cta-wrapper .cta-title h3 { font-family: var(--font-alt); font-weight: 300; font-size: 1.5rem; color: var(--light-text); margin-bottom: 20px; } .cta-wrapper .cta-title .custom-button { display: flex; align-items: center; margin: 10px auto; max-width: 200px; font-family: var(--font); border: 2px solid #d3f4ed; border-radius: 100px; background: #d3f4ed; box-shadow: var(--light-box-shadow); transition: all 0.3s; } .cta-wrapper .cta-title .custom-button img { display: block; height: 50px; width: 50px; } .cta-wrapper .cta-title .custom-button span { display: block; font-family: var(--font); font-weight: 600; font-size: 1rem; color: #46cbb1; margin-left: 22px; transition: color 0.3s; } /* ========================================================================== 19. Media Queries ========================================================================== */ @media (max-width: 767px) { .landing-page-wrapper .navbar { display: flex; align-items: center; width: calc(100% - 32px); margin: 0 16px; } .landing-page-wrapper .navbar.is-docked { height: 80px; } .landing-page-wrapper .navbar.is-docked .navbar-menu .navbar-item.is-theme-toggle { display: none !important; } .landing-page-wrapper .navbar.is-solid .navbar-menu { top: 73px !important; } .landing-page-wrapper .navbar.is-solid .navbar-menu .navbar-item.is-theme-toggle { display: block; } .landing-page-wrapper .navbar.is-solid { top: 10px; box-shadow: var(--light-box-shadow) !important; } .landing-page-wrapper .navbar.is-solid .navbar-brand .brand-icon { border-color: transparent; } .landing-page-wrapper .navbar.is-solid .navbar-menu { box-shadow: var(--light-box-shadow) !important; } .landing-page-wrapper .navbar .navbar-brand { width: 100%; } .landing-page-wrapper .navbar .navbar-brand .navbar-burger { border-radius: var(--radius-rounded); margin-right: 12px; } .landing-page-wrapper .navbar .navbar-menu { width: calc(100% - 32px); position: fixed; top: 78px; left: 0; right: 0; margin: 0 auto; border-radius: 0 0 10px 10px; padding: 30px; text-align: center; border: 1px solid var(--fade-grey); box-shadow: none; } .landing-page-wrapper .navbar .navbar-menu .navbar-item.is-theme-toggle .theme-toggle { margin: 0 auto; } .landing-page-wrapper .navbar .navbar-menu .navbar-item .button { width: 100%; } .landing-page-wrapper .rounded-hero { min-height: 75vh !important; max-height: 75vh; } .landing-page-wrapper .rounded-hero .absolute-header { height: 500px; } .landing-page-wrapper .rounded-hero .hero-body .hero-mockup { max-width: 340px !important; } .landing-page-wrapper .rounded-hero .hero-body h1 { font-size: 3.2rem !important; } .landing-page-wrapper .boxed-features .flex-card .flex-cell { width: 100%; border-right: none; border-bottom: 1px solid var(--fade-grey-dark-3); } .landing-page-wrapper .boxed-features .flex-card .flex-cell:last-child { border-bottom: none; } .landing-page-wrapper .cta-block { flex-direction: column; text-align: center; } .landing-page-wrapper .cta-block .head-text { padding-bottom: 20px; } .vuero-demo-wrapper { min-height: 184px; } .side-feature { margin-bottom: 60px !important; } .vuero-footer .footer-head { flex-direction: column; text-align: center; } .vuero-footer .footer-head .head-text { padding-bottom: 20px; } .vuero-footer .footer-body { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .landing-page-wrapper .navbar { display: flex; align-items: center; width: calc(100% - 32px); margin: 0 16px; } .landing-page-wrapper .navbar.is-docked { height: 80px; } .landing-page-wrapper .navbar.is-docked .navbar-menu .navbar-item.is-theme-toggle { display: none !important; } .landing-page-wrapper .navbar:not(.is-docked).is-solid .navbar-menu { top: 73px !important; } .landing-page-wrapper .navbar:not(.is-docked) .navbar-menu .navbar-item.is-theme-toggle { display: block; } .landing-page-wrapper .navbar.is-solid { top: 10px; box-shadow: var(--light-box-shadow) !important; } .landing-page-wrapper .navbar.is-solid .navbar-brand .brand-icon { border-color: transparent; } .landing-page-wrapper .navbar.is-solid .navbar-menu { box-shadow: var(--light-box-shadow) !important; } .landing-page-wrapper .navbar .navbar-brand { width: 100%; } .landing-page-wrapper .navbar .navbar-brand .navbar-burger { height: 40px; width: 40px; border-radius: var(--radius-rounded); margin-right: 12px; } .landing-page-wrapper .navbar .navbar-menu { width: calc(100% - 32px); position: fixed; top: 78px; left: 0; right: 0; margin: 0 auto; border-radius: 0 0 10px 10px; padding: 30px; text-align: center; border: 1px solid var(--fade-grey); box-shadow: none; } .landing-page-wrapper .navbar .navbar-menu .navbar-item.is-theme-toggle .theme-toggle { margin: 0 auto; } .landing-page-wrapper .navbar .navbar-menu .navbar-item .button { width: 100%; } .landing-page-wrapper .main-hero .is-hero-title { text-align: center !important; } .landing-page-wrapper .main-hero .is-hero-title .buttons { justify-content: center; } .landing-page-wrapper .rounded-hero { min-height: 75vh !important; } .landing-page-wrapper .rounded-hero .hero-body .hero-mockup { max-width: 610px !important; } .landing-page-wrapper .vuero-demos .demo-section .columns { display: flex; } .landing-page-wrapper .vuero-demos .demo-section .columns .column.is-4 { min-width: 50% !important; } .landing-page-wrapper .side-feature { display: flex; } .landing-page-wrapper .component-features .media-flex { flex-direction: column; text-align: center; } .landing-page-wrapper .component-features .media-flex .left-icon, .landing-page-wrapper .component-features .media-flex .flex-meta { margin: 0; } .landing-page-wrapper .component-features .media-flex .left-icon { margin-bottom: 10px; } .landing-page-wrapper .vuero-components .tab-content .columns { display: flex; } .landing-page-wrapper .vuero-components .tab-content .columns .column.is-3 { min-width: 33.3% !important; } .vuero-footer .footer-head, .vuero-footer .footer-body { padding-left: 20px; padding-right: 20px; } .vuero-footer .footer-description { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .landing-page-wrapper .navbar { width: calc(100% - 40px); margin: 0 20px; } .vuero-demo-wrapper { min-height: 174px; } .vuero-footer .footer-head, .vuero-footer .footer-body { padding-left: 20px; padding-right: 20px; } } /*! _pages-marketing.scss | Vuero | Css ninja 2020-2021 */ /* ========================================================================== Marketing Layouts ========================================================================== */ /* 1. Marketing Landing 2. Centered Mockup section 3. Pricing 4. Icon box card 5. Dotted BG 6. Boxed CTA 7. Media Queries */ /* ========================================================================== 1. Marketing Landing ========================================================================== */ .marketing-hero { position: relative; } .marketing-hero.is-left .hero-body h1, .marketing-hero.is-right .hero-body h1 { max-width: 480px; } .marketing-hero.is-left .hero-body h3, .marketing-hero.is-right .hero-body h3 { max-width: 520px; } .marketing-hero.is-centered { background: var(--widget-grey); } .marketing-hero.is-centered .hero-body .columns { padding-top: 6rem; } .marketing-hero.is-centered .hero-body .title, .marketing-hero.is-centered .hero-body .subtitle, .marketing-hero.is-centered .hero-body .switch-wrapper { margin-left: auto; margin-right: auto; } .marketing-hero.is-centered .hero-body h1 { max-width: 880px; } .marketing-hero.is-centered .hero-body h3 { max-width: 520px; } .marketing-hero.is-centered .hero-body .hero-mockup { max-width: 640px; margin: 0 auto; } .marketing-hero.is-left, .marketing-hero.is-centered { background: var(--widget-grey); } .marketing-hero.is-left .hexagon, .marketing-hero.is-centered .hexagon { position: absolute; animation: rotating 15s infinite; animation-timing-function: linear; } .marketing-hero.is-left .hexagon.hexagon-1, .marketing-hero.is-centered .hexagon.hexagon-1 { top: -180px; left: -180px; height: 450px; width: 450px; transform: rotate(39deg); } .marketing-hero.is-left .hexagon.hexagon-2, .marketing-hero.is-centered .hexagon.hexagon-2 { bottom: 80px; right: 80px; height: 360px; width: 360px; transform: rotate(75deg); animation-delay: 2s; } .marketing-hero.is-left .hexagon.hexagon-3, .marketing-hero.is-centered .hexagon.hexagon-3 { bottom: 40px; left: 40px; height: 190px; width: 190px; transform: rotate(95deg); animation-delay: 0.5s; } .marketing-hero.is-left .hexagon.hexagon-4, .marketing-hero.is-centered .hexagon.hexagon-4 { top: -155px; left: 50%; height: 230px; width: 230px; transform: rotate(135deg); animation-delay: 1s; } .marketing-hero.is-right { background: var(--widget-grey); } .marketing-hero.is-right .hexagon { position: absolute; animation: rotating 15s infinite; animation-timing-function: linear; } .marketing-hero.is-right .hexagon.hexagon-1 { top: -180px; right: -180px; height: 450px; width: 450px; transform: rotate(39deg); } .marketing-hero.is-right .hexagon.hexagon-2 { bottom: 80px; left: 80px; height: 360px; width: 360px; transform: rotate(75deg); animation-delay: 2s; } .marketing-hero.is-right .hexagon.hexagon-3 { bottom: 40px; right: 40px; height: 190px; width: 190px; transform: rotate(95deg); animation-delay: 0.5s; } .marketing-hero.is-right .hexagon.hexagon-4 { top: -155px; left: 50%; height: 230px; width: 230px; transform: rotate(135deg); animation-delay: 1s; } .marketing-hero .hero-body .buttons .button { min-height: 44px; min-width: 140px; } .marketing-hero .hero-body .hero-mockup { box-shadow: var(--light-box-shadow); border: 1px solid var(--border); border-radius: 0.75rem; } .is-dark .marketing-hero.is-left, .is-dark .marketing-hero.is-right, .is-dark .marketing-hero.is-centered { background: var(--landing-xxx-dark-2); } .is-dark .marketing-hero.is-left .hexagon, .is-dark .marketing-hero.is-right .hexagon, .is-dark .marketing-hero.is-centered .hexagon { opacity: 0.3; } .is-dark .marketing-hero.is-left .hero-body .hero-mockup, .is-dark .marketing-hero.is-right .hero-body .hero-mockup, .is-dark .marketing-hero.is-centered .hero-body .hero-mockup { border-color: var(--landing-xxx-light-8); } .is-dark .marketing-hero.is-left .hero-body .buttons .button:not(.is-outlined), .is-dark .marketing-hero.is-right .hero-body .buttons .button:not(.is-outlined), .is-dark .marketing-hero.is-centered .hero-body .buttons .button:not(.is-outlined) { background: var(--primary) !important; border-color: var(--primary) !important; } .is-dark .marketing-hero.is-left .hero-body .buttons .button:not(.is-outlined):hover, .is-dark .marketing-hero.is-right .hero-body .buttons .button:not(.is-outlined):hover, .is-dark .marketing-hero.is-centered .hero-body .buttons .button:not(.is-outlined):hover { box-shadow: var(--primary-box-shadow) !important; } .is-dark .marketing-hero.is-left .hero-body .buttons .button.is-outlined, .is-dark .marketing-hero.is-right .hero-body .buttons .button.is-outlined, .is-dark .marketing-hero.is-centered .hero-body .buttons .button.is-outlined { color: var(--primary) !important; border-color: var(--primary) !important; } .is-dark .marketing-hero.is-left .hero-body .buttons .button.is-outlined:hover, .is-dark .marketing-hero.is-right .hero-body .buttons .button.is-outlined:hover, .is-dark .marketing-hero.is-centered .hero-body .buttons .button.is-outlined:hover { background: var(--primary) !important; color: var(--white) !important; box-shadow: var(--primary-box-shadow) !important; } /* ========================================================================== 2. Centered Mockup section ========================================================================== */ .centered-mockup-wrapper { margin: 2rem auto; max-width: 740px; } .centered-mockup-wrapper .mockup-container { position: relative; } .centered-mockup-wrapper .mockup-container .hexagon { position: absolute; animation: rotating 15s infinite; } .centered-mockup-wrapper .mockup-container .hexagon.hexagon-1 { top: -110px; left: -110px; height: 230px; width: 230px; transform: rotate(39deg); animation-delay: 2s; } .centered-mockup-wrapper .mockup-container .hexagon.hexagon-2 { bottom: 160px; right: -80px; height: 160px; width: 160px; transform: rotate(75deg); z-index: 2; animation-delay: 0.5s; } .centered-mockup-wrapper .mockup-container .hexagon.hexagon-3 { bottom: 60px; left: -180px; height: 100px; width: 100px; transform: rotate(125deg); z-index: 2; animation-delay: 1s; } .centered-mockup-wrapper img:not(.hexagon) { position: relative; border-radius: 0.75rem; z-index: 1; } .centered-mockup-wrapper img:not(.hexagon).light-image-l { box-shadow: var(--light-box-shadow); border: 1px solid var(--border); } .centered-mockup-wrapper img:not(.hexagon).dark-image-l { box-shadow: var(--light-box-shadow); border: 1px solid var(--dark-sidebar-light-12); } .is-dark .centered-mockup-wrapper .title { color: var(--white) !important; } .is-dark .video-section .title { color: var(--white) !important; } .is-dark .video-section .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid { border-color: var(--primary) !important; color: var(--primary) !important; } .is-dark .video-section .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid:hover { background: var(--primary) !important; } .is-dark .video-section .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid:hover svg { stroke: var(--white) !important; fill: var(--white) !important; } .is-dark .video-section .video-player-container.reversed-play .plyr--full-ui.plyr--video .plyr__control--overlaid svg { stroke: var(--primary) !important; } /* ========================================================================== 3. Pricing ========================================================================== */ .pricing-wrapper { font-family: var(--font); font-weight: 400; color: #9f9f9f; font-size: 15px; display: flex; justify-content: center; max-width: 1040px; margin: 0 auto; } .pricing-wrapper .pricing-plan { width: calc(33.3% - 1.5rem); height: auto; background: var(--white); border: 1px solid var(--border); border-radius: 0.65rem; display: inline-block; padding: 24px; text-align: center; position: relative; margin: 0 0.75rem; overflow: hidden; transition: box-shadow 0.3s; } .pricing-wrapper .pricing-plan:hover { box-shadow: var(--light-box-shadow); } .pricing-wrapper .pricing-plan.is-featured { border-color: var(--primary); } .pricing-wrapper .pricing-plan.is-featured::before { width: 0; height: 0; border-style: solid; border-width: 64px 64px 0 0; border-color: var(--primary) transparent transparent transparent; position: absolute; left: 0; top: 0; content: ""; } .pricing-wrapper .pricing-plan.is-featured::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: ""; color: var(--white); position: absolute; left: 11px; top: 11px; text-shadow: 0 0 2px var(--primary); font-size: 1rem; } .pricing-wrapper .pricing-plan .name { color: var(--dark-text); font-weight: 300; font-size: 2rem; margin-top: -5px; } .pricing-wrapper .pricing-plan img { max-width: 100px; margin: 0 auto; } .pricing-wrapper .pricing-plan .price { font-size: 1.8rem; margin: 0.75rem 0 1.5rem 0; font-weight: bold; } .pricing-wrapper .pricing-plan .price::after { content: " /per month"; font-size: 1rem; font-weight: normal; color: var(--light-text); } .pricing-wrapper .pricing-plan hr { background-color: var(--border); border: none; height: 1px; } .pricing-wrapper .pricing-plan .trial { font-size: 0.9rem; font-weight: 600; padding: 2px 21px 2px 21px; color: var(--primary); border: 1px solid var(--border); display: inline-block; border-radius: 15px; background-color: var(--white); } .pricing-wrapper .pricing-plan ul { list-style: none; padding: 0; text-align: left; margin-top: 29px; } .pricing-wrapper .pricing-plan li { margin-bottom: 15px; } .pricing-wrapper .pricing-plan li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: ""; font-size: 0.9rem; color: var(--success); margin-right: 6px; } .is-dark .pricing-wrapper .pricing-plan { border-color: var(--landing-xxx-light-12); background: var(--landing-xxx-light-6); } .is-dark .pricing-wrapper .pricing-plan.is-featured { border-color: var(--primary); } .is-dark .pricing-wrapper .pricing-plan.is-featured::before { border-color: var(--primary) transparent transparent transparent; } .is-dark .pricing-wrapper .pricing-plan .name { color: var(--dark-dark-text); } .is-dark .pricing-wrapper .pricing-plan .price { color: var(--white); } .is-dark .pricing-wrapper .pricing-plan .trial { color: var(--primary); border-color: var(--landing-xxx-light-12); background: var(--landing-xxx-light-2); } .is-dark .pricing-wrapper .pricing-plan hr { background: var(--landing-xxx-light-12); } .is-dark .pricing-wrapper .pricing-plan li { color: var(--light-text); } .is-dark .pricing-wrapper .pricing-plan li strong { color: var(--white); } /* ========================================================================== 4. Icon box card ========================================================================== */ .card-icon-box { border: 1px solid var(--border); border-radius: 0.65rem; box-shadow: none; transition: box-shadow 0.3s; } .card-icon-box:hover { box-shadow: var(--light-box-shadow); } .card-icon-box .v-icon { margin-bottom: 0.75rem; } .is-dark .card-icon-box { border-color: var(--landing-xxx-light-12); background: var(--landing-xxx-light-4); } .is-dark .card-icon-box .v-icon { background: transparent; border: 2px solid var(--landing-xxx-light-12); } .is-dark .card-icon-box .title { color: var(--white); } /* ========================================================================== 5. Dotted BG ========================================================================== */ .has-bg-dots { background-image: radial-gradient(circle, #f0f4ff 10%, transparent 15%), radial-gradient(circle, #f0f4ff 10%, transparent 15%); background-size: 50px 50px; background-position: 0 0, 0 0; } .is-dark .has-bg-dots { background-image: radial-gradient(circle, var(--landing-xxx-light-4) 10%, transparent 15%), radial-gradient(circle, var(--landing-xxx-light-4) 10%, transparent 15%); background-size: 50px 50px; background-position: 0 0, 0 0; } /* ========================================================================== 6. Boxed CTA ========================================================================== */ .boxed-cta { position: relative; display: flex; justify-content: center; align-items: center; min-height: 430px; max-width: 1040px; margin: 0 auto; background: var(--primary); border-radius: 1rem; padding: 3rem; box-shadow: var(--primary-box-shadow); overflow: hidden; margin-bottom: 5rem; } .boxed-cta .v-avatar { position: absolute; } .boxed-cta .v-avatar.v-avatar-1 { top: -7%; left: 4%; } .boxed-cta .v-avatar.v-avatar-2 { top: 5%; right: 5%; } .boxed-cta .v-avatar.v-avatar-3 { bottom: -9%; left: 5%; } .boxed-cta .v-avatar.v-avatar-4 { bottom: -9%; right: 5%; } .boxed-cta .v-avatar.v-avatar-5 { top: -7%; left: 50%; } .boxed-cta .v-avatar.v-avatar-6 { top: 40%; right: -3%; } .boxed-cta .v-avatar.v-avatar-7 { top: 30%; right: 12%; } .boxed-cta .v-avatar.v-avatar-8 { bottom: 30%; right: 16%; } .boxed-cta .v-avatar.v-avatar-9 { top: 9%; right: 21%; } .boxed-cta .v-avatar.v-avatar-10 { top: 40%; left: -3%; } .boxed-cta .v-avatar.v-avatar-11 { top: 30%; left: 12%; } .boxed-cta .v-avatar.v-avatar-12 { bottom: 17%; left: 16%; } .boxed-cta .v-avatar.v-avatar-13 { top: 9%; left: 21%; } .boxed-cta .v-avatar.v-avatar-14 { bottom: 20%; left: 1%; } .boxed-cta .v-avatar.v-avatar-15 { bottom: -7%; left: 39%; } .boxed-cta .v-avatar.v-avatar-16 { bottom: 12%; right: 30%; } .boxed-cta .v-avatar .avatar { border: 4px solid var(--primary-light-8); } .boxed-cta .boxed-cta-content { max-width: 440px; } .boxed-cta .boxed-cta-content .title, .boxed-cta .boxed-cta-content .subtitle { color: var(--white) !important; } .boxed-cta .boxed-cta-content .subtitle { opacity: 0.8; } .boxed-cta .boxed-cta-content .v-button { min-height: 44px; min-width: 190px; font-weight: 600; color: var(--primary) !important; background-color: var(--white) !important; border-color: var(--primary) !important; } .is-dark .boxed-cta { background: var(--primary); box-shadow: var(--primary-box-shadow); } .is-dark .boxed-cta .v-avatar .avatar { border-color: var(--primary-light-8); } .is-dark .boxed-cta .boxed-cta-content .v-button { color: var(--primary); } /* ========================================================================== 7. Media Queries ========================================================================== */ @media (max-width: 767px) { .marketing-hero.is-left, .marketing-hero.is-right, .marketing-hero.is-centered { text-align: center; } .marketing-hero.is-left .hexagon.hexagon-1, .marketing-hero.is-right .hexagon.hexagon-1, .marketing-hero.is-centered .hexagon.hexagon-1 { top: -110px; left: -80px; height: 230px; width: 230px; } .marketing-hero.is-left .hexagon.hexagon-2, .marketing-hero.is-right .hexagon.hexagon-2, .marketing-hero.is-centered .hexagon.hexagon-2 { bottom: 45px; right: -80px; height: 220px; width: 220px; } .marketing-hero.is-left .hexagon.hexagon-3, .marketing-hero.is-right .hexagon.hexagon-3, .marketing-hero.is-centered .hexagon.hexagon-3 { bottom: 50%; left: -110px; } .marketing-hero.is-left .hexagon.hexagon-4, .marketing-hero.is-right .hexagon.hexagon-4, .marketing-hero.is-centered .hexagon.hexagon-4 { top: -165px; left: 70%; height: 230px; width: 230px; } .marketing-hero .hero-body .title, .marketing-hero .hero-body .subtitle { margin-left: auto; margin-right: auto; } .marketing-hero .hero-body .title { font-size: 2.5rem; } .marketing-hero .hero-body .buttons { justify-content: center; margin-bottom: 2rem; } .marketing-hero .hero-body .switch-wrapper { margin: 0 auto; } .marketing-hero .hero-body .hero-mockup { max-width: 100% !important; margin: 0 auto; } .centered-mockup-wrapper .hexagon.hexagon-2 { bottom: 120px !important; right: -40px !important; height: 80px !important; width: 80px !important; } .pricing-wrapper { flex-wrap: wrap; } .pricing-wrapper .pricing-plan { width: calc(100% - 1.5rem); } .pricing-wrapper .pricing-plan:not(:last-child) { margin-bottom: 1.5rem; } .boxed-cta .v-avatar.v-avatar-12, .boxed-cta .v-avatar.v-avatar-9, .boxed-cta .v-avatar.v-avatar-8, .boxed-cta .v-avatar.v-avatar-11, .boxed-cta .v-avatar.v-avatar-4, .boxed-cta .v-avatar.v-avatar-6, .boxed-cta .v-avatar.v-avatar-1 { display: none; } .boxed-cta .v-avatar.v-avatar-7 { right: -6%; } .boxed-cta .v-avatar.v-avatar-13 { top: 3%; left: -4%; } .boxed-cta .v-avatar.v-avatar-14 { left: -13%; } .boxed-cta .v-avatar.v-avatar-15 { bottom: -4%; left: 48%; } .boxed-cta .v-avatar.v-avatar-16 { right: -7%; } .boxed-cta .boxed-cta-content .title { font-size: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .marketing-hero.is-centered { text-align: center; } .marketing-hero.is-centered .hexagon.hexagon-2 { bottom: 45px; right: -80px; } .marketing-hero.is-centered .hexagon.hexagon-3 { bottom: 50%; left: -110px; } .marketing-hero.is-left { text-align: center; } .marketing-hero.is-left .hexagon.hexagon-2 { bottom: 45px; right: -80px; } .marketing-hero.is-left .hexagon.hexagon-3 { bottom: 50%; left: -110px; } .marketing-hero.is-right { text-align: center; } .marketing-hero.is-right .hexagon.hexagon-2 { bottom: 45px; right: -80px; } .marketing-hero.is-right .hexagon.hexagon-3 { bottom: 50%; left: -110px; } .marketing-hero .hero-body .title, .marketing-hero .hero-body .subtitle { margin-left: auto; margin-right: auto; } .marketing-hero .hero-body .buttons { justify-content: center; margin-bottom: 2rem; } .marketing-hero .hero-body .switch-wrapper { margin: 0 auto; } .marketing-hero .hero-body .hero-mockup { max-width: 640px; margin: 0 auto; } .card-icon-boxes { display: flex; } .card-icon-boxes .column { min-width: 50%; width: 50%; } .centered-mockup-wrapper { max-width: 640px; } .centered-mockup-wrapper .columns { display: flex; } .video-section .columns .columns { display: flex; flex-wrap: wrap; max-width: 480px; margin: 0 auto; } .video-section .columns .columns .column { min-width: 50%; width: 50%; } .boxed-cta .v-avatar.v-avatar-12, .boxed-cta .v-avatar.v-avatar-9, .boxed-cta .v-avatar.v-avatar-8, .boxed-cta .v-avatar.v-avatar-11 { display: none; } } .blah { display: flex; justify-content: center; } .blah .switch-wrapper { margin-top: -6rem; } .footer-wrapper .vuero-footer { padding-bottom: 0 !important; padding-top: 4rem !important; }.pwa-toast { position: fixed; right: 0; bottom: 0; max-width: 350px; margin: 16px; padding: 12px; border: 1px solid #8885; border-radius: 4px; z-index: 10; text-align: left; box-shadow: 3px 4px 5px 0 #8885; } .pwa-message { padding: 0.5rem 1rem; margin-bottom: 1rem; font-size: 1.1rem; }.vc-pane-container{width:100%;position:relative}.vc-pane-container.in-transition{overflow:hidden}.vc-pane-layout{display:grid}.vc-arrow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:auto;color:var(--gray-600);border-width:2px;border-style:solid;border-radius:var(--rounded);border-color:transparent}.vc-arrow:hover{background:var(--gray-200)}.vc-arrow:focus{border-color:var(--gray-300)}.vc-arrow.is-disabled{opacity:.25;pointer-events:none;cursor:not-allowed}.vc-day-popover-container{color:var(--white);background-color:var(--gray-800);border:1px solid;border-color:var(--gray-700);border-radius:var(--rounded);font-size:var(--text-xs);font-weight:var(--font-medium);padding:4px 8px;box-shadow:var(--shadow)}.vc-day-popover-header{font-size:var(--text-xs);color:var(--gray-300);font-weight:var(--font-semibold);text-align:center}.vc-arrows-container{width:100%;position:absolute;top:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:8px 10px;pointer-events:none}.vc-arrows-container.title-left{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.vc-arrows-container.title-right{-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.vc-is-dark .vc-arrow{color:var(--white)}.vc-is-dark .vc-arrow:hover{background:var(--gray-800)}.vc-is-dark .vc-arrow:focus{border-color:var(--gray-700)}.vc-is-dark .vc-day-popover-container{color:var(--gray-800);background-color:var(--white);border-color:var(--gray-100)}.vc-is-dark .vc-day-popover-header{color:var(--gray-700)}.vc-day{position:relative;min-height:32px;z-index:1}.vc-day.is-not-in-month *{opacity:0;pointer-events:none}.vc-day-layer{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.vc-day-box-center-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.vc-day-box-left-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transform-origin:0% 50%;transform-origin:0% 50%}.vc-day-box-right-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.vc-day-box-center-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.vc-day-content{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:var(--text-sm);font-weight:var(--font-medium);width:28px;height:28px;line-height:28px;border-radius:var(--rounded-full);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vc-day-content:hover{background-color:#ccd6e04d}.vc-day-content:focus{font-weight:var(--font-bold);background-color:#ccd6e066}.vc-day-content.is-disabled{color:var(--gray-400)}.vc-is-dark .vc-day-content:hover{background-color:#7281974d}.vc-is-dark .vc-day-content:focus{background-color:#72819766}.vc-is-dark .vc-day-content.is-disabled{color:var(--gray-600)}.vc-highlights{overflow:hidden;pointer-events:none;z-index:-1}.vc-highlight{width:28px;height:28px}.vc-highlight.vc-highlight-base-start{width:50%!important;border-radius:0!important;border-right-width:0!important}.vc-highlight.vc-highlight-base-end{width:50%!important;border-radius:0!important;border-left-width:0!important}.vc-highlight.vc-highlight-base-middle{width:100%;border-radius:0!important;border-left-width:0!important;border-right-width:0!important;margin:0 -1px}.vc-dots{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.vc-dot{width:5px;height:5px;border-radius:50%;transition:all var(--day-content-transition-time)}.vc-dot:not(:last-child){margin-right:3px}.vc-bars{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:75%}.vc-bar{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:3px;transition:all var(--day-content-transition-time)}.vc-nav-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.vc-nav-arrow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;line-height:var(--leading-snug);border-width:2px;border-style:solid;border-color:transparent;border-radius:var(--rounded)}.vc-nav-arrow.is-left{margin-right:auto}.vc-nav-arrow.is-right{margin-left:auto}.vc-nav-arrow.is-disabled{opacity:.25;pointer-events:none;cursor:not-allowed}.vc-nav-arrow:hover{background-color:var(--gray-900)}.vc-nav-arrow:focus{border-color:var(--accent-600)}.vc-nav-title{color:var(--accent-100);font-weight:var(--font-bold);line-height:var(--leading-snug);padding:4px 8px;border-radius:var(--rounded);border-width:2px;border-style:solid;border-color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none}.vc-nav-title:hover{background-color:var(--gray-900)}.vc-nav-title:focus{border-color:var(--accent-600)}.vc-nav-items{display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:2px;grid-column-gap:5px}.vc-nav-item{width:48px;text-align:center;line-height:var(--leading-snug);font-weight:var(--font-semibold);padding:4px 0;cursor:pointer;border-width:2px;border-style:solid;border-color:transparent;border-radius:var(--rounded);-webkit-user-select:none;-ms-user-select:none;user-select:none}.vc-nav-item:hover{color:var(--white);background-color:var(--gray-900);box-shadow:var(--shadow-inner)}.vc-nav-item.is-active{color:var(--accent-900);background:var(--accent-100);font-weight:var(--font-bold);box-shadow:var(--shadow)}.vc-nav-item.is-current{color:var(--accent-100);font-weight:var(--bold);border-color:var(--accent-100)}.vc-nav-item:focus{border-color:var(--accent-600)}.vc-nav-item.is-disabled{opacity:.25;pointer-events:none}.vc-is-dark .vc-nav-title{color:var(--gray-900)}.vc-is-dark .vc-nav-title:hover{background-color:var(--gray-200)}.vc-is-dark .vc-nav-title:focus{border-color:var(--accent-400)}.vc-is-dark .vc-nav-arrow:hover{background-color:var(--gray-200)}.vc-is-dark .vc-nav-arrow:focus{border-color:var(--accent-400)}.vc-is-dark .vc-nav-item:hover{color:var(--gray-900);background-color:var(--gray-200);box-shadow:none}.vc-is-dark .vc-nav-item.is-active{color:var(--white);background:var(--accent-500)}.vc-is-dark .vc-nav-item.is-current{color:var(--accent-600);border-color:var(--accent-500)}.vc-is-dark .vc-nav-item:focus{border-color:var(--accent-400)}.vc-pane{min-width:250px}.vc-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:10px 16px 0}.vc-header.align-left{-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.vc-header.align-right{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.vc-title{font-size:var(--text-lg);color:var(--gray-800);font-weight:var(--font-semibold);line-height:28px;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.vc-title:hover{opacity:.75}.vc-weeknumber{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative}.vc-weeknumber-content{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:var(--text-xs);font-weight:var(--font-medium);font-style:italic;width:28px;height:28px;margin-top:2px;color:var(--gray-500);-webkit-user-select:none;-ms-user-select:none;user-select:none}.vc-weeknumber-content.is-left-outside{position:absolute;left:var(--weeknumber-offset)}.vc-weeknumber-content.is-right-outside{position:absolute;right:var(--weeknumber-offset)}.vc-weeks{display:grid;grid-template-columns:repeat(7,1fr);position:relative;-webkit-overflow-scrolling:touch;padding:6px;min-width:250px}.vc-weeks.vc-show-weeknumbers{grid-template-columns:auto repeat(7,1fr)}.vc-weeks.vc-show-weeknumbers.is-right{grid-template-columns:repeat(7,1fr) auto}.vc-weekday{text-align:center;color:var(--gray-500);font-size:var(--text-sm);font-weight:var(--font-bold);line-height:14px;padding-top:4px;padding-bottom:8px;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.vc-weekdays{display:-webkit-flex;display:-ms-flexbox;display:flex}.vc-nav-popover-container{color:var(--white);font-size:var(--text-sm);font-weight:var(--font-semibold);background-color:var(--gray-800);border:1px solid;border-color:var(--gray-700);border-radius:var(--rounded-lg);padding:4px;box-shadow:var(--shadow)}.vc-is-dark .vc-header{color:var(--gray-200)}.vc-is-dark .vc-title{color:var(--gray-100)}.vc-is-dark .vc-weekday{color:var(--accent-200)}.vc-is-dark .vc-nav-popover-container{color:var(--gray-800);background-color:var(--white);border-color:var(--gray-100)}.vc-none-enter-active,.vc-none-leave-active{transition-duration:0s}.vc-fade-enter-active,.vc-fade-leave-active,.vc-slide-left-enter-active,.vc-slide-left-leave-active,.vc-slide-right-enter-active,.vc-slide-right-leave-active,.vc-slide-up-enter-active,.vc-slide-up-leave-active,.vc-slide-down-enter-active,.vc-slide-down-leave-active,.vc-slide-fade-enter-active,.vc-slide-fade-leave-active{transition:opacity var(--slide-duration) var(--slide-timing),-webkit-transform var(--slide-duration) var(--slide-timing);transition:transform var(--slide-duration) var(--slide-timing),opacity var(--slide-duration) var(--slide-timing);transition:transform var(--slide-duration) var(--slide-timing),opacity var(--slide-duration) var(--slide-timing),-webkit-transform var(--slide-duration) var(--slide-timing);-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none}.vc-none-leave-active,.vc-fade-leave-active,.vc-slide-left-leave-active,.vc-slide-right-leave-active,.vc-slide-up-leave-active,.vc-slide-down-leave-active{position:absolute!important;width:100%}.vc-none-enter-from,.vc-none-leave-to,.vc-fade-enter-from,.vc-fade-leave-to,.vc-slide-left-enter-from,.vc-slide-left-leave-to,.vc-slide-right-enter-from,.vc-slide-right-leave-to,.vc-slide-up-enter-from,.vc-slide-up-leave-to,.vc-slide-down-enter-from,.vc-slide-down-leave-to,.vc-slide-fade-enter-from,.vc-slide-fade-leave-to{opacity:0}.vc-slide-left-enter-from,.vc-slide-right-leave-to,.vc-slide-fade-enter-from.direction-left,.vc-slide-fade-leave-to.direction-left{-webkit-transform:translateX(var(--slide-translate));transform:translate(var(--slide-translate))}.vc-slide-right-enter-from,.vc-slide-left-leave-to,.vc-slide-fade-enter-from.direction-right,.vc-slide-fade-leave-to.direction-right{-webkit-transform:translateX(calc(-1 * var(--slide-translate)));transform:translate(calc(-1 * var(--slide-translate)))}.vc-slide-up-enter-from,.vc-slide-down-leave-to,.vc-slide-fade-enter-from.direction-top,.vc-slide-fade-leave-to.direction-top{-webkit-transform:translateY(var(--slide-translate));transform:translateY(var(--slide-translate))}.vc-slide-down-enter-from,.vc-slide-up-leave-to,.vc-slide-fade-enter-from.direction-bottom,.vc-slide-fade-leave-to.direction-bottom{-webkit-transform:translateY(calc(-1 * var(--slide-translate)));transform:translateY(calc(-1 * var(--slide-translate)))}.vc-popover-content-wrapper{--popover-horizontal-content-offset: 8px;--popover-vertical-content-offset: 10px;--popover-caret-horizontal-offset: 18px;--popover-caret-vertical-offset: 8px;position:absolute;display:block;outline:none;z-index:10}.vc-popover-content-wrapper:not(.is-interactive){pointer-events:none}.vc-popover-content{position:relative;outline:none;z-index:10;box-shadow:var(--shadow-lg)}.vc-popover-content.direction-bottom{margin-top:var(--popover-vertical-content-offset)}.vc-popover-content.direction-top{margin-bottom:var(--popover-vertical-content-offset)}.vc-popover-content.direction-left{margin-right:var(--popover-horizontal-content-offset)}.vc-popover-content.direction-right{margin-left:var(--popover-horizontal-content-offset)}.vc-popover-caret{content:"";position:absolute;display:block;width:12px;height:12px;border-top:inherit;border-left:inherit;background-color:inherit;z-index:-1}.vc-popover-caret.direction-bottom{top:0}.vc-popover-caret.direction-bottom.align-left{-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.vc-popover-caret.direction-bottom.align-center{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translate(-50%) translateY(-50%) rotate(45deg)}.vc-popover-caret.direction-bottom.align-right{-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.vc-popover-caret.direction-top{top:100%}.vc-popover-caret.direction-top.align-left{-webkit-transform:translateY(-50%) rotate(-135deg);transform:translateY(-50%) rotate(-135deg)}.vc-popover-caret.direction-top.align-center{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-135deg);transform:translate(-50%) translateY(-50%) rotate(-135deg)}.vc-popover-caret.direction-top.align-right{-webkit-transform:translateY(-50%) rotate(-135deg);transform:translateY(-50%) rotate(-135deg)}.vc-popover-caret.direction-left{left:100%}.vc-popover-caret.direction-left.align-top{-webkit-transform:translateX(-50%) rotate(135deg);transform:translate(-50%) rotate(135deg)}.vc-popover-caret.direction-left.align-middle{-webkit-transform:translateY(-50%) translateX(-50%) rotate(135deg);transform:translateY(-50%) translate(-50%) rotate(135deg)}.vc-popover-caret.direction-left.align-bottom{-webkit-transform:translateX(-50%) rotate(135deg);transform:translate(-50%) rotate(135deg)}.vc-popover-caret.direction-right{left:0}.vc-popover-caret.direction-right.align-top{-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.vc-popover-caret.direction-right.align-middle{-webkit-transform:translateY(-50%) translateX(-50%) rotate(-45deg);transform:translateY(-50%) translate(-50%) rotate(-45deg)}.vc-popover-caret.direction-right.align-bottom{-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.vc-popover-caret.align-left{left:var(--popover-caret-horizontal-offset)}.vc-popover-caret.align-center{left:50%}.vc-popover-caret.align-right{right:var(--popover-caret-horizontal-offset)}.vc-popover-caret.align-top{top:var(--popover-caret-vertical-offset)}.vc-popover-caret.align-middle{top:50%}.vc-popover-caret.align-bottom{bottom:var(--popover-caret-vertical-offset)}.vc-day-popover-row{--day-content-transition-time: .13s ease-in;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;transition:all var(--day-content-transition-time)}.vc-day-popover-row:not(:first-child){margin-top:3px}.vc-day-popover-row-indicator{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;width:15px;margin-right:3px}.vc-day-popover-row-indicator span{transition:all var(--day-content-transition-time)}.vc-day-popover-row-content{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:none;-ms-flex-wrap:none;flex-wrap:none;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:-webkit-max-content;width:max-content}.vc-svg-icon{display:inline-block;stroke:currentColor;stroke-width:0}.vc-svg-icon path{fill:currentColor}.vc-time-picker{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:8px}.vc-time-picker.vc-invalid{pointer-events:none;opacity:.5}.vc-time-picker.vc-bordered{border-top:1px solid var(--gray-400)}.vc-time-icon{width:16px;height:16px;color:var(--gray-600)}.vc-time-content{margin-left:8px}.vc-time-date{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:var(--text-sm);font-weight:var(--font-semibold);text-transform:uppercase;padding:0 0 4px 4px;margin-top:-4px;line-height:21px}.vc-time-weekday{color:var(--gray-700);letter-spacing:var(--tracking-wide)}.vc-time-month{color:var(--accent-600);margin-left:8px}.vc-time-day{color:var(--accent-600);margin-left:4px}.vc-time-year{color:var(--gray-500);margin-left:8px}.vc-time-select{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.vc-am-pm{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background:var(--gray-200);color:var(--gray-800);margin-left:8px;padding:4px;border-radius:var(--rounded);height:30px}.vc-am-pm button{font-size:var(--text-sm);font-weight:var(--font-medium);padding:0 4px;background:transparent;border:2px solid transparent;border-radius:var(--rounded);line-height:var(--leading-snug)}.vc-am-pm button:hover{color:var(--gray-600)}.vc-am-pm button:focus{border-color:var(--accent-400)}.vc-am-pm button.active{background:var(--accent-600);color:var(--white)}.vc-am-pm button.active:hover{background:var(--accent-500)}.vc-am-pm button.active:focus{border-color:var(--accent-400)}.vc-is-dark .vc-time-picker{border-color:var(--gray-700)}.vc-is-dark .vc-time-icon,.vc-is-dark .vc-time-weekday{color:var(--gray-400)}.vc-is-dark .vc-time-month,.vc-is-dark .vc-time-day{color:var(--accent-400)}.vc-is-dark .vc-time-year{color:var(--gray-500)}.vc-is-dark .vc-am-pm{background:var(--gray-700)}.vc-is-dark .vc-am-pm:focus{border-color:var(--accent-500)}.vc-is-dark .vc-am-pm button{color:var(--gray-100)}.vc-is-dark .vc-am-pm button:hover{color:var(--gray-400)}.vc-is-dark .vc-am-pm button:focus{border-color:var(--accent-500)}.vc-is-dark .vc-am-pm button.active{background:var(--accent-500);color:var(--white)}.vc-is-dark .vc-am-pm button.active:hover{background:var(--accent-600)}.vc-is-dark .vc-am-pm button.active:focus{border-color:var(--accent-500)}.vc-select{position:relative}.vc-select select{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:block;-webkit-appearance:none;appearance:none;width:52px;height:30px;font-size:var(--text-base);font-weight:var(--font-medium);text-align:left;background-color:var(--gray-200);border:2px solid;border-color:var(--gray-200);color:var(--gray-900);padding:0 20px 0 8px;border-radius:var(--rounded);line-height:var(--leading-tight);text-indent:0px;cursor:pointer;-moz-padding-start:3px;background-image:none}.vc-select select:hover{color:var(--gray-600)}.vc-select select:focus{outline:0;border-color:var(--accent-400);background-color:var(--white)}.vc-select-arrow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;pointer-events:none;position:absolute;top:0;bottom:0;right:0;padding:0 4px 0 0;color:var(--gray-500)}.vc-select-arrow svg{width:16px;height:16px;fill:currentColor}.vc-is-dark select{background:var(--gray-700);color:var(--gray-100);border-color:var(--gray-700)}.vc-is-dark select:hover{color:var(--gray-400)}.vc-is-dark select:focus{border-color:var(--accent-500);background-color:var(--gray-800)}.vc-container{--white: #ffffff;--black: #000000;--gray-100: #f7fafc;--gray-200: #edf2f7;--gray-300: #e2e8f0;--gray-400: #cbd5e0;--gray-500: #a0aec0;--gray-600: #718096;--gray-700: #4a5568;--gray-800: #2d3748;--gray-900: #1a202c;--red-100: #fff5f5;--red-200: #fed7d7;--red-300: #feb2b2;--red-400: #fc8181;--red-500: #f56565;--red-600: #e53e3e;--red-700: #c53030;--red-800: #9b2c2c;--red-900: #742a2a;--orange-100: #fffaf0;--orange-200: #feebc8;--orange-300: #fbd38d;--orange-400: #f6ad55;--orange-500: #ed8936;--orange-600: #dd6b20;--orange-700: #c05621;--orange-800: #9c4221;--orange-900: #7b341e;--yellow-100: #fffff0;--yellow-200: #fefcbf;--yellow-300: #faf089;--yellow-400: #f6e05e;--yellow-500: #ecc94b;--yellow-600: #d69e2e;--yellow-700: #b7791f;--yellow-800: #975a16;--yellow-900: #744210;--green-100: #f0fff4;--green-200: #c6f6d5;--green-300: #9ae6b4;--green-400: #68d391;--green-500: #48bb78;--green-600: #38a169;--green-700: #2f855a;--green-800: #276749;--green-900: #22543d;--teal-100: #e6fffa;--teal-200: #b2f5ea;--teal-300: #81e6d9;--teal-400: #4fd1c5;--teal-500: #38b2ac;--teal-600: #319795;--teal-700: #2c7a7b;--teal-800: #285e61;--teal-900: #234e52;--blue-100: #ebf8ff;--blue-200: #bee3f8;--blue-300: #90cdf4;--blue-400: #63b3ed;--blue-500: #4299e1;--blue-600: #3182ce;--blue-700: #2b6cb0;--blue-800: #2c5282;--blue-900: #2a4365;--indigo-100: #ebf4ff;--indigo-200: #c3dafe;--indigo-300: #a3bffa;--indigo-400: #7f9cf5;--indigo-500: #667eea;--indigo-600: #5a67d8;--indigo-700: #4c51bf;--indigo-800: #434190;--indigo-900: #3c366b;--purple-100: #faf5ff;--purple-200: #e9d8fd;--purple-300: #d6bcfa;--purple-400: #b794f4;--purple-500: #9f7aea;--purple-600: #805ad5;--purple-700: #6b46c1;--purple-800: #553c9a;--purple-900: #44337a;--pink-100: #fff5f7;--pink-200: #fed7e2;--pink-300: #fbb6ce;--pink-400: #f687b3;--pink-500: #ed64a6;--pink-600: #d53f8c;--pink-700: #b83280;--pink-800: #97266d;--pink-900: #702459}.vc-container.vc-red{--accent-100: var(--red-100);--accent-200: var(--red-200);--accent-300: var(--red-300);--accent-400: var(--red-400);--accent-500: var(--red-500);--accent-600: var(--red-600);--accent-700: var(--red-700);--accent-800: var(--red-800);--accent-900: var(--red-900)}.vc-container.vc-orange{--accent-100: var(--orange-100);--accent-200: var(--orange-200);--accent-300: var(--orange-300);--accent-400: var(--orange-400);--accent-500: var(--orange-500);--accent-600: var(--orange-600);--accent-700: var(--orange-700);--accent-800: var(--orange-800);--accent-900: var(--orange-900)}.vc-container.vc-yellow{--accent-100: var(--yellow-100);--accent-200: var(--yellow-200);--accent-300: var(--yellow-300);--accent-400: var(--yellow-400);--accent-500: var(--yellow-500);--accent-600: var(--yellow-600);--accent-700: var(--yellow-700);--accent-800: var(--yellow-800);--accent-900: var(--yellow-900)}.vc-container.vc-green{--accent-100: var(--green-100);--accent-200: var(--green-200);--accent-300: var(--green-300);--accent-400: var(--green-400);--accent-500: var(--green-500);--accent-600: var(--green-600);--accent-700: var(--green-700);--accent-800: var(--green-800);--accent-900: var(--green-900)}.vc-container.vc-teal{--accent-100: var(--teal-100);--accent-200: var(--teal-200);--accent-300: var(--teal-300);--accent-400: var(--teal-400);--accent-500: var(--teal-500);--accent-600: var(--teal-600);--accent-700: var(--teal-700);--accent-800: var(--teal-800);--accent-900: var(--teal-900)}.vc-container.vc-blue{--accent-100: var(--blue-100);--accent-200: var(--blue-200);--accent-300: var(--blue-300);--accent-400: var(--blue-400);--accent-500: var(--blue-500);--accent-600: var(--blue-600);--accent-700: var(--blue-700);--accent-800: var(--blue-800);--accent-900: var(--blue-900)}.vc-container.vc-indigo{--accent-100: var(--indigo-100);--accent-200: var(--indigo-200);--accent-300: var(--indigo-300);--accent-400: var(--indigo-400);--accent-500: var(--indigo-500);--accent-600: var(--indigo-600);--accent-700: var(--indigo-700);--accent-800: var(--indigo-800);--accent-900: var(--indigo-900)}.vc-container.vc-purple{--accent-100: var(--purple-100);--accent-200: var(--purple-200);--accent-300: var(--purple-300);--accent-400: var(--purple-400);--accent-500: var(--purple-500);--accent-600: var(--purple-600);--accent-700: var(--purple-700);--accent-800: var(--purple-800);--accent-900: var(--purple-900)}.vc-container.vc-pink{--accent-100: var(--pink-100);--accent-200: var(--pink-200);--accent-300: var(--pink-300);--accent-400: var(--pink-400);--accent-500: var(--pink-500);--accent-600: var(--pink-600);--accent-700: var(--pink-700);--accent-800: var(--pink-800);--accent-900: var(--pink-900)}.vc-container{--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--leading-snug: 1.375;--rounded: .25rem;--rounded-lg: .5rem;--rounded-full: 9999px;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);--slide-translate: 22px;--slide-duration: .15s;--slide-timing: ease;--day-content-transition-time: .13s ease-in;--weeknumber-offset: -34px;position:relative;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:-webkit-max-content;width:max-content;height:-webkit-max-content;height:max-content;font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--gray-900);background-color:var(--white);border:1px solid;border-color:var(--gray-400);border-radius:var(--rounded-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.vc-container,.vc-container *{box-sizing:border-box}.vc-container:focus,.vc-container *:focus{outline:none}.vc-container button,.vc-container [role=button]{cursor:pointer}.vc-container.vc-is-expanded{min-width:100%}.vc-container .vc-container{border:none}.vc-container.vc-is-dark{color:var(--gray-100);background-color:var(--gray-900);border-color:var(--gray-700)}