/* HEADER */

.u-header__section {  background-color: #ffffff; }

.footer-bg            { background-color: #f7fafc; border-top: 1px solid #ecf1f5; border-bottom: 1px solid #ecf1f5; }
.footer-ideo a.footer-link          { color: #8799a9; }
.footer-ideo a.footer-link:hover    { color: #525f7f; text-decoration: none; }
.footer-ideo h3                     { color: #525f7f; font-weight: 600; }

.u-btn-green                        { background-color: #81c737; color: #ffffff; }
.u-btn-green:hover                  { background-color: #8fdd3d; color: #ffffff; }
#continue-button                    { color: #ffffff; }
a.add-to-slack-button               { color: #EBF2F5; font-size: 18px; font-weight: 600; }
a.add-to-slack-button               { background: #d7ffba; border: 1px solid #2D8ABE; box-sizing: border-box; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); border-radius: 4px; }
a.add-to-slack-button:hover         { box-shadow: 0px 4px 10px rgba(70,161,211, 0.5); color: #ffffff; }

a.add-to-slack-button               { color: #f2f7ff; font-size: 18px; font-weight: 600; padding: 0.6rem 2.2rem; }
/*a.add-to-slack-button               { background: #d2ffb1; border: 1px solid #2f6130; box-sizing: border-box; box-shadow: 0px 3px 8px rgba(75,132,70, 0.3); border-radius: 4px; }*/
a.add-to-slack-button               { background-color: #1b304b; border: 1px solid #142337; box-sizing: border-box; box-shadow: 0px 3px 8px rgba(27,48,75, 0.4); border-radius: 4px; }
a.add-to-slack-button:hover         { box-shadow: 0px 4px 10px rgba(27,48,75, 0.65); color: #ffffff; }

.add-to-slack-main .trial-desc      { margin-top: 0.5rem; }

section.head-section .add-to-slack-main a.add-to-slack-button     { font-size: 21px; line-height: 1.6; padding: 0.7rem 1.8rem; }

section.head-section                        { background-color: #ffffff; }
section.head-section h1                     { margin-top:1.5rem; }
section.head-section .main-flyer            { padding: 2rem 2rem 0rem 2rem; }
section.head-section .add-to-slack-main     { padding: 2rem 2rem 2rem 2rem; }
table.subprocessors                         { margin-bottom: 1.5rem; font-family: Georgia; }
table.subprocessors th                      { padding:8px 24px 8px 0px; }
table.subprocessors td                      { padding:8px 24px 8px 0px; }

#top-nav-bar                                              { margin-right: 80px; margin-top: 12px; }
#top-nav-bar .navbar-nav a.nav-link.selected              { font-weight: 600; color: #202020; }
#top-nav-bar .navbar-nav a.nav-link                       { color: #505050; font-size: 18px; font-weight: 400; }
#top-nav-bar .navbar-nav a.nav-link:hover                 { color: #000000; }
#top-nav-bar .navbar-nav #sign-in-link a.nav-link         { font-weight: normal; color: #f46420; border: 1px solid #f46420; padding: 0.5rem 1rem; border-radius: 4px;}
#top-nav-bar .navbar-nav #sign-in-link a.nav-link:hover   { background-color: #f46420; color: #fff; text-decoration:none; }
#top-nav-bar .navbar-nav #sign-in-link                    { margin-left: 120px; }
#top-nav-bar .navbar-nav .nav-item                        { margin-right: 40px; }


/* HOME */

.credit-card-info                   { color: #222222; }

.head-section .sub-text             { color: #707070; font-size: 20px; }
.head-section h1.main-title         { font-size: 48px; font-weight: 600; color: #202020; margin-top: 2rem; }
.head-section img.prod-anim         { border-left: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; margin-top: 2rem; /*margin-bottom: 1rem;*/ }
.head-section .pricing-title        { padding-top: 2rem; padding-bottom: 1rem; }

.feature-icon                       { text-align: center; padding-bottom: 1.5rem; }
.feature-section                    { padding-top: 50px; padding-bottom: 50px; }

.generic-list-title                 { color: #202020; font-weight: 600; text-align: center; font-size: 18px; margin-bottom: 1rem; }
.generic-list li                    { color: #505050; margin-bottom: 8px; text-align: left; font-size: 15px; }
.generic-list                       { list-style: none; }
.generic-list li::before            { content: "\2022"; color: #aedaff; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }


.example-section                        { background-color: #ffffff; }
.example-section .convo-anim            { border: 1px solid #eeeeee; }
.example-section .feature-title         { color: #202020; font-weight: 600; text-align: center; font-size: 32px; text-transform: none; margin-bottom: 8px; }
.example-section .feature-text          { color: #707070; font-weight: normal; text-align: center; font-size: 21px; margin:0 5% 2.5rem 5%; line-height: 1.6; }
.example-section .feature-list-wrap     { text-align: center; font-size: 18px; background-color: #f6f6f6; margin: 2rem 20% 3rem 20%; padding: 1rem 1rem 0.5rem 1rem; border-radius: 8px; }
.example-section .list-title            { color: #515154; font-weight: normal;   }
.example-section ul.feature-list        { color: #515154; font-weight: normal; display: inline-block; }
.example-section ul.feature-list li     { text-align: left; }
.example-section .feature-text strong   { font-weight: 600; }
.example-section .feature-pic           { margin-top: 1rem; }
.example-section .bullet                { color: #E59F49; margin-right: 8px; margin-left: 8px; }
.example-section .section-title         { font-size: 32px; font-weight: 600; color: #171a26; padding-bottom: 0.5rem; margin-top: 2rem; text-transform: uppercase; }
.example-section .separator             { height: 4px; width: 360px; background-color: #46A1D3; }
.example-section .shadow                { border-radius:4px; box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025); }

.app-preview                            { background-image: url("/static/img/spock_img/people-bg-v.1.0.png"); background-size: 1200px 600px; background-repeat: no-repeat; background-position: center center; }


.claims                             { padding: 6rem 0 0rem 0; }
.claims .claim                      { padding: 4rem 3rem; }
.claims .claim h2                   { color: #202020; font-size: 26px; font-weight: 600; margin-bottom: 8px; line-height: 32px; }
.claims .claim p                    { color: #808080; font-size: 20px; line-height: 32px; font-weight: 500; }
.claims .claim img                  { box-shadow: 0 6px 12px -2px rgba(50,50,93,.25), 0 3px 7px -3px rgba(0,0,0,.3); border-radius: 3px; }

.customers                          { margin-top: 6rem; margin-bottom: 4rem;}
.customers .reviews-title           { margin-top: 5rem; color: #202020; font-size: 21px; font-weight: 600; }
.customers .reviews-badge           { margin-top: 1rem; }
.customers h2                       { color: #202020; font-size: 32px; font-weight: 600; margin-bottom: 2rem }

.get-started                        { margin: 3rem 0 4rem 0; }
.get-started .slogan h1             { font-size: 36px; text-align: center; color: #202020; font-weight: 600; margin-bottom: 0.5rem; }
.get-started .slogan p              { font-size: 18px; text-align: center; color: #505050; margin-bottom: 0; }

.how-it-works-wrap                  { text-align: center; padding-bottom: 6rem; }
a.how-it-works-link                 { font-weight: normal; font-size: 22px;  color: #1b304b; border: 1px solid #1b304b; padding: 0.7rem 1.5rem; border-radius: 4px; }
a.how-it-works-link:hover           { background-color: #1b304b; color: #fff; text-decoration:none; }


/* FAQ */

section.faq-top                             { padding-bottom: 2rem; }
.faq-top-content                            { width: 100%; }
section.faq-top .main-title                 { color: #202020; margin-top: 3rem; margin-bottom: 1.5rem; font-weight: 600; text-align: center; }
section.faq-top .generic-list               { margin-left: 50px; }
section.faq-top .generic-list a             { color: #007BE4; font-size: 18px; font-weight: 500; }
section.faq-top .generic-list-title         { text-align: left; }

.faq-section                                { margin:2rem auto 3rem auto; width: 80%;}
.topic                                      { font-size: 24px; color: #202020; font-weight: 700; text-align: center; padding-bottom: 3rem; padding-top: 3rem;  }
.faq                                        { margin-bottom: 3.5rem; }
.faq .question                              { font-size: 18px ; color: #202020; font-weight: 600; padding-left: 42px; position: relative; }
.faq .answer                                { font-size:16px; font-weight: 400; margin: 0.5rem 0 3rem 0; line-height: 26px; color: #515b61;  padding-left: 42px; position: relative; }
.faq .answer strong                         { font-weight: 600; color: #1f1a47; }


.faq .question:before                       { background-image: url("/static/img/spock_img/chevron-right-green-24.png"); background-size: 18px 18px; content: ""; position: absolute; width: 24px; height: 24px; left: -3px; top: 6px; background-repeat: no-repeat; color: #c1c9d2; }

.faq-section ul, .faq-section ol            { margin-top: 8px; counter-reset: listitem; list-style: none; line-height: 26px; font-size: 16px; padding-inline-start: 0px; }
.faq-section ol>li:before                   { box-sizing:content-box; counter-increment: listitem; content: counter(listitem); background: #e3e8ee; color: #697386; font-size: 12px; font-weight: 500; line-height: 10px; text-align: center; padding: 5px 0; height: 10px; width: 20px; border-radius: 10px; position: absolute; left: 0; top: 3px; }
.faq-section ol>li                          { position: relative; margin: 4px 0; padding-left: 32px; }

.faq-section ul>li                          { position: relative; margin: 4px 0; padding-left: 32px; }
.faq-section ul>li:before                   { content: ""; position: absolute; width: 6px; height: 6px; left: 8px; top: 10px; border-radius: 50%; background: #c1c9d2; }
.faq-section code                           { line-height:20px; display: inline-block; border: 1px solid #c1c9d2; border-radius: 4px; margin: 0 2px 0 2px; padding: 0 6px 0 6px; background-color: #f6f6f6;  }
.faq-section code.doc-button                { border: 1px solid #c1c9d2; background-color: #f6f6f6; color:#3c4257; font-weight: 600; padding: 0 10px 0 10px;  }
.faq-section code.web                       { color:#007BE4;  }
.faq-section code.slack                     { color:#2eb67d;  }
.faq-section code.pink                      { color:#B83280; font-weight: 600;  }


/* PRICING */
.pricing                                    { box-shadow: 0 6px 12px -2px rgba(50,50,93,.25), 0 3px 7px -3px rgba(0,0,0,.3); border-radius: 4px; padding: 40px; background-color: #ffffff; margin-bottom: 60px; }
.pricing .plan-title                        { color: #24b47e; font-weight: 600; text-transform: uppercase; text-align: center; }
.pricing .price-box                         { text-align: center; color: #6b7c93; padding-bottom: 18px; padding-top: 8px; }
.pricing .price-box .price                  { color: #24b47e; color: #32325d; font-size: 36px; font-weight: 600; line-height: 1; }
.pricing .price-box .price-per-user         { color: #24b47e; color: #32325d; font-size: 24px; font-weight: 500; line-height: 1; }
.pricing .price-box .plus                   { color: #6b7c93; font-size: 36px; font-weight: 400; margin-top: 8px; }
.pricing .price-box .price-per              { line-height: 1; }
.pricing .price-box .price-note             { margin-top:24px; padding: 12px; border-radius: 6px; background: #f2feef; margin-left: 0; color: #32325d; }
.pricing .price-box .price-note a           { color: #32325d; text-decoration: underline; }
.pricing .button-box                        { text-align: center; }
.pricing .pricing-icon                      { margin-right: 6px; }
.pricing .feature-list                      { color: #525f7f; }
.pricing .feature-list li                   { line-height: 23px; }
.pricing .feature-list li img               { margin-bottom: 2px; }
.pricing .trial-desc small                  { font-size: 14px; }
.pricing .trial-desc                        { line-height: 1.5; margin-top: 18px; margin-bottom: 0; }
.pricing .trial-desc .free-text             { color: #2a2f45; }

.calculator                                 { margin-top: 28px; }
.calculator .title                          { color: #24b47e; color: #32325d; color: #6b7c93; font-size: 14px; font-weight: 400; text-transform: none; text-align: center; margin-bottom: 12px; }
.calculator .price-info                     { margin-top: 12px; }
.calculator .price-item                     { font-size: 16px; color: #6b7c93; width: 50%; }
.calculator .price-value                    { color: #32325d; font-weight: 600; }

.slider                                     { -webkit-appearance: none; width: 100%; height: 12px; border-radius: 5px; background: #e4e7ed; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; }
.slider::-webkit-slider-thumb               { -webkit-appearance: none; appearance: none; width: 24px; height: 25px; border-radius: 50%; background: #32325d; cursor: pointer; }
.slider::-moz-range-thumb                   { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; }


/* LEGAL TEXT*/
.legal-text           { padding-top: 2rem; }

.legal-text h1        { font-size: 30px; color: #111111; font-weight: 600; }
.legal-text h4        { color: #111111; margin-top: 1.5em; font-size: 18px; font-weight: 600; }
.legal-text h5        { color: #333333; margin-top: 1.5em; font-size: 16px; font-weight: 600; }
.legal-text p         { color: #333333; }


/* COOKIE CONSENT */
.cookie-consent                             { border-top: 1px solid #ecf1f5; border-bottom: 1px solid #ecf1f5; background-color: #f6f6ee }
.cookie-consent button                      { margin-left: 8px;}

/* END OF A TRIAL */
.end-of-trial p                               { color: #32325d; font-size: 18px; line-height: 1.7; margin-bottom: 1.7rem; }
.head-section.end-of-trial                    { background-color: #fbfcf6; }