body {padding:0; margin:0; font-family:arial; overflow:hidden}
form {max-width:600px;}
form label {font-size:14px; white-space:nowrap; display:inline-block; width:250px;}
form input {width:100%;}
input[type="number"] {width:100px; margin-inline-end:1em;}
.row {margin: 0.5em 0; display:flex; align-items:center}
h1 {padding:0; margin:0}
a.action label {display:none;}
#cntIframe {padding:0.5em; max-width: 800px; max-height: 600px; height: 100%; border:2px solid #000; background:url('https://cdn.dribbble.com/users/3742211/screenshots/9195657/media/6796a544d6f9ef1293d8d8d9e60d38d5.gif') no-repeat center;}
#cntIframe.loading {padding:0.5em; max-width: 800px; max-height: 600px; height: 100%; border:2px solid #000; background:url('https://static.wixstatic.com/media/5922a2_2aa12e874d5f432fa64f1eccab7f0d38~mv2.gif') no-repeat center , url('https://img.directindustry.com/images_di/projects/images-g/bentley-introduces-contextcapture-supporting-reality-modeling-infrastructure-project-delivery-asset-performance-23781-9904933.jpg') no-repeat center}
#cntIframe iframe {width:100%; height:100%;}
#loading {text-align:center; padding-top:5em; animation: blink 1s linear infinite; font-weight:bold; font-size:32px; box-sizing: border-box;}
#sendToPreview {display:none;}
@keyframes blink{
    0%{color: yellow;}
    50%{color: blue;}
    100%{color: green;}
}
@keyframes hideTooltip {
    0% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0; visibility:hidden;}
}
.cols2 {display:flex;}

.main {display:flex; height:100%; width:100%;}
#explorer {background:#ebebef; width:300px; margin-inline-end:1em; position: sticky; top:5em}
#explorer input:not([type='checkbox']) {margin: 1em; padding: 1em; border-radius: 50px; width: 90%; border:1px solid silver;}
#explorer input::placeholder { text-align: right;}
#explorer ul {padding: 0; margin: 0; list-style: none; overflow-y:auto; overflow-x:hidden;}
#explorer .models li input {display:none; margin-inline-end:0.5em;}

#result {width:100%; overflow:auto;}
#result h1 {padding: 1.25em; background: antiquewhite;}
#result h1 span {font-size:14px; font-weight:normal}

#topControllers {font-size:12px;}
#topControllers .actions {display: flex; align-items: center; background: #fff; padding: 1em; justify-content: flex-start; gap:5px}

.newTab:before {content:"\e89e"; font-family: 'Material Symbols Outlined';}            
#copyIframe:before {content:"\e14d"; font-family: 'Material Symbols Outlined';}            
#reset:before {content:"\f053"; font-family: 'Material Symbols Outlined'; font-size:24px}

.icon {display:flex; align-items:center; margin:0.5em}
.icon:before {content:""; width:24px; height:24px; display:flex; align-items: center; background-size:cover}  
.icon.g-sheet:before {background-image:url(https://cdn-icons-png.flaticon.com/512/281/281778.png);}
.icon.g-drive:before {background-image:url(https://cdn-icons-png.flaticon.com/128/5968/5968523.png)}

[data-title] {position:relative;}
[data-title*='tooltip']:after {background: #fdfdab;  border: 1px solid #000; margin-inline-start: 2em; top: -1em; animation:hideTooltip 3s; -webkit-animation-fill-mode: forwards; position:absolute; z-index:10; padding:0.5em; display:none; font-size:12px; color:#000; width:auto; white-space: nowrap;}
[data-title*='tooltip']:hover:after {display: inline-block;}
body.en [data-title]:after {content:attr(data-titleEN)}
body.he [data-title]:after {content:attr(data-titleHE)}

width {background-image: url(https://img.icons8.com/?size=80&id=19427&format=png); display: inline-block; background-size: 90%; width:30px; height:30px; background-repeat:no-repeat; background-position:center;}
height {background-image: url(https://img.icons8.com/?size=80&id=19426&format=png); display: inline-block; background-size: 90%; width:30px; height:30px; background-repeat:no-repeat; background-position:center;}
input[disabled] + a {opacity:0.2; pointer-events:none; text-decoration: none; font-size:150%}
input.notempty + a {opacity:1; pointer-events:all;color:blue}
input.notempty + a:hover {color:#0bb10a}

#folders {height:100%; }
#folders > ul {height:100%;}
#folders ul {padding:0; margin:0; list-style: none; font-size:12px; cursor:default; padding: 0.1em 0.5em}
#folders ul li {position:relative; line-height:2em;}
#folders ul li div {display:inline-block; font-size:14px;}
#folders ul li.folder {font-weight:bold}
#folders ul li.folder > label{display:inline-block;}
#folders ul li.folder ul {font-weight:normal; display:none; padding-inline-start: 1em;}
#folders ul li.folder.open > ul {display:block}
#folders ul li.folder > label:before {content:'\f07b'; font-family: FontAwesome; color:#f1c683; margin-inline-end: 0.5em;  margin-inline-start: 0.5em; font-size:16px}
#folders ul li.folder.open > label:before {content:'\f07c';}
#folders ul li.folder > label:after {content: '+'; position:absolute; top:0.1em; left:0.7em; font-size:80%; margin-inline-start:0.1em; display: inline-flex; justify-content: center; align-items: center; width: 1em;  margin-inline-end: 0.5em;  margin-inline-start: 0.5em;}
#folders ul li.folder.open > label:after {content: '-'; }
#folders ul li.folder li.file {padding:0.5em 1em;}
#folders ul li.file {cursor:pointer; display: flex; align-items: flex-start; line-height: 1.5em; padding: 0.3em 0;}
#folders ul li.file label {cursor:pointer}
#folders ul li.file:hover {color:chocolate;}
#folders ul li.file.active {color:chocolate; text-shadow: chocolate 0 0 1px;}
#folders ul li.file:before {content:'\f5fd'; font-family: FontAwesome; color:#f1c683;  margin-inline-end: 0.5em;  margin-inline-start: 0.5em; color:#94d390;}
#folders.share ul li.file:before {content:'';margin-inline-end: 0;}

.actions a {width:20px; height:20px; border:1px solid silver; display:inline-block; border-radius:5px; padding:0.5em;background-color: aliceblue;}
.actions a:hover {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.22); }
#openAll:before {position: absolute; content: ""; background-image: url(https://icons.iconarchive.com/icons/pictogrammers/material/48/expand-all-icon.png); width: 20px; height: 20px; background-size: cover;}
#closeAll:before {position: absolute; content: ""; background-image: url(https://icons.iconarchive.com/icons/pictogrammers/material/48/collapse-all-outline-icon.png); width: 20px; height: 20px; background-size: cover;}
#sendToPreview:before {position: absolute; content: ""; background-image: url(https://icons.iconarchive.com/icons/pictogrammers/material/48/share-icon.png); width: 20px; height: 20px; background-size: cover;}

.preview #folders li {padding:0.5em 1em; display:flex; align-items:center;}
.preview #folders li:nth-child(odd) {background:#e2e3e3}
.preview #folders li:hover {background:aliceblue; cursor:pointer}
.preview #folders li.active {background:#d1fbdf; cursor:default}