@zohodesk/components 1.0.0-temp-610 → 1.0.0-temp-352

package/docs/external/css/styleGuide.css

@@ -0,0 +1,1100 @@
+@font-face {
+  font-family: Regular;
+  src: url('../../../deskapp/fonts/ProximaNova-Reg-webfont.eot');
+  src: url('../../../deskapp/fonts/ProximaNova-Reg-webfont.eot?#iefix')
+      format('embedded-opentype'),
+    url('../../../deskapp/fonts/ProximaNova-Reg-webfont.woff') format('woff'),
+    url('../../../deskapp/fonts/ProximaNova-Reg-webfont.ttf') format('truetype'),
+    url('../../../deskapp/fonts/ProximaNova-Reg-webfont.svg#Regular')
+      format('svg');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+#ifm {
+  outline: none;
+  border: none;
+  overflow: hidden;
+  z-index: 1;
+  position: fixed;
+}
+#react {
+  position: relative;
+  z-index: 10;
+}
+*,
+:after,
+:before {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  border: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+textarea {
+  font-family: Regular;
+}
+label,
+input[type='button'],
+input[type='submit'],
+input[type='file'],
+button {
+  cursor: pointer;
+}
+
+/*Moz Required Box shadow Isssue*/
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}
+li {
+  list-style: none;
+}
+body {
+  background: #fff;
+  font: 0.875rem Regular;
+}
+.dflex,
+.dflexCol,
+.dflexRow {
+  display: flex;
+  display: -webkit-flex;
+  display: -ms-flex;
+}
+.dflexCol {
+  flex-direction: column;
+}
+.dflexRow {
+  flex-direction: row;
+}
+.flex1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.hide {
+  display: none;
+}
+.main {
+  height: 100vh;
+  width: 100vw;
+}
+
+/* header css */
+.header {
+  height: 3.625rem;
+  border-bottom: 1px solid #eee;
+  background-color: #f9faff;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1.375rem;
+}
+.headerLeftimg {
+  width: 6.875rem;
+  height: 1.875rem;
+  background: url(../images/desk.png);
+  background-size: 100% 100%;
+}
+.hdrTabs {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.header button {
+  font: 0.9375rem Regular;
+  background: transparent;
+  text-transform: uppercase;
+}
+.header button:not(:last-child) {
+  margin: 0 3.375rem 0 0;
+}
+.header .activeTab {
+  font-family: Semibold;
+}
+.container,
+.header {
+  -webkit-animation: render 0.8s 1; /* Safari 4.0 - 8.0 */
+  animation: render 0.8s 1;
+}
+.container {
+  overflow: auto;
+}
+@-webkit-keyframes render {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes render {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* right panel css */
+.rightPanel,
+.leftPanel {
+  height: 100%;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+/* left panel css */
+.leftPanel {
+  border-right: 1px solid rgba(177, 177, 177, 0.18);
+  width: 15.625rem;
+}
+.comp,
+.compAct {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #333c49;
+  padding: 0.875rem 0.625rem 0.875rem 1.5625rem;
+  cursor: pointer;
+  display: block;
+}
+.comp {
+  font-size: 0.9375rem;
+}
+.compAct {
+  font: 0.9375rem bold;
+}
+
+/* icon container css */
+.codeHint {
+  color: #000;
+  font: 0.875rem Regular;
+  line-height: 1.5625rem;
+}
+.iconCont {
+  width: 100%;
+  height: 100%;
+  padding: 1.4375rem 2.5rem 1.25rem;
+}
+.wicon {
+  margin: 1.875rem 0;
+}
+
+/* getting started page css  */
+.getting {
+  text-align: center;
+  position: relative;
+  width: 100%;
+}
+.getting > div {
+  position: absolute;
+  top: 47%;
+  transform: translateY(-50%);
+}
+.centerIcon {
+  position: absolute;
+  left: 50%;
+  top: -3.875rem;
+}
+.gettingHd {
+  font: 2.5rem bold;
+  padding-bottom: 1.0625rem;
+}
+.gtngDescrpt {
+  font: 1.0625rem Light;
+  line-height: 1.875rem;
+  width: 67%;
+  margin: 0 auto;
+}
+.mainObjSec {
+  display: inline-flex;
+  text-align: left;
+  align-items: center;
+  padding: 3.75rem 0 3.75rem 6.125rem;
+  color: #333;
+  font-size: 1rem;
+}
+.mainObjSec > div {
+  width: 18.0625rem;
+  padding: 0 3rem 0 0;
+  line-height: 1.4375rem;
+  border-right: 1px solid #d2d2d3;
+}
+.mainObjSec > ul {
+  line-height: 1.75rem;
+  margin: 0 0 0 4.5rem;
+}
+.mainObjSec > ul > li {
+  list-style: disc;
+}
+.package {
+  font-size: 1rem;
+}
+.package > span {
+  font-family: Semibold;
+}
+.cssURLtext {
+  position: relative;
+  color: #2f94ee;
+}
+.cdnUrl {
+  font: 0.8125rem Regular;
+  color: #2f94ee;
+  padding: 0.75rem 0.9375rem 0.625rem;
+  box-shadow: 0 0 11px 2px rgba(0, 0, 0, 0.05);
+  background: #fff;
+  top: 1.5625rem;
+  left: 50%;
+  transform: translate(-50%, -10px);
+  position: absolute;
+  border-radius: 3px;
+  width: 34.75rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: 0.3s ease;
+}
+.cssURLtext:hover .cdnUrl {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+.cpyIcnCmn {
+  height: 1.25rem;
+  width: 1.0625rem;
+  cursor: pointer;
+  fill: #2f94ee;
+}
+.cpyCdn {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 0 0.4375rem;
+}
+.cpyNpm {
+  height: 1.0625rem;
+  width: 0.875rem;
+  margin: 0 0 0 0.25rem;
+  fill: #000;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+/* designToken css */
+.designTokenDet {
+  padding: 2rem 2.5rem 1.25rem;
+}
+.renderContent {
+  font: 0.875rem Regular;
+  line-height: 1.3125rem;
+  padding-bottom: 0.9375rem;
+}
+.colorShow {
+  width: 8.0625rem;
+  box-shadow: 0 0 14px -1px rgba(0, 0, 0, 0.08);
+  margin: 0 1.25rem 1.25rem 0;
+  display: inline-block;
+  position: relative;
+  border-radius: 3px;
+}
+.colorDv {
+  width: 4.375rem;
+  height: 4.375rem;
+  border-radius: 50%;
+  margin: 1.25rem auto 0;
+  box-shadow: 1px 1px 3px 1px #e0e0e0;
+}
+.colorName {
+  padding: 0.625rem 0 0.5rem;
+  position: relative;
+}
+.colorName div {
+  padding: 0.1875rem 0.625rem;
+  text-align: center;
+  font: 0.8125rem Semibold;
+  white-space: nowrap;
+  word-wrap: normal;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #2d313e;
+}
+
+/* component css */
+.renderCom {
+  padding: 1.4375rem 2.5rem 1.25rem;
+}
+.compName {
+  font: 1.625rem bold;
+  color: #333c49;
+  margin-bottom: 1.0625rem;
+}
+.compDesc {
+  font: 0.875rem Regular;
+  line-height: 1.3125rem;
+}
+.notes {
+  color: #000;
+  font: 0.875rem Regular;
+  line-height: 1.5625rem;
+  margin-top: 1.0625rem;
+}
+.renderPart {
+  transition: all 0.3s ease;
+  border-top: 1px dotted #e8e8e8;
+  padding-top: 1.125rem;
+  margin-top: 1.625rem;
+}
+.stateName,
+.codeToggle {
+  display: inline-block;
+  vertical-align: middle;
+}
+.stateName {
+  font: 1.25rem SemiBold;
+}
+.codeToggle {
+  position: relative;
+  height: 1.125rem;
+  width: 2.1875rem;
+  margin: 0.0625rem 0 0 0.8125rem;
+}
+.codeToggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.codeToggle > div {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: 0.3s ease;
+  transition: 0.3s ease;
+  background: #ccc;
+  border-radius: 3px;
+}
+.codeToggle input:checked + div {
+  background: #66bb6a;
+}
+.codeToggle > div div {
+  height: 0.75rem;
+  width: 0.9375rem;
+  background: #fff;
+  color: #000;
+  text-align: center;
+  border-radius: 3px;
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  -webkit-transition: 0.3s ease;
+  transition: 0.3s ease;
+  font-size: 0.5625rem;
+  padding-top: 0.0625rem;
+}
+.codeToggle input:checked + div div {
+  left: 1.0625rem;
+}
+.renDes {
+  font: 0.875rem Regular;
+  color: #333c49;
+  margin-top: 1.0625rem;
+}
+.renderArea {
+  margin-top: 1.875rem;
+}
+.codeArea {
+  height: 0;
+  overflow: hidden;
+}
+.codeView {
+  margin-top: 1.5625rem;
+}
+.borderTab {
+  background: #fff;
+}
+.codeTabWrap {
+  border-bottom: 1px solid #f2f3f4;
+  padding: 0 0 0 1.125rem;
+}
+.codeTabWrap span {
+  padding: 1.1875rem 0.9375rem;
+  display: inline-block;
+  color: #000;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.codeTabWrap span:not(:last-child) {
+  margin: 0 0.625rem 0 0;
+}
+.activeTabCode {
+  font-family: Semibold;
+}
+.codeArea textarea,
+.codeView textarea,
+.htmlArea {
+  transition: all 0.3s ease;
+  width: 45%;
+  height: 25rem;
+  border: 1px solid #ddd;
+  float: left;
+  margin: 1.25rem 2.5%;
+  overflow: auto;
+  padding: 0.625rem;
+  font: 0.8125rem 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  resize: none;
+  outline: none;
+  color: #888;
+  background: transparent;
+}
+.codeArea textarea:hover,
+.codeView textarea:hover {
+  transition: all 0.3s ease;
+  color: #000;
+  background: #fff;
+}
+
+/* compoent props css */
+.proprti {
+  margin: 1.875rem 0 1.4375rem;
+  padding-top: 1.125rem;
+  font: 1.25rem Semibold;
+  border-top: 1px dotted #e8e8e8;
+}
+.propTable {
+  border: 1px solid #0000000f;
+  margin-left: -1.25rem;
+  padding: 0 1.625rem 0 1.25rem;
+  border-radius: 5px;
+}
+.tableHeader span,
+.tableHeaderNB span {
+  flex: 1;
+  word-break: break-all;
+  padding: 1rem 0.9375rem 1rem 0;
+  font-size: 0.875rem;
+  color: #333c49;
+}
+.tableHeader span {
+  border-bottom: 1px solid #eeeff0;
+}
+.tableHeader .brR {
+  font-family: Semibold;
+  color: #000;
+}
+.tableHeader span:nth-child(1),
+.tableHeaderNB span:nth-child(1) {
+  flex: 1 5%;
+}
+.tableHeader span:nth-child(2),
+.tableHeaderNB span:nth-child(2) {
+  flex: 1 10%;
+}
+.tableHeader span:nth-child(3),
+.tableHeaderNB span:nth-child(3) {
+  flex: 1;
+}
+.tableHeader span:nth-child(4),
+.tableHeaderNB span:nth-child(4) {
+  flex: 1 3%;
+}
+.tableHeader span:nth-child(5),
+.tableHeaderNB span:nth-child(5) {
+  flex: 1 13%;
+}
+.hookOneof {
+  display: inline-block;
+  height: 1.625rem;
+  font: 0.8125rem/1.625rem Regular;
+  padding: 0 0.5625rem;
+  background: #f0f0f0;
+  border-radius: 13px;
+  color: #000;
+  margin: 0 0.4375rem 0.375rem 0;
+}
+.mobileMenu {
+  width: 20px;
+  height: 20px;
+  background-size: 100% 100%;
+  background-image: url('../images/menu.png');
+  display: none;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.mobileMenu:hover {
+  border-bottom: 0.5px solid transparent;
+}
+.menus {
+  display: inline-block;
+}
+.toogleArowLeft,
+.toogleArowLeftSub {
+  border-radius: 50%;
+  border: 1px solid #ddd;
+  padding: 5px;
+  position: fixed;
+  left: calc(50% - 20px);
+  top: 43px;
+  display: none;
+  background: #fff;
+  cursor: pointer;
+  transform: rotate(0deg);
+  transition: all 0.5s ease;
+}
+.toogleArowLeftSub {
+  transform: rotate(180deg);
+  transition: all 0.5s ease;
+}
+.toogleArowLeft div,
+.toogleArowLeftSub div {
+  background-image: url('../images/bottom.png');
+  height: 15px;
+  width: 15px;
+  background-size: cover;
+}
+.icons,
+.faqs {
+  text-align: center;
+  width: 100%;
+  height: 90%;
+  color: #888;
+  font: 16px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  overflow: auto;
+}
+.iconcont {
+  text-align: center;
+}
+.icTemp {
+  width: 100%;
+  text-align: center;
+  font-size: 18px;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  margin: 10px 0;
+}
+.icTemp div:first-child {
+  padding: 10px;
+}
+
+.inputBoxFocus {
+  border: 1px solid #ddd !important;
+  box-shadow: 0 0 5px #ddd;
+}
+.inSearch {
+  color: #ddd !important;
+}
+
+.lod {
+  padding: 0;
+  height: 100%;
+  display: table;
+  margin: 0 auto;
+  background: #f5f5f5;
+}
+.loading {
+  top: 40%;
+  left: calc(50% + 90px);
+  width: 150px;
+  height: 60px;
+  font: 16px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  position: absolute;
+  text-align: center;
+  margin-top: -30px;
+  margin-left: -175px;
+  text-shadow: #808080 1px 1px 1px;
+  z-index: 1;
+}
+.letter {
+  float: left;
+  width: 15px;
+  height: 60px;
+  position: relative;
+  animation: flip 2s infinite;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+.letter div {
+  color: #4b6;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform: translate(0);
+  backface-visibility: hidden;
+  animation: color 16s infinite;
+}
+.letter div.back {
+  transform: rotateY(180deg);
+}
+.letter:nth-child(1),
+.letter:nth-child(1) div {
+  animation-delay: 0.125s;
+}
+.letter:nth-child(2),
+.letter:nth-child(2) div {
+  animation-delay: 0.25s;
+}
+.letter:nth-child(3),
+.letter:nth-child(3) div {
+  animation-delay: 0.375s;
+}
+.letter:nth-child(4),
+.letter:nth-child(4) div {
+  animation-delay: 0.5s;
+}
+.letter:nth-child(5),
+.letter:nth-child(5) div {
+  animation-delay: 0.625s;
+}
+.letter:nth-child(6),
+.letter:nth-child(6) div {
+  animation-delay: 0.75s;
+}
+.letter:nth-child(7),
+.letter:nth-child(7) div {
+  animation-delay: 0.875s;
+}
+.letter:nth-child(8),
+.letter:nth-child(8) div {
+  animation-delay: 1s;
+}
+.letter:nth-child(9),
+.letter:nth-child(9) div {
+  animation-delay: 1.125s;
+}
+.letter:nth-child(10),
+.letter:nth-child(10) div {
+  animation-delay: 1.25s;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateY(0deg) translate(0);
+  }
+  40%,
+  100% {
+    transform: rotateY(180deg) translate(0);
+  }
+}
+
+@keyframes color {
+  1.5% {
+    color: #6ad;
+  }
+  3%,
+  12.5% {
+    color: #f80;
+  }
+  14% {
+    color: #4b6;
+  }
+  15.5%,
+  25% {
+    color: #f68;
+  }
+  26.5% {
+    color: #c83;
+  }
+  28%,
+  37.5% {
+    color: #96c;
+  }
+  39% {
+    color: #c83;
+  }
+  40.5%,
+  50% {
+    color: #e44;
+  }
+  51.5% {
+    color: #f80;
+  }
+  53%,
+  62.5% {
+    color: #4b6;
+  }
+  64% {
+    color: #f68;
+  }
+  65.5%,
+  75% {
+    color: #c83;
+  }
+  76.5% {
+    color: #96c;
+  }
+  78%,
+  87.5% {
+    color: #6ad;
+  }
+  89% {
+    color: #f80;
+  }
+  90.5%,
+  100%,
+  0% {
+    color: #4b6;
+  }
+}
+
+.keyBoard {
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  line-height: 90vh;
+  text-align: center;
+  transform: scale(0);
+  -webkit-animation: keyAni 0.8s ease;
+  animation: keyAni 0.8s ease;
+}
+
+.keyBoard span {
+  padding: 100px 150px;
+  background: #130f139e;
+  color: #fff;
+  box-shadow: 0 0 15px #000;
+  border-radius: 10px;
+  font: 55px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+}
+
+@-webkit-keyframes keyAni {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes keyAni {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+.dis {
+  cursor: not-allowed !important;
+}
+.ss {
+  height: 10px;
+  width: 10px;
+}
+
+.installIntro {
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  margin: 20px auto !important;
+  width: 30% !important;
+  font-size: 14px !important;
+  word-wrap: break-word;
+}
+.copyTxtHiden {
+  height: 0 !important;
+  width: 0 !important;
+  font-size: 0 !important;
+  padding: 0 !important;
+}
+.hidecode {
+  display: none;
+  visibility: hidden;
+  height: 0;
+  width: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.intNPMCDN {
+  margin-top: 50px !important;
+  font: 15px/25px 'ProximaNovaRegular', Arial, Helvetica, sans-serif !important;
+  color: #000000 !important;
+}
+.playGround {
+  margin: 20px 30px;
+  padding: 10px;
+  background-color: #fffefe;
+  border: 1px solid #f5efef;
+}
+.hideSVG {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  position: absolute;
+}
+.deskIcon {
+  fill: #66bb6a;
+  stroke: #66bb6a;
+  opacity: 0.2;
+  transform: translateX(-50%) rotate(-44deg);
+  height: 16.25rem;
+}
+.rtlIcn {
+  height: 1.1875rem;
+  width: 1.1875rem;
+  cursor: pointer;
+}
+.rtlIcnActv {
+  fill: #66bb6a;
+}
+
+/* copy Text component css */
+.copyDv {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.84);
+  text-align: center;
+  cursor: pointer;
+  border-radius: 3px;
+  opacity: 0;
+  visibility: hidden;
+  font: 0.9375rem Semibold;
+  color: #2f94ee;
+}
+.cpyBtn,
+.copiedTxt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.cpyBtn {
+  transform: translate(-50%, -50%) scale(1);
+}
+.isCopied .cpyBtn {
+  animation: scaleOut 0.2s cubic-bezier(0.38, 0.85, 0.85, 1.37) forwards;
+}
+@keyframes scaleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
+.colorShow:hover .copyDv,
+.isCopied {
+  opacity: 1;
+  visibility: visible;
+}
+.copiedTxt {
+  transform: translate(-50%, -50%) scale(2);
+  animation: scaleIn 1s cubic-bezier(0.38, 0.85, 0.85, 1.37) forwards;
+}
+@keyframes scaleIn {
+  0% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0;
+  }
+  20% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Accessibility css */
+.accessBG {
+  width: 100%;
+  height: 100%;
+  background: url('../images/bottombg.jpg');
+  background-size: 100% 109%;
+  overflow: auto;
+}
+.accessibility {
+  width: 70%;
+  margin: 20px auto;
+  margin-top: 40px;
+}
+.accessHead {
+  font: 18px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  color: #000;
+  margin: 10px 0;
+}
+.accessCon {
+  font: 15px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  color: #5f5f5f;
+  margin: 10px 0;
+  text-indent: 50px;
+  line-height: 20px;
+}
+.accessR {
+  margin-top: 40px;
+}
+.accessCon p {
+  text-indent: 80px;
+  font: 14px 'ProximaNovaThin', Arial, Helvetica, sans-serif;
+  margin-top: 8px;
+  line-height: 20px;
+}
+
+/* search component css */
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+.icon-search {
+  width: 20px;
+  height: 13px;
+  float: left;
+  margin-top: 3px;
+  margin-right: 5px;
+  color: #f1f1f1;
+}
+
+/* rtl css */
+html[dir='rtl'] .leftPanel {
+  border-right: 0;
+  border-left: 1px solid #eef0f2;
+}
+html[dir='rtl'] .header button:not(:last-child) {
+  margin: 0 0 0 3.375rem;
+}
+html[dir='rtl'] .comp,
+html[dir='rtl'] .compAct {
+  padding: 0.875rem 1.5625rem 0.875rem 0.625rem;
+}
+html[dir='rtl'] .mainObjSec {
+  padding: 3.75rem 6.125rem 3.75rem 0;
+  text-align: right;
+}
+html[dir='rtl'] .mainObjSec > div {
+  padding: 0 0 0 3rem;
+  border-left: 1px solid #d2d2d3;
+  border-right: 0;
+}
+html[dir='rtl'] .mainObjSec > ul {
+  margin: 0 4.5rem 0 0;
+}
+html[dir='rtl'] .cpyCdn {
+  margin: 0 0.4375rem 0 0;
+}
+html[dir='rtl'] .cpyNpm {
+  margin: 0 0.25rem 0 0;
+}
+html[dir='rtl'] .colorShow {
+  margin: 0 0 1.25rem 1.25rem;
+}
+html[dir='rtl'] .codeToggle {
+  margin: 0.0625rem 0.8125rem 0 0;
+}
+html[dir='rtl'] .codeToggle > div div {
+  right: 0.1875rem;
+  left: auto;
+}
+html[dir='rtl'] .codeToggle input:checked + div div {
+  right: 1.0625rem;
+  left: auto;
+}
+html[dir='rtl'] .codeTabWrap {
+  padding: 0 1.125rem 0 0;
+}
+html[dir='rtl'] .codeTabWrap span:not(:last-child) {
+  margin: 0 0 0 0.625rem;
+}
+html[dir='rtl'] .tableHeader span,
+html[dir='rtl'] .tableHeaderNB span {
+  padding: 1rem 0 1rem 0.9375rem;
+}
+
+@media screen and (max-width: 950px) {
+  .codeArea textarea,
+  .codeView textarea,
+  .htmlArea {
+    width: 90%;
+  }
+  .menusHide {
+    display: none;
+  }
+  .header {
+    padding: 5px 10px;
+  }
+  .mobileMenu {
+    display: inline-block;
+    z-index: 10;
+  }
+  .menus {
+    position: absolute;
+    top: 40px;
+    right: 25px;
+    border: 1px solid #ddd;
+    box-shadow: 0 0 #ddd;
+    z-index: 11;
+    background: #fff;
+    text-align: left;
+    min-width: 150px;
+    max-width: 2000px;
+  }
+  .menus button {
+    display: block;
+  }
+  .footer {
+    display: none;
+  }
+  .container,
+  .designTokens {
+    flex-direction: column;
+  }
+  .leftPanel,
+  .rightPanel {
+    width: 100%;
+  }
+  .leftPanel {
+    height: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+  .leftPanelShow {
+    height: 50vh;
+    overflow: auto;
+    position: absolute;
+    background: #fff;
+    padding-top: 30px;
+    border-bottom: 1px solid #ddd;
+    z-index: 5;
+  }
+
+  .toogleArowLeft,
+  .toogleArowLeftSub {
+    display: inline-block;
+    z-index: 10;
+  }
+  .colorShow {
+    margin-right: 10px;
+  }
+  .bgColors {
+    padding-left: 10px;
+  }
+}
+@media only screen and (min-width: 100.0625em) {
+  html {
+    font-size: calc(100vw / 110);
+  }
+}