.btn { font-weight: 500; line-height:1; border-radius: .5rem; -webkit-transition: all ease-out !important; -moz-transition: all ease-out !important; -o-transition: all ease-out !important; transition: all ease-out !important; transition-duration: 0.3s !important; } .btn-icon { background: unset; border:0; } .btn-icon path{ stroke:var(--darker-60); } .btn-icon:not(:disabled):is(.focus, :focus-within, :focus, :active) path { stroke: var(--black); } .btn-link.focus, .btn-link:focus{ text-decoration:none; } .btn:disabled { cursor: not-allowed; } .btn.icon > i { margin-right: .5rem; } .btn-primary { border: 1px solid #0E52B1; background: #1163D4; color: #E4EDFA; } .btn-primary:hover { box-shadow: 0px 0px 4px 2px #2872D8; color: #ffffff; background-color: #0E52B1; } .btn-primary.focus, .btn-primary:focus { color: #fff; background: #0B428D !important; border-color: #0d4da5; box-shadow: 0 0 0 0.2rem rgb(53 122 218 / 50%); } .btn-primary.disabled, .btn-primary:disabled { box-shadow: 0px 0px 0px 0px #2872D8; color: #fff; background-color: #1163d4 !important; border-color: #1163d4 !important; cursor: not-allowed; } .btn-outline-primary path{ fill:var(--primary); stroke:var(--primary); } .btn svg path { transition: all ease-in-out 250ms; } .btn-outline-primary { } .btn-outline-primary:not(:disabled):hover > svg path { fill: white; stroke: white; } .btn-outline-primary:active { background-color: #0E52B1; } .btn-success { background-color: #57bd36; border: 1px solid #499F2E; color: #fff; } .btn-success:hover { color: #fff; background-color: #499f2e; } .btn-success.focus, .btn-success:focus { color: #fff; background-color: #499f2e; border-color: #45952b; box-shadow: 0 0 0 0.2rem rgb(112 199 84 / 50%); } .btn-success.disabled, .btn-success:disabled { color: #fff; background-color: #57bd36; border-color: #57bd36; box-shadow: 0px 0px 0px 0px #2872D8; cursor: not-allowed; } .btn-danger { background: linear-gradient(0deg, red, #8a0000); } .btn-grad-blue { background-image: linear-gradient(to right, #2483C5 0%, #075f93 51%) } .btn-grad-blue { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px var(--light); border-radius: 10px; display: block; } .btn-grad-blue:hover { transform: scale(1.05); color: white; text-decoration: none; } .btn.btn-grad-orange { text-shadow: 2px 1px 0 rgb(156, 104, 33); background: linear-gradient(to right, rgba(254,194,114,1), rgba(252,168,54,1), rgba(252,168,54,1), rgba(254,194,114,1)); padding: 15px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; border-radius: 10px; font-weight: 600; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .btn.btn-grad-orange:not(:disabled):hover { background-position: 100% 0; } .btn.btn-grad-orange:not(:disabled):active { transform: scale(0.95); } .btn-outline-light.active { color: var(--white) !important; border-color: var(--black) !important; } .car-sweep { overflow: hidden; position: relative; } .car-sweep::after { --width: 100px; content: ""; position: absolute; width: 0; height: var(--width); bottom: -100px; background-image: url("https://carowl-images.b-cdn.net/website-images/owls/owl-in-car-driving-no-shadow.fw.png"); background-size: contain; background-repeat: no-repeat; transition: transform linear .3s 100ms, left linear 1.2s; -webkit-animation: vibrate-1 .35s linear infinite; animation: vibrate-1 .35s linear infinite; } .car-sweep:not(:disabled)::after { left: -100px; } .car-sweep:disabled::after { width: var(--width); left: calc(100% + 5px); } @keyframes gradient-bg-normal { 0% { background-size: 100% 200%; } 100% { background-size: 100% 100%; } } @keyframes gradient-bg-hover { 0% { background-size: 100% 100%; } 100% { background-size: 100% 150%; } } @keyframes gradient-bg-focus { 0% { background-size: 100% 150%; } 100% { background-size: 100% 250%; } } .btn-link:hover{ color:var(--black); } .btn-link:hover path { fill: var(--black); } .btn-radius-hover { padding: 1rem 2rem; width: fit-content; font-size: 22px; line-height: 1.3; border-radius: 50rem; border: 0px solid; background: linear-gradient(85.71deg, var(--orange-1) 16.75%, var(--orange-1) 55.43%, var(--orange-1) 91.71%); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; color: black; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 125ms linear !important; } .btn-radius-hover.small { padding-block: .25rem; padding-inline: 1rem; font-size: 1rem; letter-spacing: 1px; } .btn-radius-hover.grey { color: white; background: #5E5E5E; } .btn-radius-hover.outlined.grey { background: unset; border: 1px solid var(--darker-20); } .btn-radius-hover.outlined.grey:hover { background: var(--darker-10); border: 1px solid var(--darker-30); } .btn-radius-hover.white { background: linear-gradient(0deg, var(--black), var(--black)); color:var(--white) !important; } .btn-radius-hover.black { background: var(--black) !important; color:var(--white) !important; } .btn-radius-hover.purple { background: linear-gradient(0deg, #4426ff, #7f3cae); color: white !important; } .btn-radius-hover.blue { background: linear-gradient(85.71deg, #087AFF 16.75%, #09B5FF 55.43%, #087BFF 91.71%); } .btn-radius-hover.red { background: linear-gradient(0deg, red, #8a0000); } .btn-radius-hover.deluxe { background: linear-gradient(45deg, #3f27da, var(--orange-1)); } .btn-radius-hover.deluxe:not(:disabled):hover { background: linear-gradient(45deg, var(--orange-1), #3f27da); } .btn-radius-hover.blue:not(:disabled):hover { background-color: rgb(13 83 159); } .btn-radius-hover.blue:active { background-color: rgb(6 51 99); } .btn-radius-hover.green { background: linear-gradient(90deg, rgb(36 177 24), rgb(15 99 7)); } .btn-radius-hover span { font-weight: 300; margin-inline:.5rem; } .btn-radius-hover svg { font-weight: 300; min-width:24px; } .btn-radius-hover:disabled { color: var(--lighter-40); box-shadow: none; cursor: not-allowed; background: linear-gradient(90deg, var(--darker-70), var(--darker-50)); } .btn-radius-hover:not(:disabled):hover { box-shadow: none; transform: scale(1.02); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; } .btn-radius-hover:not(:disabled):active { transform: scale(.95); } .btn-radius-hover:not(:disabled):is(.focus, :focus-within, :focus, :active) { border-color:rgb(255 255 255 / 50%); } .btn-radius-hover.disabled, .btn-radius-hover:disabled, .btn-radius-hover.focus, .btn-radius-hover:focus-within { cursor: default; } .btn-long-outlined { padding-inline: 3rem; width: auto; font-size: 1.5rem; border-radius: 0.5rem 1rem; text-transform: uppercase; color: var(--darker-30) !important; border: 2px solid var(--darker-30); transition: all 300ms ease-in-out; overflow: hidden; } .btn-long-outlined:hover { border-radius: 1rem .5rem; color: white !important; background-color: var(--orange-2); } .btn-long-outlined.focus, .btn-long-outlined:focus { background-color: var(--orange-2); box-shadow: none; } .btn-long-outlined.disabled, .btn-long-outlined:disabled { opacity: .6; box-shadow: none; cursor: not-allowed; } .btn-provider { display: inline-flex; align-items: center; background: var(--white); color: var(--black); padding-inline: 1rem; font-size: 1rem; text-align: left; transition: font-weight 50ms linear; border-radius: .5rem; letter-spacing: 0; width:100%; padding: .75rem 1rem; gap: 1rem; } .btn-provider:hover { color:unset; } .btn-provider:not(:disabled):hover { } .btn-provider:is(:active, :focus-within) { } .btn-provider:not(:disabled):active { } .btn-provider svg{ max-width: 24px; max-height: 24px; } .fb { background-color: #1877F2; color: white; } .fb:hover { color: white; background-color: #004aab; } .ms { color: #cccccc; background-color: #2F2F2F; border: 1px solid #8C8C8C; } .ms:hover { color: #a2a0a0; background-color: #1f1f1f; } .google { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.54); background-color: white; } .google:hover { color: rgba(0, 0, 0, 0.54); background-color: #cfcfcf; } @media (prefers-color-scheme: dark) { .ms { color: white; background-color: #2F2F2F; border: unset; } .ms:hover { color: white; } } .btn-icon{ background-color:transparent; height:32px; }