/* demo style */
:root {
    --cc-cadbox-button-radius: 0px;
    --cc-cadbox-background-color: inherit;
    --cc-cadbox-viewers-background-color: inherit;
    --cc-cadbox-viewers-button-color: black;

    --cc-demo-header-background-color:  #FFFFFF;
    --cc-demo-header-color: #000000;
    --cc-demo-header-box-shadow: 0px 4px 10px 0px #00000040;
    --cc-demo-header-border: unset;

    --cc-demo-content-background-color: #FFFFFF;
    --cc-demo-content-flex-direction: row;
    --cc-demo-content-justify-content: left;
    --cc-demo-content-margin: 12px 0px 0px 0px;
    --cc-demo-content-child-padding: 0px 8px 8px 8px;
    
    --cc-demo-ctrl-flex: 1;
    --cc-demo-ctrl-width: 0;
    --cc-demo-ctrl-background-color: gray;
    --cc-demo-ctrl-box-shadow: unset;    

    --cc-demo-config-display: block;
    --cc-demo-config-flex: 1;
    --cc-demo-config-width: 0;
    --cc-demo-config-padding: 0px 1px 0px 0px;
    --cc-demo-config-box-shadow: unset;

    --cc-theme-loader-background-color: gray;
    --cc-theme-loader-opacity: 0.25;
}

html,
body {
    text-align: left;
    font: normal normal bold 14px/16px Arial;
    letter-spacing: 0px;
    color: #666666;
    opacity: 1;
    user-select: none;
    margin: 0;
    height: 100vh;
}

.cadbox-app-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--cc-demo-content-background-color);
}

.cadbox-header {
    height: 44px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;

    color: var(--cc-demo-header-color);
    background-color: var(--cc-demo-header-background-color);
    box-shadow: var(--cc-demo-header-box-shadow);
    border: var(--cc-demo-header-border);
}

.cadbox-header cc-dropdown {
    --cc-dropdown-width: 200px;
    --cc-dropdown-min-width: 100px;
    --cc-dropdown-list-max-height: 350px;
    --cc-dropdown-button-border: transparent;
    --cc-dropdown-button-border-hover: transparent;
    --cc-dropdown-button-color: var(--cc-demo-header-color) !important;

    --cc-dropdown-button-background-color: inherit;    
    --cc-dropdown-z-index: 100000;
}

.cadbox-header cc-dropdown[disabled] {
    --cc-dropdown-button-background-color: inherit;
}

.cadbox-header cc-dropdown cc-button {
    --cc-button-background-color: var(--cc-demo-header-background-color);
}

.cadbox-switch-customer {
}

.cadbox-switch-model {
    flex: 1;
}

.cadbox-switch-testpage {
}

.cadbox-content {
    height: calc(100vh - 47px);
    display: flex;
    flex-direction: var(--cc-demo-content-flex-direction);
    justify-content: var(--cc-demo-content-justify-content);
    background-color: var(--cc-demo-content-background-color);
    margin: var(--cc-demo-content-margin);
}

.cadbox-content-ctrl {
    flex: var(--cc-demo-ctrl-flex);
    width: var(--cc-demo-ctrl-width);
    min-width: 380px;
    padding: var(--cc-demo-content-child-padding);
}

.cadbox-content-ctrl cc-cadbox {
    --cc-cadbox-export-options-max-width: 382px;
    box-shadow: var(--cc-demo-ctrl-box-shadow);
}

.cadbox-content-config {
    display: var(--cc-demo-config-display);
    flex: var(--cc-demo-config-flex);
    width: var(--cc-demo-config-width);
    min-width: 300px;
    padding: var(--cc-demo-content-child-padding);
    box-shadow: var(--cc-demo-config-box-shadow);
    position: relative;
}

.cadbox-content-config cc-config {
    --cc-config-min-height: none;
    --cc-config-padding: var(--cc-demo-config-padding);
}

.config-content {
}

#lock {
    position: absolute;
    height: 100%;
    width: 100%;
    /* background-color: black; */
    cursor: not-allowed;
}