/* ==========================================================================
WORKFLOW
========================================================================== */
.workflow .sticky .workflow-tabs { display: none; }
.workflow .inner.main-content { max-width: 100%; padding: 0; }
.workflow section { counter-reset: h2counter; margin: 0; }
.workflow .main-heading-wrapper { border-bottom: 1px solid #d1d1d1; background: #f7f7f7; }
.workflow .sticky.main-heading-wrapper { padding: 0 !important; }
.workflow .main-title { font-weight: 400; }
.workflow .main-title ~ section, .workflow .main-heading ~ section { margin: 0 auto 1.5rem !important; }
.workflow section .hideable { margin: 0 12px 2rem 15px; }
.workflow section .inner { margin: 0 auto; }
.workflow section .toggle { color: #37a8ac; border: 0; font-weight: 600; font-size: 1.063rem; letter-spacing: .5px; }
.workflow #intro { padding: 1.6rem 26px 0 !important; margin: 0 auto !important; color: #646464; font-size: 1.125rem; line-height: 1.3; max-width: 1200px; font-weight: 300; }
.workflow section #intro { padding: 1.6rem 0 0; }
.workflow-guide #intro { padding: 0 1rem; }
.workflow #intro p { margin: 0; }
.workflow:not(.workflow-guide) .main .platform-container { padding: 0 2rem !important; }
.workflow .hideable p:first-of-type { margin: 0 0 1rem; }
.workflow .hideable p, .workflow .main p { max-width: 750px; }
.workflow .main section:last-of-type { border-bottom: 0; padding: 0; }
.workflow section .toggle, .workflow section:last-of-type h1.toggle { padding: 1.5rem 0 !important; }
.workflow section ~ section .toggle { border-top: 1px solid #37a8ac; }
.workflow section .toggle.open:before { border-right: 0; border-left: 1px solid #37a8ac; border-bottom: 1px solid #37a8ac; top: -8px; left: -5px; }
.workflow section .toggle:before { border-left: 0; border-right: 1px solid #37a8ac; border-bottom: 1px solid #37a8ac; width: 8px; height: 8px; top: -6px; left: -5px; }
.workflow .toggle { border-top: 1px solid #37a8ac; font-weight: 400 !important; }
.workflow .main section.alternateHeader:last-of-type { padding: 0 2%; }

.workflow section .toggle, .workflow section:last-of-type h1.toggle { padding: 1.5rem 0 !important; }
.workflow section ~ section .toggle { border-top: 1px solid #37a8ac; }
.workflow section .toggle.open:before { border-right: 0; border-left: 1px solid #37a8ac; border-bottom: 1px solid #37a8ac; top: -8px; left: -5px; }
.workflow section .toggle:before { border-left: 0; border-right: 1px solid #37a8ac; border-bottom: 1px solid #37a8ac; width: 8px; height: 8px; top: -6px; }
.workflow .toggle { border-top: 1px solid #37a8ac; font-weight: 400 !important; }
.workflow section .toggle:hover { color: #43ccd1; }
.workflow section .toggle:hover:before, .workflow section .toggle.open:hover:before { border-color: #43ccd1; }

.workflow section.alternateHeader .toggle, .workflow section.alternateHeader:last-of-type h1.toggle { padding-top: .5rem !important; padding-bottom: 0 !important; }
.workflow section.alternateHeader { margin: .7rem auto; }
.workflow section.alternateHeader ~ section.alternateHeader .toggle { border-top: 1px solid #e5e5e5 !important; }
.workflow section.alternateHeader .NotesThumbnails { margin-bottom: 1rem; }
.workflow section.alternateHeader > .hideable { margin: 0 12px 1rem 15px; }
.workflow section.alternateHeader h2 ~ *:not(h2) { margin-left: 0 !important; }
.workflow section.alternateHeader:hover .toggle { color: #43ccd1; }
.workflow section.alternateHeader:hover .toggle:before { border-color: #43ccd1 !important; }
.workflow section.alternateHeader.open:hover .toggle { color: #37a8ac; }
.workflow section.alternateHeader.open:hover .toggle:before { border-color: #37a8ac !important; }
.workflow section.alternateHeader.open .toggle:hover { color: #43ccd1; }
.workflow section.alternateHeader.open .toggle:hover:before { border-color: #43ccd1 !important; }
.workflow .inlineFunctionList { display: inline-block; padding: 0 0 0 1.7rem; }
.workflow .hideable h2, .workflow .WorkflowNotesHeader { margin: 1rem 0; }
.workflow .WorkflowNotesHeader { border-top: 1px solid #ddd; padding: 1rem 0 0 0; font-size: 1.063rem; }
.workflow h2 { color: #333; position: relative; font-weight: 400; margin: 1rem 0 0 0; font-size: 1.25rem; }
.workflow .toggle + .hideable h2:not(:first-of-type) { margin: 1rem 1.8rem 1rem -3px; }
.workflow .toggle + .hideable h2:first-of-type { margin: 0 1.8rem 1rem -3px; }
.workflow .toggle + .hideable img + h2, .workflow .toggle + .hideable .AnnotatedInput + h2 { margin-top: 1.5rem; }
.workflow .ThickSpace { display: none; }
.workflow .feedback-content { max-width: 960px; margin: 0 auto; position: relative; border: 0; }
.workflow .feedback-wrapper #feedback {position: relative;top:0;margin-bottom: 3rem;}
.workflow .modified { display: none; }
.workflow .footer-links { margin: 0; }
.workflow .footer-links .inner { max-width: 100%; margin: 0; border: 0; background: #eee; border-top: 2px solid #cacaca; padding: 1rem 0 2rem; }
.workflow #feedbackForm { padding: 0 0 6rem; max-width: 960px; margin: 0 auto; }
.workflow hr, .workflow .WorkflowDelimiter { height: 1px; border: 0; margin: 2rem 0; background: #d9eff2; }
.workflow .hideable p, .workflow .WorkflowNotesText { margin: 1rem 0; font-size: 1rem; color: #646464; }
.workflow #WorkflowNotes .WorkflowNotesText { margin: 0 0 1rem; }
.workflow .WorkflowNotesSection img { margin: 0 5px 3px; vertical-align: middle; position: relative; margin-left: 0 !important; }

.workflow .workflow-tabs { position: relative; margin: 0; z-index: 0; }
.workflow .workflow-tabs li { display: inline-block; margin: 0 -4px 0 0; vertical-align: bottom; }
.workflow .workflow-tabs a { 
    background: #fff; 
    border: 1px solid transparent; 
    border-bottom-color: #fff !important; 
    bottom: -1px; 
    color: #898989; 
    display: block; 
    padding: 3px 1rem 6px; 
    font-size: 1rem; 
    line-height: 20px;
    position: relative; 
    z-index: 10; 
}
.workflow .workflow-tabs a.selected { 
    border-color: #d1d1d1; 
    border-radius: 4px 4px 0 0; 
    border-style: solid; 
    border-width: 1px; 
    color: rgba(55,165,169, 1); 
}
.workflow .workflow-tabs a:hover { opacity: .75; }
.workflow .workflow-tabs a.selected:hover { color: rgba(55,165,169, .7); opacity: 1; }
.workflow .workflow-tabs a.selected:hover:before { opacity: .7; }
.workflow .workflow-tabs a:after { content: ''; border-left: 1px solid #d1d1d1; display: inline-block; height: 18px; bottom: 5px; position: absolute; left: -1px; }
.workflow .workflow-tabs .noborder a:after { display: none; }
.workflow .workflow-tabs li:first-of-type a:after { display: none; }

.workflow .instruction { display: block; position: relative; }
.workflow .arrow { position: absolute; }
.workflow .menuItem { color: #333; }
.workflow .hideable .functionList { font-size: 1rem; font-weight: 300; color: #646464; max-width: 750px; }
.workflow h2:before { counter-increment: h2counter; content: counter(h2counter); font-family: 'Roboto'; font-style: normal; font-size: 11px; border: 1px solid #a6a6a6; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 19px; top: .15rem; position: absolute; left: -23px; font-weight: 600; padding: 0; color: #a6a6a6; }
.workflow .grid { display: table; width: 100%; box-sizing: border-box; }
.workflow .half { display: table-cell; float: none; width: 49%; }
.workflow-guide .guide .inner { padding: 2rem 0; }
.workflow-guide .guide .WorkflowDelimiter:first-of-type { display: none; }
.workflow .guide .grid { border-top: 1px solid #e5e5e5 !important; display: table; width: 100%; margin: 0 auto; }
.workflow .half .guide { padding: 0 !important; }
.workflow .guide:first-of-type .grid { border-top: 0 !important; }
.workflow .guide:last-of-type .grid { margin: 0 auto 2rem; }
.workflow .special { font-size: 1.13rem; color: #222; margin: .8rem 0 .8rem; }
.workflow .guide li { margin: .8rem 0; }
.workflow .guide li a { color: #37a8ac; }
.workflow .guide li a:hover { color: #f77700; }
.workflow .guide li a.ellipsis { font-weight: 600; letter-spacing: .25rem; font-size: 1.2rem; line-height: 1; margin: -.4rem 0 0; height: .9rem; display: block; }
.workflow .guide li a.ellipsis:after { content: ''; }
.workflow .guide li a.ellipsis .paren { color: #bfbfbf; }
.workflow .num-workflows { display: none; }

.workflow .InCell.last { margin: 0 0 1rem 27px !important; }
.workflow .AnnotatedOutput { margin: 0 0 1rem -4.3rem !important; }
.workflow .AnnotatedExpression { margin: 1rem 0 2rem -4.3rem; }
.workflow .AnnotatedInput { margin: 0 0 1rem -4.3rem !important; }
.workflow #intro + h2 ~ .AnnotatedOutput { margin: 0 0 1rem -3rem }
.workflow #intro + h2 ~ .AnnotatedExpression { margin: 1rem 0 2rem -3rem; }
.workflow #intro + h2 ~ .AnnotatedInput { margin: 0 0 1rem -3rem; }

.workflow img  { max-width: 100%; height: auto; vertical-align: middle; bottom: 1px; position: relative; }

.workflow .special-character.Ellipsis { color: #a6a6a6; font-size: .875rem; font-family: 'Source Sans Pro'; margin: 0 0 .8rem; display: block; }
.workflow .special-character.Ellipsis:hover { color: #f77700; }
.workflow .paren { color: #bfbfbf; font-size: .625rem; top: -1px; left: 2px; display: inline-block; position: relative; }
.workflow .num { font-size: .688rem; font-weight: 300; font-family: 'Roboto'; display: inline-block; top: 1px; position: relative; }
.workflow .Ellipsis:hover .paren { color: #f77700; }

.workflow .special a { color: #333; }
.workflow .special:hover .special-character.RightGuillemet { color: #f77700; cursor: pointer; }
.workflow .special:hover a { color: #f77700; }

.workflow .main > section.notoggle { padding: 0 25px !important; }

.workflow .related-links { border-top: 1px solid #cacaca; background: #f7f7f7; position: relative; }
.workflow .related-links ~ .related-links { border-top: 0; }
.workflow .related-links h1 { color: #333; border-top: 0; }
.workflow .related-links ~ .related-links h1 { border-top: 1px solid #cacaca; }
.workflow .related-links a { color: #535353; font-weight: 400; font-size: .88rem; }
.workflow .related-links a:hover { color: #f77700; }
.workflow section:not(.related-links) h1:not(.toggle) { margin-left: auto; margin-right: auto; border-top: 0; padding: 0; }
.workflow section:not(.related-links) h1:not(.toggle) { max-width: 960px; }

.workflow .WorkflowGuideThickDelimiter { border-top: 2px solid #dfdfdf; }

.workflow section:not('.related-links'):last-of-type { margin-bottom: 3rem; }

.workflow .WorkflowDelimiter.last { display: none; }

.workflow #WorkflowNotes h1 { color: #333; }

.workflow #WorkflowNotes .toggle:before { border-bottom: 1px solid #333 !important; border-right: 1px solid #333 !important;
 border-bottom: 0;
 border-top: 0; }
.workflow #WorkflowNotes .toggle.open:before { border-left: 1px solid #333 !important; border-bottom: 1px solid #333 !important;
 border-top: 0 !important;
 border-right: 0 !important; }

.workflow .guide a.inactive-link { color: lightgray; }
.workflow .guide li a.inactive-link { color: lightgray; }
.workflow .footer-links .box { background: transparent; border: 0; }

/* ==========================================================================
  responsive breakpoint styles
  ========================================================================== */

/* styles for large screens (1200px)
  ========================================================================== */
@media all and (max-width: 1200px) {
  
}
/* styles for medium screens (900px)
  ========================================================================== */
@media all and (max-width: 900px) {
   .workflow section .toggle:before { top: -5px; }
   .workflow section .toggle.open:before { top: -7px; }
   .workflow h2:before { top: 0; }
   .workflow .special { font-size: 1.15rem; }
}

/* styles for small screens (600px)
  ========================================================================== */
@media all and (max-width: 600px) {
   .workflow .guide:last-of-type .grid { border-bottom: 1px solid #e5e5e5 !important; }
   .workflow { z-index: 100000; max-width: 100%; }
   .workflow .workflow-tabs li { margin: .55rem -4px 0 0; }
   .workflow .workflow-tabs a { display: block; padding: 3px 10px 6px; }
   .workflow .num-workflows { display: inline-block; }

   .workflow h1.toggle:before { width: 6px; height: 6px; }
   .workflow .guide .grid div, .workflow .half { display: block; width: 100% !important; float: none; }
   .workflow .special-character.Ellipsis { margin: -3px 0 1.3rem; }
   .workflow .grid > div:last-of-type .special-character.Ellipsis { margin: 0; }
   .workflow .half { margin: 0; padding: 0 0 1rem 0; }
   .workflow .half + .half { border-left: 0; border-top: 1px solid #e5e5e5; padding: 1.5rem 0 0; }
   .workflow .InCell, .workflow .OCell { margin: 0 0 1rem 20px; }
   .workflow .AnnotatedExpression, .workflow .AnnotatedInput, .workflow .AnnotatedOutput { margin-left: -3rem !important; }
}