/* Change for later */

#new-agent-hint {
    display: none;
}

#quickstart-window {
    display: none;
}

#mobile-button-simulation-container {
    display: none;
}

#attributes-window {
    overflow: auto;
}

/*==[ Set view port for PHONES!!!]===*/
:root {
    --sab: env(safe-area-inset-bottom);
    --viewport-height: 100%;

    /* tabs */
    --tabs-height: 3rem;
    /* tab */
    --tool_var_height: 3.1rem;
    --tab_selectors_background: rgb(180, 180, 180);
    --tab_selectors_tabs_children: rgb(196, 196, 196);
    --tab_selector_options_background: rgb(219, 219, 219);

    /* Side Selector*/
    --side-dropdown-button: none;
}

/* ============= */

html,
body {
    margin: 0;
    user-select: none;
}

html {
    max-height: 100%;
    display: grid;
}

body {
    font-family: sans-serif;

    display: grid;
    grid-template-areas: "main";
    grid-template-columns: 100%;
    grid-template-rows: 1fr;

    line-height: 1 !important;

    height: var(--viewport-height);
}

/*===[ Loading Screen ] ===*/

#progress-window {
    position: fixed;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100vw;
    height: 100vh;
    background: rgb(219, 219, 219);
}

#logo {
    width: 900px;
    padding: 20px;
    opacity: 1;
    animation: logo_opacity 2s;

    display: grid;
    grid-template-columns: 1fr min-content;
    column-gap: 15px;
    row-gap: 15px;
    align-content: center;

    height: 80vh; /*FOR IOS*/
}

#logo_container {
    grid-column: 1 / 3;
}

@keyframes logo_opacity {
    from {
        opacity: 0;
        transform: translate(10px, 0px);
    }

    to {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

#AgentCubes_header {
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 100px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.logo_spinner_container {
    grid-column: 1 / 3;
    display: grid;
    justify-content: center;
}

.logo_spinner {
    animation: logo_rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}

.logo_circle {
    stroke: rgb(255, 102, 0);
    stroke-linecap: round;
    animation: logo_dash 1.5s ease-in-out infinite;
}

@keyframes logo_rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes logo_dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 100, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

#load-progress-bar-container {
    grid-column: 1 / 3;
    width: 90%;
    height: 25px;
    justify-self: center;
    display: grid;
    border: 6px solid rgb(255, 102, 0);
    border-radius: 15px;
}

#load-progress-bar {
    height: 100%;
    width: 0%;
    background-color: white;
    border-radius: 15px;
    transition: width 2s;
}

#swiss-load-info {
    margin-top: 25px;
    width: min-content;
    grid-column: 1 / 3;
    justify-self: center;
    display: none;
}

@media only screen and (max-width: 920px) {
    #AgentCubes_header {
        font-size: 60px;
    }

    #logo {
        width: 500px;
    }

    #logo > svg {
        width: 100px;
    }

}

@media only screen and (max-width: 460px) {
    #AgentCubes_header {
        font-size: 35px;
    }

    #logo {
        width: 300px;
    }

    #logo > svg {
        width: 80px;
    }

    #swiss-load-info > img {
        width: 250px;
        height: auto;
    }
}


@media only screen and (max-height: 550px) {

    #AgentCubes_header {
        font-size: 35px;
    }

    #logo {
        width: 300px;
    }

    #logo > svg {
        width: 80px;
    }

    #swiss-load-info > img {
        width: 250px;
        height: auto;
    }
}

/*===============*/
#main {
    grid-area: main;
    display: grid;
    grid-template-areas: "wrap";
    grid-template-columns: 100%;
    grid-template-rows: var(--viewport-height);
}

#main,
#gallery,
#toolbar,
.plot-window {
    -webkit-user-select: none;
    user-select: none;
}

#wrap {

    /* --tab-height: min-content; */ /* DEFINED IN RESTRETTO 3D!!! */
    /* --tab-height: minmax(300px, min-content); */
    --tab-transition: grid-template-rows 0.5s;

    grid-area: wrap;
    display: grid;
    --toolbar: 3.2rem;
    /* 0.1 for button even spacing around */
    grid-template-areas: "toolbar"
        "gallery_threed_container"
        "tab_selectors"
        "tabs";
    grid-template-columns: 100%;
    /* grid-template-rows: var(--toolbar) 1fr 3rem minmax(0px, calc(var(--viewport-height) / 2 - (var(--toolbar) + 3rem))); */
    grid-template-rows: var(--toolbar) 1fr var(--tabs-height) var(--tab-height);
    transition: var(--tab-transition);

}

/* =[ Play Mode ]=*/
.wrap_play_mode {
    grid-template-areas: "gallery_threed_container" !important;
    grid-template-rows: 1fr !important;
}

.wrap_play_mode #toolbar {
    display: none !important;
}

.wrap_play_mode #tab_selectors {
    display: none !important;
}

.wrap_play_mode #tabs {
    display: none !important;
}

/* =[ Play Mode ]=*/

.wrap_design_mode #tab_selectors {
    grid-template-columns: 1fr min-content;
}

.wrap_design_mode #vat_tab {
    display: none !important;
}

.zero_hundred {
    --tab-height: calc(var(--viewport-height) * 1 - (var(--toolbar) + 3rem)) !important;
    grid-template-rows: var(--toolbar) 0fr var(--tabs-height) var(--tab-height) !important;
}

.twentyfive_seventyfive {
    --tab-height: calc(var(--viewport-height) * 0.75 - (var(--toolbar) + 3rem)) !important;
    grid-template-rows: var(--toolbar) 1fr var(--tabs-height) var(--tab-height) !important;
}

.fifty_fifty {
    --tab-height: calc(var(--viewport-height) * 0.5 - (var(--toolbar) + 3rem)) !important;
    grid-template-rows: var(--toolbar) 1fr var(--tabs-height) var(--tab-height) !important;
}

.seventyfive_twentyfive {
    --tab-height: calc(var(--viewport-height) * 0.25 - (var(--toolbar) + 3rem)) !important;
    grid-template-rows: var(--toolbar) 1fr var(--tabs-height) var(--tab-height) !important;
}

.hundred_zero {
    --tab-height: 0px !important;
    grid-template-rows: var(--toolbar) 1fr var(--tabs-height) var(--tab-height) !important;
}

/* ===[ TOOL BAR ]=== */

#toolbar {
    grid-area: toolbar;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-rows: 100%;
    background-color: rgb(237, 237, 237);
    z-index: 90;
}

.notallowed {
    --not_allowed_cursor: url(../js/drag-drop/images/NotAllowedCursor.png) 0 0,default;
    cursor: var(--not_allowed_cursor);
}

.down {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
}

.group {
    grid-row: 1 / 2;
    width: min-content;
    display: grid;
    grid-template-rows: 100%;
    align-items: center;

    border-left: 1px solid gray;
}

#toolbar>.group:first-child {
    border-left: none;
}

.group>* {
    grid-row: 1 / 2;
    /* border-bottom: solid 1px black; */
}

.group button {
    border: none;
    background: none;
    display: grid;
    grid-template-rows: 100%;
    justify-content: center;
    align-content: center;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    padding-bottom: 5px;
    border-radius: 2px;
}

.group button>* {
    /* Space between words (spans) */
    grid-row: 1 / 2;
    margin-right: 0.5rem;
}

.group button>*:last-child {
    margin-right: 0;
}

.group select {
    height: 2.5rem;
    width: 10rem;
    padding: 0;
    padding-left: 1px;
    border-radius: 2px;
}

.group button:hover {
    background-color: rgb(191, 191, 191);
}

#toolbar-show-more {
    position: relative;
}

#menu_more {
    padding-left: 12px;
    padding-right: 12px;
}

#menu_more > img {
    height: 15px;
}

#menu_more_div {
    display: none;
    position: absolute;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    box-sizing: content-box;
    top: 119%;
    right:0px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
}

#menu_more_groups  {
    padding: 0px 3px;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    background-color: rgb(237 237 237);
    border-top-left-radius: 5px;
}

#menu_more_groups > * {
    padding: 3px 0px;
    grid-row: auto;
    border: none;
    border-bottom: 1px solid gray;
}

#menu_more_groups > *:last-child {
    border: none;
}

#menu_more_sliders {
    grid-row: 2 / 3;
    row-gap: 3px;
    padding: 3px;
    display: grid;
    background-color: rgb(225 225 225 / 70%);
    /* background-color: rgba(237, 237, 237, 0.8); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#menu_more_sliders > * {
    align-items: center;
}

/* Back link button */

#asi-cube-back {
    position: absolute;
    right: 2px;
    border-left: none;
}

#asi-cube-link {
    background-color: #ff9999;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer;

    display: grid;
}

#asi-cube-link:hover {
    background-color: red;
}

#asi-cube-link img {
    width: 23px;
}

.show_more_tools {
    display: grid !important;
}

#speed-controls {
    width: 15rem;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    border-bottom: solid 1px grey;
}

#slider-group {
    display: grid;
    align-content: center;
}

#layer-controls {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: 100%;
    column-gap: 0.5rem;
}

