src/Microservices/Playlist/WebApplication/Views/View.css

/* Main tabs and title */

#PlaylistEditor_MainView {
    height: calc(100% - 45px);
}

#PlaylistEditor_PlaylistName {
    margin-bottom: 4px;
}

#PlaylistEditor_PlaylistName label {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
}

/* Playlist editor tab */

#PlaylistEditor_RequestEditorSplit {
    height: calc(100% - 57px);
}

#PlaylistEditor_Playground {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
}

/* Coloring and sorting trees */

#PlaylistEditor_HelpSearch {
    width: calc(100% - 10px);
    height: 20px;
    display: inline-block;
    vertical-align: top;
}

/* Playlist editor's editors */

DIV.PlaylistEditor_EditorHeader {
    /*text-align: center;*/
    cursor: move;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    height: 16px;
    background-color: #5c9ccc;
}

DIV.PlaylistEditor_FilterEditor DIV.PlaylistEditor_EditorHeader {
    background-color: #9c5ccc;
}

DIV.PlaylistEditor_Editor, DIV.PlaylistEditor_FilterEditor {
    background-color: #eee;
    border: 1px solid #aaa;
    position: absolute;
    z-index: 800;
    font-size: 10px;
    width: auto;
    height: auto;
}

label.PlaylistEditor_EditorLabel, label.PlaylistEditor_FilterEditorHeaderLabel {
    cursor: move;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: calc(100% - 46px);
    padding-left: 3px;
    padding-right: 3px;
}

label.PlaylistEditor_FilterEditorHeaderLabel {
    width: calc(100% - 81px);
}

button.PlaylistEditor_EditorButton, button.PlaylistEditor_EditorButtonLeft, button.PlaylistEditor_EditorButtonRight {
    background-color: #d66;
    font-size: 10px;
    font-weight: bold;
    width: 35px;
    height: 100%;
    display: inline-block;
    color: #fff;
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 0px;
    width: 20px;
}

button.PlaylistEditor_EditorButtonLeft {
    width: 35px;
}

button:active.PlaylistEditor_EditorButton {
    background-color: #f22;
}

button:hover.PlaylistEditor_EditorButton {
    background-color: #e44;
}

.PlaylistEditor_Buttonbar {
    margin: 5px 0 5px 0;
    width: 100%;
    height: 22px;
}

.PlaylistEditor_Button_Left {
    float: left;
    background-color: #ddd;
    border: 2px solid #ddd;
    height: 22px;
}

.PlaylistEditor_Button_Right {
    float: right;
    background-color: #ccc;
    border: 2px solid #ccc;
    height: 22px;
}

.PlaylistEditor_Button_Left:hover,
.PlaylistEditor_Button_Right:hover {
    background-color: #999;
    border: 2px solid #999;
    color: white;
}

.NodeFilter {
    border: 1px solid purple;
}

.NodeSet {
    border: 1px solid green;
}

.NodeWarning {
    border: 1px solid red;
}

#PlaylistEditor_Legend {
    position: fixed;
    bottom: 0px;
    right: 0px;
    white-space: nowrap;
    background-color: #e5e5e5;
    opacity: 0.75;
    z-index: 10000;
    user-select: none;
    cursor: default;
}

#PlaylistEditor_Legend td:first-child {
    text-align: center;
}

/* 3rd party customization */

.dialog-table TD {
    font-size: 14pt;
}

.ui-dialog .ui-state-error {
    padding: .3em;
}

.ui-dialog {
    white-space: nowrap;
    z-index: 10000 !important;
}

.ui-widget-overlay {
    z-index: 9900 !important;
}

.validateTips {
    white-space: normal;
}

.validateSearch {
    width: 60%;
}

.validateSearchButton, .validateSearchClear {
    width: 20%;
}

.vakata-context {
    z-index: 4000 !important;
}

#jstree-marker {
    z-index: 4000 !important;
}