_custom.scss
/* This is SnapCheck's main stylesheet, _custom.scss, customized to handle our company website, as well as our webapp and partner products. */
/* We also currently utilize Bootstrap 4 Defaults at bootstrap.css, as well as _button-group.scss, styles.scss, and float-label.css */
/* Bootstrap 4 documentation: https://getbootstrap.com/docs/4.3/getting-started/introduction/ */
/* Bootstrap theme variable overrides follow */
/* Bootstrap theme variable overrides follow */
/* Smooth those fonts */
html {
-webkit-font-smoothing: antialiased;
}
html {
-webkit-font-smoothing: antialiased;
}
/* Assign the universal font treatment */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
//color: #4c4c4c; /* CAN THIS TEXT COLOR BE REMOVED? */
text-align: left;
background-color: #fff;
}
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
//color: #4c4c4c; /* CAN THIS TEXT COLOR BE REMOVED? */
text-align: left;
background-color: #fff;
}
/* Placement, dimensions and call for the logo -- NOTE THAT THIS IS BEING FIGURED OUT (TODD) 6.12.2019 */
logo {
div.absolute {
position: absolute;
top: 0px;
left: 0px;
height: 35px;
}
}
logo {
div.absolute {
position: absolute;
top: 0px;
left: 0px;
height: 35px;
}
}
/* set the font-face */
:root {
--font-family-sans-serif: "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root {
--font-family-sans-serif: "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
$btn-height: 56px;
$text-letter-space: 1px;
$btn-text-letter-space: $text-letter-space + 0.15;
$text-letter-space: 1px;
$btn-text-letter-space: $text-letter-space + 0.15;
/* This is where the THEME COLORS live, pulled for each partner by name. Note that we are using color names as indicated below, assigned to a hex value */
// default snapcheck
$snapcheck-colors: (
"supernova": #f8b636,
"carrot-orange": #eb9723,
"air-force-blue": #5f749a,
"chatham-blue": #2d546d,
"venetian-red": #d0021b,
"chateau-green": #28a745,
"matterhorn": #4c4c4c,
"dark-gray": #a8a8a8,
"gainsboro": #d8d8d8,
"link-water": #ced4da,
"very-light-grey": #ccc,
"whisper": #eee,
"white": #fff,
) !default;
$snapcheck-colors: (
"supernova": #f8b636,
"carrot-orange": #eb9723,
"air-force-blue": #5f749a,
"chatham-blue": #2d546d,
"venetian-red": #d0021b,
"chateau-green": #28a745,
"matterhorn": #4c4c4c,
"dark-gray": #a8a8a8,
"gainsboro": #d8d8d8,
"link-water": #ced4da,
"very-light-grey": #ccc,
"whisper": #eee,
"white": #fff,
) !default;
// azlo
$azlo-colors: (
"primary": #b519f1,
"primary-dark": #8318b6,
"white": #fff,
) !default;
$azlo-colors: (
"primary": #b519f1,
"primary-dark": #8318b6,
"white": #fff,
) !default;
// yooz
//$yooz-logo: (
//div.absolute {
// position: absolute;
// top: 0px;
// left: 0px;
// height: 35px;
//}
//) !default;
$yooz-colors: (
"supernova": #f8b636,
"carrot-orange": #eb9723,
"air-force-blue": #5f749a,
"chatham-blue": #2d546d,
"venetian-red": #d0021b,
"chateau-green": #28a745,
"matterhorn": #4c4c4c,
"dark-gray": #a8a8a8,
"gainsboro": #d8d8d8,
"link-water": #ced4da,
"very-light-grey": #ccc,
"whisper": #eee,
"white": #fff,
) !default;
//$yooz-logo: (
//div.absolute {
// position: absolute;
// top: 0px;
// left: 0px;
// height: 35px;
//}
//) !default;
$yooz-colors: (
"supernova": #f8b636,
"carrot-orange": #eb9723,
"air-force-blue": #5f749a,
"chatham-blue": #2d546d,
"venetian-red": #d0021b,
"chateau-green": #28a745,
"matterhorn": #4c4c4c,
"dark-gray": #a8a8a8,
"gainsboro": #d8d8d8,
"link-water": #ced4da,
"very-light-grey": #ccc,
"whisper": #eee,
"white": #fff,
) !default;
$themes: (
// default snapcheck theme
default: (
name: 'default',
// primary button color
primary: map_get($snapcheck-colors, "supernova"),
// default snapcheck theme
default: (
name: 'default',
// primary button color
primary: map_get($snapcheck-colors, "supernova"),
// secondary button color
secondary: map_get($snapcheck-colors, "gainsboro"),
secondary: map_get($snapcheck-colors, "gainsboro"),
// primary dark for hover effect etc.
primary-dark: map_get($snapcheck-colors, "carrot-orange"),
primary-dark: map_get($snapcheck-colors, "carrot-orange"),
// secondary dark for hover effect etc.
secondary-dark: map_get($snapcheck-colors, "dark-gray"),
secondary-dark: map_get($snapcheck-colors, "dark-gray"),
tertiary-dark: map_get($snapcheck-colors, "very-light-grey"),
quaternary-dark: map_get($snapcheck-colors, "whisper"),
primary-button-text: map_get($snapcheck-colors, "matterhorn"),
secondary-button-text: map_get($snapcheck-colors, "matterhorn"),
field-border-color: map_get($snapcheck-colors, "link-water"),
valid-field: map_get($snapcheck-colors, "chateau-green"),
header: map_get($snapcheck-colors, "matterhorn"),
white-color: map_get($snapcheck-colors, "white"),
// The following line was remporarily removed to address the CTA button color not being white 6/14/2019
//body-text-color: map_get($snapcheck-colors, "matterhorn"),
card-title-color: map_get($snapcheck-colors, "air-force-blue"),
link-text-color: map_get($snapcheck-colors, "air-force-blue"),
error-color: map_get($snapcheck-colors, "venetian-red"),
radio-button-color: map_get($snapcheck-colors, "supernova"),
),
azlo: (
// primary button color
primary: map_get($azlo-colors, "primary"),
// primary dark for hover effect etc.
primary-dark: map_get($azlo-colors, "primary-dark"),
white: map_get($azlo-colors, "white"),
),
darkly: (
name: 'darkly',
primary: #008cba,
),
//yooz: (
// // primary button color
// primary: map_get($yooz-colors, "primary"),
// // primary dark for hover effect etc.
// primary-dark: map_get($yooz-colors, "primary-dark"),
//),
);
azlo: (
// primary button color
primary: map_get($azlo-colors, "primary"),
// primary dark for hover effect etc.
primary-dark: map_get($azlo-colors, "primary-dark"),
white: map_get($azlo-colors, "white"),
),
darkly: (
name: 'darkly',
primary: #008cba,
),
//yooz: (
// // primary button color
// primary: map_get($yooz-colors, "primary"),
// // primary dark for hover effect etc.
// primary-dark: map_get($yooz-colors, "primary-dark"),
//),
);
/* Implementation of themes follows */
@mixin themify($themes) {
@each $theme, $map in $themes {
.theme-#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@mixin themify($themes) {
@each $theme, $map in $themes {
.theme-#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function theme-color($key: "primary") {
@return map-get($theme-map, $key);
}
@return map-get($theme-map, $key);
}
@function themed($key) {
@return map-get($theme-map, $key);
}
@return map-get($theme-map, $key);
}
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
* {
@include themify($themes) {
// custom theme to your needs. Add here
@if themed('name') == 'default' {
}
@if themed('name') == 'yeti' {
}
@if themed('name') == 'darkly' {
}
@if themed('name') == 'azlo' {
}
@if themed('name') == 'yooz' {
}
/* Global for all themes */
* {
color: themed("body-text-color");
}
@include themify($themes) {
// custom theme to your needs. Add here
@if themed('name') == 'default' {
}
@if themed('name') == 'yeti' {
}
@if themed('name') == 'darkly' {
}
@if themed('name') == 'azlo' {
}
@if themed('name') == 'yooz' {
}
/* Global for all themes */
* {
color: themed("body-text-color");
}
// Below will effect all themes
h1, h2, h3, h4, h5, h6 {
color: theme-color("header");
}
h1, h2, h3, h4, h5, h6 {
color: theme-color("header");
}
// Text links are assigned color here and are always underlined for accessibility best practices
a {
color: themed("link-text-color");
text-decoration: underline !important;
}
color: themed("link-text-color");
text-decoration: underline !important;
}
.input-group .input-group-append {
border: 0;
background: themed("white-color");
a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus {
background-color: themed("white-color") !important;
}
}
border: 0;
background: themed("white-color");
a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus {
background-color: themed("white-color") !important;
}
}
/* If using code examples: */
code {
color: themed("body-text-color");
}
code {
color: themed("body-text-color");
}
/* Action button colors */
.btn {
background-color: themed("primary") !important;
border-color: themed("primary");
color: themed("white-color");
}
.btn:hover {
background-color: themed("primary-dark") !important;
border-color: themed("primary-dark");
text-decoration: none;
}
background-color: themed("primary-dark") !important;
border-color: themed("primary-dark");
text-decoration: none;
}
.btn-secondary {
background-color: themed("secondary") !important;
border-color: themed("secondary") !important;
color: themed("white-color");
}
background-color: themed("secondary") !important;
border-color: themed("secondary") !important;
color: themed("white-color");
}
.btn-secondary:hover {
background-color: themed("secondary-dark") !important;
border-color: themed("secondary-dark") !important;
color: themed("white-color");
}
background-color: themed("secondary-dark") !important;
border-color: themed("secondary-dark") !important;
color: themed("white-color");
}
.btn-lg {
&:hover {
background-color: themed("white-color");
border-color: themed("primary");
}
}
&:hover {
background-color: themed("white-color");
border-color: themed("primary");
}
}
.btn-primary.disabled, .btn-primary:disabled {
background-color: themed("primary");
border-color: themed("primary");
}
background-color: themed("primary");
border-color: themed("primary");
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
background-color: themed("primary");
border-color: themed("primary");
}
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
background-color: themed("primary");
border-color: themed("primary");
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: none !important;
text-decoration: underline;
}
box-shadow: none !important;
text-decoration: underline;
}
.btn-secondary:focus, .btn-secondary.focus {
box-shadow: none !important;
text-decoration: underline;
}
box-shadow: none !important;
text-decoration: underline;
}
/* Text color assignment for the "card-title" header content */
.card-title {
color: themed("card-title-color");
}
color: themed("card-title-color");
}
/* Error popup attributes */
.error {
color: themed("white-color") !important;
background-color: themed("error-color");
}
color: themed("white-color") !important;
background-color: themed("error-color");
}
.form-control::placeholder {
color: themed("secondary-dark") !important;
}
color: themed("secondary-dark") !important;
}
.was-validated .form-control:valid, .form-control.is-valid {
border-color: themed("field-border-color") !important;
border-left-color: themed("valid-field") !important;
}
border-color: themed("field-border-color") !important;
border-left-color: themed("valid-field") !important;
}
.was-validated .form-control:invalid, .form-control.is-invalid, .form-control.is-invalidtextarea{
border-color: themed("field-border-color") !important;
border-left-color: themed("error-color") !important;
}
border-color: themed("field-border-color") !important;
border-left-color: themed("error-color") !important;
}
/* Form Field border color */
.form-control {
&:focus {
color: themed("body-text-color");
background-color: themed("white-color");
border-color: themed("field-border-color");
border-left-color: themed("primary");
}
}
.form-control:valid-feedback {
color: themed("valid-field"); /* CHECK TO MAKE SURE THIS IS WORKING */
background-color: themed("primary");
border-color: themed("field-border-color");
border-left-color: themed("valid-field");
}
color: themed("valid-field"); /* CHECK TO MAKE SURE THIS IS WORKING */
background-color: themed("primary");
border-color: themed("field-border-color");
border-left-color: themed("valid-field");
}
/* Create a custom radio button */
.snapcheck-checkmark {
background-color: themed("quaternary-dark");
}
.snapcheck-checkmark {
background-color: themed("quaternary-dark");
}
/* On mouse-over, add a grey background color */
.primary-radio-button:hover input ~ .snapcheck-checkmark {
background-color: themed("tertiary-dark");
}
.primary-radio-button:hover input ~ .snapcheck-checkmark {
background-color: themed("tertiary-dark");
}
/* When the radio button is checked, add the SnapCheck branded color background */
.primary-radio-button input:checked ~ .snapcheck-checkmark {
background-color: themed("primary");
}
.primary-radio-button input:checked ~ .snapcheck-checkmark {
background-color: themed("primary");
}
/* Style the indicator (dot/circle) */
.primary-radio-button .snapcheck-checkmark:after {
background: themed("white-color");
}
.primary-radio-button .snapcheck-checkmark:after {
background: themed("white-color");
}
/* Check Boxes */
/* Create a custom checkbox */
.checkmark {
background-color: themed("quaternary-dark");
}
.checkmark {
background-color: themed("quaternary-dark");
}
/* On mouse-over, add a grey background color */
.snapcheck-checkbox:hover input ~ .checkmark {
background-color: themed("tertiary-dark");
}
.snapcheck-checkbox:hover input ~ .checkmark {
background-color: themed("tertiary-dark");
}
/* When the checkbox is checked, add a supernova background */
.snapcheck-checkbox input:checked ~ .checkmark {
background-color: themed("primary");
}
.snapcheck-checkbox input:checked ~ .checkmark {
background-color: themed("primary");
}
}
}
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/* Action button attributes */
.btn {
font-weight: 600;
height: $btn-height;
letter-spacing: $btn-text-letter-space;
}
font-weight: 600;
height: $btn-height;
letter-spacing: $btn-text-letter-space;
}
.btn:hover {
text-decoration: none;
}
text-decoration: none;
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: none !important;
}
box-shadow: none !important;
}
.btn-secondary:focus, .btn-secondary.focus {
box-shadow: none !important;
}
box-shadow: none !important;
}
/* Default padding and margins on body text */
p {
padding-top: 0.25rem;
margin-bottom: 10em;
}
p {
padding-top: 0.25rem;
margin-bottom: 10em;
}
/* Different margin bottom on the headings */
h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em !important;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em !important;
}
ul li, ol li {
margin-bottom: 1em;
}
margin-bottom: 1em;
}
#typography {
font-size: 3rem;
}
font-size: 3rem;
}
.marquee {
font-size: 3rem;
font-weight: 400;
}
font-size: 3rem;
font-weight: 400;
}
.line-through {
text-decoration: line-through;
}
text-decoration: line-through;
}
//commented out the padding attributes for now. The were creating a bug in the onboarding process.
.alert-danger {
font-size: 1rem;
letter-spacing: 0.5px;
font-weight: 500;
//padding-top: .125rem;
//padding-bottom: .25rem;
//padding-left: .5rem;
//padding-right: .5rem;
}
.alert-danger {
font-size: 1rem;
letter-spacing: 0.5px;
font-weight: 500;
//padding-top: .125rem;
//padding-bottom: .25rem;
//padding-left: .5rem;
//padding-right: .5rem;
}
//commented out the padding attributes for now. The were creating a bug in the onboarding process.
.error {
font-size: 1rem;
letter-spacing: 0.5px;
font-weight: 500;
//padding-top: .125rem;
//padding-bottom: .25rem;
//padding-left: .5rem;
//padding-right: .5rem;
}
.error {
font-size: 1rem;
letter-spacing: 0.5px;
font-weight: 500;
//padding-top: .125rem;
//padding-bottom: .25rem;
//padding-left: .5rem;
//padding-right: .5rem;
}
.font-bold-600 {
font-weight: 600;
}
font-weight: 600;
}
/* Form field classes below */
/* Color Assignment Above */
.form-control::placeholder {
opacity: 1;
}
.form-control::placeholder {
opacity: 1;
}
/* Color Assignment Above */
.was-validated .form-control:valid, .form-control.is-valid {
box-shadow: none !important;
}
.was-validated .form-control:valid, .form-control.is-valid {
box-shadow: none !important;
}
/* Color Assignment Above */
.was-validated .form-control:invalid, .form-control.is-invalid, .form-control.is-invalidtextarea{
box-shadow: none !important;
}
.was-validated .form-control:invalid, .form-control.is-invalid, .form-control.is-invalidtextarea{
box-shadow: none !important;
}
form {
/* "Required" Form Field (with asterisk). Asterisk color and placement in field. Color Assignment STAYS HERE. */
/* "Required" Form Field (with asterisk). Asterisk color and placement in field. Color Assignment STAYS HERE. */
.required:after {
content: "*" !important;
padding-left: 3px;
color: #d0021b;
}
content: "*" !important;
padding-left: 3px;
color: #d0021b;
}
/* This controls the left expanding border width and color */
.form-control {
&:focus {
/* border-left-width: 0.125em; */
outline: 0;
box-shadow: none;
}
}
.form-control {
&:focus {
/* border-left-width: 0.125em; */
outline: 0;
box-shadow: none;
}
}
/* Valid Feedback Form Field with left border indicator. Color Assignment Above. */
.form-control:valid-feedback {
/* border-left-width: 0.125em; */
outline: 0;
box-shadow: none !important;
}
/* Control the dimensions and layout of the form fields and the content within */
.form-control {
font-size: 20px;
height: 56px;
letter-spacing: 0.1px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
vertical-align: middle;
padding-top: 24px;
}
}
.form-control:valid-feedback {
/* border-left-width: 0.125em; */
outline: 0;
box-shadow: none !important;
}
/* Control the dimensions and layout of the form fields and the content within */
.form-control {
font-size: 20px;
height: 56px;
letter-spacing: 0.1px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
vertical-align: middle;
padding-top: 24px;
}
}
/* Radio buttons */
.primary-radio-button {
display: initial;
position: relative;
padding-left: 35px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 1.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.primary-radio-button {
display: initial;
position: relative;
padding-left: 35px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 1.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.primary-radio-button input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.primary-radio-button input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button COLORS ABOVE */
.snapcheck-checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.364rem;
width: 1.364rem;
border-radius: 50%;
}
.snapcheck-checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.364rem;
width: 1.364rem;
border-radius: 50%;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.snapcheck-checkmark:after {
content: "";
position: absolute;
display: none;
}
.snapcheck-checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.primary-radio-button input:checked ~ .snapcheck-checkmark:after {
display: block;
}
.primary-radio-button input:checked ~ .snapcheck-checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) COLOR ABOVE */
.primary-radio-button .snapcheck-checkmark:after {
top: 33%;
left: 33%;
width: 0.4275rem;
height: 0.4275rem;
border-radius: 50%;
}
.primary-radio-button .snapcheck-checkmark:after {
top: 33%;
left: 33%;
width: 0.4275rem;
height: 0.4275rem;
border-radius: 50%;
}
/* Check Boxes */
.snapcheck-checkbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 1.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.snapcheck-checkbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 1.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.snapcheck-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.snapcheck-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox COLOR ABOVE */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.364rem;
width: 1.364rem;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.364rem;
width: 1.364rem;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.snapcheck-checkbox input:checked ~ .checkmark:after {
display: block;
}
.snapcheck-checkbox input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.snapcheck-checkbox .checkmark:after {
border: solid white;
border-width: 0 3px 3px 0;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.snapcheck-checkbox .checkmark:after {
border: solid white;
border-width: 0 3px 3px 0;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Buttons! */
.btn {
-webkit-appearance: button;
border: 0;
border-radius: 4px;
//box-shadow: 1px 2px 4px 0 rgba(76, 76, 76, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
font-size: 1.25rem !important;
outline: 0;
text-align: center;
text-transform: none;
//transition-property: box-shadow;
transition-timing-function: ease-in-out;
width: 47%;
transition-duration: 350ms;
transition-property: background-color;
transition-timing-function: ease-in-out;
}
.btn {
-webkit-appearance: button;
border: 0;
border-radius: 4px;
//box-shadow: 1px 2px 4px 0 rgba(76, 76, 76, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
font-size: 1.25rem !important;
outline: 0;
text-align: center;
text-transform: none;
//transition-property: box-shadow;
transition-timing-function: ease-in-out;
width: 47%;
transition-duration: 350ms;
transition-property: background-color;
transition-timing-function: ease-in-out;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalidtextarea {
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
padding-right: calc(1.5em + 0.75rem);
background-image: none !important;
background-repeat: no-repeat;
background-position: center right calc(1.375em + 0.1875rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}