/* <!-- 2024-03-11, Created iWiring/iWiring.css for defining iWiring Player UI Deco. */.Layer1 {z-index: 1;padding-left: 10px;}.Layer2 {position:absolute;float: left;z-index: 2;width  : 1200px;margin-left:5;margin-top:-800;}.Layer3 {position:absolute;float: left;z-index: 3;opacity: 0.85;display: none;/*width :680;margin-left :  1205;margin-top  : -1000; */}.Layer5 {position:absolute;float: left;height: 550px;z-index: 5;opacity: 0.85;margin-top:-1080px; margin-left:880px;/* Must show up Layer5 at first and close OptionsMenu() at init(), otherwise OptionsManu closed anyway. *//*display: none; *//*width :680;margin-left :  1205;margin-top  : -1000; */}.Layer6 {position:absolute;float: center;z-index: 6;opacity: 1.0;margin-top:-820px; margin-left:275px;margin-right:auto;display:hidden;}.Layer7 {position:absolute;float: center;z-index: 7;opacity: 1.0;margin-top:-820px; margin-left:235px;margin-right:auto;display:hidden;}.Layer8 {position:absolute;float: center;z-index: 8;opacity: 1.0;margin-top:-860px; margin-left:235px;margin-right:auto;display:hidden;}.Container {/*touch-action: none; */padding:  0px;width  : 1225px;height : auto;margin-top:0;margin-right: auto; margin-left : auto;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-repeat:no-repeat;background-size:100%;/* 2024-03-12, "background-color:white" must be specified at customized style otherwise background image overridden. */}.Heading {width:100%;height:165;margin-left:0;margin-top:-18;overflow:clip;border-style:none;color:cyan;}.HeadMenu{float:left;align-items: center; text-align : center; vertical-align: middle;}.MenuGroup {display: inline-block;display: flex;width : 100%; height: 50px;text-align: left;align-items: center;font-weight: bold; font-family: Palatino Linotype, Courier New, sans-serif, Roboto,Helvetica,Arial;font-size: 34px; background-color: rgb(156, 192, 250);}.ToolGroup {display: inline-block;padding: 10px;width : auto; height: auto;display: flex;justify-content: center;  }.ToolButtons {width: auto;height:auto;margin-left : 5px;margin-right: 5px;background-color: rgb(0, 0, 128);}.ToolButtons a:hover { background-color: Gold;text-decoration:  underline; }.ToolButtons a:active { background-color: LightSeaGreen;}.ActionGroup {display: inline-block;width : 100%; height: 65px;}.ActionItems {margin-top: 20px;float: left;font-weight: bold; font-family: Roboto,Helvetica,Arial,sans-serif; font-size: 32px; text-align : center;         text-decoration: none; color: rgb(51, 51, 255);border:none; border-color:orange;vertical-align: middle;  }.Audios { width:0; height:0; } /* 2024-05-21, Using HTML tag to declare Audio objects. */.Canvas {z-index: 1;/* 2024-03-08, Declaring dimension in CSS always caused point scaling error very much. *//*  width :950px;  *//*  height:520px;  *//*  width :1200px; *//*  height:1000px; *//*margin-top:50; */border:3px solid;border-bottom-left-radius: 10px;border-bottom-right-radius:10px;color:rgb(0,176,240);pointer-events: auto;/*touch-action: none;*/    /*  -webkit-touch-callout: none;        -webkit-user-select: none;         -khtml-user-select: none;         -moz-user-select: none;         -ms-user-select: none;           user-select: none;*/         -o-user-select:none;}.Label {font-family: Palatino Linotype;font-size:18px;color: blue;}.LogList {width :auto;height:1608;padding: 5px;margin-top: -622px;margin-left:  10px;overflow-y:auto;overflow-x:auto;background-color:white;color: rgb(51, 51, 255);font-family: Palatino Linotype;font-size: 28px;border: solid;border-width: 2px;border-color: orange;border-radius: 12px;white-space: nowrap; /*text-overflow: ellipsis; */}.MessageView {width: 65%;opacity: 0.85;margin-top:-200px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:15px;border: 3px solid;border-color: gray;border-radius: 20px;background-color: white;display:none;}.Options {/*width: 188px;*//* 2024-05-16, Must be specified at application area. */width:280px;height:680px;border:3px solid lightgray;/* rgb(156, 192, 250); */border-top-left-radius:3px;border-top-right-radius:30px;border-bottom-left-radius: 30px;border-bottom-right-radius: 3px;background-color: LightSkyBlue;color:rgb(0,176,240);padding: 10px;padding-right: 10px;display:hidden;/* 2024-05-18, Must be kept to validate layout dimension. */    }.OptionItems {font-family: Palatino Linotype;font-weight:bold;font-size: 30px;color: rgb(51, 51, 255);display:inline-block;vertical-align:middle;/*box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; */}.OptionIcons {width: 52px;height:auto;padding:5px;display:inline-block;vertical-align:middle;}.VersionView {width: 45%;opacity: 1.0;height: 850px;/* scale <= 1? 1050 : 650; */margin-top:-200px;margin-left: auto;margin-right: auto;border: 5px solid;border-color: lightgray;border-radius: 20px;/*background-color: white; */background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.85), rgba(255,255,255, 0.85) 10px, transparent 10px, transparent 6px);    background-size:  4px 4px;/* 10: 45-degree grid. */    background-color: rgba(250,250,250, 1.0); /* #67686b; */display:hidden;/* 2024-05-18, Must be kept to validate layout dimension. */}.PartinfoView {width:720px;height:850px;margin-top:-205px;margin-left:auto;margin-right:auto;border:3px solid lightgray;/* rgb(156, 192, 250); */border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;background-color: LightSkyBlue;color:rgb(0,176,240);padding: 10px;padding-right: 0px;display:hidden;/* 2024-05-18, Must be kept to validate layout dimension. */    }.UserLoginView {width:750px;height:900px;margin-top:-205px;margin-left:auto;margin-right:auto;border:3px solid lightgray;/* rgb(156, 192, 250); */border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius: 20px;border-bottom-right-radius:20px;/*background-color: LightSkyBlue; /*opacity:0.95; *//*background-image: repeating-linear-gradient(36deg, rgba(255,255,255,  0.8), rgba(255,255,255, 0.8) 1px, transparent 0px, transparent 2px);*/  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.8), rgba(255,255,255, 0.8) 1px, transparent 1px, transparent 6px);    background-size:  4px 4px;/* 10: 45-degree grid. */    background-color: rgba(135,206,250, 0.95); /* #67686b; */color:rgb(0,176,240);padding: 15px;display:hidden;/* 2024-05-18, Must be kept to validate layout dimension. */    }    .UserHelpView {width:750px;height:950px;margin-top:-205px;margin-left:auto;margin-right:auto;border:3px solid lightgray;/* rgb(156, 192, 250); */border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius: 20px;border-bottom-right-radius:20px;/*background-color: LightSkyBlue; /*opacity:0.95; *//*background-image: repeating-linear-gradient(36deg, rgba(255,255,255,  0.8), rgba(255,255,255, 0.8) 1px, transparent 0px, transparent 2px);*/  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.8), rgba(255,255,255, 0.8) 1px, transparent 1px, transparent 6px);    background-size:  4px 4px;/* 10: 45-degree grid. */    background-color: rgba(135,206,250, 0.95); /* #67686b; */color:rgb(0,176,240);padding: 15px;display:hidden;/* 2024-05-18, Must be kept to validate layout dimension. */    }input:focus {     outline: none !important;    border-color: rgb(128, 0, 64);/* #719ECE; */    box-shadow: 0 0 3px rgb(128, 0, 64);/* #719ECE; */ } .FormInputs {color: rgb(0, 128, 255);/* rgb(67, 133, 244); */width: auto;margin-left:15px;font-family: Arial,Roboto,Helvetica,sans-serif,Palatino Linotype;font-size:26px;font-weight: bold;}.InputLabels {color: rgb(128, 0, 64);height: 50px;margin-left:10px;text-align:left;font-family: Roboto,Helvetica,Arial,sans-serif,Palatino Linotype;font-size:26px;font-weight: bold;}.InputFields{color: rgb(67, 133, 244);height: 50px;width:250px;margin-left:12px;padding-left: 10px;padding-right: 10px;border:1px solid lightblue;border-radius:10px;text-align:left;font-family: Roboto,Helvetica,Arial,sans-serif,Palatino Linotype;font-size:26px;font-weight: bold;}.InputChecks {accent-color: rgb(67, 133, 244);padding:0px;height:25px;width: 25px;margin-left:128px;padding-left: 10px;padding-right: 10px;font-family: Arial,Roboto,Helvetica,sans-serif,Palatino Linotype;font-size:22px;font-weight: bold;color: rgb(67, 83, 255);}.FormButtons {line-height: 45px;width:120px;color: rebeccapurple;margin-right: 10;border:3px solid;border-radius:20px;font-family: Roboto,Helvetica,Arial,sans-serif,Palatino Linotype;font-size:28px;font-weight: bold;padding-left:auto;padding-right:auto;cursor:pointer;}.Scrambles {color: rgb(128, 0, 64);height: 50px;width:250px;margin-left:12px;padding-left: 10px;padding-right: 10px;border:1px solid lightgray;border-radius:10px;text-align:left;font-family: Georgia, Roboto,Helvetica,Arial,sans-serif,Palatino Linotype;font-size:26px;font-weight: bold;/* 2024-05-24, https://stackoverflow.com/questions/11814013/css-creating-textured-backgrounds */background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.8), rgba(255,255,255, 0.8) 1px, transparent 1px, transparent 6px);    background-size:  10px 10px;/* 4: square, 10: 45-degree grid. */    background-color: rgba(204, 0, 102, 0.3); /* #67686b; */}a { cursor:pointer;}.LogList   { color: cyan; width: 100%;}.LogList a { cursor:pointer; color: rgb(51, 51, 255); text-decoration: underline; width: 100%;}.LogList a:hover { color: Indigo; background-color: Gold;text-decoration:  underline; }.LogList a:active { color: white; background-color: LightSeaGreen;text-decoration:  underline; }.Buttons {line-height: 60px;color: rebeccapurple;padding-left:  20;padding-right: 20;margin-left: 0;margin-right: 50;border:3px solid;border-radius:10px;font-family: Roboto,Helvetica,Arial,sans-serif,Palatino Linotype;font-size:36px;font-weight: bold;}.Colors {float:left;width:100px;height:50px;margin-top: 30;margin-left: 20;margin-right: 0;margin-bottom: 30;}.InputContainer {position: relative;display: inline-block;margin-top: -10px;margin-left: 0px;;width: 280px;/* ClearBotton position (width) aligned. */height: 50px;border:none;border-color: blue;}.TextInut {width: 300px;/* must be defined at customized element to limit data-list width. */border:none;border-color: red;font-family: Helvetica,Arial,sans-serif,Roboto,Palatino Linotype;font-size:32px;font-weight: bold;}.ClearButton {/* Position */position: absolute;top: 8px;right: 0px;/* Appearane */justify-content: center;align-items: center;width: 36px;height: 36px;appearance: none;border: none;border-radius: 50%;background: darkgray;margin: 0;padding-bottom: 5px;color: white;font-size: 20px;cursor: pointer;display: visible;/* visible over mobile devices */}.ClearButton:hover {background: rgb(136,73,116);}.TextInput--touched:focus + .ClearButton,.TextInput--touched:hover + .ClearButton,.TextInput--touched + .ClearButton:hover {display: inline-flex;}