* {box-sizing: border-box; outline: none;}
html, body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px;}

body {margin: 0;background-color: #fafafa;min-height: 100vh;}

.wrapper {max-width: 1240px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-evenly;padding: 40px 0;}

.header {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 0 20px;margin-bottom: 40px;}
.main-title {margin: 0;}

.card {position: relative;background-color: #fff;margin: 0 15px 30px;padding: 30px;border-radius: 4px;border: 1px solid #ddd;width: 380px;min-width: 30%;max-width: 100%;}
.card {box-shadow: 0 1px 6px -2px rgba(0,0,0,0.3);}
.card.rounded {border-radius: 10px;}
.card .card-title {margin-bottom: 30px; margin-top: 0; font-weight: 900;}


/* form */
.form .group {position: relative; display: flex; flex-direction: column}
.form .group:not(:last-child) {margin-bottom: 30px;}
.form .group .control {padding: 14px 20px; font-size: 16px; display: inline-block; width: 100%;border: 1px solid #ddd;border-radius: 4px;}
.form .group .control-label {font-weight: bold; display: inline-block;}


/* design variation 1 */
.form.v1 .group .control {order: 1;}
.form.v1 .group .control-label {margin-bottom: 5px;}
.form.v1 .group .control-label:after {content: ':'}


/* design variation 2 */
.form.v2 .group .control {border-radius: 7px;}
.form.v2 .group .control-label {position: absolute; font-size: 16px; font-weight: normal; padding: 0 8px; top: 50%; left: 14px; transform: translate3d(0,-50%,0); background-color: #fff; transition: 0.15s all; color: #333;}
.form.v2 .group .control:focus ~ .control-label,
.form.v2 .group .control:not(:placeholder-shown) ~ .control-label {top: 0; left: 10px; color: #666;}
.form.v2 .group .control::placeholder {color: #fff;}
.form.v2 .group .control:focus {border-color: #1c6ae0; box-shadow: inset 0 0 1px 0 #1c6ae0}

.button {background-color: transparent;border: 1px solid transparent;padding: 10px 20px;font-size: 16px;border-radius: 4px;margin-right: 30px;cursor: pointer;box-shadow: 0 5px 8px -5px rgba(0,0,0,0.15);transition: 0.25s all;}
.button,
.button:hover,
.button:focus {background-color: #1c6ae0; color: #fff;}
.button + span {display: block;}



.wrapper {counter-reset: c;}
.card {counter-increment: c; overflow: hidden; border-color: #1c6ae0;}
.card::before {content: counter(c);position: absolute;bottom: 15px;right: 15px;font-size: 34px;opacity: 1;text-shadow: 0 3px 6px rgba(0,0,0,0.5);font-weight: 900;font-style: italic;z-index: 1;color: #fff;}
.card::after {content: '';height: 160px;width: 160px;display: block;background: #1c6ae0;position: absolute;right: 0;bottom: 0;transform: rotate(45deg) translate3d(75%,0%,0);z-index: 0; box-shadow: -6px 0 7px -6px rgba(0,0,0,0.75)}



/* override */
body .card {border:0;}

/* dark theme */
body.dark {background-color: #282828; background-image: none;}
body.dark .main-title {color: #fff;}
body.dark .card {color: #fff;background-color: #212121;border: 1px solid #000;}
body.dark .card {box-shadow: 0 1px 8px -1px rgba(0,0,0,0.9);}
body.dark .card .form .group .control {background-color: #212121; color: #fff; border-color: #000}
body.dark .card .form.v2 .group .control-label {background-color: #212121; color: #fff;}
body.dark .card .form.v2 .group .control::placeholder {color: #666;}

/* toggle switch */
.dark-mode .dark_mode {position: absolute; opacity:0; visivility: hidden;}
.dark-mode .dark_mode-label {font-size: 0;position: relative;display: block;cursor: pointer;}
.dark-mode .dark_mode-label::after {content: '';height: 10px;width: 30px;display: block;background: #ccc;border-radius: 5px;}
.dark-mode .dark_mode-label::before {content: '';height: 20px;width: 20px;display: block;position: absolute;top: 50%;left: 0;transform: translate3d(-50%, -50%, 0);background-color: #fff;border-radius: 50%;transition: 0.25s; box-shadow: 0 0 3px rgba(0,0,0,0.2)}
.dark-mode .dark_mode:checked ~ .dark_mode-label::before {left: 100%; background-color: #000;}


body:not(.dark) {background-image: url(https://background-tiles.com/overview/white/patterns/large/1018.png)}
body.dark {background-image: url(http://metaldogfilms.com/wp-content/uploads/2016/12/black_paper_floral_seamless_pattern_vector_583192.jpg)}


body.modal-open{overflow: hidden;}
body:not(.modal-open) .calculator-modal {display: none;}

.calculator-modal {position: fixed;top: 0;left: 0;height: 100%;width: 100%;overflow-y: auto;background-color: rgba(250, 250, 250, 0.89);z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.calculator * {font-family: 'Roboto', sans-serif; font-weight: 100;}
.calculator {border:1px solid #333;box-shadow: 0 7px 18px rgba(0,0,0,0.5); width: 300px; text-transform: uppercase; margin-bottom: 30px;}
.calculator .calculator-display {background-color: #212121; color: #fff; padding: 15px; text-align: right; font-size: 40px;}

.calculator .calculator-ans {min-height: 48px;}

.calculator .calculator-inputs {display: flex; margin-left: -1px;}
.calculator .calculator-inputs .inputs-row {display:flex;}

.calculator .calculator-inputs .calculator-inputs-left {width: 75%}
.calculator .calculator-inputs .calculator-inputs-right {width: 25%}

.calculator .calculator-inputs .calculator-input {position: relative; cursor: pointer; background-color: #ddd; border: 1px solid #333; border-collapse: collapse; height: 65px; font-size: 30px; padding: 0;}

.calculator .calculator-inputs .calculator-inputs-left .inputs-row {flex-wrap: wrap;}
.calculator .calculator-inputs .calculator-inputs-left .calculator-input {min-width: 33.336%;}
.calculator .calculator-inputs .calculator-inputs-left .calculator-input.d-width {min-width: 66.6667%;}

.calculator .calculator-inputs .calculator-inputs-right .inputs-row {flex-direction:column;}
.calculator .calculator-inputs .calculator-input.input-darker {background-color: #999;}
.calculator .calculator-inputs .calculator-input.input-orange {background-color: #f90; color: #fff}

.calculator .calculator-inputs .calculator-input:active:before {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 100%;background-color: rgba(0,0,0,0.09);}

.calculator .calculator-inputs .inputs-row.numbers {flex-direction: row-reverse;}
.calculator .calculator-inputs .inputs-row.numbers .calculator-input:nth-last-child(2) {order: 1;}

.calculator .calculator-inputs .calculator-input:nth-child(1),
.calculator .calculator-inputs .calculator-input + .calculator-input {border-bottom: 0; border-right: 0;}