@charset "utf-8";

/* -- Tip Calculator Styles --*/
body {background:#a5cbcc;color:#426465;}
h1 {font-size:30px;font-weight:100;margin-bottom:5px;}
h2 {font-weight:900;}
.top h1 {float:left;}
.top h2 {font-size:30px;float:right;text-align:right;}
.bottom h2 {font-size:60px;color:#426465;}
#container {width:500px;margin:0 auto;}
.top {width:100%;padding:30px;background:#e7e7e7;}
.bottom {width:100%;padding:30px;background:white;}
#billInput {border:none;height:60px;width:100%;border-radius:5px;background-color:#a5cbcc;background-image:url(../img/money.gif);background-repeat:no-repeat;background-size:54px;color:#426465;font-size:40px;font-weight:900;padding-left:65px;box-sizing:border-box;margin:0;-webkit-transition:.2s;transition:.2s;}
#billInput:focus {background-color:white;padding-left:40px}
#billInput:focus::placeholder {color:white;}
input::placeholder {color:#81acad;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.svgMoney {fill:#a5cbcc;width:34px;position:relative;bottom:47px;left:11px;}
#billInput:focus + .svgMoney {fill:#426465;}

/* -- Restyle Range Selectors -- */
#tipInput, #splitInput {-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:#a5cbcc;outline:none;}
#tipInput::-webkit-slider-thumb, #splitInput::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:white;cursor:pointer;box-shadow:none;border:none;}
#tipInput::-moz-range-thumb, #splitInput::-moz-range-thumb {width:25px;height:25px;border-radius:50%;background:#426465;cursor:pointer;}

/* -- Restyle Checkbox -- */
.switch {position:relative;width:60px;height:34px;float:right;bottom:47px;}
.switch input {display:none;}
.slider {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#a5cbcc;-webkit-transition:.4s;transition:.4s;background-image:url(../img/yes.png);background-position:36px;background-repeat:no-repeat;}
.slider:before {position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s;}
input:checked + .slider {background-color:#E17273;background-image:url(../img/no.png);background-repeat:no-repeat;background-position:10px;}
input:focus + .slider {box-shadow:none;}
input:checked + .slider:before {-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}
.slider.round {border-radius:34px !important;}
.slider.round:before {border-radius:50%;}
#switchLabelOne, #switchLabelTwo {font-size:10px;font-weight:900;position:relative;top:-18px;left:12px;}
#switchLabelTwo {left:4px;}

/* -- Media Quieries -- */
@media only screen and (max-width: 500px) {
	#container {width:100%;}
	.switch {transition:.2s;}
}

@media only screen and (max-width: 340px) {
	.switch {position:relative;bottom:0;width:60px;height:34px;float:none;display:block;margin-top:40px;}
}