#layer-plus-minus,
#layer-buttons,
#layer-grid {
    display: grid;
    grid-template-columns: min-content min-content;
    align-content: center;
    column-gap: 0.5rem;
}

#layer-minus-button, #layer-plus-button, #more-grid-controls {
    background-color: #ededed;
}

#layer-minus-button:hover, #layer-plus-button:hover, #more-grid-controls:hover {
    background-color: rgb(191, 191, 191);
}

#more-grid-controls {
    margin-top: 3px;
}

#layer-height {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 0.5rem;
}

#layer-grid-checkbox {
    margin: 0;
}

#layer-div {
    display: grid;
    align-content: center;
}

#grid {
    margin: 0;
}

/* ===[ Gallery & Threed ]=== */

#gallery_threed_container {
    grid-area: gallery_threed_container;
    display: grid;
    grid-template-areas: "three_container";
    grid-template-columns: 100%;
    grid-template-rows: 1fr;

    overflow: hidden;
}

/* =[ Gallery ]= */

#gallery-wrap {
    display: grid;
    /* grid-template-areas: "gallery_container" "gallery-side-panel"; */
    grid-template-columns: 1fr;
    overflow: auto;
    background-color: rgb(219, 219, 219);
}

#gallery-container {
    /* grid-area: gallery_container; */
    display: grid;
    grid-template-areas: "gallery";
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    position: relative;

    justify-content: center;

    /* overflow: auto; */
}

.close-gallery-container {
    display: none !important;
}

#gallery-description {
    display: none;
}

#gallery {
    grid-area: gallery;
    display: grid;
    grid-template-areas: "gallery_agentlist";
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    justify-content: center;

    column-gap: var(--agent_gap);
}

#gallery ul {
    list-style: none;
}

#gallery ul,
#gallery li {
    margin: 0;
}

#gallery_agentlist {
    grid-area: gallery_agentlist;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;

    overflow: auto;
    gap: 10px;
    justify-content: center;
    align-content: start;

    /* background: url("/img/logo/AgentCubes_Logo_cube.svg") no-repeat calc(100% - 3px) calc(100% - 3px) / 25px; */
}

#gallery_agentlist>li {
    height: min-content;
    background-color: rgb(230, 230, 230);

    display: grid;
    grid-template-columns: [start] 100% [end];
    grid-auto-rows: min-content;

    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

/* #gallery_agentlist>li:not(.gallery_agent_li_selected):hover {
    background-color: rgb(191, 191, 191);
} */

#gallery_agentlist>li>* {
    grid-column: start / end;
}

.gallery_agent_li_selected {
    /* border: solid 1px #cc95e1; */
    box-shadow: 0px 0px 5px rgb(140, 140, 140);
}

/* #gallery_agentlist .flippy-closed {
    display: none;
} */

.gallery_agent_is_selected {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
}

.gallery_agentsublist {
    padding: 0px 5px !important;
    border-bottom: 1px solid rgb(219, 219, 219);
    height: 100px;
    overflow: auto;
    background-color: rgb(219, 219, 219);

    display: none;
}

.gallery_agentsublist>li {
    border-bottom: 1px solid rgb(230, 230, 230);
    cursor: pointer;
}

.gallery_agentsublist>li:last-child {
    border-bottom: none;
}

.gallery_agentitem {
    width: 110px;
    display: grid;
    grid-template-columns: min-content;
    justify-content: center;
    justify-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 5px;
    padding: 10px;
    /* border-bottom: 1px solid rgb(219, 219, 219); */
    position: relative;
}

.gallery_agentitem:hover {
    background-color: rgb(191, 191, 191);
}

.to-shapes {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-image: url("../images/tool-pencil.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: white;
    display: none;
}

.to-shapes:hover {
    background-color: rgb(191, 191, 191);
}

.to-code {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-image: url("../images/code.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    position: absolute;
    top: -5px;
    right: -5px;
    background-color: white;

    display: none;
}

.to-code:hover {
    background-color: rgb(191, 191, 191);
}

.gallery_agent_li_selected>.to-code,
.gallery_agent_li_selected>.to-shapes {
    display: block !important;
}


.gallery-shapelabel {
    display: none;
}

.gallery-sublist-buttons {
    display: grid;
    grid-template-columns: 1fr min-content;
    column-gap: 1px;

    display: none;
}

.gallery-agent-buttons {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-self: end;
    margin-top: 10px;
    column-gap: 1px;

    display: none;
}

.gallery-agent-buttons>*,
.gallery-sublist-buttons>* {
    padding: 10px;
    /* border: solid 1px black; */
    background-color: rgb(237, 237, 237);
    display: grid;
    justify-content: center;
    cursor: pointer;
}

.gallery-agent-buttons>*:hover,
.gallery-sublist-buttons>*:hover {
    background-color: rgb(191, 191, 191);
}

.gallery-agent-buttons>*:first-child,
.gallery-sublist-buttons>*:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.gallery-agent-buttons>*:last-child,
.gallery-sublist-buttons>*:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.delete-agent {
    background: url("./../images/delete.svg") no-repeat;
    background-size: auto 80%;
    background-position: center;
    width: 34px;
    background-color: red;
}

.delete-agent:hover {
    background-color: darkred;
}

.gallery_shapeitem {
    display: grid;
    background-color: rgb(230, 230, 230);
    height: min-content;
    width: 110px;
    position: relative;
    border-radius: 5px;

    cursor: pointer;
}

.sub_title_thumb {
    display: grid;
    grid-template-columns: min-content 1fr;
    justify-content: center;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
    border-radius: 5px;
    column-gap: 5px;
}

.sub_title_thumb:hover {
    background-color: rgb(191, 191, 191);
}

.gallery-thumbnail {
    width: 32px;
    height: 32px;
}

.gallery_name {
    /* overflow: auto; */
    /* display: grid;
    justify-content: center;
    align-content: center; */
    max-inline-size: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.gallery_agentlist .gallery_name {
    max-inline-size: 75px;
}

.side-drop-down {
    display: grid;
    grid-template-columns: 100%;

    background-color: rgb(237, 237, 237);
    z-index: 96;
    position: absolute;
}

.side-agent-options {
    width: 40px;
}

.side-agent-options>* {
    cursor: pointer;
    --side-agent-tooltip-height: 40px;
    height: var(--side-agent-tooltip-height);
}

.side-agent-options>*:hover {
    background-color: rgb(191, 191, 191);
}

.side-agent-delete {
    background-image: url("../images/delete.svg");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.side-agent-rename {
    background-image: url("../images/rename.svg");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.side-agent-asset, .side-agent-edit {
    display: grid;
    justify-content: center;
    align-content: center;
}

.side-agent-edit {
    /* background: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/pencil.png) no-repeat 50%; */
    background: url("../images/edit-image-icon.svg") no-repeat center / 95% 95%;
}

.side-sub-agent-options {
    width: 30px;
}

.side-agent-options>*, .side-sub-agent-options>* {
    position: relative;
}

.side-agent-options>*:hover .side-agent-tooltip, .side-sub-agent-options>*:hover .side-agent-tooltip {
    display: grid;
}

.side-agent-tooltip {
    display: none;
    grid-template-columns: max-content min-content;
    position: absolute;
    right: calc(100% + 3px);
    align-items: center;
    padding: 0px 3px;
}

.side-agent-tooltip > * {
    display: grid;
    height: var(--side-agent-tooltip-height);
    align-content: center;
    background-color: #ffffcc;
    padding: 0 5px;
    border-radius: 3px;
}

.side-agent-tooltip:after {
    display: grid;
    align-content: center;
    --tooltip-triangle-size: calc(var(--side-agent-tooltip-height) / 3.5);
    content: "";
    width: 0; 
    height: 0;
    border-radius:0;
    padding:0;
    border-top: var(--tooltip-triangle-size) solid transparent;
    border-bottom: var(--tooltip-triangle-size) solid transparent;
    border-left: var(--tooltip-triangle-size) solid #ffffcc;
}

.side-sub-agent-options>* {
    cursor: pointer;
    --side-agent-tooltip-height: 30px;
    height: var(--side-agent-tooltip-height);
}

.side-sub-agent-options>*:hover {
    background-color: rgb(191, 191, 191);
}

.gallery_agent_li_selected .side-more-options {
    display: var(--side-dropdown-button);
}

.side-more-options {
    display: none;
    justify-content: center;
    align-content: center;

    position: absolute;
    top: -5px;
    right: -5px;

    height: 30px;
    width: 30px;
    background-color: rgb(237, 237, 237);
    border-radius: 50%;
    transition: border-radius 0.2s;
}

.side-active {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
    border-radius: 0px !important;
}

#gallery-side-panel {
    /* grid-area: gallery-side-panel; */
    display: none;
    /* transition: width 0.3s; */
    overflow: hidden;
}

.open-side-panel {
    /* width: 290px !important; */
    display: grid !important;
    overflow: visible !important;
}

#gallery-side-panel-controls {
    position: sticky;
    top: 0px;
    overflow: auto;

    display: grid;
    grid-template-columns: 100%;
    /* grid-template-rows: 32px 1fr; */
    grid-template-rows: 1fr;
    row-gap: 10px;
}

#side-subagent-controls {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    overflow: auto;
}

#side-agentsublist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: start;
    gap: 10px;
    padding: 10px;
}

#side-bottom-buttons {
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: min-content min-content min-content;
    /* grid-template-rows: 100%; */
    justify-content: center;
    position: relative;

    padding-top: 5px;
}

