#devtools > div > div > div { margin-top: 40px !important; top: 4px; } #tracktor { position: relative; display: inline-block; width: 100%; padding-bottom: 100px; } #tracktor section { float: left; width: 100%; } #tracktor.themeLight { color: #000; } #tracktor.themeLight .tracktorLoader:before, #tracktor.themeLight .tracktorLoader:after, #tracktor.themeLight .tracktorLoader { -webkit-animation: tracktorLoaderLight 1.8s infinite ease-in-out; animation: tracktorLoaderLight 1.8s infinite ease-in-out; } @-webkit-keyframes tracktorLoaderLight { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em rgba(0, 0, 0, 0.5); box-shadow: 0 2.5em 0 -1.3em rgba(0, 0, 0, 0.5); } 40% { -webkit-box-shadow: 0 2.5em 0 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2.5em 0 0 rgba(0, 0, 0, 0.5); } } @keyframes tracktorLoaderLight { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em rgba(0, 0, 0, 0.5); box-shadow: 0 2.5em 0 -1.3em rgba(0, 0, 0, 0.5); } 40% { -webkit-box-shadow: 0 2.5em 0 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2.5em 0 0 rgba(0, 0, 0, 0.5); } } #tracktor.themeLight #tracktorOrderDetails, #tracktor.themeLight .tracktorFulfillmentCol2 label { border-top: 1px solid rgba(0, 0, 0, 0.1); } #tracktor.themeLight #tracktorOrderStatus > div { background-color: rgba(0, 0, 0, 0.2); } #tracktor.themeLight #tracktorOrderStatus > div.tracktorOrderStatusNonShippable { margin: 0; } @media only screen and (max-width: 797px) { #tracktor.themeLight #tracktorOrderStatus > div dl { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } #tracktor.themeLight #tracktorOrderStatus > div dl dt:after { background-color: rgba(0, 0, 0, 0.5); } #tracktor.themeLight #tracktorOrderStatus dl.stepOrdered dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepOrdered:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='21.8' cy='51.7' r='4'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 5.7 10.6 5.7 20.8 47.7 48.8 47.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 19.8 43.7 52.3 43.7 59.8 19.7 14 19.7 '/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.stepReady dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepReady:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 1.8 13.7 1.8 45.7 31.8 59.7 '/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 59.8 13.7 59.8 45.7 31.8 59.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 13.7 31.8 1.7 59.8 13.7 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='18.5' y1='7' x2='46.3' y2='20'/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 23.8 31.7 9.8 25.7 9.8 38.7 23.8 44.7 '/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.stepShipped dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepShipped:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 43.4' enable-background='new 0 0 61.5 43.4' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='37' r='5'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='12.8' cy='37' r='5'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 53.8 38 59.8 38 59.8 23 53.8 18 47.8 8 35.8 8 35.8 2 1.8 2 1.8 38 7.8 38 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='43.8' y1='38' x2='17.8' y2='38'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 42.8 12 44.8 12 48.8 20 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='35.8' y1='7' x2='35.8' y2='32'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='59.8' y1='32' x2='1.8' y2='32'/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.stepInroute dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepInroute:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' points='41.8 31.7 49.8 31.7 59.8 41.7 59.8 51.7 53.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 28.8 51.7 41.8 51.7 41.8 25.7 29.8 25.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 32.7 13.8 51.7 20.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 11.7 13.8 17.7 17.8 17.7 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='1.8' y1='39.7' x2='9.8' y2='39.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='5.8' y1='43.7' x2='9.8' y2='43.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='7.8' y1='47.7' x2='9.8' y2='47.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='41.7' x2='59.8' y2='41.7'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='13.8' cy='16.7' r='11'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='51.7' x2='45.8' y2='51.7'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='49.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='24.8' cy='51.7' r='4'/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.stepComplete dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepComplete:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='19 -18.2 61.5 61.2' xml:space='preserve'%3E%3Crect x='20.8' y='1.5' fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' width='58' height='40'/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='78.8 1.5 20.8 1.5 33.8 -16.5 65.8 -16.5 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='50.8' y1='-16.5' x2='50.8' y2='1.5'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='59.7 15 45.6 29.2 39.9 23.5 '/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.customStep dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.custom:after { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23010101;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m17,8.5l-7.5,7-2.96-3.5'/%3E%3Ccircle fill='none' stroke='%23010101' cx='12' cy='12' r='11.5'/%3E%3C/svg%3E"); } #tracktor.themeLight #tracktorOrderStatus dl.stepException dt:before, #tracktor.themeLight .tracktorFulfullmentWrap #tracktorProgress > div.stepException:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.693' height='33.699' viewBox='0 0 33.693 33.699'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;stroke:%23010101;stroke-linejoin:round;stroke-width:2px;%7D.a%7Bstroke-linecap:round;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-622.653 -147.651)'%3E%3Cpath class='a' d='M176.19,6761.073a16.082,16.082,0,0,1-15.844,16.123,15.611,15.611,0,0,1-15.844-15.572,16.081,16.081,0,0,1,15.844-16.121A15.61,15.61,0,0,1,176.19,6761.073Z' transform='translate(479.153 -6596.849)'/%3E%3Cline class='a' y1='10.084' transform='translate(639.5 156.574)'/%3E%3Cpath class='b' d='M156.441,6761.72a.721.721,0,0,1-.72.721h0a.721.721,0,0,1-.72-.721h0a.72.72,0,0,1,.72-.72h0a.72.72,0,0,1,.72.72Z' transform='translate(483.779 -6590.021)'/%3E%3C/g%3E%3C/svg%3E"); } #tracktor.themeLight .tracktorFulfillmentCol1 ul li ul { border-top: 1px solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.1); } #tracktor.themeLight .tracktorFulfillmentCol1 ul li ul li { border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); } #tracktor.themeLight .tracktorFulfillmentCol2 .signedby { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 49.7 30.6 59.7 30.6 59.7 52.6 1.7 52.6 1.7 30.6 18.1 30.6 '%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 33.7 37.6 22.7 42.6 26.7 30.6 48.7 8.6 55.7 15.6 '%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='51.7' y1='19.6' x2='44.7' y2='12.6'%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='33.7' y1='37.6' x2='26.7' y2='30.6'%3E%3Csvg%3E"); } #tracktor.themeDark { color: #fff; } #tracktor.themeDark .tracktorLoader:before, #tracktor.themeDark .tracktorLoader:after, #tracktor.themeDark .tracktorLoader { -webkit-animation: tracktorLoaderDark 1.8s infinite ease-in-out; animation: tracktorLoaderDark 1.8s infinite ease-in-out; } @-webkit-keyframes tracktorLoaderDark { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em rgba(255, 255, 255, 0.5); box-shadow: 0 2.5em 0 -1.3em rgba(255, 255, 255, 0.5); } 40% { -webkit-box-shadow: 0 2.5em 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2.5em 0 0 rgba(255, 255, 255, 0.5); } } @keyframes tracktorLoaderDark { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em rgba(255, 255, 255, 0.5); box-shadow: 0 2.5em 0 -1.3em rgba(255, 255, 255, 0.5); } 40% { -webkit-box-shadow: 0 2.5em 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2.5em 0 0 rgba(255, 255, 255, 0.5); } } #tracktor.themeDark #tracktorOrderDetails, #tracktor.themeDark .tracktorFulfillmentCol2 label { border-top: 1px solid rgba(255, 255, 255, 0.2); } #tracktor.themeDark #tracktorOrderStatus > div { background-color: rgba(255, 255, 255, 0.2); } @media only screen and (max-width: 797px) { #tracktor.themeDark #tracktorOrderStatus > div dl { border-bottom: 1px solid rgba(255, 255, 255, 0.8); } } #tracktor.themeDark #tracktorOrderStatus > div dl dt:after { background-color: rgba(255, 255, 255, 0.8); } #tracktor.themeDark #tracktorOrderStatus dl.stepOrdered dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.stepOrdered:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='21.8' cy='51.7' r='4'/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 5.7 10.6 5.7 20.8 47.7 48.8 47.7 '/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 19.8 43.7 52.3 43.7 59.8 19.7 14 19.7 '/%3E%3C/svg%3E"); } #tracktor.themeDark #tracktorOrderStatus dl.stepReady dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.stepReady:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 1.8 13.7 1.8 45.7 31.8 59.7 '/%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 59.8 13.7 59.8 45.7 31.8 59.7 '/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 13.7 31.8 1.7 59.8 13.7 '/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='18.5' y1='7' x2='46.3' y2='20'/%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 23.8 31.7 9.8 25.7 9.8 38.7 23.8 44.7 '/%3E%3C/svg%3E"); } #tracktor.themeDark #tracktorOrderStatus dl.stepShipped dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.stepShipped:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 43.4' enable-background='new 0 0 61.5 43.4' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='37' r='5'/%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='12.8' cy='37' r='5'/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 53.8 38 59.8 38 59.8 23 53.8 18 47.8 8 35.8 8 35.8 2 1.8 2 1.8 38 7.8 38 '/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='43.8' y1='38' x2='17.8' y2='38'/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 42.8 12 44.8 12 48.8 20 '/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='35.8' y1='7' x2='35.8' y2='32'/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='59.8' y1='32' x2='1.8' y2='32'/%3E%3C/svg%3E"); } #tracktor.themeDark #tracktorOrderStatus dl.stepInroute dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.stepInroute:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' points='41.8 31.7 49.8 31.7 59.8 41.7 59.8 51.7 53.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 28.8 51.7 41.8 51.7 41.8 25.7 29.8 25.7 '/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 32.7 13.8 51.7 20.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 11.7 13.8 17.7 17.8 17.7 '/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='1.8' y1='39.7' x2='9.8' y2='39.7'/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='5.8' y1='43.7' x2='9.8' y2='43.7'/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='7.8' y1='47.7' x2='9.8' y2='47.7'/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='41.7' x2='59.8' y2='41.7'/%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='13.8' cy='16.7' r='11'/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='51.7' x2='45.8' y2='51.7'/%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='49.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='24.8' cy='51.7' r='4'/%3E%3C/svg%3E"); } #tracktor.themeDark #tracktorOrderStatus dl.stepComplete dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.stepComplete:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='19 -18.2 61.5 61.2' xml:space='preserve'%3E%3Crect x='20.8' y='1.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' width='58' height='40'/%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='78.8 1.5 20.8 1.5 33.8 -16.5 65.8 -16.5 '/%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='50.8' y1='-16.5' x2='50.8' y2='1.5'/%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='59.7 15 45.6 29.2 39.9 23.5 '/%3E%3C/svg%3E"); } #tracktor.themeDark #tracktorOrderStatus dl.customStep dt:before, #tracktor.themeDark .tracktorFulfullmentWrap #tracktorProgress > div.customStep:after { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23ffffff;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m17,8.5l-7.5,7-2.96-3.5'/%3E%3Ccircle fill='none' stroke='%23ffffff' cx='12' cy='12' r='11.5'/%3E%3C/svg%3E"); } #tracktor.themeDark .tracktorFulfillmentCol1 ul li ul { border-top: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.1); } #tracktor.themeDark .tracktorFulfillmentCol1 ul li ul li { border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } #tracktor.themeDark .tracktorFulfillmentCol2 .signedby { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 49.7 30.6 59.7 30.6 59.7 52.6 1.7 52.6 1.7 30.6 18.1 30.6 '%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 33.7 37.6 22.7 42.6 26.7 30.6 48.7 8.6 55.7 15.6 '%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='51.7' y1='19.6' x2='44.7' y2='12.6'%3E%3Cline fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='33.7' y1='37.6' x2='26.7' y2='30.6'%3E%3Csvg%3E"); } #tracktor.themeDark .tracktorLoader:before, #tracktor.themeDark .tracktorLoader:after, #tracktor.themeDark .tracktorLoader, #tracktor.themeLight .tracktorLoader:before, #tracktor.themeLight .tracktorLoader:after, #tracktor.themeLight .tracktorLoader { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #tracktor.themeDark .tracktorLoader, #tracktor.themeLight .tracktorLoader { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateZ(0) translateX(-50%); transform: translateZ(0) translateX(-50%); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } #tracktor.themeDark .tracktorLoader:before, #tracktor.themeLight .tracktorLoader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } #tracktor.themeDark .tracktorLoader:after, #tracktor.themeLight .tracktorLoader:after { left: 3.5em; } #tracktor.themeDark .tracktorLoader:before, #tracktor.themeDark .tracktorLoader:after, #tracktor.themeLight .tracktorLoader:before, #tracktor.themeLight .tracktorLoader:after { content: ""; position: absolute; top: 0; } #tracktor.themeDark .tracktorFulfullmentWrap, #tracktor.themeLight .tracktorFulfullmentWrap { min-height: 100px; } #tracktor.themeDark .tracktorFulfullmentWrap .tracktorLoader, #tracktor.themeLight .tracktorFulfullmentWrap .tracktorLoader { bottom: auto; top: 0; } #tracktor.themeDark .after-map label, #tracktor.themeDark .fulfillmentContents label, #tracktor.themeLight .after-map label, #tracktor.themeLight .fulfillmentContents label { border-top: 0; opacity: 0.5; padding: 0; } #tracktor .notifications-form { clear: both; margin-bottom: 15px; position: relative; } #tracktor .notifications-form label { border-top: 0 !important; padding: 0; } #tracktor .notifications-form.loading { opacity: 0.5; } #tracktor .notifications-form.loading:before { background: transparent; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } #tracktor .alert { clear: both; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 14px; color: #31373d; margin: 0 0 15px 0; text-align: left; border-radius: 0 0 3px 3px; background-color: #f4f6f8; } #tracktor .alert.error { background-color: #fbeae5; } #tracktor .alert.info { background-color: #e3f1df; } #tracktor .alert.success { background-color: #e0f5f5; } #tracktor .alert dl { margin: 0; width: 100%; } #tracktor .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #tracktor .input-group, #tracktor .input-group * { -webkit-box-sizing: border-box; box-sizing: border-box; } #tracktor .input-group select, #tracktor .input-group input, #tracktor .input-group .append, #tracktor .input-group .button, #tracktor .input-group button { z-index: 10; border-left-width: 0; height: 36px; min-height: 36px; } #tracktor .input-group input { width: 100%; } #tracktor .input-group select:first-child, #tracktor .input-group input:first-child, #tracktor .input-group .append:first-child, #tracktor .input-group .button:first-child, #tracktor .input-group button:first-child { border-left-width: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } #tracktor .input-group select:last-child, #tracktor .input-group input:last-child, #tracktor .input-group .append:last-child, #tracktor .input-group .button:last-child, #tracktor .input-group button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } #tracktor .input-group select:not(:first-child):not(:last-child), #tracktor .input-group input:not(:first-child):not(:last-child), #tracktor .input-group .append:not(:first-child):not(:last-child), #tracktor .input-group .button:not(:first-child):not(:last-child), #tracktor .input-group button:not(:first-child):not(:last-child) { border-radius: 0; } #tracktor .input-group .append { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: 2.4rem; padding: 0.5rem 1rem; border: 0.1rem solid #c4cdd5; border-radius: 0.3rem; z-index: 10; -webkit-box-shadow: 0 0 0 1px transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05); box-shadow: 0 0 0 1px transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05); } #tracktor .input-group button:active, #tracktor .input-group .button:active, #tracktor .input-group select:active, #tracktor .input-group input:active { z-index: 20; } #tracktor .input-group select + .append, #tracktor .input-group input + .append { border-left-width: 0; } #tracktor .input-group .button, #tracktor .input-group button { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 7px 16px; } #tracktor .map-info-content { color: #000; padding: 10px 40px 10px 10px; position: relative; } #tracktor .map-info-content strong { margin-bottom: 0.25em; display: block; } #tracktor .map-info-content .map-status-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='21.8' cy='51.7' r='4'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 5.7 10.6 5.7 20.8 47.7 48.8 47.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 19.8 43.7 52.3 43.7 59.8 19.7 14 19.7 '/%3E%3C/svg%3E"); position: absolute; height: 20px; margin-top: -10px; right: 0px; top: 50%; width: 20px; background-repeat: no-repeat; background-position: center; } #tracktor .map-info-content .map-status-icon-delivered { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='19 -18.2 61.5 61.2' xml:space='preserve'%3E%3Crect x='20.8' y='1.5' fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' width='58' height='40'/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='78.8 1.5 20.8 1.5 33.8 -16.5 65.8 -16.5 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='50.8' y1='-16.5' x2='50.8' y2='1.5'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='59.7 15 45.6 29.2 39.9 23.5 '/%3E%3C/svg%3E"); } #tracktor .map-info-content .map-status-icon-out_for_delivery { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' points='41.8 31.7 49.8 31.7 59.8 41.7 59.8 51.7 53.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 28.8 51.7 41.8 51.7 41.8 25.7 29.8 25.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 32.7 13.8 51.7 20.8 51.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 13.8 11.7 13.8 17.7 17.8 17.7 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='1.8' y1='39.7' x2='9.8' y2='39.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='5.8' y1='43.7' x2='9.8' y2='43.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='7.8' y1='47.7' x2='9.8' y2='47.7'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='41.7' x2='59.8' y2='41.7'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='13.8' cy='16.7' r='11'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='41.8' y1='51.7' x2='45.8' y2='51.7'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='49.8' cy='51.7' r='4'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' cx='24.8' cy='51.7' r='4'/%3E%3C/svg%3E"); } #tracktor .map-info-content .map-status-icon-in_transit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 43.4' enable-background='new 0 0 61.5 43.4' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='48.8' cy='37' r='5'/%3E%3Ccircle fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='12.8' cy='37' r='5'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 53.8 38 59.8 38 59.8 23 53.8 18 47.8 8 35.8 8 35.8 2 1.8 2 1.8 38 7.8 38 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='43.8' y1='38' x2='17.8' y2='38'/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 42.8 12 44.8 12 48.8 20 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='35.8' y1='7' x2='35.8' y2='32'/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='59.8' y1='32' x2='1.8' y2='32'/%3E%3C/svg%3E"); } #tracktor .map-info-content .map-status-icon-pre_transit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 61.5 61.2' enable-background='new 0 0 61.5 61.2' xml:space='preserve'%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 1.8 13.7 1.8 45.7 31.8 59.7 '/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 31.8 26.7 59.8 13.7 59.8 45.7 31.8 59.7 '/%3E%3Cpolyline fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 1.8 13.7 31.8 1.7 59.8 13.7 '/%3E%3Cline fill='none' stroke='%23010101' stroke-width='2' stroke-linejoin='round' stroke-miterlimit='10' x1='18.5' y1='7' x2='46.3' y2='20'/%3E%3Cpolygon fill='none' stroke='%23010101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 23.8 31.7 9.8 25.7 9.8 38.7 23.8 44.7 '/%3E%3C/svg%3E"); } #tracktor .map-info-content .map-status-icon-custom { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23010101;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m17,8.5l-7.5,7-2.96-3.5'/%3E%3Ccircle fill='none' stroke='%23010101' cx='12' cy='12' r='11.5'/%3E%3C/svg%3E"); } #tracktorContainer { margin: 0 auto; width: 100%; } #tracktorOrderError { text-align: center; } #tracktorOrderForm { float: left; width: 100%; padding: 30px 0; } #tracktorOrderForm div.field { float: left; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 0; display: block; } #tracktorOrderForm div.field:first-child { margin-top: 10px; } #tracktorOrderForm label { width: 100%; display: inline-block; } #tracktorOrderForm input { display: inline-block; min-width: 250px; max-width: 450px; } @media only screen and (max-width: 767px) { #tracktorOrderForm input { width: 100%; } } #tracktorOrderForm button { display: inline-block; margin-top: 10px; } #tracktorOrderDetails { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 20px; text-align: center; margin-top: 40px; } #tracktorOrderDetails div { float: right; padding-top: 20px; } @media only screen and (max-width: 767px) { #tracktorOrderDetails div { float: left; width: 100%; padding-bottom: 20px; } } #tracktorOrderDetails div label { display: block; width: 100%; margin-bottom: 10px; } #tracktorOrderDetails div input { clear: left; display: inline-block; } #tracktorOrderDetails div button { display: inline-block; } #tracktorOrderDetails > a { margin-bottom: 20px; display: block; } #tracktorOrderDetails .recommendations { float: none; padding: 0; } #tracktorOrderDetails .recommendations div { float: none; padding: 0; } #tracktorOrderDetails .recommendations .recommendation-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link { -ms-flex-preferred-size: 25%; flex-basis: 25%; color: inherit; text-decoration: none; padding: 20px; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link p { margin: 0; text-align: left; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link .recommendation-price span { text-decoration: line-through; margin-right: 6px; opacity: 0.7; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link .recommendation-price span:last-child { text-decoration: none; margin-right: 0; opacity: 1; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link .recommendation-price .compare-at { text-decoration: line-through !important; } @media only screen and (min-width: 798px) { #tracktorOrderDetails .recommendations .recommendation-wrapper-link { padding: 25px; } } #tracktorOrderDetails .recommendations .recommendation-wrapper-link:first-child { padding-left: 0; } #tracktorOrderDetails .recommendations .recommendation-wrapper-link:last-child { padding-right: 0; } #tracktorOrderDetails .recommendations .recommendation-image-wrapper { height: 200px; width: 200px; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; margin-bottom: 12px; display: block; } #tracktorResponseContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 75px; } #tracktorResponseContainer.has-container-content { min-height: 900px; } .tracktorLoader > span { position: absolute; bottom: -75px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } #tracktorOrderStatus { margin: 0 0 100px 0; } #tracktorOrderStatus.tracktorOrderStatusNonShippable { margin: 0; } @media only screen and (max-width: 797px) { #tracktorOrderStatus { margin-bottom: 40px; } } #tracktorOrderStatus .fulfillmentContents { width: 100%; margin-bottom: 35px; } #tracktorOrderStatus h2 { display: inline-block; float: right; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; } #tracktorOrderStatus h2.tracktorEstimatedDeliveryDate, #tracktorOrderStatus h2.tracktorActualDeliveredDate { float: left; text-align: left; } #tracktorOrderStatus > div { float: left; position: relative; display: block; width: 100%; height: 10px; border-radius: 10px; margin-top: 75px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div { margin-top: 0; height: auto; background-color: rgba(0, 0, 0, 0) !important; } } #tracktorOrderStatus > div > span { position: absolute; top: 0; left: 0; border-radius: 10px; height: 10px; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; background-color: #27ae60; } #tracktorOrderStatus > div > span.tracktorProgressBarOrdered { -webkit-animation: orderedState 0.25s 1 forwards ease-out; animation: orderedState 0.25s 1 forwards ease-out; width: 5%; } #tracktorOrderStatus > div > span.tracktorProgressBarDelivered { -webkit-animation: deliveredState 1.25s 1 forwards ease-out; animation: deliveredState 1.25s 1 forwards ease-out; width: 100%; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div > span { display: none; } } #tracktorOrderStatus > div dl { position: absolute; top: 20px; margin: 0; font-size: 80%; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div dl { position: relative; float: left; width: 100%; padding-bottom: 10px; padding-top: 10px; } #tracktorOrderStatus > div dl.stepOrdered { padding-top: 0; } } #tracktorOrderStatus > div dl dt { position: relative; font-weight: bold; } #tracktorOrderStatus > div dl dt:after { content: ""; position: absolute; z-index: 9999; top: -20px; left: 0; width: 10px; height: 10px; border-radius: 5px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div dl dt:after { display: none; } } #tracktorOrderStatus > div dl dt:before { content: ""; position: absolute; z-index: 9999; top: -70px; left: 0; width: 40px; height: 40px; background-position: center center; background-repeat: no-repeat; background-size: contain; } #tracktorOrderStatus > div dl .mobile-label-progress { display: none; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div dl:not(.mobile-label-active) { display: none; } #tracktorOrderStatus > div dl.mobile-label-active.stepOrdered:before { display: none; } #tracktorOrderStatus > div dl.mobile-label-active:before { content: ""; display: block; height: 40px; height: calc(100% - 33px); width: 3px; left: 16px; top: -30px; background-color: #27ae60; position: absolute; z-index: 0; } #tracktorOrderStatus > div dl dd, #tracktorOrderStatus > div dl dt { padding-left: 44px; } #tracktorOrderStatus > div dl dt { line-height: 34px; } #tracktorOrderStatus > div dl dt:before { width: 20px; height: 20px; top: 7px; left: 7px !important; right: auto; } #tracktorOrderStatus > div dl .mobile-label-progress { display: block; height: 34px; width: 34px; left: 0; top: 0; border-color: #27ae60; border-style: solid; border-width: 3px; border-radius: 100%; position: absolute; z-index: 1; } } #tracktorOrderStatus > div dl dd { margin: 0; } #tracktorOrderStatus > div dl.stepOrdered { left: 0; } #tracktorOrderStatus > div dl.stepComplete { right: 0; text-align: right; } @media only screen and (max-width: 797px) { #tracktorOrderStatus > div dl.stepComplete { text-align: left; } } #tracktorOrderStatus > div dl.stepComplete dt:after, #tracktorOrderStatus > div dl.stepComplete dt:before { left: auto; right: 0; } @-webkit-keyframes orderedState { from { width: 0%; } to { width: 5%; } } @keyframes orderedState { from { width: 0%; } to { width: 5%; } } @-webkit-keyframes deliveredState { from { width: 0%; } to { width: 100%; } } @keyframes deliveredState { from { width: 0%; } to { width: 100%; } } @-webkit-keyframes readyState0 { from { width: 0%; } to { width: 25%; } } @keyframes readyState0 { from { width: 0%; } to { width: 25%; } } @-webkit-keyframes shippedState0 { from { width: 0%; } to { width: 50%; } } @keyframes shippedState0 { from { width: 0%; } to { width: 50%; } } @-webkit-keyframes outForDeliveryState0 { from { width: 0%; } to { width: 75%; } } @keyframes outForDeliveryState0 { from { width: 0%; } to { width: 75%; } } #tracktorOrderStatus .custom-steps-0 > span.tracktorProgressBarOrderReady { -webkit-animation: readyState0 0.5s 1 forwards ease-out; animation: readyStatei 0.5s 1 forwards ease-out; width: 25%; } #tracktorOrderStatus .custom-steps-0 > span.tracktorProgressBarShipped { -webkit-animation: shippedState0 0.75s 1 forwards ease-out; animation: shippedState0 0.75s 1 forwards ease-out; width: 50%; } #tracktorOrderStatus .custom-steps-0 > span.tracktorProgressBarOutForDelivery { -webkit-animation: outForDeliveryState0 1s 1 forwards ease-out; animation: outForDeliveryState0 1s 1 forwards ease-out; width: 75%; } #tracktorOrderStatus .custom-steps-0 dl.stepReady { left: 25%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-0 dl.stepReady { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-0 dl.stepShipped { left: 50%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-0 dl.stepShipped { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-0 dl.stepInroute { left: 75%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-0 dl.stepInroute { left: auto; margin-left: 0; } } @-webkit-keyframes readyState1 { from { width: 0%; } to { width: 40%; } } @keyframes readyState1 { from { width: 0%; } to { width: 40%; } } @-webkit-keyframes shippedState1 { from { width: 0%; } to { width: 60%; } } @keyframes shippedState1 { from { width: 0%; } to { width: 60%; } } @-webkit-keyframes outForDeliveryState1 { from { width: 0%; } to { width: 80%; } } @keyframes outForDeliveryState1 { from { width: 0%; } to { width: 80%; } } @-webkit-keyframes customState11 { from { width: 0%; } to { width: 20%; } } @keyframes customState11 { from { width: 0%; } to { width: 20%; } } #tracktorOrderStatus .custom-steps-1 > span.tracktorProgressBarOrderReady { -webkit-animation: readyState1 0.5s 1 forwards ease-out; animation: readyStatei 0.5s 1 forwards ease-out; width: 40%; } #tracktorOrderStatus .custom-steps-1 > span.tracktorProgressBarShipped { -webkit-animation: shippedState1 0.75s 1 forwards ease-out; animation: shippedState1 0.75s 1 forwards ease-out; width: 60%; } #tracktorOrderStatus .custom-steps-1 > span.tracktorProgressBarOutForDelivery { -webkit-animation: outForDeliveryState1 1s 1 forwards ease-out; animation: outForDeliveryState1 1s 1 forwards ease-out; width: 80%; } #tracktorOrderStatus .custom-steps-1 > span.tracktorProgressBarCustom-1 { -webkit-animation: customState11 1s 1 forwards ease-out; animation: customState11 1s 1 forwards ease-out; width: 20%; } #tracktorOrderStatus .custom-steps-1 dl.customStep-1 { left: 20%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-1 dl.customStep-1 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-1 dl.stepReady { left: 40%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-1 dl.stepReady { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-1 dl.stepShipped { left: 60%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-1 dl.stepShipped { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-1 dl.stepInroute { left: 80%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-1 dl.stepInroute { left: auto; margin-left: 0; } } @-webkit-keyframes readyState2 { from { width: 0%; } to { width: 50%; } } @keyframes readyState2 { from { width: 0%; } to { width: 50%; } } @-webkit-keyframes shippedState2 { from { width: 0%; } to { width: 66.66667%; } } @keyframes shippedState2 { from { width: 0%; } to { width: 66.66667%; } } @-webkit-keyframes outForDeliveryState2 { from { width: 0%; } to { width: 83.33333%; } } @keyframes outForDeliveryState2 { from { width: 0%; } to { width: 83.33333%; } } @-webkit-keyframes customState21 { from { width: 0%; } to { width: 16.66667%; } } @keyframes customState21 { from { width: 0%; } to { width: 16.66667%; } } @-webkit-keyframes customState22 { from { width: 0%; } to { width: 33.33333%; } } @keyframes customState22 { from { width: 0%; } to { width: 33.33333%; } } #tracktorOrderStatus .custom-steps-2 > span.tracktorProgressBarOrderReady { -webkit-animation: readyState2 0.5s 1 forwards ease-out; animation: readyStatei 0.5s 1 forwards ease-out; width: 50%; } #tracktorOrderStatus .custom-steps-2 > span.tracktorProgressBarShipped { -webkit-animation: shippedState2 0.75s 1 forwards ease-out; animation: shippedState2 0.75s 1 forwards ease-out; width: 66.66667%; } #tracktorOrderStatus .custom-steps-2 > span.tracktorProgressBarOutForDelivery { -webkit-animation: outForDeliveryState2 1s 1 forwards ease-out; animation: outForDeliveryState2 1s 1 forwards ease-out; width: 83.33333%; } #tracktorOrderStatus .custom-steps-2 > span.tracktorProgressBarCustom-1 { -webkit-animation: customState21 1s 1 forwards ease-out; animation: customState21 1s 1 forwards ease-out; width: 16.66667%; } #tracktorOrderStatus .custom-steps-2 > span.tracktorProgressBarCustom-2 { -webkit-animation: customState22 1s 1 forwards ease-out; animation: customState22 1s 1 forwards ease-out; width: 33.33333%; } #tracktorOrderStatus .custom-steps-2 dl.customStep-1 { left: 16.66667%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-2 dl.customStep-1 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-2 dl.customStep-2 { left: 33.33333%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-2 dl.customStep-2 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-2 dl.stepReady { left: 50%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-2 dl.stepReady { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-2 dl.stepShipped { left: 66.66667%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-2 dl.stepShipped { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-2 dl.stepInroute { left: 83.33333%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-2 dl.stepInroute { left: auto; margin-left: 0; } } @-webkit-keyframes readyState3 { from { width: 0%; } to { width: 57.14286%; } } @keyframes readyState3 { from { width: 0%; } to { width: 57.14286%; } } @-webkit-keyframes shippedState3 { from { width: 0%; } to { width: 71.42857%; } } @keyframes shippedState3 { from { width: 0%; } to { width: 71.42857%; } } @-webkit-keyframes outForDeliveryState3 { from { width: 0%; } to { width: 85.71429%; } } @keyframes outForDeliveryState3 { from { width: 0%; } to { width: 85.71429%; } } @-webkit-keyframes customState31 { from { width: 0%; } to { width: 14.28571%; } } @keyframes customState31 { from { width: 0%; } to { width: 14.28571%; } } @-webkit-keyframes customState32 { from { width: 0%; } to { width: 28.57143%; } } @keyframes customState32 { from { width: 0%; } to { width: 28.57143%; } } @-webkit-keyframes customState33 { from { width: 0%; } to { width: 42.85714%; } } @keyframes customState33 { from { width: 0%; } to { width: 42.85714%; } } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarOrderReady { -webkit-animation: readyState3 0.5s 1 forwards ease-out; animation: readyStatei 0.5s 1 forwards ease-out; width: 57.14286%; } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarShipped { -webkit-animation: shippedState3 0.75s 1 forwards ease-out; animation: shippedState3 0.75s 1 forwards ease-out; width: 71.42857%; } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarOutForDelivery { -webkit-animation: outForDeliveryState3 1s 1 forwards ease-out; animation: outForDeliveryState3 1s 1 forwards ease-out; width: 85.71429%; } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarCustom-1 { -webkit-animation: customState31 1s 1 forwards ease-out; animation: customState31 1s 1 forwards ease-out; width: 14.28571%; } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarCustom-2 { -webkit-animation: customState32 1s 1 forwards ease-out; animation: customState32 1s 1 forwards ease-out; width: 28.57143%; } #tracktorOrderStatus .custom-steps-3 > span.tracktorProgressBarCustom-3 { -webkit-animation: customState33 1s 1 forwards ease-out; animation: customState33 1s 1 forwards ease-out; width: 42.85714%; } #tracktorOrderStatus .custom-steps-3 dl.customStep-1 { left: 14.28571%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.customStep-1 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-3 dl.customStep-2 { left: 28.57143%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.customStep-2 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-3 dl.customStep-3 { left: 42.85714%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.customStep-3 { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-3 dl.stepReady { left: 57.14286%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.stepReady { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-3 dl.stepShipped { left: 71.42857%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.stepShipped { left: auto; margin-left: 0; } } #tracktorOrderStatus .custom-steps-3 dl.stepInroute { left: 85.71429%; margin-left: -10px; } @media only screen and (max-width: 797px) { #tracktorOrderStatus .custom-steps-3 dl.stepInroute { left: auto; margin-left: 0; } } .carrierDetails { margin-bottom: 30px; } .carrierDetails img { float: left; margin-right: 10px; width: 50px; } .trackingNumber { float: left; width: 100%; margin-bottom: 30px; } .fulfillmentContents { float: left; width: 100%; margin-bottom: 30px; } .tracktorFulfullmentWrap { position: relative; } .tracktorFulfullmentWrap .tracktorMapTitle { float: left; width: 100%; } .tracktorFulfullmentWrap .tracktorMapFragment { float: left; width: 100%; height: 300px; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0.5); } .tracktorFulfullmentWrap .signedby { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 40px; background-position: left; background-repeat: no-repeat; background-size: 30px; } .tracktorFulfullmentWrap #tracktorProgress { display: inline-block; width: 100%; } .tracktorFulfullmentWrap #tracktorProgress > div { position: relative; display: inline-block; width: 100%; float: left; } .tracktorFulfullmentWrap #tracktorProgress > div:after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: 26px 26px; } .tracktorFulfullmentWrap #tracktorProgress > div ul { display: inline-block; width: 100%; } .tracktorFulfullmentWrap #tracktorProgress > div ul li { display: inline-block; width: 100%; font-weight: bold; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li { float: left; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 0; font-weight: normal; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl { margin: 0; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl dt { float: left; width: 25%; margin: 0; padding: 0; opacity: 0.5; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl dd { float: left; width: 75%; margin: 0; padding: 0; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl dd div { float: left; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl dd .tracktor-detail-message { -webkit-box-sizing: border-box; box-sizing: border-box; width: 65%; } .tracktorFulfullmentWrap #tracktorProgress > div ul li ul li dl dd .tracktor-detail-location { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; width: 35%; } .tracktorFulfullmentWrap.format-vertical { display: inline-block; width: 100%; margin-top: 30px; } .tracktorFulfullmentWrap.format-vertical .progress-label-bar { float: left; padding-bottom: 10px; margin-top: 10px; position: relative; display: inline-block; width: 100%; } .tracktorFulfullmentWrap.format-vertical .progress-label-bar .progress-date { float: left; opacity: 0.5; } .tracktorFulfullmentWrap.format-vertical .progress-label-bar .progress-title { float: right; font-weight: bold; padding-right: 40px; } .tracktorFulfullmentWrap.format-vertical .progress-label-bar .progress-bar { position: absolute; bottom: 0; width: 100%; height: 5px; border-radius: 5px; } .packageItems { margin-bottom: 0; } @media only screen and (max-width: 797px) { .packageItems { margin-bottom: 25px; } } .packageItems li { list-style: disc; margin: 0 0 0 20px; line-height: 20px; } .tracktorFulfillmentCol1 { float: left; clear: left; width: 50%; margin-bottom: 5%; } .tracktorFulfillmentCol1 label { opacity: 0.5; } .tracktorFulfillmentCol1 .qty { display: block; float: left; width: 2.5em; } @media only screen and (max-width: 767px) { .tracktorFulfillmentCol1 { width: 100%; } } .tracktorFulfillmentCol1 h1 { float: left; width: 100%; } .tracktorFulfillmentCol1 ul { float: left; width: 100%; margin: 0; padding: 0; list-style: none !important; } .tracktorFulfillmentCol1 ul li { float: left; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; margin: 0; list-style: none !important; } .tracktorFulfillmentCol1 ul li ul { float: left; margin-top: 5px; border-radius: 3px; } .tracktorFulfillmentCol1 ul li ul li { padding: 10px; } .tracktorFulfillmentCol1 ul li ul li:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .tracktorFulfillmentCol1 ul li ul li:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .by-day-details dl { margin: 0; } .by-day-details dl dt { float: left; width: 25%; height: 100%; } .by-day-details dl dd { float: left; width: 75%; height: 100%; margin: 0; } .by-day-details dl dd span { display: block; width: 100%; opacity: 0.65; } .tracktorFulfillmentCol2 { float: left; width: 45%; margin-left: 5%; margin-bottom: 5%; } @media only screen and (max-width: 767px) { .tracktorFulfillmentCol2 { width: 100%; margin-left: 0; margin-bottom: 50px; } } .tracktorFulfillmentCol2 label { clear: left; display: block; width: 100%; padding: 5px 0; } .tracktor-marker { background-image: url(http://www.theshoppad.com/apps/tracktor/assets/client/images/map-marker.svg?eaeb2e6c1b8958ef16e1633f04a1d09d); background-size: 42px 42px; background-position: center; background-repeat: no-repeat; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .mapboxgl-canvas { top: 0; left: 0; } /* Dawn Shopify theme, from https://supportr.helpscoutdocs.com/article/1299-internal-tracktor-dawn-theme-css As of June 14 this is automatically added for all new installs as well */ .additional-styles #tracktorOrderForm, .shopify-theme-dawn #tracktorOrderForm { text-align: center; } .additional-styles #tracktorOrderForm input, .shopify-theme-dawn #tracktorOrderForm input { width: 100%; max-width: 300px; padding: 10px; } .additional-styles #tracktorOrderForm .field, .shopify-theme-dawn #tracktorOrderForm .field { display: block; } .additional-styles #tracktorOrderForm div.field::after, .shopify-theme-dawn #tracktorOrderForm div.field::after { display: none; } .additional-styles #tracktorTrack, .shopify-theme-dawn #tracktorTrack { font-family: Assistant, sans-serif; background-color: #000; color: #fff; padding: 10px 20px; border: 0; } .additional-styles #tracktor, .shopify-theme-dawn #tracktor { padding-bottom: 0 !important; } @media only screen and (max-width: 1250px) { .additional-styles #tracktorOrderForm, .additional-styles #tracktorResponseContainer, .shopify-theme-dawn #tracktorOrderForm, .shopify-theme-dawn #tracktorResponseContainer { padding-right: 20px; padding-left: 20px; } } .additional-styles .field.recaptcha > div, .shopify-theme-dawn .field.recaptcha > div { margin: 0 auto; } /* CSS added for all new installs after June 14: https://app.asana.com/0/393037162945950/1203589752972850/f */ .additional-styles #tracktorResponseContainer .stepOrdered dt:before, .additional-styles #tracktorResponseContainer .stepOrdered dt:after, .additional-styles #tracktorResponseContainer .customStep dt:before, .additional-styles #tracktorResponseContainer .customStep dt:after, .additional-styles #tracktorResponseContainer .stepReady dt:before, .additional-styles #tracktorResponseContainer .stepReady dt:after, .additional-styles #tracktorResponseContainer .stepShipped dt:before, .additional-styles #tracktorResponseContainer .stepShipped dt:after, .additional-styles #tracktorResponseContainer .stepInroute dt:before, .additional-styles #tracktorResponseContainer .stepInroute dt:after, .additional-styles #tracktorResponseContainer .stepComplete dt:before, .additional-styles #tracktorResponseContainer .stepComplete dt:after { z-index: 0 !important; }