/**
 * This file is for any css that you may want for this visualizer.
 *
 * Ideally, you would use the scss file also provided in this directory 
 * and then generate this file automatically from that. However, you can 
 * simply write css if you prefer
 */

.ui-layout-center {
    overflow-x: auto;
    overflow-y: hidden;
}

.root-viz {
    outline: none;
    overflow: visible;
    width: auto;
    height: auto;
}

.root-viz .panel-base-wh.w-tabs .floating-title {
    display: none
}
.root-viz .panel-base-wh .floating-title {
    display: none
}
.root-viz .diagram-designer-tabs-container {
    display: none
}

.root-viz-container {
    display: grid;
    /* Display as a Grid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* repeat = as many times as you can fit */
    /* auto-fit = fit as many items on the line as possible, go bigger if you need to */
    /*minmax = (min size, max size) = the minimum size the column should be is 200px, but if there's space then give them all 1fr of that width. */
    grid-gap: 10px;
}

.root-viz-item {
    /*background-color: coral;*/
    /*height: 50px;*/
}

#root-viz-menu {
    position: fixed;
    z-index: 9999; /* Most times is 2000 used as middle */
    visibility: hidden;
    opacity: 0;
    
    padding: 0px;
    font-family: sans-serif;
    font-size: 11px;
    background: #fff;
    color: #555;
    border: 1px solid #C6C6C6;
    
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    
    -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
}

#root-viz-menu a {
    display: block;
    color: #555;
    text-decoration: none;
    padding: 6px 8px 6px 30px;
    width: 250px;
    position: relative;
}

#root-viz-menu a img,
#root-viz-menu a i.fa {
    height: 20px;
    font-size: 17px;
    width: 20px;
    position: absolute;
    left: 5px;
    top: 2px;
}

#root-viz-menu a span {
    color: #BCB1B3;
    float: right;
}

#root-viz-menu a:hover {
    color: #fff;
    background: #3879D9;
}

#root-viz-menu hr {
    border: 1px solid #EBEBEB;
    border-bottom: 0;
}

.root-viz-details {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    color: #363636;
    margin: 5px;
    padding: 1%;
}

.root-viz-details[open] {background: #E1E1E1;}

.root-viz-summary {
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
    padding: 8px 0;
    position: relative;
    width: 100%;
}

.root-viz-summary:hover,
.root-viz-details[open] summary {
    background: #E1E1E1;
}

.root-viz-summary::-webkit-details-marker {display: none}

.root-viz-summary:before {
    border-radius: 5px;
    content: "+";
    color: #363636;
    display: block;
    float: left;
    font-size: 1.3em;
    font-weight: bold;
    margin: -2px 10px 0 10px;
    padding: 0;
    text-align: center;
    width: 20px;
}

.root-viz-details[open] summary:before {
    content: "-";
}