#side-bottom-buttons::after {
    content: '';
    justify-self: center;
    width: 0px;
    height: 0px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 9px solid #e6e6e6;
    grid-column: 1 / 4;
}

#side-bottom-buttons>* {
    grid-row: 1 / 2;
    /* font-size: 18px; */
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
}

#side-plus-subagent {
    cursor: pointer;
    background-image: url("../images/plus.svg");
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 110px;
    height: 53px;

    border-radius: 5px;

    background-color: rgb(237, 237, 237);

    order: 1;
}

#selected-agent-back {
    background-image: url("../images/thin-chevron-arrow-left.svg");
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    border: none;
    height: 52px;
    width: 40px;
    background-color: rgb(237, 237, 237);

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#selected-agent-back:hover {
    background-color: rgb(191, 191, 191);
}

#selected-agent {
    display: grid;
    grid-template-columns: min-content 1fr;
    justify-content: center;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
    background-color: rgb(230, 230, 230);
    width: 110px;
    column-gap: 5px;

    /* border: solid 1px #cc95e1;
    border-right: none; */

    height: 52px;
}

.selected-agent-Nowner {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

#plus-agent-more {
    display: var(--side-dropdown-button);
    border: none;
    height: 52px;
    width: 40px;
    background-color: rgb(237, 237, 237);
    /* border-radius: 50%; */
    transition: border-radius 0.2s;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;

    /* border: solid 1px #cc95e1;
    border-left: none; */
}

#side-plus-subagent:hover {
    background-color: rgb(191, 191, 191);
}

#plus-agent-button {

    display: none;

    background-image: url("../images/plus.svg");
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    min-height: 71px;
    width: 110px;
    font-size: 18px;
    background-color: rgb(237, 237, 237);
    /* margin-bottom: 5px; */
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    /* margin-bottom: 10px; */
    border-radius: 5px;

    order: 1;
    padding: 10px;
}

#plus-agent-button:hover {
    background-color: rgb(191, 191, 191);
}

/* =[ Window Resize Actions ]= */

/* @media only screen and (max-width: 530px) {

    #gallery_agentlist>li {
        width: 100%;
    }

} */

/* =[ Three ]= */

#non-gallery-container {
    grid-area: three_container;
    display: grid;
    grid-template-areas: "side1 threed-and-status side2";
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: 100%;

    overflow: hidden;
}

#side1 {
    /* width: var(--side_width); */
    grid-area: side1;
    display: none;
    grid-template-columns: 1fr var(--tabs-height);
    grid-template-rows: 1fr;

    overflow-y: auto;
    overflow-x: hidden;
}

#side2 {
    /* width: var(--side_width); */
    grid-area: side2;
    display: none;
    grid-template-columns: var(--tabs-height) 1fr;
    grid-template-rows: 1fr;

    overflow-y: auto;
    overflow-x: hidden;
}

#threed-and-status {
    grid-area: threed-and-status;
    display: grid;
    grid-template-areas: "container";
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    position: relative;
}

#container {
    grid-area: container;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

#container>canvas {
    /* hack the id "3d-view" is not a valid id */
    position: absolute;
    touch-action: none;
}

#status-bar {
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0px;
    padding: 2px;
}

#canvas_unmute {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 2px;
    width: 30px;
    cursor: pointer;
}

#canvas_button_controls {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    display: grid;
    grid-auto-columns: min-content;
    gap: 10px;
}

#canvas_button_controls > * {
    grid-row: 1 / 2;
    width: 30px;
    cursor: pointer;
}

/* #canvas-reload {
    width: 30px;
    cursor: pointer;
} */

/* =[ Window Resize Actions ]= */

@media only screen and (max-width: 850px) {
    /* #gallery_threed_container {
        grid-template-areas: "three_container";
        grid-template-columns: 1fr;
    }

    #gallery-container {
        display: none;
    } */
}

/* ===[ tab selectors ]=== */

#tab_selectors {
    grid-area: tab_selectors;
    display: grid;
    /* grid-template-columns: minmax(min-content, 200px) minmax(min-content, 200px) 1fr; */
    grid-template-columns: 1fr min-content;
    /* grid-template-rows: 5% [start] 90% [end] 5%; */
    grid-template-rows: [gap-start] 1px [start] calc(100% - 2px) [end] 1px [gap-end];

    background-color: var(--tab_selectors_background);
    /* column-gap: 1px; */
}

#tab_selector_tabs {
    grid-row: start / end;
    display: grid;
    grid-auto-columns: 1fr;
    /* background-color: rgb(180, 180, 180); */
    column-gap: 1px;
}

#tab_selector_tabs > * {
    grid-row: 1 / 2;
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    background-color: var(--tab_selectors_tabs_children);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.closeable_tab {
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    justify-items: center;
    align-items: center;
}

.tab_selected {
    background-color: rgb(237, 237, 237) !important;
    font-weight: 500;
}

#tab_selector_options {
    grid-row: start / gap-end;
    display: grid;
    grid-auto-columns: min-content;
    grid-template-rows: 100%;
    /* column-gap: 1px; */
    cursor: pointer;
    /* background-color: rgb(237, 237, 237) !important; */
    /* box-shadow: 0px 0px 5px 1px rgb(219 219 219) inset; */
    /* border-radius: 3px; */
    /* background-color: rgb(180, 180, 180); */
    background-color: var(--tab_selector_options_background);
}

#tab_selector_options>* {
    grid-row: 1 / 2;
    /* border-right: solid 1px white; */
    /* background-color: rgb(237, 237, 237); */

    width: 35px;

    display: grid;
    justify-content: center;
    align-content: center;

}

#tab_selector_options img {
    touch-action: none;
    -webkit-user-drag: none;
}

.closeable_tab_x {
    font-size: 14px;
    margin-right: 5px;
    /* padding: 2px; */
    height: 20px;
    width: 20px;
    display: grid;
    justify-content: center;
    align-content: center;
    border-radius: 50%;
}

.closeable_tab_x:hover {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
}

#add-tab-container {
    border-left: solid 1px rgb(180, 180, 180);
}

.more-tabs-options-container > * {
    padding: 10px;
    cursor: pointer;
}

.more-tabs-options-container > *:hover {
    background-color: rgb(191, 191, 191);
}

.add-tab {
    height: 18px;
}

.agentList_tab {
    display: grid;
    align-content: start;
    --shape_padding: 32px;
    grid-template-columns: [start] var(--shape_padding) [middle] calc(100% - var(--shape_padding)) [end];
    row-gap: 2px;
    overflow: auto;
    padding-top: 2px;
    padding-left: 5px;
}

.agentList_tab_container {
    display: grid;
    align-items: center;
    height: 50px;
    grid-template-columns: 32px 1fr min-content;
    background-color: rgb(237, 237, 237);
    /* border-radius: 4px; */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    gap: 6px;
    padding-left: 7px;
    cursor: pointer;
}

.agentList_tab_container:hover {
    background-color: rgb(191, 191, 191);
}

.agentList_tab_container > img {
    width: 32px;
    height: 32px;
}

.agentList_tab_agent {
    grid-column: start / end;
}

.agentList_tab_shape {
    grid-column: middle / end;
}

.agentList_collapse {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 2px;
    background: url("../images/minus-icon.svg") no-repeat center / 80%;
    margin-right: 6px;
    /* transform: rotate(180deg); */
}

.agentList_collapse_selected {
    /* transform: rotate(270deg); */
    background: url("../images/plus-grey.svg") no-repeat center / 80%;
}

.agentList_tab_shape_hidden {
    display: none;
}

/*===[ Resize View]===*/

#maxmin_view-container {
    border-left: solid 1px grey;
}

.maxmin_view {
    height: 25px;
    width: 30px;
    touch-action: none;
}

#resize_view {
    grid-row: 1 / 2;
    width: 27px;
    overflow: hidden;
}

#resize_view_popup_win {
    display: none;
    background-color: rgb(237, 237, 237);
    border-radius: 5px;
    border: solid 1px black;
    z-index: 3;
    width: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

#resize_view_popup_win h5 {
    display: grid;
    justify-content: center;
    margin: 0;
    padding: 5px 0;
}

#resize_view_popup_win>* {
    display: grid;
    justify-content: center;
}

#resize_view_popup {
    justify-content: inherit;
}

#resize_view_popup>* {
    display: grid;
    justify-content: center;
    padding: 5px 0px;
}

#resize_win_close {
    background-color: red;
    color: white;
    margin-top: 5px;
    padding: 5px 0;
}

#resize_view_popup>*:hover {
    background-color: rgb(191, 191, 191);
}

.center_window {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

/* ===[ tabs ]=== */

#tabs {
    grid-area: tabs;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    overflow: hidden;

    max-height: var(--tab-height); /* tab-height for wrap and this (tabs) needed for CSS glich */
}

