/* Infobox ===================================== */ .info-box { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); height: 80px; display: flex; cursor: default; background-color: #fff; position: relative; overflow: hidden; margin-bottom: 30px; } .info-box .icon { display: inline-block; text-align: center; background-color: rgba(0, 0, 0, 0.12); width: 80px; } .info-box .icon i { color: #fff; font-size: 20px; line-height: 40px; } .info-box .icon .chart.chart-bar { height: 100%; line-height: 100px; } .info-box .icon .chart.chart-bar canvas { vertical-align: baseline !important; } .info-box .icon .chart.chart-pie { height: 100%; line-height: 123px; } .info-box .icon .chart.chart-pie canvas { vertical-align: baseline !important; } .info-box .icon .chart.chart-line { height: 100%; line-height: 115px; } .info-box .icon .chart.chart-line canvas { vertical-align: baseline !important; } .info-box .content { display: inline-block; padding: 7px 10px; } .info-box .content .text { font-size: 11px; margin-top: 2px; color: #555; } .info-box .content .number { font-weight: normal; font-size: 16px; margin-top: -4px; color: #555; text-align:center; } .info-box.hover-zoom-effect .icon { overflow: hidden; } .info-box.hover-zoom-effect .icon i { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .info-box.hover-zoom-effect:hover .icon i { opacity: 0.4; -moz-transform: rotate(-32deg) scale(1.4); -ms-transform: rotate(-32deg) scale(1.4); -o-transform: rotate(-32deg) scale(1.4); -webkit-transform: rotate(-32deg) scale(1.4); transform: rotate(-32deg) scale(1.4); } .info-box.hover-expand-effect:after { background-color: rgba(0, 0, 0, 0.05); content: "."; position: absolute; left: 80px; top: 0; width: 0; height: 100%; color: transparent; -moz-transition: all 0.95s; -o-transition: all 0.95s; -webkit-transition: all 0.95s; transition: all 0.95s; } .info-box.hover-expand-effect:hover:after { width: 100%; } .info-box-2 { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); height: 80px; display: flex; cursor: default; background-color: #fff; position: relative; overflow: hidden; margin-bottom: 15px; } .info-box-2 .icon { display: inline-block; text-align: center; width: 80px; } .info-box-2 .icon i { color: #fff; font-size: 50px; line-height: 80px; } .info-box-2 .chart.chart-bar { height: 100%; line-height: 105px; } .info-box-2 .chart.chart-bar canvas { vertical-align: baseline !important; } .info-box-2 .chart.chart-pie { height: 100%; line-height: 123px; } .info-box-2 .chart.chart-pie canvas { vertical-align: baseline !important; } .info-box-2 .chart.chart-line { height: 100%; line-height: 115px; } .info-box-2 .chart.chart-line canvas { vertical-align: baseline !important; } .info-box-2 .content { display: inline-block; padding: 7px 10px; } .info-box-2 .content .text { font-size: 13px; margin-top: 11px; color: #555; } .info-box-2 .content .number { font-weight: normal; font-size: 26px; margin-top: -4px; color: #555; } .info-box-2.hover-zoom-effect .icon { overflow: hidden; } .info-box-2.hover-zoom-effect .icon i { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .info-box-2.hover-zoom-effect:hover .icon i { opacity: 0.4; -moz-transform: rotate(-32deg) scale(1.4); -ms-transform: rotate(-32deg) scale(1.4); -o-transform: rotate(-32deg) scale(1.4); -webkit-transform: rotate(-32deg) scale(1.4); transform: rotate(-32deg) scale(1.4); } .info-box-2.hover-expand-effect:after { background-color: rgba(0, 0, 0, 0.05); content: "."; position: absolute; left: 0; top: 0; width: 0; height: 100%; color: transparent; -moz-transition: all 0.95s; -o-transition: all 0.95s; -webkit-transition: all 0.95s; transition: all 0.95s; } .info-box-2.hover-expand-effect:hover:after { width: 100%; } .info-box-3 { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); height: 80px; display: flex; cursor: default; background-color: #fff; position: relative; overflow: hidden; margin-bottom: 30px; } .info-box-3 .icon { position: absolute; right: 10px; bottom: 2px; text-align: center; } .info-box-3 .icon i { color: rgba(0, 0, 0, 0.15); font-size: 60px; } .info-box-3 .chart { margin-right: 5px; } .info-box-3 .chart.chart-bar { height: 100%; line-height: 50px; } .info-box-3 .chart.chart-bar canvas { vertical-align: baseline !important; } .info-box-3 .chart.chart-pie { height: 100%; line-height: 34px; } .info-box-3 .chart.chart-pie canvas { vertical-align: baseline !important; } .info-box-3 .chart.chart-line { height: 100%; line-height: 40px; } .info-box-3 .chart.chart-line canvas { vertical-align: baseline !important; } .info-box-3 .content { display: inline-block; padding: 7px 16px; } .info-box-3 .content .text { font-size: 13px; margin-top: 11px; color: #555; } .info-box-3 .content .number { font-weight: normal; font-size: 26px; margin-top: -4px; color: #555; } .info-box-3.hover-zoom-effect .icon i { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .info-box-3.hover-zoom-effect:hover .icon i { opacity: 0.4; -moz-transform: rotate(-32deg) scale(1.4); -ms-transform: rotate(-32deg) scale(1.4); -o-transform: rotate(-32deg) scale(1.4); -webkit-transform: rotate(-32deg) scale(1.4); transform: rotate(-32deg) scale(1.4); } .info-box-3.hover-expand-effect:after { background-color: rgba(0, 0, 0, 0.05); content: "."; position: absolute; left: 0; top: 0; width: 0; height: 100%; color: transparent; -moz-transition: all 0.95s; -o-transition: all 0.95s; -webkit-transition: all 0.95s; transition: all 0.95s; } .info-box-3.hover-expand-effect:hover:after { width: 100%; } .info-box-4 { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); height: 80px; display: flex; cursor: default; background-color: #fff; position: relative; overflow: hidden; margin-bottom: 30px; } .info-box-4 .icon { position: absolute; right: 10px; bottom: 2px; text-align: center; } .info-box-4 .icon i { color: rgba(0, 0, 0, 0.15); font-size: 60px; } .info-box-4 .chart { margin-right: 5px; } .info-box-4 .chart.chart-bar { height: 100%; line-height: 50px; } .info-box-4 .chart.chart-bar canvas { vertical-align: baseline !important; } .info-box-4 .chart.chart-pie { height: 100%; line-height: 34px; } .info-box-4 .chart.chart-pie canvas { vertical-align: baseline !important; } .info-box-4 .chart.chart-line { height: 100%; line-height: 40px; } .info-box-4 .chart.chart-line canvas { vertical-align: baseline !important; } .info-box-4 .content { display: inline-block; padding: 7px 16px; } .info-box-4 .content .text { font-size: 13px; margin-top: 11px; color: #555; } .info-box-4 .content .number { font-weight: normal; font-size: 26px; margin-top: -4px; color: #555; } .info-box-4.hover-zoom-effect .icon i { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .info-box-4.hover-zoom-effect:hover .icon i { opacity: 0.4; -moz-transform: rotate(-32deg) scale(1.4); -ms-transform: rotate(-32deg) scale(1.4); -o-transform: rotate(-32deg) scale(1.4); -webkit-transform: rotate(-32deg) scale(1.4); transform: rotate(-32deg) scale(1.4); } .info-box-4.hover-expand-effect:after { background-color: rgba(0, 0, 0, 0.05); content: "."; position: absolute; left: 0; top: 0; width: 0; height: 100%; color: transparent; -moz-transition: all 0.95s; -o-transition: all 0.95s; -webkit-transition: all 0.95s; transition: all 0.95s; } .info-box-4.hover-expand-effect:hover:after { width: 100%; } /* Alerts ====================================== */ .alert { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; border: none; color: #fff !important; } .alert .alert-link { color: #fff; text-decoration: underline; font-weight: bold; } .alert-success { background-color: #2b982b; } .alert-info { background-color: #00b0e4; } .alert-warning { background-color: #ff9600 !important; } .alert-danger { background-color: #fb483a !important; } .alert-dismissible .close { color: #fff; opacity: 1; border: none; text-shadow: none; } /* Dialogs (SweetAlert) ======================== */ .sweet-alert { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; border-radius: 0 !important; } .sweet-alert p { font-size: 14px !important; } .sweet-alert .sa-input-error { top: 23px !important; right: 13px !important; } .sweet-alert h2 { font-size: 18px !important; margin: 0 0 5px 0 !important; } .sweet-alert button { font-size: 15px !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; border-radius: 0 !important; padding: 5px 20px !important; } /* Checkbox & Radio ============================ */ [type="checkbox"] + label { padding-left: 26px; height: 25px; line-height: 21px; font-size: 13px; font-weight: normal; } [type="checkbox"]:checked + label:before { top: -4px; left: -2px; width: 11px; height: 19px; } [type="checkbox"]:checked.chk-col-red + label:before { border-right: 2px solid #F44336; border-bottom: 2px solid #F44336; } [type="checkbox"]:checked.chk-col-pink + label:before { border-right: 2px solid #E91E63; border-bottom: 2px solid #E91E63; } [type="checkbox"]:checked.chk-col-purple + label:before { border-right: 2px solid #9C27B0; border-bottom: 2px solid #9C27B0; } [type="checkbox"]:checked.chk-col-deep-purple + label:before { border-right: 2px solid #673AB7; border-bottom: 2px solid #673AB7; } [type="checkbox"]:checked.chk-col-indigo + label:before { border-right: 2px solid #3F51B5; border-bottom: 2px solid #3F51B5; } [type="checkbox"]:checked.chk-col-blue + label:before { border-right: 2px solid #2196F3; border-bottom: 2px solid #2196F3; } [type="checkbox"]:checked.chk-col-light-blue + label:before { border-right: 2px solid #03A9F4; border-bottom: 2px solid #03A9F4; } [type="checkbox"]:checked.chk-col-cyan + label:before { border-right: 2px solid #00BCD4; border-bottom: 2px solid #00BCD4; } [type="checkbox"]:checked.chk-col-teal + label:before { border-right: 2px solid #009688; border-bottom: 2px solid #009688; } [type="checkbox"]:checked.chk-col-green + label:before { border-right: 2px solid #4CAF50; border-bottom: 2px solid #4CAF50; } [type="checkbox"]:checked.chk-col-light-green + label:before { border-right: 2px solid #8BC34A; border-bottom: 2px solid #8BC34A; } [type="checkbox"]:checked.chk-col-lime + label:before { border-right: 2px solid #CDDC39; border-bottom: 2px solid #CDDC39; } [type="checkbox"]:checked.chk-col-yellow + label:before { border-right: 2px solid #ffe821; border-bottom: 2px solid #ffe821; } [type="checkbox"]:checked.chk-col-amber + label:before { border-right: 2px solid #FFC107; border-bottom: 2px solid #FFC107; } [type="checkbox"]:checked.chk-col-orange + label:before { border-right: 2px solid #FF9800; border-bottom: 2px solid #FF9800; } [type="checkbox"]:checked.chk-col-deep-orange + label:before { border-right: 2px solid #FF5722; border-bottom: 2px solid #FF5722; } [type="checkbox"]:checked.chk-col-brown + label:before { border-right: 2px solid #795548; border-bottom: 2px solid #795548; } [type="checkbox"]:checked.chk-col-grey + label:before { border-right: 2px solid #9E9E9E; border-bottom: 2px solid #9E9E9E; } [type="checkbox"]:checked.chk-col-blue-grey + label:before { border-right: 2px solid #607D8B; border-bottom: 2px solid #607D8B; } [type="checkbox"]:checked.chk-col-black + label:before { border-right: 2px solid #000000; border-bottom: 2px solid #000000; } [type="checkbox"]:checked.chk-col-white + label:before { border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } [type="checkbox"].filled-in:checked + label:after { top: 0; width: 20px; height: 20px; border: 2px solid #26a69a; background-color: #26a69a; z-index: 0; } [type="checkbox"].filled-in:checked + label:before { border-right: 2px solid #fff !important; border-bottom: 2px solid #fff !important; } [type="checkbox"].filled-in:checked.chk-col-red + label:after { border: 2px solid #F44336; background-color: #F44336; } [type="checkbox"].filled-in:checked.chk-col-pink + label:after { border: 2px solid #E91E63; background-color: #E91E63; } [type="checkbox"].filled-in:checked.chk-col-purple + label:after { border: 2px solid #9C27B0; background-color: #9C27B0; } [type="checkbox"].filled-in:checked.chk-col-deep-purple + label:after { border: 2px solid #673AB7; background-color: #673AB7; } [type="checkbox"].filled-in:checked.chk-col-indigo + label:after { border: 2px solid #3F51B5; background-color: #3F51B5; } [type="checkbox"].filled-in:checked.chk-col-blue + label:after { border: 2px solid #2196F3; background-color: #2196F3; } [type="checkbox"].filled-in:checked.chk-col-light-blue + label:after { border: 2px solid #03A9F4; background-color: #03A9F4; } [type="checkbox"].filled-in:checked.chk-col-cyan + label:after { border: 2px solid #00BCD4; background-color: #00BCD4; } [type="checkbox"].filled-in:checked.chk-col-teal + label:after { border: 2px solid #009688; background-color: #009688; } [type="checkbox"].filled-in:checked.chk-col-green + label:after { border: 2px solid #4CAF50; background-color: #4CAF50; } [type="checkbox"].filled-in:checked.chk-col-light-green + label:after { border: 2px solid #8BC34A; background-color: #8BC34A; } [type="checkbox"].filled-in:checked.chk-col-lime + label:after { border: 2px solid #CDDC39; background-color: #CDDC39; } [type="checkbox"].filled-in:checked.chk-col-yellow + label:after { border: 2px solid #ffe821; background-color: #ffe821; } [type="checkbox"].filled-in:checked.chk-col-amber + label:after { border: 2px solid #FFC107; background-color: #FFC107; } [type="checkbox"].filled-in:checked.chk-col-orange + label:after { border: 2px solid #FF9800; background-color: #FF9800; } [type="checkbox"].filled-in:checked.chk-col-deep-orange + label:after { border: 2px solid #FF5722; background-color: #FF5722; } [type="checkbox"].filled-in:checked.chk-col-brown + label:after { border: 2px solid #795548; background-color: #795548; } [type="checkbox"].filled-in:checked.chk-col-grey + label:after { border: 2px solid #9E9E9E; background-color: #9E9E9E; } [type="checkbox"].filled-in:checked.chk-col-blue-grey + label:after { border: 2px solid #607D8B; background-color: #607D8B; } [type="checkbox"].filled-in:checked.chk-col-black + label:after { border: 2px solid #000000; background-color: #000000; } [type="checkbox"].filled-in:checked.chk-col-white + label:after { border: 2px solid #ffffff; background-color: #ffffff; } [type="radio"]:not(:checked) + label { padding-left: 26px; height: 25px; line-height: 25px; font-size: 13px; font-weight: normal; } [type="radio"]:checked + label { padding-left: 26px; height: 25px; line-height: 25px; font-size: 13px; font-weight: normal; } [type="radio"].radio-col-red:checked + label:after { background-color: #F44336; border-color: #F44336; } [type="radio"].radio-col-pink:checked + label:after { background-color: #E91E63; border-color: #E91E63; } [type="radio"].radio-col-purple:checked + label:after { background-color: #9C27B0; border-color: #9C27B0; } [type="radio"].radio-col-deep-purple:checked + label:after { background-color: #673AB7; border-color: #673AB7; } [type="radio"].radio-col-indigo:checked + label:after { background-color: #3F51B5; border-color: #3F51B5; } [type="radio"].radio-col-blue:checked + label:after { background-color: #2196F3; border-color: #2196F3; } [type="radio"].radio-col-light-blue:checked + label:after { background-color: #03A9F4; border-color: #03A9F4; } [type="radio"].radio-col-cyan:checked + label:after { background-color: #00BCD4; border-color: #00BCD4; } [type="radio"].radio-col-teal:checked + label:after { background-color: #009688; border-color: #009688; } [type="radio"].radio-col-green:checked + label:after { background-color: #4CAF50; border-color: #4CAF50; } [type="radio"].radio-col-light-green:checked + label:after { background-color: #8BC34A; border-color: #8BC34A; } [type="radio"].radio-col-lime:checked + label:after { background-color: #CDDC39; border-color: #CDDC39; } [type="radio"].radio-col-yellow:checked + label:after { background-color: #ffe821; border-color: #ffe821; } [type="radio"].radio-col-amber:checked + label:after { background-color: #FFC107; border-color: #FFC107; } [type="radio"].radio-col-orange:checked + label:after { background-color: #FF9800; border-color: #FF9800; } [type="radio"].radio-col-deep-orange:checked + label:after { background-color: #FF5722; border-color: #FF5722; } [type="radio"].radio-col-brown:checked + label:after { background-color: #795548; border-color: #795548; } [type="radio"].radio-col-grey:checked + label:after { background-color: #9E9E9E; border-color: #9E9E9E; } [type="radio"].radio-col-blue-grey:checked + label:after { background-color: #607D8B; border-color: #607D8B; } [type="radio"].radio-col-black:checked + label:after { background-color: #000000; border-color: #000000; } [type="radio"].radio-col-white:checked + label:after { background-color: #ffffff; border-color: #ffffff; } [type="radio"].with-gap.radio-col-red:checked + label:before { border: 2px solid #F44336; } [type="radio"].with-gap.radio-col-red:checked + label:after { background-color: #F44336; border: 2px solid #F44336; } [type="radio"].with-gap.radio-col-pink:checked + label:before { border: 2px solid #E91E63; } [type="radio"].with-gap.radio-col-pink:checked + label:after { background-color: #E91E63; border: 2px solid #E91E63; } [type="radio"].with-gap.radio-col-purple:checked + label:before { border: 2px solid #9C27B0; } [type="radio"].with-gap.radio-col-purple:checked + label:after { background-color: #9C27B0; border: 2px solid #9C27B0; } [type="radio"].with-gap.radio-col-deep-purple:checked + label:before { border: 2px solid #673AB7; } [type="radio"].with-gap.radio-col-deep-purple:checked + label:after { background-color: #673AB7; border: 2px solid #673AB7; } [type="radio"].with-gap.radio-col-indigo:checked + label:before { border: 2px solid #3F51B5; } [type="radio"].with-gap.radio-col-indigo:checked + label:after { background-color: #3F51B5; border: 2px solid #3F51B5; } [type="radio"].with-gap.radio-col-blue:checked + label:before { border: 2px solid #2196F3; } [type="radio"].with-gap.radio-col-blue:checked + label:after { background-color: #2196F3; border: 2px solid #2196F3; } [type="radio"].with-gap.radio-col-light-blue:checked + label:before { border: 2px solid #03A9F4; } [type="radio"].with-gap.radio-col-light-blue:checked + label:after { background-color: #03A9F4; border: 2px solid #03A9F4; } [type="radio"].with-gap.radio-col-cyan:checked + label:before { border: 2px solid #00BCD4; } [type="radio"].with-gap.radio-col-cyan:checked + label:after { background-color: #00BCD4; border: 2px solid #00BCD4; } [type="radio"].with-gap.radio-col-teal:checked + label:before { border: 2px solid #009688; } [type="radio"].with-gap.radio-col-teal:checked + label:after { background-color: #009688; border: 2px solid #009688; } [type="radio"].with-gap.radio-col-green:checked + label:before { border: 2px solid #4CAF50; } [type="radio"].with-gap.radio-col-green:checked + label:after { background-color: #4CAF50; border: 2px solid #4CAF50; } [type="radio"].with-gap.radio-col-light-green:checked + label:before { border: 2px solid #8BC34A; } [type="radio"].with-gap.radio-col-light-green:checked + label:after { background-color: #8BC34A; border: 2px solid #8BC34A; } [type="radio"].with-gap.radio-col-lime:checked + label:before { border: 2px solid #CDDC39; } [type="radio"].with-gap.radio-col-lime:checked + label:after { background-color: #CDDC39; border: 2px solid #CDDC39; } [type="radio"].with-gap.radio-col-yellow:checked + label:before { border: 2px solid #ffe821; } [type="radio"].with-gap.radio-col-yellow:checked + label:after { background-color: #ffe821; border: 2px solid #ffe821; } [type="radio"].with-gap.radio-col-amber:checked + label:before { border: 2px solid #FFC107; } [type="radio"].with-gap.radio-col-amber:checked + label:after { background-color: #FFC107; border: 2px solid #FFC107; } [type="radio"].with-gap.radio-col-orange:checked + label:before { border: 2px solid #FF9800; } [type="radio"].with-gap.radio-col-orange:checked + label:after { background-color: #FF9800; border: 2px solid #FF9800; } [type="radio"].with-gap.radio-col-deep-orange:checked + label:before { border: 2px solid #FF5722; } [type="radio"].with-gap.radio-col-deep-orange:checked + label:after { background-color: #FF5722; border: 2px solid #FF5722; } [type="radio"].with-gap.radio-col-brown:checked + label:before { border: 2px solid #795548; } [type="radio"].with-gap.radio-col-brown:checked + label:after { background-color: #795548; border: 2px solid #795548; } [type="radio"].with-gap.radio-col-grey:checked + label:before { border: 2px solid #9E9E9E; } [type="radio"].with-gap.radio-col-grey:checked + label:after { background-color: #9E9E9E; border: 2px solid #9E9E9E; } [type="radio"].with-gap.radio-col-blue-grey:checked + label:before { border: 2px solid #607D8B; } [type="radio"].with-gap.radio-col-blue-grey:checked + label:after { background-color: #607D8B; border: 2px solid #607D8B; } [type="radio"].with-gap.radio-col-black:checked + label:before { border: 2px solid #000000; } [type="radio"].with-gap.radio-col-black:checked + label:after { background-color: #000000; border: 2px solid #000000; } [type="radio"].with-gap.radio-col-white:checked + label:before { border: 2px solid #ffffff; } [type="radio"].with-gap.radio-col-white:checked + label:after { background-color: #ffffff; border: 2px solid #ffffff; } /* Switch ====================================== */ .switch label { font-weight: normal; font-size: 13px; } .switch label .lever { margin: 0 14px; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-red:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(244, 67, 54, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-red { background-color: rgba(244, 67, 54, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-red:after { background-color: #F44336; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-pink:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-pink { background-color: rgba(233, 30, 99, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-pink:after { background-color: #E91E63; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-purple:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-purple { background-color: rgba(156, 39, 176, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-purple:after { background-color: #9C27B0; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-deep-purple:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-deep-purple { background-color: rgba(103, 58, 183, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-deep-purple:after { background-color: #673AB7; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-indigo:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-indigo { background-color: rgba(63, 81, 181, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-indigo:after { background-color: #3F51B5; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-blue:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(33, 150, 243, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-blue { background-color: rgba(33, 150, 243, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-blue:after { background-color: #2196F3; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-light-blue:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-light-blue { background-color: rgba(3, 169, 244, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-light-blue:after { background-color: #03A9F4; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-cyan:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-cyan { background-color: rgba(0, 188, 212, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-cyan:after { background-color: #00BCD4; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-teal:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-teal { background-color: rgba(0, 150, 136, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-teal:after { background-color: #009688; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-green:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(76, 175, 80, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-green { background-color: rgba(76, 175, 80, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-green:after { background-color: #4CAF50; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-light-green:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-light-green { background-color: rgba(139, 195, 74, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-light-green:after { background-color: #8BC34A; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-lime:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-lime { background-color: rgba(205, 220, 57, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-lime:after { background-color: #CDDC39; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-yellow:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-yellow { background-color: rgba(255, 232, 33, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-yellow:after { background-color: #ffe821; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-amber:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-amber { background-color: rgba(255, 193, 7, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-amber:after { background-color: #FFC107; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-orange:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-orange { background-color: rgba(255, 152, 0, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-orange:after { background-color: #FF9800; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-deep-orange:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-deep-orange { background-color: rgba(255, 87, 34, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-deep-orange:after { background-color: #FF5722; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-brown:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-brown { background-color: rgba(121, 85, 72, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-brown:after { background-color: #795548; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-grey:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-grey { background-color: rgba(158, 158, 158, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-grey:after { background-color: #9E9E9E; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-blue-grey:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-blue-grey { background-color: rgba(96, 125, 139, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-blue-grey:after { background-color: #607D8B; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-black:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-black { background-color: rgba(0, 0, 0, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-black:after { background-color: #000000; } .switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-white:active:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1); } .switch label input[type=checkbox]:checked + .lever.switch-col-white { background-color: rgba(255, 255, 255, 0.5); } .switch label input[type=checkbox]:checked + .lever.switch-col-white:after { background-color: #ffffff; } /* DateTime Picker ============================= */