/* This software is private property of pragmaDB.com and is protected by Copyright (c). You are free to use this software online, however copying or duplicating of the software is not allowed. */ /* @font-face { font-family: 'Bonvalet'; src: local("Bonvalet"), url('/css/Bonvalet-Regular.otf');} */ *{margin:0; padding:0; box-sizing: border-box; font-size: 1.1vmin; font-family:sans-serif, serif, arial, monospace;} input[name="cbVNLim"]:hover:after, input[name="cbATMU"]:hover:after,#purifyValuesBtn:hover:after {max-width: 20vw; font-size: 1.6rem; font-weight: 100; line-height: 110%; margin: 2vh 0 0 1vw; mix-blend-mode: normal !important; animation: tipEmerge 2s; padding: 0.5vh 0.5vw; position: absolute; content: attr(data-tip); overflow: hidden; color: grey; text-align: justify; background: yellow; border: 1px solid grey; border-radius: 0.85vmin; z-index: 10; cursor:pointer;} @keyframes tipEmerge {0% {opacity: 0; width: 0; height:0; font-size: 0; margin: 0;} 69.9% {opacity: 0; width: 0; height:0; font-size: 0; margin: 0;} 85% {opacity: 1; width: 20vw; font-size: 1rem;} 100% {margin: 2vh 0 0 1vw; } } hr {margin: 0; width: 100%;} html {width: 100vw; height: 100vh; overflow:hidden;} body {width: 100%; height: 100%; overflow:hidden; /*filter: invert(1) hue-rotate(230deg);*/} body div::-webkit-scrollbar {width: 1.2em; background: #fffff1;} body div::-webkit-scrollbar-thumb {background: radial-gradient(#77dfff 1%, #abe3ff 5%, #dbefff 30%,#fff 70%);} button {min-height: 2.6vh; font-size: 80%; padding: 0 0.15vw; color: lightgrey; background: linear-gradient(#4a4f5b,#454b55); border: none;} button:hover {cursor: pointer; color: white !important; transition: color 0.2s ease-in-out;} textarea {height: 2.5vh; min-height: 2.6vh; min-width: 2vw; color: darkslategray; overflow-x: hidden; background: linen; padding: 0.1vh 0.15vw; cursor: default;} textarea:focus{background: white !important; color: black !important; border-color: red !important;} input:checked {} nav {width: 100%; min-height: 3.4vh; font-size: calc(2rem + 0.5vmax); padding: 0.8vh 0 0.15vh 0.63vw; color: midnightblue; font-stretch: condensed; /*white-space: nowrap;*/ border-width: 0.1px 0px 0px 1px; border-color: lightslategray; border-style: solid;} nav:hover {color: orangered; border-color: orangered; border-style: dashed; cursor: pointer;} nav:before {content: attr(data-fst); color: darkslategray; margin-right: 0.25vw; margin-left: -0.25vw; padding: 0.2vh 0.15vw; /*border: 1px solid darkslategray;*/ background: powderblue;} nav:after{content: '';} nav > * {display: none;} nav+nav {margin-top: 0.1vh;} nav:first-child {margin-top: 0.68vh;} div>nav {margin-top: 0 !important; font-size: calc(2.5rem + 0.5vmax) !important; color: #024d00; white-space: normal; padding-right: 1.5vw;} div>nav:before {font-size: calc(2.8rem + 0.5vmax) !important;} div>nav>nav {font-size: calc(2.4rem + 0.5vmax) !important; color: #4f1200; white-space: normal; } div>nav>nav:before {font-size: calc(2.6rem + 0.5vmax) !important;} div>nav>nav>nav {font-size: calc(2.1rem + 0.5vmax) !important; color: #000d64;white-space: normal;} div>nav>nav>nav:before {font-size: calc(2.6rem + 0.5vmax) !important;} .pages{color:darkmagenta;} .pages:before{background: #b0c3e6 !important;} span{display: flex; align-content: center; align-items: center;} .order0 {order: 0;} .order1 {order: 1;} .order2 {order: 2;} .order3 {order: 3;} /* .navItemOpen {transform: perspective(1px) translateZ(0px);} */ .navItemOpen > * {display: block;} .navItemSelected {min-height: 4vh; background-size: 100% 4vh !important; border-style: solid; color: #e600e6 !important; border-width: 0px 0px 1px 1px; background: rgba(145,210,255,20%); } .navItemOpen:before {content: attr(data-fst); color: yellow; font-weight: 600; padding: 0.2vh 0.15vw; background: darkcyan; border-radius: 1vh;} .navItemSelected:before {font-size: 1.7rem; padding: 0.3vh 0 0 0; color: white;} .navItemSelected.navItemOpen:before {font-size: 3rem; padding: 0.2vh 0.15vw; color: yellow; background: deepskyblue;} /* .navItemSelected.navItemOpen:after {width: 2.5vh; height: 2.5vh; position: absolute; top: 0; right: 0; background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%);} */ .hidden{display: none !important; } .invisible{opacity: 0 !important;} .invisible:hover{cursor: none !important;} .inactive{opacity: 0.3 !important;} #pragmaMainContainer {width: 100%; height: 100%; display: flex; flex-direction: column; } #upperLineContainer {width: 100%; height: 3vh; display: flex; flex-direction: row; justify-content: space-between; align-items: center;} #pathLineContainer {width: 85%; height: 100%; background: ivory; display: flex; flex-grow: 1;} #pathLineHumanValue{width: 5vw; height: 100%; flex-shrink: 0; background: pink;} #pathLineValue {width: 100%; height: 100%; display: flex; background: #d3dbe4;} #pathLineValue>span{min-width: 2%; max-width: 10%; padding: 0.1vh 0.15vw; font-size: 1.2rem; font-stretch: condensed; line-height: 100%; overflow-y: auto; display: flex; justify-content: center; align-items: center; cursor: default;} #pathLineValue>span:nth-child(odd){background: #e4e4e4;} #pathLineValue>span:nth-child(even){background: #ebf4f4;} #contactUsContainer{width: 5.5%; height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(#ffffaa, #d8d88b);} #contactUsContainer>a{font-size: 2.2em; text-decoration: none;} #KR_Container { width: 100%; height: calc(100% - 3vh); display: flex; flex-direction: row; } .grow{flex-grow: 1;} #LF_Container{width: 35%; /*max-width: 67%;*/ flex-grow: 0.98; height:100%; background: repeating-linear-gradient(90deg, #c1cbd6 0%, #fffeff 0%, rgba(252, 252, 252, 0.8) 92%, #d4deea 100%), repeating-linear-gradient(52deg, #8899aa 33%, #ddd 33%, #fcfcfc 66%, #8899aa 80%);} .lfInitialized {transition: width 1s ease; transition-delay: 2s;} /* .lfInitialized:hover{ width: 33% !important; transition: width 1s ease; transition-delay: 1s;} */ #LF { width: 100%; height: 100%; display: flex; flex-direction: column; flex: 1 0 auto; } #LF_Menu {width: 100%; height: 3vh; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;} #loadKRContainer{width:8vw; height: 100%; display: flex; justify-content: space-between; align-items: center;} #loadKRMsgContainer{width: 100%; height: 100%; background: darkblue; font-size: 100%; color: #b0b0af; display: flex; justify-content: center; align-items: center; text-align: center; cursor: default;} #loadKRMsgContainer>#loadKRBtnsContainer{display: none;} #loadKRBtnsContainer{position: absolute; height: 4vh; left: 7.5vw; display: flex; justify-content: flex-end; align-items: center;} #loadKRBtnsContainer>button{width: 5vw; min-width: 50px; height: 3vh; font-size: 100%; border: 1px solid grey;} /* #importJsonCPsBtn{width: 5vw; height: 3vh; font-size: 100%; border: 1px solid grey;} */ #loadKRMsgContainer:hover{color: LightSkyBlue;} #loadKRMsgContainer:hover>#loadKRBtnsContainer{display: flex;} #krTitleTA {width: 50%; height: 100%; flex-grow: 1; font-size: 1.3rem; white-space: nowrap; resize: none; overflow: hidden; background: #9c9c9c; color: white; text-align: center;} #saveKRContainer{width:8vw; height: 100%; display: flex; justify-content: space-between; align-items: center;} #saveKRMsgContainer{width: 100%; height: 100%; position: relative; background: darkgreen; font-size: 100%; color: #b0b0af; display: flex; justify-content: center; align-items: center; text-align: center; cursor: default;} #saveKRMsgContainer>#saveKRBtnsContainer{display: none;} #saveKRBtnsContainer{position: absolute; height: 4vh; right: 8vw; display: flex; justify-content: flex-start; align-items: center;} #saveKRBtnsContainer>button{width: 5vw; min-width: 50px; height: 3vh; flex-grow: 1; font-size: 100%; border: 1px solid grey;} /* #krSaveHDBtn{width: 5vw; height: 3vh; flex-grow: 1; font-size: 100%; border: 1px solid grey;} */ #saveKRMsgContainer:hover{color: LightSkyBlue;} #saveKRMsgContainer:hover>#saveKRBtnsContainer{display: flex;} #RRScrollContainer {display: flex; flex-direction: column; width: 100%; height: calc(100% - 3vh); overflow-y: auto; overflow-x: hidden;} #RRTreeContainer{ width: 100%; height: 100%} #MF_Container{width: 30%; max-width: 33%; height:100%; flex-shrink: 0; border-left: 1px solid black;} #MF_Container.mfInitialState::before{content: "👐👐🀸👐👐🀻👐👐 If you are seeing this page, you must re-start pragmaDB.com in a latest version of Google Chrome, or Firefox browser."; font-size: 400%; line-height: 100%; float: right; text-align: center; color: sienna; width: 100%; } #MF_Container::after{position: absolute; top: 15px; content: attr(data-menu); font-size: 3vh; font-weight: 600; color: firebrick;} #MF {width: 100%; height: 100%; /*flex: 1 0 auto;*/ } #mfBodyContainer {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center;} #qssMenuContainer {width: 99%; height: 3vh; background: aliceblue; display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0;} #qssTitleContainer{width: 100%; height: 100%;} #qssTitleIntro{display: none; width: 100%; font-size: 1rem; background: #aa8c6b; color: white;/* display: flex; align-content: center; justify-content: center;*/ text-align: center;} #mfQSSTitle{width: auto; min-height: 80%; padding-left: 0.25vw; flex-grow: 1; overflow-y: auto; color: #e600e6; font-stretch: condensed; font-size: calc(1rem + 0.3vmax); line-height: 80%;} #qssControlContainer{width: 18.5%; min-width: 40px; height: 100%; position: relative; font-size: 100%; color: #b0b0af; display: flex; justify-content: flex-end; text-align: center; cursor: default; background: linear-gradient(#4a4f5b,#454b55); border: 1px solid grey;} #qssControlContainer>div:nth-child(1){width: 100%; min-width: 40px; display: flex; justify-content: center; align-items: center; text-align: center;} #qssControlBtnsContainer{display: none; position: absolute; width: 6vw; height: 15vh; flex-direction: column; justify-content: center; align-items: center;} #updateSelectedQSSBtn{margin-top: 3.25vh; background: linear-gradient(#4a6f8b,#456855);} #createNewQSSBtn{margin-top: 0.25vh; background: linear-gradient(#684a88,#564577);} #delQSSBtn{margin-top: 2vh; background: orangered;} #qssControlBtnsContainer>button{width: 6vw; min-width: 60px; height: 3vh; font-size: 100%; box-shadow: 1vmin 1vmin 2vmin #888888;} #qssControlBtnsContainer:hover{color: white;} #qssControlContainer:hover>#qssControlBtnsContainer{display: flex !important;} #qssItemsContainer{width: 100%; min-height: 14%; max-height: 70%; display: flex; flex-direction: column; overflow-y: scroll; flex-shrink: 0; background-image: url(../Icons/mf.png); background-size: cover; background-repeat: no-repeat; } /* #qssItemsContainer {width: 100%; max-height: 70%; display: flex; flex-direction: column; overflow-y: scroll; flex-grow: 0.2; flex-shrink: 0; background: repeating-linear-gradient(45deg, #c1cbd6 33%, #ddd 33%, rgba(252, 252, 252, 0.8) 66%, #c1cbd6 81%), repeating-linear-gradient(-33deg, #8899aa 33%, #ddd 33%, #fcfcfc 66%, #8899aa 80%);} */ #pragmaticInstanceTemplate{display: none;} .qssItem {width: 100%; min-height: 2.5vh; flex-shrink: 0; margin-top: 0.25vh; color: midnightblue; background: powderblue; display: flex; flex-direction: row; justify-content: space-around; align-items: center; transition: min-height 0.25s, background-color floralwhite; background: 0.5s; cursor: grab; cursor: -webkit-grab; border: 1px solid dimgrey; border-right: none; background: powderblue;} .qssItem:hover {box-shadow: 0 0 30vh 4px #ebf8ef, 0 0 12vh 6px #8899aa; filter: brightness(105%) contrast(103%); color: orangered;} .qssItemHLValue {width: 8%; height: 100%; flex-shrink: 0; color: orangered; font-size: 125%; display: flex; justify-content: center; align-items: center;} .qssAUIDValue{width: 8%; margin: 0 1%; height: 100%; flex-shrink: 0; font-size: 125%; font-weight: 600; color: darkred; display: flex; justify-content: space-between; align-items: center;} .qssChildrenCount{min-width: 14%; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 125%; color: midnightblue; line-height: 105%; text-align: center; overflow: hidden;} .qssItemTitleValue{min-width: 40%; height: 100%; min-height: 2.4vh; margin: 0.25vh 0; display: flex; align-items: center; justify-content: center; flex-grow: 1; font-size: calc(1.3rem + 0.5vmax); text-align: center; overflow: hidden;} .qssItemTitleMU{width: 18%; height: 95%; flex-shrink: 0; color: salmon; font-size: 130%; background: #ebf8ef; padding-left: 0.15vw; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; line-height: 90%;} .draggedOver {align-items: flex-end !important; background: #00b1bb !important; min-height: 6vh !important; padding-top: 3vh !important; border-radius: 0.8vh !important;} .draggedOver>* {color: orangered !important;} #voiceUIContainer{width: 100%; height: 31vh; max-height: 85%; margin-top: 1vh; flex-grow: 1; display: flex; flex-direction: column-reverse; background: floralwhite; color: black; box-shadow: 0px -7px 7px -7px #484848; overflow-y: scroll; overflow-x: hidden;} #recogTextContainer{position: relative; width: 100%; max-height: 20%; height: auto; overflow-y: auto; background-image: linear-gradient(90deg, transparent 3rem, navajowhite 2px, transparent 3.4rem);} #recogTextContainer p{color: brown; font-size: 2rem; line-height: 2rem; margin-top: 1rem; margin-left: 4rem; background-image: linear-gradient(0, #ffadad, 1px, transparent, 1px, transparent);} #recogTextContainer p::before{position: absolute; height: 3vh; width: 3vh; margin-left: -4rem; margin-top: -0.5rem; content: ''; background-image: url(../Icons/procSpeechColorIcon.png); background-size: contain; background-repeat: no-repeat; background-position: 60% 30%;} #textQuestionContainer{width: 100%; height: auto; display: flex; display: none;} #textQuestionContainer>div{width: 15%} #textQuestionTA{width: 75%; height: auto; min-height: 8vh; max-height: 18vh; flex-grow: 1; flex-shrink: 0; font-size: calc(1.5rem + 0.5vmax); resize:vertical; background: #e0ffe0;} #textQuestionBtn{width: 100%; height: 50%; background: green; font-size: 100%;} #listnIcon{cursor: pointer; width: 100%; height: 50%; background-color: #f3feff; background-image: url(../Icons/listenMed.png); background-size: 100% 125%; background-repeat: no-repeat; background-position: center; background-blend-mode: multiply; border-radius: 0.5vw; border-style: ridge;} #listnIcon:hover{filter: hue-rotate(-45deg); border: 1px solid orangered;} #listnIcon.on{animation: listnOn linear 1s infinite;} @keyframes listnOn{0% {background-color: orangered;background-size: 10%;}} #recogProcessContainer{position: relative; width: 100%; height: 60%; flex-grow: 1; overflow-y: scroll; overflow-x: hidden; background-color: #efefef; background-image: linear-gradient(90deg, transparent 3rem, #edb0b0 1px, transparent 3.3rem);} #recogProcessContainer p{display: flex; align-items: center; color: brown; font-size: 1.6rem; line-height: 2rem; margin-top: 1rem; padding-left: 4rem; padding-right: 0.2vw; background-image: linear-gradient(0, #ffadad, 1px, transparent, 1px, transparent);} #recogProcessContainer p::before{position: absolute; height: 3vh; width: 3vh; margin-left: -4rem; margin-top: -0.5rem; content: ''; background-image: url(../Icons/procSpeechColorIcon.png); background-size: contain; background-repeat: no-repeat; background-position: 60% 30%;} #recogProcessContainer p.pQSS{cursor: pointer;} #recogProcessContainer p.pQSS::before{background-image: none !important;} #recogProcessContainer p.quSe{color: darkgreen;} #recogProcessContainer p.quSe::before{position: absolute; height: 3vh; width: 3vh; margin-left: -3rem; margin-top: -0.5rem; content: '?'; font-size: large; background-image: none !important; /*background-image: url(../Icons/procSpeechColorIcon.png); background-size: contain; background-repeat: no-repeat; background-position: 60% 30%;*/} #recogProcessContainer p.pQSS::after{min-width: 15%; background: lightyellow; border-radius: 1vh; content:'Create Context Tree?' !important; color: red !important; text-align: center; font-size: 70%; line-height: 120%; border: 1px solid wheat; box-shadow: 2px 1px 11px skyblue;} #recogProcessContainer p.pQSS:hover{background: #cff9ff; border-style: groove;} #RF_Container{width: 35%; height:100%; background: #40404c;} #RF_Container.rfInitialState::before{content: "πŸ€”(πŸ“΅πŸš―πŸš±πŸš­πŸ–°!)"; font-size: 500%; line-height: 83%; color: sienna;} #RF {width: 100%; height: 100%; display: flex; flex-direction: column;} #rfMsgContainer {width: 100%; height: 3vh; background: #7FBB00; flex-shrink: 0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;} #acSpTitleContainer{width: 100%; height: 100%;} #selSPTitleIntro{width: 100%; max-height: 1vh; font-size: 1rem; font-stretch: condensed; background: #aa8c6b; color: white; text-align: center; overflow: hidden;} #selSPTitleTA{width: 100%; height: 2vh; min-height: 2vh; padding:0; margin:0; border-top: none; text-align: center; font-size: 1.5rem; resize: none; overflow-y: hidden; flex-grow: 1; background: #9c9c9c; color: white;} #rfMsgContainer>label{width: 9.5%; min-width: 35px; padding: 0 0.25vw; text-align: center; color: white;} #rfMsgContainer>label:nth-child(1){text-align: right;} #rfMsgContainer>input{min-width:4%; text-align: center; color: white; display: flex; justify-content: center; align-items: center;} #spMenuContainer{min-width: 12%; height: 3vh; display: flex; justify-content: space-between; align-items: center;} #spControlMsgContainer{width: 4vw; height: 100%; font-size: 100%; color: #b0b0af; display: flex; justify-content: flex-end; align-items: center; text-align: center; cursor: default; background: linear-gradient(#4a4f5b,#454b55); border: 1px solid grey;} #spControlMsgContainer>div:nth-child(1){width: 100%; display: flex; justify-content: center; align-items: center; text-align: center;} #spControlMsgContainer>#spControlBtnsContainer{display: none;} #spControlBtnsContainer{position: absolute; width: 6vw; height: 12vh; top: 6vh; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background: aliceblue;} #spControlBtnsContainer>button{width: 6vw; height: 3vh; margin-top: 0.25vh; font-size: 100%; box-shadow: 1vmin 1vmin 2vmin #888888;} #invokeSPACBtn{background: darkcyan;} #createNewSPBtn{background: linear-gradient(#684a88,#564577);} #delSPBtn{margin-top: 2vh !important; background: orangered;} #spControlMsgContainer:hover{color: white;} #spControlMsgContainer:hover>#spControlBtnsContainer{display: flex;} #newAttributeContainer{width: 100%; height: 3vh; flex-shrink: 0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } #newAttributeValueType{width: 21.7%; height: 98%; font-size: 150%; background:linear-gradient(#defff0,#e8fbf7);} #newAttributeValueType>option{ font-size: 90%; } .profileLinkedFields{width: 1.5%; color: #454c5c;} #newAttributeTitleValue{width: 50%; height: 98%; flex-grow: 1; font-size: 1.5rem; line-height: 1.5rem; white-space: nowrap; resize: none; background: #e8fbf7;} #addNewAttributeBtn{width: 13%; height:98%; background: #004e64; font-size: 110%;} #rfIAHeaderContainer {width: 14%; height: 98%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; background: #500606;} #rfForgottenAList {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 110%; color: #b0b0af; cursor: default;} #rfForgottenAList:hover{color: white;} #aAList .attrElRestoreBtn, #aAList .attrElFinDelBtn {display: none;} #aAList{width: 100%; flex-grow: 1; resize:vertical; display: flex; flex-direction: column; overflow-y: scroll; overflow-x: hidden; background: repeating-linear-gradient(45deg, #a8b4c0 33%, #ddd 33%, rgba(252, 252, 252, 0.8) 66%, #a8b4c0 81%), repeating-linear-gradient(-33deg, #8899aa 33%, #ddd 33%, #fcfcfc 66%, #8899aa 80%); /*background: #8899aa;*/} .attributeItem{width: 100%; height: auto; min-height: 3.3vh; margin: 0.2vh 0; border: 1px solid dimgrey; flex-shrink: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .attributeItem:hover{box-shadow: 0 0 30vh 4px #ebf8ef, 0 0 12vh 6px #8899aa; filter: brightness(105%) contrast(103%);} .attributeItem:hover .attrElTitleTA {color: orangered;} .cbElement{cursor: pointer; width: 2.6vh; height: 2.6vh; margin-right: 0.45%; flex-shrink: 0;} .attrNumEl{width: 5%; min-height: 2.6vh; font-size: 125%; font-weight: 600; color: darkred; display: flex; align-items: center; justify-content: space-around; cursor: grab; cursor: -webkit-grab;} .TVCount{width: 5%; min-height: 2.6vh; color: midnightblue; overflow: hidden; display: flex; justify-content: center; align-items: center; } .attrElValType{width: 9%; min-height: 2.6vh; font-size: 117%; color: midnightblue; text-align: center; display: flex; justify-content: center; align-items: center; background: rgba(0,120,255,0.1);} .attrElTitleTA{width: 30%; flex-grow: 1; min-height: 4vh; padding: 0.5vh; border: none; resize: none; line-height: calc(1.3rem + 0.5vmax); font-size: calc(1.3rem + 0.5vmax); color: midnightblue; /*white-space: pre;*/ background: transparent;} .attrElMU{width: 10%; min-height: 2.5vh; background: #ebf8ef; color: salmon; resize: none; font-size: 130%; line-height: 90%; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer;} .attrElLinksBtn{display: none; opacity: 0.5; width: 8%; height: 100%; font-size: 97%; pointer-events:none;} .attrElForgetBtn {width: 3%; height: 100%; background: orangered; font-size: 107%;} .attrElRestoreBtn {width: 9%; height: 100%; background: green; } .attrElFinDelBtn {width: 9%; height: 100%; background: orangered;} .attrElGCM{width:10%; text-align: right; background: rgba(250, 250, 250, 0.5); resize: none; overflow: hidden; font-size: 117%; line-height: 175%; white-space: pre;} .attrElCollapseControl{width: 3%; height: auto; background: #d7fae3; font-size: 200%; line-height: 100%; text-align: center; color: cadetblue;} #iAList {width: 100%; height: 10.6%; display: flex; flex-direction: column; overflow-y: scroll; overflow-x: hidden; background-color: #aab7c2; background-image: linear-gradient(9deg, transparent 50%, rgba(255,255,255,.4) 50%),linear-gradient(62deg, transparent 50%, rgba(255,255,255,.4) 50%); background-size: 1.8vw 19vh;} #iAList .attrElCollapseControl, #iAList input, #iAList .attrElGCM, #iAList .manageValueTypesBtn, #iAList .attrElLinksBtn, #iAList .attrElForgetBtn {display: none} #iAList textarea, #iAList .attrNumEl, #iAList .attrElMU, #iAList .TVCount {pointer-events:none; background: #B87333;} #iAList .attrElValType{width: 10%;} #iAList .attrElTitleTA{width: 50%;} .itemOnEdit {background: white; color: black; caret-color: red;} .templateItem {display: none;} #serviceElements {} .showMsgOff {display: none !important; margin-left: -100vw; opacity: 0; transition: margin-left 0.1s, opacity 0.3s;} .showMsgOn {top: 40vh; margin-left: 40vw; margin-right: 40vw; opacity: 1; transition: margin-left 0.1s, opacity 0.3s;} .showMsgLfOn {top: 20vh; margin-left: 1vw; width: 17vw; max-height: 79vh !important; opacity: 1; transition: margin-left 0.1s, opacity 0.3s; font-size: 120%;} .showMsgLfOn>div { font-size: 120%; text-align: justify;} .atvOff {display: none !important; margin-left: 101vw; transition: margin-left 0.2s;} .atvOn {top: 0; margin-left: 20vw; transition: margin-left 0.2s} #loginContainer {position: absolute; z-index: 999; background: darkorange; color: black; display: flex; flex-direction: column; padding: 1vmin; align-items: center; justify-content: space-evenly; min-height: 12vmin; max-height: 40vmin; max-width: 20vw; border-style: outset; border-width: 1px; box-shadow: 1vmin 1vmin 2vmin #888888; overflow-y: auto; border-radius: 0.8vmin;} #loginInputContainer{display: flex; flex-direction: column;} #logEmail, #logPass{height: 3vh; width: 100%; border-radius: 0.5vmin; font-size: 200%; padding: 0 0.25vw; margin-bottom: 0.5vh;} #loginBtnContainer {width: 100%; margin-top: 0.5vh; display: flex; justify-content: space-between;} #signInOkBtn, #newSignUpBtn, #signInCancelBtn {padding: 0.2vh 0.5vw; width: 30%; font-size: 125%; background: palegoldenrod;} #loginResultContainer{} #loginResultMsg{color: darkred;} #saveAndExitTitlesList {background: green; color: white;} #cancelChargesInTitlesList { background: aliceblue; color: red; } .allMUCItemsContainer {display: none;} #cAlertContainer {position: absolute; z-index: 1000; background: pink; color: red; display: flex; flex-direction: column; padding: 1.5vmin; align-items: center; justify-content: space-between; min-height: 8vmin; max-height: 40vmin; max-width: 20vw; border-style: outset; border-width: 1px; box-shadow: 1vmin 1vmin 2vmin #888888; overflow-y: auto; overflow-x:hidden;} #cAlertBtn {margin-top: 0.5vh; width: 5vw; padding: 0.5vmin; margin-left: auto; margin-right: auto; background: lightgrey; color: darkslategrey; font-size: 130%;} #cAlertBtn:hover{font-weight: 600;} #cChoiceContainer{padding: 1vmin; position: absolute; z-index: 1000; background: #ffe8d2; color: red; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 8vmin; max-height: 40vmin; max-width: 20vw; border: 1px outset white; box-shadow: 1vmin 1vmin 2vmin #888888; overflow-x:hidden; overflow-y:auto;} #choiceMsg{font-size: 130%; line-height: 140%; text-align: center; } #choiceButtonsContainer{width: 105%; height: 3vh; margin-top: 1vmin; font-size: 160%; display: flex; justify-content: space-around; align-items: center;} #choiceButtonsContainer>button{min-width: 6vw; min-height: 90%; padding: 0.25vw; margin: 0 0.25vw;} #choiceNoBtn {background: #00008d;} #choiceYesBtn {background: #008d00;} #choiceInfo{cursor: pointer; width: 2vw; height: 100%; font-size: 2rem; display: flex; justify-content: center; align-items: center;} #cacMainContainer{width: 100vw; height: 100vh; margin-top: 0vh; margin-left: 101vw; position: absolute; color: black; display: flex; flex-direction: column;} .cacMainBG{background-color: #dbdbdb; background-image: linear-gradient(30deg, #8899aa 12%, transparent 12.5%, transparent 87%, #8899aa 87.5%, #8899AA), linear-gradient(150deg, #8899aa 12%, transparent 12.5%, transparent 87%, #8899aa 87.5%, #8899AA), linear-gradient(30deg, #8899aa 12%, transparent 12.5%, transparent 87%, #8899aa 87.5%, #8899AA), linear-gradient(150deg, #8899aa 12%, transparent 12.5%, transparent 87%, #8899aa 87.5%, #8899AA), linear-gradient(60deg, lightslategray 25%, transparent 25.5%, transparent 75%, lightslategray 75%, lightslategray), linear-gradient(60deg, lightslategray 25%, transparent 25.5%, transparent 75%, lightslategray 75%, lightslategray); background-size: 40px 70px; background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;} .cacOff{display: none !important;} .cacOn {top: 0; margin-left: 0 !important; transition: margin-left 0.5s} #cacMenuContainer{width: 100%; height: 3vh; background-color: black; display: flex; justify-content: space-between; align-items: center;} #cacEditControl{width: 2.6vh; height: 2.6vh; border-radius: 1.3vh; flex-shrink: 0; background: radial-gradient(white, mediumspringgreen); margin: 0 0.15vw;} #cacCancelBtn{width: 6vw; height: 98%; font-size: 112%; font-weight: 600; background: #ffc800; color: red; margin: 0 0.1vw;} #cacSaveBtn{width: 6vw; height: 98%; font-size: 112%; font-weight: 600; background: #008d00; margin: 0 0.1vw;} #cacAmbiguityBtn{width: 6vw; height: 98%; font-size: 112%; font-weight: 600; line-height: 100%; margin: 0 0.1vw; background: blueviolet;} #spacScaleControl{width: 3.5vh; height: 2.5vh; font-size: 2.5rem; cursor: pointer; display: flex; justify-content: center; align-items: center;} #spacScaleControl>div{display: none} #spacScaleControl:hover>div{display: block;} #cacScalerContainer{position: absolute; z-index: 1; width: 30vmin; height: 30vmin; padding: 0 0; transform: translate(-13.2vmin, 16.4vmin); border: 1px solid black; background-color: lightsteelblue; background-image: linear-gradient(to bottom, floralwhite, 0.1px, transparent, 1px, transparent), repeating-linear-gradient(to right, floralwhite, 0.1px, transparent, 1px, transparent 2.7rem); background-size: 100% 2.7rem;} #cacScalerEl{position: relative; z-index: 2; width: 5vmin; height: 5vmin; background-color: darkorchid; border-radius: 5vmin; left: 24.5vmin; top: 0.5vmin; color: white; font-size: 95%; display: flex; justify-content: center; align-items: center; text-align: center; cursor: grab;} #cacSPOuterContainer{width: 100%; height: 97vh; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border: 0.1px solid transparent; backdrop-filter: invert(1) contrast(0.4); transition: background-color 0.2s; box-shadow: 1vw 2vh 1vw 3px #353535;} #cacSPTitle{pointer-events: none; width: auto; padding: 0 3vw; background-image: linear-gradient(to right,rgba(255,0,0,0.35),rgba(165,0,0,1),rgba(255,0,0,0.35)); font-size: 2rem; color: white; align-self: center; border-radius: 3vw; filter: drop-shadow(2px 4px 3px black);} #cacSPConnectiveContainer{width: auto; margin-top: 0.5vh; display: flex; transform-origin: top left; filter: hue-rotate(45deg);} .cacItem{pointer-events: all; width: fit-content; height: 100%; margin-left: 4px; display: flex; flex-direction: column; justify-content: flex-start; /*align-items: center;*/ border-top: 0.1px solid beige; background-color: transparent; transition: background-color 0.2s; color: white; /*cursor: grab;*/} .cacItem:first-child{margin-left: 0; border-left: none;} .cacItem:last-child{margin-right: 0;} .cacTitleContainer{pointer-events: none; width: 100%; display: flex; justify-content: space-between; align-items: center;} .cacCM{pointer-events: all; width: 1.2vmax; height: 100%; flex-shrink: 0; background-color: darkslategray; color: antiquewhite; cursor: context-menu; display: flex; justify-content: center; align-items: center; border-left: 0.1px solid beige; border-right: 0.1px solid slategrey;} .cacTitle{pointer-events: none; width: 100%; height: 100%; min-height: 4vh; margin-left: 0.25vw; font-size: 1.3rem; overflow: hidden; display: flex; justify-content: space-between;} /* .cacTitle{pointer-events: none; width: 100%; height: 100%; min-height: 4.5vh; font-size: 1.3rem; color: white; padding: 1px; overflow: hidden; display: flex; justify-content: space-between;} */ /* .cacTitle:before{pointer-events: all; width: auto; height: 100%; flex-shrink: 0; content: attr(data-before); padding: 0 0.3vw; background-color: dimgray; color: antiquewhite; cursor: context-menu; display: flex; justify-content: center; align-items: center;} */ .cacTitle:before{content: '';} .cacTitle:after{width: 0.25vw; pointer-events: none; content: '';} .cacConnectiveContainer{display: flex; height: 100%; width: auto;} .eacItem{pointer-events: all; width: fit-content; min-width: 7rem; height: 100%; margin-right: 0.4vw; /*cursor: grab;*/ background-color: coral; transition: background-color 0.2s; border: 0.1px solid beige; border-right: 0.1px solid #888;; display: flex; justify-content: center; align-items: flex-end;} .eacItem:first-child{margin-left: 0;} .eacItem:last-child{margin-right: 0;} .eacItemTitle{pointer-events: none; width: auto; min-height: 4.5vh; font-size: 117%; color: white; padding: 0 0.25vw; text-align: center;} .overDroppable{cursor: copy; background-color: darkslategray !important; border: 0.1px dashed yellow !important; box-sizing: border-box !important;} .equalIDs{background-color: red !important;} .cacInTransition{transform: scale(0.7); opacity: 0.3;} .widthLim{max-width: 8vw;} #cacContextMenuContainer{position: absolute; z-index: 2; width:auto; min-width: 5vw; height:auto; min-height: 5vh; background: white; box-shadow: 1vmin 1vmin 1vmin #40404c; border-radius: 0.3vmin;} .cacCmItem{width: 100%; min-height: 3vh; margin: 0.3vh 0; padding: 0.5vh 0.5vw; font-size: 1.6rem; cursor: pointer; } .cacCmItem:nth-child(odd){ background-color: ghostwhite;} .cacCmItem:nth-child(even){ background-color: lightyellow;} .cacCmItem:hover{background-color: cyan;} #cmImportValues{opacity: 50%;} #cmExportCPs{opacity: 50%;} #cacSelCacKeeperC{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3);} #cacTitleEditContainer{width:60%; height:auto; position: absolute; top: 40%; left: 20%; right: 20%; z-index: 2; background: white; box-shadow: 1vmin 1vmin 1vmin #40404c; display: flex;} #cacCmCancel{width: 5vw; font-size: 130%; content: 'Cancel'; background: grey; display: flex; justify-content: center; align-items: center;} #cacTitleEditTAContainer{width: 100%; height: auto; display: flex; flex-direction: column;} #cacTitleEditTAContainer>p{width: 100%; min-height: 3vh; padding: 0.25vh 1vw; display: flex; justify-content: center; align-items: center; text-align: center; background-image: linear-gradient(#eee 0.1rem, transparent 0.2rem);} #cacTMsgElMain{font-size: 260%; color: mediumvioletred; border-bottom: 0.1px solid red; background-position-y: 0.3rem; background-size: 100% 2.8rem; background-color: #eee;} #cacTMsgElSecond{font-size: 150%; font-style: oblique; background-size: 100% 1.6rem; background-position-y: 0.5rem; background-color: whitesmoke;} #cacTitleEditTA{width:100% !important; height:auto; font-size: 150%;} #cacCmConfirm{width: 5vw; font-size: 130%; content: 'Confirm'; background: #008d00; display: flex; justify-content: center; align-items: center;} .cacTitleInEdit{color: black; background: white !important; background-position-y: center; background-image: linear-gradient(transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee 1.1rem, transparent .1rem) !important; background-size: 100% 1.3rem !important; border: 0.1px solid red; } .cacAttrInControl{color: black; background: repeating-linear-gradient(45deg, #a8b4c0 33%, #ddd 33%, rgba(252, 252, 252, 0.8) 66%, #a8b4c0 81%), repeating-linear-gradient(-33deg, #8899aa 33%, #ddd 33%, #fcfcfc 66%, #8899aa 80%);} #cacAttrControlContainer{position: absolute; top: 37vh; left: 33vw; z-index: 2; width:34vw; height:57vh; background: #c6d2de; border: 1px solid dimgrey; box-shadow: 1vmin 1vmin 1vmin #40404c; display: flex; flex-direction: column; justify-content: space-between;} #cacAttrControlHeaderContainer{width: 100%; height: 3vh; display: flex;} #cacAttrControlSaveBtn{width: 12%; height: 98%; font-size: 117%; background: #008d00; display: flex; justify-content: center; align-items: center; text-align: center;} #cacAttrControlHeaderContainer>p{width: 76%; height: 98%; color: darkblue; font-size: 137%; line-height: 100%; display: flex; justify-content: center; align-items: center;} #cacAttrControlCancelBtn{width: 12%; height: 98%; font-size: 117%; background: #ffc800; color: red; display: flex; justify-content: center; align-items: center;} #cacAllSelAttrContainer{width: 100%; height: 54vh; display: flex; justify-content: space-between; background: repeating-linear-gradient(45deg, #a8b4c0 33%, #ddd 33%, rgba(252, 252, 252, 0.8) 66%, #a8b4c0 81%), repeating-linear-gradient(-33deg, #8899aa 33%, #ddd 33%, #fcfcfc 66%, #8899aa 80%);} #cacAllAttrItemsContainer{width: 49.8%; height: 100%; display: flex; flex-direction: column; overflow-y: scroll;} #cacAllAttrItemsContainer::before{height: 3vh; content: 'Attributes of Knowledge Realm'; color: mediumvioletred; font-size: 130%; display: flex; justify-content: center; align-items: center; flex-shrink: 0;} .cacAllAttrItem{width: 97%; height: 3vh; cursor: copy; font-size: 130%; line-height: 100%; margin: 0 0 0.25vh 0.25vw; border: 1px solid dimgrey; display: flex; align-items: center; flex-shrink: 0;} .cacAllAttrItem::before{width: 1.2vw; height: 100%; content: attr(data-auid); margin-right: 0.25vw; color: coral; background: blanchedalmond; display: flex; justify-content: center; align-items: center;} .duplicatedCacA{background: red; color: white;} #cacSelAttrItemsContainer{width: 49.8%; height: 100%; display: flex; flex-direction: column; overflow-y: auto;} #cacSelAttrItemsContainer::before{min-height: 3vh; flex-shrink: 0; content: attr(data-cactitle); color: mediumvioletred; font-size: 130%; display: flex; justify-content: center; align-items: center; text-align: center;} .cacSelAttrItem{width: 97%; height: 3vh; cursor: alias; font-size: 130%; margin: 0 0 0.25vh 0.25vw; border: 1px solid dimgrey; display: flex; align-items: center; flex-shrink: 0;} .cacSelAttrItem::before{width: 1.2vw; height: 100%; content: attr(data-auid); margin-right: 0.25vw; color: coral; background: blanchedalmond; display: flex; justify-content: center; align-items: center;} .newlyAddedCacA{background: palegreen;} #aTVsContainer{margin-left: 0; position: absolute; background: darkgray; color: black; display: flex; flex-direction: row; justify-content: flex-start; height: 100vh; width: 100vw; overflow: hidden;} #aTVSettingsContainer {width: 40%; height: 100%; display: flex; flex-direction: column;} #atvEditATContainer {width: 100%; height: 3.5vh; margin-bottom: 0.25vh; display: flex; flex-direction: row; justify-content: space-around; align-items: center;} #exitATVContainer {width: auto; height: 100%; background: slatergray; display: flex; flex-direction: row; justify-content: space-between; align-items: center;} #atvEditControl{width: 2.6vh; height: 2.6vh; border-radius: 1.3vh; flex-shrink: 0; background: radial-gradient(white, mediumspringgreen);} .editSaved{opacity: 0.5;} .editNotSaved{background: radial-gradient(blue,cyan,darkviolet) !important; border: 2px solid wheat; cursor: pointer;} .editNotSaved:hover:after{content: attr(data-tip); max-width: 20vw; font-size: 1.6em; margin: 2vh 0 0 1vw; mix-blend-mode: normal !important; animation: tipEmerge 1s; padding: 0.5vh 0.5vw; position: absolute; overflow: hidden; color: grey; /*text-align: justify;*/ background: yellow; border: 1px solid grey; border-radius: 0.85vmin; z-index: 10; } #exitATVBtn {width: 90%; height: 100%; min-width: 4vw; background: #008d00; color: white; font-size: 112%; line-height: 110%; font-weight: 600; border-bottom-left-radius: 5vh; border-top-left-radius: 5vh; cursor: pointer;} #atvEditTitleTA{width: 88%; height: 100%; flex-grow: 1; resize: none; font-size: 160%; color: red; background: #e0fff6;} #atvEditTitleTA::placeholder{color: #b0b0af;} #vMUVideo{width: 10%; height: 85%; cursor: pointer; display: flex; justify-content: center; align-items:center; color: #2c2c2c; font-size: 350%; line-height: 0; background: radial-gradient(#ffdf30,#70a7ff); border-radius: 1.5vh;} #valuesSortOrderContainer {width: 100%; height: 15%;} #sortOrderHeaderContainer{width: 100%; height: 3.5vh; color: ghostwhite; background: #40404c; display: flex; justify-content: space-between; align-items: center;} #soHeaderAMUIDbers{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} #soHeaderAMUIDbers>div{font-size: 140%;} #atvHeaderMUID, #atvHeaderAUID{padding: 0 0.25vw;} #atvSortSettingsContainer{display: flex; flex-direction: column; background: #b0c0d0;} #atvSortMethodsContainer{margin: 0.75vh 0.25vw; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .sortByItem{min-width: 15%; height: 4vh; padding: 0 0.5vw; font-size: 130%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background: #eee; border: 1px solid grey; border-radius: 1.5vh;} .sortMethodInput {max-height: 2vh; min-height: 2vh; max-width: 2vh; min-width: 2vh; } .sortIndicatorValue{width: 5%; color: #d50f0f; text-orientation: upright; writing-mode: vertical-rl; font-size: 117%;} #atvSortDirection {height: 5vh;display: flex; justify-content: space-between; align-items: center; background: #eee;} #sortOrderAZContainer, #sortOrderZAContainer {width: 16%; height: 100%; padding: 0.5vh 0.25vw; display: flex; align-items: center; justify-content: space-around; background: aliceblue;} #azSortOrderInfoContainer, #zaSortOrderInfoContainer{/*width: 75%;*/ height: 100%; display: flex; justify-content: center; align-items: center;} #azSOMsg{font-size: 107%; text-align: left;} #zaSOMsg{font-size: 107%; text-align: right;} #valuesSortDirectionMessage{ color: darkmagenta; height: auto; text-align: center; } #valuesSortDirectionMessage > div {font-size: 110%;} #atvTitlesContainer{ height: 83%; flex-grow: 1; width: 100%; background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,0.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 2vw 4vh; background-size: 4vw 4vh; background-color: #92a3b3;} #aTHeaderContainer{width: 100%; height: 4%; color: ghostwhite; background: #40404c; display: flex; justify-content: space-around; align-items: center;} #addNewMUCBtn{width: 13%; height: 100%; font-size: 117%; background: linear-gradient(#684a88,#564577);} #aTHeaderMessage{width: 12%; font-size: 140%; line-height: 100%; padding-left: 1%; display: flex; flex-grow: 1; justify-content: center; align-items: center;} #atvMucSelector{width: 38%; height: 100%; flex-grow: 0.5; font-size: 150%;} #atvMucSelector option {font-size: 95%;} #allMUCItemsContainer{width: 100%; height: 96%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; } #atvInActiveMUCMsg {min-height: 2.5vh; display: flex; justify-content: center; align-items: center;color: white; font-size: 150%; background: #40404c; cursor: default;} #aMUActiveList {width: 100%; height: 83%; min-height: 20%; flex-grow: 0.99; overflow-y: scroll; resize: vertical; display: flex; flex-direction: column;} .gridContainer{ display: grid; grid-template-columns: 1fr 1fr 6fr 7fr 6fr 3fr 3fr; grid-template-rows: 1fr 0.75fr 1fr 1fr; gap: 1px 0.5px; grid-template-areas: "radioElement mucNumInList atvMUCItemTA atvMUCItemTA atvMUCItemAbTA deleteATBtn deleteATBtn" "cbMUElement vMUMsg vMUMsg vMUMsg vMUMsg vMUMsg vMUMsg" "muOne muOne muOne muMany muFew muFewStart muFewEnd" "muZero muZero muZero muTwo muOther muOther muOther"; } .attrMUCItem{width: 100%; height: 13vh; padding-top: 0.25vh; border-top: 2px solid #44525f; border-bottom: 2px solid #44525f; box-shadow: 2px 2px 4px 1px darkslategrey; /*display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: space-around; align-items: center;*/} .attrMUCItem:nth-last-child(odd){background-color: rgb(224 238 255/0.7);} .attrMUCItem:nth-last-child(even){background-color: rgb(246 248 235/0.7);} .attrMUCItem:hover{border-top: 2px dotted #28ff00; border-bottom: 2px dotted #28ff00;} .radioElement{grid-area: 1/1/2/2; place-self: center stretch;} .mucNumInList{grid-area: 1/2/2/3; place-self: center; font-size: 150%; font-weight: 600; color: darkviolet;} .atvMUCItemTA{grid-area: 1/3/2/5; place-self: center stretch; height: 3vh; resize: none; color: magenta; font-size: 160%; overflow: hidden; background: #e0eeff;} .atvMUCItemAbTA{ grid-area: 1/5/2/8; place-self: center stretch; height: 3vh; resize: none; color: magenta; font-size: 160%; overflow: hidden; background: #e0f8ff;} .deleteATBtn{grid-area: 2/7/2/8; place-self: center stretch; height: 3vh; background: orangered; color: white; font-size: 110%;} .restoreATBtn{grid-area: 1/6/2/7; place-self: center stretch; height: 3vh; background: green; color: white; font-size: 110%;} .finalDeleteATBtn{grid-area: 1/7/2/8; place-self: center stretch; height: 3vh; background: orangered; color: white; font-size: 110%;} .turnATIntoABtn{grid-area: 1/5/2/6; place-self: center stretch; height: 3vh; background: darkcyan; color: white; font-size: 110%;} .cbMUElement{grid-area: 2/1/3/2; place-self: center stretch;} .vMUMsg{grid-area: 2/2/3/8; place-self: center; color: darkred; font-size: 150%;} .muOne{grid-area: 3/1/4/4; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; overflow: hidden;} .muMany{grid-area: 3/4/4/5; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; overflow: hidden;} .muFew{grid-area: 3/5/4/6; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; background: floralwhite; overflow: hidden;} .muFewStart{grid-area: 3/6/4/7; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; text-align: center; overflow: hidden; background: floralwhite;} .muFewEnd{grid-area: 3/7/4/8; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; text-align: center; overflow: hidden; background: floralwhite;} .muZero{grid-area: 4/1/5/4; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; overflow: hidden;} .muTwo{ grid-area: 4/4/5/5; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; overflow: hidden;} .muOther{grid-area: 4/5/5/8; place-self: center stretch; height: 3vh; resize: none; font-size: 125%; line-height: 100%; overflow: hidden;} .urlToFileNames{grid-area: 5/1/5/8;place-self: center stretch; height: 3vh; flex-grow: 1; resize: none; font-size: 125%; line-height: 100%; overflow: hidden; background: powderblue;} #aMUActiveList .restoreATBtn, #aMUActiveList .finalDeleteATBtn, #aMUActiveList .turnATIntoABtn{display: none;} #aMUInactiveList{width: 100%; height: 14vh; overflow-y: scroll; display: flex; flex-direction: column; background-color: #485566; background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.4) 50%),linear-gradient(62deg, transparent 50%, rgba(255,255,255,.4) 50%); background-size: 1.8vw 28vh;} #aMUInactiveList textarea, #aMUInactiveList input, #aMUInactiveList .vMUMsg, #aMUInactiveList .deleteATBtn, #aMUInactiveList .muSpaceOne, #aMUInactiveList .muSpaceTwo {display: none;} #aMUInactiveList textarea, #aMUInactiveList .vMUMsg {pointer-events:none; background: #B87333; flex-grow: 0.75; color: dimgrey; font-weight: normal;} #aMUInactiveList .atvMUCItemTA{display: block;} #aMUInactiveList .attrMUCItem{height: 3.5vh} #aMUInactiveList .attrMUCItem:hover {box-shadow: 0 0 30vh 4px #ebf8ef, 0 0 12vh 6px #8899aa; filter: brightness(105%) contrast(103%);} #atvAllValuesContainer {width: 60%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-left: 1px solid gray;} #atvAllValuesHeaderContainer {width: 100%; height: 3.5vh; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; background: #40404c; color: ghostwhite;} #valSerialJoin{width: 49%; height: 2vh;} #valParallelJoin{width: 49%; height: 2vh;} #attributeValuesMsgContainer {width: 72%; flex-grow: 1; padding-left: 9%; display: flex; justify-content: center; align-items: center;} #atvValCountMsg {font-size: 150%;} #atvExitUnsaved {width: 11.3%; height: 100%; background: #ffc800; color: red; font-size: 112%; line-height: 110%; font-weight: 600;} #allATVListsContainer { width: 100%; height: calc(100% - 3.8vh); overflow: hidden; display: flex; flex-direction: column;} #allATVListsContainer>hr{margin: 0 !important;} #createNewValueItem{width: 100%; height: 3.6vh; display: flex; justify-content: space-between; align-items: center;} #purifyValuesBtn{width: 10%; height: 100%; font-size: 110%; line-height: 100%;} #purifyValuesVideo{width: 4.5%; height: 85%; padding: 0 2vw; cursor: pointer; display: flex; justify-content: center; align-items: center; color: #2c2c2c; font-size: 350%; line-height: 0; background: radial-gradient(#ffdf30,#70a7ff); border-radius: 1.5vh;} #valueTypeIntroContainer{width: 15%; height: 100%; flex-grow: 1; background: lightblue; display: flex; justify-content: center; align-items: center; color: maroon;} #atvValueTypeIntro{width: 50%; flex-grow: 0.4; font-size: 140%; line-height: 100%;} #atvValueType{cursor: pointer; font-size: 140%; font-weight: 600;} #addNewValueItemContainer {width: 60.5%; height: 100%; margin-top: 0.25vh; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;} #newValueElement {width: 60%; height: 98%; flex-grow: 1; resize: none; font-size: 150%;} #addNewValueBtn{width: 18.6%; height: 98%; font-size: 107%; background: linear-gradient(#684a88,#564577);} #aATVList{height: 83%; min-height: 20%; flex-grow: 1; overflow-y: scroll; resize: vertical; display: flex; flex-direction: column; background: #b0c0d0; background-image: linear-gradient(#eee .1em, transparent 0.1em); background-size: 100% 3vh; /*background: #6d7780;*/} .atvItem{min-height: 2.5vh; padding: 0 0.1vw; transition: min-height 0.25s, background 0.5s; border: 1px solid dimgrey; display: flex; flex-shrink: 0; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; margin-top: 0.25vh;} .atvItem:hover{box-shadow: 0 0 30vh 4px #ebf8ef, 0 0 12vh 6px #8899aa; filter: brightness(105%) contrast(103%);} .valueNumInList{width: 7%; min-width: 3vw; height: 100%; min-height: 2.5vh; font-size: 125%; color: darkred; background: #eee; display: flex; align-items: center; justify-content: space-around; cursor: grab; cursor: -webkit-grab;} .atInValuesList{width: 15%; height: 100%; min-height: 2.5vh; font-size: 140%; line-height: 100%; background: #e0eeff; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden;} .atvValItemTA{width: 56.5%; min-height: 2.5vh; resize: vertical; font-size: 140%; color: midnightblue; border: none;} .valueMUInList{width: 10%; height: 100%; min-height: 2.5vh; flex-grow: 1; font-size: 140%; line-height: 100%; background: #ebf8ef; color: salmon; display: flex; justify-content: center; align-items: center; overflow: hidden;} .valueLinksBtn{display: none; width: 8%; font-size: 110%;} .deleteATVBtn {width: 8%; height: 100%; font-size: 110%; background: orangered; color: white;} #aATVList .restoreATVBtn, #aATVList .finalDeleteATVBtn{display: none;} #tfMailContainer{width: 100vw; height: 100vh; position: absolute; top: 0; left: 0;} #tfVsContainer{width: 100vw; height: 100vh; position: absolute; background: aliceblue; display: flex; flex-direction: column;} #tfHeaderContainer{width: 100%; height: 3vh; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;} #tfHeader{width: 43%; height: 100%; font-size: 200%; color: firebrick; display: flex; justify-content: center; align-items: center;} #compItemsCount{width: 36%; height: 100%; font-size: 200%; color: darkslategray; display: flex; justify-content: flex-start; align-items: center;} #tfSubsExitBtn{width: 11%; height: 100%; font-size: 107%; color: lightgrey; background: green; border-bottom-left-radius: 5vh; border-top-left-radius: 5vh;} #tfCancelBtn{width: 6%; height: 100%; font-size: 117%; background: #ffc800; color: red !important; border: 1px solid red;} #tfControls{width: 100%; height: auto; margin-top: 1vh; display: flex; justify-content: space-around; flex-shrink: 0;} #tfSeparatorsTA{width: 18.85%; height: 5vh; font-size: 150%; resize: none;} #tfCalcSepBtn{width: 6%; font-size: 107%; background: indigo;} #tfSubstituteTA{width: 50%; flex-grow: 1; height: 5vh; line-height: 100%; font-size: 122%; resize: none;} #tfSubstituteBtn{width: 6%; font-size: 107%; background: indigo;} #tfItemsHeader{width: 100%; height: 3vh; margin-top: 0.5vh; background: #f5bbb0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;} #tfPrevCompItemsBtn{width: 3%; height: 100%; font-size: 100%; background: #600;} #tfHeadCompoundVals{width: 18.85%; height: 100%; font-size: 120%; display: flex; align-items: center; justify-content: center; } #tfNextCompItemsBtn{width: 3%; height: 100%; font-size: 100%; background: #600;} #tfHeadAddRemoveAAContainer{width: 24%; height: 100%; border-left: 1px solid grey; display: flex; justify-content: flex-end; align-items: center;} #tfAddAlongsideAttributeBtn{width: 28%; height: 90%; background: linear-gradient(#684a88,#564577);} #tfDelLastAlongsideAttrBtn{width: 28%; height: 90%; background: orangered;} #tfHeadAtomicVals{width: 21.5%; height: 100%; font-size: 140%; display: flex; align-items: center; justify-content: center; flex-grow: 1;} #tfHeadTFTypeChangeContainer{width: 16%; display: flex; justify-content: flex-start; align-items: center;} #tfHeadTFTypeChangeContainer>input{width: 24%; height: 2vh;} #tfHeadTFTypeChangeContainer>label{width: 24%; height: 100%; display: flex; align-items: center;} #tfHeadSaveLoadAAContainer{width: 12%; height: 100%; display: flex; justify-content: flex-end; align-items: center;} #tfLoadAAsBtn{width: 50%; height: 90%; background: linear-gradient(#4a4f5b,#454b55); color: #b0b0af; overflow: hidden; border: 1px solid #181a1f;} #tfSaveAAsBtn{width: 50%; height: 90%; background: linear-gradient(#4a4f5b,#454b55); color: #b0b0af; overflow: hidden; border: 1px solid #181a1f;} #tfAssocContainer{width: 100%; /*height: max-content;*/ min-height: 4.5vh; max-height:50vh; padding: 0.5vh 0 0 0.25vw; flex-shrink: 0; flex-grow: 1; display: flex; justify-content: space-between; align-items:center; background: lightcyan; overflow-y: auto;} #tfCompAssocContainer{width: 24.65%; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid grey;} #tfCompAssocVal{width: 100%; height: 100%; font-size: 130%; display: flex; align-items: center;} #tfAssocItemsContainer{width: 50%; height: 100%; padding: 0.25vh 0; flex-grow: 1; /*display: flex; flex-direction: column;*/} .tfAssocItem{width: 100%; display: flex; justify-content: space-between; align-items:center; } .tfAssocUIDTA{width: 3.2%; min-height: 2vh; font-size: 85%; text-align: center; border-radius: 1.5vh; resize: none; overflow: hidden; line-height: 100%; background: #fff0e0;} .tfAssocTitleTA{width: 19.8%; min-height: 3vh; max-height: 8vh; font-size: 120%; resize: vertical; overflow: hidden; line-height: 100%;} .tfAssocMUCA{width: 3%; min-height: 3vh; max-height: 8vh; font-size: 85%; text-align: center; resize: none; overflow: hidden; line-height: 100%;} .tfAssocBondTA{width: 6%; min-height: 3vh; max-height: 8vh; font-size: 85%; text-align: center; resize: vertical; overflow: hidden; line-height: 100%;} .tfAssocAtomicVal{width: 30%; min-height: 3vh; max-height: 8vh; margin: 0.2vh 0; padding: 0 0.2vw; font-size: 122%; display: flex; flex-grow: 1; justify-content: center; align-items: center; border-bottom: solid 1px darkgoldenrod; border-top: solid 1px darkgoldenrod;} .tfAssocRegexTA{width: 30%; min-height: 3vh; max-height: 8vh; font-size: 110%; resize: vertical;} .tfAssocIndexTA{width: 8%; min-height: 3vh; max-height: 8vh; font-size: 110%; resize: vertical;} .tfaaRegsTASelected{border-left-width: 6px; border-color: crimson;} #tfAllItemsContainer{width: 100%; height: 90vh; background: azure; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: scroll;} .tfItem{width: 100%; /*height: fit-content; height: -moz-fit-content;*/ min-height: 2.5vh; border-top: 1px dashed darkgrey; border-bottom: 1px dashed darkgrey; /*padding: 0.5vh 0;*/ margin: 0.25vh 0; background: #e6f8ef; display: flex; flex-shrink: 0;} .tfCompItemContainer{width: 25%; height: auto; display: flex; align-items: center; justify-content: center; border-right: 1px solid grey;} .tfCompValItem{width: 100%; padding: 0 0.25vw; font-size: 130%; display: flex; align-items: center; flex-wrap: wrap;} .tfCompValItem>p{width: 100%; margin: 0.25vh; padding: 0.25vh; font-size: 1.1rem; color: maroon;} .tfCompValItem>div{margin: 0.25vh; padding: 0.25vh; font-size: 1.3rem; color: darkblue;} .tfAtomicItemsContainer{width: 50%; height: 100%; padding: 0.25vh 0; display: flex; flex-direction: column; flex-grow: 1} .tfAtomicItem{width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center;} .tfAtomicValItem{width: 32%; min-height: 3vh; max-height: 8vh; margin: 0.2vh 0; padding: 0 0.2vw; font-size: 122%; display: flex; flex-grow: 1; justify-content: center; align-items: center; border-bottom: solid 1px darkgoldenrod; border-top: solid 1px darkgoldenrod;} #atvTFCover{width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: black; opacity: 0.5;} .atvOrder0{order: -1 !important; filter: saturate(300%); min-height: 3.2vh;} .atvOrder0 > .atvValItemTA, .atvOrder0 > .attrElTitleTA, .atvOrder0 > .atvMUCItemTA {font-size: 180%; color: orangered;} .atvOrder1{order: 1 !important;} .atvOrder2{order: 2 !important; opacity: 0.5} @keyframes unsavedWarning { 0%{background: #008d00; font-size: 100%; color: white;} 50%{background: orangered; font-size: 120%; color: white;} 100%{background: darkviolet; font-size: 100%; color: white;} } .unsavedWarning{animation: unsavedWarning 1s infinite;} #cpIDPContainer{width: 67vw; height: 100vh; margin-top: 0; margin-left: 101vw; position: absolute; background: #66708b; color: black; box-shadow: -1vw 5vh 1vmin -7px #484848; display: flex; flex-direction: column;} .cpIDPOn{top: 0vh; margin-left: 33vw !important; transition: margin-left 0.5s linear;} #cpIDPMenuContainer{width: 100%; height: 3vh; background: black; border: 0.1px solid black; display: flex; justify-content: space-between;} #cpIDPMenuContainer * {font-size: 1.1rem;} #cpIDPSaveBtn{width: 5vw; height: 100%; background: #008d00;} #cpIDPSaveBtn.unsavedWarning{animation: unsavedWarning 1s infinite;} #cpCSVCreateNewCP{width: 5vw; height: 100%; display: flex; align-items: center; text-align: center; cursor: default; background: linear-gradient(#684a88,#564577); color: #b0b0af;} #cpCSVCreateNewCP:hover{color: floralwhite;} #cpCSVCreateNewCPContainer{position: absolute; width: 16vw; height: 3.5vh; margin-top: 3.2vh; font-size: 95%; display: none; justify-content: space-around; align-items: center; text-align: center; cursor: default;background: rgba(104, 74, 136, 0.5); color: #b0b0af; transition: background 0.3s ease-in-out, color 0.3s ease-in-out;} #cpCSVCreateNewCP:hover>#cpCSVCreateNewCPContainer{display: flex; align-items: flex-end;} #cpCSVCreateNewCPContainer:hover{display: flex;} #cpCSVCreateNewCPContainer>button{width: 5vw; height: 3vh; box-shadow: 0.5vh 0.5vh 0.5vh grey; background: linear-gradient(#684a88,#564577);} #cpCSVNewCPDefaultVals{} #cpCSVNewCPUponPath{} #cpCSVCloneSelCP{} #cpCSVOutputControlContainer{width: 11vw; height: 100%; display: flex; justify-content: space-around; align-items: center; background: darkblue;} .cpCSVRBContainer{width: 32%; height: 100%; display: flex; justify-content: center; align-items: center;} .cpCSVRBContainer>label{margin-left: 0.2vw; color: white;} #cpCSVCACRB{pointer-events: none; opacity: 0.5;} #cpCSVCACRB + label{pointer-events: none; opacity: 0.5;} #cpCSVCountMsg{width: 20vw; flex-grow: 0.98; font-size: 137%; background: lightslategrey; display: flex; justify-content: center;align-items: center; color: white;} #cpCSVFilterSearchTA{display: none; width: 13vw; height: 100%; font-size: 112%; padding-top: 0.55vh; resize: none; border-radius: 1.2vh; } /* #cpIDPMakeAttrFromVals{width: 5vw; height: 100%; background: linear-gradient(#4a4f5b,#454b55); color: white;} */ #cpIDPSaveTSV{width: 5vw; height: 100%; background: linear-gradient(#4a4f5b,#454b55); color: #fe9999;} #cpIDPCancelExitBtn{padding: 0 1.4vh; height: 6vh; opacity: 30%; z-index: 2; cursor: pointer; color: red; font-size: 2rem; font-weight: 600; background-color: whitesmoke; display: flex; justify-items: center; align-items: center; border-style: double; border-radius: 0 0 50% 50%;} #cpIDPCancelExitBtn:hover{opacity: 100%;} /* #cpIDPCancelExitBtn{position: fixed; top: 0; right: 67%; padding: 0 1.4vh; height: 6vh; z-index: 2; cursor: pointer; color: red; font-size: 2rem; font-weight: 600; background-color: whitesmoke; display: flex; justify-items: center; align-items: center; border-style: double;} */ #cpCSVTableContainer{min-width: inherit; width: auto; height: 82vh; flex-grow: 1; border: 0.1px solid black; /*overflow-x: hidden;*/ overflow-y: hidden; background: #eee;} /* #cpCSVTableContainer:after{content: "Select a cell from the table above where you wish you had Values defined/edited."; font-size: 200%; position: absolute; color: antiquewhite; margin: 0 12vw;} #cpCSVTableContainer.cellIsSelected:after{content: "";} */ #cpCSVHeaderContainer:last-child{margin-right: 0.5vw;} #cpCSVHeaderContainer{width: fit-content; width: -moz-fit-content; min-height: 3vh; display: flex; background: #dee0e0;} #cpCSVHeaderNums{width: 1.5vw; height: auto; font-size: 117%; font-weight: 600; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} #cpCSVHeaderCPUIDs{width: 2.2vw; height: auto; font-size: 117%; font-weight: 600; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} #cpCSVHeaderLTS{width: 3.6vw; height: auto; font-size: 117%; font-weight: 600; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} .cpCSVHeaderAttrContainer{width: 5.2vw; max-width: 30vw; height: auto; /*flex-shrink: 0;*/ display: flex; justify-content: center; align-items: center;} .cpCSVHeaderAttrContainer.selected{background: #bfc46f;} .cpCSVAttrTitle{width: calc(100% - 5px); height: 100%; margin: 0.25vh 0; font-size: 117%; line-height: 100%; font-weight: 600; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; text-align: center;} .columnResizer{width: 5px; height: 100%; border-left: 2px solid grey; border-right: 2px solid grey;} .cpCSVHeaderAttrContainer>.columnResizer:hover{cursor: col-resize;} #cpCSVCPItemsContainer{width: auto; height: 97%; overflow-y: auto; overflow-x: hidden;} #cpCSVCPItemsContainer.fullWidth{width: fit-content; width: -moz-fit-content;} #cpCSVCPItemsContainer:last-child{margin-right: 0.5vw;} #cpCSVCPItemsContainer.fullHeight{height: 100% !important;} /* #~cpCSVIViewTemplate~{} */ .cpCSVIViewContainer{position: relative; min-width: 100%; min-height: 3vh; height: fit-content; height: -moz-fit-content; border: 0.1px solid black; border-radius: 2vmin; margin-bottom: 1vh; display: block; padding: 1vh 1vw; font-size: 1.5rem; color: indianred; font-weight: bold;} .cpCSVIViewContainer:hover{cursor: pointer; background-color: #eeeeee !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==) !important;} .cpItemMMediaContainer{width: 100%; height: auto;} .cpIPStoryContainer{width: 100%; height: auto; max-height: 30vh; margin-bottom: 1vh; overflow-y: auto; } .cpIPSShortStory{margin: 0 6vw 0 3vw; text-align: right; word-wrap: break-word; font-size: 2.8rem; font-weight: 400; color: darkslategray; font-style: italic; font-family: serif;} .cpIPSShortStory::marker{color:red;} .cpIPLongStory{margin: 0 2vmin; padding: 0.5vmin 0; font-size: 2.2rem; font-weight: 400; color: darkslategray;} .cpIPLongStory::first-letter{font-size: 3rem; color: crimson;} .cpIPSTitle{width: 95%; font-family: serif; font-size: 4rem; color: brown; text-align: center; margin-bottom: 1vh;} .cpIPDisplayContainer{width: 100%; height: auto; display: flex; justify-content: center; align-items: center;} .cpIPDisplayImgEl{max-width: 100%; max-height: 66vh; display: flex; justify-content: center; align-items: center;} .cpIPDisplayContainer:fullscreen>.cpIPDisplayImgEl{max-height: 100vh !important;} .cpIPDisplayAudioEl{width: 66%;} .cpIPDisplayVideoEl{max-width: 100%; height: 66vh; display: flex; justify-content: center; align-items: center;} /* .cpIPDisplayImgEl::before{position: absolute; left: 1vw; content: '<'; font-size: 5rem;} .cpIPDisplayImgEl::after{position: absolute; right: 1vw; content: '>'; font-size: 5rem;} */ .cpIPImgLeft{position: absolute; width: 4vw; height: 66vh; left: 0; content: '<'; color: #905690; font-size: 6vmin; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0px 0px 2px white);} .cpIPImgRight{position: absolute; width: 4vw; height: 66vh; right: 0; content: '>'; color: #905690; font-size: 6vmin; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0px 0px 2px white);} .cpIPMenuContainer{width: 100%; height: 3vh; } .cpIPThumbContainer{width: 100%; height: 9vh; } .cpItemValsCounter{width: 100%; height: 3vh; font-size: 1.5rem; color: #9c9c9c; display: flex; justify-content: center; align-items: center;} .cpItemVarContainer{width: 100%; font-size: calc(2rem + 1vmax); /*display: flex; flex-wrap: wrap; justify-content: space-between;*/} .cpItemVarContainer>var::before{content: attr(data-at); margin-right: 0.25vw; font-size: calc(2rem + 1vmax); font-weight: normal; color: seagreen;} .cpItemVarContainer>var{/*display: inline-flex; align-items: baseline;*/ margin-left: 0.25vw; font-size: calc(2.2rem + 1vmax); line-height: calc(3rem + 1vmax); color: black; font-style: normal; font-stretch: condensed; font-weight: bold; overflow-wrap: break-word;} .cpItemVarContainer>var::after{margin-left: 0.15vw; content: 'βΈΎ'; color: red; font-size: calc(2.7rem + 1vmax); font-weight: normal; /*background: aliceblue;*/} .cpItemVarContainer>var:last-child::after{content: '';} .cpItemVarContainer>var.f155{font-size: calc(3rem + 1vmax); line-height: calc(3.8rem + 1vmax); font-variant-caps: all-petite-caps; background: #dcf; border-bottom: 2px solid #ffb;} .cpItemVarContainer>var.f155gv{font-size: calc(3rem + 1vmax); line-height: calc(3.8rem + 1vmax); font-variant-caps: all-petite-caps; background: #dcf; border-bottom: 2px solid #ffb;} .cpItemVarContainer>var.fgvh.f155gv::before{content: attr(data-at); color: white; background: #9060ff; font-size: calc(3rem + 1vmax); font-weight: normal;} .cpItemVarContainer>var.fgvh.f155::before{content: attr(data-at); color: white; background: #9060ff; font-size: calc(3rem + 1vmax); font-weight: normal;} .cpItemVarContainer>var.fgvh::after{content: '; '; color: cadetblue; font-size: calc(2rem + 1vmax); font-weight: normal;} .cpCSVViewATGroupV::before{content: attr(data-at); margin-right: 0.15vw; font-weight: normal; color: #00488e;} .cpCSVViewATGroupV{color: black; font-style: normal; font-weight: bold;} .cpCSVViewATGroupV:last-child::after{content: 'βΈ½'; color: red; font-weight: normal;} .cpCSVViewATGroupV:nth-child(odd){color: darkslateblue;} .cpCSVViewATGroupV:nth-child(even){color: #2d6161;} /* #~cpCSVIEditTemplate~{} */ .cpCSVIEditContainer:nth-child(odd),.cpCSVIViewContainer:nth-child(odd){background: #f5f5f0;} .cpCSVIEditContainer:nth-child(even),.cpCSVIViewContainer:nth-child(even){background: #e8f6f0;} .cpCSVIEditContainer:last-child,.cpCSVIViewContainer:last-child{margin-bottom: 0.5vh;} .cpCSVIEditContainer.selected{border-top: 2px dotted #0e6400; border-bottom: 2px dotted #0e6400; background: #feffeb !important;} .cpCSVIEditContainer{width: fit-content; width: -moz-fit-content; min-width: 100%; min-height: 3vh; height: fit-content; height: -moz-fit-content; display: flex; border: 0.1px solid black;} .cpCSVIEditContainer>.cpCSVCPiACell.justEditedVal{background: #9aebff !important;} .cpCSVIEditContainer>.cpCSVCPiACell.justEditedVal.unsavedWarning{animation: unsavedWarning 1s infinite;} .cpCSVCPiNum{width: 1.5vw; flex-shrink: 0; min-height: 3vh; height: auto; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} .cpCSVCPiNum>div:last-child{display: none;} .cpCSVCPiNum:hover>div:first-child{display: none;} .cpCSVCPiNum:hover>div:last-child{width: 28px; min-height: 3vh; height: auto; display: flex; justify-content: center; align-items: center; background: orangered; color: white; font-weight: 600; cursor: pointer;} .justAddedCP{background: deepskyblue; color: white;} .cpCSVCPiLTS{width: 3.6vw; flex-shrink: 0; min-height: 3vh; height: auto;display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} .cpCSVCPiUID{width: 2.2vw; flex-shrink: 0; min-height: 3vh; height: auto;display: flex; justify-content: center; align-items: center; border-bottom: 1px solid grey; border-right: 1px solid grey;} .cpCSVCPiACell{width: 5.2vw; flex-shrink: 0; min-height: 3vh; height: auto; background: inherit; border-bottom: 1px solid grey; display: flex;} .cpCSVCPiACell.selected{background: #ccdd66 !important; color: inherit;} .cpCSVCPiACell.selCol{background: #feffeb; color: inherit;} .cpCSVCPiACell.selected>.cpCSVCPiGVsContainer{border: 1px solid violet;} .cpCSVCPiGVsContainer{width: calc(100% - 5px); flex-shrink: 0; min-height: 3vh; height: auto; background: inherit; display: flex; flex-flow: wrap;} /* .cpCSVValItem:nth-child(odd){background: inherit;} .cpCSVValItem:nth-child(even){background: inherit; border-top: 1px dotted grey; border-bottom: 1px dotted grey;} */ .cpCSVCPiGVsContainer:before{content: attr(data-content); font-size: 110%; color: mediumvioletred; padding-right: 0.2vw;} .cpCSVValItem{width: auto; height: auto; display: flex; justify-content: flex-start; align-items: center; margin-right: 3px;} .cpCSVValNum{width: auto; padding-right: 1px; min-height: 2vh; height: auto; font-size: 137%; display: flex; justify-content: flex-start; align-items: center;} .cpCSVValue{width: auto; min-height: 2vh; height: auto; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: center;} #cpCSVValsPanel{width: 100%; height: 15vh; background: #fdfdf8; display: flex; } #cpCSVVPInputContainer{width: 33%; height: 100%; overflow-y: auto;; overflow-x: hidden; border-right: 1px solid grey; flex-grow: 1; display: flex;} #cpCSVVPInputTA{width: 85%; height: 100%; font-size: 137%; resize: none; overflow: auto; background: #f8fffa;} #cpCSVVPMUContainer{width: 15%; display: flex; flex-direction: column; justify-content: space-between;} #cpCSVVPMUIntroMsg{width: 100%; height: 3vh; color: salmon; font-size: 0.8rem; font-weight: 600; padding: 3px 2px 0 2px; line-height: 110%; background: #ebf8ef; display: flex; justify-content: center; align-items: center; text-align: center;} #cpCSVVPMUSelect{width: 100%; height: 3vh; background: #feffeb;} #cpCSVVPMUInputTA{width: 100%; resize: none; overflow: hidden; font-size: 0.8rem;} #cpCSVVPNewValConfirmBtn{width: 100%; min-height: 3vh; padding: 0.25vw; flex-grow: 1; display: flex; justify-content: center; align-items: center; font-size: 93%; color: antiquewhite; line-height: 120%; background: green;} #cpCSVVPPreviewContainer{width: 33%; height: 100%; overflow-y: auto; overflow-x: hidden; border-right: 1px solid grey; display: flex; flex-direction: column; background: #feffeb;} #cpCSVVPPreviewContainer:before{content: "Values of selected Attribute of selected Subject"; font-size: 130%; text-align: center; } .cpCSVVPPValItem{width: auto; min-height: 3vh; margin: 0.15vh; flex-shrink: 0; display: flex; border: 1px solid grey; background: palegreen; cursor: default;} .cpCSVVPPValItem.selected{background: #ccdd66; font-size: 137%;} .cpCSVVPPValNum{width: auto; padding-right: 5px; min-height: 2.5vh; height: auto; font-size: 137%; display: flex; justify-content: flex-start; align-items: center;} .cpCSVVPPValue{width: auto; flex-grow: 1; min-height: 2.5vh; height: auto; font-size: 1em; display: flex; justify-content: flex-start; align-items: center;} .cpCSVVPPDelValBtn{width: 28px; min-height: 2.5vh; height: auto; display: flex; justify-content: center; align-items: center; color: orangered; font-weight: 600;} .cpCSVVPPDelValBtn:hover{cursor: pointer; background: orangered; color: white;} #cpCSVVPDRContainer{width: 33%; height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;} #cpCSVVPDRContainer:before{content: "Values of Selected Attribute matching Value in Input Field"; font-size: 130%; text-align: center; } #cpCSVVPDRContainer.seen:before{ padding: 1vw; content: "Selected Attribute doesn't have Values matching your input. If this Value is confirmed, New Value to be created."; text-align: center; font-size: 140%; background: grey; height: 100%; color: #feffeb;} .cpCSVDRValItem{width: 100%; min-height: 3vh; margin: 0.15vh; flex-shrink: 0; display: flex; align-items: center; border: 1px solid grey; background: #ebeece; cursor: default;} .cpCSVDRTreeUID{width: 12%; height: 100%; display: flex; align-items: center; color: indianred; font-size: 1rem; cursor: default;} .cpCSVDRValMU{width: auto; height: 100%; display: flex; align-items: center; font-size: inherit; cursor: default;} .cpCSVDRo1{font-size: 150%; color: orangered; order: 0; } .cpCSVDRo2{font-size: 120%; color: coral; order: 1;} .cpCSVDRo3{} #waitScreen{position: absolute; width: 100vw; height: 97vh; top: 3vh; margin-left: 0; background: black; opacity: 0.5; color: white; font-size: 500%;} #waitScreenElement {color: #00f3ff; margin-top: 38vh; margin-left: 50vw; animation: cosmosRace 3s linear infinite; transform-origin: left; font-size: 17vh;} @keyframes cosmosRace { 0% { transform:rotate(0deg) } 25% { transform: rotate(-89deg) } 100% { transform:rotate(-359deg) } } .eventLess {pointer-events: none;} /* #~qssItemTemplate~ {display: none;} */ #alertMessageText {font-size: 1.5em; text-align: center;} #copyright{display:none;}