.new_tab, #gallery-wrap ,#vat {
    max-height: calc(var(--viewport-height) - var(--toolbar) - var(--tabs-height)); /* This is against tab-height: min-content */
}

.new_tab {
    display: grid;
    background-color: rgb(219, 219, 219);
    overflow: hidden;
}

.noShow {
    display: none !important;
}

/* ===[ Side Tabs ]=== */

.side_tab_selectors {
    display: grid;
    /* grid-template-columns: minmax(min-content, 200px) minmax(min-content, 200px) 1fr; */
    grid-template-rows: 1fr min-content;
    /* grid-template-rows: 5% [start] 90% [end] 5%; */
    grid-template-columns: [gap-start] 1px [start] calc(100% - 2px) [end] 1px [gap-end];

    background-color: var(--tab_selectors_background);
    /* column-gap: 1px; */
}

.side_tab_selector_tabs {
    grid-column: start / end;
    display: grid;
    grid-auto-rows: 1fr;
    /* background-color: rgb(180, 180, 180); */
    column-gap: 1px;
}

.side_tab_selector_tabs > * {
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    background-color: var(--tab_selectors_tabs_children);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;

    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.side_tab_selector_options {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: 100%;
    /* column-gap: 1px; */
    cursor: pointer;
    /* background-color: rgb(237, 237, 237) !important; */
    /* box-shadow: 0px 0px 5px 1px rgb(219 219 219) inset; */
    /* border-radius: 3px; */
    /* background-color: rgb(180, 180, 180); */
    background-color: var(--tab_selector_options_background);
}

 #side1 .side_tab_selector_options {
    grid-column: gap-start / end;
 }

 #side2 .side_tab_selector_options {
    grid-column: start / gap-end;
 }

.side_tab_selector_options>* {
    height: 35px;

    display: grid;
    justify-content: center;
    align-content: center;

}

.side_tab_selector_options img {
    touch-action: none;
    -webkit-user-drag: none;
}

.add-tab-container-side {
    border-top: solid 1px rgb(180, 180, 180);
}

.maxmin_view-container-side {
    border-top: solid 1px grey;
}

.maxmin_view-container-side > img {
    transform: rotate(90deg);
}

.side_tabs {
    width: var(--side_width);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    overflow: auto;
}

/* ==[ World Tab ]== */

#world_tab {
    display: grid;
    grid-template-columns: minmax(140px, 1fr);
    grid-template-rows: min-content min-content 1fr min-content;
    background-color: rgb(191, 191, 191);
    overflow-x: auto;
    overflow-y: hidden;
}

#world_tab_title {
    background-color: rgb(237, 237, 237);
    display: grid;
    justify-content: center;
    padding: 10px 0px;
    font-size: 18px;
}

#world_tab_top_controls {
    background-color: rgb(230, 230, 230);
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    column-gap: 1px;
}

#world_tab_top_controls > * {
    grid-row: 1 / 2;
    display: grid;
    align-content: center;
}

#world_tab_top_controls_height {
    margin: 0px 10px;
}

#world_tab_top_controls_toggle_grid {
    border: none;
    border-radius: 0px;
    background-color: rgb(230, 230, 230);
    padding: 10px 0px;
    width: 35px;
    height: 35px;
    background: url(../images/show-grid.svg) no-repeat center center / 85% 85%;
}

#world_tab_top_controls_toggle_grid.down {
    background: url(../images/hide-grid.svg) no-repeat center center / 85% 85%;
}

#world_tab_top_controls_showall {
    border: none;
    border-radius: 0px;
    background-color: rgb(230, 230, 230);
    padding: 10px 0px;
    width: 35px;
    height: 35px;
    background: url(../images/show-all-layer.svg) no-repeat center center / 85% 85%;
}

#world_tab_bottom_controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1px;
}

#world_tab_bottom_controls > button {
    grid-row: 1 / 2;
    border: none;
    border-radius: 0px;
    background-color: rgb(230, 230, 230);
    display: grid;
    padding: 10px 0px;
}

#world_tab button:hover {
    background-color: rgb(191, 191, 191);
}

/* =[ world tab list ]= */

#world_tab_layer_list {
    padding: 1px 0px;
    display: grid;
    overflow: auto;
    grid-auto-rows: min-content;
    row-gap: 1px;

    --layer_list_height: 35px;
}

#world_tab_layer_list > div {
    height: var(--layer_list_height);
    background-color: rgb(230, 230, 230);
    display: grid;
    grid-template-columns: 1fr min-content;
    column-gap: 1px;
}

.world_tab_layer_list_title {
    display: grid;
    align-content: center;
    padding-left: 10px;
    overflow: auto;
}

.world_tab_layer_list_control {
    display: grid;
    grid-auto-columns: var(--layer_list_height);
}

.world_tab_layer_list_control > button {
    border: none;
    grid-row: 1 / 2;
    cursor: pointer;
}

.notallowed button {
    cursor: var(--not_allowed_cursor);
}

.world_tab_layer_list_showonly {
    background: url(../images/show-one-layer.svg) no-repeat center center / 85% 85%;
}

.world_tab_layer_list_showhide {
    background: url(../images/show-layer_v3.svg) no-repeat center center / 75% 75%;
}

.world_tab_layer_list_showhide.down {
    background: url(../images/hide-layer_v3.svg) no-repeat center center / 75% 75%;
}

/* ===[ VAT ]=== */

#vat {
    /* grid-area: vat; */
    display: grid;
    grid-template-areas: "vat-table";
    /* grid-template-areas: "vat-table"
        "bottom-toolbar"; */
    grid-template-columns: 100%;
    /* grid-template-rows: 1fr 3.1rem; */
    grid-template-rows: 1fr;
    overflow: hidden;
    position: relative;

    /* border-top: 1px solid rgb(219, 219, 219); */
}

#vat-table {
    grid-area: vat-table;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content 1fr;
    overflow: hidden;
    background-color: rgb(219, 219, 219);
    --vat-gap: 1px;
    gap: var(--vat-gap);
}

.vat-table-row {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: 100%;
    overflow: hidden;

    gap: var(--vat-gap);
}

.vat-table-row>* {
    grid-row: 1 / 2;
    background-color: rgb(237, 237, 237);
}

#vat-conditions-header,
#vat-code-header-td,
#vat-actions-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

#vat-agent-drop-down {
    height: 20px;
    display: grid;
    grid-auto-columns: max-content;
    column-gap: 2px;
    align-content: center;

    cursor: pointer;
    border: solid 1px rgb(219, 219, 219);
    padding: 0px 3px;
    border-radius: 5px;
}

#vat-agent-drop-down:hover {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
}

#vat-agent-drop-down>* {
    grid-row: 1 / 2;
}

/* ==[ Vat Agent Drop Down ]==*/

.vat-agent-select-options {
    background-color: rgb(219, 219, 219);
    display: grid;
    row-gap: 1px;
    overflow: auto;
    max-height: calc(100vh / 2) !important;
}

.vat-agent-select-options>* {
    cursor: pointer;
    height: 40px;
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    column-gap: 5px;

    background-color: rgb(230, 230, 230);
    padding: 2px;

    overflow: hidden;
}

.vat-agent-select-options>*>div {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
}

.vat-agent-select-options>*:hover {
    background-color: rgb(191, 191, 191);
}

/*=======*/

#vat-code {
    background-color: rgb(219, 219, 219);
    height: fit-content;
}

/* #quick-vat-add-rule-button {
    background-image: url("../images/plus.svg");
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 35px;
    background-color: rgb(237, 237, 237);

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#quick-vat-add-rule-button:hover {
    background-color: rgb(191, 191, 191);
} */

#vat-code-header-resize-img,
.vat-proxy {
    width: 14px;
    height: 14px;
}

#vat-code-td-container {
    display: grid;
    grid-template-areas:
        "vat-code-td"
        "bottom-toolbar";
    grid-template-rows: 1fr 3.1rem;
    background-color: rgb(219, 219, 219);
}

#vat-conditions-td,
#vat-code-td,
#vat-actions-td {
    display: grid;
    grid-template-columns: 100%;
    /* grid-template-rows: 100%; */
    grid-auto-rows: min-content;
    overflow: auto;
}

#vat-code-td {
    grid-area: vat-code-td;
    /* touch-action: none; */
}

#vat-second-row {
    position: relative;
}

#vat-conditions-scroll,
#vat-actions-scroll {
    display: grid;
    grid-template-rows: 100%;
}

#vat-conditions .tutorial-excluded,
#vat-actions .tutorial-excluded {
    display: none;
}

.group-title {
    clear: both;
    margin-left: 6px;
    font-size: 115%;
    padding: 1ex 0;
}

/* #vat-conditions,
#vat-actions {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    touch-action: none;
} */

/* .vat_show_full_screen {
    position: absolute !important;
    height: var(--td-height, auto) !important;
    display: grid !important;
    top: 0;
    z-index: 90;
    width: calc(50% - 2px);
    opacity: 0;
    transition: opacity 1.6s;
} */

