.checkoutMain { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .checkoutMainInside { width: 100%; display: flex; flex-direction: row; grid-gap: 25px; } @media (max-width: 992px) { .checkoutMainInside { flex-direction: column; } } .checkoutMainInsideSec { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .checkoutMainTop { width: 100%; display: flex; flex-direction: row; grid-gap: 15px; } .checkoutMainTopTitle { display: flex; flex-direction: column; grid-gap: 5px; } .checkoutMainTopTitleHeading { font-weight: 700; color: rgba(0,0,0,0.75); } .checkoutMainInsideSec.checkoutMainInsideSecSide { min-width: 400px; max-width: 400px; position: relative; } @media (max-width: 992px) { .checkoutMainInsideSec.checkoutMainInsideSecSide { min-width: auto; max-width: unset; width: 100%; } } .checkoutMainInsideSec.checkoutMainInsideSecBody { } @media (max-width: 992px) { .checkoutMainInsideSec.checkoutMainInsideSecBody { order: 2; } } .checkoutMainInsideSecSideSec { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; border-radius: 8px; padding: 0 10px; } .checkoutMainInsideSecSideSec.checkoutMainInsideSecSideSecAlt { padding: 10px; background: white; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); } .checkoutMainInsideSecBodyCard { width: 100%; border-radius: 8px; display: flex; flex-direction: column; grid-gap: 0px; overflow: hidden; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); background: white; padding: 5px; } .checkoutMainInsideSecBodyCardTop { width: 100%; display: flex; flex-direction: row; grid-gap: 15px; padding: 10px 15px; } .checkoutMainInsideSecBodyCardBottom { transition: ease 0.0s; width: 100%; display: flex; flex-direction: row; grid-gap: 20px; background: rgba(0,0,0,0.05); padding: 0px; height: 0px; overflow: hidden; outline: solid 1px rgba(0,0,0,0); border-radius: 6px; } .checkoutMainInsideSecBodyCardBottom.checkoutMainInsideSecBodyCardBottomActive { padding: 10px; height: 100%; outline: solid 1px rgba(0,0,0,0.1); } .checkoutMainInsideSecBodyCardTopName { flex-grow: 1; font-weight: 600; font-size: 16px; } .checkoutMainInsideSecBodyCardTopSec { display: flex; flex-direction: column; justify-content: center; } .checkoutMainInsideSecBodyCardTopSec.checkoutMainInsideSecBodyCardTopAmount { } .checkoutMainInsideSecBodyCardTopAction { display: flex; flex-direction: row; grid-gap: 5px; } .checkoutMainInsideSecBodyCardTopSec.checkoutMainInsideSecBodyCardTopPrice { font-weight: 600; white-space: nowrap; } .checkoutMainInsideSecBodyCardTopNameText { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .inputMain.checkoutMainInsideSecBodyCardTopAmountInput { max-width: 65px; } .btnMain.checkoutMainInsideSecBodyCardTopActionBtnView { padding: 10px; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.35); } .btnMain.checkoutMainInsideSecBodyCardTopActionBtnTrash { padding: 10px; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.35); } .btnMain.checkoutMainInsideSecBodyCardTopActionBtnTrash:hover { background: tomato; color: rgb(255,255,255); } .checkoutMainInsideSecBodyCardBottomMedia { width: 100%; max-width: 200px; min-width: 200px; } .checkoutMainInsideSecBodyCardBottomMediaInside { padding-top: 50%; background: rgba(0,0,0,0.1); border-radius: 6px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); position: relative; overflow: hidden; } .checkoutMainInsideSecBodyCardBottomMediaInsideImg { object-fit: cover; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .checkoutMainInsideSecBodyCardBottomDetails { flex-grow: 1; display: flex; flex-direction: column; grid-gap: 5px; } .checkoutMainInsideSecBodyCardBottomDetailsSummary { padding: 0 10px; } .checkoutMainInsideSecBodyCardBottomDetailsSummaryText { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8; } .checkoutMainInsideSecSideSecInfo { display: flex; flex-direction: column; grid-gap: 10px; justify-content: end; } .checkoutMainInsideSecSideSecInfoSec { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; justify-content: space-between; padding: 5px 10px; border-radius: 6px; background: rgba(0,0,0,0.05); } .checkoutMainInsideSecSideSecInfoSecText1 { font-weight: 700; color: rgba(0,0,0,0.65); } .checkoutMainInsideSecSideSecInfoSecText2 { color: rgba(0,0,0,0.75); } .checkoutMainInsideSecSideSecInfoDivider { width: 100%; height: 1px; background: rgba(0,0,0,0.1); } .checkoutMainInsideSecSideSecInfoActions { display: flex; flex-direction: row; grid-gap: 5px; } .btnMain.checkoutMainInsideSecSideSecInfoActionsBtn { padding: 5px 10px; width: 100%; } .btnMain.checkoutMainInsideSecSideSecInfoActionsBtnAlt { padding: 5px 10px; background: white; border: solid 1px rgba(0,0,0,0.1); color: rgba(0,0,0,0.3); } .checkoutMainInsideSecSideSecWrapper { width: 100%; position: sticky; top: 10px; display: flex; flex-direction: column; grid-gap: 15px; } .checkoutMainInsideSecSideSecNoteText { font-size: 14px; } .checkoutMainInsideSecBodyCardBottomDetailsStore { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; padding: 5px 15px; border-radius: 6px; background: white; border: solid 1px rgba(0,0,0,0.1); font-weight: 500; } .checkoutMainInsideSecBodyCardBottomDetailsStore:hover { color: white; background: #ff9900; border: solid 1px rgba(0,0,0,0); } .createStoreMainActions { display: flex; flex-direction: row; grid-gap: 25px; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); align-items: center; } @media (max-width: 768px) { .createStoreMainActions { flex-direction: column; } } .createStoreMainActionsText { flex-grow: 1; } .btnMain.createStoreMainActionsBtn { } @media (max-width: 768px) { .btnMain.createStoreMainActionsBtn { width: 100%; } }