html,body{height:100%;width:100%;margin:0;padding:0}body{font-family:"Roboto",sans-serif;transition:opacity ease-in 0.2s}*{box-sizing:border-box}[hidden]{display:none !important}google-codelab{display:flex;width:100%;height:100%}google-codelab #main{display:flex;flex-direction:column;flex-grow:1;position:relative;background:#F8F9FA}google-codelab #codelab-title{background:#FFFFFF;box-shadow:0px 1px 2px 0px rgba(60,64,67,0.3),0px 2px 6px 2px rgba(60,64,67,0.15);color:#3C4043;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;-webkit-font-smoothing:antialiased;z-index:99}google-codelab #codelab-title h1{font-size:20px;font-weight:400;margin:0 8px;font-family:'Roboto', 'Noto', sans-serif;flex-grow:1;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:0}google-codelab #codelab-title #time-remaining{flex-shrink:0;flex-grow:0;display:flex;align-items:center;font-size:16px;font-weight:400}google-codelab #codelab-title #time-remaining i{margin-right:3px}google-codelab #codelab-nav-buttons{display:flex;align-items:center;flex-grow:0;flex-shrink:0}google-codelab #codelab-nav-buttons #arrow-back,google-codelab #codelab-nav-buttons #menu{display:flex;text-decoration:none;color:#3C4043;width:40px;height:40px;justify-content:center;align-items:center}google-codelab #controls{position:absolute;bottom:32px;left:0;right:0;display:flex;justify-content:center;z-index:10;padding:0 32px}google-codelab #fabs{display:flex;flex-grow:1;max-width:1025px}google-codelab #fabs .spacer{flex-grow:1}#previous-step,#next-step,#done{border-radius:4px;font-family:'Google Sans', Arial, sans-serif;font-size:14px;font-weight:600;letter-spacing:.6px;line-height:24px;padding-bottom:6px;padding-left:24px;padding-right:24px;padding-top:6px;pointer-events:initial;text-transform:none;background:#FFFFFF;color:#1A73E8;transform:scale(1, 1);transition:transform 300ms ease-in-out;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);text-decoration:none;-webkit-font-smoothing:antialiased}#next-step{color:#fff;background:#1A73E8}#done{background:#1E8E3E;color:#fff}google-codelab #fabs a[disappear]{transform:scale(0, 0)}#done{background:#0f9d58}google-codelab #drawer{background:#fff;width:256px;flex-shrink:0;position:relative;border-right:1px solid #DADCE0;z-index:100;display:flex;flex-direction:column}google-codelab #drawer .steps{flex-shrink:1;flex-grow:1;overflow-x:visible;display:flex}google-codelab #drawer ol{margin:0;padding:16px 12px;counter-reset:li-count;list-style:none;overflow-x:visible;overflow-y:auto;flex-grow:1}google-codelab #drawer ol li{display:block;counter-increment:li-count}google-codelab #drawer ol li a{text-decoration:none;display:flex;align-items:center;font-size:14px;color:#80868B;border-radius:4px;padding:6px 16px;min-height:48px;font-weight:400;line-height:20px;box-sizing:content-box;position:relative;font-family:'Roboto', 'Noto', sans-serif;-webkit-font-smoothing:antialiased;transition:all 300ms ease-in-out}google-codelab #drawer ol li a:active,google-codelab #drawer ol li a:focus{background:#c6c6c6;-webkit-tap-highlight-color:transparent;outline:0}google-codelab #drawer ol li a .step{display:flex;align-items:center}google-codelab #drawer ol li .step:before{content:counter(li-count);display:inline-block;font-style:normal;width:26px;min-width:26px;color:#fff;background:#80868B;border-radius:50%;text-align:center;height:26px;vertical-align:middle;line-height:26px;margin-right:8px;font-weight:400;position:relative;z-index:2;transition:all 300ms ease-in-out}google-codelab #drawer ol li a:before,google-codelab #drawer ol li a:after{content:'';display:block;background-color:#80868B;width:2px;height:50%;z-index:1;position:absolute;margin-left:12px}google-codelab #drawer ol li a:before{top:0}google-codelab #drawer ol li a:after{bottom:0}google-codelab #drawer ol li:first-child a:before,google-codelab #drawer ol li:last-child a:after{display:none}google-codelab #drawer ol li[selected] a,google-codelab #drawer ol li a:focus{color:#212121;font-weight:600}google-codelab #drawer ol li[selected] a{background-color:#e0e0e0}google-codelab #drawer ol li[selected] .step:before{font-weight:600}google-codelab #drawer ol li[completed] a{color:#212121}google-codelab #drawer ol li[completed] a:before,google-codelab #drawer ol li[completed] a:after,google-codelab #drawer ol li[completed] .step:before{background-color:#1A73E8;color:#fff}google-codelab #drawer ol li[selected] a:after{background-color:#80868B}google-codelab #drawer .metadata{color:#777;font-size:0.7em;padding:16px;flex-shrink:0}google-codelab #drawer .metadata a{color:currentcolor;margin-left:4px}google-codelab #codelab-nav-buttons #menu{display:none}google-codelab #drawer ol ::-webkit-scrollbar{-webkit-appearance:none;width:7px}google-codelab #drawer ol ::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,0.5);box-shadow:0 0 1px rgba(255,255,255,0.5);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5)}@media (max-width: 768px){google-codelab{display:block;position:relative}google-codelab #main{height:100%}google-codelab #codelab-nav-buttons #arrow-back{display:none}google-codelab #codelab-nav-buttons #menu{display:flex}google-codelab #drawer{width:256px;position:absolute;left:0;top:0;bottom:0;z-index:1000;will-change:transform;box-shadow:2px 2px 4px transparent;pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform ease-in-out 0.3s,box-shadow 0.3s}google-codelab[drawer--open] #drawer{box-shadow:2px 2px 4px rgba(0,0,0,0.15);transform:translate3d(0, 0, 0);pointer-events:all}google-codelab #main::before{content:'';top:0;left:0;right:0;bottom:0;position:absolute;transition:opacity ease-in-out 0.38s;background-color:rgba(0,0,0,0.3);z-index:10;pointer-events:none;opacity:0}google-codelab[drawer--open] #main::before{opacity:1;pointer-events:all}}google-codelab #steps{overflow:hidden;flex-direction:column;position:relative;flex-grow:1}google-codelab google-codelab-step{display:none;width:100%;transform:translate3d(0, 0, 0);position:absolute;top:0;left:0;right:0;bottom:0;padding-top:32px;overflow-y:auto;overflow-x:hidden}google-codelab google-codelab-step[animating],google-codelab google-codelab-step[selected]{display:block;transform-origin:0 50% 0;animation-fill-mode:both}google-codelab google-codelab-step[animating]{pointer-events:none;position:absolute;overflow:hidden}

/*# sourceMappingURL=google_codelab_scss_bin.css.map */