.smooth-opacity {
    opacity: 1 !important;
}

.instruction {
    border-radius: 4px;
    padding: 3px 4px 3px;
    margin: 2px 2px 4px 0.5em;
    font-size: 9pt;
    float: left;
    clear: both;
    cursor: default;
    background-color: lightblue;
    line-height: 1.5 !important;
}

.instruction .editor {
    cursor: pointer;
    word-break: break-all;
    margin-left: 4px;
}

.instruction .instruction-content {
    display: inline;
}

.instruction:has(.relative:checked) .direction-picker-display {
    border-radius: 50%;
    border: solid 1px black;
}

.vat-flippy-closed {
    display: inline;
}

.instruction-content {
    display: inline;
}

.instruction .shape-editor-display {
    width: 18px;
    height: 18px;
    position: relative;
    top: -1px;
}

.instruction .color-picker-display {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 4px;
    border-top: solid 1px #888;
    border-left: solid 1px #888;
    margin-left: 0px;
}

.instruction .direction-picker-display {
    transition: border-radius 1s;
}

.direction-picker-display {
    position: relative;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url(../js/vat/images/direction/direction_all.png);
    display: inline-block;
    border: 1px solid white;
    box-sizing: content-box;
}

.direction-picker-display.east {
    background-position: -32px -16px;
}

.direction-picker-display.northeast {
    background-position: -32px -0px;
}

.direction-picker-display.north {
    background-position: -16px -0px;
}

.direction-picker-display.northwest {
    background-position: -0px -0px;
}

.direction-picker-display.west {
    background-position: -0px -16px;
}

.direction-picker-display.southwest {
    background-position: -0px -32px;
}

.direction-picker-display.south {
    background-position: -16px -32px;
}

.direction-picker-display.southeast {
    background-position: -32px -32px;
}

.direction-picker-display.center {
    background-position: -16px -16px;
}

.disclosure-bits {
    display: none;
}

/* =[ Method ]= */

.method {
    background-color: rgb(237, 237, 237);
    border-radius: 0;
    border: 1px solid transparent;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px;
    /* padding: 5px; */
    display: grid;
    grid-template-areas:
        "trigger-name method-control"
        "comments-box comments-box"
        "rule-box rule-box";
    grid-template-columns: min-content 1fr;
}

.method .trigger-name {
    grid-area: trigger-name;
    display: inline-block;
    border: solid 3px transparent;
    border-image: repeating-linear-gradient(-50deg, grey, yellow 1%, grey 1%, yellow 1%, grey 3%) 2;
    -webkit-border-image: repeating-linear-gradient(-50deg, grey, yellow 1%, grey 1%, yellow 1%, grey 3%) 2;
    -o-border-image: repeating-linear-gradient(-50deg, grey, yellow 1%, grey 1%, yellow 1%, grey 3%) 2;
    display: grid;
}

.trigger-name span {
    display: grid;
    grid-template-columns: min-content min-content;
}

.trigger-name > span > span {
    display: grid;
    justify-content: center;
    align-content: center;
    white-space: nowrap;
}

.method-control-container {
    grid-area: method-control;
    height: 32px;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 32px 32px 32px;
    align-content: center;
}

.rule-box {
    grid-area: rule-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(65px, min-content);
    background-color: rgb(219, 219, 219);
    box-shadow: 0 0 15px rgb(170, 170, 170) inset;
}

.rule {
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    /* background-color: transparent;
    border: 2px solid transparent; */
    border: 1px solid transparent;
    /* border-bottom: 1px solid rgb(219, 219, 219); */
    border-radius: 0;
    box-sizing: border-box;
    padding: 5px;
    background-color: #ededed;
}

#vat .rule:last-child {
    border-bottom-color: transparent;
}

/* =[ Comments ]= */

.comments-box {
    grid-area: comments-box;
    display: grid;
    grid-template-columns: 1fr min-content;
}

.comment-textarea {
    overflow: hidden;
    word-wrap: break-word;
    white-space: pre;
    resize: none;
    background-color: rgb(255, 255, 204);
    min-height: 22px;
    /* Init height*/
}

/*=====*/

.method-disclosure-span {
    color: rgb(200, 200, 200);
    font-size: 75%;
    padding-right: .25em;
    text-decoration: none !important;
}

.rule .if-then {
    background-color: rgb(219, 219, 219);
    box-shadow: 0 0 15px rgb(170, 170, 170) inset;
}

.rule .if-then,
.nested-container {
    padding: 4px;
    border-radius: 2px;
    /* display: inline-block; */
    display: grid !important;
    grid-template-rows: min-content 1fr min-content;
}

.rule .instruction-area {
    display: inline-block;
}



/* When it was a button  */
/* .phone_CA_button {
    display: none;
    width: 100%;
    justify-content: center;
    align-content: center;
    color: grey;
    font-size: 3rem;
    padding: 1.2rem 0px;
    background-color: rgb(237, 237, 237);
    cursor: pointer;
    border-radius: 2px;
} */

.phone_CA_button {
    display: none;
    height: 35px;
    background: url(../images/hover-click-icon.svg) no-repeat center right / 35px 35px;
}

.condition-area .phone_CA_button {
    background: url(../images/hover-click-icon.svg) no-repeat center left / 35px 35px;
}

.action-area .phone_CA_button {
    background: url(../images/hover-click-icon.svg) no-repeat center right / 35px 35px;
}

.nested-container {
    border: none;
    background-color: rgb(219, 219, 219);
    box-shadow: 0 0 15px rgb(70, 70, 70) inset;
    min-height: 50px;
    justify-items: start;
}

#vat .rule.vat-selected,
#vat .method.vat-selected {
    background-color: rgb(237, 237, 237);
}

#vat .vat-selected {
    border-color: #cc95e1 !important;
    /* border-width: 1px; */
}

#vat .rule.true div.if-then {
    background-color: #ccffcc !important;
    box-shadow: 0 0 15px rgb(150, 150, 150) inset;
}

#vat .rule.false div.if-then {
    background-color: #ffcccc !important;
    box-shadow: 0 0 15px rgb(150, 150, 150) inset;
}

.condition {
    background: rgb(148, 192, 225);
    border: 2px solid transparent;
}

.condition.false span.instruction-name {
    color: #ff4e4e;
}
  
.condition.true span.instruction-name {
    color: #009800;
}

.action {
    box-sizing:border-box;
    background: rgb(225, 177, 149);
    border: 2px solid transparent;
}

.drag_css {
    cursor: url(../js/drag-drop/images/NotAllowedCursor.png) 0 0,default;
    opacity: 0.7;
}

.hide-unreachable-code #unreachable-code {
    display: none !important;
}

.drag_and_drop_allow_drop { /* Overwrite */
    cursor: url(../js/drag-drop/images/CopyArrowCursor.png) 0 0,default !important;
}

.condition-drop-highlight {
    border-radius: 4px;
    box-shadow: inset 0px 0px 10px 0px rgb(148 192 225 / 69%), inset 0px 0 120px rgb(148 192 225 / 29%);
}

.action-drop-highlight {
    border-radius: 4px;
    box-shadow: inset 0px 0px 10px 0px rgb(215 167 140 / 69%), inset 0px 0 120px rgb(215 167 140 / 29%);
}

.disabled {
    background: rgb(160, 160, 160);
    border: 0;
    opacity: 0.5;
    color: #111;
}

#vat .condition.vat-selected:not(.disabled),
#vat .condition:hover:not(.disabled) {
    background-color: rgb(138, 182, 215);
}

#vat .action.vat-selected:not(.disabled),
#vat .action:hover:not(.disabled) {
    background-color: rgb(215, 167, 139);
}

#negate-condition {
    margin-right: 4px;
}

.editable-display {
    background: white;
    color: black;
    border-top: solid 1px #888;
    border-left: solid 1px #888;
    padding: 0px 2px;
    margin: 1px;
    /* white-space: nowrap; */
    cursor: pointer;
}

#one-true-value-editor {
    font-size: 9pt;
    display: none;
    white-space: nowrap;
    box-shadow: 5px 5px 2px rgba(100, 100, 100, 0.5);
    border-radius: 2px;
    background-color: #f1f1f1;
    padding: 4px;
    position: fixed;
    z-index: 99;
    /* overflow: auto; */
}

.color-dialog {
    overflow: auto;
}

.content label {
    margin-right: 0.5em;
}

/* Drop-down for formula editor */

.autocomplete-component {
    position: relative;
    /* display: inline-block; */
    display: grid;
    grid-template-columns: 1fr min-content;
}

#formula-toggle-button {
    border-radius: 0 10px 10px 0;
}

.autocomplete-component-list {
    background: #ffffff;
    display: none;
    position: absolute;
    border: 1px solid #d4d4d4;
    z-index: 10;
    bottom: 100%;
    /* top: 100%; */
    letter-spacing: -0.05em;
    left: 0;
    right: 0;
    max-height: 9em;
    overflow-y: scroll;
}

.autocomplete-component-item {
    padding: 0.7em;
    cursor: pointer;
    background-color: #fff;
    border-top: 1px solid #d4d4d4;
}

