/* Text colors */
.colorLightGrey {
    color: #eee;
}
.colorBlue {
    color: #18e;
}
.colorGreen {
    color: #4ecdc4;
}
.colorYellow {
    color: #fff223;
}
.colorLightGreen {
    color: #c8f363;
}
.colorLightRed {
    color: #fe6b6b;
}
.colorRed {
    color: #c54d57;
}
.colorBlack {
    color: #222;
}

/* Background colors */
.bgGreen {
    background-color: #4ecdc4;
}
.bgBlack {
    background-color: #222;
}

/* Toolbars / Headers */
.topBar {
    composes: topBar from 'HPCCloudStyle/Layout.mcss';
    composes: bgBlack;
    color: #ededed;
    letter-spacing: 0.025em;
    font-size: 1.05em;
}

.topBarText {
    color: #fff;
}

.logout {
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

.topBar a:hover, .topBar a:active {
    /* colorGreen, cannot compose this */
    color: #4ecdc4;
}

.disabled {
    color: #090909;
    cursor: not-allowed;
}

.borderRadius {
    border-radius: 4px;
}

.progressBar {
    composes: bgGreen;
    position: absolute;
    width: 0px;
    height: 2px;
    left: 0;
    top: 0;
    transition-property: width, opacity;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s, 1.5s;
}

/* Boxes */
.errorBox {
    composes: alert from 'bootstrap/dist/css/bootstrap.css';
    composes: alert-danger from 'bootstrap/dist/css/bootstrap.css';
    margin-bottom: 0px;
}

.warningBox {
    composes: alert from 'bootstrap/dist/css/bootstrap.css';
    composes: alert-warning from 'bootstrap/dist/css/bootstrap.css';
    margin-bottom: 0px;
}

.successBox {
    composes: alert from 'bootstrap/dist/css/bootstrap.css';
    composes: alert-success from 'bootstrap/dist/css/bootstrap.css';
    margin-bottom: 0px;
}

/* Text styles */
.boldText {
    font-weight: bold;
}

.largeText {
    font-size: 1.25em;
}

.lightText {
    font-weight: 300;
}

.capitalizeRightText {
    text-align: right;
    text-transform: capitalize;
}

.fixedWidth {
    font-family: monospace;
}

/* Icons */
.hpcCloudIcon {
    line-height: 0;
}

.hpcCloudIcon a {
    outline: 0;
}

.hpcCloudBusyIcon {
    composes: hpcCloudIcon;
}

.logoutIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-sign-out   from 'font-awesome/css/font-awesome.css';
}

.landingIcon {
    composes: fa                from 'font-awesome/css/font-awesome.css';
    composes: fa-fw             from 'font-awesome/css/font-awesome.css';
    composes: fa-cloud-download from 'font-awesome/css/font-awesome.css';
}

.loadingIcon {
    composes: fa         from 'font-awesome/css/font-awesome.css';
    composes: fa-fw      from 'font-awesome/css/font-awesome.css';
    composes: fa-spinner from 'font-awesome/css/font-awesome.css';
    composes: fa-spin    from 'font-awesome/css/font-awesome.css';
}

.editIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-pencil     from 'font-awesome/css/font-awesome.css';
}

.addIcon {
    composes: fa      from 'font-awesome/css/font-awesome.css';
    composes: fa-fw   from 'font-awesome/css/font-awesome.css';
    composes: fa-plus from 'font-awesome/css/font-awesome.css';
}

/* Simulation icons */
.simulationEditIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-pencil-square-o   from 'font-awesome/css/font-awesome.css';
}

.simulationRunningIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-rocket     from 'font-awesome/css/font-awesome.css';
    composes: colorGreen;
}

.simulationErrorIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-warning    from 'font-awesome/css/font-awesome.css';
    composes: colorYellow;
}

.simulationTerminateIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-ban        from 'font-awesome/css/font-awesome.css';
    composes: colorRed;
}

.simulationDoneIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-database   from 'font-awesome/css/font-awesome.css';
    composes: colorBlue;
}

/* breadcrumb icons */
.breadCrumbIcon {
    composes: fa        from 'font-awesome/css/font-awesome.css';
    composes: fa-fw     from 'font-awesome/css/font-awesome.css';
    composes: colorBlack;
}

.breadCrumbRootIcon {
    composes: breadCrumbIcon;
    composes: fa-list   from 'font-awesome/css/font-awesome.css';
}

.breadCrumbProjectIcon {
    composes: breadCrumbIcon;
    composes: fa-folder-open-o   from 'font-awesome/css/font-awesome.css';
}

.breadCrumbSimulationIcon {
    composes: breadCrumbIcon;
    composes: fa-file-text-o   from 'font-awesome/css/font-awesome.css';
}

.breadCrumbUnknownIcon {
    composes: breadCrumbIcon;
    composes: fa-question   from 'font-awesome/css/font-awesome.css';
}

.activeBreadCrumb {
    composes: colorBlue;
}