:root { --bs-font-sans-serif: usnet; --bs-font-monospace: unset; --bs-body-font-family: unset; } ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background: rgb(222,222,222); border-right: solid 1px rgba(0,0,0,0.05); border-left: solid 1px rgba(0,0,0,0.05); } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,153,0,0.75); } .htmlMain { Background: #EDEDED; min-height: 100%; display: flex; flex-direction: column; scroll-behavior: smooth; font-family: 'Archivo'; } .bodyMain { background: unset; display: flex; flex-direction: column; align-items: center; flex-grow: 1; min-height: 100vh; position: relative; letter-spacing: 1px; font-size: 16px; line-height: 1.5; word-break: break-word; color: #434343; font-family: 'Archivo'; } .secMain { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 100px 0; grid-gap: 50px; position: relative; } .secMain.secMainAlt { padding: 50px 0; grid-gap: 25px; } @media (max-width: 992px) { .secMain.secMainAlt { padding: 25px 0; grid-gap: 25px; } } @media (max-width: 992px) { .secMain { padding: 25px 0; grid-gap: 25px; } } .containerMain { max-width: 1400px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: end; padding: 0 10px 0 10px; position: relative; } p { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } a { transition: ease 0.2s; display: block; transition: ease 0.2s; color: unset; text-decoration: unset; cursor: pointer; } a:hover { color: unset; text-decoration: unset; color: #FF9900; } .btnMain { transition: ease 0.4s; background: rgb(255,153,0); border: unset; outline: unset; color: rgba(255,255,255,0.85); padding: 10px 20px; border-radius: 5px; font-weight: 600; font-size: 18px; transform: scale(1); white-space: nowrap; display: flex; flex-direction: row; justify-content: center; align-items: center; grid-gap: 10px; border: solid 1px rgba(0,0,0,0); } .btnMain:hover { background: rgba(255,153,0,0.85); color: rgb(255,255,255); border: solid 1px rgba(0,0,0,0); } .btnMain:active { transition: ease 0.4s; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); } .btnMain.btnMainAlt:hover { background: #434343; color: #ffffff; } .btnMain.btnMainAlt:active { background: #333333; } .btnMainImgMain { width: 100%; max-width: 25px; } .MidMain { width: 100%; flex-grow: 1; display: flex; flex-direction: column; } .secMainInside { width: 100%; display: flex; flex-direction: column; grid-gap: 35px; } @media (max-width: 992px) { .secMainInside { grid-gap: 25px; } } .secMainInsideGrid { display: grid; grid-template-columns: 1fr; grid-gap: 25px; } @media (max-width: 768px) { .secMainInsideGrid { grid-gap: 15px; } } .secMainInsideGrid.secMainInsideGrid2 { grid-template-columns: 1fr 1fr; } @media (max-width: 576px) { .secMainInsideGrid.secMainInsideGrid2 { grid-template-columns: 1fr; } } .secMainInsideGrid.secMainInsideGrid3 { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 576px) { .secMainInsideGrid.secMainInsideGrid3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 400px) { .secMainInsideGrid.secMainInsideGrid3 { grid-template-columns: 1fr; } } .secMainInsideGrid.secMainInsideGrid4 { grid-template-columns: 1fr 1fr 1fr 1fr; } @media (max-width: 992px) { .secMainInsideGrid.secMainInsideGrid4 { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 768px) { .secMainInsideGrid.secMainInsideGrid4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .secMainInsideGrid.secMainInsideGrid4 { grid-template-columns: 1fr; } } .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } @media (max-width: 1200px) { .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (max-width: 768px) { .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 576px) { .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr 1fr; } } @media (max-width: 400px) { .secMainInsideGrid.secMainInsideGrid5 { grid-template-columns: 1fr; } } .storeCardMainInsideMid { width: 100%; display: flex; flex-direction: column; grid-gap: 5px; padding: 0 10px; } .secMainInsideHead { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; } .secMainInsideHead.secMainInsideHeadAlt { text-align: center; } .secMainInsideHeadHeading { } .secMainInsideHeadText { } .secMainInsideAction { display: flex; flex-direction: row; justify-content: center; align-items: center; grid-gap: 10px; } .btnMain.secMainInsideActionBtn { background: rgba(255,153,0,0); color: rgba(0,0,0,0.5); border: solid 1px rgba(0,0,0,0.1); } .btnMain.secMainInsideActionBtn:hover { background: rgba(255,153,0,0.85); color: rgb(255,255,255); border: solid 1px rgba(0,0,0,0); padding: 10px 40px; } .dropdownMain { display: flex; flex-direction: column; grid-gap: 0px; } .btnMain.dropdownMainBtn { padding: 5px 15px; grid-gap: 10px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; } .dropdown-menu.dropdownMainMenu { background: #ffffff; border: solid 1px rgba(0,0,0,0.1); box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); padding: 5px; width: 100%; } .dropdown-menu.dropdownMainMenu > *:last-child { margin: 0; } .dropdownMainMenuItem { transition: ease 0.4s; border: solid 1px rgba(0,0,0,0.1); border-radius: 4px; padding: 5px 10px; line-height: 1.5; font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.65); margin: 0 0 5px 0; } .dropdownMainMenuItem:hover { background: #ff9900; color: rgb(255,255,255); border: solid 1px rgba(0,0,0,0); } .inputWrapper { display: flex; flex-direction: row; position: relative; border: solid 1px rgba(0,0,0,0.1); border-radius: 5px; grid-gap: 0px; background: white; overflow: hidden; } .inputMain { transition: ease 0.4s; border: unset; outline: unset; padding: 5px 10px; background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); line-height: 1.5; width: 100%; } .inputMain:focus { background: rgba(0,0,0,0.08); } .inputWrapper.inputWrapperAlt { outline: solid 5px white; margin: 2px; border: unset; box-shadow: 0 0 4px 5px rgb(0,0,0,0.1); } .btnMain.inputMainBtn { transition: ease 0.2s; padding: 5px 10px; border-radius: 0px; box-shadow: unset; color: rgba(0,0,0,0.5); background: rgba(255,153,0,0); } .btnMainIcon { } .btnMain.inputMainBtn:hover { color: white; background: #ff9900; } .checkboxWrapper { display: flex; flex-direction: row; grid-gap: 10px; justify-content: start; align-items: center; padding: 5px 10px; border: solid 1px rgba(0,0,0,0.1); border-radius: 4px; } .form-label { margin: 0; } .inputMainLabel { font-size: 16px; } .checkboxWrapperCheck { } .checkboxWrapper.checkboxWrapperFancy { transition: ease 0.3s; background: rgba(255,153,0,0); } .checkboxWrapper.checkboxWrapperFancy.checkboxWrapperFancyActive { background: #ff9900; border: solid 1px rgba(0,0,0,0); } .checkboxWrapper.checkboxWrapperFancy.checkboxWrapperFancyActive > label { color: white; } .checkboxWrapperCheckRadio { } .storeMainMidInsideSec.storeMainMidInsideSecProfile { justify-content: center; } @media (max-width: 576px) { .storeMainMidInsideSec.storeMainMidInsideSecProfile { flex-direction: column; align-items: center; } } .linkMain { } .secMainInsideExtraSec { display: flex; flex-direction: column; grid-gap: 15px; } .secMainInsideExtraSecTop { display: flex; flex-direction: column; grid-gap: 5px; } .secMainInsideExtraSecTopTitle { font-weight: 600; } .inputMainWrapper { display: flex; flex-direction: column; grid-gap: 5px; } .inputMainBox { display: flex; flex-direction: column; grid-gap: 15px; flex-wrap: wrap; } .inputMainBoxWrapper { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .inputMainBoxWrapperActions { display: flex; flex-direction: row; grid-gap: 10px; justify-content: center; align-items: center; } .btnMain.inputMainBoxWrapperActionsBtn { flex-grow: 1; } .inputMainNote { display: flex; flex-direction: column; grid-gap: 5px; border: solid 2px rgba(0,0,0,0.1); border-radius: 6px; padding: 10px; background: rgba(0,0,0,0.1); color: black; font-size: 14px; } .inputMainNote.inputMainNoteRed { border: solid 2px #ffa494; background: #ef745e; color: white; } .inputMainNote.inputMainNoteGreen { border: solid 2px #a5da8b; background: #80b865; color: white; } .inputMain.inputMainArea { transition: height ease 0s; } .inputMainLabelExtra { font-size: 14px; color: rgba(0,0,0,0.65); } .secDivider { width: 100%; height: 1px; background: rgba(0,0,0,0.05); } .secDivider.secDividerAlt { max-width: 85%; justify-self: center; align-self: center; }