ui/include/css/dart.css
/* Any clickable element */
.clickable, .clickable-card, .clickable-row, .repository-clickable-row, .local-file {
    cursor: pointer;
}
.local-file {
    color: #007bff;
}
.clickable-card:hover {
    background-color: #f8f9fa;
}
.bottom-buttons {
    margin-top: 15px;
    min-height: 40px;
}
.ol-aligned {
   padding-left: 15px;
   margin-bottom: 0px;
}
.row-spaced {
   margin-bottom: 5px;
}
.padded-for-text {
    padding-left: 20px;
    padding-right: 20px
}
hr.menu-divider {
    margin-top: 10px;
    margin-bottom: 10px;
}
.tag-table th, .tag-table td {
    width: 50%;
}
/* Prevent anchor links from looking like clickable links. */
.anchor, .anchor:hover {
   color: inherit;
   text-decoration: none;
}
/* Indents are for indenting items in hierarchal lists, as in a table of contents */
.indent-1 {
   padding-left: 25px;
}
.indent-2 {
   padding-left: 50px;
}
.indent-3 {
   padding-left: 75px;
}
.indent-4 {
   padding-left: 100px;
}

/* Small custom icons, like expand/collapse */
.es-small-icon {
   height: 20px;
   width: 20px;
}
/* Form inputs for custom tags */
.custom-tag {
    width: 45%;
    display: inline;
}
.custom-tag-name {
    margin-right: 20px;
}
/* For input items that require the user's attention.
   This is bootstrap's background color for warnings.
*/
.input-attention {
    background-color: #fcf8e3;
}

.spinner {
   position: absolute;
   left: calc(50% - 30px);
   top: 50%;
   height:60px;
   width:60px;
   margin:0px auto;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(66,139,202,.15);
   border-right:6px solid rgba(66,139,202,.15);
   border-bottom:6px solid rgba(66,139,202,.15);
   border-top:6px solid rgba(66,139,202,.8);
   border-radius:100%;
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

.drop-zone {
    border: 2px dashed #4285F4;
    border-radius: 20px;
    padding: 20px;
    margin: 20px;
}

.drop-zone-over {
    background-color: #e3f2fd;
}

.upload-icon-div {
    margin-top: 50px;
    margin-bottom: 50px;
}

.dashboard-job {
    border: 1px solid #dedede;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
}

.dashboard-job-name {
   font-weight: bold;
   font-size: 1.3em;
   padding: 5px;
}

.job-op-result, .show-manifests, .job-remote-status {
    padding-left: 5px;
    padding-right: 5px;
}

.about {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

/* Fix Bootstrap legend overlying fieldset border */
legend {
    width: auto;
    border-bottom: none;
}

/*
   This is used to hide some form elements that can
   clutter the screen. User can click to unhide them.
*/
.form-group-hidden {
    display:none;
}

/*
   This is required to make autocomplete suggestions
   appear inside a modal dialog.
 */
ul.ui-autocomplete {
    z-index: 9999;
}

.dashboard-card-body {
    max-height: 250px;
    overflow-y: auto;
}

.popover{
    max-width: 60%;
}

.modal-dialog {
    max-width: 80%;
    margin: 1.75rem auto;
}
