@zohodesk/components 1.0.0-test-252 → 1.0.0

package/docs/external/css/styleGuide.css

@@ -1,1100 +0,0 @@
-@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);
-  }
-}