my-idlers/assets/css/style.css

1619 lines
30 KiB
CSS
Raw Normal View History

:root {
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
*, ::after, ::before {
box-sizing: border-box
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #00000003
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
@media (min-width: 576px) {
.container {
max-width: 540px
}
}
@media (min-width: 768px) {
.container {
max-width: 720px
}
}
@media (min-width: 992px) {
.container {
max-width: 960px
}
.modal-lg {
max-width: 800px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px
}
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}
.col-12, .col-2, .col-3, .col-4, .col-6, .col-8, .col-9, .col-lg-12, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-sm-6, .col-xl-10, .col-xl-2, .col-xl-3 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
.col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
@media (min-width: 576px) {
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
}
@media (min-width: 768px) {
.col-md-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 992px) {
.col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width: 1200px) {
.col-xl-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-xl-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-xl-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
}
[tabindex="-1"]:focus {
outline: 0 !important
}
h2, h4, h6 {
margin-top: 0;
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: inherit
}
h2 {
font-size: 2rem
}
h4 {
font-size: 1.5rem
}
h6 {
font-size: 1rem
}
p {
margin-top: 0;
margin-bottom: 1rem
}
ul {
margin-top: 0;
margin-bottom: 1rem
}
b {
font-weight: bolder
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:hover {
color: #0056b3;
text-decoration: underline
}
code {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 87.5%;
color: #e83e8c;
word-break: break-word
}
table {
border-collapse: collapse
}
th {
text-align: inherit
}
label {
display: inline-block;
margin-bottom: .5rem
}
button {
border-radius: 0
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color
}
button, input, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit
}
button, input {
overflow: visible
}
button, select {
text-transform: none
}
[type=submit], button, html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
padding: 0;
border-style: none
}
input[type=checkbox] {
box-sizing: border-box;
padding: 0
}
input[type=date] {
-webkit-appearance: listbox
}
textarea {
overflow: auto;
resize: vertical
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button
}
.table {
width: 100%;
margin-bottom: 1rem;
background-color: transparent
}
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6
}
.table-sm td, .table-sm th {
padding: .3rem
}
.table-bordered {
border: 1px solid #dee2e6
}
.table-bordered td, .table-bordered th {
border: 1px solid #dee2e6
}
.table-bordered thead th {
border-bottom-width: 2px
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, .05)
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar
}
.table-responsive > .table-bordered {
border: 0
}
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
@media screen and (prefers-reduced-motion: reduce) {
.form-control {
transition: none
}
}
.form-control::-ms-expand {
background-color: transparent;
border: 0
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}
.form-control::-webkit-input-placeholder {
color: #6c757d;
opacity: 1
}
.form-control::-moz-placeholder {
color: #6c757d;
opacity: 1
}
.form-control:-ms-input-placeholder {
color: #6c757d;
opacity: 1
}
.form-control::-ms-input-placeholder {
color: #6c757d;
opacity: 1
}
.form-control:disabled {
background-color: #e9ecef;
opacity: 1
}
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff
}
textarea.form-control {
height: auto
}
.form-group {
margin-bottom: 1rem
}
.form-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px
}
.form-row > [class*=col-] {
padding-right: 5px;
padding-left: 5px
}
.form-check {
position: relative;
display: block;
padding-left: 1.25rem
}
.form-check-input {
position: absolute;
margin-top: .3rem;
margin-left: -1.25rem
}
.form-check-input:disabled ~ .form-check-label {
color: #6c757d
}
.form-check-label {
margin-bottom: 0
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
@media screen and (prefers-reduced-motion: reduce) {
.btn {
transition: none
}
}
.btn:focus, .btn:hover {
text-decoration: none
}
.btn:focus {
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}
.btn:disabled {
opacity: .65
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #0062cc;
border-color: #005cbf
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #545b62;
border-color: #4e555b
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #117a8b;
border-color: #10707f
}
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #d39e00;
border-color: #c69500
}
.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5)
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #bd2130;
border-color: #b21f2d
}
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #dae0e5;
border-color: #d3d9df
}
.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5)
}
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #1d2124;
border-color: #171a1d
}
.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #007bff;
border-color: #007bff
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d
}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #28a745;
border-color: #28a745
}
.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8
}
.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}
.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #ffc107;
border-color: #ffc107
}
.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5)
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #dc3545;
border-color: #dc3545
}
.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}
.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa
}
.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5)
}
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #343a40;
border-color: #343a40
}
.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
}
.btn-block {
display: block;
width: 100%
}
input[type=submit].btn-block {
width: 100%
}
.fade {
transition: opacity .15s linear
}
@media screen and (prefers-reduced-motion: reduce) {
.fade {
transition: none
}
}
.fade:not(.show) {
opacity: 0
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%
}
.input-group > .form-control {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0
}
.input-group > .form-control:focus {
z-index: 3
}
.input-group > .form-control:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group > .form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group-append, .input-group-prepend {
display: -ms-flexbox;
display: flex
}
.input-group-prepend {
margin-right: -1px
}
.input-group-append {
margin-left: -1px
}
.input-group-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: .25rem
}
.input-group > .input-group-prepend > .input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group > .input-group-append > .input-group-text {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.nav-link {
display: block;
padding: .5rem 1rem
}
.nav-link:focus, .nav-link:hover {
text-decoration: none
}
.nav-tabs {
border-bottom: 1px solid #dee2e6
}
.nav-tabs .nav-item {
margin-bottom: -1px
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
border-color: #e9ecef #e9ecef #dee2e6
}
.nav-tabs .nav-link.active {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff
}
.tab-content > .tab-pane {
display: none
}
.tab-content > .active {
display: block
}
.navbar-toggler:not(:disabled):not(.disabled) {
cursor: pointer
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: 1px solid rgba(0, 0, 0, .125)
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}
.page-link:not(:disabled):not(.disabled) {
cursor: pointer
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5
}
.close:not(:disabled):not(.disabled) {
cursor: pointer
}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
color: #000;
text-decoration: none;
opacity: .75
}
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none
}
.modal-open {
overflow: hidden
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0
}
.modal-dialog {
position: relative;
width: auto;
margin: .5rem;
pointer-events: none
}
.modal.fade .modal-dialog {
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%)
}
@media screen and (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none
}
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000
}
.modal-backdrop.fade {
opacity: 0
}
.modal-backdrop.show {
opacity: .5
}
.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto
}
.modal-title {
margin-bottom: 0;
line-height: 1.5
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto
}
}
.w-100 {
width: 100% !important
}
.text-center {
text-align: center !important
}
@media print {
*, ::after, ::before {
text-shadow: none !important;
box-shadow: none !important
}
a:not(.btn) {
text-decoration: underline
}
thead {
display: table-header-group
}
tr {
page-break-inside: avoid
}
h2, p {
orphans: 3;
widows: 3
}
h2 {
page-break-after: avoid
}
@page {
size: a3
}
body {
min-width: 992px !important
}
.container {
min-width: 992px !important
}
.table {
border-collapse: collapse !important
}
.table td, .table th {
background-color: #fff !important
}
.table-bordered td, .table-bordered th {
border: 1px solid #dee2e6 !important
}
}
.form-row {
margin: .8rem 0
}
.nav-tabs .nav-link.active {
color: #495057;
background-color: #ecf0f5;
border-color: #dee2e6 #dee2e6 #ecf0f5
}
.card {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.10), 2px 2px 16px rgba(0, 0, 0, 0.10)
}
.card-header {
padding: .65rem 1rem
}
.card-body {
padding: 1rem .8rem .4rem
}
.os-col {
margin-top: .3rem
}
.btn {
padding: .08rem 1.5rem
}
.order-btn {
padding: .4rem 2rem
}
.dd-text {
margin-bottom: .5rem;
color: #1c2f6abf
}
.no-dd {
margin-bottom: .5rem;
visibility: hidden
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdffb8;
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.07)
}
.value {
display: inline;
margin-bottom: .4rem
}
.price {
color: #000000a1;
text-align: center;
font-style: italic
}
.obj-card {
padding: 0 0 .1rem;
margin: 0 .2rem 1.6rem;
border: 1px solid #4562684d;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), 3px 3px 12px rgba(0, 0, 0, 0.20);
transition: .5s ease-in-out
}
.obj-card:hover {
padding: 0 0 .1rem;
margin: 0 .2rem 1.6rem;
border: 1px solid rgba(36, 36, 36, 0.25)
}
.footer-row {
margin-top: 1rem;
text-align: center
}
.footer-text {
color: #525252c9;
font-size: .85rem
}
.footer-text:hover {
color: #5d8ecb;
text-decoration: none
}
.special-card {
border-left: 1px solid #eab22d59
}
.form-or {
margin: 1rem 0;
text-align: center
}
.hostname-header {
font-size: 1.1rem;
margin-bottom: 0;
text-align: center
}
.m-desc {
color: #000000a1;
margin-bottom: .4rem;
display: inline
}
.m-value {
display: inline;
margin-bottom: .4rem
}
.m-row {
margin-bottom: .2rem
}
.m-section-row {
margin-top: .6rem
}
.m-section-text {
color: #5e66b5;
font-weight: 500;
margin: .4rem 0;
font-size: 1.1rem
}
.object-count {
color: #00000061;
font-size: .9rem;
margin-left: 1.2rem
}
.card-section-header {
color: #4f4f64;
letter-spacing: .05rem;
margin-bottom: 1.2rem;
padding-left: 1rem
}
.modal-header {
text-align: center
}
.info-desc {
color: #000000a1;
margin-bottom: .4rem;
display: inline
}
.info-val {
color: #000000d1
}
.info-row {
margin-bottom: .6rem
}
.collapse:not(.show) {
display: none
}
.collapse {
margin: .2rem 0
}
.collapse-btn {
padding: .2rem .6rem;
margin: .5rem 0
}
.table-val-type {
color: #000000d1;
font-size: 80%;
margin-left: .05rem
}
.data-type {
color: #212529b3;
padding-left: .05rem;
font-size: 85%
}
.location {
margin-bottom: .4rem
}
.mem-disk-row, .cpu-row {
text-align: center;
margin-bottom: .6rem
}
.modal-header {
padding: .8rem;
background-color: #2d446708
}
.form-check {
position: relative;
display: block;
padding-left: 1.25rem;
margin-top: .3rem
}
.fas {
font-weight: 900;
color: #00000096
}
.tab-pane {
margin-top: .8rem
}
.input-group-text {
color: #2d3032;
background-color: #dbe4ee;
border: 1px solid #8598ac2b
}
.nav-tabs .nav-link.active {
color: #494f55;
background-color: #ecf0f5;
border-color: #b6b7b7 #dee2e6 #76787b;
transition: .3s ease-in-out
}
.nav-tabs .nav-link {
color: #4077b2
}
.btn-main {
color: #f7f7f7;
background-color: #5a95f5;
border-color: #3a73cf
}
.btn-main:hover, .btn-main:focus, .btn-main:active {
color: #f7f7f7;
background-color: #4984e3;
border-color: #3a73cf
}
.btn-main:active, .btn-second:active, .btn-third:active {
background-image: none
}
.btn-second {
color: #f7f7f7;
background-color: #30cfc0;
border-color: #2ea69a
}
.btn-second:hover, .btn-second:focus, .btn-second:active {
color: #f7f7f7;
background-color: #26bdae;
border-color: #2ea69a
}
.btn-third {
color: #f7f7f7;
background-color: #f06f6f;
border-color: #df4b4b;
}
.btn-third:hover, .btn-third:focus, .btn-third:active {
color: #f7f7f7;
background-color: #d05555;
border-color: #a62e2e;
}
.view-yabs-btn {
margin-bottom: 1rem
}
.tags-list {
color: #4f8665;
list-style: none
}
.tags-list::before {
display: inline-block;
width: 1em;
margin-left: -1em;
content: "#"
}
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: .6rem .2rem;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text
}
.bootstrap-tagsinput input {
border: 0;
box-shadow: none;
outline: 0;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit
}
.bootstrap-tagsinput input:focus {
border: 0;
box-shadow: none
}
.bootstrap-tagsinput .tag {
margin-right: .05rem;
color: #f6f6f6;
background: #83a1fa;
padding: .1rem;
border-radius: .18rem
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0 2px
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.ui-front {
z-index: 100
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: 0
}
.ui-menu .ui-menu-item {
margin: 0;
cursor: pointer;
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
}
.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em
}
.ui-menu-item:hover {
background: #b6b6b61f
}
.ui-widget {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em
}
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5
}
.ui-widget-content {
border: 1px solid #ddd;
background: #fff;
color: #333
}
.switch {
position: relative;
display: block;
width: 3.8rem;
height: 1.9rem
}
.switch input {
opacity: 0;
width: 0;
height: 0
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin-right: .2rem
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #747ba463;
-webkit-transition: .2s;
transition: .2s
}
.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 10px;
bottom: 6px;
background-color: #ececec;
-webkit-transition: .2s;
transition: .2s
}
input:checked + .slider {
background-color: #649fca
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px)
}
.slider.round {
border-radius: 1rem
}
.slider.round:before {
border-radius: 50%
}
.form-control:disabled, .form-control[readonly] {
background-color: #202125
}
.search-result {
padding: .6rem 0;
border: 1px #0000001c solid;
border-radius: .2rem;
margin: .4rem 0;
background: #fafafa;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.10), 2px 2px 12px rgba(0, 0, 0, 0.10);
transition: ease-in-out .5s
}
.search-result:hover {
background: #f4f4f4
}
.btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn input[type="radio"], .btn-group-toggle > .btn-group > .btn input[type="checkbox"], .btn-group-toggle > .btn-group > .btn input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none
}
.btn-bar:not(:disabled):not(.disabled).active, .btn-bar:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #1f6ec2;
border-color: #4b72ae
}
.btn-bar:not(:disabled):not(.disabled).active:focus, .btn-bar:not(:disabled):not(.disabled):active:focus, .show > .btn-bar.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer
}
.bd-example > .btn-group {
margin-top: .25rem;
margin-bottom: .25rem
}
.btn-group, .btn-group-vertical {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle
}
.btn-bar {
padding: .3rem .8rem;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .2rem;
border-top-left-radius: .2rem
}
.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btn-group > .btn-bar:last-child {
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem
}
@media only screen and (max-width: 620px) {
.btn-bar-col {
overflow-x: scroll
}
}