.rootContainer {
    composes: verticalFlexContainer from './Layout.mcss';
    flex: 1;
    position: relative;
}

.container {
    composes: horizontalFlexContainer from './Layout.mcss';
}

.height {
  height: calc(100vh - 4.9em);
}

.menu {
    composes: height;
    min-width: 150px;
    max-width: 300px;
    width: 10%;
    border-right: solid 1px #ccc;
    overflow-y: auto;
}

.menu20 {
    composes: menu;
    min-width: 250px;
    max-width: 400px;
    width: 20%;
}

.menu30 {
    composes: menu;
    min-width: 350px;
    max-width: 500px;
    width: 30%;
}

.content {
    flex: 1;
    composes: height;
    overflow-y: auto;
}

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

.saveIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-floppy-o   from 'font-awesome/css/font-awesome.css';
}

.deleteIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-trash-o    from 'font-awesome/css/font-awesome.css';
}

.testIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-repeat     from 'font-awesome/css/font-awesome.css';
}

.statusErrorIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-exclamation-triangle   from 'font-awesome/css/font-awesome.css';
}

.statusTerminatedIcon {
    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';
}

.statusCreatingIcon {
    composes: fa         from 'font-awesome/css/font-awesome.css';
    composes: fa-fw      from 'font-awesome/css/font-awesome.css';
    composes: fa-medkit  from 'font-awesome/css/font-awesome.css';
    margin-right: 5px;
}

.statusCreatedIcon {
    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';
    margin-right: 5px;
}

.statusLaunchingIcon {
    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';
    margin-right: 5px;
}

.statusRunningIcon {
    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';
    margin-right: 5px;
}

.statusDataIcon {
    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';
    margin-right: 5px;
}

.statusNeedSave {
  composes: fa            from 'font-awesome/css/font-awesome.css';
  composes: fa-fw         from 'font-awesome/css/font-awesome.css';
  composes: fa-floppy-o   from 'font-awesome/css/font-awesome.css';
  margin-right: 5px;
}

.statusTestingIcon {
  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';
  margin-right: 5px;
}

.attachIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-mail-forward    from 'font-awesome/css/font-awesome.css';
}

.detachIcon {
    composes: fa            from 'font-awesome/css/font-awesome.css';
    composes: fa-fw         from 'font-awesome/css/font-awesome.css';
    composes: fa-mail-reply      from 'font-awesome/css/font-awesome.css';
}