/**
 * @author Owsiak, Erik - iotech.systems
 * @email erik@iotech.systems
 * @create date 2025-12-21 19:31:36
 * @modify date 2026-01-08 18:25:00
 * @desc [description]
 */

@font-face {
   font-family: nxtstep;
   src: url(/css/nxtstep.ttf);
}

@keyframes blink {
   0% { opacity: 1; }
   50% { opacity: 0; }
   100% { opacity: 1; }
}


html, body {
   margin: 0;
   padding: 0;
}


textarea {
   resize: none;
}


div.under-construction {
   font-family: nxtstep;
   font-size: 4vh;
   font-weight: 900;
   color: darkred;
   animation: blink 2s infinite;
}


lbox {
   display: inline-block;
   margin: 0 4px 0 0 !important;
   padding: 0 !important;
   font-size: 48px;
}


lbox:first-of-type {
   margin-left: 0 !important;
}

lbox:last-of-type {
   margin-right: 0 !important;
}


div.page-frame {
   display: block;
   max-width: 1280px;
   margin: auto;
   /* border: 1px dotted lightblue; */
}


div.top-bar {
   display: block;
   width: 100%;
   height: 88px;
   margin: 2vh auto 0 auto;
   /* border: 1px dashed blue; */
}


div.top-bar div {
   display: inline-block;
   height: inherit;
   line-height: inherit;
   vertical-align: top;
}


div.iot-logo {
   width: auto;
   font-family: nxtstep;
   font-weight: 900;
   /* border: 1px dotted green; */
}


div.iot-logo div {
   display: block;
   width: 100%;
}


div.iot-logo-ln {
   height: 60px !important;
   line-height: 60px !important;
}


div.iot-logo-ln:last-of-type {
   height: 28px !important;
   line-height: 28px !important;
   font-size: 24px;
   letter-spacing: 10px;
   text-align: center;
}


div.iot-logo-char {
   display: inline-block;
   margin: 0;
   padding: 0;
   font-size: 56px;
}


div.iot-motto {
   font-family: nxtstep;
   font-size: 24px;
   letter-spacing: 4px;
   text-align: center;
}


div.tm-right {
   width: 58%;
}


div.top-menu, div.top-skinny-frame {
   width: 100%;
   height: 48px !important;
   line-height: 48px !important;
   text-align: right;
   font-family: nxtstep;
   vertical-align: top;
   /* border: 1px dotted goldenrod; */
}


div.top-menu a {
   text-decoration: none;
   /* border: 1px dotted goldenrod; */
}


div.top-skinny-frame {
   display: inline-block;
   margin-top: 2px;
   height: 36px !important;
   line-height: 36px !important;
}


div.tm-item {
   display: inline-block;
   height: inherit !important;
   line-height: inherit !important;
   font-size: 20px;
   font-weight: bolder;
   margin-left: 1vw;
}


div.tm-item:hover {
   cursor: pointer;
}


div.word-spinner {
   vertical-align: bottom !important;
}

.word0, .word1, .word2 {
   height: 48px;
   line-height: 48px;
   font-size: 2vh;
   font-family: nxtstep;
   font-weight: 400;
   margin: 0 1vw;
   vertical-align: bottom;
}


div.view-port {
   width: 98%;
   margin: 8vh auto;
}


/* 
   topics 
*/
div.topic-box {
   min-height: 2vh;
   margin-bottom: 4vh;
   /* border: 1px dotted blue; */
}

div.topic-box:last-child {
   margin-bottom: 0;
}


div.topic-box-hdr {
   height: 68px;
}


div.topic-img {
   display: inline-block;
   width: 64px;
   height: 64px;
   margin: 2px 0 2px 8px !important;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: top;
}


.wasp-ai {
   background-image: url(/imgs/wasp-icon-lft-128px.png);
}


.xora-ai {
   background-image: url(/imgs/voice512blue128px.png);
}


div.topic-box-hdr div {
   display: inline-block;
}


div.topic-box-hdr .lbl {
   height: 48px;
   line-height: 48px;
   font-size: 28px;
   font-family: nxtstep;
   font-weight: bolder;
   text-indent: 4px;
   vertical-align: bottom;
}


div.topic-box-qview {
   border-top: 2px solid rgb(90, 90, 90);
   min-height: 8vh;
   text-indent: 1vw;
   padding: 4px;
}


div.topic-box-bdy-frm {
   display: none;
   width: 92%;
   margin: 8px 0 8px calc(4% - 1px);
   border: 1px solid rgb(160, 160, 160);
   border-radius: 8px;
}

div.topic-box-bdy {
   width: 96%;
   margin: 1vh auto;
   text-indent: 1vw;
   text-justify: distribute;
}

div.topic-sec {
   margin-top: 16vh;
   margin-bottom: 2vh;
   font-family: nxtstep;
   font-size: 36px;
   text-align: right;
}


div.btn-explore {
   display: block;
   width: auto;
   float: right;
   font-family: nxtstep;
   margin-top: 36px;
   padding: 4px 8px;
   border-radius: 16px;
   border: 1px solid rgb(78, 78, 83);
}


div.btn-explore:hover {
   cursor: pointer;
   background-color: rgba(211, 213, 240, 0.280);
}


div.btn-explore-clicked {
   background-color: rgba(125, 178, 211, 0.200);
}


/* 
   footer 
*/

div.page-footer {
   display: inline-block;
   width: 100%;
   min-height: 16vh;
   margin: 0 auto 0 auto;
   font-size: 24px;
   border: 1px solid rgb(90, 90, 90);
   border-radius: 1vh;
   background-color: rgba(229, 231, 233, 0.137);   
}


div.page-pre-footer {
   width: 98%;
   margin: 2vh auto 0 auto;
   text-align: right;
   font-family: nxtstep;
}


div.page-pre-footer a {
   text-decoration: none;
}


div.page-footer-item {
   width: 90%;
   margin: 4vh auto;
   text-indent: 8px;
}


div.pfi-hdr {
   border-bottom: 1px solid ;
    font-family: nxtstep;
}


div.pfi-bdy {
   font-size: 16px;
   text-indent: 1vw;
}


#idLoginBox {
   display: none;
}


#idLoginBox input {
   height: 20px;
   line-height: 20px;
   width: 180px;
   border: 1px solid rgb(115, 115, 122);
   border-radius: 8px;
}


#contactUS .pfi-bdy div {
   margin-top: 1vh;
}


div#lastDiv {
   width: 80%;
   height: 2vh;
   line-height: 2vh;
   font-size: 20px;
   font-family: nxtstep;
   text-align: center;
   margin: 1vh auto 8vh auto;
}


div.colX {
   display: inline-block;
   height: 220px;
   vertical-align: top;
   border: 1px dotted blue;
}


div#idCol0 {
   width: 40% !important;
}


div#idCol0 input {
   width: 98%;
   margin-bottom: 1vh;
   float: left;
}


div#idCol0 textarea {
   width: 98%;
   float: left;
   margin-bottom: 1vh;
}


input#btnSendMsg {
   width: auto !important;
   float: left;
}


div#idCol1 {
   width: 28% !important;
}


div#idCol2 {
   width: 28% !important;
}


div.colX-ln {
   width: 90%;
   margin: auto;
   text-align: center;
   /* border: 1px dotted rebeccapurple; */
}