*{margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} body, html{font-family: 'Nunito Sans', sans-serif; font-size: 15px; color: #253858; background: #fff; width: 100%; height: 100%; /*overflow: hidden;*/ line-height: 24px;} html{ padding-top: 52px; overflow: hidden;} body{ overflow: auto;} .fL{float: left;} .fR{float: right;} h1,h2,h3,h4,h5,h6{font-weight:normal;} .clearfix:after{content: ''; clear: both; display: block;} .gridLayout { display: table; width: 100%; height: 100%; } .gridLayout > .gridRow { display: table-row; } .gridLayout > .gridRow > .gridCell { display: table-cell; } p{color: #545556;} .red { color: #f2413e; } .wrapper { height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding-left: 215px; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; border-right: 1px solid #e1eaf3; background: #fff; width: 215px;-webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index:9; } .logo { background: url(../img/companyhub-logo-sm.png) no-repeat; width: 137px; height: 38px; margin: 14px 0 0 20px;} .sidebarAction .wrapper{padding-left: 0;} .sidebarAction .sidebar{left: -215px;} .gridLayout.containerRightGrid {table-layout: fixed;} .gridCell.sidebarScrollerCell { height: 100%; } .gridCell.sidebarScrollerCell .sidebarScroller { height: 100%; overflow: auto; } .gridCell.logoCell { padding: 15px 10px; } .sidebarScroller > ul > li, .sidebarScroller > ul > li > ul > li { display: block; position:relative; } .sidebarScroller>ul>li.current-menu-item:before{ content: "\F142"; font-family: "Material Design Icons"; position: absolute; right: 15px; top: 50%; color: #f2413e; margin-top: -13px; font-size: 18px; } .sidebarScroller > ul > li > a { display: block; padding: 8px 25px; font-size: 14px; text-decoration: none; color: #253858; font-weight:700; } .sidebarScroller > ul > li > ul > li > a{display: block; padding: 8px 25px; font-size: 14px; text-decoration: none; color: #253858;} .sidebarScroller > ul > li.current-menu-item > a, .sidebarScroller > ul > li.current-page-ancestor > a { font-weight: 700;} .sidebarScroller ul.sub-menu { padding-left: 20px; display: none; } .sidebarScroller > ul > li.menu-item-has-children > a:before { content: ''; border: 4px solid transparent; border-left: 4px solid #ff5e00; position: absolute; left: 13px; top: 50%; margin-top: -5px; webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .sidebarScroller > ul > li.menu-item-has-children.submenuActive > a:before{ left: 12px; margin-top: -3px; -webkit-transform: rotate(90deg); transform: rotate(90deg);} .sidebarScroller > ul > li.menu-item-has-children > a { cursor: pointer; position:relative; } .sidebarScroller > ul > li.menu-item-has-children > a:hover { background: #f3f3f3; } .sidebarScroller > ul > li > ul > li > a:hover, .sidebarScroller > ul > li > ul > li.current-menu-item > a { color: #ef5829; } .containerRight { height: 100%; } .gridCell.contentScrollerCell { height: 100%; } .gridCell.contentScrollerCell .contentScroller { /*height: 100%; overflow: auto; */} .gridLayout.sidebarGridLayout > .gridRow > .gridCell, .gridLayout.containerRightGrid > .gridRow > .gridCell{ vertical-align: top; } .header {border-bottom: 1px solid #e1eaf3; padding: 0 25px; height: 127px; position: relative; transition: all 0.3s ease; position:relative; z-index:99; } a.menuBtn{ display: block; width: 30px; height: 30px; background: #ffffff; padding: 8px 6px; margin-top:10px;} a.menuBtn span { display: block; height: 2px; background: #7e8ca2; margin-bottom: 3px; } .featureDropdownContainer { padding: 17px 0 10px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; top:50px; left:25px; } .featureDropdownContainer > h2 { font-weight: 400; position:relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} .learnDropdownWrapper { display: inline-block; position: relative; margin-left: 10px;} .learnDropdownWrapper:after { content: ''; border: 5px solid transparent; border-top: 5px solid #f2423f; vertical-align: middle; display: inline-block; margin-left:5px; } .learnDropdownWrapper > a { font-weight: 700; color: #f2423e; text-decoration: none; } .topicCards { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; padding: 30px ; } .topicCard { padding: 7px; width: 25%; } .topicCard > a { display: block; text-align: center; border: 1px solid #dee4e9; height:100%; font-weight: 700; text-decoration: none; font-size: 16px; color: #253858; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position:relative;} .topicCard > a:hover, .topicCard.active > a{ border-color: #1793ef; -webkit-box-shadow: 10px 10px 0px #dce2e8; box-shadow: 10px 10px 0px #dce2e8; z-index: 9;} .topicCard span.topicImgContainer { display: table; width: 100%; height: 100%; } .topicCard.hide{display:none;} .topicCard:active { -webkit-transform: scale(0.98); transform: scale(0.98);} span.topicImgContainer > .row{display:table-row;} span.topicImgContainer > .row > .cell{display:table-cell;} span.topicImgContainer > .row > .cell.topicImgCell { vertical-align: middle; padding: 25px 0; background: #fff url(https://crm.maroon-pigeon-606949.hostingersite.com/wp-content/themes/flat/assets/img/doc-topic-bg.png) no-repeat center -55px;} span.topicImgContainer > .row > span.cell.topicTxtCell { vertical-align: middle; height: 55px; line-height: 17px; } .cell.topicImgCell img { position: relative; -webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; max-width: 52px; display: inline-block; vertical-align: middle; } .topicCard > a:hover .cell.topicImgCell img, .topicCard > a.active .cell.topicImgCell img{-webkit-transform:translateY(10px); transform:translateY(10px);} .topicCard.manageLeads { width: 100%; position:relative;} .topicCard.manageLeads:before { content: ''; position: absolute; background: url(https://crm.maroon-pigeon-606949.hostingersite.com/wp-content/themes/flat/assets/img/start-here-img.png) no-repeat 0 0; width: 240px; height: 120px; display: block; left: 50%; top: 90px; z-index: 99; margin-left:-450px;} .headerWrap { position: fixed; right: 0; left: 215px; z-index: 99; background: #fff; -webkit-box-shadow: 0px 3px 14px rgba(140, 150, 165, 0.2); box-shadow: 0px 3px 14px rgba(140, 150, 165, 0.2); top:0; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; -webkit-backface-visibility: hidden;} .header.small { height: 52px; z-index: 9999;} .header.small .featureDropdownContainer { top: 0; left: 72px; } .header.small .featureDropdownContainer h2 { font-size: 1.2em; } .sidebarAction .headerWrap{left:0;} a.signupBtn { float: right; display: inline-block; padding: 3px 15px; background: #5aaef7; color: #fff; text-decoration: none; font-size: 0.9em; border-radius: 3px; margin-top: 10px; margin-right: 17px; font-weight: 700;} a.signupBtn:hover { background: #73beff;} a.signupBtn:active {background: #5aaef7;} .learnDropdownContainer { position: absolute; padding-top: 25px; display: none; z-index:99;} .learnDropdownContainer > ul { background: #fff; border: 1px solid #c8d1d7; font-size: 14px; padding: 10px 0; min-width: 300px; max-height: 300px; overflow: auto; -WEBKIT-box-shadow: 5px 5px 23px rgb(153, 168, 183); box-shadow: 5px 5px 23px rgb(153, 168, 183); -WEBKIT-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;} .learnDropdownContainer > ul > li, .learnDropdownContainer > ul > li li { display: block; } .learnDropdownContainer > ul > li > a, .learnDropdownContainer > ul > li li a { display: block; padding: 7px 25px; text-decoration: none; font-weight: 500; color: #253858; } .learnDropdownContainer > ul > li > a:hover{color:#f3423f;} .learnDropdownWrapper:hover .learnDropdownContainer{display:block;} .learnDropdownContainer:before { content: ''; position: absolute; border: 10px solid transparent; border-bottom: 10px solid #b7c3ca; top: 6px; left: 18px; } .learnDropdownContainer:after { content: ''; position: absolute; border: 10px solid transparent; border-bottom: 10px solid #ffffff; top: 7px; left: 18px; } .indexPageTitle{text-align: center; font-size: 1.6em; font-weight: 700; margin: 44px 0 0px;} .topicCard span.fwdArrows { position: relative; color: #f3423f; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; display: inline-block; vertical-align: top;} .topicCard > a:hover span.fwdArrows, .topicCard > a.active span.fwdArrows{ opacity: 1; margin-left: 0; } .topicCard span.fwdArrows i { position: absolute; font-size: 22px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform:translateX(-17px); transform:translateX(-17px);} .topicCard > a:hover span.fwdArrows i, .topicCard > a.active span.fwdArrows i{transform:translateX(0px);} .topicCard span.topcTxt { display: inline-block; padding:0 15px;} .topicCard.startImg {pointer-events: none; position: relative;} .topicCard.startImg a { opacity: 0; pointer-events: none; } .topicCard.startImg:before {content: ''; position: absolute; background: url(../img/start-here-img.png) no-repeat 0 0; width: 240px; height: 120px;display: block;right: -70px; bottom: 10px; z-index: 99;} .pageContainer { padding: 0 25px; } .detailsPageHeader { padding:20px 0; -webkit-box-shadow: inset 0px -6px 15px rgba(135, 148, 165, 0.1); box-shadow: inset 0px -6px 15px rgba(135, 148, 165, 0.1);} .detailsPageHeader .gridCell { vertical-align: middle; } .detailsPageHeader .gridCell.pageIconCell { width: 60px; padding: 0 0 0 25px; } .detailsPageHeader .gridCell.pageIconCell img{max-width:48px; display: inherit;} .detailsPageHeader h1 { margin: 0; font-size: 24px; font-weight: 700; } .detailsPageHeader .gridCell.pageTitleCell { padding-left: 25px; } .detailsPageHeader .gridCell.pageIconCell +.gridCell.pageTitleCell { padding-left: 15px; } .topicIndexTitle { cursor: pointer; display: block; border-bottom: 1px solid #d6d6d6; padding: 12px 0 12px 34px; font-weight: 700; position: relative; color: #ff8713; } .topicIndexTitle:before { content: '*'; background: #ff8713; color: #fff; margin-right: 7px; display: block; width: 18px; text-align: center; position: absolute; left: 7px; font-size: 25px; line-height: 30px; height: 18px; top: 13px; border-radius: 20px; } .topicIndexContent { border: 1px solid #d6d6d6; border-top: 0 none; padding: 25px; display: none; } .acco.topicIndexTitle:after { content: ''; border: 5px solid transparent; border-top: 5px solid #ff8713; position: absolute; right: 10px; top: 50%; margin-top: -3px; } .gridCell.pageNavCell { text-align: right; white-space: nowrap; width: 200px; padding-right: 25px; } ul.pageNavLinks> li { display: inline-block; font-size: 14px; margin: 0 15px; } ul.pageNavLinks> li > a { color: #253858; text-decoration: none; font-weight:600;} ul.pageNavLinks> li > a i { vertical-align: middle; font-size: 20px; margin:0 4px; color: #f3423f; position:relative; } ul.pageNavLinks> li > a:hover { color: #2b80e1; } ul.pageNavLinks> li > a i.next.animateArrow{-webkit-animation: arrow 1s infinite; animation: arrow 1s infinite;} ul.pageDetailstopicList { margin-top: 15px;} ul.pageDetailstopicList > li { display: block; width: 60%; border-bottom: 1px solid #dee4e9; position: relative; } ul.pageDetailstopicList > li > a:not(.seeVideoLink) { font-weight: 600; text-decoration: none; color: #208ceb; padding: 12px 0; display: block; padding-left: 42px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration:underline;} ul.pageDetailstopicList > li > a:not(.seeVideoLink):hover { text-decoration:none; } ul.pageDetailstopicList > li a.seeVideoLink { position: absolute; font-size: 12px; text-decoration: none; right: 15px; padding-left: 35px; display: inline-block; font-weight: 700; color: #253858; line-height: inherit; height: 37px; top: 50%; margin-top: -18px; } ul.pageDetailstopicList > li > a:not(.seeVideoLink):before{content: "\F2C7"; font-family: "Material Design Icons"; position: absolute; left: 15px; font-size: 18px; color: #1f8ceb; } ul.pageDetailstopicList > li a.seeVideoLink .videoIcon { position: absolute; left: 0; color: #2b80de; top: 8px; font-size: 29px; } ul.pageDetailstopicList > li a.seeVideoLink span.txtSm { display: block; font-weight: 300; margin-top: -9px; } .tags {padding: 40px 0 75px 65px; position: relative; margin-top: 35px;} .tagsHelper { font-size: 18px; font-weight: 700; padding-left: 65px; background: url(../img/emoji-thinking.png) no-repeat 0 0; height: 57px; line-height: 57px; position: absolute; top: 0; left: 0; } ul.tagList{margin-top: 13px;} ul.tagList > li { display: block; margin: 5px 15px 0 0; } ul.tagList > li > a { padding: 5px 0 4px 25px; font-weight: 600; color: #208ceb; position: relative; text-decoration: underline;} ul.tagList > li > a:before { content: "\F2C7"; font-family: "Material Design Icons"; position: absolute; left: 0px; font-size: 18px; color: #1f8ceb; } ul.tagList > li > a:hover {text-decoration: none; } .langaugeDropdown { display: inline-block; vertical-align: top; font-size: 13px; margin-top: 10px; position: relative; z-index:9; padding-bottom:11px;} .langaugeDropdown > a { text-decoration: none; color: #1f2f44; padding-right: 20px; display: inline-block; height: 30px; line-height: 30px; position: relative; } .langaugeDropdown > a:after { content: ''; border: 4px solid transparent; border-top: 4px solid #1f2f44; position: absolute; top: 14px; margin-left: 5px; } ul.langaugeList { text-align: left; display: none; border: 1px solid #bac7ce; padding: 10px; border-radius: 3px; position: absolute; -webkit-box-shadow: 4px 4px 14px rgba(93, 109, 130, 0.4); box-shadow: 4px 4px 14px rgba(93, 109, 130, 0.4); background: #fff; max-height: 200px; overflow: auto; right:0; top:41px;} .langaugeDropdown:hover .langaugeList { display: block; } ul.langaugeList > li { display: block; } ul.langaugeList > li > a { display: block; padding: 5px 0 5px 40px; text-decoration: none; color: #616161; white-space: nowrap; position:relative;} ul.langaugeList > li > a:hover { color: #2b80de; background: #f0f7ff; } ul.langaugeList > li > a:before{content:''; display:block; background-image:url(../img/flags.png); background-repeat:no-repeat; width:22px; height:16px; position:absolute; left:9px; top:9px;} ul.langaugeList > li > a[data-lang="af"]:before { background-position: 0 0; } ul.langaugeList > li > a[data-lang="sq"]:before { background-position: 0 -1340px; } ul.langaugeList > li > a[data-lang="ar"]:before { background-position: 0 -32px; } ul.langaugeList > li > a[data-lang="hy"]:before { background-position: 0 -655px;} ul.langaugeList > li > a[data-lang="az"]:before { background-position: 0 -48px; } ul.langaugeList > li > a[data-lang="eu"]:before { background-position: 0 -399px; } ul.langaugeList > li > a[data-lang="be"]:before { background-position: 0 -64px; } ul.langaugeList > li > a[data-lang="bn"]:before { background-position: 0 -96px; } ul.langaugeList > li > a[data-lang="bs"]:before { background-position: 0 -112px; } ul.langaugeList > li > a[data-lang="bg"]:before { background-position: 0 -80px;} ul.langaugeList > li > a[data-lang="ca"]:before { background-position: 0 -128px;} ul.langaugeList > li > a[data-lang="ceb"]:before { background-position: 0 -144px; } ul.langaugeList > li > a[data-lang="ny"]:before { background-position: 0 -1115px; } ul.langaugeList > li > a[data-lang="zh-CN"]:before { background-position: 0 -1612px; } ul.langaugeList > li > a[data-lang="zh-TW"]:before { background-position: 0 -1628px; } ul.langaugeList > li > a[data-lang="hr"]:before { background-position: 0 -604px; } ul.langaugeList > li > a[data-lang="cs"]:before {background-position: 0 -177px;} ul.langaugeList > li > a[data-lang="da"]:before { background-position: 0 -208px; } ul.langaugeList > li > a[data-lang="nl"]:before { background-position: 0 -1082px; } ul.langaugeList > li > a[data-lang="en"]:before { background-position: 0 -255px; } ul.langaugeList > li > a[data-lang="eo"]:before { background-position: 0 -304px; } ul.langaugeList > li > a[data-lang="et"]:before { background-position: 0 -383px; } ul.langaugeList > li > a[data-lang="tl"]:before { background-position: 0 -1468px; } ul.langaugeList > li > a[data-lang="fi"]:before { background-position: 0 -431px; } ul.langaugeList > li > a[data-lang="fr"]:before { background-position: 0 -446px; } ul.langaugeList > li > a[data-lang="gl"]:before { background-position: 0 -526px;} ul.langaugeList > li > a[data-lang="ka"]:before { background-position: 0 -781px; } ul.langaugeList > li > a[data-lang="de"]:before { background-position: 0 -225px; } ul.langaugeList > li > a[data-lang="el"]:before { background-position: 0 -240px; } ul.langaugeList > li > a[data-lang="gu"]:before, a[data-lang="hi"]:before, a[data-lang="kn"]:before, a[data-lang="ml"]:before, a[data-lang="mr"]:before, a[data-lang="pa"]:before, a[data-lang="ta"]:before, a[data-lang="te"]:before { background-position: 0 -542px; } ul.langaugeList > li > a[data-lang="ht"]:before { background-position: 0 -622px; } ul.langaugeList > li > a[data-lang="ha"]:before { background-position: 0 -558px; } ul.langaugeList > li > a[data-lang="iw"]:before { background-position: 0 -733px; } ul.langaugeList > li > a[data-lang="hmn"]:before { background-position: 0 -586px; } ul.langaugeList > li > a[data-lang="hu"]:before { background-position: 0 -637px; } ul.langaugeList > li > a[data-lang="is"]:before { background-position: 0 -701px; } ul.langaugeList > li > a[data-lang="ig"]:before { background-position: 0 -685px; } ul.langaugeList > li > a[data-lang="id"]:before { background-position: 0 -669px; } ul.langaugeList > li > a[data-lang="ga"]:before { background-position: 0 -494px; } ul.langaugeList > li > a[data-lang="it"]:before { background-position: 0 -717px; } ul.langaugeList > li > a[data-lang="ja"]:before { background-position: 0 -749px; } ul.langaugeList > li > a[data-lang="jw"]:before { background-position: 0 -765px; } ul.langaugeList > li > a[data-lang="kk"]:before { background-position: 0 -797px; } ul.langaugeList > li > a[data-lang="km"]:before { background-position: 0 -812px; } ul.langaugeList > li > a[data-lang="ko"]:before { background-position: 0 -828px; } ul.langaugeList > li > a[data-lang="lo"]:before { background-position: 0 -908px; } ul.langaugeList > li > a[data-lang="la"]:before { background-position: 0 -876px; } ul.langaugeList > li > a[data-lang="lv"]:before { background-position: 0 -940px; } ul.langaugeList > li > a[data-lang="lt"]:before { background-position: 0 -924px; } ul.langaugeList > li > a[data-lang="mk"]:before { background-position: 0 -988px; } ul.langaugeList > li > a[data-lang="mg"]:before { background-position: 0 -956px; } ul.langaugeList > li > a[data-lang="ms"]:before { background-position: 0 -1021px;} ul.langaugeList > li > a[data-lang="mt"]:before { background-position: 0 -1036px; } ul.langaugeList > li > a[data-lang="mi"]:before { background-position: 0 -972px; } ul.langaugeList > li > a[data-lang="mn"]:before { background-position: 0 -1005px; } ul.langaugeList > li > a[data-lang="my"]:before { background-position: 0 -1052px; } ul.langaugeList > li > a[data-lang="ne"]:before { background-position: 0 -1068px; } ul.langaugeList > li > a[data-lang="no"]:before { background-position: 0 -1098px; } ul.langaugeList > li > a[data-lang="fa"]:before { background-position: 0 -415px; } ul.langaugeList > li > a[data-lang="pl"]:before { background-position: 0 -1131px; } ul.langaugeList > li > a[data-lang="pt"]:before { background-position: 0 -1163px; } ul.langaugeList > li > a[data-lang="ro"]:before { background-position: 0 -1195px; } ul.langaugeList > li > a[data-lang="ru"]:before { background-position: 0 -1211px; } ul.langaugeList > li > a[data-lang="sr"]:before { background-position: 0 -1356px; } ul.langaugeList > li > a[data-lang="st"]:before { background-position: 0 -1372px; } ul.langaugeList > li > a[data-lang="si"]:before { background-position: 0 -1243px; } ul.langaugeList > li > a[data-lang="sk"]:before { background-position: 0 -1259px;} ul.langaugeList > li > a[data-lang="sl"]:before { background-position: 0 -1276px; } ul.langaugeList > li > a[data-lang="so"]:before { background-position: 0 -1324px; } ul.langaugeList > li > a[data-lang="es"]:before { background-position: 0 -319px; } ul.langaugeList > li > a[data-lang="su"]:before { background-position: 0 -1388px; } ul.langaugeList > li > a[data-lang="sw"]:before { background-position: 0 -1421px; } ul.langaugeList > li > a[data-lang="sv"]:before { background-position: 0 -1404px; } ul.langaugeList > li > a[data-lang="tg"]:before { background-position: 0 -1436px; } ul.langaugeList > li > a[data-lang="th"]:before { background-position: 0 -1452px;} ul.langaugeList > li > a[data-lang="tr"]:before { background-position: 0 -1484px; } ul.langaugeList > li > a[data-lang="uk"]:before { background-position: 0 -1500px; } ul.langaugeList > li > a[data-lang="ur"]:before { background-position: 0 -1516px; } ul.langaugeList > li > a[data-lang="uz"]:before { background-position: 0 -1532px; } ul.langaugeList > li > a[data-lang="vi"]:before { background-position: 0 -1548px; } ul.langaugeList > li > a[data-lang="cy"]:before { background-position: 0 -192px; } ul.langaugeList > li > a[data-lang="yi"]:before { background-position: 0 -1580px; } ul.langaugeList > li > a[data-lang="zu"]:before { background-position: 0 -1596px; } ul.langaugeList > li > a[title="Zulu"]:before { background-position: 0 0; } ul.langaugeList > li > a img { vertical-align: middle; margin-right: 10px; } ul.langaugeList > li > a.glink span{font-size:13px;} span.urlCopyBtn { position: relative; z-index: 9; font-size: 12px; display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #d5dde4; padding: 2px 11px 2px 24px; border-radius: 3px; height: 22px; line-height: normal; cursor: pointer; display: none; margin-left: 5px; } span.urlCopyBtn i { margin-right: 4px; position: absolute; left: 5px; font-size: 14px; top: 1px; } span.urlCopyBtn:hover { background: #f8fcff; } .hasURL:hover span.urlCopyBtn { display: inline-block; } span.urlCopyBtn.active:before {background: #f4fff1; content: 'Copied'; position: absolute; left: -1px; top: -1px; bottom: -1px; right: -1px; text-align: center; color: #1fb13f; line-height: 21px; z-index: 1; border: 1px solid #1fb14e; border-radius: 3px; padding-left: 8px;} span.urlCopyBtn.active:after { content: "\F12C"; position: absolute; font-family: "Material Design Icons"; color: #6bab25; z-index: 2; left: 10px; top: 4px; } .docNoteLayout { padding: 15px 20px; margin: 30px 0; display: inline-block; color: #253958; background: #f0f7ff; background: linear-gradient(to left, #f2fcff 30%, #eaeeff); position: relative;} .docNoteLayout:after { top: 100%; background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #e4efff), color-stop(0.25, #e4efff)); background-image: linear-gradient(135deg, #e2ecfb 25%, transparent 25%), linear-gradient(225deg, #e2ecfb 25%, transparent 25%); background-position: 30%; right: 0; left: 0; z-index: 10; display: block; height: 27px; background-size: 8px 100%; content: ''; position: absolute; } .docNoteLayout p { color: #253958; } .docNoteLayout p b{font-weight: 700;} .docPagesection {padding-right:20%;} .docPagesection h2 { font-weight: 700; position: relative; font-size: 1.4em; line-height:32px; padding-top: 55px;} .docPagesection h2.line:after { content: ''; position: absolute; border-bottom: 1px solid #d5dde4; left: -25px; right: -25px; top: 50%; margin-top: 28px; } .docPagesection h2.line .up { position: relative; z-index: 9; background: #fff; display: inline-block; padding: 0 11px; } .blue{color: #2b80de;} .docPagesection h2.collapsible { padding-left: 20px;display: inline-block;cursor: pointer;} .docPagesection h2.collapsible:before { content: ''; border: 6px solid transparent; border-left: 6px solid #2b80de; position: absolute; left: 2px; margin-top: 9px;} .docPagesection h2.active.collapsible:before {border: 6px solid transparent; border-top: 6px solid #2b80de; margin-top: 11px;} .docPagesection h2.sm{margin-left:10px;} .docPagesection h2+p {padding-top: 20px;} .docPagesection h3 {font-size: 1.24em; position: relative; padding-left: 15px; font-weight: 700;} .docPagesection h3+p {margin-left: 15px; margin-top: 10px;} .docPagesection p+ h3 { padding-top: 23px; } .docPagesection p+ h2 {padding-top: 45px;} .docPagesection h2 + h3 { padding-top: 35px;} .docPagesection > p { margin-left: 15px;} .docPagesection.pageIntroSection h2+p { margin-top: 8px; margin-left: 0;} .docPagesection.pageIntroSection{padding-top:40px;} p > b{font-weight:700;} p > i.ch {color: #ff9900;font-size: 22px; vertical-align: sub;} ol:not(.noStyle) {display: block; padding: 25px 0;} ol:not(.noStyle) > li {display: block; padding: 5px 0 30px 38px; position: relative; counter-increment: step-counter;} ol:not(.noStyle) > li p.stepTitle{font-weight: 500; color: #253858;} ol:not(.noStyle) > li:before {position: absolute; display: block; width: 24px; height: 24px; color: #f2413e; left: 0; content: counter(step-counter); text-align: center; font-weight: 700; font-size: 24px; line-height: 26px; top: 3px; border-bottom: 3px solid #d5dde4; border-left: 0 none; background: #fff; z-index: 9;} ol:not(.noStyle) > li:after {content: ''; position: absolute; left: 11px; top: 13px; width: 3px; background: #d5dde4; bottom: 0;} ol:not(.noStyle) > li > h3{padding-left:0;} ol:not(.noStyle) > li > h3+p{ margin-left: 0} .docSlide ol:not(.noStyle) > li {padding: 5px 0 20px 35px} .docSlide ol:not(.noStyle) > li:before{border-bottom:0 none; font-size: 18px;} ul.noStyle{margin: 14px 35px; list-style-type: disc;} ul.noStyle > li{margin-bottom:10px;} ul.alphaList > li{display: block; position: relative; padding-left: 25px; counter-increment: chapter; padding-bottom: 25px;} ul.alphaList > li:before{content: counter(chapter, lower-alpha); position: absolute; left: 0; font-weight: 700; top: 3px; z-index: 99; background: #fff; padding: 0px 0; text-align: center; border-right: 2px solid #bd7cd8; padding-right: 5px; border-radius: 70px; height: 17px; line-height: 17px;} .docNoteLayout ul.alphaList > li:before{background: #eaeeff;} ul.alphaList > li:after { content: ''; position: absolute; top: 0; bottom: 0; border-left: 1px solid #e6e5e5; left: 4px; z-index: 9; } p + ul.alphaList { margin-top: 15px; } .imgContainer + ol:not(.noStyle){padding-top: 0px; margin-top: -25px;} .postContent .docPagesection:last-child { margin-bottom: 55px; } .imgContainer { position: relative; border: 1px solid #dce2e8; padding: 15px; margin: 20px 15px 20px 0; display: inline-block; } .imgContainer:before { content: ''; position: absolute; border: 8px solid transparent; border-bottom: 8px solid #dce2e8; top: -17px; left:15px; } .imgContainer:after { content: ''; position: absolute; border: 8px solid transparent; border-bottom: 8px solid #ffffff; top: -16px; left:15px;} .imgContainer.loading{ background: #f2f3f5;border: 0 none;} .imgContainer.loading:before{display:none;} .imgContainer.loading:after{border: 0; font: normal normal normal 24px/1 "Material Design Icons"; top: 50%; left: 50%; font-size: 110px; color: #ffffff; margin-left: -55px; margin-top: -55px; content: "\F21F";} .imgContainer img{ max-width: 860px; height:inherit;} .imgContainer:last-child{margin-bottom:0;} .imgContainer.video{display:block; max-width: 850px;} .docPagesection > p + .imgContainer { margin-left: 15px;} .docPagesection h3 + .imgContainer { margin-left: 15px;} img.lazyload { min-width: 150px; min-height: 150px; background: #fff url(../img/loading-sm.GIF) no-repeat center center;} .nextArrow { font-size: 16px; display: inline-block; vertical-align: middle; color: #62bf3b!important; margin: 0 4px; } .gridLayout.fieldContainer { border-bottom: 1px solid #dee4e9; margin-left: 15px;} .gridLayout.fieldContainer .gridCell { vertical-align: middle; padding: 13px 0; } .gridCell.fieldIconCell { width: 100px; text-align: center;} .gridCell.fieldIconCell img { display: inline-block; vertical-align: middle; opacity: 0.7; } .gridLayout.fieldContainer:hover .fieldIconCell img{ opacity:1; } .gridLayout.fieldContainer .gridCell b {color: #253962;} table.docTableStyle { border-left: 1px solid #e4ecf3; border-top: 1px solid #e4ecf3; } table.docTableStyle > thead > tr > th, table.docTableStyle > tbody > tr > td { padding: 6px 13px; border-right: 1px solid #e4ecf3; border-bottom: 1px solid #e4ecf3; text-align: left; } table.docTableStyle > thead > tr > th { font-size: 13px; background: #f0f7ff; text-transform: uppercase; font-weight: 700; color: #2b90e8;} .plusBtn{color: #2b80de; border: 1px solid #2b80de; display: inline-block; width: 20px; height: 20px; text-align: center; border-radius: 100%; line-height: 17px; font-size: 1.1em; margin: 4px} .pageTopImgArea { padding: 25px; text-align: center; border-bottom: 1px solid #d5dde4; height:500px; } .pageTopImgArea img { height: 100%; } .docPagesection.pageIntroSection > h2 { padding-top: 0;} ul.industryList { text-align: center; margin-top: 30px; } ul.industryList > li { text-align: left; display: inline-block; width: 33%; padding-left: 147px; padding-top: 50px; vertical-align: top; position:relative; margin-bottom: 50px;} ul.industryList > li:before{content:''; position:absolute; display:block; width:171px; height:184px; left:10px; top:0; background-size: 128px;} .industryTitle { font-size: 20px; font-weight: 700; color: #197ad4; margin-bottom: 15px; } ul.industrySublist > li { display: block; padding: 5px 0; color: #616b79; } .industrieSect{ background: url(../img/lp-theme-hand-drawn/subpage/industry-bg.png) no-repeat 0 0; } li.automotive:before{background: url(../img/lp-theme-hand-drawn/subpage/automotive.png) no-repeat 0 0;} li.manufacture:before{background: url(../img/lp-theme-hand-drawn/subpage/manufacturing.png) no-repeat 0 0;} li.realEstate:before{background: url(../img/lp-theme-hand-drawn/subpage/real-estate.png) no-repeat 0 0;} li.travel:before{background: url(../img/lp-theme-hand-drawn/subpage/travel.png) no-repeat 0 0;} li.education:before{background: url(../img/lp-theme-hand-drawn/subpage/education.png) no-repeat 0 0;} .indexCards { display: flex; justify-content: center; flex-flow: row wrap; padding: 30px; } .indexCards > .indexCard { padding: 7px; width: 25%; position: relative; } .indexCards > .indexCard > h1 { font-size: 1.5em; font-weight: 700; } .indexCards > .indexCard > h1 > img.indexCardIcon { max-width: 44px; vertical-align: middle; display: inline-block; margin-right: 9px; } .indexCardIn { padding: 15px; border: 1px solid #e0e9f2; -webkit-border-radius: 4px; border-radius: 4px; border-top: 2px solid red; min-height: 170px; margin-top: 15px; } ul.indexCardList { display: block; } ul.indexCardList > li { display: block; border-bottom: 1px solid #e1eaf2; } ul.indexCardList > li:last-child{border-bottom:0;} ul.indexCardList > li > a { display: block; padding:9px 25px 9px 10px; line-height:20px; font-weight: 600; color: #208ceb; text-decoration: none; position: relative; } ul.indexCardList > li > a:after { content: "\F142"; font-family: "Material Design Icons"; position: absolute; right: 5px; top: 50%; color: #f2413e; margin-top: -10px; font-size: 18px; } ul.indexCardList > li > a:hover { text-decoration: underline;} .leadManageBtnWrap { text-align: center; padding: 40px 0 30px; } a.manageLeadBtn { font-size: 1.6em; font-weight: 700; text-decoration: none; display: inline-block; padding: 0.8em 1.4em; border: 2px solid #e83939; color: #e83939; border-radius: 3px; position:relative;} a.manageLeadBtn .txt{position:relative; z-index:1;} a.manageLeadBtn:after { content: ''; position: absolute; left: 0; right: 100%; top: 0; bottom: 0; background: #fff7e0; transition: all 0.3s ease; } a.manageLeadBtn:hover:after{right:0;} pre { display: inline-block; unicode-bidi: embed; font-family: monospace; white-space: pre; border: 1px solid #ffffff; padding: 20px 20px 20px 40px; position: relative; background: #fff9ef; font-size: 13px; color: #11253e; margin: 15px 0 55px 15px; max-width: 100%; overflow: auto; } pre:before { content: ''; top: 0; left: 0; bottom: 0; width: 15px; display: block; position: absolute; background: #f9e6e2; border-right: 1px solid #ecccc9; } .docPagesection > .docNoteLayout { margin-left: 15px;} span.apiLinkStyle {display: inline-block; color: #1b8dde; padding: 2px 0px; font-size: 14px; margin-left: 3px; margin-right: 20px;} pre + p.textHighlighter {margin-top: -20px;} .textHighlighter { font-weight: 700; margin: 34px 0 15px; color: #ef6a5b; } .textHighlighter + pre {margin-top: 0;} .videosList { display: block; padding: 0 65px; margin-top: 35px; } .videosList > li { display: inline-block; width: 33.33%; padding: 7px; margin-right: -4px; vertical-align:top;} .videosList > li > .videoContainer { height: 100%; background: #f1f2f8; color: #fff; border-bottom: 0; box-shadow: 0 0 13px; } .videosList > li > .videoContainer iframe { max-width: 100%; height: inherit; margin-bottom: -6px; border: 1px solid #e1eaf3; } .videosList > li > .videoContainer p { color: #ffffff; padding: 14px 20px 14px; font-size: 16px; font-weight: 700; background: #2b80de; position:relative; padding-right: 55px; margin-top:-8px; } .videosList > li > .videoContainer p span.time { position: absolute; right: 20px; font-weight: 300; font-size: 13px; } .scroll a { padding-top: 70px; } .scroll a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: scroll 1.5s infinite; animation: scroll 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes scroll { 0% {-webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes scroll { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes arrow { 0% {left:0;} 75% {left:12px;} 100% {left:0;} } @-webkit-keyframes arrow { 0% {left:0;} 75% {left:12px;} 100% {left:0;} } .imgGrid { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; max-width: 90%; margin-top: 10px;} .imgWrap { width: 49%; border: 1px solid #f2413e; margin: 1%; counter-increment: step-counter; position:relative; } .imgWrap:before { content: counter(step-counter); position: absolute; display: block; width: 24px; height: 24px; background: #f2413e; text-align: center; line-height: 24px; font-weight: 700; color: #fff; left:-4px; top:-4px;} .imgGrid > .imgWrap:nth-child(odd) { margin-left: 0; } .imgGrid > .imgWrap:nth-child(even) { margin-right: 0; } .imgWrap img { max-width: 100%; } .modalContainer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: table; width: 100%; height: 100%; z-index: 9999; display:none;} .modalContainer .modalBg { background: rgba(0,0,0,0.4); height: 100%; display: table-cell; text-align: center; vertical-align: middle; } .modal h2 { text-align: center; margin-bottom: 30px; font-size: 22px; font-weight: 300; } .modal input[type=text], .modal input[type=email], .modal input[type=password], .modal input[type=search], .modal textarea, .modal select { width: 100%; height: 38px; border: 1px solid #CDD8E3; border-radius: 3px; box-shadow: inset 1px 1px 3px #f2f2f2; padding: 0 15px; font-size: 14px; transition: all 0.4s ease; font-family: 'Roboto', sans-serif!important;} .inputDiv { padding-bottom: 10px; position: relative; } .successMsg { padding: 12px; background: #0fa961; color: #fff; font-size: 15px; text-align: center; border-radius: 3px; } .modal .btn {height: 44px; width: 100%; text-align: center; display: block; line-height: 44px; text-decoration: none; border-radius: 3px; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3); box-shadow: 1px 1px 3px rgba(0,0,0,0.3); font-size: 16px; background: #25a5e5; color: #fff; margin-top: 10px; border: 1px solid #25a5e5; font-weight: 700; cursor:po} form.feedback { min-width: 300px;} form.feedback textarea{padding-top: 10px; font-family: 'Roboto', sans-serif; min-height: 90px; font-size:14px;} .modal input[type=text]:focus, .modal input[type=email]:focus, .modal input[type=password]:focus, .modal input[type=search]:focus, .modal textarea:focus, .modal select:focus {outline:0 none; border-color: #2088D5; box-shadow: 0 0 3px #1EBCEE; } .modal { display: inline-block; background: #fff; padding: 35px; border-radius: 3px; box-shadow: 1px 1px 12px rgba(0,0,0,0.4); position:relative; } a.modalClose { position: absolute; right: 0; top: 0; margin: -17px; color: #fff; text-decoration: none; font-size: 24px; } .wpcf7-form-control-wrap{display:block;} .wpcf7-form-control-wrap input{height: 30px; border: 1px solid #c7c7c7; border-radius: 3px;} .form1 input[type="text"] { height: 30px!important; padding: 0 12px !important; border-radius: 3px !important; } .wdform-element-section {width: 100%!important;} .wdform-field { width: 100%!important; } .wdform-field { width: 100%!important; display: block!important; } .wdform_section { line-height: 18px!important; } .form1 .wdform-label{font-size:14px!important;} .form1 .wdform-label-section { width: 100%!important; display: block!important; text-align: left!important; max-width: 100%!important; } .form1 textarea { border-radius: 3px!important; padding-top: 5px!important;} .form1 .wdform_page{font-family:inherit!important; max-width: 330px!important;} .wdform-element-section { display: block!important; width: 100%!important; text-align: left!important;} .form1 .button-reset{float:none!important;} .form1 .button-submit { background: #309fd9!important; font-size: 14px!important; font-family: inherit!important; border-radius: 3px!important; } .form1 .button-reset{font-size: 14px!important; font-family: inherit!important; border-radius: 3px!important;} .form1 .warning, .form1 .error { margin-bottom: 8px!important; background-color: #f7f6f1!important; border: 1px solid #bbbbbb!important; border-radius: 3px!important; color: #7b826a!important; padding: 5px!important; } ul.topMenu { padding-top: 14px; margin-left: 80px; display: inline-block; } ul.topMenu li { display: inline-block; font-size: 14px; margin-left: 25px; } ul.topMenu li a { text-decoration: none; color: #436e92; font-size: 14px; } .feedbackContainer { text-align: center; margin-top: 70px; background: white; padding: 30px 0; display:none; } .feedbackContainer h2{margin-top: 0;} a.feedbackModalBtn { display: inline-block; padding: 10px 25px; background: #0a940a; color: #fff; text-decoration: none; border-radius: 3px; font-weight: 700; } .a2a_floating_style{display:none;} .utronFlowContainer { background: #eef5ff; padding: 45px 35px; margin: 30px -25px 0; } .utronFlowContainer .gridCell { vertical-align: top; } .gridCell.utroImgCell { vertical-align: middle; width: 220px; } .utronFlowContainer h2 { font-weight: 700; margin-bottom: 7px; } .flowStepsWrap { display: flex; flex-wrap: wrap; padding-left:15px;} .flowStepsContainer { display: inline-block; vertical-align: top; width:48%; margin-top: 30px; margin-right: 12px; border-radius: 5px; border: 1px solid #dbe8fb; background: #eef5ff; } .flowStepsContainer.active { box-shadow: 0 0 14px rgb(197, 203, 212); border: 1px solid #c1d2ea;} .flowStepsContainer .flowStepsType { background: #fff; font-weight: 700; padding: 7px 17px; border-radius: 4px 4px 0 0; } .flowStepsContainer ul { padding: 15px; } .flowStepsContainer ul > li { display: block; padding-bottom: 4px; position: relative; padding-left: 15px; counter-increment: step-counter;} .flowStepsContainer ul > li:before{content: counter(step-counter); font-weight: 700; position: absolute; left: 0;} .gridCell.sampleFlowImgCell { width: 250px; padding-right: 50px; } .gridCell.sampleFlowImgContent { vertical-align: middle; font-size: 18px; font-weight: 300; } .collpasibleContent{display:none;} span.docTooltipEle { position: relative; display: inline-block; cursor: default; } span.docTooltipEle:after { content: ''; border-bottom: 2px dotted red; position: absolute; left: 0; right: 0; bottom: 0; } .docTooltipContainer { position: absolute; background: #fff; z-index: 999; border: 2px solid #4c8cec; padding: 19px; left: 0; min-width: 390px; border-radius: 5px; box-shadow: 13px 13px 26px rgba(129, 137, 162, 0.5); margin-top: 9px; } .docTooltipContainer:before { content: ''; border: 8px solid transparent; border-bottom: 8px solid #4c8cec; position: absolute; top: 0; margin-top: -17px; } .docTooltipContainer:after { content: ''; border: 8px solid transparent; border-bottom: 8px solid #ffffff; position: absolute; top: 0; margin-top: -14px; } .docTooltipContainer h2 { margin: 0 0 7px; padding: 0; font-size: 14px; line-height: inherit; color:#4c8cec; } .docTooltipContainer p { margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 300; line-height: 20px;} .docTooltipContainer h2 + p { padding: 0; font-size: 14px; font-weight: 300; } .docTooltipWrap { padding-top: 7px; position: absolute; display: none; transition: all 0.3s ease; z-index: 999999; } .docTooltipEle:hover .docTooltipWrap { display: block; margin-top:-15px; } .docNoteLayoutPlain { padding: 25px 30px; display: inline-block; box-shadow: 11px 11px 14px -7px #e8d9d5; border-radius: 0; background: #fffae6; } .docNoteLayoutPlain h4 { font-weight: 700; font-size: 16px; margin-bottom: 8px; color: red; } .docNoteLayoutPlain a{font-weight: 700; color: #2b80de;} .docPagesection.useCaseFooter {margin-bottom: 55px; border-top: 1px solid #e1eaf3; margin: 45px -25px; padding: 0 25px 105px;} .useCaseListFooter { display: inline-block; max-width: 310px; margin-right: 50px; vertical-align: top; margin-top: 28px; } h4.useCaseType { font-size: 16px; font-weight: 700; border-bottom: 2px solid red; padding: 0 0 5px 0; margin-bottom: 20px;} ul.useCaseList > li { display: block; border-bottom: 1px solid #e1eaf3; padding: 10px 0 10px 24px; font-size: 14px; position: relative; line-height: 20px; } ul.useCaseList > li:before { content: ''; content: "\F134"; font-family: Material Design Icons; position: absolute; left: 0; color: red; } ul.useCaseList > li > a { text-decoration: none; color: #263858; pointer-events:none; } ul.useCaseList > li > a:hover { color: #2b80e0; } .useCaseListFooter.scheduled h4 { color: #8446e4; border-bottom-color: #8446e4; } .useCaseListFooter.oneTimeChange h4 { border-bottom-color: #5c84f5; color: #5b84f5; } .docPagesection.utronIntroContainer { background: #f2f3ff; padding: 55px 25px 55px; } .docPagesection.utronIntroContainer .gridCell.utroImgCell { width: 300px; padding: 0 40px 0 25px; } .docPagesection.utronIntroContainer h2 { padding-top: 0; } .docPagesection.utronIntroContainer h2 + p { padding-top: 5px; margin-bottom: 25px; } ul.checkCircleList.uTrongUseList { display: inline-block; vertical-align: top; margin-top: 15px; max-width: 350px; margin-right: 40px;} ul.checkCircleList.uTrongUseList:last-child{margin-right:0;} ul.checkCircleList > li { display: block; padding: 9px 0 9px 25px; border-bottom: 1px solid #d7e1ea; position: relative; } ul.checkCircleList > li:before { content: "\F134"; font-family: "Material Design Icons"; position: absolute; left: 0; font-size: 18px; color: red; } .docPagesection.utronIntroContainer h4 { font-size: 18px; margin-top: 30px; } .docPagesection.typesOfUtrons { padding: 0 25px 55px; } ul.uTronsTypesList { margin-top: 45px;} ul.uTronsTypesList > li { display: inline-block; max-width: 33%; padding: 0 25px; vertical-align: top; text-align: center; } ul.uTronsTypesList > li > h2 { border-bottom: 1px solid #e1eaf3; padding-bottom: 8px; margin-bottom: 5px; font-size:18px;padding-top:0; } .docPagesection.utronGetStartedSect{ padding:0 0; border-top: 1px solid #e1eaf3;} .utronExamples { padding-top: 10px; } .utronEg { padding: 40px 0 40px 159px; border-bottom: 1px solid #e1eaf3; position: relative; counter-increment: step-counter; } .utronEg:before { content: counter(step-counter); position: absolute; font-size: 120px; left: 40px; top: 88px; color: #e7eef5; } .utronEg:nth-child(even) { background: #f5faff; } .utronEg h2 { padding-top: 0; color: #2b80de; } .utronEg h2+p { padding-top: 0; margin-bottom: 16px; } .utronEg h4{ font-size: 16px; font-weight: 700; margin-top: 20px;} .utronEg ul.alphaList { margin: 15px 26px; } .utronEg ul.alphaList > li { padding-bottom: 3px; } .utronGetStartedTop { text-align: center; padding: 45px 0 0; margin: 0 -25px; position: relative; } .utronGetStartedTop h1 { font-size: 36px; font-weight: 700; margin-bottom: 17px; } .utronGetStartedTop h4 { font-size: 18px; } .docPagesection.utronIntroContainer .gridCell.utroImgCell img {max-width: 100%;} .seeUtronBtn{display: inline-block; padding: 6px 20px; border-radius: 3px; text-decoration: none; font-weight: 700; color: white; background: #8a6ce8;} ul.upperRoman { margin-top: 10px; padding-left: 20px; margin-bottom: 10px; } ul.upperRoman > li { display: block; position: relative; padding-left: 25px; counter-increment: roman-num; padding-bottom: 8px;} ul.upperRoman > li:before { position: absolute; left: 0; font-weight: 700; font-size: 12px; top: 3px; z-index: 99; background: #fff; padding: 0px 0; text-align: center; border-right: 2px solid #8da3b5; padding-right: 5px; border-radius: 70px; height: 17px; line-height: 17px; content: counter(roman-num , upper-roman); } .flowStepsContainer ul.upperRoman > li:before{background:#eef5ff;} .docSlidesContainer { max-width: 850px; margin: 0 auto;} .docSlide { background: #fff; padding: 0 45px 45px 45px; margin-bottom: 35px; border-radius: 10px; box-shadow: 0 0 5px rgb(204, 207, 220);} .docSlide.firstSlide { background: #643cd2; } .docSlide.firstSlide.light { background: #fff; } .slideTitle { font-size: 24px; font-weight: 700; margin: 0 -45px; padding: 20px 45px 14px; text-align: center; background: #fff; } .slideTitle img { vertical-align: middle; max-width: 48px; margin-right: 12px; } .docSlideTitle {font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; padding: 34px; margin: 0 -45px 35px; text-align: center; border-radius: 10px 10px 0 0; position: relative; border-top: 5px solid #FF9800; color: #f16e1e; background: #fff9f2;} .docSlideTitle span.pageCount {position: absolute; right: 20px; font-size: 12px; color: #968fa7; font-weight: 300; top: 10px;} .docSlide.firstSlide ul.pageDetailstopicList > li{border-bottom:0 none; width: 100%;} .docSlide.firstSlide ul.pageDetailstopicList > li > a:not(.seeVideoLink){color:#f0e8ff;} .docSlide.firstSlide ul.pageDetailstopicList > li:nth-child(even) { background: #6a44d4; } .docSlide.firstSlide ul.pageDetailstopicList > li > a:not(.seeVideoLink):before{color: #f4c586} .docSlide.firstSlide.light ul.pageDetailstopicList > li > a:not(.seeVideoLink){color: #208ceb;} .docSlide.firstSlide.light ul.pageDetailstopicList > li:nth-child(even) { background: #f9f8ff; } .docSlide.firstSlide.light ul.pageDetailstopicList > li > a:not(.seeVideoLink):before { color: #ff9800; } .docSlide.firstSlide.light ul.pageDetailstopicList > li > a:not(.seeVideoLink){ padding: 10px 0 10px 42px;} .docSlide .learnMoreBtn{font-size: 16px; font-weight: 700; text-decoration: none; color: #ffffff; margin-bottom: 60px; display: inline-block; padding: 10px 47px 10px 28px; background: #f75b1f; border-radius: 60px; margin: 10px 0 10px; position: relative;} .docSlide .learnMoreBtn i{position: absolute; display: inline-block; width: 20px; height: 20px; background: #ffffff; text-align: center; line-height: 20px; border-radius: 100%; right: 15px; top: 12px; color: #ed8133;} .docSlide p { color: #292b35;} .docSlide .imgContainer.video { margin: 25px auto; border: 1px solid #ccd5de; } .docSlide .imgContainer.video:before {border-bottom: 8px solid #9ba6b1;} .docSlide ul.pageDetailstopicList { margin-top: 25px;} .docSlide h2 { font-size: 22px; font-weight: 700; color: #f16d1e; } .docSlide h3 { font-size: 16px; font-weight: 700; } .docSections { display: flex; justify-content: center; padding-top: 45px; } .docSections > div { margin: 9px; background: #fff; padding: 55px; width: 380px; border-radius: 15px; } .adminSectHeading { text-align: center; font-size: 20px; font-weight: 700; padding-bottom: 20px; } .adminSectHeading i.ch { font-size: 56px; display: block; margin-bottom: 20px; } .adminSect .adminSectHeading i.ch, .adminSect .adminSectHeading span, .adminSect ul.checkCircleList > li:before, .adminSect ul.checkCircleList > li > a:hover{ color: #f16e1e; } .userSect .adminSectHeading i.ch, .userSect .adminSectHeading span, .userSect ul.checkCircleList > li:before, .userSect ul.checkCircleList > li > a:hover{ color: #643cd2; } .docSections ul.checkCircleList > li:before{top:9px;} .docSections ul.checkCircleList > li{padding:0;} .docSections ul.checkCircleList > li:last-child { border-bottom: 0 none; } .docSections ul.checkCircleList > li > a { text-decoration: none; color: #253858; display:block; padding: 9px 25px; position: relative; } .docSections ul.checkCircleList > li > a:after { content: "\F13E"; font-family: "Material Design Icons"; position: absolute; right: 15px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .docSections ul.checkCircleList > li > a:hover:after { right: 10px; opacity:1; } .adminSectHeading p {font-size: 13px;font-weight: 400; margin-top: 3px;} .automationContainer {max-width:1000px; margin:0 auto; padding-bottom:40px;} .automationContainer * {color:#253858;} .automationContainer .pagePara {padding:50px 0; } .automationContainer .utronImgBg { background: #fff; padding: 13px; width: 80px; height: 80px; border-radius: 50px; border: 1px dotted #7956da; border-width: 2px; margin-right: 25px;} .automationContainer .mainlistStyle {list-style:none;} .automationContainer .circle { width: 40px; height: 40px; background: #3bbd69; border-radius: 40px; } .automationContainer h5.section-title { font-weight: 800; font-size: 16px; padding: 0 0 15px; } .automationContainer ul.listStyle { list-style: none; } .automationContainer ul.mainlistStyle > li { margin: 0; display: flex; align-items: flex-start; padding-bottom: 20px;} .automationContainer .contentBody { width:90%; padding: 40px; background: #fff; border-radius: 15px; } .automationContainer .imgBody { width: 90px; position: relative; margin-top: 10px; } .automationContainer .imgBody:after { content: ''; background: #b3bed1; height: 1px; width: 15px; display: block; position: absolute; top: 50%; left: 49px; margin-top: 0px; } .automationContainer .bgOrange.circle { background: #f16e1e; } .automationContainer .bgBlue.circle {background: #399df4;} .automationContainer ul.listStyle.checkList > li > span { font-weight: 700; } .automationContainer ul.listStyle.checkList > li { position: relative; padding: 5px 0 5px 30px; margin-left: 0; } .automationContainer ul.listStyle.checkList > li:after { content: ''; position: absolute; width: 1px; height: 100%; background: #d7d7d7; left: 7px; top: 15px; } .automationContainer ul.listStyle.checkList > li:last-child:after {display:none;} .automationContainer .ch-source-fork:before, .automationContainer .ch-image:before { font-size: 20px; font-weight: 500; color:#fff;} .automationContainer i.ch.ch-source-fork, .automationContainer i.ch-image{ padding: 9px; line-height: 40px; } .automationContainer .checkList i.ch.ch-check { background: #3bbd69; box-shadow: 0 0 0 3px white; width: 15px; height: 15px; border-radius: 15px; display: inline-block; color: #fff; text-align: center; line-height: 15px; position: absolute; left: 0; top: 9px; z-index: 99; } .automationContainer .ch-check:before { content: "\F12C"; font-size: 12px; } .automationContainer .logic-section.btmSpace { padding-bottom: 25px; } .automationContainer ul.listStyle > li { margin-left: 15px; } .automationContainer .automation-header { background: #7956da; padding: 35px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .automationContainer .swiper-container { width: 100%; height: 100%; padding-top: 15px;} .automationContainer .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: flex-start; -ms-flex-align: flex-start; -webkit-align-items: flex-start; align-items: center; } .automationContainer .swiper-pagination-bullet { width: 47px; border-radius: 8px; text-align: center; line-height: 30px; background: #ffffff; font-weight: 700; height: 30px; border: 1px solid #c8d0d6; opacity: unset; } .automationContainer .swiper-pagination-bullet-active { color:#fff; background: #643cd2; border: 1px solid #643cd2; } .automationContainer .automation-header{display: flex; align-items: center;} .automationContainer .left-li-space {padding-left:35px;} .automationContainer .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets { text-align: center; margin-top: 15px; bottom: unset; top: 0;} /*.automationContainer .swiper-pagination-bullet { font-size: 0; width: 10px; height: 10px; }*/ .swiper-slide > div { font-size: 15px; } .swiper-container .swiper-button-next, .swiper-container .swiper-button-prev { width: 35px; height: 35px; margin-top: -17px; background-image:none; background-color: #4b8dee; border-radius: 50px; box-shadow:1px 1px 3px rgba(75, 141, 238, 0.63); } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: ''; width: 8px; height: 8px; border-right: 3px solid white; border-top: 3px solid white; display: block; transform: rotate(45deg); margin-top: 12px; margin-left: 11px; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: ''; width: 8px; height: 8px; border-bottom: 3px solid white; border-left: 3px solid white; display: block; transform: rotate(45deg); margin-top: 12px; margin-left: 14px; } ol.listStylePost { list-style-position: inside; } .logic-section .listStyle { margin-left: 37px; } p.imgHighlight { background: #fff7d6; padding: 15px; border-radius: 3px; margin-bottom: 30px; border: 1px solid #e47a1e; text-align: left; } .automationUtron {padding-bottom:35px;} .automationUtron .utronImg { width: 190px; text-align: center; padding: 15px; position:relative;} .automationUtron .mainlistStyle > li { background: #fff;} .automationUtron .contentBody { background :none; border-radius: 0;} .automationUtron i.ch { color: #fff; font-size: 21px; text-align: center; margin: 10px; line-height: 40px; } .automationUtron li.bgWhite { background: #fff; border-radius: 15px; margin: 15px 0 !important; padding: 40px; align-items: center !important;} .automationUtron h5.bldHeading { font-weight: 700; font-size: 16px; line-height: 20px; } /*.automationUtron .utronIcon { border-radius: 50px; background: #eaeaea; border: 1px solid #e6e6e6; width: 60px; height: 60px; margin: 0 auto; }*/ .automationUtron i.ch.ch-bell { color: #fff; font-size: 20px; line-height: 38px; } .automationUtron .bldTxt { font-weight: 800; font-size: 20px; margin-top: 17px; margin-top: 27px;} .automationUtron .absolutePost { position: absolute; left: 59%; top: 63px; } .automationUtron i.ch.ch-source-fork {padding:0;} .automationUtron i.ch.ch-check.circle { line-height: 12px; width: 17px; display: inline-block; height: 17px; position: absolute; left: 3px; margin: 0; } .automationUtron ul.utronChkList li { list-style: none; position: relative; font-size: small; } .automationUtron ul.utronChkList li a.automationContainer:hover { text-decoration: none; } .automationUtron .utronChkListLink {text-decoration:none;} .automationUtron ul > li > a.utronChkListLink { display: block; padding: 20px 0 17px 30px; border-bottom: 1px solid #e4dfdf; } .automationUtron ul > li > a.utronChkListLink:last-child { border-bottom: 0 none; } .automationUtron ul > li > a.utronChkListLink:hover { background: #f3f3f3; } .automationUtron ul > li > a.utronChkListLink:hover .bldHeading { color: #2ea4fa; } .automationUtron ul.utronChkList > li:last-child a { border-bottom: 0 none !important; } .maintenanceModeMsg { background: #d42d1b; text-align: center; color: #fff; padding: 12px; font-size: 14px; } .maintenanceMode .maintenanceBtn { position: relative; cursor: default; } .maintenanceMode .maintenanceBtn:before { content: ''; position: absolute; left: 0;right: 0;top: 0; bottom: 0; z-index: 99999;} .maintenanceMode .ch-btn.btnPurple.maintenanceBtn { background: #8765e9!important;} .maintenanceMode .ch-btn.btnWhite.maintenanceBtn { background: #9a88fd!important; color: #6757be; } .maintenanceTooltipWrap { position: absolute; left: 0; right: 0; display: none; text-align: center;} .maintenanceMode .nav-menu-right .maintenanceTooltipWrap {left: inherit; right: -15px; min-width: 262px; } .maintenanceTooltipWrap:before { content: ''; position: absolute; border: 5px solid transparent; border-bottom: 5px solid #1d0a40; top: -3px; } .maintenanceMode .nav-menu-right .maintenanceTooltipWrap:before{right:40px;} .maintenanceTooltip { position: absolute; background: #1d0a40; color: #fff; line-height: normal; padding: 10px 15px; font-size: 14px; font-weight: 400; border-radius: 5px; left: 20px; right: 20px; top: 7px; } .maintenanceTooltip:before { content: 'i'; display: inline-block; width: 16px; height: 16px; background: #ff7500; color: #fff; border-radius: 15px; font-weight: 600; line-height: 16px; margin-right: 6px; } .maintenanceBtn:hover .maintenanceTooltipWrap { display: block; } .maintenanceMode ul.nav-menu-right > li > a.maintenanceBtn { position: relative; cursor: default; } /*.automationContainer .automationUtron .automateTheme {display:inline-block;} .automationContainer .automationUtron .transferTheme {display:none;} .automationContainer .transferTheme {display:inline-block;} .automationContainer .automateTheme {display:none;}*/ @media screen and (max-width:1368px){ ul.indexCardList>li>a {font-size: 0.98em;} .indexCards>.indexCard>h1 {font-size: 1.3em;} a.manageLeadBtn {font-size: 1.4em; padding: 0.6em 1.3em;} .leadManageBtnWrap {padding: 60px 0 20px;} .videosList > li > .videoContainer p{font-size:15px;} } @media screen and (max-width:1024px){ ul.pageDetailstopicList > li{width:100%;} .imgContainer img { max-width: 100%; } .wrapper{padding-left:0;} .sidebar{left:-215px;} body.sidebarAction .wrapper { -webkit-transform: translateX(215px); transform: translateX(215px);} .docPagesection {padding-right:0;} .topicCard.startImg:before { background: url(../img/start-here-device.png) no-repeat 0 0;height: 130px; right: 50%; bottom: 0px; margin-right: -120px;} .contentScroller{-webkit-overflow-scrolling: touch;} .headerWrap{left:0;} .topicCard, .indexCards > .indexCard {width: 33.33%;} .videosList > li{width:50%;} span.apiLinkStyle{word-break: break-all;} pre{margin-left:0;} } @media screen and (max-width:768px){ .topicCard, .indexCards > .indexCard {width: 50%; margin-bottom: 15px;} .videosList { padding: 0 15px;} .docPagesection.useCaseFooter{margin:45px 0;} .useCaseListFooter { display: block; max-width: 100%; margin-right: 0;} img.automaationImg { max-width: 500px; } } @media screen and (max-width:767px){ .featureDropdownContainer { display: none;} .header{height:60px;} .pageContainer { padding: 0 15px; } .detailsPageHeader .gridCell.pageIconCell img { max-width: 44px;} .detailsPageHeader h1 {font-size: 1.4em;} ul.pageDetailstopicList>li>a:not(.seeVideoLink), .docPagesection h3, .imgContainer, .docPagesection h3+p{padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0;} ul.pageDetailstopicList>li>a:not(.seeVideoLink){padding-left:42px;} .docPagesection h2.line:after {left: -15px; right: -15px;} .gridCell.pageNavCell { display: none!important;} ul.pageDetailstopicList > li a.seeVideoLink{display:none;} .topicCard.manageLeads:before{display:none;} .topicCard.startImg a { height: 126px; padding-top: 0; } .topicCards{padding:30px 10px;} .docPagesection>p+.imgContainer, .docPagesection h3+.imgContainer, .docPagesection>p { margin-left: 0; } img.lazyload{min-width:100%; min-height:40px;} .gridLayout.fieldContainer{margin-left:0;} span.topicImgContainer>.row>span.cell.topicTxtCell {height: 58px;line-height: 20px;} .gridCell.sampleFlowImgCell { display: block!important; width: 100%; padding-right: 0; } .gridCell.sampleFlowImgCell img { max-width: 100%; } .gridCell.sampleFlowImgContent { display: block!important; width: 100%; } .gridCell.sampleFlowImgContent img { margin-top: -70px!important; margin-left: 100px!important; width: 60px!important; } .flowStepsContainer { display: block; width: 100%;} .flowStepsWrap {padding-left: 0; } .flowStepsContainer{margin-right: 0;} .docSections{flex-direction:column; padding-top: 35px;} .docSections > div{width:inherit; margin: 0 0 15px 0;} .automationUtron ul.mainlistStyle li.bgWhite { display: block; } .automationUtron .utronImg {width:100%;} .automationUtron li.bgWhite, .automationContainer .automation-header {padding:20px;} .automationContainer .automation-header {align-items: flex-start;} .automationContainer .utronImgBg {width: 40px; height: 40px; padding: 0;} .automationContainer img.header-utronImg { width: 35px; height: 35px; } .automationContainer .utronImgBg { margin-right: 15px;} } @media screen and (max-width:600px){ .topicCard, .indexCards > .indexCard {width: 100%;} .indexCards{padding:15px;} .leadManageBtnWrap { padding: 15px; } a.manageLeadBtn { font-size: 1.3em; padding: 0.8em 0; display: block; } .indexCardIn{min-height:inherit;} .videosList > li{width:100%;} .headerTop .langaugeDropdown{display:none;} .docSlide{padding:0 20px 45px 20px;} .docSlideTitle{ margin: 0 -20px 35px;} }