// Utility Color Classes
.wpcf7 li { list-style-type: none !important; margin: 0 !important;}
.wpcf7 ul { padding: 0 !important; }
.wpcf7 {
li, ul, select, input, div, span, p { background: transparent; margin: 0;
padding: 0;
border: 0; font-size: inherit;
.wpcf7-form-control { background: none !important;; }
.wpcf7-form-control-wrap { background-image: none !important; }
.wpcf7-range { display: inline-block !important;}
}
.wpcf7-form ul:not(.browser-default)>li { margin-left: 0; margin-right: 0; }
}
//.success {
//
//}
// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
// No Text Select
.no-select {
user-select: none;
}
$materialize-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
$red: (
"base": #F44336,
"lighten-5": #FFEBEE,
"lighten-4": #FFCDD2,
"lighten-3": #EF9A9A,
"lighten-2": #E57373,
"lighten-1": #EF5350,
"darken-1": #E53935,
"darken-2": #D32F2F,
"darken-3": #C62828,
"darken-4": #B71C1C,
"accent-1": #FF8A80,
"accent-2": #FF5252,
"accent-3": #FF1744,
"accent-4": #D50000
);
$pink: (
"base": #e91e63,
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"lighten-3": #f48fb1,
"lighten-2": #f06292,
"lighten-1": #ec407a,
"darken-1": #d81b60,
"darken-2": #c2185b,
"darken-3": #ad1457,
"darken-4": #880e4f,
"accent-1": #ff80ab,
"accent-2": #ff4081,
"accent-3": #f50057,
"accent-4": #c51162
);
$purple: (
"base": #9c27b0,
"lighten-5": #f3e5f5,
"lighten-4": #e1bee7,
"lighten-3": #ce93d8,
"lighten-2": #ba68c8,
"lighten-1": #ab47bc,
"darken-1": #8e24aa,
"darken-2": #7b1fa2,
"darken-3": #6a1b9a,
"darken-4": #4a148c,
"accent-1": #ea80fc,
"accent-2": #e040fb,
"accent-3": #d500f9,
"accent-4": #aa00ff
);
$deep-purple: (
"base": #673ab7,
"lighten-5": #ede7f6,
"lighten-4": #d1c4e9,
"lighten-3": #b39ddb,
"lighten-2": #9575cd,
"lighten-1": #7e57c2,
"darken-1": #5e35b1,
"darken-2": #512da8,
"darken-3": #4527a0,
"darken-4": #311b92,
"accent-1": #b388ff,
"accent-2": #7c4dff,
"accent-3": #651fff,
"accent-4": #6200ea
);
$indigo: (
"base": #3f51b5,
"lighten-5": #e8eaf6,
"lighten-4": #c5cae9,
"lighten-3": #9fa8da,
"lighten-2": #7986cb,
"lighten-1": #5c6bc0,
"darken-1": #3949ab,
"darken-2": #303f9f,
"darken-3": #283593,
"darken-4": #1a237e,
"accent-1": #8c9eff,
"accent-2": #536dfe,
"accent-3": #3d5afe,
"accent-4": #304ffe
);
$blue: (
"base": #2196F3,
"lighten-5": #E3F2FD,
"lighten-4": #BBDEFB,
"lighten-3": #90CAF9,
"lighten-2": #64B5F6,
"lighten-1": #42A5F5,
"darken-1": #1E88E5,
"darken-2": #1976D2,
"darken-3": #1565C0,
"darken-4": #0D47A1,
"accent-1": #82B1FF,
"accent-2": #448AFF,
"accent-3": #2979FF,
"accent-4": #2962FF
);
$light-blue: (
"base": #03a9f4,
"lighten-5": #e1f5fe,
"lighten-4": #b3e5fc,
"lighten-3": #81d4fa,
"lighten-2": #4fc3f7,
"lighten-1": #29b6f6,
"darken-1": #039be5,
"darken-2": #0288d1,
"darken-3": #0277bd,
"darken-4": #01579b,
"accent-1": #80d8ff,
"accent-2": #40c4ff,
"accent-3": #00b0ff,
"accent-4": #0091ea
);
$cyan: (
"base": #00bcd4,
"lighten-5": #e0f7fa,
"lighten-4": #b2ebf2,
"lighten-3": #80deea,
"lighten-2": #4dd0e1,
"lighten-1": #26c6da,
"darken-1": #00acc1,
"darken-2": #0097a7,
"darken-3": #00838f,
"darken-4": #006064,
"accent-1": #84ffff,
"accent-2": #18ffff,
"accent-3": #00e5ff,
"accent-4": #00b8d4
);
$teal: (
"base": #009688,
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
$green: (
"base": #4CAF50,
"lighten-5": #E8F5E9,
"lighten-4": #C8E6C9,
"lighten-3": #A5D6A7,
"lighten-2": #81C784,
"lighten-1": #66BB6A,
"darken-1": #43A047,
"darken-2": #388E3C,
"darken-3": #2E7D32,
"darken-4": #1B5E20,
"accent-1": #B9F6CA,
"accent-2": #69F0AE,
"accent-3": #00E676,
"accent-4": #00C853
);
$light-green: (
"base": #8bc34a,
"lighten-5": #f1f8e9,
"lighten-4": #dcedc8,
"lighten-3": #c5e1a5,
"lighten-2": #aed581,
"lighten-1": #9ccc65,
"darken-1": #7cb342,
"darken-2": #689f38,
"darken-3": #558b2f,
"darken-4": #33691e,
"accent-1": #ccff90,
"accent-2": #b2ff59,
"accent-3": #76ff03,
"accent-4": #64dd17
);
$lime: (
"base": #cddc39,
"lighten-5": #f9fbe7,
"lighten-4": #f0f4c3,
"lighten-3": #e6ee9c,
"lighten-2": #dce775,
"lighten-1": #d4e157,
"darken-1": #c0ca33,
"darken-2": #afb42b,
"darken-3": #9e9d24,
"darken-4": #827717,
"accent-1": #f4ff81,
"accent-2": #eeff41,
"accent-3": #c6ff00,
"accent-4": #aeea00
);
$yellow: (
"base": #ffeb3b,
"lighten-5": #fffde7,
"lighten-4": #fff9c4,
"lighten-3": #fff59d,
"lighten-2": #fff176,
"lighten-1": #ffee58,
"darken-1": #fdd835,
"darken-2": #fbc02d,
"darken-3": #f9a825,
"darken-4": #f57f17,
"accent-1": #ffff8d,
"accent-2": #ffff00,
"accent-3": #ffea00,
"accent-4": #ffd600
);
$amber: (
"base": #ffc107,
"lighten-5": #fff8e1,
"lighten-4": #ffecb3,
"lighten-3": #ffe082,
"lighten-2": #ffd54f,
"lighten-1": #ffca28,
"darken-1": #ffb300,
"darken-2": #ffa000,
"darken-3": #ff8f00,
"darken-4": #ff6f00,
"accent-1": #ffe57f,
"accent-2": #ffd740,
"accent-3": #ffc400,
"accent-4": #ffab00
);
$orange: (
"base": #ff9800,
"lighten-5": #fff3e0,
"lighten-4": #ffe0b2,
"lighten-3": #ffcc80,
"lighten-2": #ffb74d,
"lighten-1": #ffa726,
"darken-1": #fb8c00,
"darken-2": #f57c00,
"darken-3": #ef6c00,
"darken-4": #e65100,
"accent-1": #ffd180,
"accent-2": #ffab40,
"accent-3": #ff9100,
"accent-4": #ff6d00
);
$deep-orange: (
"base": #ff5722,
"lighten-5": #fbe9e7,
"lighten-4": #ffccbc,
"lighten-3": #ffab91,
"lighten-2": #ff8a65,
"lighten-1": #ff7043,
"darken-1": #f4511e,
"darken-2": #e64a19,
"darken-3": #d84315,
"darken-4": #bf360c,
"accent-1": #ff9e80,
"accent-2": #ff6e40,
"accent-3": #ff3d00,
"accent-4": #dd2c00
);
$brown: (
"base": #795548,
"lighten-5": #efebe9,
"lighten-4": #d7ccc8,
"lighten-3": #bcaaa4,
"lighten-2": #a1887f,
"lighten-1": #8d6e63,
"darken-1": #6d4c41,
"darken-2": #5d4037,
"darken-3": #4e342e,
"darken-4": #3e2723
);
$blue-grey: (
"base": #607d8b,
"lighten-5": #eceff1,
"lighten-4": #cfd8dc,
"lighten-3": #b0bec5,
"lighten-2": #90a4ae,
"lighten-1": #78909c,
"darken-1": #546e7a,
"darken-2": #455a64,
"darken-3": #37474f,
"darken-4": #263238
);
$grey: (
"base": #9e9e9e,
"lighten-5": #fafafa,
"lighten-4": #f5f5f5,
"lighten-3": #eeeeee,
"lighten-2": #e0e0e0,
"lighten-1": #bdbdbd,
"darken-1": #757575,
"darken-2": #616161,
"darken-3": #424242,
"darken-4": #212121
);
$shades: (
"black": #000000,
"white": #FFFFFF,
"transparent": transparent
);
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
) !default;
// Color Classes
@each $color_name, $color in $colors {
@each $color_type, $color_value in $color {
@if $color_type == "base" {
.#{$color_name} {
background-color: $color_value !important;
}
.#{$color_name}-text {
color: $color_value !important;
}
}
@else if $color_name != "shades" {
.#{$color_name}.#{$color_type} {
background-color: $color_value !important;
}
.#{$color_name}-text.text-#{$color_type} {
color: $color_value !important;
}
}
}
}
// Shade classes
@each $color, $color_value in $shades {
.#{$color} {
background-color: $color_value !important;
}
.#{$color}-text {
color: $color_value !important;
}
}
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@function color($color, $type) {
@if map-has-key($colors, $color) {
$curr_color: map-get($colors, $color);
@if map-has-key($curr_color, $type) {
@return map-get($curr_color, $type);
}
}
@warn "Unknown `#{$color}` - `#{$type}` in $colors.";
@return null;
}
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
// 2. Badges
// ==========================================================================
$badge-bg-color: $secondary-color !default;
$badge-height: 22px !default;
// 3. Buttons
// ==========================================================================
// Shared styles
$button-border: none !default;
$button-background-focus: lighten($secondary-color, 4%) !default;
$button-font-size: 1rem !default;
$button-icon-font-size: 1.3rem !default;
$button-height: 36px !default;
$button-padding: 0 2rem !default;
$button-radius: 2px !default;
// Disabled styles
$button-disabled-background: #DFDFDF !default;
$button-disabled-color: #9F9F9F !default;
// Raised buttons
$button-raised-background: $secondary-color !default;
$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
$button-raised-color: #fff !default;
// Large buttons
$button-large-icon-font-size: 1.6rem !default;
$button-large-height: $button-height * 1.5 !default;
// Flat buttons
$button-flat-color: #343434 !default;
$button-flat-disabled-color: lighten(#999, 10%) !default;
// Floating buttons
$button-floating-background: $secondary-color !default;
$button-floating-background-hover: $button-floating-background !default;
$button-floating-color: #fff !default;
$button-floating-size: 40px !default;
$button-floating-large-size: 56px !default;
$button-floating-radius: 50% !default;
// 4. Cards
// ==========================================================================
$card-padding: 24px !default;
$card-bg-color: #fff !default;
$card-link-color: color("orange", "accent-2") !default;
$card-link-color-light: lighten($card-link-color, 20%) !default;
// 5. Carousel
// ==========================================================================
$carousel-height: 400px !default;
$carousel-item-height: $carousel-height / 2 !default;
$carousel-item-width: $carousel-item-height !default;
// 6. Collapsible
// ==========================================================================
$collapsible-height: 3rem !default;
$collapsible-line-height: $collapsible-height !default;
$collapsible-header-color: #fff !default;
$collapsible-border-color: #ddd !default;
// 7. Chips
// ==========================================================================
$chip-bg-color: #e4e4e4 !default;
$chip-border-color: #9e9e9e !default;
$chip-selected-color: #26a69a !default;
$chip-margin: 5px !default;
// 8. Date + Time Picker
// ==========================================================================
$datepicker-display-font-size: 2.8rem;
$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
$datepicker-weekday-bg: darken($secondary-color, 7%) !default;
$datepicker-date-bg: $secondary-color !default;
$datepicker-year: rgba(255, 255, 255, .7) !default;
$datepicker-focus: rgba(0,0,0, .05) !default;
$datepicker-selected: $secondary-color !default;
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
$timepicker-clock-plate-bg: #eee;
// 9. Dropdown
// ==========================================================================
$dropdown-bg-color: #fff !default;
$dropdown-hover-bg-color: #eee !default;
$dropdown-color: $secondary-color !default;
$dropdown-item-height: 50px !default;
// 11. Forms
// ==========================================================================
// Text Inputs + Textarea
$input-height: 3rem !default;
$input-border-color: color("grey", "base") !default;
$input-border: 1px solid $input-border-color !default;
$input-background: #fff !default;
$input-error-color: $error-color !default;
$input-success-color: $success-color !default;
$input-focus-color: $secondary-color !default;
$input-font-size: 1rem !default;
$input-margin-bottom: 20px;
$input-margin: 0 0 $input-margin-bottom 0 !default;
$input-padding: 0 !default;
$input-transition: all .3s !default;
$label-font-size: .8rem !default;
$input-disabled-color: rgba(0,0,0, .42) !default;
$input-disabled-solid-color: #949494 !default;
$input-disabled-border: 1px dotted $input-disabled-color !default;
$input-invalid-border: 1px solid $input-error-color !default;
$placeholder-text-color: lighten($input-border-color, 20%) !default;
// Radio Buttons
$radio-fill-color: $secondary-color !default;
$radio-empty-color: #5a5a5a !default;
$radio-border: 2px solid $radio-fill-color !default;
// Range
$range-height: 14px !default;
$range-width: 14px !default;
$track-height: 3px !default;
// Select
$select-border: 1px solid #f2f2f2 !default;
$select-background: rgba(255, 255, 255, 0.90) !default;
$select-focus: 1px solid lighten($secondary-color, 47%) !default;
$select-option-hover: rgba(0,0,0,.06) !default;
$select-option-focus: rgba(0,0,0,.03) !default;
$select-padding: 5px !default;
$select-radius: 2px !default;
$select-disabled-color: rgba(0,0,0,.3) !default;
// Switches
$switch-bg-color: $secondary-color !default;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
$switch-unchecked-bg: #F1F1F1 !default;
$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
$switch-radius: 15px !default;
// 12. Global
// ==========================================================================
// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
// 13. Grid
// ==========================================================================
$num-cols: 12 !default;
$gutter-width: 1.5rem !default;
$element-top-margin: $gutter-width/3 !default;
$element-bottom-margin: ($gutter-width*2)/3 !default;
// 14. Navigation Bar
// ==========================================================================
$navbar-height: 64px !default;
$navbar-line-height: $navbar-height !default;
$navbar-height-mobile: 56px !default;
$navbar-line-height-mobile: $navbar-height-mobile !default;
$navbar-font-size: 1rem !default;
$navbar-font-color: #fff !default;
$navbar-brand-font-size: 2.1rem !default;
// 15. Side Navigation
// ==========================================================================
$sidenav-font-size: 14px !default;
$sidenav-font-color: rgba(0,0,0,.87) !default;
$sidenav-bg-color: #fff !default;
$sidenav-padding: 16px !default;
$sidenav-item-height: 48px !default;
$sidenav-line-height: $sidenav-item-height !default;
// 16. Photo Slider
// ==========================================================================
$slider-bg-color: color('grey', 'base') !default;
$slider-bg-color-light: color('grey', 'lighten-2') !default;
$slider-indicator-color: color('green', 'base') !default;
// 17. Spinners | Loaders
// ==========================================================================
$spinner-default-color: $secondary-color !default;
// 18. Tabs
// ==========================================================================
$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;
// 19. Tables
// ==========================================================================
$table-border-color: #d0d0d0 !default;
$table-striped-color: #f2f2f2 !default;
// 20. Toasts
// ==========================================================================
$toast-height: 48px !default;
$toast-color: #323232 !default;
$toast-text-color: #fff !default;
$toast-action-color: #eeff41;
// 21. Typography
// ==========================================================================
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1rem !default;
// 22. Footer
// ==========================================================================
$footer-font-color: #fff !default;
$footer-bg-color: $primary-color !default;
$footer-copyright-font-color: rgba(255,255,255,.8) !default;
$footer-copyright-bg-color: rgba(51,51,51,.08) !default;
// 23. Flow Text
// ==========================================================================
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;
// 24. Collections
// ==========================================================================
$collection-border-color: #e0e0e0 !default;
$collection-bg-color: #fff !default;
$collection-active-bg-color: $secondary-color !default;
$collection-active-color: lighten($secondary-color, 55%) !default;
$collection-hover-bg-color: #ddd !default;
$collection-link-color: $secondary-color !default;
$collection-line-height: 1.5rem !default;
// 25. Progress Bar
// ==========================================================================
$progress-bar-color: $secondary-color !default;
.wpcf7-form {
/* ==========================================================================
$BASE-PICKER
========================================================================== */
/**
* Note: the root picker element should *NOT* be styled more than what's here.
*/
.picker {
font-size: 16px;
text-align: left;
line-height: 1.2;
color: #000000;
position: absolute;
z-index: 999999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
/**
* The picker input element.
*/
.picker__input {
cursor: default;
}
/**
* When the picker is opened, the input element is "activated".
*/
.picker__input.picker__input--active {
border-color: #0089ec;
}
/**
* The holder is the only "scrollable" top-level container element.
*/
.picker__holder {
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*!
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.io/pickadate.js
*/
/**
* Note: the root picker element should *NOT* be styled more than what's here.
*/
/**
* Make the holder and frame fullscreen.
*/
.picker__holder,
.picker__frame {
bottom: 0;
left: 0;
right: 0;
top: 100%;
}
/**
* The holder should overlay the entire screen.
*/
.picker__holder {
position: fixed;
-webkit-transition: background 0.15s ease-out, top 0s 0.15s;
-moz-transition: background 0.15s ease-out, top 0s 0.15s;
transition: background 0.15s ease-out, top 0s 0.15s;
-webkit-backface-visibility: hidden;
}
/**
* The frame that bounds the box contents of the picker.
*/
.picker__frame {
position: absolute;
margin: 0 auto;
min-width: 256px;
// picker width
width: 300px;
max-height: 350px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
@media (min-height: 28.875em) {
.picker__frame {
overflow: visible;
top: auto;
bottom: -100%;
max-height: 80%;
}
}
@media (min-height: 40.125em) {
.picker__frame {
margin-bottom: 7.5%;
}
}
/**
* The wrapper sets the stage to vertically align the box contents.
*/
.picker__wrap {
display: table;
width: 100%;
height: 100%;
}
@media (min-height: 28.875em) {
.picker__wrap {
display: block;
}
}
/**
* The box contains all the picker contents.
*/
.picker__box {
background: #ffffff;
display: table-cell;
vertical-align: middle;
}
//@media (min-height: 26.5em) {
// .picker__box {
//// font-size: 1.25em;
// }
//}
@media (min-height: 28.875em) {
.picker__box {
display: block;
// picker header font-size
// font-size: 1rem;
border: 1px solid #777777;
border-top-color: #898989;
border-bottom-width: 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
-webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
}
}
//@media (min-height: 40.125em) {
// .picker__box {
// font-size: 1.1rem;
// border-bottom-width: 1px;
// -webkit-border-radius: 5px;
// -moz-border-radius: 5px;
// border-radius: 5px;
// }
//}
/**
* When the picker opens...
*/
.picker--opened .picker__holder {
top: 0;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
zoom: 1;
background: rgba(0, 0, 0, 0.32);
-webkit-transition: background 0.15s ease-out;
-moz-transition: background 0.15s ease-out;
transition: background 0.15s ease-out;
}
.picker--opened .picker__frame {
top: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
@media (min-height: 35.875em) {
.picker--opened .picker__frame {
top: 10%;
bottom: auto;
}
}
/**
* For `large` screens, transform into an inline picker.
*/
/* ==========================================================================
CUSTOM MATERIALIZE STYLES
========================================================================== */
.picker__input.picker__input--active {
border-color: color("blue", "lighten-5");
}
.picker__frame {
margin: 0 auto;
max-width: 325px;
}
@media (min-height: 38.875em) {
.picker--opened .picker__frame {
top: 10%;
bottom: auto;
}
}
@media only screen and (min-width: 601px) {
.picker__box {
display:flex;
}
.picker__frame {
width: 80%;
max-width:600px;
}
}
/* ==========================================================================
$BASE-DATE-PICKER
========================================================================== */
/**
* The picker box.
*/
.picker__box {
padding: 0;
border-radius: 2px;
overflow: hidden;
}
/**
* The header containing the month and year stuff.
*/
.picker__header {
text-align: center;
position: relative;
margin-top: .75em;
}
/**
* The month and year labels.
*/
.picker__month,
.picker__year {
// font-weight: 500;
display: inline-block;
margin-left: .25em;
margin-right: .25em;
}
/**
* The month and year selectors.
*/
.picker__select--month,
.picker__select--year {
height: 2em;
padding: 0;
margin-left: .25em;
margin-right: .25em;
}
// Modified
.picker__select--month.browser-default {
display: inline;
background-color: #FFFFFF;
width: 40%;
}
.picker__select--year.browser-default {
display: inline;
background-color: #FFFFFF;
width: 26%;
}
.picker__select--month:focus,
.picker__select--year:focus {
border-color: $datepicker-focus;
}
/**
* The month navigation buttons.
*/
.picker__nav--prev,
.picker__nav--next {
position: absolute;
padding: .5em 1.25em;
width: 1em;
height: 1em;
box-sizing: content-box;
top: -0.25em;
}
//@media (min-width: 24.5em) {
// .picker__nav--prev,
// .picker__nav--next {
// top: -0.33em;
// }
//}
.picker__nav--prev {
left: -1em;
padding-right: 1.25em;
}
//@media (min-width: 24.5em) {
// .picker__nav--prev {
// padding-right: 1.5em;
// }
//}
.picker__nav--next {
right: -1em;
padding-left: 1.25em;
}
//@media (min-width: 24.5em) {
// .picker__nav--next {
// padding-left: 1.5em;
// }
//}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f5f5f5;
border-left-color: #f5f5f5;
}
/**
* The calendar table of dates
*/
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: 1rem !important;
width: 100%;
margin-top: .75em;
margin-bottom: .5em;
}
.picker__table th, .picker__table td {
text-align: center;
}
.picker__table td {
margin: 0;
padding: 0;
}
/**
* The weekday labels
*/
.picker__weekday {
width: 14.285714286%;
font-size: .75em;
padding-bottom: .25em;
color: #999999;
font-weight: 500;
/* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
.picker__weekday {
padding-bottom: .5em;
}
}
/**
* The days on the calendar
*/
.picker__day--today {
position: relative;
color: #595959;
letter-spacing: -.3;
padding: .75rem 0;
font-weight: 400;
border: 1px solid transparent;
}
//.picker__day--today:before {
// content: " ";
// position: absolute;
// top: 2px;
// right: 2px;
// width: 0;
// height: 0;
// border-top: 0.5em solid #0059bc;
// border-left: .5em solid transparent;
//}
.picker__day--disabled:before {
border-top-color: #aaaaaa;
}
.picker__day--infocus:hover{
cursor: pointer;
color: #000;
font-weight: 500;
}
.picker__day--outfocus {
display: none;
padding: .75rem 0;
color: #fff;
}
.picker__day--outfocus:hover {
cursor: pointer;
color: #dddddd;
// background: #b1dcfb;
font-weight: 500;
}
.picker__day--highlighted {
// border-color: #0089ec;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
cursor: pointer;
// color: #000000;
// background: #b1dcfb;
// font-weight: 500;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
// Circle background
border-radius: 50%;
transform: scale(.75);
background: #0089ec;
color: #ffffff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
background: #bbbbbb;
}
/**
* The footer containing the "today", "clear", and "close" buttons.
*/
.picker__footer {
text-align: right;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
border: 1px solid #ffffff;
background: #ffffff;
font-size: .8em;
padding: .66em 0;
font-weight: bold;
width: 33%;
display: inline-block;
vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
background: #b1dcfb;
border-color: $datepicker-focus;
outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
position: relative;
display: inline-block;
height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
content: " ";
margin-right: .45em;
}
.picker__button--today:before {
top: -0.05em;
width: 0;
border-top: 0.66em solid #0059bc;
border-left: .66em solid transparent;
}
.picker__button--clear:before {
top: -0.25em;
width: .66em;
border-top: 3px solid #ee2200;
}
.picker__button--close:before {
content: "\D7";
top: -0.1em;
vertical-align: top;
font-size: 1.1em;
margin-right: .35em;
color: #777777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__button--today[disabled]:before {
border-top-color: #aaaaaa;
}
/* ==========================================================================
CUSTOM MATERIALIZE STYLES
========================================================================== */
/*.picker__box {
border-radius: 2px;
overflow: hidden;
}*/
.picker__date-display {
text-align: left;
background-color: $datepicker-date-bg;
color: #fff;
padding: 18px;
font-weight: 300;
}
@media only screen and (min-width: 601px) {
.picker__date-display {
flex:1;
}
.picker__weekday-display {
display:block;
}
.picker__container__wrapper {
flex:2
}
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
cursor: pointer;
color: #000000;
background: $datepicker-selected-outfocus;
}
.picker__weekday-display {
font-weight: 500;
font-size: $datepicker-display-font-size;
margin-right: 5px;
margin-top: 4px;
}
.picker__month-display {
//text-transform: uppercase;
font-size: $datepicker-display-font-size;
font-weight: 500;
}
.picker__day-display {
font-size: $datepicker-display-font-size;
font-weight: 500;
margin-right: 5px;
}
.picker__year-display {
font-size: 1.5rem;
font-weight: 500;
color: $datepicker-year;
}
/*.picker__box {
padding: 0;
}*/
.picker__calendar-container {
padding: 0 1rem;
thead {
border: none;
}
}
// Calendar
.picker__table {
margin-top: 0;
margin-bottom: .5em;
}
.picker__day--infocus {
color: $datepicker-weekday-color;
letter-spacing: -.3px;
padding: 0.75rem 0;
font-weight: 400;
border: 1px solid transparent !important;
line-height: 1 !important;
font-size: 15px;
}
@media only screen and (min-width: 601px) {
.picker__day--infocus {
padding: 1.1rem 0;
}
}
//Today style
.picker__day.picker__day--today {
color: $datepicker-selected;
}
.picker__day.picker__day--today.picker__day--selected {
color: #fff;
}
// Table Header
.picker__weekday {
font-size: .9rem;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
// Circle background
border-radius: 50%;
transform: scale(.9);
background-color: $datepicker-selected;
&.picker__day--outfocus {
background-color: $datepicker-selected-outfocus;
}
color: #ffffff;
}
.picker__footer {
text-align: right;
padding: 5px 10px;
}
// Materialize modified
.picker__close, .picker__today, .picker__clear {
font-size: 1.1rem;
padding: 0 1rem;
color: $datepicker-selected;
}
.picker__clear {
color:#f44336 !important;
float:left;
}
//month nav buttons
.picker__nav--prev:before,
.picker__nav--next:before {
content: " ";
border-top: .5em solid transparent;
border-bottom: .5em solid transparent;
border-right: 0.75em solid #676767;
width: 0;
height: 0;
display: block;
margin: 0 auto;
}
.picker__nav--next:before {
border-right: 0;
border-left: 0.75em solid #676767;
}
button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
background-color: rgba(150,150,150, 0.25);
}
/* This is needed for some mobile phones to display the Google Icon font properly */
.material-icons {
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
}
/* Checkboxes
========================================================================== */
/* CUSTOM CSS CHECKBOXES */
form p {
margin-bottom: 10px;
text-align: left;
}
form p:last-child {
margin-bottom: 0;
}
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
// Checkbox Styles
[type="checkbox"] {
// Text Label Style
+ label {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
user-select: none;
}
/* checkbox aspect */
+ label:before,
&:not(.filled-in) + label:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid $radio-empty-color;
border-radius: 1px;
margin-top: 2px;
transition: .2s;
}
&:not(.filled-in) + label:after {
border: 0;
transform: scale(0);
}
&:not(:checked):disabled + label:before {
border: none;
background-color: $input-disabled-color;
}
// Focused styles
&.tabbed:focus + label:after {
transform: scale(1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
background-color: rgba(0,0,0,.1);
}
}
[type="checkbox"]:checked {
+ label:before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: $radio-border;
border-bottom: $radio-border;
transform: rotate(40deg);
backface-visibility: hidden;
transform-origin: 100% 100%;
}
&:disabled + label:before {
border-right: 2px solid $input-disabled-color;
border-bottom: 2px solid $input-disabled-color;
}
}
/* Indeterminate checkbox */
[type="checkbox"]:indeterminate {
+label:before {
top: -11px;
left: -12px;
width: 10px;
height: 22px;
border-top: none;
border-left: none;
border-right: $radio-border;
border-bottom: none;
transform: rotate(90deg);
backface-visibility: hidden;
transform-origin: 100% 100%;
}
// Disabled indeterminate
&:disabled + label:before {
border-right: 2px solid $input-disabled-color;
background-color: transparent;
}
}
// Filled in Style
[type="checkbox"].filled-in {
// General
+ label:after {
border-radius: 2px;
}
+ label:before,
+ label:after {
content: '';
left: 0;
position: absolute;
/* .1s delay is for check animation */
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1;
}
// Unchecked style
&:not(:checked) + label:before {
width: 0;
height: 0;
border: 3px solid transparent;
left: 6px;
top: 10px;
transform: rotateZ(37deg);
transform-origin: 100% 100%;
}
&:not(:checked) + label:after {
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid $radio-empty-color;
top: 0px;
z-index: 0;
}
// Checked style
&:checked {
+ label:before {
top: 0;
left: 1px;
width: 8px;
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid $input-background;
border-bottom: 2px solid $input-background;
transform: rotateZ(37deg);
transform-origin: 100% 100%;
}
+ label:after {
top: 0;
width: 20px;
height: 20px;
border: 2px solid $secondary-color;
background-color: $secondary-color;
z-index: 0;
}
}
// Focused styles
&.tabbed:focus + label:after {
border-radius: 2px;
border-color: $radio-empty-color;
background-color: rgba(0,0,0,.1);
}
&.tabbed:checked:focus + label:after {
border-radius: 2px;
background-color: $secondary-color;
border-color: $secondary-color;
}
// Disabled style
&:disabled:not(:checked) + label:before {
background-color: transparent;
border: 2px solid transparent;
}
&:disabled:not(:checked) + label:after {
border-color: transparent;
background-color: $input-disabled-solid-color;
}
&:disabled:checked + label:before {
background-color: transparent;
}
&:disabled:checked + label:after {
background-color: $input-disabled-solid-color;
border-color: $input-disabled-solid-color;
}
}
/* File Input
========================================================================== */
.file-field {
position: relative;
.file-path-wrapper {
overflow: hidden;
padding-left: 10px;
}
input.file-path { width: 100%; }
.btn {
float: left;
height: $input-height;
line-height: $input-height;
background-image: none;
}
span {
cursor: pointer;
color: white;
}
input[type=file] {
// Needed to override webkit button
&::-webkit-file-upload-button {
display: none;
}
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
}
// Remove Focus Boxes
select:focus {
outline: $select-focus;
}
button:focus {
outline: none;
background-color: $button-background-focus;
}
label {
font-size: $label-font-size;
color: $input-border-color;
}
/* Text Inputs + Textarea
========================================================================== */
/* Style Placeholders */
::placeholder {
color: $placeholder-text-color;
}
/* Text inputs */
input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
// General Styles
background-color: transparent;
border: none;
border-bottom: $input-border;
border-radius: 0;
outline: none;
height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
padding: $input-padding;
box-shadow: none;
box-sizing: content-box;
transition: $input-transition;
// Disabled input style
&:disabled,
&[readonly="readonly"] {
color: $input-disabled-color;
border-bottom: $input-disabled-border;
}
// Disabled label style
&:disabled+label,
&[readonly="readonly"]+label {
color: $input-disabled-color;
}
// Focused input style
&:focus:not([readonly]) {
border-bottom: 1px solid $input-focus-color;
box-shadow: 0 1px 0 0 $input-focus-color;
}
// Focused label style
&:focus:not([readonly])+label {
color: $input-focus-color;
}
// Valid Input Style
&.valid,
&:focus.valid {
@extend %valid-input-style;
}
// Custom Success Message
&.valid + label:after,
&:focus.valid + label:after {
@extend %custom-success-message;
}
// Invalid Input Style
&.invalid,
&:focus.invalid {
@extend %invalid-input-style;
}
// Custom Error message
&.invalid + label:after,
&:focus.invalid + label:after {
@extend %custom-error-message;
}
// Full width label when using validate for error messages
&.validate + label {
width: 100%;
}
// Form Message Shared Styles
& + label:after {
}
// TODO: Remove once input fields are reworked to support validation messages better
&.invalid + label:after,
&.valid + label:after{
display: none;
}
&.invalid + label.active:after,
&.valid + label.active:after{
display: block;
}
}
/* Validation Sass Placeholders */
%valid-input-style {
border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;
}
%invalid-input-style {
border-bottom: $input-invalid-border;
box-shadow: 0 1px 0 0 $input-error-color;
}
%custom-success-message {
content: attr(data-success);
color: $input-success-color;
opacity: 1;
transform: translateY(9px);
}
%custom-error-message {
content: attr(data-error);
color: $input-error-color;
opacity: 1;
transform: translateY(9px);
}
%input-after-style {
display: block;
content: "";
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out;
}
// Styling for input field wrapper
.input-field {
// Inline styles
&.inline {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
input,
.select-dropdownmaterialmaterial {
margin-bottom: 1rem;
}
}
// Gutter spacing
&.col {
label {
left: $gutter-width / 2;
}
.prefix ~ label,
.prefix ~ .validate ~ label {
width: calc(100% - 3rem - #{$gutter-width});
}
}
position: relative;
margin: 0 !important;
label {
color: $input-border-color;
position: absolute;
top: 0;
left: 0;
height: 100%;
font-size: 1rem;
cursor: text;
transition: transform .2s ease-out;
transform-origin: 0% 100%;
text-align: initial;
transform: translateY(12px);
pointer-events: none;
&:not(.label-icon).active {
transform: translateY(-14px) scale(.8);
transform-origin: 0 0;
}
}
// Prefix Icons
.prefix {
position: absolute;
width: $input-height;
font-size: 2rem;
transition: color .2s;
font-style: normal !important;
&.active { color: $input-focus-color; }
}
.prefix ~ input,
.prefix ~ textarea,
.prefix ~ label,
.prefix ~ .validate ~ label,
.prefix ~ .autocomplete-content {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.prefix ~ label { margin-left: 3rem; }
@media #{$medium-and-down} {
.prefix ~ input {
width: 86%;
width: calc(100% - 3rem);
}
}
@media #{$small-and-down} {
.prefix ~ input {
width: 80%;
width: calc(100% - 3rem);
}
}
}
/* Search Field */
.input-field input[type=search] {
display: block;
line-height: inherit;
.nav-wrapper & {
height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem);
border: 0;
box-shadow: none;
}
&:focus {
background-color: $input-background;
border: 0;
box-shadow: none;
color: #444;
& + label i,
& ~ .mdi-navigation-close,
& ~ .material-icons {
color: #444;
}
}
& + label {
left: 1rem;
}
& ~ .mdi-navigation-close,
& ~ .material-icons {
position: absolute;
top: 0;
right: 1rem;
color: transparent;
cursor: pointer;
font-size: 2rem;
transition: .3s color;
}
}
/* Textarea */
// Default textarea
textarea {
width: 100%;
height: $input-height;
background-color: transparent;
&.materialize-textarea {
// Fixes validation messages for dynamic textareas
&.validate + label {
&::after {
top: calc(100% - 12px);
}
&:not(.label-icon).active {
transform: translateY(-25px);
}
height: 100%;
}
overflow-y: hidden; /* prevents scroll bar flash */
padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
resize: none;
min-height: $input-height;
}
}
// For textarea autoresize
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
padding-top: 1.2rem; /* prevents text jump on Enter keypress */
// Reduces repaints
position: absolute;
top: 0;
}
/* Autocomplete */
.autocomplete-content {
margin-top: -1 * $input-margin-bottom;
margin-bottom: $input-margin-bottom;
display: block;
opacity: 1;
position: static;
li {
.highlight { color: #444; }
img {
height: $dropdown-item-height - 10;
width: $dropdown-item-height - 10;
margin: 5px 15px;
}
}
}
/* Radio Buttons
========================================================================== */
// Remove default Radio Buttons
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
transition: .28s ease;
user-select: none;
}
[type="radio"] + label:before,
[type="radio"] + label:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 16px;
height: 16px;
z-index: 0;
transition: .28s ease;
}
/* Unchecked styles */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
border-radius: 50%;
}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
border: 2px solid $radio-empty-color;
}
[type="radio"]:not(:checked) + label:after {
transform: scale(0);
}
/* Checked styles */
[type="radio"]:checked + label:before {
border: 2px solid transparent;
}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
border: $radio-border;
}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
background-color: $radio-fill-color;
}
[type="radio"]:checked + label:after {
transform: scale(1.02);
}
/* Radio With gap */
[type="radio"].with-gap:checked + label:after {
transform: scale(.5);
}
/* Focused styles */
[type="radio"].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
}
/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + label:before {
border: 2px solid $input-disabled-color;
}
[type="radio"].with-gap:disabled:checked + label:after {
border: none;
background-color: $input-disabled-color;
}
/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
background-color: transparent;
border-color: $input-disabled-color;
}
[type="radio"]:disabled + label {
color: $input-disabled-color;
}
[type="radio"]:disabled:not(:checked) + label:before {
border-color: $input-disabled-color;
}
[type="radio"]:disabled:checked + label:after {
background-color: $input-disabled-color;
border-color: $input-disabled-solid-color;
}
/* Range
========================================================================== */
.range-field {
position: relative;
}
input[type=range],
input[type=range] + .thumb {
@extend .no-select;
cursor: pointer;
}
input[type=range] {
position: relative;
background-color: transparent;
border-color: transparent !important;
border: none;
outline: none;
width: 100%;
margin: 15px 0;
padding: 0;
&:focus {
outline: none;
}
}
input[type=range] + .thumb {
position: absolute;
top: 10px;
left: 0;
border: none;
height: 0;
width: 0;
border-radius: 50%;
background-color: $radio-fill-color;
margin-left: 7px;
transform-origin: 50% 50%;
transform: rotate(-45deg);
.value {
display: block;
width: 30px;
text-align: center;
color: $radio-fill-color;
font-size: 0;
transform: rotate(45deg);
}
&.active {
border-radius: 50% 50% 50% 0;
.value {
color: $input-background;
margin-left: -1px;
margin-top: 8px;
font-size: 10px;
}
}
}
// WebKit
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: $track-height;
background: #c2c0c2;
border: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: $range-height;
width: $range-width;
border-radius: 50%;
background-color: $radio-fill-color;
transform-origin: 50% 50%;
margin: -5px 0 0 0;
transition: .3s;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
// FireFox
input[type=range] {
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
}
input[type=range]::-moz-range-track {
height: $track-height;
background: #ddd;
border: none;
}
input[type=range]::-moz-range-thumb {
border: none;
height: $range-height;
width: $range-width;
border-radius: 50%;
background: $radio-fill-color;
margin-top: -5px;
}
// hide the outline behind the border
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
// IE 10+
input[type=range]::-ms-track {
height: $track-height;
// remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
background: transparent;
// leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
}
input[type=range]::-ms-thumb {
border: none;
height: $range-height;
width: $range-width;
border-radius: 50%;
background: $radio-fill-color;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/* Select Field
========================================================================== */
select { display: none; }
select.browser-default { display: block; }
select {
background-color: $select-background;
width: 100%;
padding: $select-padding;
border: $select-border;
border-radius: $select-radius;
height: $input-height;
}
.input-field {
& > select {
display: block;
position: absolute;
width: 0;
pointer-events: none;
height: 0;
top: 0;
left: 0;
opacity: 0;
}
}
.select-label {
position: absolute;
}
.select-wrapper {
&.valid {
& > input.select-dropdownmaterial {
@extend %valid-input-style;
}
& + label:after {
@extend %custom-success-message;
}
}
&.invalid {
& > input.select-dropdownmaterial {
@extend %invalid-input-style;
}
& + label:after {
@extend %custom-error-message;
}
}
&.valid + label,
&.invalid + label {
width: 100%;
pointer-events: none;
}
& + label:after {
}
position: relative;
input.select-dropdownmaterial {
position: relative;
cursor: pointer;
background-color: transparent;
border: none;
border-bottom: $input-border;
outline: none;
height: $input-height;
line-height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
padding: 0;
display: block;
user-select:none;
}
span.caret {
color: initial;
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 10px;
width: 10px;
display: block;
margin: auto 0;
font-size: 10px;
line-height: 10px;
}
& + label {
position: absolute;
top: -26px;
font-size: $label-font-size;
}
}
// Disabled styles
select:disabled {
color: $input-disabled-color;
}
.select-wrapper.disabled {
span.caret,
& + label {
color: $input-disabled-color;
}
}
.select-wrapper input.select-dropdownmaterial:disabled {
color: $input-disabled-color;
cursor: default;
user-select: none;
}
.select-wrapper i {
color: $select-disabled-color;
}
.select-dropdownmaterial li.disabled,
.select-dropdownmaterial li.disabled > span,
.select-dropdownmaterial li.optgroup {
color: $select-disabled-color;
background-color: transparent;
}
.select-dropdownmaterial.dropdown-content {
li {
&.active {
background-color: transparent;
}
&:hover {
background-color: $select-option-hover;
}
&.selected {
background-color: $select-option-focus;
}
}
}
// Prefix Icons
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.prefix ~ label { margin-left: 3rem; }
// Icons
.select-dropdownmaterial li {
img {
height: $dropdown-item-height - 10;
width: $dropdown-item-height - 10;
margin: 5px 15px;
float: right;
}
}
// Optgroup styles
.select-dropdownmaterial li.optgroup {
border-top: 1px solid $dropdown-hover-bg-color;
&.selected > span {
color: rgba(0, 0, 0, .7);
}
& > span {
color: rgba(0, 0, 0, .4);
}
& ~ li.optgroup-option {
padding-left: 1rem;
}
}
/* Switch
========================================================================== */
.switch,
.switch * {
-webkit-tap-highlight-color: transparent;
user-select: none;
margin-bottom: 10px;
}
.switch label {
cursor: pointer;
}
.switch label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
&:checked + .lever {
background-color: $switch-checked-lever-bg;
&:before, &:after {
left: 18px;
}
&:after {
background-color: $switch-bg-color;
}
}
}
.switch label .lever {
content: "";
display: inline-block;
position: relative;
width: 36px;
height: 14px;
background-color: $switch-unchecked-lever-bg;
border-radius: $switch-radius;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin: 0 16px;
&:before, &:after {
content: "";
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
left: 0;
top: -3px;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
}
&:before {
background-color: transparentize($switch-bg-color, .85);
}
&:after {
background-color: $switch-unchecked-bg;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
}
// Switch active style
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: transparentize($switch-bg-color, .85);
}
input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: rgba(0,0,0,.08);
}
// Disabled Styles
.switch input[type=checkbox][disabled] + .lever {
cursor: default;
background-color: rgba(0,0,0,.12);
}
.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: $input-disabled-solid-color;
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
box-sizing: content-box; /* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
}
.wpcf7-form .input-field {
display: block; margin-top: 1rem !important;}
.wpcf7-form {
.dropdown-content {
@extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
max-height: 650px;
overflow-y: auto;
opacity: 0;
position: absolute;
z-index: 999999;
will-change: width, height;
li {
clear: both;
color: $off-black;
cursor: pointer;
min-height: $dropdown-item-height;
line-height: 1.5rem;
width: 100%;
text-align: left;
text-transform: none;
&:hover, &.active, &.selected {
background-color: $dropdown-hover-bg-color;
}
&.active.selected {
background-color: rgba(150,150,150,0.25)
}
&.divider {
min-height: 0;
height: 1px;
}
& > a, & > span {
font-size: 16px;
color: $dropdown-color;
display: block;
line-height: 22px;
padding: (($dropdown-item-height - 22) / 2) 16px;
}
& > span > label {
top: 1px;
left: 0;
height: 18px;
}
// Icon alignment override
& > a > i {
height: inherit;
line-height: inherit;
float: left;
margin: 0 24px 0 0;
width: 24px;
}
}
}
// Input field specificity bugfix
.input-field.col .dropdown-content [type="checkbox"] + label {
top: 1px;
left: 0;
height: 18px;
}
// shared styles
.btn,
.btn-flat, .wpcf7-submit {
background-image: none !important;
border: $button-border;
border-radius: $button-radius;
display: inline-block;
height: $button-height;
line-height: $button-height;
padding: $button-padding;
text-transform: uppercase;
vertical-align: middle;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
position: unset;
will-change: unset;
}
// Disabled shared style
.btn.disabled,
.btn-floating.disabled,
.btn-large.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-flat:disabled,
.btn[disabled],
.btn-floating[disabled],
.btn-large[disabled],
.btn-flat[disabled] {
pointer-events: none;
background-color: $button-disabled-background !important;
box-shadow: none;
color: $button-disabled-color !important;
cursor: default;
&:hover {
background-color: $button-disabled-background !important;
color: $button-disabled-color !important;
}
}
// Shared icon styles
.btn,
.btn-floating,
.btn-large,
.btn-flat, .wpcf7-submit {
font-size: $button-font-size;
outline: 0;
i {
font-size: $button-icon-font-size;
line-height: inherit;
}
}
// Shared focus button style
.btn,
.btn-floating, .wpcf7-submit {
&:focus {
background-color: darken($button-raised-background, 10%);
}
}
// Raised Button
.btn, .wpcf7-submit{
text-decoration: none;
color: $button-raised-color;
background-color: $button-raised-background;
text-align: center;
letter-spacing: .5px;
@extend .z-depth-1;
transition: .2s ease-out;
cursor: pointer;
&:hover {
background-color: $button-raised-background-hover;
@extend .z-depth-1-half;
}
}
// Floating button
.btn-floating {
&:hover {
background-color: $button-floating-background-hover;
@extend .z-depth-1-half;
}
&:before {
border-radius: 0;
}
&.btn-large {
&.halfway-fab {
bottom: -$button-floating-large-size / 2;
}
width: $button-floating-large-size;
height: $button-floating-large-size;
i {
line-height: $button-floating-large-size;
}
}
&.halfway-fab {
&.left {
right: auto;
left: 24px;
}
position: absolute;
right: 24px;
bottom: -$button-floating-size / 2;
}
display: inline-block;
color: $button-floating-color;
position: relative;
overflow: hidden;
z-index: 1;
width: $button-floating-size;
height: $button-floating-size;
line-height: $button-floating-size;
padding: 0;
background-color: $button-floating-background;
border-radius: $button-floating-radius;
@extend .z-depth-1;
transition: .3s;
cursor: pointer;
vertical-align: middle;
i {
width: inherit;
display: inline-block;
text-align: center;
color: $button-floating-color;
font-size: $button-large-icon-font-size;
line-height: $button-floating-size;
}
}
// button fix
button.btn-floating {
border: $button-border;
}
// Fixed Action Button
.fixed-action-btn {
&.active {
ul {
visibility: visible;
}
}
&.horizontal {
padding: 0 0 0 15px;
ul {
text-align: right;
right: 64px;
top: 50%;
transform: translateY(-50%);
height: 100%;
left: auto;
width: 500px; /*width 100% only goes to width of button container */
li {
display: inline-block;
margin: 15px 15px 0 0;
}
}
}
&.toolbar {
&.active {
& > a i {
opacity: 0;
}
}
padding: 0;
height: $button-floating-large-size;
ul {
display: flex;
top: 0;
bottom: 0;
z-index: 1;
li {
flex: 1;
display: inline-block;
margin: 0;
height: 100%;
transition: none;
a {
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
box-shadow: none;
color: #fff;
line-height: $button-floating-large-size;
z-index: 1;
i {
line-height: inherit;
}
}
}
}
}
position: fixed;
right: 23px;
bottom: 23px;
padding-top: 15px;
margin-bottom: 0;
z-index: 999997;
ul {
left: 0;
right: 0;
text-align: center;
position: absolute;
bottom: 64px;
margin: 0;
visibility: hidden;
li {
margin-bottom: 15px;
}
a.btn-floating {
opacity: 0;
}
}
.fab-backdrop {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: $button-floating-size;
height: $button-floating-size;
background-color: $button-floating-background;
border-radius: $button-floating-radius;
transform: scale(0);
}
}
// Flat button
.btn-flat {
box-shadow: none;
background-color: transparent;
color: $button-flat-color;
cursor: pointer;
transition: background-color .2s;
&:focus,
&:hover {
box-shadow: none;
}
&:focus {
background-color: rgba(0,0,0,.1);
}
&.disabled {
background-color: transparent !important;
color: $button-flat-disabled-color !important;
cursor: default;
}
}
// Large button
.btn-large {
@extend .btn;
height: $button-large-height;
line-height: $button-large-height;
i {
font-size: $button-large-icon-font-size;
}
}
// Block button
.btn-block {
display: block;
}
//Default styles
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
// display: flex;
// min-height: 100vh;
// flex-direction: column;
}
main {
// flex: 1 0 auto;
}
ul {
&:not(.browser-default) {
padding-left: 0;
list-style-type: none;
& > li {
list-style-type: none;
}
}
}
a {
color: $link-color;
text-decoration: none;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
}
// Positioning
.valign-wrapper {
display: flex;
align-items: center;
}
// classic clearfix
.clearfix {
clear: both;
}
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
.z-depth-1 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-depth-1-half {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-4 {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.z-depth-5 {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.hoverable {
transition: box-shadow .25s;
&:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
// Dividers
.divider {
height: 1px;
overflow: hidden;
background-color: color("grey", "lighten-2");
}
// Blockquote
blockquote {
margin: 20px 0;
padding-left: 1.5rem;
border-left: 5px solid $primary-color;
}
// Icon Styles
i {
line-height: inherit;
&.left {
float: left;
margin-right: 15px;
}
&.right {
float: right;
margin-left: 15px;
}
&.tiny {
font-size: 1rem;
}
&.small {
font-size: 2rem;
}
&.medium {
font-size: 4rem;
}
&.large {
font-size: 6rem;
}
}
// Images
img.responsive-img,
video.responsive-video {
max-width: 100%;
height: auto;
}
// Pagination
.pagination {
li {
display: inline-block;
border-radius: 2px;
text-align: center;
vertical-align: top;
height: 30px;
a {
color: #444;
display: inline-block;
font-size: 1.2rem;
padding: 0 10px;
line-height: 30px;
}
&.active a { color: #fff; }
&.active { background-color: $primary-color; }
&.disabled a {
cursor: default;
color: #999;
}
i {
font-size: 2rem;
}
}
li.pages ul li {
display: inline-block;
float: none;
}
}
@media #{$medium-and-down} {
.pagination {
width: 100%;
li.prev,
li.next {
width: 10%;
}
li.pages {
width: 80%;
overflow: hidden;
white-space: nowrap;
}
}
}
// Breadcrumbs
.breadcrumb {
font-size: 18px;
color: rgba(255,255,255, .7);
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
display: inline-block;
float: left;
font-size: 24px;
}
&:before {
content: '\E5CC';
color: rgba(255,255,255, .7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
&:first-child:before {
display: none;
}
&:last-child {
color: #fff;
}
}
// Parallax
.parallax-container {
position: relative;
overflow: hidden;
height: 500px;
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
img {
display: none;
position: absolute;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translate3d(0,0,0);
transform: translateX(-50%);
}
}
}
// Pushpin
.pin-top, .pin-bottom {
position: relative;
}
.pinned {
position: fixed !important;
}
/*********************
Transition Classes
**********************/
ul.staggered-list li {
opacity: 0;
}
.fade-in {
opacity: 0;
transform-origin: 0 50%;
}
/*********************
Media Query Classes
**********************/
.hide-on-small-only, .hide-on-small-and-down {
@media #{$small-and-down} {
display: none !important;
}
}
.hide-on-med-and-down {
@media #{$medium-and-down} {
display: none !important;
}
}
.hide-on-med-and-up {
@media #{$medium-and-up} {
display: none !important;
}
}
.hide-on-med-only {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: none !important;
}
}
.hide-on-large-only {
@media #{$large-and-up} {
display: none !important;
}
}
.show-on-large {
@media #{$large-and-up} {
display: block !important;
}
}
.show-on-medium {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: block !important;
}
}
.show-on-small {
@media #{$small-and-down} {
display: block !important;
}
}
.show-on-medium-and-up {
@media #{$medium-and-up} {
display: block !important;
}
}
.show-on-medium-and-down {
@media #{$medium-and-down} {
display: block !important;
}
}
// Center text on mobile
.center-on-small-only {
@media #{$small-and-down} {
text-align: center;
}
}
.hide {
display: none !important;
}
// Text Align
.left-align {
text-align: left;
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
// No Text Select
.no-select {
user-select: none;
}
.circle {
border-radius: 50%;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no-padding {
padding: 0 !important;
}
/* ==========================================================================
$BASE-TIME-PICKER
========================================================================== */
/**
* The list of times.
*/
.picker__list {
list-style: none;
padding: 0.75em 0 4.2em;
margin: 0;
}
/**
* The times on the clock.
*/
.picker__list-item {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: -1px;
position: relative;
background: #fff;
padding: .75em 1.25em;
}
@media (min-height: 46.75em) {
.picker__list-item {
padding: .5em 1em;
}
}
/* Hovered time */
.picker__list-item:hover {
cursor: pointer;
color: #000;
background: #b1dcfb;
border-color: #0089ec;
z-index: 10;
}
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
border-color: #0089ec;
z-index: 10;
}
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
cursor: pointer;
color: #000;
background: #b1dcfb;
}
/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
background: #0089ec;
color: #fff;
z-index: 10;
}
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #ddd;
cursor: default;
border-color: #ddd;
z-index: auto;
}
/**
* The clear button
*/
.picker--time .picker__button--clear {
display: block;
width: 80%;
margin: 1em auto 0;
padding: 1em 1.25em;
background: none;
border: 0;
font-weight: 500;
font-size: .67em;
text-align: center;
text-transform: uppercase;
color: $timepicker-clock-color;
}
.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
color: #000;
background: #b1dcfb;
background: #ee2200;
border-color: #ee2200;
cursor: pointer;
color: #fff;
outline: none;
}
.picker--time .picker__button--clear:before {
top: -0.25em;
color: $timepicker-clock-color;
font-size: 1.25em;
font-weight: bold;
}
.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
color: #fff;
}
/* ==========================================================================
$DEFAULT-TIME-PICKER
========================================================================== */
/**
* The frame the bounds the time picker.
*/
.picker--time .picker__frame {
min-width: 256px;
max-width: 320px;
}
/**
* The picker box.
*/
.picker--time .picker__box {
font-size: 1em;
background: #f2f2f2;
padding: 0;
}
@media (min-height: 40.125em) {
.picker--time .picker__box {
margin-bottom: 5em;
}
}
/* ==========================================================================
$DEFAULT-TIME-PICKER
========================================================================== */
.clockpicker-display {
font-size: 4rem;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
clear: both;
position: relative;
}
.clockpicker-span-am-pm {
font-size: 1.3rem;
position: absolute;
right: 1rem;
bottom: 0.3rem;
line-height: 2rem;
font-weight: 500;
}
@media only screen and (min-width: 601px) {
.clockpicker-display {
top: 32%;
}
.clockpicker-span-am-pm {
position: relative;
right: auto;
bottom: auto;
text-align: center;
margin-top: 1.2rem;
}
}
.text-primary{
color: rgba(255, 255, 255, 1)
}
.clockpicker-span-hours {
margin-right: 3px;
}
.clockpicker-span-minutes {
margin-left: 3px;
}
.clockpicker-span-hours,
.clockpicker-span-minutes,
.clockpicker-span-am-pm div {
cursor: pointer;
}
.clockpicker-moving {
cursor: move;
}
.clockpicker-plate {
background-color: $timepicker-clock-plate-bg;
border-radius: 50%;
width: 270px;
height: 270px;
overflow: visible;
position: relative;
margin: auto;
margin-top: 25px;
margin-bottom: 5px;
user-select: none;
}
.clockpicker-canvas,
.clockpicker-dial {
width: 270px;
height: 270px;
position: absolute;
left: -1px;
top: -1px;
}
.clockpicker-minutes {
visibility: hidden;
}
.clockpicker-tick {
border-radius: 50%;
color: $timepicker-clock-color;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
background-color: rgba(150,150,150, .4);
}
.clockpicker-dial {
-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-moz-transition: -moz-transform 350ms, opacity 350ms;
-ms-transition: -ms-transform 350ms, opacity 350ms;
-o-transition: -o-transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
-o-transform: scale(.8, .8);
transform: scale(.8, .8);
}
.clockpicker-canvas {
-webkit-transition: opacity 175ms;
-moz-transition: opacity 175ms;
-ms-transition: opacity 175ms;
-o-transition: opacity 175ms;
transition: opacity 175ms;
}
.clockpicker-canvas-out {
opacity: 0.25;
}
.clockpicker-canvas-bearing {
stroke: none;
fill: $secondary-color;
}
.clockpicker-canvas-bg {
stroke: none;
fill: $secondary-color;
}
.clockpicker-canvas-bg-trans {
fill: $secondary-color;
}
.wpcf7-radio { display: flex;
justify-content: space-between; flex-wrap: wrap; align-items: start; }
.wpcf7-form-control-wrap { .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten { display: flex;
justify-content: space-between; flex-wrap: wrap; align-items: start; } }
.wpcf7-form-control.one > .wpcf7-list-item { width: 100%; }
.wpcf7-form-control.two > .wpcf7-list-item { width: 50%; }
.wpcf7-form-control.three > .wpcf7-list-item { width: calc(100% / 3); }
.wpcf7-form-control.four > .wpcf7-list-item { width: 25%; }
.wpcf7-form-control.five > .wpcf7-list-item { width: 20%; }
.wpcf7-form-control.six > .wpcf7-list-item { width: calc(100% / 6); }
.wpcf7-form-control.seven > .wpcf7-list-item { width: calc(100% / 7); }
.wpcf7-form-control.eight > .wpcf7-list-item { width: calc(100% / 8); }
.wpcf7-form-control.nine > .wpcf7-list-item { width: calc(100% / 9); }
.wpcf7-form-control.ten > .wpcf7-list-item { width: calc(100% / 10); }
.clockpicker-canvas line {
stroke: $secondary-color;
stroke-width: 4;
stroke-linecap: round;
/*shape-rendering: crispEdges;*/
}
.file-field .wpcf7-not-valid-tip, .wpcf7-checkbox+.wpcf7-not-valid-tip, .wpcf7-radio+.wpcf7-not-valid-tip {
margin-top: 0;
}
.wpcf7-not-valid-tip {
color: #F44336 !important; font-weight: 300;
opacity: 1;
font-size: 13.5px;
margin-top: 10px; }
.file-path {
margin-bottom: 3px !important;
}
font-weight: 300;
.input-text, label, input[type=email], input[type=password], input[type=search], input[type=text], input[type=url], textarea {
font-weight: 300;
}
.file-field { display: block;}
/*
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
* Constants:
* STROKEWIDTH = 3px
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
* ARCTIME = 1333ms (time it takes to expand and contract arc)
* ARCSTARTROT = 216 degrees (how much the start location of the arc
* should rotate each time, 216 gives us a
* 5 pointed star shape (it's 360/5 * 3).
* For a 7 pointed star, we might do
* 360/7 * 3 = 154.286)
* CONTAINERWIDTH = 28px
* SHRINK_TIME = 400ms
*/
.preloader-wrapper {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
&.small {
width: 36px;
height: 36px;
}
&.big {
width: 64px;
height: 64px;
}
&.active {
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-webkit-animation: container-rotate 1568ms linear infinite;
animation: container-rotate 1568ms linear infinite;
}
}
@-webkit-keyframes container-rotate {
to { -webkit-transform: rotate(360deg) }
}
@keyframes container-rotate {
to { transform: rotate(360deg) }
}
.spinner-layer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
/**
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
*
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
* guarantee that the animation will start _exactly_ after that value. So we avoid using
* animation-delay and instead set custom keyframes for each color (as redundant as it
* seems).
*
* We write out each animation in full (instead of separating animation-name,
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
* specific properties properly, treats them as -webkit-animation, and overrides the
* other animation rules. See https://github.com/Polymer/platform/issues/53.
*/
.active .spinner-layer.spinner-blue {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-red {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-green {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
/* durations: 4 * ARCTIME */
opacity: 1;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
@-webkit-keyframes fill-unfill-rotate {
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
}
@keyframes fill-unfill-rotate {
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
}
@-webkit-keyframes blue-fade-in-out {
from { opacity: 1; }
25% { opacity: 1; }
26% { opacity: 0; }
89% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes blue-fade-in-out {
from { opacity: 1; }
25% { opacity: 1; }
26% { opacity: 0; }
89% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@-webkit-keyframes red-fade-in-out {
from { opacity: 0; }
15% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
51% { opacity: 0; }
}
@keyframes red-fade-in-out {
from { opacity: 0; }
15% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
51% { opacity: 0; }
}
@-webkit-keyframes yellow-fade-in-out {
from { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
76% { opacity: 0; }
}
@keyframes yellow-fade-in-out {
from { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
76% { opacity: 0; }
}
@-webkit-keyframes green-fade-in-out {
from { opacity: 0; }
65% { opacity: 0; }
75% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes green-fade-in-out {
from { opacity: 0; }
65% { opacity: 0; }
75% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
/**
* Patch the gap that appear between the two adjacent div.circle-clipper while the
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
*/
.gap-patch {
position: absolute;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.gap-patch .circle {
width: 1000%;
left: -450%;
}
.circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
.circle {
width: 200%;
height: 100%;
border-width: 3px; /* STROKEWIDTH */
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
&.left .circle {
left: 0;
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
&.right .circle {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
}
.active .circle-clipper.left .circle {
/* duration: ARCTIME */
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .circle-clipper.right .circle {
/* duration: ARCTIME */
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
@-webkit-keyframes left-spin {
from { -webkit-transform: rotate(130deg); }
50% { -webkit-transform: rotate(-5deg); }
to { -webkit-transform: rotate(130deg); }
}
@keyframes left-spin {
from { transform: rotate(130deg); }
50% { transform: rotate(-5deg); }
to { transform: rotate(130deg); }
}
@-webkit-keyframes right-spin {
from { -webkit-transform: rotate(-130deg); }
50% { -webkit-transform: rotate(5deg); }
to { -webkit-transform: rotate(-130deg); }
}
@keyframes right-spin {
from { transform: rotate(-130deg); }
50% { transform: rotate(5deg); }
to { transform: rotate(-130deg); }
}
#spinnerContainer.cooldown {
/* duration: SHRINK_TIME */
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
}
.wpcf7-form label::after { width:500px;}
.wpcf7 .wpcf7-submit { outline: none !important; margin-right: 15px; }
.wpcf7 .preloader-wrapper.ajax-loader.small { display: inline-block !important; visibility: hidden; vertical-align: middle;}
.wpcf7 .preloader-wrapper.ajax-loader.small.is-active { visibility: visible;}
.wpcf7-form .spinner-layer { border-color: pink; }
.wpcf7 td, .wpcf7 th, .wpcf7 table { border: none; }
.wpcf7 p { line-height: 1.5 !important; }
.wpcf7 p { margin-bottom: 2rem; }
.wpcf7 { td, th, tr, thead { padding: 0 !important; border: none !important; background-color: transparent !important; }}
.wpcf7 .picker__frame th { padding: 15px 5px !important; background-color: transparent !important;}
.wpcf7 .input-field .wpcf7-not-valid-tip { margin-top: -15px; display: block;}
.wpcf7 .wpcf7-not-valid-tip { margin-top: -10px; }
.wpcf7 .picker__frame select {
background: rgba(255,255,255,0.9) !important;
width: 100%;
padding: 5px !important;
border: 1px solid #f2f2f2;
border-radius: 2px;
min-width: unset !important; max-width: unset !important;}
.wpcf7 .picker__frame table { border: none !important;}
.wpcf7 .clockpicker span { font-size: inherit !important; font-family: inherit !important;}
.wpcf7 span { font-weight: inherit !important;}
.wpcf7 p { margin: 1rem 0 1rem 0 !important;}
.wpcf7 .file-field { margin: 0 0 2rem 0; }
.wpcf7 .picker__frame .btn-flat:hover { background: none !important; }
:root {
font-size: 16px !important;
}
.wpcf7-form .picker__nav--prev:hover, .wpcf7-form .picker__nav--next:hover {
background-color: rgba(150,150,150,0.25);
}
.wpcf7-form .wpcf7-list-item { padding: 0 15px; }
.wpcf7-form p { font-size: 1rem; }
.wpcf7-radio { display: flex; width: 100%;}
.wpcf7 .wpcf7-validation-errors, .wpcf7 .wpcf7-mail-sent-ng, .wpcf7 .wpcf7-mail-sent-ok, .screen-reader-response {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
border-radius: 2px;
padding: 15px 20px;
width: 100%;
display: block;
font-weight: 300;
font-size: 15px;
}
.wpcf7 .wpcf7-validation-errors {
color: #F44336;
background-color: #FFEBEE;
}
.wpcf7 .wpcf7-mail-sent-ng {
color: #ff9800;
background-color: #fff3e0;
}
.wpcf7 .wpcf7-mail-sent-ok {
color: #4CAF50;
background-color: #E8F5E9;
}
.wpcf7 {
div.two {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
div.two > p { display: block; width: 48%; margin: 0 !important;}}
.wpcf7 .wpcf7-form .picker__weekday-display { font-size: 2rem;}
.wpcf7-submit::after { content: ""; }
.wpcf7-form small { font-size: .8rem;
color: #9e9e9e;}
.wpcf7-validates-as-required+label:after { content: "*"; display: inline;}
.wpcf7 .wpcf7-form .thumb:nth-child(odd) {
display: none;
}
.wpcf7-form { padding: 20px 10px;}
.wpcf7-form * { box-sizing: border-box;}
.wpcf7 .screen-reader-response { display: none; }
.wpcf7-checkbox { display: flex; }