/* font weight */ .f-w-400 { font-weight: 400; } .f-w-500 { font-weight: 500; } .f-w-600 { font-weight: 600; } .f-w-700 { font-weight: 700; } /* semi bold text */ .h3-sm-bold { font-size: 24px; font-weight: 600; } .h4-sm-bold { font-size: 22px; font-weight: 600; } .h5-sm-bold { font-size: 20px; font-weight: 600; } .h6-sm-bold { font-size: 18px; font-weight: 400; } .h7-sm-bold { font-size: 16px; font-weight: 400; } .h8-sm-bold { font-size: 14px; font-weight: 400; } /* input fields */ .input-field { height: 56px; width: 100%; padding: 18px 16px; border-radius: 8px; border: 0px; background-color: #fff; } .input-field:focus, .input-field-grey:focus { padding: 18px 16px; outline: none; } .input-field-grey { height: 56px; width: 100%; padding: 18px 16px; border-radius: 8px; border: 0px; background-color: #fafafa; } /* buttons */ button { cursor: pointer; } .cta-button-gradient { background: linear-gradient(90deg, #f12711 0%, #f5af19 100%); } .orange-button { background-color: #cc4700; color: #fff; border: 0px; border-radius: 8px; width: 100%; cursor: pointer; height: 48px; } .green-button { background-color: #0eb55f; color: #fff; border: 0px; border-radius: 8px; width: 100%; cursor: pointer; height: 48px; } .black-button { background-color: #000000; color: #fff; border: 0px; border-radius: 8px; width: 100%; cursor: pointer; height: 48px; } .button { border: 0px; border-radius: 8px; width: 100%; cursor: pointer; height: 48px; } .orange-button:hover, .green-button:hover, .black-button:hover, .orange-button:focus, .green-button:focus, .black-button:focus { color: #fff; } .light-grey-button { background-color: #fafafa; color: #373737; border: 0px; border-radius: 8px; width: 100%; cursor: pointer; height: 48px; } .light-grey-button:hover, .light-grey-button:focus { color: #373737; } /* align */ .text-center { text-align: center; } .justify-center { justify-content: center; }