table {
    margin-top: 15px;
    table-layout: auto;
}

table td:first-child {
    width: 100%;
}

table tr:hover {
    background-color: #F5F5F5;
}

form .field-label {
    display: block;
    margin-bottom: 5px;
    color: #777;
}

.form-grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto auto auto;
}

form textarea {
    width: 100%;
    height: 100px;
    padding: 5px;
    font-family: Arial, Helvetica, serif;
}

form input {
    border: 1px solid #666;
}

form input[type="text"] {
    width: 300px;
}

form .option-list {
    list-style-type: none;
    margin-left: 5px;
}

form .option-list li {
    margin-bottom: 5px;
}

.form-box {
    border: 1px solid #DDD;
    padding: 5px;
    margin: 5px;
}

.campaign-image-element input, button {
    margin-left: 5px;
}

.campaign-upload-image {
    margin-left: 0;
    border: 1px solid black;
    border-left: none;
}

fieldset {
    padding: 10px;
}

.form-grid fieldset {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto auto auto;   
}

.form-grid .grid-full-span {
    grid-column: 1 / span 3;
}

legend {
    padding: 5px;
}

/*
--------------------------------
    Compaign list styles
*/

#campaign-table-container {
    clear: both;
}

.campaign-controls {
    display: inline;
    vertical-align: middle;
    white-space: nowrap;
}

/*
--------------------------------
    Compaign filters styles
*/

.filters-level-operator {
    margin-left: 10px;
    font-size: 1em;
    line-height: 15px;
}

.filters-level-operator:before {
    display: block;
    content: ' ';
    border-bottom: 1px solid #DDD;
    width: 25px;
    position: relative;
    top: 18px;
    left: -25px;
}

.filters-level-content {
    margin-left: 20px;
    border-left: 1px solid #DDD;
    padding-right: 10px;
}

.filters-level-controls {
    margin-left: 20px;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding: 10px;
    /*opacity: 0.6;*/
}

.filters-root button {
    opacity: 0.2;
    transition: opacity 100ms;
}

.filters-root .filters-level-operator:hover>p>.button-remove {
    opacity: 1;
}

.filters-root .filters-value:hover>.button-remove {
    opacity: 1;
}

.filters-root .filters-level-controls:hover>button {
    opacity: 1;
}

.filters-group {
    /*border: 1px solid #EEE;
    border-left: 1px solid #DDD;*/
    padding: 5px;
    margin-left: 10px;
}

.filters-group:hover>.filters-level-controls {
    opacity: 1;
}

/*
 On hover on a group, we apply a black background with very low opacity. This
 will allow to easily visualize the level of a nested group based on the 
 darkness of its background, as the background will stack on top of each other
 and become darker and darker the deeper we go in the group tree.
 */
div.filters-level-content>div.filters-group:hover {
    background-color: rgba(0, 0, 0, 0.03);
}



/*
.filters-group:hover {
}

.filters-root {
    border-left: none;
    margin-left: 5px;
}

.filters-root:hover {
    background: none !important;
}
*/

.filters-value {
    /*border-left: 1px solid #DDD;*/
    padding: 10px;
    margin-left: 15px;
}

.filters-value:before {
    display: block;
    content: ' ';
    border-bottom: 1px solid #DDD;
    width: 20px;
    position: relative;
    top: 18px;
    left: -25px;
}


/*
 Simulator results
 */

#simulator-result {
    margin-top: 20px;
}

#simulator-result-view {
    text-align: center;
}

.simulator-result-display {
    display: inline-block;
    text-align: center;
    border: 1px solid #DDD;
    padding: 10px;
}

.simulator-image-alt {
    font-style: italic;
    font-weight: bold;
}

.simulator-result-details {
    margin-top: 20px;
    display: grid;
    grid-template-columns: max-content max-content;
    border: 1px solid #DDD;
    padding: 10px;
}

.simulator-result-details .field-name {
    font-weight: bold;
    color: #AAA;
}