@zohodesk/components 1.0.0-temp-80 → 1.0.0-temp-81

package/docs/external/css/styleGuide.css

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