.select-box{ padding: 5px; display: block; height: 28px; } .select-box-small{ padding-top: 0px; padding-bottom: 0px; } .switch-box{ padding-top: 0px; padding-bottom: 0px; } .select-box > p{ margin: 0; float: left; margin-top: 7px; font-family: 'Roboto'; font-size: 13px; color: #383535; } .select-box > select{ text-decoration: none; -webkit-appearance: none; background-color: transparent; border: 1px solid #555; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 99px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 12px; font-weight: 200; color: #606060; line-height: 27px; padding: 0px 30px 0 9px; float: right; text-decoration: none; z-index: 0; position: relative; margin: 0; } .select-box > span{ position: absolute; right: 22px; margin-top: 8px; color: #606060; font-size: 12px; } .select-box > .check-switch{ float: right; margin-top: 6px; } .check-switch { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .check-switch input { opacity: 0; position: absolute; } .check-switch input + span { position: relative; display: inline-block; width: 1.65em; height: 1em; background: white; box-shadow: inset 0 0 0 0.0625em #e9e9e9; border-radius: 0.5em; vertical-align: -0.15em; transition: all 0.40s cubic-bezier(.17,.67,.43,.98); } .check-switch:active input + span, .check-switch input + span:active { box-shadow: inset 0 0 0 0.73em #e9e9e9; } .check-switch input + span:after { position: absolute; display: block; content: ''; width: 0.875em; height: 0.875em; border-radius: 0.4375em; top: 0.0625em; left: 0.0625em; background: white; box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1), 0 0 0.05em rgba(0,0,0,0.05), 0 0.1em 0.2em rgba(0,0,0,0.2); transition: all 0.25s ease-out; } .check-switch:active input + span:after, .check-switch input + span:active:after { width: 1.15em; } .check-switch input:checked + span { box-shadow: inset 0 0 0 0.73em #FF8F00; } .check-switch input:checked + span:after { left: 0.7125em; } .check-switch:active input:checked + span:after, .check-switch input:checked + span:active:after { left: 0.4375em; } .paper-btn, .paper-btn-large { -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); font-family: 'Roboto'; font-weight: 400; text-decoration: none; color: #FFF; background-color: #26a69a; text-align: center; letter-spacing: 0.5px; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; -ms-transition: 0.2s ease-out; transition: 0.2s ease-out; cursor: pointer; } .paper-button-blue{ background-color: #3498DB; } .paper-btn, .paper-btn-large, .paper-btn-flat { display: inline-block; height: 36px; margin-bottom: 15px; padding: 0 2rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-clip: padding-box; line-height: 36px; text-transform: uppercase; border: none; outline: 0; -webkit-tap-highlight-color: transparent; } .paper-btn-flat { box-shadow: none; background-color: transparent; color: #343434; cursor: pointer; font-family: 'Roboto'; font-weight: 400; } .waves-effect { position: relative; cursor: pointer; display: inline-block; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; z-index: 1; will-change: opacity, transform; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .waves-effect .waves-ripple { position: absolute; border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; opacity: 0; background: rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); pointer-events: none; } .waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.45); } .waves-effect.waves-dark .waves-ripple { background-color: rgba(0, 0, 0, 0.2); } .waves-effect.waves-red .waves-ripple { background-color: rgba(244, 67, 54, 0.7); } .waves-effect.waves-yellow .waves-ripple { background-color: rgba(255, 235, 59, 0.7); } .waves-effect.waves-orange .waves-ripple { background-color: rgba(255, 152, 0, 0.7); } .waves-effect.waves-purple .waves-ripple { background-color: rgba(156, 39, 176, 0.7); } .waves-effect.waves-green .waves-ripple { background-color: rgba(76, 175, 80, 0.7); } .waves-effect.waves-teal .waves-ripple { background-color: rgba(0, 150, 136, 0.7); } .waves-notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } .waves-circle { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } .waves-input-wrapper { border-radius: 0.2em; vertical-align: bottom; } .waves-input-wrapper .waves-button-input { position: relative; top: 0; left: 0; z-index: 1; } .waves-circle { text-align: center; width: 2.5em; height: 2.5em; line-height: 2.5em; border-radius: 50%; -webkit-mask-image: none; } .waves-block { display: block; }