body{@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');font-family:'Source Sans Pro',sans-serif;padding:60px 20px;background-color:#F9FBFC;color:#2C3E4F;line-height:150%}
body section.item.skeleton .title,
body section.item.skeleton .content{display:flex;flex-direction:row;flex-wrap:wrap}
body section.item.skeleton .title span,
body section.item.skeleton .content span{background-color:#DEE1E2;border-radius:20px}
body section.item.skeleton .title{margin:4px 0 20px;height:20px;gap:10px}
body section.item.skeleton .title:before,
body section.item.skeleton .title:after{content:'';background-color:#DEE1E2;border-radius:20px}
body section.item.skeleton .title:before{width:15%}
body section.item.skeleton .title:after{width:40%}
body section.item.skeleton .content{gap:12px}
body section.item.skeleton .content span{height:10px}
body section.item.skeleton .content span:nth-child(1){width:50%}
body section.item.skeleton .content span:nth-child(2){width:20%}
body section.item.skeleton .content span:nth-child(3){width:25%}
body section.item.skeleton .content span:nth-child(4){width:25%}
body section.item.skeleton .content span:nth-child(5){width:15%}
body section.item.skeleton .content span:nth-child(6){width:45%}
body section.item.skeleton.variant-2 .title:before{width:35%}
body section.item.skeleton.variant-2 .title:after{width:10%}
@media (max-width:768px){body{padding:40px 20px}}
body .demo-content-container{max-width:700px;min-width:300px;margin:0 auto}
body .demo-content-container .october-logo{width:250px;display:block;margin-bottom:40px}
body .demo-content-container .document{background:#FFF;border:1px solid #ECF0F1;box-shadow:0 3px 5px 0 rgba(0,0,0,0.04);border-radius:10px;padding:40px 0 0 0}
body .demo-content-container .document h1,
body .demo-content-container .document h2,
body .demo-content-container .document p{padding:0;margin:0 0 20px 0}
body .demo-content-container .document h1{margin-bottom:40px;font-size:22px;font-weight:700;position:relative;padding-left:48px}
body .demo-content-container .document h1:before{content:'';position:absolute;left:0;top:-4px;width:35px;height:35px;background:url("/themes/getting-started/assets/images/october-header-icon.png") no-repeat;background-size:contain}
body .demo-content-container .document p{font-weight:400;font-size:16px}
body .demo-content-container .document h2{margin-bottom:10px;font-size:16px;font-weight:600}
body .demo-content-container .document a.cta{display:inline-block;padding:10px 20px;margin-top:20px;background-color:#7065FF;color:white;border-radius:30px;font-weight:600;text-decoration:none}
body .demo-content-container .document a.cta:hover{background-color:#5B4EDD}
body .demo-content-container .document code{background-color:#F2F4F5;padding:5px;margin:0 2px;border-radius:5px;font-size:14px;font-weight:600}
body .demo-content-container .document section{padding:0 30px}
body .demo-content-container .document section.hidden{display:none}
body .demo-content-container .document section.item{padding:30px 30px 30px 70px;position:relative;border-top:#DDE0E2 1px solid}
body .demo-content-container .document section.item p:last-of-type{margin-bottom:0}
body .demo-content-container .document section.item:before{position:absolute;content:attr(data-step);width:28px;height:28px;left:30px;border-radius:100%;font-size:16px;font-weight:bold;text-align:center;border:2px solid #BDC3C7;box-sizing:border-box;color:#BDC3C7}
body .demo-content-container .document section.item.started:before{background-color:#BDC3C7;color:white}
body .demo-content-container .document section.item.completed:before{content:'';background:url("/themes/getting-started/assets/images/completed-item.png") no-repeat;background-size:contain;border:none}
body .demo-content-container .document section.item.completed a.cta{display:none}