/* when hovering an item */
.autocomplete-component-item:hover {
    background-color: #ededed;
}

.autocomplete-component-item .formula-summary {
    font-weight: bold;
    display: inline-block;
    width: 260px;
}

#formula-input,
.autocomplete-component-item .formula {
    font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
}

.direction-popup-editor {
    width: 58px;
    height: 58px;
    background-color: #ffffff;
}

.direction-popup-editor .direction-picker-display:hover {
    border: 2px solid #2e81d4;
    margin: -1px;
}

.popup-list-item {
    white-space: nowrap;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    color: black;
}

.popup-list-item:hover {
    background-color: rgb(219, 219, 219) !important;
    box-shadow: 0px 0px 15px rgb(170, 170, 170) inset;
}

.shape-popup-editor td {
    white-space: nowrap;
}

.shape-popup-editor img {
    width: 26px;
    height: 26px;
    border: solid 1px #eee;
}

.shape-popup-editor img:hover {
    border: solid 1px #444;
}

#vat .rule .info {
    position: absolute;
    background: red;
    border-radius: 0 0 5px 0;
    font-size: 200%;
    padding: .1em .25em;
    z-index: 1;
    color: white;
}

#vat .unreachable-code,
#vat .vat-selected.unreachable-code {
    background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #ff8787 10px, #ff8787 20px);
    background-color: rgba(0, 0, 0, 0);
    background-clip: border-box;
    background-clip: padding-box;
    position: relative;
}

@media only screen and (max-width: 850px) { /* have to also edit this in vat.js makeRule*/
    .vat-table-row {
        grid-template-columns: 1fr;
    }

    #vat-conditions-header,
    #vat-actions-header,
    #vat-conditions-td,
    #vat-actions-td {
        display: none;
    }

    #vat-code-td-container {
        --x_translate: 0px;
        transform: translate(var(--x_translate), 0px);
        transition: transform 0.4s;
    }

    .vat_show_full_screen {
        position: absolute !important;
        height: var(--td-height, auto) !important;
        display: grid !important;
        top: 0;
        z-index: 90;
        width: calc(50% - 2px);
        opacity: 0;
        transition: opacity 1.6s;
    }

    .vat_show_full_screen #vat-conditions-scroll,  .vat_show_full_screen #vat-actions-scroll {
        justify-content: center;
    }

    .phone_CA_button {
        display: grid;
    }
}

@media only screen and (max-width: 425px) { 
    #vat-conditions-scroll, #vat-actions-scroll { /* For scrolling */
        padding-right: 20px;
    }
}

.vat-flippy-closed,
.vat-flippy-open {
    color: #eed;
    vertical-align: top;
    display: inline;
    font-size: 66%;
    margin-right: 2px;
}

/* ===[ Tool Bar ]=== */
#bottom-toolbar {
    grid-area: bottom-toolbar;
    display: grid;
    border-top: 1px solid rgb(219, 219, 219);
    height: var(--tool_var_height);
}

#gallery-buttons {
    /* Will never need to be used again */
    display: none;
}

#vat-buttons,
#vat-show-more-wraper,
#vat-show-more-container {
    display: grid;
    /* grid-auto-columns: max-content; */
    grid-template-rows: 1fr;
    background-color: rgb(237, 237, 237);
    justify-content: center;
    column-gap: 2px;
}

#vat-buttons>*,
#vat-show-more-wraper>*,
#vat-show-more-container>* {
    grid-row: 1 / 2;
    border: 1px solid #f8f9fa;
    background: #f8f9fa;
    height: var(--tool_var_height);
    word-break: break-all;
}

#vat-help-button {
    /* max-width: 70px;  old button*/

    width: 30px;
    height: 25px;
    display: grid;
    justify-content: center;
    box-sizing: border-box;
    padding: 2px;
    background: rgb(180, 180, 180);

    clip-path: circle(46%);
}

#vat-show-more-wraper,
#vat-show-more-container {
    background-color: rgb(237, 237, 237);
    border: none;
}

#vat-buttons button:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

#vat-show-more-button {
    display: none;
    /* position: relative; */
}

@media only screen and (max-width: 540px) {

    #vat-show-more-button {
        display: block;
    }

    .vat-hide-container>#vat-show-more-container {
        display: none;
    }

    #vat-show-more-container {
        position: fixed;
        width: 100vw;
        height: 3.1rem;
        left: 0;
        display: grid;
        background-color: rgba(237, 237, 237, 0.8);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* @media (pointer: coarse), (any-pointer: coarse) {

    #vat-code-td #vat-code {
        padding: 0px 1.5rem;
    }

} */

/*==[ Banner ]==*/
div.humane {
    -webkit-user-select: none;
    user-select: none;
    color: #222;
    cursor: pointer;
}

div.humane-success {
    background-color: #8f8;
}

div.humane-warning {
    background-color: #fa0;
}

div.humane-error {
    background-color: #f88;
}

/* ===[ Pop up Container ]=== */

/* ==[ AgentView ]== */

#pop-over-container {
    z-index: 91;
    position: fixed;
    width: 100%;

    display: none;
    height: var(--viewport-height);
    justify-content: center;
    align-content: center;
    background: rgba(0,0,0,0.6);
}

.AgentView {
    display: grid;
    justify-content: center;
    padding: 3px;
    padding-top: 10px;
    border-radius: 4px;
}

#new-agent-div {
    display: grid;
    grid-template-columns: 100%;
    background-color: rgb(237, 237, 237);
    padding: 1px;
    overflow: auto;
    gap: 3px;
}

.agent-name {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 5px;
}

#agent-name {
    margin: 0 !important;
    display: grid;
    justify-content: center;
    align-content: center;
}

#first-row {
    display: grid;
    grid-template-columns: max-content minmax(200px, min-content) minmax(200px, min-content) min-content min-content;
    column-gap: 3px;
    overflow: auto;
}

#agent-shape-group {
    background-color: rgb(219, 219, 219);
    display: grid;
    grid-auto-rows: min-content;
    row-gap: 2px;
    overflow: auto;
}

.shape-button {
    display: grid;
    grid-template-columns: min-content 1fr;
    cursor: pointer;
    background-color: white;
}

.shape-button-label {
    display: grid;
    align-content: center;
    padding: 0px 2px;
}

#new-agent-div .shape-button-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(../images/new-agent-icons.png);
    background-position: 0px 0px;
}

#new-agent-div .shape-button-icon.cube {
    background-position: -48px 0px;
}

#new-agent-div .shape-button-icon.sphere {
    background-position: -96px 0px;
}

#new-agent-div .shape-button-icon.tile {
    background-position: -144px 0px;
}

#new-agent-div .shape-button-icon.cylinder {
    background-position: -192px 0px;
}

#image-editor-tools,
#icon-view-tools {
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    margin: 0;
}

#image-editor-tools li,
#icon-view-tools li {
    display: inline;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}

#image-editor-tools li:hover,
#icon-view-tools li:hover {
    background-color: rgb(191, 191, 191);
}

#icon-view-tools #pan-agent-view {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/AgentView/Tools/pan-cursor.png);
}

#icon-view-tools #zoom-agent-view {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/AgentView/Tools/zoom-cursor.png);
}

#icon-view-tools #orbit-agent-view {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/AgentView/Tools/orbit-cursor.png);
}

#icon-view-tools #reset-agent-view {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/AgentView/Tools/reset-view.png);
}

.editor .center {
    display: inline-block;
}

#icon-view-tools #stl-export {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/AgentView/Tools/stl-export.png);
}

.tool-spacer {
    height: 1px !important;
    margin: 2px 0px !important;
    background-color: black;
}

.if-then .if,
.if-then .then,
.and-label {
    color: #a2a2a9;
    margin-top: 2px;
    margin-left: 0.5em;
    display: block;
    white-space: break-spaces;
}

.and-label {
    margin-left: 0.25em;
    float: left;
}

.if-then-middle {
    width: 32px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 32px 32px 32px;
    align-content: center;
}

.if-then-middle-up, .if-then-middle-down {
    cursor: pointer;
    background-color: rgb(180,180,180);
}

.if-then-middle-up:hover, .if-then-middle-down:hover {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(120, 120, 120) !important;
}

.if-then-middle-up {
    -webkit-mask-image: url("../images/arrow-top.svg");
    -webkit-mask-size: 10px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("../images/arrow-top.svg");
    mask-size: 10px;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
}

.if-then-middle-options-container {
    position: relative;
    display: grid;
    cursor: pointer;
}

.if-then-middle-background {    
    position: absolute;
    /* background-color: blue; */
    --border_back: rgb(150, 150, 150);
    /* --border_back: red; */

    background-image: conic-gradient(var(--border_back) 0deg, transparent 0deg);

    border-radius: 50%;
    width: 95%;
    height: 95%;
    justify-self: center;
    align-self: center;
}

.if-then-middle-options {
    z-index: 1;
    justify-self: center;
    align-self: center;
    width: 80%;
    height: 80%;
}

.if-then-middle-options > img {
    background-color: rgb(237, 237, 237);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    user-select: none;
    pointer-events: none;
}

