.ati-tracker { font-family: 'iransansxv', 'iransansx', 'tahoma'; max-width: 800px; margin: 0 auto; } .ati-tracker *{ box-sizing: border-box; } .ati-tracker-result-wrapper { margin: 3px; background-color: #f6fcff; border-radius: 8px; padding: 10px 20px; box-shadow: 0px 0px 10px 0px #ECEFF1; } .result-header{ display: flex; justify-content: space-between; padding: 10px 0 30px 0; font-size: 14px; font-weight: 600; } .ati-tracker-order-id { } .ati-tracker-result-sent-date { } .ati-tracker-steps .order-step .status-container { display: flex; width: -webkit-fill-available; margin: 6px 0; padding-right: 28px; } .ati-tracker-steps .order-step .status { height: inherit; display: flex; align-items: center; margin-right: 20px; } .ati-tracker-steps .order-step .status span{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; font-size: 13px; } .ati-tracker-steps .order-step .content { width: -webkit-fill-available; box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: space-evenly; font-size: 14px; } .ati-tracker-steps { display: flex; justify-content: center; } .ati-tracker-steps .order-step { display: flex; align-items: center; position: relative; background: #B0BEC5; } .order-step:first-child { border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .order-step:last-child { border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .ati-tracker-steps .order-step .icon { position: absolute; background: #AED581; border-radius: 100%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; box-shadow: white 0px 0px 0px 4px; overflow: hidden; } /* Add a pseudo-element for the outline */ .ati-tracker-steps .order-step .icon::before { content: ""; position: absolute; width: 100%; height: 100%; border: 2px dashed white; border-radius: inherit; box-sizing: border-box; } /* Apply spinning animation to the specific status */ .ati-tracker-steps .order-step .icon.spinning::before { animation: spin 8s linear infinite; } /* Define the spinning animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ati-tracker-delivery-info { display: flex; border-top: 1px #ffffff solid; margin: 25px; padding-top: 20px; font-size: 13px; } .ati-tracker-delivery-details { display: flex; flex-direction: column; width: 50%; } .ati-tracker-delivery-details span { line-height: 2; } .ati-tracker-download-section { display: flex; width: 50%; justify-content: space-evenly; align-items: center; height: -webkit-fill-available; } .ati-tracker-download-section a{ display: flex; flex-direction: column; align-items: center; } .ati-tracker-download-section .download-section-header { border-bottom: #ffffff61 1px solid; padding-bottom: 3px; margin-bottom: 3px; } .ati-tracker-related-orders { display: flex; flex-wrap: wrap; } .related-orders-text-wrapper, .ati-tracker-related-orders input{ font-size: 12px; box-shadow: 0px 4px 0px #27a42c; background-color: #81c784; border: 0; display: inline-block; text-align: center; color: white; padding: 4px 12px; font-size: 12px; outline-color: unset; margin-left: 1px; cursor: pointer; } .related-orders-text-wrapper { box-shadow: 0px 4px 0px #607D8B; background-color: #B0BEC5; color: #546e7a; cursor: unset; user-select: none; display: flex; width: 150px; justify-content: space-between; font-weight: bold; } /*responsive style start*/ @media screen and (max-width: 768px) { .ati-tracker-steps { flex-direction: column; width: -webkit-fill-available; } .ati-tracker-steps .order-step { margin-bottom: 6px; border-radius: 25px; } .ati-tracker-steps .order-step .status { width: inherit; } .ati-tracker-steps .order-step .status span { width: inherit; } .ati-tracker-steps .order-step .status-container { padding: 6px 28px 6px 0; } .ati-tracker-delivery-info { flex-direction: column; margin: 25px 0; font-size: 14px; } .ati-tracker-delivery-details, .ati-tracker-download-section{ width: unset; } .ati-tracker-download-section{ margin-top: unset; padding-top: unset; } }