/* ==========================================================================
   WORKFLOW
   ========================================================================== */
.workflow .header .inner { padding: 1rem 12px 1.2rem; }
.workflow .main { margin-bottom: 0; }
.workflow .badge { background: #27979a; }
.workflow .main-heading-wrapper { background: #f7f7f7; border-bottom: 1px solid #d1d1d1; border-top: 2px solid #27979a; }
.workflow-guide .main-heading-wrapper { background: #fff; border-bottom: 0; }
.workflow-guide .main-heading-wrapper h1 { margin: 0 0 10px; font-size: 2.375rem; }
.workflow .sticky { z-index: 100000; max-width: 100%; min-height: 80px; }
.workflow .sticky.no-workflow-tabs { min-height: auto; }
.workflow .sticky .inner { padding: 0 1rem; transition: padding .2s ease-in-out; }
.workflow .sticky h1 { font-size: 1.25rem; transition: font-size .2s ease-in-out; font-weight: 600; }
.workflow .main-heading-wrapper .inner { margin: 0 auto; }
.workflow .sticky .workflow-tabs li { margin: 0 -2px 0; }
.workflow .sticky .workflow-tabs:before { display: none; }
.workflow .sticky .workflow-tabs a:after { height: 15px; }
.workflow-guide .topContentWrap, .workflow-guide .inner, .workflow-guide .main-heading-wrapper.sticky { min-height: 30px; }

.workflow nav.topContentWrap { width: 100%; left: 0; right: 0; z-index: 1; }

.workflow .main-heading-wrapper h1 { font-weight: 400; transition: font-size .2s ease-in; margin: 0 0 .8rem; }
.workflow-guide .main-heading-wrapper.sticky { background: #f7f7f7; border-bottom: 1px solid #d5d5d5; }
.workflow .inner.main-content { max-width: 100%; padding: 0; }
.workflow section { max-width: 960px; margin: 0 auto; counter-reset: h2counter; padding: 0 12px; }

.workflow .main-heading { position: relative; z-index: 0; padding: .8rem 0 0; margin: 0; }
.workflow .dropdown a.menu:after { content: ''; background: none; display: inline-block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(45deg); transform: rotate(-45deg); border-left: 0; border-color: #646464; border-width: 0 0 1px 1px; border-style: solid; width: 7px; height: 7px; left: 6px; top: -.2rem; position: relative; }
.workflow .dropdown a.menu { color: #646464; font-size: .9rem; }
.workflow .dropdown a.menu:hover { opacity: .5; }
.workflow .dropdown .hover a.menu:hover { opacity: 1; }
.workflow .sticky { position: fixed; }
.workflow .main-title ~ section, .workflow .main-heading ~ section { margin: 0 auto 1.5rem !important; }
.workflow section > .hideable { margin: 0 12px 2rem 15px; }
.workflow section > div { margin: 0 12px 2rem 15px; }
.workflow section .toggle { color: #37a8ac; border: 0; font-weight: 600; font-size: 1.063rem; letter-spacing: .5px; }
.workflow #intro { padding: 1.6rem 26px 0; margin: 0 auto !important; color: #646464; font-size: 1.125rem; line-height: 1.3; max-width: 960px; font-weight: 300; }
.workflow section #intro { padding: 1.6rem 0 0; }
.workflow-guide #intro { padding: 0 1rem; }
.workflow #intro p { margin: 0; }
.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 12px; }
.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 { 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 .related-links ~ .feedback-wrapper .feedback { top: -1.6rem; margin: 0 70px 0 0; right: 0; position: absolute;  }
.workflow .related-links ~ .feedback-wrapper .feedback + a.toplink { top: -1.6rem; margin: 0 10px 0 0; }
.workflow .related-links ~ .feedback-wrapper .feedback + a.toplink .top { top: .15rem; }
.workflow .related-links ~ .feedback-wrapper .feedback + a.toplink:before { right: 31px; left: auto; top: .3rem; }
.workflow .related-links ~ .feedback-wrapper .feedback + a.toplink:after { right: 30px; left: auto; top: .1rem; }
.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 { display: block; padding: .2rem 1rem .4rem; color: #898989; font-size: 1rem; vertical-align: bottom; bottom: -1px; position: relative; border: 1px solid transparent; z-index: 10; }
.workflow .workflow-tabs a:hover { opacity: .75; }
.workflow .workflow-tabs a.selected { border-width: 1px 1px 0 1px; border-style: solid; border-color: #d1d1d1; color: rgba(55,165,169, 1); border-bottom: 1px solid #fff; border-radius: 4px 4px 0 0; background: #fff; }
.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 .guide { padding: .4% 12px !important; max-width: 960px; }
.workflow .half { display: table-cell; float: none; }
.workflow .guide.grid { border-top: 1px solid #e5e5e5 !important; display: table; width: 100%; max-width: 960px !important; margin: 0 auto; padding: 0 12px !important; }
.workflow .half .guide { padding: 0 !important; }
.workflow .guide.grid:first-of-type { border-top: 0 !important; }
.workflow .guide.grid:last-of-type { margin: 0 auto 2rem; }
.workflow .special { font-size: 1.13rem; color: #222; margin: 1.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 .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'; }
.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 section + #SeeAlso { margin-top: 1.5rem; }
.workflow #SeeAlso a, .workflow #Tutorials a, .workflow section[id^="Related"] a { color: #acacac; font-weight: 400; }
.workflow #SeeAlso a:hover, .workflow #Tutorials a:hover, .workflow section[id^="Related"] a:hover { color: #f77700; }
.workflow #SeeAlso, .workflow #Tutorials, .workflow section[id^="Related"], .workflow #TechNotes { padding: 1rem 0 2rem !important; max-width: 100%; border-top: 1px solid #cacaca; margin: 0 ; background: #f7f7f7; }
.workflow section h1:not(.toggle) { max-width: 960px; margin-left: auto; margin-right: auto; border-top: 0; padding: 0 12px; }
.workflow section[id^="Related"] .inlineFunctionList { display: block; max-width: 880px; }
.workflow #SeeAlso .functionList li , .workflow #Tutorials .functionList li , .workflow section[id^="Related"] .functionList li { margin: .3rem 0 .72rem 2.4rem; }
.workflow #SeeAlso .functionList li:last-of-type , .workflow #Tutorials .functionList li:last-of-type , section[id^="Related"] .functionList li:last-of-type { margin-bottom: 0; }
.workflow h1 + .inlineFunctionList, .workflow h1 + ul.functionList { max-width: 880px; margin: 1rem auto 0 !important; }

.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; }

/* ==========================================================================
   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 .related-links ~ .feedback + a.toplink .top { top: .2rem; }
    .workflow .special { font-size: 1.15rem; }
}

/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    .workflow .guide.grid:last-of-type { border-bottom: 1px solid #e5e5e5 !important; }
    .workflow { z-index: 100000; max-width: 100%; }
    .workflow section { padding: 0 2% 0 4%; }
    .workflow section:last-of-type { padding: 0 12px !important; }
    .workflow section .inner { padding: 0 1rem; }
    .workflow .main-heading-wrapper { min-height: 60px; background: #f7f7f7; border-bottom: 1px solid #d5d5d5; }
    .workflow .main-heading-wrapper h1 { font-size: 1.7rem; }
    .workflow .main-heading { padding: .4rem 0 0; }
    .workflow nav.topContentWrap.collapsed { background: #e5e5e5; position: relative; padding: 0; }
    .workflow .badge { padding: 8px 2%; }
    .workflow .topContentWrap.collapsed.open { background: #27979a; }
    .workflow .badge { position: absolute; }
    .workflow .workflow-tabs li { margin: .55rem -4px 0 0; }
    .workflow .collapsed .dropdown { top: 30px; position: absolute; right: 0; visibility: hidden; }
    .workflow .topContentWrap .dropdown.hide { display: inline-block !important; visibility: hidden; }
    .workflow .square { display: inline-block !important; background: #a6a6a6; width: 3px; height: 3px; margin: 0 3px 0 0; }
    .workflow .num-workflows { display: inline-block; }

    .workflow h1.toggle:before { width: 6px; height: 6px; }
    .workflow .collapsed .collapsed-dropdown { top: 0; right: 4px; font-size: 1.4rem; position: absolute; width: 2.5rem; height: 2.5rem; line-height: .35; cursor: pointer; text-align: center; padding: 8px 3px; margin: 0; z-index: 100; }
    .workflow .collapsed .collapsed-dropdown:hover .square { background: #898989; }
    .workflow .collapsed .collapsed-dropdown.open .square { background: #fff; }
    .workflow .collapsed .collapsed-dropdown.open:hover .square { opacity: .5; }
    .workflow .collapsed .collapsed-dropdown.open + .dropdown { display: block; visibility: visible; background: #e5e5e5; width: 110%; position: absolute; left: -1rem; right: -1rem; padding: .3rem 1rem; top: 30px; z-index: 10000; margin: 0; border-bottom: 1px solid #d5d5d5; }
    .workflow .sticky .collapsed .collapsed-dropdown.open + .dropdown { left: 0; }
    .workflow .guide.grid, .workflow .half { display: block; width: 100% !important; float: none; }
    .workflow .half { margin: 0; }
    .workflow .half + .half { border-left: 0; border-top: 1px solid #e5e5e5; padding: 0; }
    .workflow section.related-links { padding: 1rem 0 2rem !important; }
    .workflow .related-links ~ .feedback-wrapper .feedback + a.toplink .top { top: .1rem; }
    .workflow .footer-main-links { margin: 2px; }
    .workflow .InCell, .workflow .OCell { margin: 0 0 1rem 20px; }
    .workflow .AnnotatedExpression, .workflow .AnnotatedInput, .workflow .AnnotatedOutput { margin-left: -3rem !important; }
}