.if-then-middle-options > img:hover {
    box-shadow: 0px 0px 9px rgb(140, 140, 140) inset;
}

/*=[ Middle Options pop up window ]=*/

.middle-options-pop-up {
    display: grid;
    grid-template-columns: none !important;
    /* grid-auto-columns: 1fr; */
    grid-auto-columns: minmax(50px, max-content);
    justify-content: center;
    align-content: center;
    cursor: pointer;
    gap: 2px;

    box-shadow: 5px 5px 2px rgba(100, 100, 100, 0.5);
    border-radius: 2px;
    background-color: #f1f1f1;
    height: 30px;
}

.middle-options-pop-up > * {
    grid-row: 1 / 2;
    display: grid;
    justify-content: center;
    align-content: center;
    height: 30px;
}

.middle-options-pop-up > *:hover {
    box-sizing: border-box;
    box-shadow: 0px 0px 5px 0px #cc95e1 inset;

}

.middle-method-up {
    background-image: url("../images/arrow-top.svg");
    background-size: 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.middle-method-down {
    background-image: url("../images/arrow-bottom.svg");
    background-size: 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/* .middle-rule-add-rule {
    background-image: url("../images/add-rule_v2.svg");
    background-size: 70px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.middle-method-add-method {
    background-image: url("../images/add-method.svg");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
} */

.middle-rule-delete {
    background-image: url(./../images/delete.svg);
    background-size: 19px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/*==*/
.if-then-middle-down {
    -webkit-mask-image: url("../images/arrow-bottom.svg");
    -webkit-mask-size: 10px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("../images/arrow-bottom.svg");
    mask-size: 10px;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
}

/* Value editor */
#one-true-value-editor button span {
    vertical-align: text-top;
}

#one-true-value-editor button {
    box-sizing: border-box;
    height: 26px;
    padding: 0.1em .5em;
}

.content-input {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content;
    gap: 3px;
    grid-template-rows: 26px;
}

.content-input > label {
    margin: 0 !important;
    display: grid;
    align-content: center;
}

.content-input input {
    height: 100%;
}

#formula-input {
    width: 250px;
}

#formula-toggle-button:hover, .cancel-button:hover, .accept-button:hover {
    box-shadow: 0px 0px 5px rgb(140, 140, 140) inset;
    background-color: rgb(191, 191, 191) !important;
}

.content-input input, #formula-toggle-button, .cancel-button, .accept-button {
    border: solid 1px rgb(191, 191, 191);
}

#formula-toggle-button {
    border-left: none;
}

.cancel-button {
    margin-left: 0.25em;
    color: darkred;
}

.accept-button {
    margin-left: 0.25em;
    color: green;
}

.leftDropIndicator {
    display: none;
    width: 32px;
    height: 32px;
    background-image: url(../js/vat/images/yellow-arrows.png);
    background-position: 0px 0px;
    position: absolute;
    pointer-events: none;
}

.rightDropIndicator {
    display: none;
    width: 32px;
    height: 32px;
    background-image: url(../js/vat/images/yellow-arrows.png);
    background-position: 32px 0px;
    position: absolute;
    pointer-events: none;
}

@media only screen and (max-width: 950px) {
    #first-row {
        grid-template-columns: max-content 120px 120px min-content min-content;
    }
}

@media only screen and (max-width: 740px) {

    .AgentView {
        height: var(--viewport-height);
    }

    #new-agent-div {
        height: var(--viewport-height);
        grid-template-rows: min-content 1fr min-content;
    }

    #first-row {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr min-content min-content;
    }

    #icon-view-tools {
        grid-template-columns: auto;
        grid-auto-columns: min-content;
        grid-template-rows: 100%;
        justify-content: start;
    }

    #icon-view-tools>* {
        grid-row: 1 / 2;
    }
}

#image-editor-tools #pencil {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/pencil.png);
}

#image-editor-tools #eraser {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/eraser.png);
}

#image-editor-tools #bucket {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/bucket.png);
}

#image-editor-tools #eye {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/eye.png);
}

#image-editor-tools #wand {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/wand.png);
}

#image-editor-tools #rect {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/rect.png);
}

#image-editor-tools #circ {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/circ.png);
}

#image-editor-tools #poly {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/poly.png);
}

#image-editor-tools #color-picker {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/bg.png);
}

#image-editor-tools #none {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/none.png);
}

#image-editor-tools #horz {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/horz.png);
}

#image-editor-tools #vert {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/vert.png);
}

#image-editor-tools #both {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/both.png);
}

#image-editor-tools #undo-image-changes {
    background-image: url(../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/tools_nb/undo.png);
}

#icon-editor {
    display: grid;
    justify-self: center;
    grid-template-rows: min-content min-content;
    background-color: rgb(237, 237, 237);
    overflow: auto;

    padding: 3px;
    padding-top: 10px;
    border-radius: 4px;

    gap: 3px;
}

#icon-editor-content {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content min-content;
    column-gap: 1px;
}

#controls-table {
    width: 320px;
    display: grid;
    padding: 0px 5px;
}

#controls-table > tr > tr {
    padding: 1px 0px;
}

#controls-table > tr > tr:first-child, #controls-table > tr > tr:last-child {
    padding-top:0px;
}

#controls-table>* {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
}

#icon-disclosure-row {
    display: none;
}

#icon-disclosure-controls {
    display: grid;
    grid-template-columns: 100%;
}

#icon-disclosure-controls>* {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}

td#pressure-td+td {
    /* hack for inflate buttons*/
    margin: 0 auto;
}

#icon-editor-button-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#right-bar {
    display: grid;
    grid-template-columns: min-content min-content 1px;
    gap:3px;
    justify-content: end;
    margin: 2px 0;
}

#left-bar>*, #right-bar>*, #dialog-button-bar > * {
    height: 26px;
    border: none;
    background: none;
    justify-content: center;
    align-content: center;
    padding: 5px 7px;
    border-radius: 2px;
    background-color: rgb(237, 237, 237);
    border: solid 1px rgb(191, 191, 191);
}

#left-bar>*:hover,#right-bar>*:hover {
    background-color: rgb(191, 191, 191);
}

.center {
    display: grid;
    justify-content: center;
}

#surfaces-dropdown {
    font-size: 12.5px;
    text-align: center;
}

#color-picker {
    z-index: 92;
}

#color-picker-display {
    height: 100%;
}

#color-picker-window {
    display: none;
    position: fixed;
    background-color: white;
    overflow: auto;
}

#color-picker-window > * {
    grid-column: 1 / 2;
}

.color_picker_table {
    display: grid;
}

.color_picker_table>* {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

@media only screen and (max-width: 1050px) {
    #controls-table {
        width: 180px;
    }
}

@media only screen and (max-width: 890px) {

    #icon-editor {
        height: var(--viewport-height);
    }

    #icon-editor-content {
        grid-template-columns: 100%;
        grid-auto-rows: min-content;
    }

    #controls-table {
        width: 320px;
    }

    #image-editor-tools {
        grid-template-columns: auto;
        grid-auto-columns: min-content;
        grid-template-rows: 100%;
        justify-content: start;
    }

    #image-editor-tools>* {
        grid-row: 1 / 2;
    }

    .tool-spacer {
        width: 1px !important;
    }
}

/* ex bootstrap submenu */
hr {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

/* Able to open Submenus level two */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-width: 0;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* End ex bootstrap submenu */

/*===[ Dragable Window ]====*/

.draggable-window {
    position: absolute;
    left: 170px;
    top: 32px;
    background: #eee;
    border-radius: 4px;
    z-index: 1000;
    display: none;
    box-shadow: 0 5px 2px rgba(100, 100, 100, 0.5);
}

.draggable-title-bar {
    background: #ccc;
    border-radius: 4px 4px 0px 0px;
    padding: 1em;
    text-align: right;
}

.draggable-window .title-section {
    float: left;
    font-size: 120%;
    margin-top: 0.25em;
}

.draggable-window .close-dialog {
    cursor: pointer;
    font-size: 80%;
    font-weight: bold;
    margin-left: 1em;
}

.draggable-flippy {
    position: relative;
    top: -3px;
    font-size: 75%;
    cursor: pointer;
    width: 2em;
    display: inline-block;
    text-align: left;
}

.draggable-window input.attributeRowNumber {
    margin: 0.5em 0;
    width: 284px;
}

.draggable-window .name {
    font-weight: bold;
}

.draggable-window .chat-item {
    padding: 2px;
}

#attributes-window-title:after {
    content: ' : ';
}

#display-attribute {
    width: 640px;
}

#display-attribute table {
    width: 100%;
}

#display-attribute .attribute-detail {
    min-width: 10em;
}

#display-attribute input[type=number] {
    width: 6em;
}

#chat-area {
    max-height: 400px;
    overflow-y: auto;
}

#chat-area::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
}

#chat-area::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #eee;
    background-color: rgba(0, 0, 0, .5);
}

/* ==[ new-shape-dialog ]== */

.new-shape-dialog {
    background-color: rgb(237, 237, 237);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 5px;

    padding: 23px;
}

