pt-tracker.css

@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";body{font-family:"Poppins",sans-serif;line-height:1.2em;font-size:16px}:root{--pt-color-black: #10162b;--pt-color-black-dark: #060b1d;--pt-color-black-light: #2e2e57;--pt-color-white: #ffffff;--pt-color-blue: #76d0f4;--pt-color-blue-light: #e5f5fd;--pt-color-blue-lighter: #f3fbff;--pt-color-blue-lightest: #f8fdff;--pt-color-blue-dark: #428bca;--pt-color-blue-darker: #2e689a;--pt-color-blue-darkest: #1c3f5e;--pt-color-red: #ee4751;--pt-color-red-light: #faadb2;--pt-color-red-lighter: #ffd8da;--pt-color-red-lightest: #ffeced;--pt-color-red-dark: #a82d35;--pt-color-red-darker: #8a2228;--pt-color-red-darkest: #5c1e22;--pt-color-silver: #d9d9d9;--pt-color-silver-light: #f2f2f2;--pt-color-silver-lighter: #fafafa;--pt-color-silver-lightest: #fdfdfd;--pt-color-silver-dark: #b6b6b6;--pt-color-silver-darker: #939393;--pt-color-silver-darkest: #777777;--pt-color-status-negative: #f16161;--pt-color-status-negative-light: #f88585;--pt-color-status-negative-lighter: #f9a4a4;--pt-color-status-negative-lightest: #fff2f2;--pt-color-status-negative-dark: #df4a4a;--pt-color-status-negative-darker: #cf4242;--pt-color-status-negative-darkest: #ab3f3f;--pt-color-status-positive: #60cc70;--pt-color-status-positive-light: #95dca0;--pt-color-status-positive-lighter: #bcefc4;--pt-color-status-positive-lightest: #f6fff8;--pt-color-status-positive-dark: #0f9d58;--pt-color-status-positive-darker: #13884f;--pt-color-status-positive-darkest: #116b3f;--pt-color-warning: #fde6a0;--pt-color-warning-light: #fff3cf;--pt-color-warning-lighter: #fff8e2;--pt-color-warning-lightest: #fffcf4;--pt-color-warning-dark: #f0d277;--pt-color-warning-darker: #edcb64;--pt-color-warning-darkest: #ebc03c}html,body{height:100vh;padding:0;margin:0;background-color:var(--pt-color-black)}.pt-tracker{height:100%;display:flex;flex-direction:column}.pt-tracker .pt-tracker-header{background-color:var(--pt-color-blue-light);color:var(--pt-color-black);padding:10px 15px}.pt-tracker .pt-tracker-header .brand{display:flex}.pt-tracker .pt-tracker-header .brand .title{flex-grow:1;text-align:right;padding-top:6px}.pt-tracker .pt-tracker-header .brand .title .name{font-weight:200;font-size:19px;text-transform:uppercase;color:var(--pt-color-silver-dark)}.pt-tracker .pt-tracker-header .brand .title .order{font-weight:bold;color:var(--pt-color-red);display:inline}.pt-tracker .pt-tracker-header .details{font-size:20px;text-align:center}.pt-tracker .pt-tracker-header .details .status{color:var(--pt-color-black);display:inline}.pt-tracker .pt-tracker-header .details .status:after{content:": "}.pt-tracker .pt-tracker-footer{display:flex;gap:5px;flex-direction:row;align-items:center;min-height:60px;color:var(--pt-color-white);background-color:var(--pt-color-black);padding:5px 5px 5px 15px}.pt-tracker .pt-tracker-footer .content{flex-grow:1;font-size:10.5px;line-height:1.15em;margin-right:85px}.pt-tracker .pt-tracker-footer .content a{color:var(--pt-color-red);text-decoration:underline}.pt-tracker .pt-tracker-footer .content .copyright{margin-top:.5em;font-size:9px}.pt-tracker .pt-tracker-footer .content .copyright a{padding-left:10px;color:var(--pt-color-blue);text-decoration:none}.pt-tracker .pt-tracker-body{background-color:var(--pt-color-white);display:flex;gap:10px;height:100%}.pt-tracker .pt-tracker-body .timeline{width:40%;max-width:200px;min-width:100px;padding:20px 0px 20px 25px;display:flex}.pt-tracker .pt-tracker-body .timeline .bar{height:100%;width:5px;min-width:5px;background-color:var(--pt-color-silver-dark);border-radius:10px}.pt-tracker .pt-tracker-body .timeline .steps{padding-left:50px;display:flex;flex-direction:column;align-content:stretch;height:100%}.pt-tracker .pt-tracker-body .timeline .steps .step{flex-grow:1;display:flex;align-items:center;position:relative;margin-left:-30px}.pt-tracker .pt-tracker-body .timeline .steps .step:first-child{align-items:flex-start;flex-grow:.5}.pt-tracker .pt-tracker-body .timeline .steps .step:last-child{align-items:flex-end;flex-grow:.5}.pt-tracker .pt-tracker-body .timeline .steps .step:last-child .step-content{position:relative}.pt-tracker .pt-tracker-body .timeline .steps .step:last-child .step-content:after{position:absolute;content:" ";left:-33px;bottom:0px;height:100%;width:20px;background-color:#fff}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content{z-index:1}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content .label{line-height:1.1em;color:var(--pt-color-silver);font-weight:200}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content .updated{display:none;line-height:.7em}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content .updated .date,.pt-tracker .pt-tracker-body .timeline .steps .step .step-content .updated .time{font-size:10px;color:var(--pt-color-silver-dark);white-space:nowrap;display:inline}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content .updated .date:after{content:" - "}.pt-tracker .pt-tracker-body .timeline .steps .step .step-content:before{z-index:2;content:" ";display:block;position:absolute;left:-35px;height:24px;width:24px;border-radius:12px;margin-top:-3px;background-color:var(--pt-color-silver)}.pt-tracker .pt-tracker-body .timeline .steps .step.complete .step-content .label{color:var(--pt-color-black);font-weight:normal}.pt-tracker .pt-tracker-body .timeline .steps .step.complete .step-content .updated{display:block}.pt-tracker .pt-tracker-body .timeline .steps .step.complete .step-content:before{background-color:var(--pt-color-black)}.pt-tracker .pt-tracker-body .timeline .steps .step.cancelled .step-content .label{color:var(--pt-color-red);font-weight:bold}.pt-tracker .pt-tracker-body .timeline .steps .step.cancelled .step-content .updated{display:block}.pt-tracker .pt-tracker-body .timeline .steps .step.cancelled .step-content:before{content:"X";font-size:30px;font-weight:1000;color:var(--pt-color-red);background-color:var(--pt-color-white);padding-top:4px;padding-bottom:8px;line-height:1em;margin-top:-10px;left:-34px}.pt-tracker .pt-tracker-body .timeline .steps .step.active .step-content .label{font-weight:bold;color:var(--pt-color-red);z-index:2;position:relative}.pt-tracker .pt-tracker-body .timeline .steps .step.active .step-content .updated{display:block;position:relative;z-index:1}.pt-tracker .pt-tracker-body .timeline .steps .step.active .step-content:before{background-color:var(--pt-color-red)}.pt-tracker .pt-tracker-body .content{padding-bottom:15px;flex-grow:1;display:flex;flex-direction:column;position:relative;min-width:225px}.pt-tracker .pt-tracker-body .content .content-scroll{display:flex;flex-direction:column;gap:5px;padding-top:15px;padding-bottom:15px;padding-right:15px;position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto}.pt-tracker .pt-tracker-body .content .content-scroll .label{margin-top:15px;font-size:.85em;color:var(--pt-color-silver-darker);line-height:1em}.pt-tracker .pt-tracker-body .content .content-scroll .label .sub{display:inline;font-size:.65em;white-space:nowrap}.pt-tracker .pt-tracker-body .content .content-scroll .order{background-color:var(--pt-color-blue-lighter);border:solid 1px var(--pt-color-blue);border-radius:15px;padding:10px 10px 10px 15px}.pt-tracker .pt-tracker-body .content .content-scroll .order .product{font-size:.8em;font-weight:bold}.pt-tracker .pt-tracker-body .content .content-scroll .order .address{font-weight:normal;color:var(--pt-color-red)}.pt-tracker .pt-tracker-body .content .content-scroll .order .eta{font-weight:bold;color:var(--pt-color-black)}.pt-tracker .pt-tracker-body .content .content-scroll .info{display:flex;flex-direction:column;flex-grow:1;padding-right:10px}.pt-tracker .pt-tracker-body .content .content-scroll .info .status{font-weight:normal}.pt-tracker .pt-tracker-body .content .content-scroll .info .note{font-weight:bold}.pt-tracker .pt-tracker-body .content .content-scroll .info .note.accent{color:var(--pt-color-red)}.pt-tracker .pt-tracker-body .content .content-scroll .actions{display:flex;gap:20px}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content{display:flex;flex-wrap:wrap;gap:8px;padding-right:15px}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn{font-size:16px;padding:9px 12px;border-radius:8px;flex-grow:1}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.primary{background-color:var(--pt-color-blue);border:solid 1px var(--pt-color-blue);color:var(--pt-color-white)}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.primary:hover,.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.primary:active{background-color:var(--pt-color-blue-dark);border:solid 1px var(--pt-color-blue-dark);color:var(--pt-color-white);cursor:pointer}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.default{background-color:var(--pt-color-white);border:solid 1px var(--pt-color-blue);color:var(--pt-color-blue)}.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.default:hover,.pt-tracker .pt-tracker-body .content .content-scroll .actions .actions-content .btn.default:active{background-color:var(--pt-color-blue-dark);border:solid 1px var(--pt-color-blue-dark);color:var(--pt-color-white);cursor:pointer}#hubspot-messages-iframe-container iframe{bottom:-10px !important;right:-2px !important}@media(max-width: 360px),(max-height: 600px){.pt-tracker{zoom:.85;line-height:1.2em}.pt-tracker .pt-tracker-footer{min-height:70px}#hubspot-messages-iframe-container iframe{bottom:-13px !important;right:-8px !important}}@media(min-width: 1000px){.pt-tracker{zoom:1.25;line-height:1.2em}.pt-tracker .pt-tracker-footer{min-height:47px}}@media(min-width: 1500px){.pt-tracker{zoom:1.5;line-height:1.2em}.pt-tracker .pt-tracker-footer{min-height:37px}}