#new-shape {
    grid-column: 1 / 3;
    /* text-align: center; */
    margin: 1px 0px;
}

#new-shape-label {
    margin: 0;
    display: grid;
    align-content: center;
}

#dialog-button-bar {
    grid-column: 1 / 3;
    display: grid;
    justify-content: center;
    grid-template-columns: min-content min-content;
    gap: 3px;
}

/* ==[ Light window ]== */

#light-configuration-window {
    width: 300px;
    z-index: 100;
    left: 50px;
}

#light-window {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* width: 550px; */
    width: 100%;
    overflow: auto;
}

#light-window input {
    width: 5em;
}

#light-window tr:hover td {
    background: #ccc;
}

#light-window tr:hover input {
    background-color: whitesmoke;
}

#light-hint:before {
    content: 'ℹ ';
}

input.light-window-number-input {
    width: 4em;
}

span.light-name {
    font-weight: bold;
}



/*==[ Color Picker ]==*/

.popped-over-content {
    background-color: rgb(237, 237, 237);
    overflow: auto;
}

.popped-over-content.skydome-dialog {
    width: 240px;
    color: #222;
    padding: 10px;
}

.popped-over-content.color-dialog {
    width: 350px;
    padding: 10px;
}

.popped-over-content.color-dialog td.label {
    text-align: right;
}

#color-chooser-slider input {
    width: 3.5em;
}

.color-dialog td {
    padding: 5px;
}

#color-wheel:hover {
    cursor: pointer;
}

#color-chooser-slider {
    display: block;
}

#color-chooser-slider table {
    width: 100%;
}

#color-wheel {
    width: 291px;
}

#color-wheel,
#color-chooser-preview {
    height: 256px;
    margin-bottom: 1em;
    display: inline-block;
}

#color-chooser-preview,
#color-chooser-preview-color {
    border-radius: 4px;
}

#color-chooser-preview {
    margin-left: 4px;
    width: 34px;
}

#color-chooser-preview-color {
    width: 100%;
    height: 100%;
}

#color-chooser-r-slider,
#color-chooser-g-slider,
#color-chooser-b-slider,
#color-chooser-a-slider {
    width: 180px;
}


/*==[ Plot window ]==*/
.plot-window {
    z-index: 99;
    display: none;
    position: absolute;
    min-width: 450px;
    width: 450px;
    border-radius: 4px;
    border: solid 1px #888;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: auto;
    grid-template-columns: [start] 100% [end];
    /* --graph_title: 25px;
    --graph_buttons: 35px;
    grid-template-rows: [start] min-content [canvas-start] calc(100% - var(--graph_title) - var(--graph_buttons)) [canvas-end] max-content 35px [end]; */
}

.plot-window-title-bar {
    border-radius: 4px 4px 0px 0px;
    background-color: white;
    top: 0px;
    left: 0px;
    position: sticky;
    z-index: 95;
    display: flex;
    align-items: center;
}


.plot-window-title {
    color: black;
    padding-left: 7px;
}

.plot-window-export-button {
    margin-left: 7px;
}

.plot-window-export-button,
.plot-window-reset-button {
    box-shadow: 0px 0px 1px rgb(140, 140, 140);
    background-color: rgba(255, 255, 255, 0.6);
}

.plot-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.plot-label {
    margin: 2px;
    display: grid;
    grid-template-rows: 100%;
}

.plot-color {
    grid-row: 1 / 2;
    width: 20px;
    margin-right: 5px;
}

.plot-text {
    grid-row: 1 / 2;
}

.plot-data-window {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99;
    justify-items: start;
}

.plot-window-container {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: [start] min-content [end];
}

.plot-window-canvas-td {
    position: relative;
}

.y-axis-labels {
    grid-row: start / end;
    margin-left: 5px;
    margin-right: 5px;
    display: grid;
    justify-items: end;
    align-content: space-between;
}

.plot-window-canvas {
    grid-row: start / end;
    width: 100% !important;
    /* width: 200px;
    height: 200px; */
}

.plot-max-value {
    position: absolute;
    top: 0px;
}

.plot-min-value {
    position: absolute;
    top: 165px;
}

.plot-legend-colorbox {
    display: inline-block;
    width: 1em;
    height: 1ex;
    margin: 2px;
    white-space: nowrap;
}

.plot-window-expand {
    margin-left: auto;
    cursor: pointer;
}

.plot-window-minimize {
    cursor: pointer;
}

.plot-window-close {
    /* background:red;
    color:black;
    float:right;
    width:15px;
    height:15px;
    text-align: center;
    border-radius: 4px; */
    cursor: pointer;
}

/*==[ Resize windows ]==*/


@media only screen and (max-width: 700px) {

    .draggable-window,
    .plot-window {
        width: 100vw !important;
        overflow: auto;
        left: 0px !important;
        top: auto !important;
        bottom: 0px !important;
    }

    .plot-window {
        min-width: 100px;
    }

    .plot-data-window {
        top: auto !important;
        bottom: 0px !important;
        left: 0px !important;
    }

}

#phone_control_background {
    display: none;
}

/*===[ Attribute Window, Simulation Properties, Light Window ]===*/

#attributes-window, #properties-window {
    overflow: hidden;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr min-content;
}

.attribute-window-table {
    /* margin-left: 6px; */
}

.attribute-window-table-div {
    overflow: auto;
    display: grid;
    align-content: start;
}

.attribute-window-button-div {
    display: flex;
    background-color: rgb(237, 237, 237);
    justify-content: center;
    column-gap: 2px;
    flex-wrap: wrap;
}

.attribute-window-button-div button {
    grid-row: 1 / 2;
    border: 1px solid #f8f9fa;
    background: #f8f9fa;
    height: var(--tool_var_height);
}

.attribute-window-button-div button:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.attribute-window-table-2 th {
    position: sticky;
    top: 0;
    background: rgb(237, 237, 237);
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    padding: 5px;
  }

.attribute-window-table-2 th, .attribute-window-table-2 td {
    border-left: solid 1px rgb(219, 219, 219);
}

.attribute-window-table-2 tr {
/* background: rgb(239, 239, 239); */
border-bottom: solid 1px rgb(219, 219, 219);
}

.attribute-window-table-2 tr:nth-child(even) td {
background: rgb(225, 225, 225);
}

#java-script-dialog {
    padding: 20px;
    width: 700px;
}

#generated-java-script-code {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    -webkit-tab-size: 4;
    tab-size: 4;
    font-family: Consolas, Menlo, monospace;
    display: block;
    width: 100%;
    height: 70vh;
    padding: 4px;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    margin-bottom: 1em;
    resize: none;
}

#send-feedback {
    display: grid;
    padding: 10px;
    border-radius: 4px;
    gap: 5px;
    /* height: 150px; */
    width: clamp(200px, 50vw, 500px);
    grid-template-rows: min-content 1fr min-content;
    justify-content: center;
}

#send-feedback > * {
    margin: 5px;
    text-align: center;
}

/* =[ Sounds ]=*/
#sound-interface {
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
}

#sound-interface-content {
    display: grid;
    grid-template-columns: [start] 200px [middle] 200px [end];
}

#sound-interface-content > * {
    display: grid;
    grid-column: start / end;
}

#sound-interface-content label {
    justify-self: center;
    align-content: center;
}

#sound-interface .small {
    text-align: center;
}

.small {
    margin: 10px 0px;
}

#sound-interface-content select {
    overflow: auto;
}

#sound-interface-first-column {
    grid-column: start / middle;
}

#sound-interface-second-column {
    grid-column: middle / end;
}

@media only screen and (max-width: 450px) {
    #sound-interface {
        width: 320px;
    }

    #sound-interface-content {
        grid-template-columns: [start] 1fr [end];
    }

    #sound-interface-first-column {
        grid-column:auto;
    }
    
    #sound-interface-second-column {
        grid-column:auto;
    }
}

.clone-current-world-dialog, .new-world-dialog {
    padding: 10px;
    border-radius: 4px;
}

.new-world-dialog .centered-table th, .new-world-dialog .centered-table td {
    padding: 1px;
}

.clone-current-world-dialog #dialog-button-bar, .new-world-dialog #dialog-button-bar {
    margin-top: 4px;
}


/* random overwrites from other css */

/* .form-control {
    padding: 0px !important;
} */

/*==[ Label Action ]==*/

.label-action-window {
    border-radius: 5px;
    padding: 5px;
    max-width: 200px;
    display: grid;
    justify-content: center;
    gap: 5px;
}

.label-action-window div {
    word-break: break-word;
}

.label-action-window-title {
    text-align: center;
}

.label-action-window-inputs {
    display: grid;
    gap: 2px;
}

.label-action-window-inputs button {
    margin: 0;
    padding: 3px;
    border-radius: 0px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
}

.label-action-window-inputs button:hover {
    background-color: rgb(191, 191, 191);
}

.label-action-window-input-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.label-action-window-input-container > div {
    display: grid;
    justify-content: center;
    align-content: center;
}

.label-action-window-input-container > input {
    box-sizing: border-box !important;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0px;
}

/* Cap this tranalsation*/

#set {
    text-transform: capitalize;
}